/* ============================================================
   core.css — GEDEELDE / GENERIEKE styling voor de Game Hub.
   Geladen door mama.html vóór elke per-spel-CSS (games/<naam>/<naam>.css).
   Bevat: kleurvariabelen (:root), knoppen, hub-tegels, views,
   game-head, gedeelde .overlay + overlay-kiezer (.lvlpick), speelkaarten
   (.pcard), geluidsknop, modals, zoomknop en de topscores-tabellen.
   Per-spel styling staat in een eigen bestand: games/<naam>/<naam>.css.
   ============================================================ */

  :root{
    --bg:#14162B; --panel:#1E2140; --panel-2:#262A52; --line:#34386A;
    --text:#ECECF4; --muted:#9396BC; --accent:#38D6E0; --good:#4FD16B;
    --I:#38D6E0; --O:#F2C53D; --T:#B06CF0; --S:#4FD16B; --Z:#F0556B; --J:#5B8DEF; --L:#F09137;
    --red:#D8324A;
    /* Eén goed leesbaar lettertype voor alles. Atkinson Hyperlegible is ontworpen voor
       slechtziende/oudere lezers (onderscheidt o.a. I/l/1 en O/0, grote x-hoogte).
       --mono blijft als alias bestaan zodat de bestaande verwijzingen niet hoeven te wijzigen. */
    --display:"Atkinson Hyperlegible", system-ui, sans-serif; --mono:"Atkinson Hyperlegible", ui-monospace, monospace;
  }
  *{ box-sizing:border-box; }
  /* Nergens tekst selecteren: dubbelklik/sleep mag geen "select all" geven (stoort + niet nodig in een spel-hub). */
  *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  html,body{ height:100%; }
  body{ margin:0; height:100vh; overflow:hidden; font-size:17px;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(56,214,224,0.10), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(176,108,240,0.10), transparent 60%), var(--bg);
    color:var(--text); font-family:var(--display); -webkit-font-smoothing:antialiased;
    display:flex; justify-content:safe center; align-items:flex-start; padding:14px 12px; }
  .wrap{ width:100%; max-width:100%; }   /* géén transform-zoom meer: hub + vh-spellen vullen zélf het scherm */

  /* ---- Hub vult HEEL het scherm (geen zoom): topbar bovenaan, tegel-raster vult de rest ---- */
  #hub.view.active{ display:flex; flex-direction:column; height:calc(100vh - 28px); }   /* 28px = body-padding boven+onder */
  #hub .topbar{ flex:0 0 auto; }
  #hubGrid{ flex:1 1 auto; min-height:0; grid-auto-rows:1fr; }   /* rijen even hoog → de tegels vullen de volle hoogte */

  .topbar{ display:flex; align-items:center; justify-content:space-between; gap:2vh; margin-bottom:2.6vh; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:1.8vh; }
  .brand .logo{ display:grid; grid-template-columns:repeat(3,1.6vh); grid-template-rows:repeat(3,1.6vh); gap:0.4vh; }
  .brand .logo i{ border-radius:2px; }
  .brand .logo i:nth-child(1),.brand .logo i:nth-child(2),.brand .logo i:nth-child(5){ background:var(--T); }
  .brand .logo i:nth-child(6),.brand .logo i:nth-child(8),.brand .logo i:nth-child(9){ background:var(--I); }
  .brand h1{ font-size:4vh; font-weight:700; letter-spacing:0.03em; margin:0; }
  .brand span{ color:var(--muted); font-family:var(--mono); font-size:1.7vh; display:block; }

  .btn{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--text); background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:11px 18px; cursor:pointer; transition:border-color .15s, transform .05s; }
  .btn:hover{ border-color:var(--accent); }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .btn.alt{ background:transparent; color:var(--muted); }
  .btn.full{ width:100%; }
  .btn.accent{ background:var(--accent); color:#0c1020; border-color:var(--accent); }
  .data-controls{ display:flex; gap:1.2vh; flex-wrap:wrap; }
  /* Hub-topbar-knoppen schalen mee met de viewport (vh), net als de spellen — niet de globale .btn. */
  .topbar .btn{ font-size:2vh; padding:1.4vh 2.2vh; border-radius:1.4vh; }

  /* ---------- Hub ---------- */
  .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.4vh; }
  @media (max-width:620px){ .grid{ grid-template-columns:1fr; } }
  .tile{ position:relative; background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line); border-radius:2vh; padding:3.4vh 3.4vh 3vh; text-align:left; cursor:pointer;
    color:inherit; font-family:var(--display); overflow:hidden; transition:transform .12s ease, border-color .15s ease;
    height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }   /* vult de celhoogte; inhoud verticaal gecentreerd */
  .tile.playable:hover{ transform:translateY(-3px); border-color:var(--accent); }
  .tile.playable:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
  .tile.locked{ cursor:default; opacity:0.6; }
  .tile .glyph{ display:grid; grid-template-columns:repeat(2,2.2vh); grid-template-rows:repeat(2,2.2vh); gap:0.4vh; margin-bottom:2.4vh; }
  .tile .glyph i{ border-radius:3px; }
  .tile h2{ font-size:3.5vh; font-weight:700; margin:0 0 0.6vh; }
  .tile p{ margin:0; color:var(--muted); font-family:var(--mono); font-size:1.7vh; }
  .tile .status{ position:absolute; top:2.2vh; right:2.2vh; font-family:var(--mono); font-size:1.8vh; font-weight:700; padding:0.7vh 1.5vh; border-radius:999px; letter-spacing:0.05em; }
  .status.go{ color:var(--bg); background:var(--accent); }
  .status.soon{ color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid var(--line); }
  .tile.tetris .glyph i:nth-child(1){ background:var(--I); } .tile.tetris .glyph i:nth-child(2){ background:var(--O); }
  .tile.tetris .glyph i:nth-child(3){ background:var(--T); } .tile.tetris .glyph i:nth-child(4){ background:var(--L); }
  .tile.hearts .glyph i{ background:var(--Z); } .tile.spider .glyph i{ background:var(--J); } .tile.mahjong .glyph i{ background:var(--S); }
  .tile.wordkruis .glyph i:nth-child(1){ background:var(--accent); } .tile.wordkruis .glyph i:nth-child(2){ background:var(--T); }
  .tile.wordkruis .glyph i:nth-child(3){ background:var(--O); } .tile.wordkruis .glyph i:nth-child(4){ background:var(--good); }
  a.tile{ display:block; text-decoration:none; }
  /* Tegel + score-knop rechtsonder. De knop is een zus van de tegel (geen knop-in-knop). */
  .tile-wrap{ position:relative; display:grid; min-height:0; }
  .tile-scores{ position:absolute; right:2vh; bottom:2vh; z-index:2;
    font-family:var(--mono); font-size:1.8vh; font-weight:700; letter-spacing:.04em;
    color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--line);
    border-radius:999px; padding:1vh 1.8vh; cursor:pointer;
    transition:border-color .15s, color .15s, background .15s, transform .12s ease; }
  .tile-scores:hover{ border-color:var(--accent); color:var(--accent); background:rgba(56,214,224,.10); }
  .tile-scores:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .tile-wrap:hover .tile.playable{ transform:translateY(-3px); border-color:var(--accent); }
  .tile-wrap:hover .tile-scores{ transform:translateY(-3px); }

  /* ---------- Views ---------- */
  .view{ display:none; } .view.active{ display:block; }
  /* Game-kop: grote ‹ Hub-knop helemaal links, titel, daarna rechts een duidelijke Nieuw spel-knop.
     Bewust groot/leesbaar (mama) en geen Scores/Info/Geluid meer — die zaten te dicht op elkaar. */
  .game-head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
  .back{ font-family:var(--mono); font-size:20px; font-weight:700; color:var(--text); background:var(--panel); border:2px solid var(--line); border-radius:14px; padding:14px 26px; cursor:pointer; transition:border-color .15s, color .15s, transform .05s; }
  .back:hover{ border-color:var(--accent); color:var(--accent); }
  .back:active{ transform:translateY(1px); }
  .back:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .game-head h2{ margin:0; font-size:26px; letter-spacing:0.03em; }
  .game-head .spacer{ flex:1; }
  /* Knoppen in de kop groter; Nieuw spel = duidelijke hoofdactie (gevuld, niet 'uitgegrijsd') */
  .game-head .btn{ font-size:17px; padding:14px 24px; border-radius:14px; }
  .btn.newgame{ background:var(--accent); color:#0c1020; border-color:var(--accent); }
  .btn.newgame:hover{ border-color:var(--accent); filter:brightness(1.08); }

  /* ---- Uitslag/keuze-overlay = FULLSCREEN dimmer over HEEL het scherm met een gecentreerde
     MODAL-KAART (.ov-card) erin (zoals Woordkruis' win-scherm). Alle spellen zijn vh-games
     (.wrap heeft dan transform:none) → position:fixed dekt de echte viewport en bedekt ook de
     zwevende kop, dus op een uitslag/keuze-scherm zijn enkel de kaart-knoppen klikbaar. ---- */
  .overlay{ position:fixed; inset:0; border-radius:0; background:rgba(8,9,20,.86);
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:3vh; z-index:60; overflow:hidden; }
  .overlay.show{ display:flex; }
  .overlay h3{ margin:0; font-size:27px; letter-spacing:0.03em; }
  .overlay p{ margin:0; color:var(--muted); font-family:var(--mono); font-size:16px; max-width:240px; }
  .overlay .big{ font-family:var(--mono); font-size:36px; font-weight:700; color:var(--accent); }
  .ov-actions{ display:flex; flex-direction:column; gap:10px; width:180px; }
  /* De gecentreerde modal-kaart die de overlay-inhoud draagt (titel/score/tabel/knoppen) — geeft
     contrast t.o.v. de gedimde achtergrond, net als de gedeelde .modal. */
  .ov-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vh;
    width:auto; max-width:min(94vw,640px); max-height:92vh; overflow:auto;
    padding:4.4vh 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:ovCardIn .25s ease; }
  @keyframes ovCardIn{ from{ opacity:0; transform:translateY(2vh) scale(.96); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .ov-card{ animation:none; } }

  /* ---------- Speelkaarten (gedeeld) ---------- */
  .pcard{ border-radius:9px; background:#FBFBF7; color:#1b2030; position:relative; user-select:none;
    box-shadow:0 2px 5px rgba(0,0,0,.45); border:1px solid rgba(0,0,0,.34); font-family:var(--display); }
  .pcard.red{ color:var(--red); }
  .pcard .r{ position:absolute; top:5px; left:8px; font-weight:700; line-height:1; }
  .pcard .s2{ position:absolute; bottom:4px; right:8px; font-weight:700; line-height:1; }
  .pcard .su,.pcard .su2{ display:none; position:absolute; line-height:1; font-weight:700; }
  .pcard .su{ top:5px; right:8px; } .pcard .su2{ bottom:4px; left:8px; }
  .pcard .mid{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.7em; opacity:1; }
  /* Achterkant: lichter/contrastrijker tegen de donkere achtergrond, met een duidelijke lichte rand */
  .pcard.down{ background:repeating-linear-gradient(45deg,#5A63B0,#5A63B0 7px,#464F95 7px,#464F95 14px); border:1px solid #868ed6;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 5px rgba(0,0,0,.45); }
  .pcard.dim{ filter:brightness(.7); }

  .soundBtn{ white-space:nowrap; }

  /* Modal (spelregels) */
  .modal-bg{ position:fixed; inset:0; background:rgba(8,9,20,.74); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
  .modal-bg.show{ display:flex; }
  .modal{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:20px; max-width:560px; width:100%; padding:28px; box-shadow:0 24px 70px rgba(0,0,0,.55); animation:modalIn .22s ease;
    max-height:calc(100vh - 40px); display:flex; flex-direction:column; }   /* nooit hoger dan het scherm; body scrollt zelf (titel + OK blijven zichtbaar) */
  .modal.wide{ max-width:780px; }   /* scores-tabellen met extra kolommen (Resultaat/Rondes, Tijd) passen zo zonder horizontale schuifbalk, óók als de body een verticale scrollbalk krijgt */
  .modal.wide .modal-body{ overflow-x:hidden; }   /* nooit een horizontale schuifbalk; de tabel is altijd smaller dan de body */
  .modal h3{ margin:0 0 16px; font-size:24px; }
  .modal-body{ font-size:16px; line-height:1.65; flex:1 1 auto; min-height:0; overflow-y:auto; }
  .modal-body p{ margin:0 0 10px; } .modal-body ul{ margin:6px 0 0; padding-left:22px; } .modal-body li{ margin-bottom:9px; }
  .modal-body b{ color:var(--accent); } .modal-body .heart{ color:#ff6b7d; font-weight:700; } .modal-body .spade{ color:#e7ebf6; font-weight:700; }
  .modal-foot{ margin-top:22px; text-align:right; }
  @keyframes modalIn{ from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;} }

  /* Topscores-tabel in de modal */
  .hstbl{ border-collapse:collapse; font-family:var(--mono); font-size:15px; margin:0 auto; min-width:340px; }
  .hstbl th,.hstbl td{ padding:8px 12px; border:1px solid var(--line); text-align:center; }
  .hstbl th{ color:var(--muted); font-weight:700; background:rgba(255,255,255,.03); }
  .hstbl td.rank{ color:var(--muted); }
  .hstbl td.sc{ font-weight:700; font-size:17px; }
  .hstbl td.dt{ color:var(--muted); font-size:13px; white-space:nowrap; }
  .hstbl td.lbl{ white-space:nowrap; }            /* bv. "Gewonnen 🏆" niet afbreken naar een tweede regel */
  .hstbl tr.top td{ color:#ffd27d; background:rgba(255,210,125,.10); }
  /* Mahjong: bord-keuze (tabs) boven de ranglijst in de scores-modal */
  .hs-tabs{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:0 0 14px; }
  .hs-tab{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--muted);
    background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer;
    transition:border-color .15s, color .15s, background .15s; }
  .hs-tab:hover{ border-color:var(--accent); color:var(--text); }
  .hs-tab.active{ color:#0c1020; background:var(--accent); border-color:var(--accent); }
  .hs-tab:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .hs-stats{ text-align:center; color:var(--text); font-family:var(--mono); font-size:16px; margin:0 0 12px; line-height:1.5; }
  .hs-stats b{ color:var(--accent); font-weight:700; }
  .hs-note{ text-align:center; color:var(--muted); font-family:var(--mono); font-size:15px; margin:0 0 14px; }
  .hs-empty{ text-align:center; color:var(--muted); font-family:var(--mono); padding:10px 0; }

  /* ---------- Overlay-kiezer (gedeeld door Spider/Mahjong/Patience) ---------- */
  .lvlpick{ display:flex; flex-direction:column; gap:12px; width:min(320px,84%); }
  .lvlpick .btn.full{ padding:15px 18px; font-size:16px; text-align:center; }

  /* Kern-animaties uitzetten bij reduced-motion (per-spel animaties staan in hun eigen CSS) */
  @media (prefers-reduced-motion: reduce){
    .tile.playable:hover{ transform:none; }
    .modal{ animation:none !important; }
  }