/* ============================================================
   tetris.css — TETRIS-specifieke styling. Leunt op core.css.
   ALLES in vh → de layout is gebouwd t.o.v. de viewport en vult
   die ALTIJD, ongeacht scherm of (browser)zoom. Tetris omzeilt de
   transform-zoom van core.js (applyZoom dwingt appScale=1 voor
   .tetris-wide), zodat er NIETS herschaalt: deze vh-maten zijn de
   enige sizing. Daardoor is de verhouding bord:info-blokken
   constant, vult het bord altijd de hoogte, en botst niets.
   ============================================================ */

  /* Volledige-scherm + transform-zoom-omzeiling zit nu in core (`.wrap.vh-game`); enter()/leave() zetten die class. */

  /* game-head ZWEEFT in de hoeken → de kop neemt geen verticale rij in, het bord krijgt de volle hoogte.
     ‹ Hub + titel links, Nieuw spel rechts; de transparante spacer ertussen laat het bord erdoor zien. */
  #tetris{ position:relative; }
  #tetris .game-head{ position:absolute; top:0; left:0; right:0; margin:0; z-index:61; pointer-events:none; }   /* boven de pauze-/game-over-overlay (z-index 60) zodat ‹ Hub bereikbaar blijft */
  #tetris .game-head .back, #tetris .game-head .btn{ pointer-events:auto; }
  #tetris .game-head .back{ font-size:2.7vh; padding:1.8vh 3.4vh; border-radius:1.6vh; }
  #tetris .game-head h2{ font-size:3.5vh; }
  #tetris .game-head .newgame{ font-size:2.5vh; padding:1.8vh 3.4vh; border-radius:1.6vh; }

  .tetris-layout{ display:flex; gap:2.6vh; align-items:stretch; justify-content:center; }   /* kolommen even hoog als het bord → moeilijkheid/pauze lijnen onderaan uit */
  .col{ display:flex; flex-direction:column; gap:1.9vh; width:27vh; }
  .col > :first-child{ margin-top:9vh; }          /* bovenste kaart begint onder de zwevende hoekknoppen */
  .col-right #pauseBtn{ margin-top:auto; }         /* pauze onderaan rechts */

  .board-shell{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:1.8vh; padding:1.2vh; transition:box-shadow .35s ease, border-color .35s ease; }
  .board-shell.diff-easy{ border-color:#4FD16B; box-shadow:0 0 0 1px rgba(79,209,107,.45), 0 0 24px 2px rgba(79,209,107,.30); }
  .board-shell.diff-medium{ border-color:#F0A93D; box-shadow:0 0 0 1px rgba(240,169,61,.45), 0 0 24px 2px rgba(240,169,61,.32); }
  .board-shell.diff-hard{ border-color:#F0556B; box-shadow:0 0 0 1px rgba(240,85,107,.5), 0 0 28px 3px rgba(240,85,107,.40); }
  /* Bord = volle hoogte minus body-padding (28px) + shell-padding/marge; breedte volgt (portret 1:2). */
  #board{ display:block; height:calc(100vh - 56px); width:auto; border-radius:1vh; background:#0E1023; }

  .card{ background:var(--panel); border:1px solid var(--line); border-radius:1.8vh; padding:2.1vh 2.3vh; }
  .card .label{ font-family:var(--mono); font-size:2.2vh; color:var(--muted); letter-spacing:0.09em; margin-bottom:1.1vh; }
  .card .value{ font-family:var(--mono); font-size:5.1vh; font-weight:700; line-height:1; }
  .card.dual{ display:flex; gap:2.3vh; } .card.dual .value{ font-size:4.1vh; }
  .mini{ display:block; margin:0 auto; width:18vh; height:auto; }

  /* Pauze/Verder = grote knop met icoon, onderaan rechts */
  #tetris #pauseBtn{ display:flex; align-items:center; justify-content:center; gap:.55em; font-size:2.6vh; padding:2.5vh 2vh; border-radius:1.6vh; }
  #tetris #pauseBtn .picon{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }
  /* Pauze-/game-over-overlay: groter "Gepauzeerd"/"Game over" + grote Verder/Nieuw spel-knoppen */
  #tetris .overlay h3{ font-size:4.4vh; }
  #tetris .overlay .big{ font-size:5.8vh; }
  #tetris .overlay .ov-actions{ width:31vh; gap:1.6vh; }
  #tetris .overlay .ov-actions .btn{ font-size:2.4vh; padding:2.1vh 2vh; }
  /* Felicitatie bij een nieuwe topscore op het game-over-scherm: gouden trofee-regel + "Goed gedaan, mama!" */
  #tetris .overlay .ov-cheer{ flex-direction:column; align-items:center; gap:.5vh; font-weight:800;
    font-size:3.4vh; color:var(--O); text-shadow:0 0 1.4vh rgba(242,197,61,.45); }
  #tetris .overlay .ov-cheer span{ font-size:2.5vh; font-weight:700; color:var(--text); text-shadow:none; }
  /* Niveaukeuze bij een nieuw spel (in dezelfde overlay, zoals Spider/Patience): grote knoppen met de
     vertrouwde kleurcode per niveau (groen/oranje/rood); de laatst gekozen moeilijkheid is ingevuld (.cur). */
  #tetris .overlay .lvlpick{ width:34vh; gap:1.6vh; }
  #tetris .overlay .lvlpick .btn.full{ font-size:2.7vh; padding:2.3vh 2vh; }
  #tetris .overlay .lvlpick .btn[data-diff="easy"]{ border-color:#4FD16B; }
  #tetris .overlay .lvlpick .btn[data-diff="medium"]{ border-color:#F0A93D; }
  #tetris .overlay .lvlpick .btn[data-diff="hard"]{ border-color:#F0556B; }
  #tetris .overlay .lvlpick .btn.cur{ color:#0c1020; }
  #tetris .overlay .lvlpick .btn.cur[data-diff="easy"]{ background:#4FD16B; }
  #tetris .overlay .lvlpick .btn.cur[data-diff="medium"]{ background:#F0A93D; }
  #tetris .overlay .lvlpick .btn.cur[data-diff="hard"]{ background:#F0556B; }