styles.css

:root{
  --bg: #071023;
  --card: #0e1a2b;
  --accent: #06b6d4;
  --muted: #9fb2c8;
  --glass: rgba(255,255,255,0.02);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:#e6eef6;background:linear-gradient(180deg,var(--bg),#021022);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.container{width:100%;max-width:900px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px}
.header{display:flex;gap:12px;align-items:center;justify-content:space-between}
.header h1{margin:0;font-size:26px}
.lead{margin:0;color:var(--muted);font-size:13px}
.controls{margin-top:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.group{display:flex;flex-direction:column;gap:6px}
.radios{display:flex;gap:10px}
select{background:var(--glass);color:inherit;border:0;padding:8px;border-radius:8px}
button{background:var(--accent);border:0;padding:8px 12px;border-radius:8px;color:#042027;cursor:pointer;font-weight:700}
button.muted{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}
.game{margin-top:18px}
.status{padding:10px;background:var(--glass);border-radius:8px;color:var(--muted)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.cell{aspect-ratio:1/1;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:800;cursor:pointer;user-select:none;transition:transform .12s ease, box-shadow .12s ease}
.cell:hover{transform:translateY(-4px)}
.cell[aria-disabled="true"]{cursor:not-allowed;opacity:0.95}
.scoreboard{display:flex;gap:12px;margin-top:12px}
.score{background:var(--glass);padding:8px 12px;border-radius:8px;color:var(--muted);display:flex;gap:8px;align-items:center}
.label{font-weight:700;color:#fff;margin-right:6px}
.highlight{background:linear-gradient(90deg, rgba(16,185,129,0.12), rgba(6,182,212,0.06));box-shadow:0 8px 30px rgba(16,185,129,0.06) inset}
.cell.x{color:#ffd166}
.cell.o{color:#74c0fc}
.cell:focus{outline:3px solid rgba(6,182,212,0.12)}
.footer{margin-top:14px;color:var(--muted);font-size:13px}
@media (max-width:520px){.cell{font-size:36px}.row{flex-direction:column;align-items:flex-start}}