/* ============================================================
   sudoku.css — SUDOKU-specifieke styling. Leunt op core.css.
   ALLES in vh → t.o.v. de viewport gebouwd, vult het scherm altijd.
   Sudoku omzeilt de transform-zoom (enter()/leave() zetten
   `.wrap.vh-game`; core.js → appScale=1). Kop zweeft in de hoeken.
   ============================================================ */

  /* Hub-tegel */
  .tile.sudoku .glyph i:nth-child(1){ background:var(--accent); }
  .tile.sudoku .glyph i:nth-child(2){ background:var(--O); }
  .tile.sudoku .glyph i:nth-child(3){ background:var(--J); }
  .tile.sudoku .glyph i:nth-child(4){ background:var(--good); }
  .tile .hub-hi{ margin-top:7px; color:var(--accent); font-family:var(--mono); font-size:12px; min-height:14px; }

  /* Kop ZWEEFT in de hoeken (‹ Hub + titel links, Nieuw spel rechts) → geen verticale rij, board krijgt de hoogte. */
  #sudoku{ position:relative; }
  #sudoku .game-head{ position:absolute; top:0; left:0; right:0; margin:0; z-index:61; pointer-events:none; }   /* boven de uitslag-overlay (z-index 60) zodat ‹ Hub op het winstscherm bereikbaar blijft */
  #sudoku .game-head .back, #sudoku .game-head .btn{ pointer-events:auto; }
  #sudoku .game-head .back{ font-size:2.7vh; padding:1.8vh 3.4vh; border-radius:1.6vh; }
  #sudoku .game-head h2{ font-size:3.5vh; }
  #sudoku .game-head .newgame{ font-size:2.5vh; padding:1.8vh 3.4vh; border-radius:1.6vh; }

  /* HUD-balk: gecentreerd, op de lijn van de zwevende hoekknoppen (klaart die in het midden). */
  .su-top{ display:flex; gap:2.6vh; align-items:center; margin-bottom:1.4vh; flex-wrap:wrap; justify-content:center; min-height:5.4vh; }
  .su-top .stat{ font-family:var(--mono); font-size:2.3vh; color:var(--muted); }
  .su-top .stat b{ color:var(--accent); font-size:2.5vh; }

  /* Kader met overlay erover (niveaukeuze / winst) */
  .su-frame{ position:relative; }
  .su-main{ display:flex; gap:2.8vh; justify-content:center; align-items:center; }   /* cijferpad verticaal gecentreerd t.o.v. het bord */

  /* 9×9 rooster — lichte achtergrond, dikke randen tussen de 3×3 vakken. --cell in vh → vult de hoogte. */
  .su-board{ --cell:8.7vh; display:grid; grid-template-columns:repeat(9,var(--cell)); grid-template-rows:repeat(9,var(--cell));
    background:#FBFBF7; border:3px solid #2b2f55; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.45); overflow:hidden; }
  .su-cell{ position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid #cdcfdd; color:#1b2030; user-select:none; transition:background .08s ease; }
  .su-cell.sepR{ border-right:2px solid #2b2f55; }
  .su-cell.sepB{ border-bottom:2px solid #2b2f55; }
  .su-cell .v{ font-family:var(--display); font-size:4.6vh; font-weight:600; line-height:1; }
  .su-cell.given{ background:rgba(43,47,85,.06); }
  .su-cell.given .v{ font-weight:800; color:#10131f; }
  .su-cell.user .v{ color:#1f6feb; }
  .su-cell.hint .v{ color:#159a52; }
  .su-cell.bad{ background:rgba(216,50,74,.18); }
  .su-cell.bad .v{ color:var(--red); font-weight:800; }
  .su-cell.good{ background:rgba(21,154,82,.16); }                 /* na controle: jouw juiste cijfers groen */
  .su-cell.good .v{ color:#159a52; font-weight:800; }
  .su-cell.sel{ background:rgba(56,214,224,.45); box-shadow:inset 0 0 0 3px var(--accent); }
  .su-board:not(.solved) .su-cell:hover{ box-shadow:inset 0 0 0 2px rgba(56,214,224,.55); }
  /* Kladnotities: 3×3 mini-raster in een leeg vakje */
  .su-notes{ position:absolute; inset:3px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
  .su-notes i{ display:flex; align-items:center; justify-content:center; font-style:normal; font-family:var(--mono); font-size:1.7vh; line-height:1; color:#6b6f86; }
  .su-board.solved{ animation:suSolved 1.2s ease; }
  @keyframes suSolved{ 0%,100%{ box-shadow:0 6px 18px rgba(0,0,0,.45); } 50%{ box-shadow:0 0 0 4px var(--good), 0 6px 28px rgba(79,209,107,.6); } }

  /* Cijferpad: 3×3 grote knoppen + brede Wis-knop eronder */
  .su-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3vh; width:30vh; align-content:flex-start; }
  .su-num{ position:relative; height:9vh; border-radius:1.6vh; border:1px solid var(--line); background:var(--panel); color:var(--text);
    font-family:var(--display); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .12s, transform .05s, background .12s; }
  .su-num:hover{ border-color:var(--accent); background:var(--panel-2); }
  .su-num:active{ transform:translateY(1px); }
  .su-num:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .su-num .d{ font-size:3.6vh; font-weight:700; }
  .su-erase{ grid-column:1 / -1; height:6.6vh; }
  .su-erase .d{ font-size:2.4vh; font-weight:700; letter-spacing:.02em; }

  .su-msg{ text-align:center; min-height:3vh; margin-top:1.4vh; font-family:var(--mono); font-size:2.1vh; color:var(--accent); }

  /* Rechterkolom: cijferpad + de "Klaar"/"Nieuw spel"-knop eronder (onder Wis) */
  .su-side{ display:flex; flex-direction:column; gap:1.4vh; }
  .su-finish{ display:flex; flex-direction:column; gap:1vh; min-height:6.4vh; justify-content:flex-start; }
  #suDoneBtn, #suNewAfterBtn{ width:100%; }
  #suDoneBtn{ font-size:2vh; font-weight:700; padding:1.6vh 1.2vh; white-space:nowrap; animation:suDonePulse 1.5s ease-in-out infinite; }
  #suDoneBtn:hover{ filter:brightness(1.06); }
  @keyframes suDonePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(56,214,224,0); transform:translateY(0); }
    50%{ box-shadow:0 0 0 7px rgba(56,214,224,.18); transform:translateY(-2px); } }

  /* Controle-animatie: een golf van glow loopt diagonaal (r+c) over het bord, daarna de uitslag */
  .su-board.checking .su-cell{ animation:suScan .5s ease both; animation-delay:calc(var(--d,0) * 55ms); }
  @keyframes suScan{ 0%{ background:transparent; }
    35%{ background:rgba(56,214,224,.6); box-shadow:inset 0 0 0 2px var(--accent); }
    100%{ background:transparent; box-shadow:none; } }
  /* Fout: het bord schudt en kleurt even rood */
  .su-board.wrong{ animation:suShake .55s ease; box-shadow:0 0 0 4px var(--red), 0 6px 24px rgba(216,50,74,.55) !important; }
  @keyframes suShake{ 0%,100%{ transform:translateX(0); } 12%{ transform:translateX(-9px); } 28%{ transform:translateX(8px); }
    44%{ transform:translateX(-6px); } 60%{ transform:translateX(5px); } 76%{ transform:translateX(-3px); } 88%{ transform:translateX(2px); } }
  .su-cell.flashbad{ animation:suBadFlash .55s ease 2 both; }
  @keyframes suBadFlash{ 0%,100%{ background:rgba(216,50,74,.16); } 50%{ background:rgba(216,50,74,.62); box-shadow:inset 0 0 0 2px var(--red); } }

  .su-bottom{ display:flex; gap:1.4vh; justify-content:center; align-items:center; margin-top:1vh; flex-wrap:wrap; }
  #sudoku .su-bottom .btn{ font-size:2vh; padding:1.6vh 2.2vh; border-radius:1.4vh; }
  .su-bottom .btn.on{ background:var(--accent); color:#0c1020; border-color:var(--accent); }   /* notities aan */

  /* Niveaukiezer: inline op de pagina (geen overlay). Vervangt het bord; min-height ≈ bordhoogte → geen sprong. */
  .su-picker{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:2.8vh;
    text-align:center; min-height:78vh; padding:2.4vh 2vh; }
  .su-picker.show{ display:flex; }
  .su-picker h3{ margin:0; font-size:3.4vh; letter-spacing:.03em; color:var(--text); }
  /* compact 2×2-raster (past altijd zonder scrollen) */
  #supick{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6vh; width:min(56vh,92%); }
  #supick .btn.full{ display:flex; flex-direction:column; align-items:center; gap:0; padding:2.2vh 2vh; line-height:1.2; }
  #supick .btn.full b{ font-size:2.4vh; }
  #supick .su-sub{ font-weight:400; font-size:1.8vh; color:var(--muted); margin-top:.7vh; }

  @media (prefers-reduced-motion: reduce){
    .su-board.solved, .su-board.checking .su-cell, .su-board.wrong, .su-cell.flashbad, #suDoneBtn{ animation:none !important; }
  }