:root {
	color-scheme: dark;
	--forest: #65412c;
	--ivory: #eee4cc;
	--gold: #cfb581;
	--line: rgba(207, 181, 129, .4);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-width: 300px;
	min-height: 100svh;
	padding: 20px;
	color: var(--ivory);
	background: var(--forest);
	font-family: Georgia, 'Times New Roman', serif;
	-webkit-font-smoothing: antialiased;
}

button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
#garden-background { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.game-layout { position: relative; width: min(860px, calc(100svh - 40px), 100%); margin: 0 auto; }
.table-frame {
	position: relative;
	border: 12px solid transparent;
	border-radius: 34px 34px 18px 18px;
	padding: 10px;
	background:
		linear-gradient(110deg, #5b3623, #8a5735 38%, #462c1e) padding-box,
		linear-gradient(135deg, #cba76a, #79512e 22%, #bd9453 48%, #654324 77%, #b18a4e) border-box;
	box-shadow: 0 18px 38px #140d0b85, 0 3px 5px #120c09aa, inset 0 0 0 2px #e5cfa080;
}
.table-frame::before, .table-frame::after { content: ''; position: absolute; pointer-events: none; border-radius: inherit; }
.table-frame::before { inset: -7px; border: 2px solid #dfc18a90; }
.table-frame::after { inset: 3px; border: 2px solid #362318; }
#ur-board { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: none; cursor: default; }
.board-art { position: absolute; inset: 0; pointer-events: none; }
.board-art img { display: block; width: 100%; height: 100%; }
.board-surface { position: relative; touch-action: none; border-radius: 18px 18px 6px 6px; }
.table-ornament { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none; }
#ur-pieces { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.dice-panel {
	position: absolute; left: 69%; top: 4%; width: 23%; padding: 10px 0;
	border: 3px solid #bfa371; border-radius: 82px 82px 26px 26px;
	text-align: center;
	background: radial-gradient(ellipse at 40% 0%, #b99b5940, transparent 75%), #303b2a;
	box-shadow: 0 4px 8px #21140d66, inset 0 0 0 4px #263325, inset 0 0 0 6px #b3976470;
	z-index: 1; pointer-events: none;
}
.dice-tray { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 82%; gap: 2px; margin: 0 auto; }
.die { display: block; width: 100%; height: auto; transform: rotate(-9deg); }
.die:nth-child(2) { transform: rotate(8deg); }
.die:nth-child(3) { transform: rotate(-5deg); }
.die:nth-child(4) { transform: rotate(12deg); }
.die-left { fill: #d6c398; stroke: #edd6a2; stroke-width: .8; }
.die-right { fill: #aa9061; stroke: #e0c796; stroke-width: .8; }
.die-edge { fill: none; stroke: #ead6ac; stroke-width: .7; opacity: .5; }
.die-dot { fill: #f9ecd0; stroke: #5e624e; stroke-width: .7; opacity: .18; }
.die.marked .die-dot { opacity: 1; }
.rolling .die { animation: cast .55s ease-in-out infinite alternate; }
.rolling .die:nth-child(2) { animation-delay: -.15s; }
.rolling .die:nth-child(3) { animation-delay: -.3s; }
.rolling .die:nth-child(4) { animation-delay: -.4s; }
.dice-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
#dice-result { min-width: 20px; font-size: clamp(22px, 3vw, 36px); line-height: 1; }
#roll-button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 11px; background: linear-gradient(145deg, #ecdbad, #b79862); color: #264b3b; border: 1px solid #e0cea5; border-radius: 44% 44% 48% 48%; cursor: pointer; transition: background .2s, box-shadow .2s; pointer-events: auto; box-shadow: inset 0 0 0 3px #c4aa7390; }
#roll-button:hover { background: #e0cda1; box-shadow: inset 0 0 0 3px #ad905c, 0 0 12px #cbb78328; }
#roll-button:disabled { opacity: .45; cursor: wait; }
#roll-button svg { width: 100%; height: 100%; fill: currentColor; }
#roll-button .stop-icon, #roll-button.rolling .roll-icon { display: none; }
#roll-button.rolling .stop-icon { display: block; }
.connection-dot { display: block; width: 4px; height: 4px; margin: 8px auto 0; border-radius: 50%; background: #aa8558; }
.connection-dot.connected { background: #a8bd92; box-shadow: 0 0 9px #a8bd9244; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ur-house-return { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 100; padding: 12px 18px; color: #eee9d7; background: #243a30f5; border: 1px solid #c2b28188; border-radius: 3px; font: 12px/1.4 Georgia, serif; text-decoration: none; }

@keyframes cast { from { transform: translateY(-3px) rotate(-12deg); } to { transform: translateY(4px) rotate(15deg); } }

@media (max-width: 760px) {
	body { padding: 12px; }
	.game-layout { width: min(100%, calc(100svh - 24px)); }
	.table-frame { padding: 5px; border-width: 7px; border-radius: 20px 20px 12px 12px; }
	.table-frame::before { inset: -4px; }
	.board-surface { border-radius: 9px 9px 4px 4px; }
	.dice-panel { border-radius: 45px 45px 15px 15px; padding: 8px 0; }
	.dice-controls { gap: 4px; }
	#dice-result { min-width: 14px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }