:root{--felt: #2f9257;--felt-hi: #3ba967;--felt-lo: #216f43;--line: rgba(6, 40, 22, .34);--dot: rgba(6, 34, 20, .5);--frame-a: #1f5738;--frame-b: #113722;--frame-edge: rgba(255, 255, 255, .08);--disc-black: #262626;--disc-black-hi: #5c5c5c;--disc-white: #f2ede2;--disc-white-hi: #ffffff}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--felt: #298050;--felt-hi: #329158;--felt-lo: #1a613b;--line: rgba(0, 0, 0, .4);--dot: rgba(0, 0, 0, .52);--frame-a: #164029;--frame-b: #0b2a1a;--frame-edge: rgba(255, 255, 255, .06)}}:root[data-theme=dark]{--felt: #298050;--felt-hi: #329158;--felt-lo: #1a613b;--line: rgba(0, 0, 0, .4);--dot: rgba(0, 0, 0, .52);--frame-a: #164029;--frame-b: #0b2a1a;--frame-edge: rgba(255, 255, 255, .06)}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(94vw,440px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between}.title{font-size:clamp(28px,8vw,44px);font-weight:800;line-height:1;letter-spacing:-1px}.stats{display:flex;gap:8px}.stat{flex:1;background:var(--board-bg);color:var(--accent-text);border-radius:8px;padding:6px 10px;text-align:center;transition:box-shadow .14s ease,transform .14s ease}.stat.active{box-shadow:0 0 0 3px var(--accent);transform:translateY(-1px)}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.stat .value{font-size:22px;font-weight:800;line-height:1.1}.stat .chip{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin-right:5px}.stat .chip.b{background:radial-gradient(circle at 34% 30%,var(--disc-black-hi),var(--disc-black));box-shadow:inset 0 0 0 1px #ffffff40}.stat .chip.w{background:radial-gradient(circle at 34% 30%,var(--disc-white-hi),var(--disc-white));box-shadow:inset 0 0 0 1px #00000040}.status{font-size:16px;font-weight:700;text-align:center;min-height:22px}.board{position:relative;width:100%;padding:3.6%;border-radius:16px;background:linear-gradient(155deg,var(--frame-a),var(--frame-b));box-shadow:0 14px 30px #00000057,0 3px 8px #0000003d,inset 0 1px 0 var(--frame-edge),inset 0 0 0 1px #00000047}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0;border-radius:6px;overflow:hidden;background-color:var(--felt);background-image:radial-gradient(circle at 25% 25%,var(--dot) 0 2.6px,transparent 3.1px),radial-gradient(circle at 75% 25%,var(--dot) 0 2.6px,transparent 3.1px),radial-gradient(circle at 25% 75%,var(--dot) 0 2.6px,transparent 3.1px),radial-gradient(circle at 75% 75%,var(--dot) 0 2.6px,transparent 3.1px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12.5%),repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 12.5%),radial-gradient(130% 90% at 50% -10%,var(--felt-hi),transparent 62%),radial-gradient(130% 100% at 50% 120%,var(--felt-lo),transparent 60%);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 10px #00000038}.cell{aspect-ratio:1 / 1;background:transparent;border:none;border-radius:0;padding:9%;cursor:default;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .12s ease}.cell.legal{cursor:pointer}.cell.legal:hover{background:#ffffff12}.cell.legal:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#1c1c1c8c,#0000006b);box-shadow:0 0 0 2px #ffffff24;opacity:.55;animation:hint 1.9s ease-in-out infinite;transition:transform .12s ease,opacity .12s ease}.cell.legal:hover:after{transform:scale(1.3);opacity:.85;animation:none}@keyframes hint{0%,to{opacity:.4;transform:scale(.92)}50%{opacity:.68;transform:scale(1.06)}}.disc{width:100%;height:100%;border-radius:50%;transform:scale(0);transition:transform .15s ease}.disc.on{transform:scale(1)}.disc.b{background:radial-gradient(circle at 35% 26%,rgba(255,255,255,.5) 0 6%,transparent 24%),radial-gradient(circle at 34% 32%,var(--disc-black-hi) 0%,var(--disc-black) 52%,#0b0b0b 100%);box-shadow:0 3px 5px #00000073,0 1px 1px #00000059,inset 0 2px 3px #ffffff47,inset 0 -4px 6px #0000008c}.disc.w{background:radial-gradient(circle at 35% 26%,#ffffff 0 8%,transparent 26%),radial-gradient(circle at 34% 32%,var(--disc-white-hi) 0%,var(--disc-white) 54%,#cec6b6 100%);box-shadow:0 3px 5px #00000052,0 1px 1px #00000038,inset 0 2px 3px #ffffffe6,inset 0 -4px 6px #00000024}.disc.flip{animation:flip .32s ease}@keyframes flip{0%{transform:scale(1) rotateY(0)}45%{transform:scale(1.07) rotateY(90deg)}55%{transform:scale(1.07) rotateY(90deg)}to{transform:scale(1) rotateY(0)}}.disc.place{animation:place .22s ease}@keyframes place{0%{transform:scale(0)}70%{transform:scale(1.14)}to{transform:scale(1)}}.cell.cursor{box-shadow:inset 0 0 0 3px var(--accent)}.overlay{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:var(--overlay-bg);backdrop-filter:blur(2px);z-index:10;opacity:0;pointer-events:none;transition:opacity .24s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay .msg{font-size:clamp(26px,8vw,40px);font-weight:800}.overlay.win .msg{color:#ed9a2e;text-shadow:0 2px 12px rgba(237,154,46,.35)}.overlay .sub{font-size:15px;font-weight:700;opacity:.9}.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.how{font-size:13px;opacity:.85;flex:1}.how b{font-weight:700}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .12s ease,transform .12s ease}.btn:hover{filter:brightness(1.05)}.btn:active{filter:brightness(.95);transform:translateY(1px)}@media(prefers-reduced-motion:reduce){.cell.legal:after{animation:none}.disc,.disc.flip,.disc.place{animation:none;transition:none}}