:root {
  --bg: #0f172a; --panel: #1e293b; --cell: #334155; --cell-hover: #475569;
  --x-color: #38bdf8; --o-color: #fb7185; --text: #e2e8f0; --muted: #94a3b8;
  --accent: #22c55e; --win: #facc15; --danger: #f87171;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; padding:24px 16px; }
button, select { font: inherit; }
.game-shell { width:min(780px,100%); margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.game-header { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; font-weight:700; }
h1 { margin:2px 0 0; font-size:2rem; letter-spacing:2px; } h1 .x,.x { color:var(--x-color); } h1 .o,.o { color:var(--o-color); }
.controls { width:100%; background:var(--panel); border-radius:12px; padding:14px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-end; }
.primary-controls { margin-bottom:8px; } .contextual-controls { margin-bottom:16px; }
.control-group { display:flex; flex-direction:column; gap:6px; min-width:128px; }
.control-group label { font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
select, button { background:var(--cell); color:var(--text); border:1px solid transparent; border-radius:8px; padding:9px 12px; cursor:pointer; }
select:hover, button:hover:not(:disabled) { background:var(--cell-hover); }
button:focus-visible, select:focus-visible, .cell:focus-visible { outline:3px solid var(--win); outline-offset:2px; }
button:disabled { opacity:.42; cursor:not-allowed; }
button.primary { background:var(--accent); color:#052e16; font-weight:800; }
.icon-btn { white-space:nowrap; }
.button-group { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.scoreboard { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:min(540px,100%); margin-bottom:10px; }
.score { background:var(--panel); border-radius:10px; padding:8px 12px; text-align:center; min-width:0; }
.score .label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.score .value { font-size:1.35rem; font-weight:800; }
.score.x .value { color:var(--x-color); } .score.o .value { color:var(--o-color); }
.match-status { color:var(--muted); font-size:.86rem; min-height:1.3em; margin-bottom:4px; }
#status { font-size:1.08rem; margin-bottom:14px; min-height:1.5em; font-weight:700; text-align:center; }
.board { display:grid; grid-template-columns:repeat(3,100px); grid-template-rows:repeat(3,100px); gap:8px; }
.cell { padding:0; width:100px; height:100px; border:0; background:var(--cell); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:3rem; font-weight:800; user-select:none; transition:background .15s,transform .1s; }
.cell:hover:not(.taken):not(:disabled) { background:var(--cell-hover); }
.cell.taken { cursor:default; } .cell.x { color:var(--x-color); } .cell.o { color:var(--o-color); }
.cell.win { background:#423d10; box-shadow:0 0 0 3px var(--win) inset; }
.cell.pop { animation:pop .18s ease-out; } @keyframes pop { from{transform:scale(.6)} to{transform:scale(1)} }
.history-panel { width:min(620px,100%); background:var(--panel); border-radius:12px; padding:12px 14px; margin-top:18px; }
.history-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.history-heading h2 { font-size:.82rem; text-transform:uppercase; letter-spacing:1px; margin:0; color:var(--muted); }
.history-heading button { padding:7px 10px; font-size:.82rem; }
.history-list { display:flex; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:.82rem; }
.history-chip { background:var(--bg); border-radius:999px; padding:5px 9px; }
.hidden { display:none !important; }
footer { margin-top:18px; color:var(--muted); font-size:.78rem; text-align:center; line-height:1.45; }
@media (max-width:560px) {
  body { padding:14px 10px; } .game-header { align-items:flex-end; } h1 { font-size:1.65rem; }
  .controls { justify-content:flex-start; } .control-group { flex:1 1 130px; } .button-group { width:100%; }
  .button-group button { flex:1 1 105px; } .scoreboard { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:360px) {
  .board { grid-template-columns:repeat(3,82px); grid-template-rows:repeat(3,82px); }
  .cell { width:82px; height:82px; font-size:2.4rem; }
}
.header-actions,.history-actions{display:flex;gap:8px;flex-wrap:wrap}.streak-status{min-height:1.2em;color:var(--muted);font-size:.8rem;margin-bottom:8px}.cell.hint{box-shadow:0 0 0 3px var(--accent) inset;animation:hintPulse .7s ease-in-out 2}@keyframes hintPulse{50%{transform:scale(.94)}}.stats-dialog{width:min(520px,calc(100% - 28px));border:1px solid var(--cell-hover);border-radius:14px;background:var(--panel);color:var(--text);padding:18px}.stats-dialog::backdrop{background:rgba(2,6,23,.78)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-head h2{margin:0;font-size:1.15rem}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.stat-card{background:var(--bg);border-radius:10px;padding:12px}.stat-card b{display:block;font-size:1.45rem;margin-top:3px}.stat-card span{color:var(--muted);font-size:.75rem;text-transform:uppercase}.danger-btn{border-color:var(--danger);color:var(--danger)}
body.theme-neon{--bg:#020617;--panel:#071b25;--cell:#0b3442;--cell-hover:#105063;--x-color:#22d3ee;--o-color:#f472b6;--accent:#34d399;--win:#fde047}body.theme-paper{--bg:#e5e7eb;--panel:#f8fafc;--cell:#dbe3ec;--cell-hover:#cbd5e1;--x-color:#0369a1;--o-color:#be123c;--text:#172033;--muted:#64748b;--accent:#16a34a;--win:#ca8a04}
@media(max-width:560px){.header-actions{justify-content:flex-end}.stats-grid{grid-template-columns:1fr 1fr}}
.achievement-list{display:grid;gap:9px;margin-top:16px}.achievement{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:10px;padding:11px 12px;border:1px solid transparent}.achievement.earned{border-color:var(--accent)}.achievement.locked{opacity:.55}.achievement-icon{font-size:1.55rem;min-width:28px;text-align:center}.achievement b{display:block}.achievement span{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}.focus-mode .contextual-controls,.focus-mode .history-panel,.focus-mode footer,.focus-mode .eyebrow{display:none}.focus-mode .game-shell{width:min(560px,100%)}.focus-mode .primary-controls .control-group,.focus-mode #resetScoreBtn,.focus-mode #undoBtn,.focus-mode #hintBtn{display:none}.focus-mode .primary-controls{background:transparent;padding:4px;margin-bottom:10px}.focus-mode .board{grid-template-columns:repeat(3,120px);grid-template-rows:repeat(3,120px)}.focus-mode .cell{width:120px;height:120px;font-size:3.6rem}@media(max-width:430px){.focus-mode .board{grid-template-columns:repeat(3,92px);grid-template-rows:repeat(3,92px)}.focus-mode .cell{width:92px;height:92px;font-size:2.8rem}}

.analysis-summary{padding:12px 0 16px;opacity:.9}.analysis-list{display:grid;gap:8px;max-height:55vh;overflow:auto}.analysis-row{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid currentColor;border-radius:10px;opacity:.9}.analysis-row small{display:block;margin-top:3px;opacity:.72}.analysis-move{font-weight:800}.quality-best{border-left-width:5px}.quality-good{border-left-width:3px}.quality-mistake{border-left-style:dashed}