/* ============================================================
   mahjong.css — MAHJONG-specifieke styling. Leunt op core.css
   (de bord-keuze #mjpick overschrijft de gedeelde .lvlpick naar een raster).
   ============================================================ */

  /* vh-layout (transform-zoom omzeild via .wrap.vh-game; enter()/leave() zetten die class).
     Kop ZWEEFT in de hoeken (gecentreerd bord): ‹ Hub + titel links, Nieuw spel rechts → het bord krijgt de hoogte.
     De sectie is een flex-KOLOM met vaste hoogte (viewport − body-padding): HUD bovenaan, daaronder het
     speelveld dat de resterende hoogte VULT (flex:1) → grootst mogelijke stenen, nooit scrollen. */
  #mahjong.view.active{ display:flex; flex-direction:column; height:calc(100vh - 28px); margin:0; }
  #mahjong{ position:relative; }
  #mahjong .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 uitslag-/keuzescherm bereikbaar blijft */
  #mahjong .game-head .back, #mahjong .game-head .btn{ pointer-events:auto; }
  #mahjong .game-head .back{ font-size:2.7vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }
  #mahjong .game-head h2{ font-size:3.4vh; }
  #mahjong .game-head .newgame{ font-size:2.5vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }

  /* HUD: gecentreerd op de kop-lijn (klaart de zwevende hoekknoppen, zoals Sudoku), groot/leesbaar in vh.
     min-height ≈ de hoogte van de zwevende hoekknoppen zodat het speelveld eronder begint (niet erachter). */
  .mj-top{ flex:0 0 auto; display:flex; gap:2.2vh; align-items:center; justify-content:center; margin:0; min-height:7.4vh; flex-wrap:wrap;
    font-family:var(--mono); font-size:2.4vh; color:var(--muted); }
  .mj-top .stat{ white-space:nowrap; font-size:2.4vh; }   /* eigen font-size wint van de globale (ongescopete) .stat uit spider.css */
  .mj-top .stat b{ color:var(--accent); font-size:2.8vh; }

  /* Speel-rij: vult de resterende hoogte. Het felt-kader staat in het MIDDEN, met de actieknoppen in een
     verticale zij-kolom rechts; een even brede lege spacer links houdt het bord op het scherm gecentreerd. */
  .mj-stage{ flex:1 1 auto; min-height:0; display:flex; align-items:stretch; justify-content:center; gap:2vh; margin-top:1.4vh; }
  .mj-stage::before{ content:''; flex:0 0 23vh; }   /* lege balans links = breedte van .mj-side rechts → bord blijft gecentreerd */

  /* Vol-hoogte felt-kader (vaste maat per scherm; verandert NOOIT van grootte door een ander bord).
     render() schaalt het bord (transform, cap 1.0 = natuurlijke steenmaat) zodat élk bord binnen dit kader past. */
  .mj-frame{ position:relative; flex:1 1 auto; min-width:0; display:flex; justify-content:center; align-items:center; overflow:hidden;
    background:radial-gradient(120% 100% at 50% 18%, #1d5b4f, #143f39 60%, #102a2c); border:1px solid #1e6b5a; border-radius:2vh; padding:2.2vh; }

  /* Verticale actie-kolom rechts naast het bord (volle hoogte → bord gebruikt de hele hoogte). */
  .mj-side{ flex:0 0 23vh; display:flex; flex-direction:column; justify-content:center; gap:1.6vh; }
  #mahjong .mj-side .btn{ width:100%; font-size:2vh; padding:1.7vh 1.4vh; border-radius:1.4vh; white-space:normal; line-height:1.15; }
  .mj-board{ position:relative; z-index:0; transform-origin:center center; }   /* gecentreerd via flex (align/justify center); eigen stacking-context zodat steen-z-index niet over overlay/vuurwerk lekt */
  .mtile{ position:absolute; width:44px; height:58px; border-radius:7px; background:linear-gradient(160deg,#fffef9,#ece4cf); border:1px solid rgba(120,100,60,.45); --z:0;
    /* Reliëf per verdieping (--z) — aan BEIDE kanten duidelijk:
       1) drop-schaduw rechtsonder (VOORKANT) → hogere stenen zweven boven de lagere;
       2) donkere randlijn linksboven (ACHTERKANT), groeit mee met de hoogte → anders smelt de bovenrand van een hogere steen samen met de verlichte bovenkant van de steen eronder, waardoor je daar de verdiepingen niet ziet. */
    box-shadow:
      calc(2px + var(--z)*2px) calc(3px + var(--z)*3px) calc(3px + var(--z)*4px) rgba(0,0,0,.46),
      calc(-1px - min(var(--z),3)*1px) calc(-1px - min(var(--z),3)*1px) 0 rgba(58,40,16,.55),
      inset 2px 2px 0 rgba(255,255,255,.8),
      inset -1px -2px 0 rgba(140,120,80,.3);
    display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:transform .08s ease, filter .12s ease; }
  .mtile .mface{ font-size:23px; font-weight:700; line-height:1; text-align:center; }
  .mtile .mface small{ font-size:13px; display:block; margin-top:2px; font-weight:700; }
  .mtile.free:hover{ transform:translateY(-2px); }
  .mtile.blocked{ filter:brightness(.66) saturate(.72); cursor:default; }
  .mtile.sel{ box-shadow:0 0 20px 6px rgba(56,214,224,.9), 2px 3px 0 rgba(0,0,0,.30); transform:translateY(-2px); z-index:99999 !important; animation:mjSel 1.1s ease-in-out infinite; }
  @keyframes mjSel{ 0%,100%{ box-shadow:0 0 16px 4px rgba(56,214,224,.7), 2px 3px 0 rgba(0,0,0,.30);} 50%{ box-shadow:0 0 28px 9px rgba(56,214,224,1), 2px 3px 0 rgba(0,0,0,.30);} }
  .mtile.hint{ animation:mjHint .7s ease-in-out infinite; z-index:99999 !important; }
  @keyframes mjHint{ 0%,100%{ box-shadow:0 0 0 3px #ffd54a, 0 0 14px 4px rgba(255,200,40,.85), 2px 3px 0 rgba(0,0,0,.30); transform:translateY(0) scale(1);}
    50%{ box-shadow:0 0 0 6px #ffb300, 0 0 28px 11px rgba(255,180,0,.95), 2px 3px 0 rgba(0,0,0,.30); transform:translateY(-4px) scale(1.07);} }
  .mtile.poof{ animation:mjPoof .34s ease forwards; pointer-events:none; z-index:99999 !important; }
  @keyframes mjPoof{ 0%{ transform:scale(1); opacity:1;} 45%{ transform:scale(1.28) rotate(4deg); opacity:1; filter:brightness(1.7);} 100%{ transform:scale(.15) rotate(-6deg); opacity:0;} }
  /* Vuurwerk bij winst */
  .mj-fw{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:30; border-radius:16px; }
  .mj-spark{ position:absolute; width:9px; height:9px; border-radius:50%; opacity:0; will-change:transform,opacity; animation:mjSpark 1.05s ease-out forwards; box-shadow:0 0 8px 2px currentColor; }
  @keyframes mjSpark{ 0%{ transform:translate(0,0) scale(.3); opacity:1;} 70%{ opacity:1;} 100%{ transform:translate(var(--dx),var(--dy)) scale(1); opacity:0;} }
  .mtile.c-dots .mface{ color:#1f6feb; } .mtile.c-bam .mface{ color:#2e9e4f; } .mtile.c-char .mface{ color:#c8324a; }
  .mtile.c-honor .mface{ color:#2a3550; } .mtile.c-dragR .mface{ color:#c8324a; } .mtile.c-dragG .mface{ color:#2e9e4f; } .mtile.c-dragW .mface{ color:#3a6ea5; }
  .mtile.c-bonus .mface{ font-size:27px; }
  /* Statusregel onderaan de zij-kolom (combo/score-feedback) */
  #mjMsg{ text-align:center; min-height:5vh; margin-top:.6vh; font-family:var(--mono); font-size:2.3vh; line-height:1.2; color:var(--accent); }
  /* overlay (bord-keuze / winst): groot & leesbaar in vh */
  #mahjong .overlay h3{ font-size:3.6vh; }
  #mahjong .overlay p{ font-size:2vh; max-width:none; }
  #mahjong .overlay .ov-actions{ width:32vh; gap:1.4vh; }
  #mahjong .overlay .ov-actions .btn{ font-size:2.2vh; padding:1.8vh 2vh; }
  /* Gedeeld mini-voorbeeld van een bordvorm (bord-kiezer ÉN scores-raster): zelfde 3D-stapeling, klein geschaald. */
  .mj-prev{ position:relative; isolation:isolate; width:100%; height:86px; display:flex; align-items:center; justify-content:center;
    border-radius:9px; overflow:hidden; border:1px solid #1e6b5a;
    background:radial-gradient(120% 100% at 50% 18%, #1d5b4f, #143f39 60%, #102a2c); }
  .mj-prev-canvas{ display:block; }   /* voorbeeld wordt op één canvas getekend (licht; vloeiend scrollen) */
  .mj-label{ font-size:16px; font-weight:700; white-space:nowrap; line-height:1.1; }
  .mj-sub{ font-size:12px; color:var(--muted); white-space:nowrap; line-height:1; }

  /* Mahjong bord-kiezer: tegels met een mini-voorbeeld. 4 koloms zodat de 30 borden compact passen (overlay scrollt). */
  #mjpick{ grid-template-columns:repeat(4,1fr); gap:12px; width:min(780px,98%); }
  #mjpick .mj-opt{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 9px 11px;
    background:var(--panel); border:1px solid var(--line); border-radius:13px; cursor:pointer; color:var(--text);
    font-family:var(--mono); transition:border-color .15s, box-shadow .15s, transform .05s; }
  #mjpick .mj-opt:hover{ border-color:var(--accent); }
  #mjpick .mj-opt:active{ transform:translateY(1px); }
  #mjpick .mj-opt:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  #mjpick .mj-opt.rec{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(56,214,224,.35); }
  #mjpick .mj-prev{ height:66px; }
  #mjpick .mj-label{ font-size:15px; }
  #mjpick .mj-sub{ font-size:13px; }

  /* Scores-modal: raster van borden (zoals de kiezer) → klik een bord voor de ranglijst. */
  .mj-scoregrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .mj-scoreopt{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 9px 11px;
    background:var(--panel); border:1px solid var(--line); border-radius:13px; cursor:pointer; color:var(--text);
    font-family:var(--mono); transition:border-color .15s, box-shadow .15s, transform .05s; }
  .mj-scoreopt:hover{ border-color:var(--accent); }
  .mj-scoreopt:active{ transform:translateY(1px); }
  .mj-scoreopt:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .mj-scoreopt.empty{ opacity:.6; }
  .mj-scoreopt .mj-prev{ height:70px; }
  .mj-scoreopt .mj-label{ font-size:16px; }
  .mj-score-best{ font-size:15px; font-weight:700; color:#ffd27d; line-height:1.15; }
  .mj-score-best span{ color:var(--muted); font-weight:400; }
  .mj-scoreopt.empty .mj-score-best{ color:var(--muted); font-weight:400; }
  .mj-score-back{ display:inline-flex; align-items:center; gap:4px; margin:0 0 16px; cursor:pointer;
    background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; color:var(--text);
    font-family:var(--mono); font-size:14px; font-weight:700; padding:7px 15px; }
  .mj-score-back:hover{ border-color:var(--accent); color:var(--accent); }
  .mj-score-head{ display:flex; flex-direction:column; align-items:center; gap:9px; margin:0 0 16px; }
  .mj-score-head .mj-prev{ height:58px; width:auto; min-width:130px; padding:0 8px; }
  .mj-score-title{ margin:0; font-size:20px; }
  /* WINST-scherm = de gedeelde .ov-card (modal-kaart). De BORD-KEUZE blijft full-bleed: het
     30-borden-raster is te breed voor een kaart, dus bij .mj-choosing krijgt de kaart géén
     chrome (transparant, geen rand/schaduw) en mag ze breed/hoog worden + bovenaan uitlijnen. */
  #overlayM.mj-choosing .ov-card{ background:none; border:none; box-shadow:none; animation:none;
    max-width:96vw; max-height:96vh; padding:18px 12px; gap:12px; justify-content:flex-start; }
  #overlayM .ov-card p{ max-width:none; }

  @media (prefers-reduced-motion: reduce){
    .mtile.hint, .mtile.poof, .mtile.sel, .mj-spark{ animation:none !important; }
  }