:root{--ink: #140f0c;--panel: #241c16;--panel-2: #2e241c;--line: #4a3a2a;--gold: #c9a36a;--gold-2: #e8d3a2;--cream: #f3ead8;--muted: #a89478;--white-side: #e7dcc6;--black-side: #6b8f71;--danger: #c45c48;--shadow: 0 18px 50px rgba(0, 0, 0, .45)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 50% -10%,#3a2a1c 0%,transparent 55%),var(--ink);color:var(--cream);font-family:Avenir Next,Segoe UI,Helvetica,sans-serif}body{min-height:100dvh}#shell{display:grid;grid-template-rows:auto 1fr;min-height:100dvh;padding:12px 16px 20px;gap:8px}#topbar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 8px 8px;border-bottom:1px solid var(--line)}#wordmark{font-family:Palatino,Georgia,serif;font-weight:700;letter-spacing:.18em;font-size:.95rem;color:var(--gold-2);margin:0}#clock{font-variant-numeric:tabular-nums;color:var(--gold);font-size:1.05rem}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start;min-height:0}#board-host{position:relative;width:min(100%,calc(100dvh - 5.5rem));aspect-ratio:1 / 1;height:auto;min-width:0;border:1px solid var(--line);background:#1c1611;box-shadow:var(--shadow);overflow:hidden}#board-host canvas{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:block;width:100%!important;height:100%!important}#side{display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,var(--panel) 0%,#1b1511 100%);border:1px solid var(--line);padding:16px;box-shadow:var(--shadow)}#side h2{font-family:Palatino,Georgia,serif;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;font-weight:600}.meta{color:var(--muted);font-size:.92rem;line-height:1.45}.meta strong{color:var(--cream);font-weight:600}.row{display:flex;gap:8px;flex-wrap:wrap}button,.pill{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--gold);background:transparent;color:var(--gold-2);font:inherit;letter-spacing:.04em;padding:8px 12px;cursor:pointer;border-radius:2px}button:hover,.pill:hover{background:#c9a36a1f}button.primary{background:var(--gold);color:var(--ink);font-weight:650}button.primary:hover{background:var(--gold-2)}.pill.active{background:var(--gold);color:var(--ink)}label.slider{display:grid;gap:6px;color:var(--muted);font-size:.82rem}input[type=range]{width:100%;accent-color:var(--gold)}.captured{min-height:1.6rem;height:1.6rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.08em;font-size:1.15rem;line-height:1.6rem;color:var(--cream)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0705c7;display:grid;place-items:center;padding:24px;z-index:20}.overlay.hidden{display:none}.card{width:min(440px,100%);background:var(--panel);border:1px solid var(--gold);padding:28px 26px 24px;box-shadow:var(--shadow)}.card h1{font-family:Palatino,Georgia,serif;font-size:2.1rem;letter-spacing:.16em;margin:0 0 8px;color:var(--gold-2)}.card p{color:var(--muted);line-height:1.5;margin:0 0 18px}.card .row{margin-bottom:12px}#result h1.win{color:var(--gold-2)}#result h1.lose{color:var(--danger)}@media(max-width:860px){main{grid-template-columns:1fr}#board-host{width:min(100%,calc(100dvh - 18rem))}#side{flex-direction:row;flex-wrap:wrap}#side>*{flex:1 1 160px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}