:root { color-scheme: light dark; --bg:#f5f5f7; --fg:#1d1d1f; --cell:#fff; --accent:#4f46e5; --win:#bbf7d0; }
@media (prefers-color-scheme: dark) { :root { --bg:#16161a; --fg:#f2f2f2; --cell:#24242b; --win:#14532d; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--fg); font-family:system-ui,sans-serif; }
main { text-align:center; padding:16px; }
#board { display:grid; grid-template-columns:repeat(3,min(28vw,110px)); gap:8px; justify-content:center; margin:16px 0; }
.cell { aspect-ratio:1; font-size:clamp(2rem,10vw,3.5rem); font-weight:700; border:0; border-radius:12px; background:var(--cell); color:var(--fg); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.cell:disabled { cursor:default; }
.cell.x { color:var(--accent); }
.cell.win { background:var(--win); }
#reset { padding:10px 22px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:1rem; cursor:pointer; }
.score { opacity:.8; }