/* ============================================================
   wordkruis.css — GEDEELDE speelveld-styling voor béide woordspellen
   (Woordkruis 1 & 2). Eén kopie i.p.v. dezelfde regels in beide CSS-bestanden.
   Alles is gescoped onder .wk-game (de klasse op elke woordspel-<section>),
   want .tile/.grid/.cell botsen anders met de hub-tegels/-grid uit core.css.
   Wat in de gedeelde modal of op de body-vuurwerklaag rendert blijft ongescoped
   (.logitem…, .ws-spark) maar is uniek benoemd.
   Leunt op core.css (palet, .btn, .game-head, .overlay, .modal, .zoomctl, body).
   ============================================================ */

  :root{ --gold:#F2C53D; }   /* de woordspellen gebruiken var(--gold); core heeft 'm niet apart */

  /* Volledige-scherm vh-layout (transform-zoom omzeild via .wrap.vh-game in core.js; enter()/leave() zetten die class).
     ÉÉN vaste indeling: raster LINKS, letterwiel + knoppen RECHTS — vult een breed scherm netjes, groot en leesbaar,
     en bespaart mama een keuze (de oude ⬌/⬍-toggle is geschrapt). Alles in vh; enkel het wiel houdt zijn eigen
     300-coördinatenstelsel (px) — een geïsoleerde invoer-widget, prima groot op mama's lage resolutie. */
  .wk-game{ position:relative; width:100%; max-width:100%; margin:0; -webkit-tap-highlight-color:transparent; user-select:none;
    --wheel:47vh; }   /* maat van het letterwiel-vak in vh → schaalt mee met de viewport (stabiel bij in-/uitzoomen) */

  /* Kop ZWEEFT in de hoeken (gedeeld door béide woordspellen): ‹ Hub + titel links, Logboek/Parkeer rechts.
     Neemt geen verticale rij in → het speelveld krijgt de volle hoogte. */
  .wk-game .game-head{ position:absolute; top:0; left:0; right:0; margin:0; z-index:3; pointer-events:none; }
  .wk-game .game-head .back, .wk-game .game-head .btn{ pointer-events:auto; }
  .wk-game .game-head .back{ font-size:2.7vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }
  .wk-game .game-head h2{ font-size:3.4vh; }
  .wk-game .game-head .btn{ font-size:2.4vh; padding:1.7vh 2.8vh; border-radius:1.6vh; }

  /* ---- statusbalk: chips gecentreerd op de kop-lijn (klaart de zwevende hoekknoppen, zoals Sudoku) ---- */
  .wk-game .ws-hud{ display:flex; align-items:center; justify-content:center; gap:1.6vh; min-height:7vh;
    margin:0 0 1vh; font-family:var(--mono); font-size:2vh; color:var(--muted); }
  .wk-game .ws-hud .v{ color:var(--text); font-weight:700; }
  .wk-game .chip{ background:var(--panel); border:1px solid var(--line); border-radius:999px;
    padding:1vh 2.4vh; font-size:2vh; white-space:nowrap; }

  /* ---- speelveld: raster (vierkant kader) links, wiel-kolom rechts — vult de hoogte ---- */
  .wk-game .ws-playframe{ position:relative; }
  .wk-game .ws-play{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:4vh; height:86vh; }
  .wk-game .gridwrap{ flex:0 0 auto; height:100%; aspect-ratio:1 / 1; max-width:58vw;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#1b1f3e,#15172f); border:1px solid var(--line); border-radius:2.4vh;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -16px 40px rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.25); }
  .wk-game .ws-side{ position:relative; flex:0 0 auto; width:var(--wheel); height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vh; }

  /* ---- gevormd woord boven het wiel; hint/woord-knoppen + muntjes eronder ---- */
  .wk-game .ws-wheelrow{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6.5vh; }
  /* VASTE indeling (geen flex-wrap → springt niet bij in-/uitzoomen): Hint + Woord naast elkaar
     en even groot (2 gelijke kolommen), de muntjes gecentreerd eronder (span over beide kolommen). */
  .wk-game .ws-controls{ width:100%; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; justify-items:stretch; gap:1.4vh; }
  .wk-game .ws-actbtn{ display:inline-flex; align-items:center; justify-content:center; gap:.7vh;
    font-size:2.6vh; padding:1.7vh 2.7vh; white-space:nowrap; }
  .wk-game .ws-actbtn .ico{ font-size:3.1vh; }
  .wk-game .ws-actbtn .cost{ font-family:var(--mono); font-size:2.1vh; font-weight:700; color:var(--gold); }
  .wk-game .ws-actbtn .cost .coin{ margin-left:4px; }   /* wat lucht tussen het cijfer en het 🪙 */
  .wk-game .ws-coins{ grid-column:1 / -1; justify-self:center;
    font-family:var(--mono); font-size:3vh; font-weight:700; color:var(--gold); white-space:nowrap;
    background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:1.3vh 2.8vh; }
  .wk-game .ws-coins .v{ color:var(--gold); }
  .wk-game .grid{ display:grid; gap:7px; transform-origin:center center; }
  .wk-game .cell{ width:46px; height:46px; border-radius:11px;
    background:linear-gradient(180deg,#262b54,#1c2143); border:1px solid #343a73;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; font-weight:700; text-transform:uppercase; color:transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition:background .15s, color .15s, box-shadow .15s; }
  .wk-game .cell.on{ color:#06262e; background:linear-gradient(180deg,#63e4ed,#34c4ce); border-color:#88f1f8;
    text-shadow:0 1px 0 rgba(255,255,255,.3);
    box-shadow:0 3px 10px rgba(56,214,224,.3), inset 0 1px 0 rgba(255,255,255,.55); }
  .wk-game .cell.pop{ animation:wkPop .32s ease; }
  .wk-game .cell.hint{ color:#3a2c00; background:linear-gradient(180deg,#f7d35a,#ecbe34); border-color:#ffe488;
    box-shadow:0 0 14px rgba(242,197,61,.6), inset 0 1px 0 rgba(255,255,255,.55); }
  @keyframes wkPop{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

  /* ---- gevormd woord ---- */
  .wk-game .formed{ min-height:6vh; display:flex; align-items:center; justify-content:center; margin:.3vh 0; }
  .wk-game .pill{ min-width:90px; min-height:6vh; padding:.8vh 3vh; border-radius:999px;
    background:linear-gradient(180deg,#23284e,#1a1e3c); border:2px solid var(--line);
    font-size:3.4vh; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; color:var(--text);
    box-shadow:0 6px 16px rgba(0,0,0,.28); transition:border-color .12s, color .12s; }
  .wk-game .pill.empty{ background:transparent; border-color:transparent; color:transparent; box-shadow:none; min-width:0; }
  .wk-game .pill.good{ border-color:var(--good); color:var(--good); }
  .wk-game .pill.bonus{ border-color:var(--gold); color:var(--gold); }
  .wk-game .pill.bad{ border-color:var(--red); color:var(--red); animation:wkShake .3s; }
  @keyframes wkShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
  .wk-game .toast{ position:absolute; left:50%; transform:translateX(-50%); margin-top:-2px;
    font-family:var(--mono); font-size:14px; font-weight:700; color:var(--gold);
    opacity:0; pointer-events:none; }
  .wk-game .toast.show{ animation:wkRise 1.1s ease; }
  @keyframes wkRise{ 0%{opacity:0; transform:translate(-50%,6px)} 20%{opacity:1} 100%{opacity:0; transform:translate(-50%,-22px)} }

  /* ---- letterwiel ---- */
  .wk-game .wheelwrap{ width:var(--wheel); height:var(--wheel); display:flex; align-items:center; justify-content:center; }
  /* Het wiel houdt z'n interne 300-coördinatenstelsel (px-eiland), maar wordt door fitWheel() met
     transform:scale() in het vh-vak gepast → schaalt mee met de viewport, net als het bord (fitGrid). */
  .wk-game .wheel{ position:relative; width:300px; height:300px; touch-action:none; transform-origin:center center; }
  .wk-game .wheel::before{ content:''; position:absolute; left:50%; top:50%; width:250px; height:250px; margin:-125px 0 0 -125px;
    border-radius:50%; background:radial-gradient(circle at 50% 38%, rgba(56,214,224,.09), rgba(20,22,43,0) 68%);
    border:1px dashed rgba(150,154,205,.22); }
  .wk-game .wheel svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .wk-game .wheel svg polyline{ filter:drop-shadow(0 0 6px rgba(56,214,224,.7)); }
  .wk-game .wheel .tile{ position:absolute; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%;
    background:linear-gradient(180deg,#3b4282,#272c59); border:1px solid #4a5099; color:#eef0ff;
    display:flex; align-items:center; justify-content:center;
    font-size:37px; font-weight:700; text-transform:uppercase; cursor:pointer;
    box-shadow:0 5px 12px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.28);
    transition:transform .09s ease, box-shadow .12s ease, background .12s ease; }
  .wk-game .wheel .tile.sel{ background:linear-gradient(180deg,#63e7f1,#2cc7d3); color:#06303a; border-color:#9af3f8; transform:scale(1.12);
    box-shadow:0 0 0 5px rgba(56,214,224,.22), 0 8px 18px rgba(56,214,224,.45), inset 0 2px 0 rgba(255,255,255,.5); }

  /* ---- win = backdrop over HEEL het scherm + een gecentreerde MODAL-box (meer contrast).
     Op het win-scherm mag enkel 'Volgende'/'Naar het menu' klikbaar zijn: de fixed backdrop ligt over
     álles (ook de zwevende kop). wordscape is een vh-game (.wrap heeft transform:none) → position:fixed
     dekt de echte viewport. De .overlay.show-toggle uit core.css blijft werken. ---- */
  .wk-game .overlay.ws-winoverlay{ position:fixed; inset:0; border-radius:0; background:rgba(8,9,20,.86); z-index:60; padding:3vh; }
  .wk-game .ws-winmodal{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8vh;
    width:auto; max-width:min(92vw,560px); padding:4.6vh 5vh; text-align:center;
    background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:2.4vh;
    box-shadow:0 2.4vh 7vh rgba(0,0,0,.6); animation:wkWinIn .25s ease; }
  @keyframes wkWinIn{ from{ opacity:0; transform:translateY(2vh) scale(.96); } to{ opacity:1; transform:none; } }

  /* win-inhoud, groot/leesbaar in vh */
  .wk-game .ws-winmodal h3{ font-size:3.8vh; margin:0; }
  .wk-game .ws-winmodal .ov-actions{ width:34vh; gap:1.6vh; margin-top:.6vh; }
  .wk-game .ws-winmodal .ov-actions .btn{ font-size:2.4vh; padding:1.8vh 2vh; }
  .wk-game .ws-bigemoji{ font-size:7vh; line-height:1; }
  .wk-game .ws-winstat{ font-family:var(--mono); color:var(--muted); font-size:2.7vh; max-width:none; margin:0; }
  .wk-game .ws-winstat b{ color:var(--gold); }
  .wk-game .ws-winearn{ font-family:var(--mono); color:var(--gold); font-size:2.5vh; max-width:none; margin:0; min-height:0; }

  /* ---- logboek-inhoud (rendert in de gedeelde modal, dus ongescoped) ---- */
  .logitem{ padding:12px 2px; border-bottom:1px solid var(--line); }
  .logitem:last-child{ border-bottom:0; }
  .logh{ font-weight:700; font-size:17px; margin-bottom:7px; }
  .logd{ font-family:var(--mono); font-size:12px; color:var(--muted); font-weight:400; margin-left:8px; }
  .llet{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-bottom:7px; }
  .llet b{ color:var(--accent); letter-spacing:.06em; }
  .lwords, .lbon{ display:flex; flex-wrap:wrap; gap:6px; }
  .lbon{ margin-top:7px; }
  .lbl{ font-family:var(--mono); font-size:11px; color:var(--muted); width:100%; }
  .lw{ font-family:var(--mono); font-size:13px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:7px; padding:3px 9px; text-transform:uppercase; }
  .lw.b{ color:var(--gold); border-color:rgba(242,197,61,.4); }

  /* ---- vuurwerk-deeltjes (op een body-laag, dus ongescoped) ---- */
  .ws-spark{ position:absolute; width:9px; height:9px; border-radius:2px; }

  @media (prefers-reduced-motion: reduce){
    .wk-game .cell.pop, .wk-game .pill.bad, .wk-game .toast.show{ animation:none; }
  }