:root{--bg:#f4f5f9;--ink:#1f2433;--x:#2563eb;--o:#e11d48;--win:#fde68a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--ink);font-family:system-ui,sans-serif}
main{width:min(92vw,380px);text-align:center;padding:16px}
h1{margin:0 0 8px}
#status{font-size:1.25rem;font-weight:600;min-height:1.6em}
#board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.cell{aspect-ratio:1;font-size:clamp(2.5rem,14vw,4rem);font-weight:700;border:0;border-radius:12px;background:#fff;box-shadow:0 1px 4px #0003;cursor:pointer}
.cell:focus-visible,button:focus-visible{outline:3px solid #111;outline-offset:2px}
.cell.X{color:var(--x)}.cell.O{color:var(--o)}
.cell.win{background:var(--win)}
.cell:disabled{cursor:default}
.scores{display:flex;justify-content:space-around;margin:12px 0}
.scores div{display:flex;flex-direction:column;font-size:.9rem}
.scores strong{font-size:1.6rem}
.controls{display:flex;flex-direction:column;gap:10px;align-items:center}
#restart{padding:10px 24px;font-size:1rem;border:0;border-radius:8px;background:var(--ink);color:#fff;cursor:pointer}