:root{--page-bg: #d9c4a7;--frame-bg: #d9c4a7;--board-bg: #d9c4a7;--panel: rgba(251, 244, 234, .92);--panel-strong: rgba(255, 250, 244, .98);--line: rgba(108, 80, 48, .14);--ink: #46311d;--muted: #80624a;--shadow: 0 20px 44px rgba(88, 61, 33, .16);--accent: #9b6a36;--accent-strong: #7b4d1f;--hud-width: clamp(132px, 18vw, 188px);--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--stage-gap: 10px;--dialog-gap: 14px;--dialog-safe-buffer: 20px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Aptos,Segoe UI,Helvetica Neue,sans-serif;color:var(--ink);background:var(--page-bg)}body,.app-shell{min-height:100vh;min-height:100dvh}.site-copy{padding:0 calc(18px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(18px + var(--safe-left))}.site-copy__inner{width:min(1040px,100%);margin:0 auto;padding:26px 24px;border-radius:28px;border:1px solid var(--line);background:#faf3e9f0;box-shadow:0 18px 36px #583d211a}.site-copy h1,.site-copy h2{margin:0}.site-copy__lede{margin:14px 0 0;max-width:64ch;color:var(--muted);line-height:1.7}.site-copy__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.site-copy__card{padding:18px 18px 20px;border-radius:22px;border:1px solid rgba(108,80,48,.12);background:#fffaf4d1}.site-copy__card h2{font-size:1.05rem}.site-copy__list{margin:14px 0 0;padding-left:20px;color:var(--muted);line-height:1.7}.site-copy__faq{margin-top:14px}.site-copy__faq details{border-top:1px solid rgba(108,80,48,.12);padding:12px 0}.site-copy__faq details:first-child{border-top:0;padding-top:0}.site-copy__faq summary{cursor:pointer;font-weight:650;list-style:none}.site-copy__faq summary::-webkit-details-marker{display:none}.site-copy__faq p{margin:10px 0 0;color:var(--muted);line-height:1.65}.site-footer{padding:0 calc(18px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(18px + var(--safe-left))}.site-footer__inner{width:min(1040px,100%);margin:0 auto;padding:16px 24px 4px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted)}.site-footer__copy{margin:0;max-width:68ch;line-height:1.65;font-size:.95rem}.site-footer__links{display:flex;flex-wrap:wrap;gap:14px}.site-footer__links a{color:var(--accent-strong);text-decoration:none;font-weight:600}.site-footer__links a:hover{text-decoration:underline}.board-stage{min-height:100vh;min-height:100dvh;padding:calc(var(--stage-gap) + var(--safe-top)) calc(var(--stage-gap) + var(--safe-right)) calc(var(--stage-gap) + var(--safe-bottom)) calc(var(--stage-gap) + var(--safe-left))}.board-frame,.setup-dialog,.dialog-card{border:1px solid var(--line);box-shadow:var(--shadow)}.board-frame{position:relative;min-height:calc(100vh - (var(--stage-gap) * 2) - var(--safe-top) - var(--safe-bottom));min-height:calc(100dvh - (var(--stage-gap) * 2) - var(--safe-top) - var(--safe-bottom));border-radius:28px;overflow:hidden;background:var(--frame-bg)}.board-root{position:absolute;inset:0;background:var(--board-bg)}.corner-action{position:absolute;bottom:14px;z-index:3}.corner-action .button{width:var(--hud-width)}.corner-action--left{left:calc(14px + var(--safe-left))}.corner-action--right{right:calc(14px + var(--safe-right))}.button{appearance:none;border-radius:999px;padding:12px 18px;border:1px solid rgba(109,78,43,.2);background:linear-gradient(180deg,#c9965a,#a36e35 56%,#7d4d1f);color:#fff5ea;font:inherit;font-weight:700;cursor:pointer;box-shadow:inset 0 1px #b67e436b,inset 0 -3px 5px #49280d47,0 10px 18px #62401d38;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.button:hover{transform:translateY(-1px);filter:brightness(1.04)}.button:active{transform:translateY(1px);box-shadow:inset 0 1px #b67e4352,inset 0 -1px 3px #49280d38,0 5px 10px #62401d2e}.button--primary{width:100%;border-color:#6d4e2b38}.button--secondary,.button--ghost{color:#fff5ea}.button:focus-visible,.select:focus-visible,.toggle-row input:focus-visible{outline:2px solid rgba(95,157,255,.62);outline-offset:2px}.dialog-overlay,.overlay{position:fixed;inset:0;z-index:10}.overlay{display:none;align-items:center;justify-content:center;padding:calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left));background:#7589a557;backdrop-filter:blur(10px)}.overlay--visible{display:flex}.dialog-overlay[hidden]{display:none}.dialog-overlay{padding:calc(var(--dialog-gap) + var(--safe-top)) calc(var(--dialog-gap) + var(--safe-right)) calc(var(--dialog-gap) + var(--safe-bottom)) calc(var(--dialog-gap) + var(--safe-left))}.dialog-backdrop{position:absolute;inset:0;background:#586f9047;backdrop-filter:blur(8px)}.dialog-card{position:relative;z-index:1;width:min(520px,calc(100vw - (var(--dialog-gap) * 2) - var(--safe-left) - var(--safe-right)));max-height:calc(100vh - (var(--dialog-gap) * 2) - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));max-height:calc(100dvh - (var(--dialog-gap) * 2) - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));margin:0 auto;padding:20px;border-radius:24px;overflow:auto;background:var(--panel-strong)}.dialog-card__header,.log-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dialog-card__header h2,.log-card h2,.setup-dialog h2{margin:0}.setup-dialog{width:min(540px,calc(100vw - 36px - var(--safe-left) - var(--safe-right)));max-height:calc(100vh - 36px - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));max-height:calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));border-radius:28px;padding:28px;overflow:auto;background:var(--panel-strong)}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--muted)}.status-copy,.toggle-row small{margin:12px 0 0;color:var(--muted);line-height:1.5}.turn-spotlight{margin-top:14px;padding:16px;border-radius:20px;border:1px solid rgba(65,93,129,.12);background:linear-gradient(145deg,#f1f7fffa,#e3edf8fa)}.turn-spotlight strong{display:block;font-size:1.55rem;letter-spacing:-.03em}.turn-spotlight span{display:block;margin-top:8px;color:var(--muted);line-height:1.45}.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0}.status-grid__item{padding:12px 13px;border-radius:18px;background:#eef6fee6;border:1px solid rgba(65,93,129,.08)}.status-grid dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.status-grid dd{margin:8px 0 0;min-height:34px}#game-summary-label,#move-summary-label{font-size:.96rem;font-weight:650;line-height:1.3;color:var(--ink)}.status-value{display:flex;flex-wrap:wrap;gap:8px}.status-chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border-radius:999px;border:1px solid rgba(65,93,129,.12);background:#ffffffe0;color:var(--ink);font-size:.88rem;font-weight:650;white-space:nowrap}.status-chip[data-variant=metric]{min-width:48px}.status-chip[data-tone=black],.turn-spotlight[data-tone=black]{background:linear-gradient(145deg,#39475afa,#26303efa);color:#edf5ff}.status-chip[data-tone=white],.turn-spotlight[data-tone=white]{background:linear-gradient(145deg,#fffffffc,#eef3f9f7);color:#213650}.status-chip[data-tone=red],.turn-spotlight[data-tone=red]{background:linear-gradient(145deg,#ffe8ebfc,#ffd9ddf7);color:#8a2c3a}.status-chip[data-tone=blue],.turn-spotlight[data-tone=blue]{background:linear-gradient(145deg,#e8f3fffc,#d4e7fff7);color:#215792}.status-chip[data-tone=green],.turn-spotlight[data-tone=green]{background:linear-gradient(145deg,#e7fbeefc,#d6f5e2f7);color:#1d6a3d}.status-chip[data-tone=yellow],.turn-spotlight[data-tone=yellow]{background:linear-gradient(145deg,#fff7dcfc,#ffedbcf7);color:#8d6503}.log-card{margin-top:16px;padding:18px;border-radius:22px;border:1px solid rgba(65,93,129,.08);background:#eff6fee0}.log-card__header span{color:var(--muted);font-size:.86rem}.move-log{margin:14px 0 0;padding:0;max-height:300px;overflow:auto;list-style:none}.move-log__item{padding:12px 0;border-top:1px solid rgba(65,93,129,.08)}.move-log__item:first-child{border-top:0;padding-top:0}.move-log__row{display:flex;align-items:center;gap:10px}.move-log__path{color:#395675;white-space:nowrap}.move-log__meta{display:block;margin-top:6px;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.field-group{margin-top:20px}.field-label{display:block;margin-bottom:8px;color:var(--ink);font-size:.92rem}.field-help{margin:8px 2px 0;color:var(--muted);font-size:.84rem;line-height:1.45}.select{width:100%;border-radius:16px;border:1px solid rgba(65,93,129,.12);background:#fffffff5;color:var(--ink);padding:13px 14px;font:inherit}.toggle-row{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:20px;background:#eff6fee0;border:1px solid rgba(65,93,129,.08)}.toggle-row input{inline-size:24px;block-size:24px;accent-color:var(--accent-strong)}.setup-actions{margin-top:24px;display:flex;justify-content:flex-end}.board-svg{width:100%;height:100%;display:block}.board-backdrop__surface{fill:url(#board-surface)}.board-backdrop__grid,.board-backdrop__glow,.board-backdrop__border{display:none}.cell-group{cursor:default;transition:transform .12s ease}.cell-group--interactive{cursor:pointer}.cell-group--interactive:hover{transform:translateY(-1px)}.cell-group--interactive:hover .marble-graphic{transform:translateY(-1px) scale(1.02)}.cell-shadow,.marble-graphic{transform-box:fill-box;transform-origin:center}.cell-shadow{fill:#34507829;opacity:.72}.cell-highlight{fill:#ffffff2e;stroke:#ffffffb8;stroke-width:1.8;opacity:0;transition:opacity .16s ease}.cell-highlight--visible{opacity:1;animation:holePulse .98s ease-in-out infinite}.cell-hole{fill:#9aa6b5;stroke:#ffffff85;stroke-width:1.8}.cell-hole--target{fill:#9ab6d8;stroke:#fffffff5;animation:holePulseFill .98s ease-in-out infinite}.cell-hole--zone-black{fill:#5b6675;stroke:#dce3ec42}.cell-hole--zone-blue{fill:#7098d3}.cell-hole--zone-red{fill:#c98990}.cell-hole--zone-yellow{fill:#d2bc78}.cell-hole--zone-white{fill:#d8dfe8;stroke:#808d9fad}.cell-hole--zone-green{fill:#7ea891}.cell-outline{fill:none;stroke:transparent;stroke-width:3.5}.cell-outline--selected{stroke:#ffd06efa}.cell-outline--selectable{stroke:#5f9dff57}.marble-base{stroke:#1723347a;stroke-width:1.15}.marble-rim{fill:none;stroke:#ffffff4d;stroke-width:.95}.marble-core-glow{fill:#ffffff1f}.marble-sheen{opacity:.98}.marble-spark{fill:#fffffff5}@keyframes holePulse{0%,to{opacity:.28}50%{opacity:.92}}@keyframes holePulseFill{0%,to{fill:#7898bc;stroke:#ffffffb8}50%{fill:#c6daf1;stroke:#fff}}@media(max-width:900px){.board-stage{--stage-gap: 8px}.board-frame{border-radius:24px}.site-copy__grid{grid-template-columns:1fr}.site-footer__inner{flex-direction:column;align-items:flex-start}}@media(max-width:720px){:root{--stage-gap: 6px;--dialog-gap: 10px;--dialog-safe-buffer: 34px}.board-stage{padding:calc(var(--stage-gap) + var(--safe-top)) calc(var(--stage-gap) + var(--safe-right)) calc(var(--stage-gap) + var(--safe-bottom)) calc(var(--stage-gap) + var(--safe-left))}.board-frame{min-height:calc(100vh - (var(--stage-gap) * 2) - var(--safe-top) - var(--safe-bottom));min-height:calc(100dvh - (var(--stage-gap) * 2) - var(--safe-top) - var(--safe-bottom));border-radius:20px}.corner-action{bottom:calc(10px + var(--safe-bottom))}.corner-action--left{left:calc(10px + var(--safe-left))}.corner-action--right{right:calc(10px + var(--safe-right))}.button{padding:11px 15px;font-size:.92rem}.dialog-card{width:calc(100vw - (var(--dialog-gap) * 2) - var(--safe-left) - var(--safe-right));max-height:calc(100vh - (var(--dialog-gap) * 2) - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));max-height:calc(100dvh - (var(--dialog-gap) * 2) - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));margin:0 auto;padding:15px;border-radius:20px}.status-grid{grid-template-columns:1fr}.move-log__row{align-items:flex-start;flex-direction:column}.move-log__path{white-space:normal}.setup-dialog{width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));max-height:calc(100vh - 24px - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom) - var(--dialog-safe-buffer));border-radius:22px;padding:18px}.site-copy{padding:0 calc(10px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(10px + var(--safe-left))}.site-copy__inner{padding:20px 18px;border-radius:22px}.site-footer{padding:0 calc(10px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(10px + var(--safe-left))}.site-footer__inner{padding:14px 8px 2px}.site-footer__copy{font-size:.9rem}}