@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=DM+Mono:wght@400;500&family=IM+Fell+English+SC&family=Manrope:wght@400;500;600;700;800&family=UnifrakturCook:wght@700&display=swap');

:root {
  --ink: #0c090b;
  --ink-soft: #170f13;
  --wood: #23130f;
  --paper: #e6d9c0;
  --paper-soft: #a99a86;
  --cyan: #a8d4c8;
  --cyan-dim: rgba(168, 212, 200, 0.30);
  --cyan-faint: rgba(168, 212, 200, 0.10);
  --gold: #c58a47;
  --gold-bright: #f2c884;
  --red: #a42839;
  --muted: #887c7b;
  --line: rgba(190, 160, 126, 0.23);
  --panel: rgba(18, 11, 15, 0.91);
  --wine: #40131e;
  --wine-bright: #7a2230;
  --display: 'Cinzel', Georgia, serif;
  --blackletter: 'UnifrakturCook', 'Old English Text MT', var(--display);
  --body: 'Manrope', 'Segoe UI', sans-serif;
  --mono: 'DM Mono', Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); font-family: var(--body); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--ink); }
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; color: var(--ink); background: var(--gold); }
.skip-link:focus { top: 1rem; }
.prototype-shell { min-height: 100vh; overflow: hidden; position: relative; }

