:root { --bg:#1e1e2e; --fg:#cdd6f4; --accent:#89b4fa; --x:#f38ba8; --o:#a6e3a1; --cell:#313244; --cell-hover:#45475a; --draw:#6c7086; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
       background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; gap:18px; }
h1 { margin:0; font-weight:600; letter-spacing:1px; }
#status { font-size:1.2rem; min-height:1.5em; font-weight:500; }
#board { display:grid; grid-template-columns:repeat(3,96px); grid-template-rows:repeat(3,96px); gap:8px; }
.cell { background:var(--cell); border:none; border-radius:12px; font-size:3rem; font-weight:700; color:var(--fg);
        cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .05s; }
.cell:hover:not(:disabled) { background:var(--cell-hover); }
.cell:active:not(:disabled) { transform:scale(.95); }
.cell:disabled { cursor:default; }
.cell.x { color:var(--x); }
.cell.o { color:var(--o); }
.cell.win { background:var(--accent); }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
button.btn, select { background:var(--cell); color:var(--fg); border:1px solid var(--cell-hover); border-radius:8px;
                      padding:8px 14px; font-size:.95rem; cursor:pointer; }
button.btn:hover { background:var(--cell-hover); }
.score { display:flex; gap:18px; font-size:.95rem; opacity:.85; }

/* Ultimate mode: a 3x3 grid of 3x3 sub-boards. Sized so the whole thing
   lands close to the classic board's footprint (~304px). */
#uboard { display:none; grid-template-columns:repeat(3,96px); grid-template-rows:repeat(3,96px); gap:8px; }
.subboard { position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
            gap:3px; border-radius:8px; transition:box-shadow .15s, opacity .15s; }
.subboard.active { box-shadow:0 0 0 2px var(--accent); }
.subboard.locked .ucell { opacity:.55; }
.ucell { background:var(--cell); border:none; border-radius:4px; font-size:1.15rem; font-weight:700; color:var(--fg);
         cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
         transition:background .15s, transform .05s; }
.ucell:hover:not(:disabled) { background:var(--cell-hover); }
.ucell:active:not(:disabled) { transform:scale(.9); }
.ucell:disabled { cursor:default; }
.ucell.x { color:var(--x); }
.ucell.o { color:var(--o); }
.ucell.win { background:var(--accent); }
.ucell.win .stroke { stroke:var(--bg); }
/* Once a sub-board is decided, its mini-grid stays faintly visible
   underneath (dimmed, not hidden) and a giant mark claims the whole
   square on top — same idea as the main board's win state, scaled up. */
.subboard.done .ucell { opacity:.22; }
.subboard-mark { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
                  border-radius:8px; font-size:2.4rem; font-weight:800; }
.subboard.done .subboard-mark { display:flex; }
.subboard.done-x .subboard-mark { background:rgba(243,139,168,.3); color:var(--x); }
.subboard.done-o .subboard-mark { background:rgba(166,227,161,.3); color:var(--o); }
.subboard.done-draw .subboard-mark { background:rgba(108,112,134,.3); color:var(--draw); font-size:2rem; }
.subboard-mark .mark { width:80%; height:80%; }

/* drawn marks */
.mark { width:78%; height:78%; }
.stroke { fill:none; stroke-width:12; stroke-linecap:round; }
.x .stroke { stroke:var(--x); }
.o .stroke { stroke:var(--o); }
.cell.win .stroke { stroke:var(--bg); }
.mark.animate .stroke { stroke-dasharray:1; stroke-dashoffset:1; animation:draw .32s ease-out forwards; }
.mark.animate .stroke.s2 { animation-delay:.16s; }
@keyframes draw { to { stroke-dashoffset:0; } }

/* rules modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
                 align-items:center; justify-content:center; padding:20px; z-index:10; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg); border:1px solid var(--cell-hover); border-radius:14px; max-width:420px;
         padding:24px 26px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.modal h2 { margin:0 0 12px; }
.modal p { line-height:1.55; margin:0 0 18px; opacity:.9; }
.modal .btn { width:100%; }
/* mode-select overlay (choose game mode before the game starts) */
.mode-group { margin:0 0 16px; }
.mode-label { font-size:.85rem; opacity:.8; margin-bottom:8px; }
.opts { display:flex; flex-direction:column; gap:8px; }  /* difficulty stacks vertically */
.opt { background:var(--cell); color:var(--fg); border:1px solid var(--cell-hover);
       border-radius:8px; padding:9px 12px; font-size:.92rem; font-weight:700; font-family:inherit; cursor:pointer; }
.opt:hover { background:var(--cell-hover); }
/* Selected state is color/background only — font-weight stays constant so
   selecting a longer label (e.g. "Ultimate (9x9)") never makes it wider
   and reflows the modal's width. */
.opt.sel { background:var(--accent); color:var(--bg); border-color:var(--accent); }
#startGame { width:100%; margin-top:6px; }
#modeModal { background:var(--bg); }   /* opaque start screen — hide game chrome behind it */
#modeModal .modal { background:var(--cell); }
/* Accessibility: honor prefers-reduced-motion — neutralize animations,
   transitions, and motion effects (pulse, shake, drop, blink, glows). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}