body.tic { --back:#191332; --surface:#2b204b; --line:#59448a; --ink:#f8f0ff; --accent:#a5f7f1; --muted:#dfcdf8; }
.match { display:grid; grid-template-columns:minmax(0, 470px) minmax(220px, 1fr); gap:16px; }
.board-side { min-width:0; }
.score { display:flex; justify-content:space-between; gap:6px; padding:6px 1px 8px; font-size:.8rem; color:var(--muted); }
.score b { color:var(--ink); }
.board {
  --n:3; display:grid; grid-template-columns:repeat(var(--n),1fr); gap:5px;
  background:radial-gradient(at 60% 30%,#3d245f,#1d163e);
  border:1px solid #7258b1; border-radius:14px; padding:8px; width:100%; aspect-ratio:1;
  box-shadow:0 0 24px #7951ac44;
}
.board[data-size="5"] { --n:5; }
.board[data-size="6"] { --n:6; }
.cell { display:grid; place-items:center; aspect-ratio:1; min-height:0; border-radius:7px; padding:0; background:#241842; }
.cell:disabled { opacity:1; }
.cell[data-mark="X"] { color:#ff7abf; }
.cell[data-mark="O"] { color:#8bfbf0; }
.cell svg { width:65%; height:65%; fill:none; stroke:currentColor; stroke-width:11; stroke-linecap:round; filter:drop-shadow(0 0 5px currentColor); }
.cell.fading svg { opacity:.38; }
.cell.winner { background:#483278; border-color:#e4caff; }
.cell.hinted { outline:2px solid #ffe292; outline-offset:-4px; }
#status { font-size:.95rem; font-weight:800; min-height:1.5em; margin:.5em 0 0; }
.settings { align-self:center; padding:12px; border:1px solid #6d5496; border-radius:13px; background:#271b45; }
.settings h2 { color:var(--muted); font-size:.73rem; margin:0 0 .35rem; }
.choices { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.choices button, .tools button { min-height:35px; font-size:.8rem; padding-inline:8px; }
.choices [aria-pressed="true"] { color:#1b1735; background:#c9abff; border-color:#e3d4ff; }
#rule { color:var(--muted); font-size:.75rem; line-height:1.45; }
.tools { display:flex; flex-wrap:wrap; gap:5px; }
#reset { color:#22183d; background:#a5f7f1; border-color:#a5f7f1; }
@media(max-width:630px) {
  .match { grid-template-columns:1fr; gap:7px; }
  .board { max-width:320px; margin-inline:auto; }
  .settings { padding:7px; }
  .choices { margin-bottom:6px; }
  .settings h2 { display:inline; }
  .choices { display:inline-flex; margin-inline:5px 0; }
  #difficulty { display:inline; }
  #rule { margin-block:3px 6px; }
}