:root{--paper: #eaeff3;--grid: #cdd8e1;--ink: #16213a;--ink-soft: #4a5873;--x: #1d3fbf;--o: #0b8f7f;--highlight: #ffe45c;--panel: #f8fafb;--line: #b9c6d2;--focus: #1d3fbf}*{box-sizing:border-box}html,body{margin:0}body{font-family:Bricolage Grotesque,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;min-height:100vh}.shell{max-width:1040px;margin:0 auto;padding:32px 20px 56px}.loading{padding:40px 0;font-size:1.1rem}.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}h1{margin:0;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1}h2{margin:0 0 12px;font-size:1.1rem;font-weight:600}.mode{display:inline-flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--panel)}.mode-btn{font:inherit;font-weight:600;padding:9px 16px;border:0;background:transparent;color:var(--ink);cursor:pointer}.mode-btn+.mode-btn{border-left:2px solid var(--ink)}.mode-active{background:var(--ink);color:var(--panel)}.mode-btn:disabled{cursor:wait}.layout{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}@media (min-width: 880px){.layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}.status{margin:0 0 14px;font-size:1.5rem;font-weight:600;min-height:2rem}.status-over{font-weight:800}.board{--size: min(100%, 440px);width:var(--size);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);background:var(--ink);gap:5px;border:5px solid var(--ink);border-radius:6px}.cell{position:relative;border:0;padding:8%;background:var(--panel);cursor:pointer;display:grid;place-items:center}.cell:disabled{cursor:not-allowed}.cell:not(:disabled):hover{background:#fff}.cell-win{background:var(--highlight)!important}.mark{width:100%;height:100%;fill:none;stroke-width:9;stroke-linecap:round}.mark path,.mark circle{stroke-dasharray:1;stroke-dashoffset:0;animation:draw .28s ease-out}.mark-x{stroke:var(--x)}.mark-o{stroke:var(--o)}@keyframes draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}.error{margin:12px 0 0;min-height:1.4rem;color:#b3261e;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.btn{font:inherit;font-weight:600;padding:10px 18px;border-radius:8px;cursor:pointer;border:2px solid var(--ink);background:var(--panel);color:var(--ink)}.btn:hover:not(:disabled){background:#fff}.btn-primary{background:var(--ink);color:var(--panel)}.btn-primary:hover:not(:disabled){background:#24335a}.btn-quiet{border-color:var(--line);color:var(--ink-soft)}.btn:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.side{display:grid;gap:20px}.panel{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:18px}.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}.scores div{border:1px solid var(--line);border-radius:6px;padding:10px;text-align:center}.scores dt{font-size:.9rem;color:var(--ink-soft)}.scores dd{margin:4px 0 0;font-size:2rem;font-weight:800;line-height:1}.empty{margin:0;color:var(--ink-soft)}.table-wrap{max-height:280px;overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}th{font-size:.9rem;color:var(--ink-soft);font-weight:600;position:sticky;top:0;background:var(--panel)}.who{font-weight:800}.who-X{color:var(--x)}.who-O{color:var(--o)}@media (prefers-reduced-motion: reduce){.mark path,.mark circle{animation:none}}