:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0f1724;
  --accent: #4f46e5;
  --muted: #616e7c;
  --conflict: #ff4d4f;
  /* borders & surfaces */
  --grid-border: rgba(15,23,36,0.06);
  --cell-border: rgba(15,23,36,0.08);
  --thick-border: rgba(15,23,36,0.12);
  --cell-hover-bg: rgba(79,70,229,0.03);
  --cell-selected-bg: rgba(79,70,229,0.06);
  --cell-highlight-bg: rgba(79,70,229,0.03);
  --cell-fixed-bg: rgba(15,23,36,0.02);
  /* buttons */
  --button-bg-top: rgba(0,0,0,0.02);
  --button-bg-bottom: transparent;
  --button-border: rgba(15,23,36,0.06);
  --button-text: var(--text);
}
:root[data-theme="dark"]{
  --bg:#0b1220; --panel:#0f1724; --text:#e6eef6; --accent:#8b5cf6; --muted:#9aa6b2; --conflict:#ff6b6b;
  --grid-border: rgba(230,238,246,0.03);
  --cell-border: rgba(230,238,246,0.06);
  --thick-border: rgba(230,238,246,0.08);
  --cell-hover-bg: rgba(139,92,246,0.06);
  --cell-selected-bg: rgba(139,92,246,0.12);
  --cell-highlight-bg: rgba(139,92,246,0.06);
  --cell-fixed-bg: rgba(230,238,246,0.02);
  --button-bg-top: rgba(255,255,255,0.02);
  --button-bg-bottom: transparent;
  --button-border: rgba(230,238,246,0.06);
  --button-text: var(--text);
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial;margin:0;background:var(--bg);color:var(--text);}
.container{max-width:1100px;margin:24px auto;padding:12px}
h1{margin:8px 0 16px}
.game-area{display:flex;gap:20px;align-items:flex-start}
.sudoku-grid{width:min(90vw,540px);max-width:540px;display:grid;grid-template-columns:repeat(9,1fr);gap:0;border:6px solid var(--grid-border);background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02));}
.sudoku-cell{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px solid var(--cell-border);font-size:clamp(14px,2.4vw,20px);cursor:pointer;user-select:none;background:transparent;padding:0;min-width:28px;min-height:28px}
.sudoku-cell input{width:100%;height:100%;text-align:center;border:0;background:transparent;font-size:inherit;outline:none;padding:0}
.sudoku-cell.fixed{font-weight:700;color:var(--muted)}
.sudoku-cell.fixed{background:var(--cell-fixed-bg)}
.sudoku-cell.fixed input{cursor:default;color:var(--muted);font-weight:700}
.sudoku-cell.given input{cursor:default}
.sudoku-cell.conflict{box-shadow:inset 0 0 0 2px var(--conflict)}
.sudoku-cell:hover{background:var(--cell-hover-bg)}
.sudoku-cell.selected{background:var(--cell-selected-bg)}
.sudoku-cell.highlight{background:var(--cell-highlight-bg)}
.sudoku-cell{transition:background .18s ease, box-shadow .18s ease}

/* Notes (pencil marks) */
.notes{position:absolute;inset:6px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(8px,1.2vw,10px);align-items:center;justify-items:center;color:var(--muted);pointer-events:none}
.notes .note{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.sudoku-cell.has-notes input{opacity:0.0}

/* smooth fill animation */
.sudoku-cell.filled{animation:pop .18s ease}
@keyframes pop{from{transform:scale(.96);opacity:.6}to{transform:none;opacity:1}}
.sudoku-grid .sudoku-cell:nth-child(3n){border-right:2px solid var(--thick-border)}
.sudoku-grid .sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-grid .sudoku-cell:nth-child(n+46):nth-child(-n+54){/* placeholders */}
.sudoku-grid .sudoku-cell:nth-child(-n+9){border-top:2px solid var(--thick-border)}
.sudoku-grid .sudoku-cell{position:relative}
.sudoku-grid .sudoku-cell:nth-child(27n+1){border-left:2px solid var(--thick-border)}
.sudoku-grid .sudoku-cell:nth-child(n+73){border-bottom:2px solid var(--thick-border)}
.panel{width:300px;background:var(--panel);padding:12px;border-radius:8px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.panel-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.panel-row.stats{flex-direction:column;align-items:flex-start}
.button-group{display:flex;gap:8px}
button{padding:8px 10px;border-radius:6px;border:1px solid var(--button-border);background:linear-gradient(180deg,var(--button-bg-top),var(--button-bg-bottom));color:var(--button-text);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease}
button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(2,6,23,0.06)}
button:active{transform:translateY(0);opacity:0.96}
button:focus-visible{outline:2px solid rgba(139,92,246,0.18);outline-offset:2px}
select{padding:8px;border-radius:6px}
.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:26px}
.slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.credits{margin-top:12px;color:var(--muted)}
@media(max-width:900px){.game-area{flex-direction:column;align-items:center}.sudoku-grid{width:min(95vw,540px)}.sudoku-cell{font-size:clamp(12px,3.2vw,18px)}}

/* hint explanation */
.hint-explain{background:rgba(79,70,229,0.06);padding:8px;border-radius:6px;color:var(--text);font-size:13px;min-height:36px}

/* Accessible focus for cells and inputs */
.sudoku-cell:focus-within{box-shadow:0 0 0 3px rgba(139,92,246,0.12);border-radius:4px}
.sudoku-cell input{transition:background .12s ease, color .12s ease}
.sudoku-cell input:focus{background:var(--cell-selected-bg);outline:none}
.sudoku-cell input:focus-visible{outline:2px solid rgba(139,92,246,0.18);outline-offset:2px}

/* Improve keyboard visibility for the grid */
.sudoku-grid:focus{outline:none}

/* Button group small utility */
.panel-row .button-group button{min-width:72px}