.intro-screen { min-height: 100vh; position: relative; display: grid; align-items: center; isolation: isolate; overflow: hidden; background: #130c08 url('../docs/original_design/board/yv5hu h.jpg') center / cover; }
.intro-screen::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8, 14, 13, .97) 0%, rgba(10, 15, 13, .78) 45%, rgba(12, 10, 8, .35) 100%); }
.intro-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 72% 48%, rgba(245, 200, 98, .24), transparent 24%), radial-gradient(circle at 82% 18%, rgba(86, 236, 243, .2), transparent 25%), linear-gradient(transparent 0 65%, rgba(0, 0, 0, .55)); mix-blend-mode: screen; pointer-events: none; }
.intro-grid, .board-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(86, 236, 243, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(86, 236, 243, .13) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, black 0, transparent 90%); }
.intro-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 68% 50%, transparent 0 18%, rgba(4, 8, 8, .4) 55%, rgba(2, 5, 5, .9) 100%); pointer-events: none; }
.corner-mark { position: absolute; width: 140px; height: 140px; border-color: var(--cyan); opacity: .85; }
.corner-mark--top-left { left: 1.3rem; top: 1.3rem; border-left: 2px solid; border-top: 2px solid; }
.corner-mark--top-right { right: 1.3rem; top: 1.3rem; border-right: 2px solid; border-top: 2px solid; }
.intro-copy { width: min(690px, calc(100% - 3rem)); margin-left: clamp(2rem, 9vw, 11rem); padding: 5rem 0 7rem; animation: rise-in .8s var(--ease) both; }
.eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--paper-soft); font: 500 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.eyebrow--cyan { color: var(--cyan); }
.eyebrow--gold { color: var(--gold); }
.eyebrow-dot { width: .45rem; height: .45rem; display: inline-block; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.brand-lockup { margin: 2.2rem 0 1.25rem; color: var(--gold-bright); font: 600 clamp(3.1rem, 7.7vw, 7.4rem)/.83 var(--display); letter-spacing: -.06em; text-shadow: 0 0 28px rgba(245, 200, 98, .35), 0 4px 0 rgba(80, 43, 15, .65); }
.brand-lockup span { display: block; margin-left: .08em; color: var(--paper); font-size: .41em; letter-spacing: .04em; text-transform: uppercase; }
.brand-lockup strong { display: block; }
.intro-tagline { margin: 0; color: var(--cyan); font: 500 1.06rem/1.5 var(--mono); letter-spacing: .06em; }
.intro-description { width: min(440px, 100%); margin: 1.7rem 0 2.2rem; color: rgba(235, 221, 182, .82); font-size: 1rem; line-height: 1.8; }
.intro-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.button { min-height: 2.7rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid var(--cyan-dim); color: var(--paper); background: rgba(12, 33, 34, .62); transition: transform .2s var(--ease), border-color .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); border-color: var(--cyan); color: white; background: rgba(26, 76, 77, .65); }
.button--large { min-height: 3.5rem; padding: 0 1.35rem; }
.button--small { min-height: 2rem; padding: 0 .8rem; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.button--gold { border-color: var(--gold); color: var(--ink); background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 22px rgba(245, 200, 98, .16); font-weight: 800; }
.button--gold:hover { color: var(--ink); border-color: white; background: white; }
.button--ghost { border-color: rgba(232, 211, 168, .25); background: transparent; color: var(--paper-soft); }
.button--outline { background: transparent; }
.button-arrow { font-size: 1.2rem; }
.intro-specs { display: flex; flex-wrap: wrap; gap: 1.9rem; margin-top: 4rem; padding-top: 1.3rem; border-top: 1px solid rgba(86, 236, 243, .26); }
.intro-specs div { display: grid; gap: .35rem; }
.spec-label, .panel-kicker, .asset-tag { color: var(--cyan); font: 500 .63rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.spec-value { color: var(--paper); font-size: .8rem; }
.intro-art-note { position: absolute; right: clamp(2rem, 8vw, 9rem); bottom: 11rem; display: grid; gap: .7rem; max-width: 210px; color: rgba(235, 221, 182, .62); font: .65rem/1.6 var(--mono); text-align: right; animation: fade-in 1.2s .3s both; }
.intro-art-note .asset-tag { color: var(--gold); font-size: .55rem; }
.intro-footer { position: absolute; right: 2rem; bottom: 1.5rem; left: 2rem; display: flex; align-items: center; gap: 1rem; color: rgba(86, 236, 243, .55); font: .57rem var(--mono); letter-spacing: .15em; }
.footer-line { height: 1px; flex: 1; background: linear-gradient(90deg, var(--cyan-dim), transparent); }

.board-screen { min-height: 100vh; position: relative; background: radial-gradient(circle at 60% 20%, #133638, var(--ink) 48%); }
.board-screen::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .2; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 4px); mix-blend-mode: screen; }
.topbar { position: relative; z-index: 4; min-height: 4.6rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .7rem clamp(1rem, 3vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(5, 20, 22, .83); backdrop-filter: blur(18px); }
.topbar-brand, .turn-status, .topbar-actions { display: flex; align-items: center; }
.topbar-brand { gap: .7rem; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font-size: 1.1rem; box-shadow: 0 0 14px var(--cyan-dim); }
.topbar-brand strong { display: block; color: var(--paper); font: 700 1rem var(--display); letter-spacing: .1em; }
.topbar-brand strong span { color: var(--cyan); }
.topbar-brand small { display: block; margin-top: .2rem; color: var(--muted); font: .55rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.turn-status { justify-content: center; gap: .75rem; color: var(--paper-soft); font: .65rem var(--mono); letter-spacing: .1em; }
.live-dot, .status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.turn-divider { width: 2.5rem; height: 1px; background: var(--line); }
.topbar-actions { justify-content: flex-end; gap: .7rem; }
.icon-button { width: 2.35rem; height: 2.35rem; display: inline-grid; place-items: center; border: 1px solid var(--line); color: var(--paper-soft); background: transparent; font-size: 1.3rem; transition: all .2s ease; }
.icon-button:hover { color: var(--cyan); border-color: var(--cyan); }
.board-content { width: min(1500px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.7rem, 4vw, 3.8rem) 0 2rem; }
.board-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.4rem; }
.board-heading h2 { margin: .65rem 0 0; color: var(--paper); font: 600 clamp(1.5rem, 3vw, 2.7rem)/1.1 var(--display); letter-spacing: -.03em; }
.board-heading-note { display: grid; justify-items: end; gap: .45rem; color: var(--muted); font: .58rem var(--mono); text-align: right; }
.board-heading-note .asset-tag { color: var(--gold); }
.board-viewport { --tilt-x: 0deg; --tilt-y: 0deg; min-height: min(57vw, 650px); position: relative; overflow: hidden; border: 1px solid var(--cyan-dim); background: #071c1e; box-shadow: 0 22px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(245,200,98,.1); isolation: isolate; perspective: 1200px; transform-style: preserve-3d; }
.board-plane { position: absolute; z-index: 0; inset: 7% 4% 8%; overflow: hidden; border: 1px solid rgba(86,236,243,.7); background: #5a4730 url('../docs/original_design/board/yv5hu h.jpg') center / cover; box-shadow: 0 20px 0 -10px rgba(7, 18, 18, .82), 0 38px 36px -22px rgba(0, 0, 0, .86), inset 0 0 0 5px rgba(245,200,98,.12); transform: rotateX(calc(38deg + var(--tilt-y))) rotateZ(calc(-2deg + var(--tilt-x))) scale(1.1); transform-origin: center 56%; transform-style: preserve-3d; transition: transform .25s var(--ease); }
.board-plane::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(86,236,243,.2), transparent 22%, rgba(6,19,20,.18) 65%, rgba(6,19,20,.65)), linear-gradient(90deg, rgba(5,16,17,.55), transparent 17%, transparent 80%, rgba(5,16,17,.4)); mix-blend-mode: multiply; }
.board-plane::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,227,160,.35); box-shadow: inset 0 0 34px rgba(86,236,243,.16); pointer-events: none; }
.plane-beacon { position: absolute; z-index: 2; display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--ink); background: var(--gold); box-shadow: 0 0 0 .4rem rgba(245,200,98,.12), 0 0 24px rgba(245,200,98,.82); transform: translateZ(48px); font: 700 .7rem var(--mono); }
.plane-beacon::after { content: ''; position: absolute; inset: -.75rem; border: 1px solid rgba(245,200,98,.38); border-radius: 50%; animation: pulse 2.4s ease-in-out infinite; }
.plane-beacon--mine { left: 43%; top: 30%; }.plane-beacon--pyramid { left: 79%; top: 59%; }
.plane-ledge { position: absolute; z-index: 1; height: 3rem; border: 1px solid rgba(86,236,243,.42); background: linear-gradient(90deg, rgba(86,236,243,.22), rgba(6,27,29,.7)); transform: translateZ(12px) skewX(-28deg); box-shadow: 0 16px 0 -7px rgba(7,18,18,.68); }
.plane-ledge--north { top: 19%; left: 27%; width: 24%; }.plane-ledge--south { right: 19%; bottom: 18%; width: 21%; }
.board-wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 27, 29, .38), rgba(6, 20, 20, .82)), radial-gradient(circle at 55% 45%, rgba(245, 200, 98, .16), transparent 27%); mix-blend-mode: multiply; }
.board-viewport::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(86, 236, 243, .13), transparent 44%); transform: translateX(-110%); animation: sweep 8s ease-in-out infinite; }
.board-grid { z-index: 0; opacity: .23; background-size: 40px 40px; mask-image: linear-gradient(180deg, black, transparent 96%); }
.board-scanline { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .15; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(86, 236, 243, .18) 9px, transparent 10px); }
.board-map-layer { position: absolute; z-index: 2; inset: 0; transform: rotateX(calc(38deg + var(--tilt-y))) rotateZ(calc(-2deg + var(--tilt-x))) scale(1.04); transform-origin: center 56%; transform-style: preserve-3d; transition: transform .25s var(--ease); }
.route-map { position: absolute; z-index: 2; inset: 8% 7%; width: 86%; height: 84%; overflow: visible; }
.route-shadow { fill: none; stroke: rgba(3, 13, 13, .8); stroke-width: 15; stroke-linecap: round; opacity: .75; }
.route-line { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; filter: url(#routeGlow); opacity: .72; }
.route-nodes circle { fill: #102b2c; stroke: var(--cyan); stroke-width: 2; filter: url(#routeGlow); transition: all .3s ease; cursor: pointer; }
.route-nodes circle:hover, .route-nodes circle.is-active { fill: var(--gold); stroke: var(--gold-bright); r: 10; }
.route-nodes circle.is-vendor { fill: var(--gold); stroke: var(--gold-bright); }
.route-nodes text { fill: var(--paper); font: 500 9px var(--mono); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.route-icons text { fill: var(--gold-bright); font: 1.4rem var(--display); opacity: .7; text-anchor: middle; }
.map-label { position: absolute; z-index: 3; display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; padding: .45rem .7rem .45rem .45rem; border: 1px solid rgba(86, 236, 243, .46); color: var(--paper); background: rgba(5, 22, 23, .78); box-shadow: 0 0 18px rgba(86, 236, 243, .09), 0 .8rem 0 -0.55rem rgba(7,18,18,.46); transform: translateZ(42px); font: .72rem var(--display); letter-spacing: .03em; }
.map-label small { grid-column: 2; color: var(--cyan); font: .52rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.map-pin { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; color: var(--ink); background: var(--cyan); font: .52rem var(--mono); }
.map-pin--gold { color: var(--ink); background: var(--gold); }
.map-label--woods { left: 12%; top: 62%; }
.map-label--mountain { left: 23%; top: 9%; }
.map-label--mine { left: 44%; top: 12%; }
.map-label--desert { left: 64%; top: 59%; }
.map-label--monastery { right: 7%; top: 16%; }
.map-label--cave { right: 14%; bottom: 12%; }
.board-art-slot { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 3; display: grid; gap: .35rem; padding: .55rem .7rem; border-left: 2px solid var(--gold); background: rgba(5, 19, 20, .66); color: rgba(232, 211, 168, .63); font: .56rem/1.4 var(--mono); }
.board-art-slot .asset-tag { color: var(--gold); font-size: .52rem; }
.player-token { position: absolute; z-index: 5; left: 10%; top: 72%; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; transform: translateZ(70px); transition: left .55s var(--ease), top .55s var(--ease); }
.token-ring { position: absolute; inset: 0; border: 2px solid var(--gold-bright); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(245, 200, 98, .2), 0 0 24px rgba(245, 200, 98, .85); animation: pulse 1.9s ease-in-out infinite; }
.token-core { position: relative; display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--gold); font: 800 .7rem var(--mono); }
.token-label { position: absolute; top: 2.7rem; padding: .2rem .35rem; color: var(--gold-bright); background: rgba(5, 19, 20, .8); font: .53rem var(--mono); letter-spacing: .1em; }
.map-callout { position: absolute; z-index: 4; left: 9%; top: 77%; display: flex; align-items: center; opacity: .85; pointer-events: none; transform: translateZ(54px); }
.callout-line { width: 3.7rem; height: 1px; background: var(--gold); }
.callout-card { display: grid; gap: .25rem; padding: .5rem .7rem; border: 1px solid var(--gold); background: rgba(7, 18, 18, .78); }
.callout-card strong { color: var(--gold); font: .56rem var(--mono); letter-spacing: .08em; }
.callout-card small { color: var(--paper-soft); font-size: .62rem; }
.board-legend { position: absolute; right: 1.3rem; bottom: 1rem; z-index: 4; display: flex; gap: 1rem; flex-wrap: wrap; color: rgba(232, 211, 168, .7); transform: translateZ(54px); font: .55rem var(--mono); }
.legend-dot { width: .5rem; height: .5rem; display: inline-block; margin-right: .35rem; border: 1px solid var(--cyan); border-radius: 50%; vertical-align: -1px; }
.legend-dot--active { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 7px var(--gold); }
.legend-dot--vendor { background: var(--gold); }
.legend-dot--hazard { background: var(--red); border-color: var(--red); }
.board-lower-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.35fr; gap: 1rem; margin-top: 1rem; }
.panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 12px 30px rgba(0, 0, 0, .15); }
.panel-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--line); }
.panel h3 { margin: .35rem 0 0; color: var(--paper); font: 600 1rem var(--display); }
.panel-kicker { color: var(--muted); font-size: .55rem; }
.status-pill, .live-label { padding: .3rem .45rem; color: var(--cyan); border: 1px solid var(--cyan-dim); font: .52rem var(--mono); text-transform: uppercase; }
.status-pill { display: flex; align-items: center; gap: .35rem; color: var(--paper-soft); border-color: var(--line); text-transform: none; }
.status-dot { width: .33rem; height: .33rem; }
.health-row { display: flex; align-items: center; gap: .3rem; padding: .8rem 1rem .35rem; }
.heart { color: rgba(232, 211, 168, .2); font-size: 1.15rem; }
.heart--full { color: var(--red); text-shadow: 0 0 10px rgba(255, 106, 94, .65); }
.health-text { margin-left: .4rem; color: var(--paper-soft); font: .58rem var(--mono); }
.player-stats { display: flex; align-items: center; justify-content: space-between; padding: .4rem 1rem .8rem; }
.coin-balance, .gear-slots { display: flex; align-items: center; gap: .55rem; }
.coin-symbol { color: var(--gold); font-size: 1.5rem; text-shadow: 0 0 10px rgba(245, 200, 98, .5); }
.coin-balance div { display: grid; gap: .2rem; }
.coin-balance small { color: var(--muted); font: .5rem var(--mono); letter-spacing: .12em; }
.coin-balance strong { color: var(--gold-bright); font: 700 1rem var(--mono); }
.gear-slot { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.gear-slot--filled { color: var(--cyan); border-color: var(--cyan-dim); }
.status-note, .inventory-footer { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font: .52rem var(--mono); }
.status-note .asset-tag, .inventory-footer .asset-tag { color: var(--gold); font-size: .48rem; }
.event-list { min-height: 8.2rem; padding: .35rem 1rem .75rem; }
.event-item { display: flex; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid rgba(145, 195, 190, .12); color: var(--paper-soft); font-size: .65rem; line-height: 1.4; }
.event-item:last-child { border-bottom: 0; }
.event-item b { color: var(--paper); }
.event-item--gold { color: var(--gold-bright); }
.event-time { min-width: 1.6rem; color: var(--muted); font: .52rem var(--mono); }
.text-button { border: 0; color: var(--cyan); background: transparent; font: .56rem var(--mono); }
.text-button:hover { color: white; }
.inventory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .75rem 1rem .9rem; }
.inventory-item { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: .45rem; padding: .5rem; border: 1px solid rgba(145, 195, 190, .15); background: rgba(20, 48, 48, .25); }
.inventory-item--featured { grid-column: 1 / -1; border-color: rgba(245, 200, 98, .35); }
.item-glyph { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; color: var(--gold); border: 1px solid currentColor; font-size: .7rem; }
.item-glyph--green { color: #9ee58d; }
.item-glyph--blue { color: var(--cyan); }
.item-glyph--dim { color: var(--muted); }
.inventory-item div { display: grid; gap: .18rem; }
.inventory-item strong { color: var(--paper); font-size: .63rem; }
.inventory-item small { color: var(--muted); font: .5rem var(--mono); }
.inventory-item b { color: var(--paper); font: .67rem var(--mono); }
.action-dock { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .75rem 1rem; border: 1px solid rgba(245, 200, 98, .26); background: linear-gradient(90deg, rgba(11, 34, 35, .9), rgba(27, 21, 12, .84)); }
.action-context { display: flex; align-items: center; gap: .7rem; }
.context-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
.action-context div { display: grid; gap: .25rem; }
.action-context small, .action-context strong { font-size: .58rem; }
.action-context small { color: var(--muted); font: .5rem var(--mono); letter-spacing: .1em; }
.action-context strong { color: var(--paper); font-weight: 600; }
.action-buttons { display: flex; gap: .6rem; }
.action-buttons .button { min-width: 7.1rem; padding: .35rem .75rem; flex-direction: column; gap: .2rem; }
.action-buttons .button span { font-size: .7rem; }
.action-buttons .button small { color: inherit; opacity: .65; font: .48rem var(--mono); }
.button--roll { min-width: 8rem !important; flex-direction: row !important; }
.button--roll strong { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgba(6, 19, 22, .35); font: 700 .85rem var(--mono); }

.quest-drawer { position: fixed; z-index: 8; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); padding: 2rem 1.4rem; border-left: 1px solid var(--cyan-dim); background: rgba(5, 20, 22, .97); box-shadow: -25px 0 60px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .45s var(--ease); }
.quest-drawer.is-open { transform: translateX(0); }
.drawer-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: .45rem 0 0; color: var(--paper); font: 600 1.4rem var(--display); }
.drawer-intro { color: var(--muted); font-size: .75rem; line-height: 1.6; }
.quest-card { margin-top: 1.1rem; padding: 1rem; border: 1px solid var(--line); background: rgba(16, 47, 47, .36); }
.quest-card--active { border-color: rgba(245, 200, 98, .45); }
.quest-card--locked { opacity: .66; }
.quest-card-head { display: flex; justify-content: space-between; align-items: center; }
.quest-icon { color: var(--gold); font-size: 1.25rem; }
.quest-state { color: var(--cyan); font: .55rem var(--mono); letter-spacing: .1em; }
.quest-card h3 { margin: .8rem 0 .4rem; color: var(--paper); font: 600 1rem var(--display); }
.quest-card p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.quest-progress, .meter-track { display: block; height: .35rem; overflow: hidden; margin: 1rem 0 .45rem; background: rgba(145, 195, 190, .15); }
.quest-progress span, .meter-track i { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.quest-meta { display: flex; justify-content: space-between; color: var(--muted); font: .58rem var(--mono); }
.quest-meta strong { color: var(--gold-bright); }
.drawer-footer { position: absolute; right: 1.4rem; bottom: 1.5rem; left: 1.4rem; display: grid; gap: .4rem; color: var(--muted); font: .55rem var(--mono); }
.drawer-footer .asset-tag { color: var(--gold); }

.modal-layer { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(1, 8, 9, .78); backdrop-filter: blur(8px); }
.modal { position: relative; width: min(720px, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--cyan); background: linear-gradient(135deg, rgba(12, 47, 47, .98), rgba(8, 23, 24, .98)); box-shadow: 0 0 0 1px rgba(245,200,98,.13), 0 30px 80px rgba(0,0,0,.65), 0 0 40px rgba(86,236,243,.14); animation: modal-in .35s var(--ease) both; }
.modal::before { content: ''; position: absolute; inset: .7rem; pointer-events: none; border: 1px solid rgba(86, 236, 243, .15); }
.modal-close { position: absolute; z-index: 1; top: 1rem; right: 1rem; }
.modal h2 { margin: 1rem 0 .7rem; color: var(--paper); font: 600 clamp(1.7rem, 4vw, 2.6rem) var(--display); }
.modal p { color: var(--paper-soft); line-height: 1.7; }
.brief-modal > *:not(.modal-close), .log-modal > *:not(.modal-close) { position: relative; }
.brief-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.5rem 0 1.8rem; }
.brief-loop div { display: grid; gap: .3rem; padding: 1rem; border: 1px solid var(--line); background: rgba(86, 236, 243, .06); }
.brief-loop b { color: var(--gold); font: .6rem var(--mono); }
.brief-loop span { color: var(--paper); font: 600 1rem var(--display); }
.brief-loop small { color: var(--muted); font-size: .65rem; line-height: 1.4; }
.modal-title-row { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.modal-title-row h2 { margin-bottom: .1rem; }
.modal-title-row p { margin-top: .6rem; }
.modal-art-slot { max-width: 150px; padding: .6rem; border: 1px dashed rgba(245, 200, 98, .5); color: var(--gold); font: .52rem/1.5 var(--mono); text-align: right; }
.workshop-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; margin-top: 1.4rem; }
.craft-side, .shop-side { padding: 1rem; border: 1px solid var(--line); }
.material-stack { margin: .8rem 0 1.2rem; }
.material-stack div { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid rgba(145, 195, 190, .12); color: var(--paper-soft); font-size: .7rem; }
.material-stack b { margin-left: auto; color: var(--paper); font: .7rem var(--mono); }
.material-icon, .shop-item-icon { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 1px solid var(--gold); color: var(--gold); }
.material-icon--green { color: #9ee58d; border-color: #9ee58d; }.material-icon--blue { color: var(--cyan); border-color: var(--cyan); }.material-icon--dim { color: var(--muted); border-color: var(--muted); }
.bucket-meter { display: grid; gap: .45rem; color: var(--muted); font: .58rem var(--mono); }.bucket-meter > div { display: flex; justify-content: space-between; }.bucket-meter b { color: var(--paper); }.meter-track { margin: 0; }
.shop-row { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .65rem; padding: .8rem 0; border-bottom: 1px solid rgba(145, 195, 190, .12); }.shop-row:last-child { border-bottom: 0; }.shop-row > div:nth-child(2) { display: grid; gap: .3rem; }.shop-row strong { color: var(--paper); font-size: .75rem; }.shop-row small { color: var(--muted); font-size: .58rem; }.shop-item-icon { font-size: .8rem; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }.modal-footer .asset-tag { color: var(--gold); }
.muted-copy { color: var(--muted) !important; font-size: .8rem; }.log-timeline { display: grid; gap: .8rem; margin-top: 1.4rem; }.log-timeline div { display: grid; gap: .3rem; padding: .9rem 1rem; border-left: 2px solid var(--cyan); background: rgba(86, 236, 243, .06); }.log-timeline span { color: var(--cyan); font: .55rem var(--mono); }.log-timeline strong { color: var(--paper); font-size: .8rem; }.log-timeline small { color: var(--muted); font-size: .62rem; }.log-timeline .log-timeline--gold { border-color: var(--gold); background: rgba(245, 200, 98, .06); }.log-timeline--gold span { color: var(--gold); }
.toast { position: fixed; z-index: 20; right: 1rem; bottom: 1rem; max-width: min(360px, calc(100% - 2rem)); padding: .8rem 1rem; border: 1px solid var(--gold); color: var(--gold-bright); background: rgba(8, 24, 24, .95); box-shadow: 0 12px 30px rgba(0,0,0,.4); transform: translateY(1rem); opacity: 0; pointer-events: none; font: .65rem/1.5 var(--mono); transition: all .25s var(--ease); }.toast.is-visible { transform: translateY(0); opacity: 1; }

/* Gothic skin: ash parchment, blackened walnut, oxblood, and relic-gold accents. */
body { background: radial-gradient(circle at 50% -20%, rgba(122, 34, 48, .24), transparent 44%), var(--ink); }
.intro-screen { background-color: #12090d; }
.intro-screen::before { background: linear-gradient(90deg, rgba(7, 5, 7, .98) 0%, rgba(18, 8, 13, .84) 45%, rgba(24, 10, 13, .48) 100%); }
.intro-screen::after { background: radial-gradient(circle at 72% 48%, rgba(164, 40, 57, .30), transparent 24%), radial-gradient(circle at 82% 18%, rgba(168, 212, 200, .14), transparent 25%), linear-gradient(transparent 0 65%, rgba(0, 0, 0, .68)); mix-blend-mode: screen; }
.intro-grid, .board-grid { background-image: linear-gradient(rgba(168, 212, 200, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 212, 200, .10) 1px, transparent 1px); }
.intro-vignette { background: radial-gradient(circle at 68% 50%, transparent 0 18%, rgba(6, 3, 6, .48) 55%, rgba(2, 1, 2, .94) 100%); }
.corner-mark { border-color: var(--gold); box-shadow: 0 0 20px rgba(164, 40, 57, .18); }
.brand-lockup { font-family: var(--blackletter); letter-spacing: -.04em; text-shadow: 0 0 28px rgba(164, 40, 57, .34), 0 4px 0 rgba(38, 12, 19, .78); }
.brand-lockup span { font-family: var(--display); letter-spacing: .14em; }
.intro-tagline { color: var(--cyan); }
.intro-description { color: rgba(230, 217, 192, .82); }
.button { border-radius: 0; clip-path: polygon(0 9px, 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px)); background: rgba(28, 13, 19, .72); }
.button:hover { border-color: var(--cyan); background: rgba(76, 24, 35, .72); }
.button--gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 26px rgba(197, 138, 71, .16), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.button--gold:hover { background: linear-gradient(135deg, #fff0cb, var(--gold-bright)); }
.button--ghost { border-color: rgba(230, 217, 192, .25); }
.intro-specs { border-top-color: rgba(197, 138, 71, .34); }
.intro-footer { color: rgba(168, 212, 200, .55); }
.footer-line { background: linear-gradient(90deg, var(--cyan-dim), transparent); }

.board-screen { background: radial-gradient(circle at 60% 20%, #2d111b, var(--ink) 52%); }
.board-screen::before { opacity: .22; background-image: repeating-linear-gradient(0deg, rgba(255, 242, 220, .035) 0, rgba(255, 242, 220, .035) 1px, transparent 1px, transparent 4px); }
.topbar { border-bottom-color: rgba(197, 138, 71, .26); background: rgba(13, 6, 10, .88); }
.brand-mark { border-color: var(--gold); color: var(--gold-bright); box-shadow: 0 0 14px rgba(164, 40, 57, .35); }
.topbar-brand strong span { color: var(--red); }
.live-dot, .status-dot { background: var(--cyan); box-shadow: 0 0 12px rgba(168, 212, 200, .8); }
.board-viewport { border-color: rgba(197, 138, 71, .48); background: #160b10; box-shadow: 0 22px 60px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(197, 138, 71, .12); }
.board-plane { border-color: rgba(197, 138, 71, .72); background-color: #2a1519; background-blend-mode: multiply; box-shadow: 0 20px 0 -10px rgba(18, 7, 12, .92), 0 38px 36px -22px rgba(0, 0, 0, .92), inset 0 0 0 5px rgba(197, 138, 71, .14); }
.board-plane::before { background: linear-gradient(180deg, rgba(164, 40, 57, .22), transparent 22%, rgba(18, 7, 12, .22) 65%, rgba(18, 7, 12, .72)), linear-gradient(90deg, rgba(14, 5, 8, .64), transparent 17%, transparent 80%, rgba(14, 5, 8, .5)); }
.board-plane::after { border-color: rgba(242, 200, 132, .38); box-shadow: inset 0 0 34px rgba(164, 40, 57, .22); }
.plane-beacon { box-shadow: 0 0 0 .4rem rgba(197, 138, 71, .12), 0 0 24px rgba(197, 138, 71, .72); }
.plane-beacon::after { border-color: rgba(197, 138, 71, .38); }
.plane-ledge { border-color: rgba(168, 212, 200, .36); background: linear-gradient(90deg, rgba(168, 212, 200, .18), rgba(25, 9, 15, .78)); }
.board-wash { background: linear-gradient(180deg, rgba(28, 7, 15, .44), rgba(18, 7, 12, .86)), radial-gradient(circle at 55% 45%, rgba(197, 138, 71, .14), transparent 27%); }
.board-scanline { background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(168, 212, 200, .13) 9px, transparent 10px); }
.route-shadow { stroke: rgba(9, 3, 7, .9); }
.route-line { stroke: var(--cyan); }
.route-nodes circle { fill: #1c0e14; stroke: var(--gold); }
.route-nodes circle:hover, .route-nodes circle.is-active { fill: var(--gold); stroke: var(--gold-bright); }
.route-nodes circle.is-vendor { fill: var(--red); stroke: var(--gold-bright); }
.map-label { border-color: rgba(197, 138, 71, .62); background: linear-gradient(135deg, rgba(25, 10, 16, .9), rgba(58, 17, 27, .76)); box-shadow: 0 0 18px rgba(164, 40, 57, .16), 0 .8rem 0 -0.55rem rgba(12, 4, 8, .56); }
.map-label small { color: var(--cyan); }
.map-pin { background: var(--gold); }
.map-pin--gold { background: var(--red); }
.board-art-slot { background: rgba(18, 7, 12, .76); }
.token-ring { box-shadow: 0 0 0 .25rem rgba(197, 138, 71, .2), 0 0 24px rgba(197, 138, 71, .76); }
.token-label { background: rgba(18, 7, 12, .84); }
.callout-card { background: rgba(18, 7, 12, .84); }
.panel { border-color: rgba(197, 138, 71, .18); background: var(--panel); }
.panel-header { border-bottom-color: rgba(197, 138, 71, .18); }
.status-pill, .live-label { color: var(--gold-bright); border-color: rgba(197, 138, 71, .38); }
.heart--full { text-shadow: 0 0 10px rgba(164, 40, 57, .65); }
.gear-slot--filled { color: var(--cyan); border-color: var(--cyan-dim); }
.event-item { border-bottom-color: rgba(190, 160, 126, .12); }
.text-button { color: var(--cyan); }
.inventory-item { border-color: rgba(190, 160, 126, .15); background: rgba(54, 16, 25, .28); }
.inventory-item--featured { border-color: rgba(197, 138, 71, .35); }
.action-dock { border-color: rgba(197, 138, 71, .42); background: linear-gradient(90deg, rgba(24, 10, 15, .93), rgba(54, 18, 27, .86)); }
.quest-drawer { border-left-color: rgba(197, 138, 71, .6); background: rgba(13, 6, 10, .97); }
.quest-card { background: rgba(54, 16, 25, .3); border-color: rgba(197, 138, 71, .25); }
.quest-card--active { border-color: rgba(197, 138, 71, .65); box-shadow: inset 0 0 30px rgba(164, 40, 57, .08); }
.quest-state { color: var(--cyan); }
.modal-layer { background: rgba(5, 2, 4, .84); }
.modal { border-color: var(--gold); background: linear-gradient(135deg, rgba(43, 15, 22, .98), rgba(11, 7, 9, .99)); box-shadow: 0 0 0 1px rgba(197, 138, 71, .16), 0 30px 80px rgba(0, 0, 0, .72), 0 0 40px rgba(164, 40, 57, .16); }
.modal::before { border-color: rgba(197, 138, 71, .18); }
.brief-loop div, .craft-side, .shop-side { border-color: rgba(190, 160, 126, .18); background: rgba(54, 16, 25, .16); }
.log-timeline div { border-left-color: var(--cyan); background: rgba(168, 212, 200, .05); }
.log-timeline .log-timeline--gold { border-color: var(--gold); background: rgba(197, 138, 71, .06); }
.toast { border-color: var(--red); background: rgba(25, 6, 12, .96); }

/* Full-screen tabletop composition: the map is the stage, UI becomes floating furniture. */
.board-screen { height: 100vh; min-height: 100svh; overflow: hidden; background-color: #24130e; background-image: radial-gradient(ellipse at 50% 36%, rgba(123, 69, 35, .32), transparent 52%), repeating-linear-gradient(102deg, rgba(255, 210, 148, .045) 0 2px, transparent 2px 42px), repeating-linear-gradient(12deg, rgba(14, 4, 3, .20) 0 3px, transparent 3px 58px), linear-gradient(90deg, #1b0c09, #4b2918 22%, #2a130e 52%, #522c19 78%, #1b0c09); }
.board-content { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
.topbar { position: absolute; z-index: 10; top: 1rem; right: 1rem; left: 1rem; min-height: 4.3rem; border: 1px solid rgba(197, 138, 71, .5); box-shadow: 0 16px 42px rgba(10, 3, 2, .42), inset 0 0 0 1px rgba(255, 223, 168, .06); }
.board-viewport { position: absolute; z-index: 1; inset: 0; min-height: 100%; border: 0; background-color: #2a160e; background-image: radial-gradient(ellipse at 50% 40%, rgba(142, 80, 39, .38), transparent 54%), repeating-linear-gradient(102deg, rgba(255, 210, 148, .05) 0 2px, transparent 2px 44px), repeating-linear-gradient(12deg, rgba(14, 4, 3, .20) 0 3px, transparent 3px 60px), linear-gradient(90deg, #1b0c09, #4b2918 24%, #28120c 53%, #4a2817 78%, #1b0c09); box-shadow: none; }
.board-plane { inset: 4.8rem 4.5vw 1.8rem; border-color: rgba(111, 65, 30, .92); background-color: #d6bd8d; background-blend-mode: multiply; box-shadow: 0 24px 0 -12px rgba(15, 5, 3, .70), 0 42px 44px -26px rgba(7, 2, 2, .92), inset 0 0 0 7px rgba(100, 56, 25, .15); }
.board-plane::before { background: linear-gradient(180deg, rgba(101, 47, 20, .08), transparent 28%, rgba(55, 20, 10, .10) 70%, rgba(42, 14, 8, .30)), linear-gradient(90deg, rgba(78, 31, 13, .20), transparent 17%, transparent 80%, rgba(78, 31, 13, .16)); }
.board-plane::after { border-color: rgba(89, 47, 19, .34); box-shadow: inset 0 0 46px rgba(79, 35, 16, .16); }
.board-wash { background: linear-gradient(180deg, rgba(109, 53, 22, .05), rgba(42, 13, 8, .22)), radial-gradient(circle at 55% 45%, rgba(255, 225, 161, .11), transparent 30%); mix-blend-mode: multiply; }
.board-viewport::after { background: linear-gradient(110deg, transparent 35%, rgba(242, 200, 132, .09), transparent 44%); }
.board-grid { opacity: .08; }
.board-scanline { opacity: .08; }
.board-heading { position: absolute; z-index: 6; top: 6.6rem; right: 1.5rem; left: 1.5rem; margin: 0; pointer-events: none; }
.board-heading h2 { text-shadow: 0 2px 12px rgba(17, 5, 3, .72); }
.board-heading-note { text-shadow: 0 2px 8px rgba(17, 5, 3, .9); }
.tabletop-note { position: absolute; z-index: 4; display: grid; gap: .35rem; width: min(220px, 20vw); padding: .8rem .9rem; color: #3b2418; background: linear-gradient(135deg, #e8d2a0, #c8a96f); box-shadow: 0 12px 18px rgba(19, 5, 2, .38), inset 0 0 0 1px rgba(89, 47, 19, .18); font-family: var(--mono); transform-origin: center; }
.tabletop-note::before { content: ''; position: absolute; top: -.35rem; left: 30%; width: 38%; height: .65rem; background: rgba(218, 187, 133, .62); transform: rotate(-3deg); }
.tabletop-note span { color: #7a2230; font-size: .52rem; letter-spacing: .12em; }
.tabletop-note strong { font: 700 .78rem/1.25 var(--display); }
.tabletop-note small { color: #795f43; font-size: .52rem; }
.tabletop-note--north { top: 8rem; right: auto; left: 36%; transform: rotate(-3deg); }
.tabletop-note--east { top: 20rem; right: 3%; bottom: auto; left: auto; transform: rotate(5deg); }
.board-lower-grid { position: absolute; z-index: 7; inset: 0; display: block; margin: 0; pointer-events: none; }
.board-lower-grid > .panel { position: absolute; margin: 0; pointer-events: auto; box-shadow: 0 18px 38px rgba(10, 3, 2, .48), inset 0 0 0 1px rgba(255, 223, 168, .04); backdrop-filter: blur(14px); }
.player-panel { bottom: 1.25rem; left: 1.25rem; width: min(330px, 24vw); }
.event-panel { top: 7.5rem; right: 1.25rem; width: min(330px, 24vw); }
.inventory-panel { right: 1.25rem; bottom: 1.25rem; width: min(370px, 27vw); }
.action-dock { position: absolute; z-index: 8; right: auto; bottom: 1.25rem; left: 50%; width: min(520px, 38vw); margin: 0; transform: translateX(-50%); box-shadow: 0 18px 38px rgba(10, 3, 2, .48); backdrop-filter: blur(14px); }
.board-art-slot { background: rgba(232, 210, 160, .88); color: #4b2a1b; box-shadow: 0 8px 16px rgba(10, 3, 2, .24); }
.board-art-slot .asset-tag { color: #7a2230; }

@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sweep { 0%, 28% { transform: translateX(-110%); } 60%, 100% { transform: translateX(110%); } }
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .65; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) { .board-lower-grid { grid-template-columns: 1fr 1fr; }.inventory-panel { grid-column: 1 / -1; }.board-viewport { min-height: 590px; }.intro-art-note { display: none; } }
@media (max-width: 720px) { .intro-copy { margin-left: 1.35rem; width: calc(100% - 2.7rem); padding: 4rem 0 6rem; }.intro-footer { display: none; }.intro-specs { gap: 1rem; margin-top: 2.7rem; }.topbar { grid-template-columns: 1fr auto; }.turn-status { display: none; }.topbar-actions .icon-button { display: none; }.board-content { width: min(100% - 1rem, 1500px); padding-top: 1.5rem; }.board-heading { align-items: start; }.board-heading-note { display: none; }.board-viewport { min-height: 520px; }.board-plane, .board-map-layer { transform: rotateX(28deg) rotateZ(-1deg) scale(1.16); }.plane-beacon { transform: translateZ(30px) scale(.78); }.plane-ledge { transform: translateZ(8px) skewX(-28deg) scale(.8); }.map-label { transform: translateZ(36px) scale(.78); transform-origin: center; }.map-label--mountain { left: 16%; top: 10%; }.map-label--mine { left: 38%; top: 16%; }.map-label--monastery { right: 2%; }.map-label--cave { right: 3%; }.route-map { inset: 12% 1%; width: 98%; height: 76%; }.board-legend { right: .7rem; bottom: .6rem; max-width: 170px; justify-content: flex-end; gap: .5rem; }.board-art-slot { left: .7rem; bottom: 1rem; max-width: 160px; }.board-lower-grid { grid-template-columns: 1fr; }.inventory-panel { grid-column: auto; }.action-dock { align-items: stretch; flex-direction: column; }.action-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; }.action-buttons .button, .button--roll { min-width: 0 !important; padding: .35rem .3rem; }.action-buttons .button span { font-size: .58rem; }.workshop-grid { grid-template-columns: 1fr; }.modal-title-row { display: block; }.modal-art-slot { display: inline-block; margin-top: 1rem; }.brief-loop { grid-template-columns: 1fr; }.board-screen { overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 720px) {
  .board-screen { height: 1180px; min-height: 1180px; overflow-x: hidden; overflow-y: auto; }
  .board-content { height: 1180px; min-height: 1180px; }
  .topbar { top: .55rem; right: .55rem; left: .55rem; padding: .6rem .7rem; }
  .board-viewport { min-height: 1180px; }
  .board-plane { inset: 8.5rem -28% 17rem; }
  .board-heading { top: 5.7rem; right: .8rem; left: .8rem; }
  .board-heading h2 { font-size: 1.55rem; }
  .board-heading-note { display: none; }
  .tabletop-note { width: 172px; padding: .6rem .65rem; }
  .tabletop-note--north { top: 8.8rem; right: .8rem; left: auto; transform: rotate(4deg) scale(.82); transform-origin: top right; }
  .tabletop-note--east { top: 26rem; right: .6rem; bottom: auto; left: auto; transform: rotate(-6deg) scale(.78); transform-origin: top right; }
  .board-lower-grid { inset: 0; }
  .board-lower-grid > .panel { left: .75rem; right: .75rem; width: auto; }
  .event-panel { top: 13rem; }
  .player-panel { bottom: 16rem; }
  .inventory-panel { bottom: 8.6rem; }
  .action-dock { right: .75rem; bottom: .75rem; left: .75rem; width: auto; transform: none; }
  .board-art-slot { left: .75rem; bottom: 19rem; max-width: 150px; }
}

/* Interactive map stage and low-chrome table layout. */
.board-viewport { --map-x: 0px; --map-y: 0px; --map-scale: 1; --map-rotation: 0deg; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.board-viewport.is-panning { cursor: grabbing; }
.board-plane { inset: 7rem 12vw 4.2rem; transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(calc(38deg + var(--tilt-y))) rotateZ(calc(-2deg + var(--map-rotation) + var(--tilt-x))) scale(var(--map-scale)); }
.board-map-layer { inset: 7rem 12vw 4.2rem; transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(calc(38deg + var(--tilt-y))) rotateZ(calc(-2deg + var(--map-rotation) + var(--tilt-x))) scale(calc(var(--map-scale) * 1.04)); }

.global-info-panel { position: absolute; z-index: 12; top: 5.9rem; right: 1rem; left: 1rem; display: grid; gap: .65rem; padding: .8rem 1rem 1rem; border: 1px solid rgba(197, 138, 71, .56); background: rgba(17, 7, 10, .96); box-shadow: 0 18px 44px rgba(7, 2, 2, .5); backdrop-filter: blur(18px); }
.global-info-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.global-info-hint { color: var(--muted); font: .5rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.global-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 2fr; gap: .55rem; }
.global-info-grid div { display: grid; gap: .28rem; min-width: 0; padding: .5rem .6rem; border-left: 1px solid rgba(197, 138, 71, .34); }
.global-info-grid span { color: var(--muted); font: .48rem var(--mono); letter-spacing: .1em; }
.global-info-grid strong { overflow: hidden; color: var(--paper); font: 600 .72rem var(--display); text-overflow: ellipsis; white-space: nowrap; }

.prop-pool { position: absolute; z-index: 6; display: grid; gap: .55rem; width: min(154px, 10vw); padding: .7rem; border: 1px solid rgba(91, 47, 20, .62); background: linear-gradient(145deg, rgba(232, 210, 160, .94), rgba(192, 151, 91, .91)); box-shadow: 0 14px 24px rgba(12, 3, 2, .34), inset 0 0 0 1px rgba(255, 239, 196, .18); color: #3b2418; }
.prop-pool::after { content: ''; position: absolute; inset: .3rem; border: 1px dashed rgba(91, 47, 20, .26); pointer-events: none; }
.prop-pool--shared { top: 34%; left: 2.4rem; transform: rotate(-3deg); }
.prop-pool--player { top: 39%; right: 2.4rem; transform: rotate(3deg); }
.prop-pool-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .4rem; border-bottom: 1px solid rgba(91, 47, 20, .28); padding-bottom: .4rem; font: 700 .52rem var(--mono); letter-spacing: .08em; }
.prop-pool-header small, .prop-pool-header strong { color: #7a2230; font: 700 .5rem var(--mono); }
.prop-chip-row { position: relative; z-index: 1; display: flex; gap: .32rem; }
.prop-chip { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid currentColor; background: rgba(255, 239, 196, .28); color: #7a2230; font-size: .86rem; }
.prop-chip b { font: 700 .46rem var(--mono); }
.prop-chip--stone, .prop-chip--ore { color: #4c6970; }.prop-chip--bone { color: #4b3a31; }.prop-chip--empty { color: #8d6e53; }
.prop-pool-note { position: relative; z-index: 1; color: #76573b; font: .48rem/1.35 var(--mono); }
.gain-chip { position: relative; z-index: 1; width: max-content; padding: .24rem .34rem; color: #f5e1b1; background: #7a2230; font: 700 .48rem var(--mono); letter-spacing: .04em; }

.board-lower-grid > .panel { display: none; }
.map-controls { position: absolute; z-index: 10; right: 1.2rem; bottom: 1.2rem; left: auto; display: flex; align-items: center; gap: .35rem; padding: .35rem; border: 1px solid rgba(197, 138, 71, .48); background: rgba(20, 8, 11, .88); box-shadow: 0 10px 22px rgba(10, 3, 2, .32); backdrop-filter: blur(12px); }
.map-control-button { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid rgba(197, 138, 71, .34); color: var(--gold-bright); background: rgba(65, 19, 30, .72); font: 700 .9rem var(--mono); }
.map-control-button:hover, .map-control-button:focus-visible { border-color: var(--gold-bright); color: white; background: var(--wine-bright); }
.map-control-button--readout { width: 3.1rem; color: var(--paper); font-size: .53rem; }
.map-gesture-hint { margin-left: .3rem; color: var(--muted); font: .47rem var(--mono); letter-spacing: .1em; }

@media (max-width: 720px) {
  .topbar-actions .icon-button { display: inline-grid; }
  .global-info-panel { top: 4.65rem; right: .55rem; left: .55rem; padding: .7rem; }
  .global-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .global-info-grid div:last-child { grid-column: 1 / -1; }
  .board-plane { inset: 8.5rem .35rem 15rem; transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(28deg) rotateZ(calc(-1deg + var(--map-rotation))) scale(var(--map-scale)); }
  .board-map-layer { inset: 8.5rem .35rem 15rem; transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(28deg) rotateZ(calc(-1deg + var(--map-rotation))) scale(calc(var(--map-scale) * 1.02)); }
  .prop-pool { top: auto; bottom: 5.9rem; width: calc(50% - .9rem); padding: .5rem; }
  .prop-pool--shared { left: .6rem; transform: rotate(-2deg); }
  .prop-pool--player { right: .6rem; transform: rotate(2deg); }
  .prop-pool-note { display: none; }
  .prop-pool-header { font-size: .46rem; }
  .prop-chip { width: 1.65rem; height: 1.65rem; font-size: .7rem; }
  .gain-chip { font-size: .42rem; }
  .map-controls { top: 13.5rem; right: .55rem; bottom: auto; left: auto; transform: none; }
  .map-control-button { width: 2.2rem; height: 2.2rem; }
  .map-gesture-hint { display: none; }
}

/* A second, physical tabletop layer keeps the plank seams inside the camera move. */
.tabletop-plane { position: absolute; z-index: 0; inset: -18%; overflow: hidden; border: 1px solid rgba(93, 48, 22, .58); background-color: #3a1d12; background-image: linear-gradient(90deg, rgba(21, 6, 4, .28), transparent 18%, rgba(255, 208, 143, .09) 50%, transparent 82%, rgba(21, 6, 4, .28)), repeating-linear-gradient(0deg, transparent 0 10rem, rgba(20, 6, 4, .56) 10rem 10.18rem, transparent 10.18rem 20.2rem), repeating-linear-gradient(90deg, transparent 0 21rem, rgba(20, 6, 4, .42) 21rem 21.14rem, transparent 21.14rem 42rem), repeating-linear-gradient(101deg, rgba(255, 216, 157, .045) 0 1px, transparent 1px 34px); box-shadow: inset 0 0 0 2rem rgba(17, 5, 3, .12), inset 0 0 10rem rgba(12, 3, 2, .34); transform: translate3d(calc(var(--map-x) * .34), calc(var(--map-y) * .34), -35px) rotateX(calc(25deg + (var(--tilt-y) * .55))) rotateZ(calc((var(--map-rotation) * .5) + (var(--tilt-x) * .45))) scale(calc(.98 + (var(--map-scale) * .09))); transform-origin: center 50%; transform-style: preserve-3d; transition: transform .25s var(--ease); pointer-events: none; }
.tabletop-plane::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(8deg, transparent 0 5rem, rgba(255, 226, 177, .035) 5rem 5.08rem, transparent 5.08rem 11rem); mix-blend-mode: screen; }
.tabletop-plane::after { content: ''; position: absolute; inset: 18%; border: 1px solid rgba(226, 174, 107, .16); box-shadow: 0 0 0 1rem rgba(18, 5, 3, .08), inset 0 0 4rem rgba(12, 3, 2, .18); }
.board-plane { z-index: 1; }

.prop-pool { transform-style: preserve-3d; transform-origin: center center; transition: transform .25s var(--ease); }
.prop-pool--shared { --prop-angle: -3deg; transform: translate3d(calc(var(--map-x) * .14), calc(var(--map-y) * .14), 42px) rotateX(33deg) rotateZ(calc((var(--map-rotation) * .55) + var(--prop-angle))) scale(calc(.92 + (var(--map-scale) * .08))); }
.prop-pool--player { --prop-angle: 3deg; transform: translate3d(calc(var(--map-x) * .14), calc(var(--map-y) * .14), 42px) rotateX(33deg) rotateZ(calc((var(--map-rotation) * .55) + var(--prop-angle))) scale(calc(.92 + (var(--map-scale) * .08))); }

@media (max-width: 720px) {
  .tabletop-plane { inset: -22% -32% -10%; transform: translate3d(calc(var(--map-x) * .25), calc(var(--map-y) * .25), -25px) rotateX(20deg) rotateZ(calc(var(--map-rotation) * .4)) scale(calc(.98 + (var(--map-scale) * .07))); }
  .prop-pool--shared { transform: translate3d(calc(var(--map-x) * .08), calc(var(--map-y) * .08), 30px) rotateX(27deg) rotateZ(calc((var(--map-rotation) * .45) + var(--prop-angle))) scale(calc(.94 + (var(--map-scale) * .06))); }
  .prop-pool--player { transform: translate3d(calc(var(--map-x) * .08), calc(var(--map-y) * .08), 30px) rotateX(27deg) rotateZ(calc((var(--map-rotation) * .45) + var(--prop-angle))) scale(calc(.94 + (var(--map-scale) * .06))); }
}

/* Flow screens, player-first lobby, and the low-chrome game HUD. */
.flow-screen { min-height: 100svh; color: var(--paper); background: radial-gradient(circle at 72% 18%, rgba(164, 40, 57, .16), transparent 32%), linear-gradient(135deg, #17090d, #31131b 48%, #10070a); overflow: auto; }
.flow-shell { width: min(1260px, calc(100% - 3rem)); min-height: 100svh; margin: 0 auto; padding: 1.4rem 0 2.4rem; }
.flow-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(197, 138, 71, .3); }
.flow-brand, .topbar-brand { display: flex; align-items: center; gap: .7rem; }
.flow-brand strong, .topbar-brand strong { color: var(--paper); font: 700 .86rem var(--display); letter-spacing: .16em; }
.flow-brand strong span, .topbar-brand strong span { color: var(--gold-bright); }
.flow-brand small, .topbar-brand small { display: block; margin-top: .2rem; color: var(--muted); font: .48rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.flow-step { color: var(--gold-bright); font: .54rem var(--mono); letter-spacing: .15em; }
.lobby-layout, .ready-layout { display: grid; grid-template-columns: minmax(210px, .52fr) minmax(0, 1.48fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; padding: clamp(3rem, 8vh, 7rem) 0 3rem; }
.flow-intro { max-width: 320px; padding-top: 1.8rem; }
.flow-intro h2 { margin: .7rem 0 1rem; color: var(--paper); font: 600 clamp(2.4rem, 5vw, 5.2rem)/.95 var(--display); letter-spacing: -.035em; }
.flow-intro p:not(.eyebrow) { color: var(--muted); font: .9rem/1.65 var(--body); }
.flow-note { display: block; margin-top: 2rem; padding-left: .8rem; border-left: 1px solid var(--cyan); color: var(--cyan); font: .58rem/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lobby-card, .ready-card { position: relative; padding: 1.2rem; border: 1px solid rgba(197, 138, 71, .56); background: linear-gradient(145deg, rgba(46, 15, 23, .96), rgba(13, 7, 10, .96)); box-shadow: 0 24px 70px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 223, 168, .04); }
.lobby-card::before, .ready-card::before { content: ''; position: absolute; inset: .5rem; border: 1px solid rgba(197, 138, 71, .16); pointer-events: none; }
.lobby-section { position: relative; padding: 1.2rem 1rem; border-bottom: 1px solid rgba(190, 160, 126, .16); }
.lobby-section:last-child { border-bottom: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.section-heading small { color: var(--muted); font: .52rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prop-select-grid, .settings-grid, .mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.prop-select, .mode-card, .setting-toggle, .setting-field { min-height: 4.2rem; border: 1px solid rgba(190, 160, 126, .22); color: var(--paper); background: rgba(168, 212, 200, .035); text-align: left; }
.prop-select, .mode-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .7rem; }
.prop-select:hover, .prop-select.is-selected, .mode-card:hover, .mode-card.is-selected { border-color: var(--gold-bright); background: rgba(197, 138, 71, .1); }
.prop-select-glyph, .mode-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid rgba(197, 138, 71, .4); color: var(--gold-bright); font-size: 1.1rem; }
.prop-select strong, .mode-card strong, .setting-toggle strong { display: block; font: 600 .72rem var(--display); }
.prop-select small, .mode-card small, .setting-toggle small { display: block; margin-top: .24rem; color: var(--muted); font: .5rem var(--mono); }
.prop-select b, .mode-card b { color: var(--cyan); font: .48rem var(--mono); letter-spacing: .08em; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setting-field, .setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .8rem; }
.setting-field span { color: var(--muted); font: .54rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.setting-field select { min-width: 6.1rem; border: 1px solid rgba(197, 138, 71, .38); padding: .35rem; color: var(--paper); background: #261018; font: .62rem var(--mono); }
.setting-toggle { cursor: pointer; }
.setting-toggle input { position: absolute; opacity: 0; }
.setting-toggle i { width: 2.2rem; height: 1.15rem; border: 1px solid var(--muted); border-radius: 1rem; background: rgba(0, 0, 0, .3); }
.setting-toggle i::after { content: ''; display: block; width: .78rem; height: .78rem; margin: .12rem; border-radius: 50%; background: var(--muted); transition: transform .2s var(--ease), background .2s var(--ease); }
.setting-toggle input:checked + i { border-color: var(--cyan); }.setting-toggle input:checked + i::after { transform: translateX(1rem); background: var(--cyan); }
.mode-card { min-height: 5.1rem; }.mode-mark { color: var(--paper); font: 700 1.1rem var(--mono); }.mode-card.is-selected .mode-mark { color: var(--gold-bright); box-shadow: 0 0 18px rgba(197, 138, 71, .18); }
.flow-continue { width: 100%; justify-content: space-between; margin-top: 1rem; }
.ready-layout { grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); }
.ready-card { padding: 1.2rem; }.run-summary { display: grid; gap: .35rem; margin: 2.3rem 0; padding: .9rem; border: 1px solid rgba(197, 138, 71, .3); background: rgba(197, 138, 71, .06); }.run-summary strong { color: var(--gold-bright); font: .85rem var(--display); }.run-summary small { color: var(--muted); font: .54rem var(--mono); }
.player-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding-bottom: 1rem; }.player-slot, .registered-player { display: flex; align-items: center; gap: .6rem; padding: .7rem; border: 1px solid rgba(190, 160, 126, .2); background: rgba(168, 212, 200, .035); text-align: left; }.player-slot.is-ready { border-color: rgba(168, 212, 200, .45); }.player-slot.is-ai { border-color: rgba(197, 138, 71, .5); }.player-slot > span:nth-child(2), .registered-player > span:nth-child(2) { flex: 1; }.player-slot strong, .registered-player strong { display: block; font: 600 .68rem var(--display); }.player-slot small, .registered-player small { display: block; color: var(--muted); font: .48rem var(--mono); }.player-slot b, .registered-player b { color: var(--cyan); font: .45rem var(--mono); }
.slot-avatar, .score-avatar { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border: 1px solid var(--gold); color: var(--gold-bright); background: #36111b; font: 700 .72rem var(--display); }.slot-avatar--red, .score-avatar--red { color: #f0a5a0; border-color: var(--red); }.slot-avatar--cyan, .score-avatar--cyan { color: var(--cyan); border-color: var(--cyan); }.slot-avatar--gold { color: var(--gold-bright); }.slot-avatar--empty { border-style: dashed; color: var(--muted); background: transparent; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1.1rem; padding: .75rem; border: 1px solid rgba(197, 138, 71, .3); background: rgba(197, 138, 71, .05); }.invite-row strong { display: block; margin-top: .25rem; color: var(--paper); font: .65rem var(--mono); }.registered-players { border-top: 1px solid rgba(190, 160, 126, .16); padding-top: 1rem; }.search-field { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; border: 1px solid rgba(190, 160, 126, .28); padding: .45rem .65rem; color: var(--cyan); }.search-field input { width: 100%; border: 0; outline: 0; color: var(--paper); background: transparent; font: .62rem var(--mono); }.registered-list { display: grid; gap: .45rem; }.registered-player { width: 100%; }.registered-player:hover { border-color: var(--cyan); }.start-game-button { width: 100%; justify-content: space-between; margin-top: 1rem; }
.mini-logo-button { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-bright); background: radial-gradient(circle, rgba(164, 40, 57, .9), rgba(38, 9, 16, .94)); box-shadow: 0 0 16px rgba(197, 138, 71, .2); font: 700 .82rem var(--display); }.mini-logo-button:hover, .mini-logo-button:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.mini-score-rail { position: absolute; z-index: 11; top: 5.8rem; right: 1rem; left: 1rem; display: flex; align-items: center; gap: .4rem; pointer-events: none; }.score-chip, .dice-result { display: flex; align-items: center; gap: .45rem; min-width: 7rem; padding: .3rem .5rem; border: 1px solid rgba(197, 138, 71, .24); background: rgba(17, 7, 10, .7); box-shadow: 0 8px 20px rgba(7, 2, 2, .25); backdrop-filter: blur(12px); }.score-chip--active { border-color: var(--gold); }.score-chip span:nth-child(2) { display: grid; gap: .12rem; }.score-chip b { color: var(--paper); font: .5rem var(--mono); letter-spacing: .08em; }.score-chip small { color: var(--muted); font: .45rem var(--mono); }.score-chip > strong { margin-left: auto; color: var(--gold-bright); font: .7rem var(--display); }.score-avatar { width: 1.45rem; height: 1.45rem; flex-basis: 1.45rem; font-size: .56rem; }.dice-result { margin-left: auto; min-width: 4.3rem; justify-content: space-between; border-color: var(--cyan-dim); }.dice-result span { color: var(--cyan); font: .45rem var(--mono); }.dice-result strong { color: var(--paper); font: 700 .9rem var(--display); }
.game-menu { position: absolute; z-index: 30; top: 5.55rem; left: 1rem; display: grid; gap: .3rem; width: min(280px, calc(100% - 2rem)); padding: .7rem; border: 1px solid var(--gold); background: rgba(17, 7, 10, .97); box-shadow: 0 22px 60px rgba(5, 2, 4, .62); backdrop-filter: blur(18px); }.game-menu-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .2rem .55rem; }.menu-item { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; align-items: center; padding: .6rem; border: 1px solid transparent; color: var(--paper); background: transparent; text-align: left; }.menu-item:hover, .menu-item.is-active { border-color: rgba(197, 138, 71, .4); background: rgba(197, 138, 71, .1); }.menu-item > span:first-child { color: var(--gold-bright); font-size: 1.1rem; text-align: center; }.menu-item b, .menu-item small { display: block; }.menu-item b { font: 600 .65rem var(--display); }.menu-item small { margin-top: .15rem; color: var(--muted); font: .48rem var(--mono); }.game-menu-footer { display: flex; justify-content: space-between; margin-top: .35rem; padding: .6rem .3rem 0; border-top: 1px solid rgba(190, 160, 126, .16); color: var(--cyan); font: .46rem var(--mono); letter-spacing: .08em; }
.scene-viewport { position: absolute; z-index: 1; inset: 0; overflow: hidden; perspective: 1200px; background: radial-gradient(circle at 50% 42%, rgba(168, 212, 200, .12), transparent 32%), linear-gradient(145deg, #21100e, #4b2817 48%, #180b09); touch-action: none; user-select: none; }.scene-light-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 20%, rgba(248, 199, 120, .16), transparent 28%); mix-blend-mode: screen; }.scene-table-wrap { position: absolute; inset: 16% 14% 13%; transform-style: preserve-3d; transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(38deg) rotateZ(var(--map-rotation)) scale(var(--map-scale)); transition: transform .25s var(--ease); }.scene-halo { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(168, 212, 200, .18), transparent 64%); filter: blur(10px); transform: translateZ(-4px); }.scene-table { position: absolute; inset: 0; overflow: hidden; border: 8px solid rgba(82, 42, 20, .86); background-color: #d8bf8e; background-image: linear-gradient(110deg, rgba(101, 47, 20, .1), transparent 34%, rgba(255, 240, 189, .22) 52%, transparent 70%), repeating-linear-gradient(0deg, transparent 0 7rem, rgba(75, 34, 14, .18) 7rem 7.12rem, transparent 7.12rem 14rem), repeating-linear-gradient(90deg, transparent 0 15rem, rgba(75, 34, 14, .12) 15rem 15.1rem, transparent 15.1rem 30rem); box-shadow: 0 35px 45px rgba(7, 2, 2, .65), inset 0 0 0 2rem rgba(94, 49, 20, .1); transform-style: preserve-3d; }.scene-table::after { content: ''; position: absolute; inset: 7%; border: 1px solid rgba(73, 43, 23, .3); background: radial-gradient(circle at 40% 50%, rgba(168, 212, 200, .2), transparent 30%); }.scene-grid-lines { position: absolute; inset: 10%; opacity: .18; background: repeating-linear-gradient(90deg, transparent 0 3rem, #71958e 3rem 3.04rem, transparent 3.04rem 6rem), repeating-linear-gradient(0deg, transparent 0 3rem, #71958e 3rem 3.04rem, transparent 3.04rem 6rem); transform: translateZ(2px); }.scene-landmark, .scene-prop { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(197, 138, 71, .8); color: var(--paper); background: linear-gradient(145deg, rgba(62, 20, 29, .95), rgba(20, 9, 12, .88)); box-shadow: 0 12px 18px rgba(32, 10, 5, .4), 0 0 16px rgba(168, 212, 200, .16); transform: translateZ(42px) rotateZ(-1deg); }.scene-landmark { width: 6rem; height: 4rem; }.scene-landmark b { font: 700 1.25rem var(--display); }.scene-landmark small { color: var(--cyan); font: .45rem var(--mono); letter-spacing: .12em; }.scene-landmark--mine { left: 14%; top: 29%; }.scene-landmark--market { left: 46%; top: 53%; }.scene-landmark--sanctum { right: 13%; top: 24%; }.landmark-glow { position: absolute; inset: -1rem; border-radius: 50%; background: radial-gradient(circle, rgba(168, 212, 200, .17), transparent 62%); filter: blur(6px); }.scene-prop { width: 2.3rem; height: 2.3rem; font-size: 1.1rem; }.scene-prop--token { left: 42%; top: 38%; border-radius: 50%; background: #7a2230; }.scene-prop--stone { left: 58%; top: 64%; color: #b7d9d0; }.scene-prop--fruit { left: 29%; top: 64%; color: #f0b96d; }.scene-heading { position: absolute; z-index: 4; top: 7.1rem; left: 2rem; max-width: 360px; text-shadow: 0 3px 14px rgba(12, 3, 2, .8); }.scene-heading h2 { margin: .45rem 0; font: 600 clamp(1.7rem, 4vw, 3.8rem) var(--display); }.scene-heading p:last-child { color: var(--muted); font: .62rem var(--mono); }.scene-actions { position: absolute; z-index: 4; right: 2rem; bottom: 6.4rem; display: flex; align-items: center; gap: .8rem; }.scene-hint { color: var(--cyan); font: .48rem var(--mono); letter-spacing: .1em; }
.board-screen.is-scene .board-heading { display: none; }
.props-bar { position: absolute; z-index: 14; right: 1rem; bottom: 0; left: 1rem; border: 1px solid rgba(197, 138, 71, .5); border-bottom: 0; background: rgba(17, 7, 10, .91); box-shadow: 0 -12px 30px rgba(7, 2, 2, .26); backdrop-filter: blur(16px); }.props-bar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .42rem .75rem; color: var(--gold-bright); background: transparent; text-align: left; }.props-bar-toggle > span:last-child { font-size: 1.1rem; }.props-bar-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: 0 .65rem .55rem; }.props-bar.is-collapsed .props-bar-content { display: none; }.collected-prop { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .42rem .5rem; border: 1px solid rgba(190, 160, 126, .2); background: rgba(168, 212, 200, .035); }.collected-prop > span:first-child { color: var(--gold-bright); font-size: 1rem; }.collected-prop > span:nth-child(2) { display: grid; gap: .1rem; min-width: 0; }.collected-prop b { overflow: hidden; color: var(--paper); font: .56rem var(--display); text-overflow: ellipsis; white-space: nowrap; }.collected-prop small { color: var(--muted); font: .44rem var(--mono); }.collected-prop strong { margin-left: auto; color: var(--cyan); font: .65rem var(--mono); }.collected-prop--gain { border-color: rgba(197, 138, 71, .38); }
.landscape-lock { display: none; }
@media (max-width: 720px) {
  .flow-shell { width: calc(100% - 1.2rem); padding-top: .75rem; }.flow-header { padding-bottom: .7rem; }.flow-brand strong { font-size: .7rem; }.lobby-layout, .ready-layout { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0 2rem; }.flow-intro { max-width: none; padding-top: 0; }.flow-intro h2 { font-size: 2.5rem; }.flow-intro p:not(.eyebrow) { font-size: .76rem; }.flow-note, .run-summary { margin-top: 1rem; }.lobby-card, .ready-card { padding: .65rem; }.lobby-section { padding: .8rem .55rem; }.prop-select-grid, .settings-grid, .mode-grid, .player-slots { gap: .4rem; }.prop-select, .mode-card { padding: .5rem; gap: .4rem; }.prop-select small, .mode-card small { font-size: .43rem; }.prop-select-glyph, .mode-mark { width: 1.8rem; height: 1.8rem; }.ready-layout { padding-top: 1rem; }.mini-score-rail { top: 4.6rem; right: .55rem; left: .55rem; overflow: hidden; }.score-chip { min-width: 5.2rem; padding: .2rem; }.score-chip small { display: none; }.score-chip b { font-size: .43rem; }.score-chip > strong { font-size: .58rem; }.dice-result { min-width: 3.4rem; }.game-menu { top: 4.3rem; left: .55rem; }.scene-heading { top: 6rem; left: .9rem; }.scene-table-wrap { inset: 22% 4% 18%; }.scene-actions { right: .8rem; bottom: 6rem; left: .8rem; justify-content: space-between; }.scene-hint { font-size: .4rem; }.props-bar { right: .55rem; left: .55rem; }.props-bar-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }.collected-prop { padding: .32rem; }.board-screen { min-width: 100vw; }
}
@media (max-width: 720px) and (orientation: portrait) {
  body { overflow: hidden; }.landscape-lock { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 50% 40%, rgba(164, 40, 57, .2), transparent 44%), #10070a; }.landscape-lock-card { max-width: 310px; padding: 2rem 1.4rem; border: 1px solid var(--gold); background: rgba(24, 8, 13, .96); text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }.rotate-glyph { display: block; margin-bottom: 1rem; color: var(--cyan); font-size: 2.5rem; }.landscape-lock h2 { margin: .8rem 0; color: var(--paper); font: 600 1.8rem var(--display); }.landscape-lock p { color: var(--muted); font: .72rem/1.55 var(--mono); }
}
@media (min-width: 721px), (orientation: landscape) { .landscape-lock { display: none !important; } }
@media (min-width: 721px) { .board-screen[data-time-of-day="dawn"] .scene-light-wash { background: radial-gradient(circle at 20% 20%, rgba(246, 175, 120, .2), transparent 35%); }.board-screen[data-time-of-day="dusk"] .scene-light-wash { background: radial-gradient(circle at 78% 22%, rgba(214, 82, 75, .22), transparent 34%); }.board-screen[data-time-of-day="night"] .scene-light-wash { background: radial-gradient(circle at 64% 25%, rgba(96, 133, 212, .25), transparent 32%); }.board-screen[data-time-of-day="night"] .scene-table { filter: saturate(.8) brightness(.72); }.board-screen[data-time-of-day="dawn"] .scene-table { filter: sepia(.08) brightness(1.04); } }
.board-screen[data-time-of-day="dawn"] .board-wash { background: linear-gradient(180deg, rgba(232, 151, 91, .08), rgba(42, 13, 8, .14)), radial-gradient(circle at 24% 22%, rgba(255, 212, 151, .18), transparent 32%); }
.board-screen[data-time-of-day="dusk"] .board-wash { background: linear-gradient(180deg, rgba(167, 45, 52, .08), rgba(42, 13, 8, .24)), radial-gradient(circle at 78% 22%, rgba(235, 105, 83, .14), transparent 30%); }
.board-screen[data-time-of-day="night"] .board-wash { background: linear-gradient(180deg, rgba(31, 39, 101, .16), rgba(13, 6, 17, .34)), radial-gradient(circle at 68% 20%, rgba(105, 140, 224, .16), transparent 28%); }

/* Landing page: the table is visible immediately, while the WASM engine stays idle until entry. */
.landing-screen { min-height: 100svh; padding-top: 4.8rem; }
.landing-nav { position: absolute; z-index: 5; top: 1.45rem; right: clamp(1.5rem, 4vw, 4.5rem); left: clamp(1.5rem, 4vw, 4.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.landing-nav-brand { display: flex; align-items: center; gap: .75rem; color: var(--paper); text-decoration: none; }
.landing-nav-brand strong { display: block; color: var(--paper); font: 700 .92rem var(--display); letter-spacing: .14em; }
.landing-nav-brand strong span { color: var(--cyan); }
.landing-nav-brand small { display: block; margin-top: .28rem; color: var(--muted); font: .5rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.landing-nav-mark { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid rgba(168, 212, 200, .76); color: var(--cyan); background: rgba(5, 20, 21, .58); box-shadow: 0 0 20px rgba(168, 212, 200, .13); font: 700 1rem var(--display); }
.landing-nav-meta { display: flex; align-items: center; gap: .8rem; color: rgba(168, 212, 200, .7); font: .52rem var(--mono); letter-spacing: .12em; }
.landing-nav-meta i, .landing-proof-footer i { width: .22rem; height: .22rem; display: inline-block; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(242, 200, 132, .7); }
.landing-screen .intro-copy { position: relative; z-index: 2; }
.landing-screen .intro-description { max-width: 490px; }
.landing-screen .intro-actions { position: relative; }
.engine-gate { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.05rem; color: rgba(168, 212, 200, .68); font: .53rem var(--mono); letter-spacing: .1em; }
.engine-gate-pulse { width: .42rem; height: .42rem; display: inline-block; border: 1px solid var(--cyan); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(168, 212, 200, .7); }
.engine-gate i { margin: 0 .2rem; color: rgba(197, 138, 71, .8); font-style: normal; }
.engine-gate.is-loading { color: var(--gold-bright); }
.engine-gate.is-loading .engine-gate-pulse { border-color: var(--gold-bright); background: var(--gold-bright); animation: pulse 1.1s ease-in-out infinite; }
.engine-gate.is-ready { color: var(--cyan); }
.engine-gate.is-preview { color: var(--gold-bright); }
.engine-gate.is-preview .engine-gate-pulse { border-color: var(--gold-bright); background: var(--gold-bright); }
.landing-screen.is-loading .landing-proof { opacity: .38; transform: translateY(10px) scale(.98); }
.landing-screen.is-loading .intro-copy > *:not(.intro-actions):not(.engine-gate) { opacity: .7; }
.landing-screen .button:disabled { cursor: wait; opacity: .72; transform: none; }
.landing-proof { position: absolute; z-index: 1; top: 19%; right: clamp(1.5rem, 7vw, 8rem); width: min(39vw, 560px); aspect-ratio: .86; padding: .8rem; border: 1px solid rgba(168, 212, 200, .36); background: linear-gradient(145deg, rgba(10, 26, 25, .82), rgba(25, 9, 12, .5)); box-shadow: 0 34px 90px rgba(0, 0, 0, .52), inset 0 0 0 1px rgba(242, 200, 132, .08); transform: rotate(4deg); transition: opacity .5s ease, transform .6s var(--ease); }
.landing-proof::before { content: ''; position: absolute; inset: .35rem; border: 1px solid rgba(242, 200, 132, .18); pointer-events: none; }
.landing-proof-head, .landing-proof-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: rgba(230, 217, 192, .72); font: .5rem var(--mono); letter-spacing: .12em; }
.landing-proof-live { display: flex; align-items: center; gap: .4rem; color: var(--cyan); }
.landing-proof-live i { width: .35rem; height: .35rem; display: inline-block; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s ease-in-out infinite; }
.landing-proof-map { position: absolute; inset: 3.2rem .8rem 3rem; overflow: hidden; border: 1px solid rgba(168, 212, 200, .28); background: radial-gradient(circle at 45% 48%, rgba(245, 200, 98, .2), transparent 26%), linear-gradient(135deg, rgba(66, 39, 20, .68), rgba(9, 26, 26, .84)); box-shadow: inset 0 0 50px rgba(3, 12, 13, .74); }
.landing-proof-map::before { content: ''; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(168, 212, 200, .24) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 212, 200, .24) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 78%); }
.landing-proof-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 38%, rgba(242, 200, 132, .2) 50%, transparent 62%); transform: translateX(-120%); animation: sweep 7s ease-in-out infinite; }
.landing-proof-ring { position: absolute; border: 1px solid rgba(168, 212, 200, .48); border-radius: 50%; transform: rotate(-16deg) scaleX(1.35); }
.landing-proof-ring--outer { inset: 15% 14% 19%; }
.landing-proof-ring--inner { inset: 27% 28% 31%; border-color: rgba(242, 200, 132, .55); border-style: dashed; }
.landing-proof-path { position: absolute; height: 1px; transform-origin: left center; background: linear-gradient(90deg, var(--gold-bright), rgba(168, 212, 200, .1)); box-shadow: 0 0 9px rgba(242, 200, 132, .45); }
.landing-proof-path--one { top: 53%; left: 17%; width: 67%; transform: rotate(-22deg); }
.landing-proof-path--two { top: 53%; left: 28%; width: 52%; transform: rotate(37deg); }
.landing-proof-node { position: absolute; z-index: 2; display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid var(--gold-bright); border-radius: 50%; color: var(--ink); background: var(--gold-bright); box-shadow: 0 0 0 .45rem rgba(242, 200, 132, .09), 0 0 24px rgba(242, 200, 132, .36); font: .55rem var(--mono); }
.landing-proof-node--woods { top: 28%; left: 18%; }
.landing-proof-node--mine { top: 47%; left: 50%; color: var(--paper); background: var(--wine-bright); }
.landing-proof-node--desert { right: 13%; bottom: 18%; color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.landing-proof-cross { position: absolute; color: rgba(168, 212, 200, .62); font: 1.2rem var(--mono); }
.landing-proof-cross--one { top: 19%; right: 24%; }.landing-proof-cross--two { bottom: 19%; left: 20%; }
.landing-proof-label { position: absolute; z-index: 2; display: grid; gap: .18rem; color: var(--paper); font: .58rem var(--display); letter-spacing: .08em; }
.landing-proof-label small { color: var(--cyan); font: .44rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.landing-proof-label--woods { top: 20%; left: 28%; }.landing-proof-label--mine { top: 59%; left: 57%; }
.landing-proof-stamp { position: absolute; right: 12%; bottom: 14%; color: rgba(242, 200, 132, .43); font: .72rem/1.15 var(--blackletter); letter-spacing: .1em; text-align: center; transform: rotate(-12deg); }
.landing-proof-footer { position: absolute; right: .8rem; bottom: .8rem; left: .8rem; color: rgba(168, 212, 200, .62); }

@media (max-width: 1040px) {
  .landing-proof { right: 3vw; width: min(37vw, 430px); opacity: .72; }
  .landing-screen .intro-copy { margin-left: clamp(1.5rem, 5vw, 4rem); }
}
@media (max-width: 720px) {
  .landing-screen { padding-top: 4rem; }
  .landing-nav { top: .8rem; right: 1rem; left: 1rem; }
  .landing-nav-meta { display: none; }
  .landing-proof { display: none; }
  .landing-screen .intro-copy { width: calc(100% - 2rem); margin: 0 1rem; padding: 4rem 0 5rem; }
  .landing-screen .intro-description { font-size: .85rem; }
  .engine-gate { font-size: .46rem; }
}


/* MAP scene pass: the Phaser atlas supplies the interactive landmark layer. */
.phaser-node-layer { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.phaser-node { position: absolute; display: grid; width: clamp(1.6rem, 2.5vw, 2.45rem); height: clamp(1.6rem, 2.5vw, 2.45rem); place-items: center; padding: 0; border: 1px solid rgba(255, 232, 172, .85); border-radius: 50%; color: #332016; background: rgba(239, 208, 132, .78); box-shadow: 0 0 0 .18rem rgba(55, 27, 16, .12), 0 0 14px rgba(255, 214, 112, .2); transform: translate(-50%, -50%) translateZ(24px); pointer-events: auto; transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.phaser-node span { font: 700 .8rem var(--display); }
.phaser-node:hover, .phaser-node:focus-visible, .phaser-node.is-active { color: #fff3cf; background: var(--wine-bright); box-shadow: 0 0 0 .28rem rgba(164, 40, 57, .2), 0 0 22px rgba(197, 138, 71, .7); transform: translate(-50%, -50%) translateZ(34px) scale(1.12); }
.phaser-node--safe_zone_fountain { width: clamp(2.2rem, 3.5vw, 3.4rem); height: clamp(2.2rem, 3.5vw, 3.4rem); border-color: var(--cyan); background: rgba(168, 212, 200, .46); }
.phaser-node--vendor_double_circle { border-color: var(--gold-bright); }.phaser-node--treasure_shrine { color: #f5e1b1; background: rgba(122, 34, 48, .76); }.phaser-node--vendor_double_circle span { color: var(--gold-bright); }

/* Floating-icon chrome: the map owns the screen; controls only appear as quiet affordances. */
.topbar { z-index: 20; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; pointer-events: none; }
.topbar-brand { display: none; }
.turn-status { display: none; }
.topbar-actions { position: fixed; top: 1rem; left: 1rem; display: flex; gap: .35rem; pointer-events: auto; }
.topbar-actions > .icon-button, .topbar-actions > .button { display: none; }
.topbar-actions > .mini-logo-button { display: grid; width: 2.8rem; height: 2.8rem; border-color: rgba(245, 225, 177, .9); box-shadow: 0 8px 24px rgba(7, 2, 2, .45), 0 0 22px rgba(197, 138, 71, .22); }
.mini-score-rail { position: fixed; z-index: 25; top: 1rem; right: 1rem; left: auto; gap: .45rem; }
.score-chip, .dice-result { display: grid; width: 2.8rem; height: 2.8rem; min-width: 2.8rem; place-items: center; padding: 0; border-radius: 50%; pointer-events: auto; }
.score-chip span:nth-child(2), .dice-result span { display: none; }.score-chip > strong { margin: 0; font-size: .62rem; }.score-avatar { width: 1.7rem; height: 1.7rem; flex-basis: 1.7rem; border-radius: 50%; }
.dice-result { color: var(--paper); border-color: var(--cyan-dim); }.dice-result strong { font-size: .72rem; }
.board-heading, .board-art-slot, .tabletop-note, .prop-pool { display: none; }
.global-info-panel { top: 1rem; right: 1rem; left: 4.8rem; max-width: 720px; }
.game-menu { top: 4.35rem; left: 1rem; }
.map-controls { right: 1rem; bottom: 4.4rem; border: 0; background: transparent; box-shadow: none; padding: 0; }
.map-control-button { width: 2.5rem; height: 2.5rem; border-radius: 50%; box-shadow: 0 8px 20px rgba(10, 3, 2, .34); }
.map-control-button--readout { width: 3rem; border-radius: 1.4rem; }
.map-gesture-hint { display: none; }
.action-dock { right: 1rem; bottom: 1rem; left: auto; width: auto; border: 0; background: transparent; box-shadow: none; padding: 0; }
.action-context { display: none; }.action-buttons { gap: .45rem; }.action-buttons .button { display: grid; width: 2.8rem; min-width: 2.8rem; height: 2.8rem; place-items: center; padding: 0; border-radius: 50%; box-shadow: 0 8px 22px rgba(10, 3, 2, .4); }.action-buttons .button span { display: none; }.action-buttons .button small { display: none; }.action-buttons #workshopButton::before { content: '⚒'; font-size: 1rem; }.action-buttons #rollButton::before { content: '◉'; font-size: .9rem; }.action-buttons #endTurnButton::before { content: '↪'; font-size: 1rem; }.action-buttons #rollButton { min-width: 2.8rem !important; flex-direction: column !important; }.action-buttons #rollButton strong { font: 700 .58rem var(--mono); }
.props-bar { right: auto; bottom: 1rem; left: 4.8rem; width: 2.8rem; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }.props-bar-toggle { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; padding: 0; border: 1px solid rgba(197, 138, 71, .56); border-radius: 50%; background: rgba(17, 7, 10, .88); box-shadow: 0 8px 22px rgba(10, 3, 2, .4); }.props-bar-toggle .panel-kicker { display: none; }.props-bar-toggle::before { content: '✣'; color: var(--gold-bright); font-size: 1rem; }.props-bar-toggle > span:last-child { display: none; }.props-bar-content { position: absolute; bottom: 3.35rem; left: 0; display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); width: min(380px, calc(100vw - 6rem)); padding: .55rem; border: 1px solid rgba(197, 138, 71, .5); background: rgba(17, 7, 10, .94); box-shadow: 0 16px 34px rgba(7, 2, 2, .5); }.props-bar.is-collapsed .props-bar-content { display: none; }
.scene-actions { right: 1rem; bottom: 4.4rem; }.scene-actions .button { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; padding: 0; border-radius: 50%; font-size: 0; }.scene-actions .button::before { content: '◈'; color: var(--cyan); font-size: 1rem; }.scene-hint { display: none; }
.board-map-layer { pointer-events: none; }.board-map-layer .phaser-node-layer, .board-map-layer .route-map, .board-map-layer #playerToken, .board-map-layer .map-callout { pointer-events: auto; }

@media (max-width: 720px) {
  .topbar-actions { top: .55rem; left: .55rem; }.topbar-actions > .mini-logo-button, .score-chip, .dice-result, .props-bar-toggle, .action-buttons .button, .scene-actions .button { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; }.mini-score-rail { top: .55rem; right: .55rem; left: auto; }.score-chip, .dice-result { min-width: 2.35rem; }.score-avatar { width: 1.45rem; height: 1.45rem; flex-basis: 1.45rem; }.props-bar { bottom: .55rem; left: 3.35rem; }.action-dock { right: .55rem; bottom: .55rem; }.map-controls { right: .55rem; bottom: 3.35rem; }.global-info-panel { top: .55rem; right: .55rem; left: 3.35rem; }.game-menu { top: 3.35rem; left: .55rem; }.scene-actions { right: .55rem; bottom: 3.35rem; }.phaser-node { width: 1.55rem; height: 1.55rem; }.phaser-node span { font-size: .62rem; }
}

/* Camera limits: near-top-down origin, bounded pitch/roll, bounded zoom, bounded rotation. */
.board-screen, .board-viewport, .scene-viewport { --map-tilt-x: 0deg; --map-tilt-y: 0deg; }
.board-screen { background: #070405; }
.board-viewport { background: radial-gradient(ellipse at 50% 45%, rgba(71, 33, 21, .28), transparent 54%), #080405; }
.board-viewport::after { opacity: .08; }
.board-scanline { opacity: .035; }
.board-plane { transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(var(--map-tilt-y)) rotateZ(calc(var(--map-rotation) + (var(--map-tilt-x) - 15deg))) scale(var(--map-scale)); }
.board-map-layer { transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(var(--map-tilt-y)) rotateZ(calc(var(--map-rotation) + (var(--map-tilt-x) - 15deg))) scale(var(--map-scale)); }
.tabletop-plane { background-color: #120908; filter: brightness(.64) saturate(.82); transform: translate3d(calc(var(--map-x) * .34), calc(var(--map-y) * .34), -35px) rotateX(calc(var(--map-tilt-y) * .65)) rotateZ(calc((var(--map-rotation) * .72) + ((var(--map-tilt-x) - 15deg) * .55))) scale(calc(.94 + (var(--map-scale) * .12))); }
.scene-table-wrap { transform: translate3d(var(--map-x), var(--map-y), 0) rotateX(var(--map-tilt-y)) rotateZ(calc(var(--map-rotation) + (var(--map-tilt-x) - 15deg))) scale(var(--map-scale)); }
.board-plane { background-image: var(--map-asset-url, url('../docs/board-scene/stitched_papyrus_board_map_v10.png')); }
.map-callout { display: none; }
.map-control-button--variant { width: 3rem; color: var(--cyan); font-size: .5rem; letter-spacing: .02em; }
.dice-result::before { content: '⚄'; color: var(--gold-bright); font-size: .92rem; }
.action-buttons #rollButton::before { content: '⚄'; }
.toast { right: 5rem; bottom: 4.4rem; }

/* Authoritative papyrus board artwork. Existing synthetic route art stays as an invisible interaction layer. */
.board-plane { background-color: #d6bd8d; background-image: var(--map-asset-url, url('../docs/board-scene/stitched_papyrus_board_map_v10.png')); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; background-blend-mode: normal; }
.board-plane::before { background: linear-gradient(180deg, rgba(255, 238, 189, .05), transparent 28%, rgba(55, 20, 10, .08) 76%, rgba(42, 14, 8, .22)), linear-gradient(90deg, rgba(78, 31, 13, .12), transparent 17%, transparent 80%, rgba(78, 31, 13, .1)); mix-blend-mode: multiply; }
.board-plane::after { border-color: rgba(89, 47, 19, .34); box-shadow: inset 0 0 46px rgba(79, 35, 16, .12); }
.board-map-layer .route-map { opacity: 0; }
.board-map-layer .map-label, .board-map-layer .board-legend, .board-plane .plane-beacon, .board-plane .plane-ledge { display: none; }
.board-map-layer .map-callout { opacity: .88; }
.board-art-slot { background: rgba(232, 210, 160, .78); }

/* Let the scan's pale outer margin dissolve into the wood while keeping the torn papyrus edge. */
.board-plane { background-color: transparent; mix-blend-mode: normal; filter: none; -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, #000 56%, rgba(0, 0, 0, .72) 70%, rgba(0, 0, 0, .28) 87%, transparent 100%); mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, #000 56%, rgba(0, 0, 0, .72) 70%, rgba(0, 0, 0, .28) 87%, transparent 100%); }