.tictactoe-area { max-width:420px; text-align:center; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.mode-group, .actions { display:flex; gap:8px; }
.mode.active { border-color:var(--blue); color:var(--blue); background:var(--bluewash); }
.record { display:flex; justify-content:center; gap:24px; color:var(--muted); font-size:14px; margin-bottom:10px; }
.record b { color:var(--ink); font-size:17px; }
.status { font-weight:700; color:var(--ink); margin-bottom:12px; }
.board { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; max-width:360px; margin:0 auto; }
.cell { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:800; border:1px solid var(--rule); background:var(--panel); cursor:pointer; border-radius:6px; transition:background .12s,transform .12s,border-color .12s; }
.cell:hover { border-color:var(--blue); }
.cell.x { color:var(--blue); }
.cell.o { color:var(--orange); }
.cell.win-line { background:var(--bluewash); border-color:var(--blue); }
.cell:disabled { cursor:default; }
@media (max-width:780px) { .controls { flex-direction:column; align-items:stretch; } .mode-group, .actions { justify-content:center; } }