:root{--font-display: "Archivo Black", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--ink: #2a1d10;--cream: #f3e7cd;--paper: #fbf3e0;--red: #d8483d;--gold: #f2b938;--green: #4f9d54;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-move: cubic-bezier(.32, .72, 0, 1);--t-fast: .12s;--t-move: .32s}.app[data-theme=latte]{--sq-light: #e6e9ef;--sq-dark: #7287fd;--frame: #ccd0da}.app[data-theme=walnut]{--sq-light: #e8c79a;--sq-dark: #a26a43;--frame: #3a2519}.app[data-theme=slate]{--sq-light: #cdd6e3;--sq-dark: #5c6c83;--frame: #232b38}.app[data-theme=forest]{--sq-light: #e8eccb;--sq-dark: #6b8d4e;--frame: #26301a}.app[data-theme=latte] .board-frame{border-color:#5c5f77}.app[data-theme=latte] .cell.light,.app[data-theme=latte] .cell.dark{background-image:none}.app[data-theme=latte] .board-grain{opacity:.08}*{box-sizing:border-box}body{margin:0;background:#10131c;color:var(--ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;-webkit-font-smoothing:antialiased}.dither-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;display:block}.app{position:relative;min-height:100vh}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:30px 18px}.panel{background:var(--cream);border:3px solid var(--ink);box-shadow:6px 6px #00000059;color:var(--ink)}.panel-title{font-family:var(--font-mono);font-weight:800;font-size:.9rem;letter-spacing:.08em;margin:0;padding:13px 16px;border-bottom:3px solid var(--ink)}.error-panel{padding:22px;font-size:.95rem;color:var(--red);max-width:340px;text-align:center}.title-screen{gap:32px}.title-stack{text-align:center}.arcade-title{margin:0;font-family:var(--font-display);font-size:clamp(2.7rem,13vw,8rem);line-height:.84;letter-spacing:-.045em;color:#fff;text-shadow:4px 4px 0 var(--red),7px 7px 0 rgba(0,0,0,.32)}.t-line{display:block}.t-accent{color:var(--gold)}.arcade-sub{margin:18px 0 0;font-size:.74rem;letter-spacing:.16em;color:#eaf0fb;text-shadow:0 2px 6px rgba(0,0,0,.6)}.tele{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;margin:0;font-size:.72rem;letter-spacing:.08em;min-width:300px;color:#eef3fb;text-shadow:0 1px 4px rgba(0,0,0,.6)}.tele dt{color:#bccadf}.tele .dots{border-bottom:1px dotted rgba(255,255,255,.55);align-self:end;height:.8em}.tele dd{margin:0;text-align:right}.tele .on{color:#8ef0a0}.load-block{display:flex;flex-direction:column;align-items:center;gap:10px}.load-bar{width:280px;height:16px;border:3px solid #fff;background:#0006;padding:2px}.load-fill{display:block;height:100%;background:var(--gold);width:30%;animation:loadbar 1.1s steps(9) infinite}@keyframes loadbar{0%{width:6%}50%{width:100%}to{width:6%}}.load-text{font-size:.66rem;letter-spacing:.14em;color:#eef3fb;text-shadow:0 1px 4px rgba(0,0,0,.6)}.press-start{font-family:var(--font-mono);font-weight:700;font-size:.9rem;letter-spacing:.16em;color:#fff;background:none;border:0;padding:12px;cursor:pointer;text-shadow:3px 3px 0 rgba(0,0,0,.4);animation:blink 1.1s steps(1,end) infinite}.press-start:hover{color:var(--gold)}@keyframes blink{0%,60%{opacity:1}61%,to{opacity:.3}}.credit{font-size:.62rem;letter-spacing:.14em;color:#ffffff9e;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.6)}.menu-panel{width:min(94vw,420px);display:flex;flex-direction:column;gap:16px;padding:22px}.menu-group{display:flex;flex-direction:column;gap:8px}.menu-label{font-weight:700;font-size:.6rem;letter-spacing:.14em;color:var(--red)}.opt-col{display:flex;flex-direction:column;gap:8px}.opt-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;cursor:pointer;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform var(--t-fast) var(--ease-out)}.opt-row.on{background:var(--gold)}.opt-row:active{transform:translate(3px,3px);box-shadow:none}.opt-name{font-weight:800;font-size:.74rem}.opt-blurb{font-size:.66rem;opacity:.72}.opt-pair{display:flex;gap:10px;flex-wrap:wrap}.opt-color,.opt-swatch{flex:1;min-width:88px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;cursor:pointer;font-weight:700;font-size:.62rem;letter-spacing:.08em;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform var(--t-fast) var(--ease-out)}.opt-color.on,.opt-swatch.on{background:var(--gold)}.opt-color:active,.opt-swatch:active{transform:translate(3px,3px);box-shadow:none}.opt-swatch{flex-direction:column;gap:6px}.disc-mini{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 -2px 3px #00000080}.disc-mini.black{background:radial-gradient(circle at 35% 30%,#5e5f66,#16161a)}.disc-mini.white{background:radial-gradient(circle at 35% 30%,#fff,#cdbb96)}.swatch-chip{display:block;width:26px;height:18px;border:2px solid var(--ink)}.opt-swatch[data-theme=latte] .swatch-chip,.hud-swatch[data-theme=latte] .swatch-chip{background:linear-gradient(135deg,#e6e9ef 50%,#7287fd 50%)}.opt-swatch[data-theme=walnut] .swatch-chip,.hud-swatch[data-theme=walnut] .swatch-chip{background:linear-gradient(135deg,#e8c79a 50%,#a26a43 50%)}.opt-swatch[data-theme=slate] .swatch-chip,.hud-swatch[data-theme=slate] .swatch-chip{background:linear-gradient(135deg,#cdd6e3 50%,#5c6c83 50%)}.opt-swatch[data-theme=forest] .swatch-chip,.hud-swatch[data-theme=forest] .swatch-chip{background:linear-gradient(135deg,#e8eccb 50%,#6b8d4e 50%)}.play-btn{font-family:var(--font-mono);font-weight:800;font-size:.88rem;letter-spacing:.12em;color:#fff;background:var(--red);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}.play-btn:hover{background:#e2554a}.play-btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}.game-screen{justify-content:flex-start;gap:14px;padding-top:clamp(16px,4vh,40px)}.hud{width:min(94vw,560px);display:flex;align-items:stretch;background:var(--cream);border:3px solid var(--ink);box-shadow:4px 4px #00000059;font-size:.66rem;letter-spacing:.06em}.hud-turn{display:flex;align-items:center;gap:7px;padding:0 13px;font-weight:700;color:var(--ink);min-height:38px}.hud-turn:before{content:"●";color:#b8ab93;font-size:.7em}.hud-turn.live{color:var(--red)}.hud-turn.live:before{color:var(--red)}.hud-tele{display:flex;align-items:center;padding:0 13px;color:var(--ink);border-left:3px solid var(--ink)}.hud-tele b{color:var(--green);font-weight:800;margin-left:6px}.hud-right{display:flex;align-items:stretch;margin-left:auto}.hud-themes{display:flex;align-items:center;gap:5px;padding:0 10px;border-left:3px solid var(--ink)}.hud-swatch{padding:0;background:none;border:0;cursor:pointer;line-height:0;opacity:.5}.hud-swatch.on{opacity:1}.hud-swatch.on .swatch-chip{outline:2px solid var(--ink);outline-offset:1px}.hud-btn{font-family:var(--font-mono);font-weight:700;font-size:.6rem;letter-spacing:.08em;background:transparent;color:var(--ink);border:0;border-left:3px solid var(--ink);padding:0 12px;cursor:pointer;transition:background var(--t-fast) ease,color var(--t-fast) ease}.hud-btn:hover:not(:disabled){background:var(--ink);color:var(--cream)}.hud-btn:disabled{opacity:.4;cursor:default}.board-wrap{position:relative;display:flex;justify-content:center}.board-frame{padding:13px;background:var(--frame);border:4px solid var(--ink);box-shadow:7px 7px #0006}.board{position:relative;display:grid;grid-template-columns:repeat(8,1fr);width:min(94vw,560px);aspect-ratio:1;overflow:hidden}.cell{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center}.cell.light{background-color:var(--sq-light);background-image:repeating-linear-gradient(92deg,rgba(120,80,30,.1) 0 1px,transparent 1px 5px)}.cell.dark{background-color:var(--sq-dark);background-image:repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 1px,transparent 1px 5px)}.cell.movable{cursor:pointer}.cell.last:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gold);opacity:.2}.cell.sel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 3px var(--gold)}.board-grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;opacity:.16;mix-blend-mode:soft-light}.pieces{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.piece-anchor{position:absolute;top:0;left:0;width:12.5%;height:12.5%;display:flex;align-items:center;justify-content:center;transition:transform var(--t-move) var(--ease-move);will-change:transform}.disc{position:relative;width:78%;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:box-shadow var(--t-fast) ease,filter var(--t-fast) ease,outline-color var(--t-fast) ease}.disc.black{background:radial-gradient(circle at 38% 30%,#63646c,#2c2d33 40%,#131317 76%);box-shadow:0 7px 10px -3px #0009,0 2px 4px #00000080,inset 0 3px 4px #fff3,inset 0 -6px 9px #0009}.disc.white{background:radial-gradient(circle at 38% 30%,#fffaf0,#ead8b6 42%,#c6b187 80%);box-shadow:0 7px 10px -3px #00000080,0 2px 4px #0006,inset 0 3px 4px #ffffffd9,inset 0 -6px 9px #6e55308c}.disc:before{content:"";position:absolute;top:14%;right:14%;bottom:14%;left:14%;border-radius:50%}.disc.black:before{background:repeating-radial-gradient(circle at 44% 40%,transparent 0 8%,rgba(0,0,0,.18) 8% 11%,transparent 11% 19%)}.disc.white:before{background:repeating-radial-gradient(circle at 44% 40%,transparent 0 8%,rgba(95,72,40,.22) 8% 11%,transparent 11% 19%)}.disc.king:after{content:"";position:absolute;top:7%;right:7%;bottom:7%;left:7%;border-radius:50%;box-shadow:inset 0 0 0 2px var(--gold),0 0 7px #f3c14b80}.crown{position:relative;font-size:1.05rem;line-height:1}.disc.black .crown{color:var(--gold)}.disc.white .crown{color:#9a6a1f}.disc.lifted{outline:3px solid var(--gold);outline-offset:2px;filter:brightness(1.12) drop-shadow(0 0 9px rgba(243,193,75,.65));z-index:3}.pieces.focusing .disc:not(.lifted){filter:brightness(.62) saturate(.85)}.ghost-anchor{position:absolute;top:0;left:0;width:12.5%;height:12.5%;display:flex;align-items:center;justify-content:center;pointer-events:none}.disc.ghost{box-shadow:0 0 0 2px #f3c14bd9;opacity:.4;animation:ghost-pulse 1.2s ease-in-out infinite}.disc.ghost:before{display:none}@keyframes ghost-pulse{0%,to{transform:scale(.88);opacity:.3}50%{transform:scale(1);opacity:.55}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0c0a1080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.result-card{width:min(84%,300px);text-align:center}.result-card.win{box-shadow:6px 6px #00000059,0 0 0 3px var(--gold)}.result-card.lose{box-shadow:6px 6px #00000059,0 0 0 3px var(--red)}.result-card.win .panel-title{color:var(--green)}.result-card.lose .panel-title{color:var(--red)}.result-emoji{font-size:2.2rem;padding-top:14px}.result-actions{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.result-actions .play-btn,.result-actions .opt-color{width:100%;margin:0}.fx-ring{position:absolute;transform-origin:center;border-radius:50%;box-shadow:inset 0 0 0 3px var(--gold);pointer-events:none;will-change:transform,opacity}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}@media (hover: hover) and (pointer: fine){.cell.movable:hover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 3px #ffffff4d}}@media (prefers-reduced-motion: reduce){.piece-anchor{transition:none}.disc.ghost,.press-start,.load-fill{animation:none}}