/* ============================================================
   patience.css — PATIENCE (Klondike) specifieke styling.
   Leunt op de gedeelde kern uit base.css (.pcard, .btn, .overlay,
   .lvlpick, modal, zoom).

   Indeling = BOVENRIJ + KOLOMMEN (klassieke klondike):
   - Boven (`.patience-topbar`): links de afleg+trekstapel (`.pat-stockwaste`),
     rechts de vier basisstapels (`.pat-foundations`), uit elkaar door `.pat-topgap`.
   - Daaronder de 7 speelkolommen (`.patience-tableau`), fant omlaag.
   Het kader (`.patience-frame`) heeft een VASTE hoogte + overflow:hidden, dus het
   verandert nooit van grootte door een groeiende kolom. render() comprimeert de
   waaier (en als laatste redmiddel de kaartmaat via --tcw/--tch) zodat de hoogste
   kolom altijd binnen het tableau past — nooit afsnijden, nooit scrollen, leesbaar.
   Basis-kaarten 80×112. Animaties: leggen/trekken/delen + win-vuurwerk.
   ============================================================ */

:root{ --pcw:12.2vh; --pch:17vh; }   /* Patience-kaartmaat in vh → ALLE kaarten (hand/stapel/tableau) blijven even groot bij in-/uitzoomen; JS leidt CARD_W/CARD_H uit dezelfde innerHeight-verhouding af voor de compressie */

/* Soepele groei/krimp van de tableau-waaier: de maat- en fan-variabelen zijn als
   @property geregistreerd (typed <length>), zodat een wijziging (kolom wordt korter →
   kaarten groter, of fan dichter/wijder) VLOEIEND interpoleert i.p.v. te "flitsen".
   De kaarten lezen ze via var()/calc() en erven zo de frame-per-frame geïnterpoleerde
   waarde — ook al wordt de kaart-DOM elke render opnieuw opgebouwd (interpolatie zit op de
   ouder, niet de kaart). PER KOLOM: maat + hoek-fonts staan GLOBAAL op #pTableau, maar de
   fan-gaps (--upgap/--downgap) staan PER KOLOM op .pcol (die tussen renders blijft bestaan),
   zodat enkel een kolom die te lang wordt z'n fan dichtknijpt — de rest blijft normaal. */
@property --tcw{ syntax:'<length>'; inherits:true; initial-value:80px; }
@property --tch{ syntax:'<length>'; inherits:true; initial-value:112px; }
@property --upgap{ syntax:'<length>'; inherits:true; initial-value:36px; }
@property --downgap{ syntax:'<length>'; inherits:true; initial-value:22px; }
@property --pr{ syntax:'<length>'; inherits:true; initial-value:28px; }
@property --psu{ syntax:'<length>'; inherits:true; initial-value:25px; }
@property --ps2{ syntax:'<length>'; inherits:true; initial-value:25px; }
@property --pmid{ syntax:'<length>'; inherits:true; initial-value:46px; }
@property --ptop{ syntax:'<length>'; inherits:true; initial-value:7px; }
@property --pleft{ syntax:'<length>'; inherits:true; initial-value:10px; }
/* Maat + hoek-fonts zijn GLOBAAL (op #pTableau); de fan-gaps (--upgap/--downgap) zijn PER KOLOM
   (op .pcol, die tussen renders blijft bestaan) → enkel een kolom die te lang wordt knijpt z'n fan dicht. */
#pTableau{ transition:--tcw .3s ease, --tch .3s ease,
  --pr .3s ease, --psu .3s ease, --ps2 .3s ease, --pmid .3s ease, --ptop .3s ease, --pleft .3s ease; }
.pcol{ transition:--upgap .3s ease, --downgap .3s ease; }
#pTableau.nofit, #pTableau.nofit .pcol{ transition:none; }   /* snap bij openen/nieuw spel/resize (render() zet '.nofit' tijdelijk) */

/* Hub-tegel: vier suit-kleurtjes (2 rood, 2 ander) als knipoog naar speelkaarten */
.tile.patience .glyph i:nth-child(1){ background:var(--red); }
.tile.patience .glyph i:nth-child(2){ background:var(--O); }
.tile.patience .glyph i:nth-child(3){ background:var(--accent); }
.tile.patience .glyph i:nth-child(4){ background:var(--red); }

/* Kop ZWEEFT in de hoeken (zoals Hartenjagen/Tetris) → de status-info staat gecentreerd op die kop-lijn
   en het kader krijgt de volle hoogte (geen aparte kop-rij meer). ‹ Hub + titel links, Nieuw spel rechts. */
#patience{ position:relative; }
#patience .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 */
#patience .game-head .back, #patience .game-head .btn{ pointer-events:auto; }
#patience .game-head .back{ font-size:2.7vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }
#patience .game-head h2{ font-size:3.4vh; }
#patience .game-head .newgame{ font-size:2.5vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }
/* Status-info gecentreerd op de kop-lijn (smal → klaart de hoekknoppen), wat groter/leesbaarder */
.patience-top{ display:flex; gap:2.8vh; align-items:center; justify-content:center; min-height:7vh; margin:0 0 1vh; flex-wrap:wrap; }
#patience .patience-top .stat{ font-size:2.5vh; }
#patience .patience-top .stat b{ font-size:2.8vh; }

/* VAST kader (overflow:hidden), de volle hoogte. Breed genoeg voor de 3-koloms arena:
   linkerrail (undo) + 7 kolommen + rechterrail (basisstapels + hand). */
.patience-frame{ position:relative; background:#171a34; border:1px solid var(--line); border-radius:16px; padding:1.2vh;
  width:min(98vw, calc(var(--pcw)*13)); height:clamp(280px, calc(85.5vh - 28px), 1200px); margin:4.5vh auto 0; box-sizing:border-box; overflow:hidden; }
  /* margin-top → lucht onder de zwevende kop-knoppen (botst niet meer, ~26px tussenruimte); de hoogte is navenant korter zodat de onderkant gelijk blijft en er geen scroll komt */
  /* hoogte = ~volle viewport minus de kop-status-rij (≈8vh), de compacte berichtregel (≈2.3vh) en body-padding (28px) → vult de hoogte, geen scroll */
  #patience #pMsg{ min-height:1.8vh; margin-top:.5vh; }   /* compacte berichtregel → bord mag hoger */

/* 3-koloms arena (zoals Spider): undo links · 7 kolommen midden (volle hoogte) · basisstapels + hand rechts.
   Kop/hand/undo nemen géén verticale rij meer in → de kolommen kunnen tot beneden fanenen. */
.patience-arena{ display:flex; align-items:stretch; gap:1.6vh; height:100%; }
.pat-rail{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.pat-rail-left{ width:15vh; justify-content:flex-end; }    /* Ongedaan maken onderaan; pure vh → schaalt mee bij in-/uitzoomen (geen px-vloer die de kolommen wegduwt) */
.pat-rail-right{ width:calc(var(--pcw)*2.7 + 1.6vh); justify-content:space-between; padding:.3vh 0; }
.pat-foundations{ display:grid; grid-template-columns:repeat(2, var(--pcw)); gap:1vh; justify-content:center; }   /* 4 basisstapels in 2×2 (boven) */
.pat-hand{ display:flex; gap:1.2vh; align-items:flex-end; justify-content:center; width:100%; }                  /* aflegstapel + trekstapel onderaan rechts */

/* Linkerrail — Ongedaan maken (icoon ↺ boven, tekst eronder; zoals Spider) */
#patience .pat-undo{ display:flex; flex-direction:column; align-items:center; gap:.4vh; width:100%;
  font-size:1.85vh; line-height:1.15; padding:1.6vh .6vh; border-radius:1.4vh; }
#patience .pat-undo .pat-undo-ico{ font-size:4.4vh; line-height:1; }

/* Lege slot-stijl (gedeeld door trekstapel, basisstapels en lege kolommen) */
.pat-slot{ width:var(--pcw); height:var(--pch); border:2px dashed var(--line); border-radius:11px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; }

/* Aflegstapel (links van de trekstapel, onderaan de zijkolom) — breed genoeg voor de fan bij '3 kaarten trekken' */
.pat-waste{ position:relative; width:calc(var(--pcw) * 1.55); height:var(--pch); flex:0 0 auto; }
.pat-waste .pcard{ position:absolute; top:0; width:var(--pcw); height:var(--pch); }

/* Trekstapel (rugzijde) — rechtsonder in de zijkolom */
.pat-stock{ position:relative; width:var(--pcw); height:var(--pch); cursor:pointer; flex:0 0 auto; }
.pat-stock .pcard.down{ position:absolute; left:0; top:0; width:var(--pcw); height:var(--pch); }
.pat-stock .pat-recycle{ font-size:4.7vh; color:var(--muted); line-height:1; }
.pat-stock:hover .pat-slot{ border-color:var(--accent); }
.pat-stock:hover .pcard.down{ filter:brightness(1.12); }
.pat-count{ position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); z-index:5;
  font-family:var(--mono); font-size:1.7vh; font-weight:700; color:#fff; background:rgba(0,0,0,.55); border-radius:9px; padding:1px 7px; line-height:1.5; }

/* Basisstapels (aas→heer per kleur) */
.pat-found{ position:relative; width:var(--pcw); height:var(--pch); cursor:pointer; flex:0 0 auto; }
.pat-found .pcard{ position:absolute; left:0; top:0; width:var(--pcw); height:var(--pch); }
.pat-found .fsuit{ font-size:5.6vh; line-height:1; }
.pat-found .fsuit.red{ color:var(--red); opacity:.45; }
.pat-found .fsuit.black{ color:#c9cce8; opacity:.32; }

/* Speelkolommen (onder de bovenrij). Vaste tableau-hoogte (flex:1) → render() comprimeert.
   --tcw/--tch = (eventueel verkleinde) tableau-kaartmaat; standaard = de volle kaartmaat. */
.patience-tableau{ display:flex; gap:.8vh; align-items:flex-start; justify-content:center; flex:1 1 auto; min-width:0; height:100%; overflow:hidden; }
.pcol{ position:relative; width:var(--tcw,var(--pcw)); flex:0 0 auto; }
.pcol .slot{ width:var(--tcw,var(--pcw)); height:var(--tch,var(--pch)); }
.pcol .pcard{ position:absolute; left:0; width:var(--tcw,var(--pcw)); height:var(--tch,var(--pch)); }
.pcol .pcard.up{ cursor:grab; touch-action:none; }
.pcol .pcard.sel{ box-shadow:0 0 0 3px var(--accent),0 5px 10px rgba(0,0,0,.45); }
/* Tijdens slepen: verberg de opgepakte kaart(en) volledig, zodat het lijkt alsof je de
   échte kaart vastpakt (de meebewegende kopie = je hand), niet een doorzichtige dubbel. */
.pcol .pcard.drag-src,.pat-waste .pcard.drag-src{ opacity:0; }

/* Grote, duidelijke kaartwaarden — basis in vh (schaalt mee bij in-/uitzoomen). De tableau-kaarten
   (.pcol) overschrijven hieronder met de render-vars (--pr/--psu/…) zodat ze bij compressie krimpen. */
.pcol .pcard .r,.pat-waste .pcard .r,.pat-found .pcard .r,.pat-ghost .pcard .r,.pat-wincard .r{ top:1vh; left:1.3vh; font-size:3.5vh; }
.pcol .pcard .s2,.pat-waste .pcard .s2,.pat-found .pcard .s2,.pat-ghost .pcard .s2,.pat-wincard .s2{ bottom:1vh; right:1.3vh; font-size:3.5vh; }
.pcol .pcard .su,.pat-waste .pcard .su,.pat-found .pcard .su,.pat-ghost .pcard .su,.pat-wincard .su{ display:block; top:1vh; right:1.3vh; font-size:3.1vh; }
.pcol .pcard .su2,.pat-waste .pcard .su2,.pat-found .pcard .su2,.pat-ghost .pcard .su2,.pat-wincard .su2{ display:block; bottom:1vh; left:1.3vh; font-size:3.1vh; }
.pcol .pcard .mid,.pat-waste .pcard .mid,.pat-found .pcard .mid,.pat-wincard .mid{ font-size:6.4vh; }

/* Tableau-kaarten: hoek-fonts SYMMETRISCH (rang top = rang onder via --pr, kleur top = kleur onder via --psu)
   en schalen enkel mee met de KAARTMAAT (cardScale), NIET met de waaiercompressie → de kaarten ogen
   normaal (geen kleine-top/grote-onder meer). */
.pcol .pcard .r{ top:var(--ptop,1vh); left:var(--pleft,1.3vh); font-size:var(--pr,3.5vh); }
.pcol .pcard .s2{ bottom:var(--ptop,1vh); right:var(--pleft,1.3vh); font-size:var(--pr,3.5vh); }
.pcol .pcard .su{ top:var(--ptop,1vh); right:var(--pleft,1.3vh); font-size:var(--psu,3.1vh); }
.pcol .pcard .su2{ bottom:var(--ptop,1vh); left:var(--pleft,1.3vh); font-size:var(--psu,3.1vh); }
.pcol .pcard .mid{ font-size:var(--pmid,6.4vh); }

/* Drop-doelen oplichten tijdens slepen (groen = past, rood = past niet).
   INSET-ring (BINNEN de kaart/kolom getekend) zodat hij nooit wegvalt aan de rand van
   het kader: het vaste .patience-frame én .patience-tableau hebben overflow:hidden, dus
   een buitenring zou langs de zij- en bovenkant afgesneden worden. */
.pcol.drop-ok::before,.pat-found.drop-ok::before,
.pcol.drop-bad::before,.pat-found.drop-bad::before{ content:""; position:absolute; inset:0; border-radius:11px; pointer-events:none; z-index:6; }
.pcol.drop-ok::before,.pat-found.drop-ok::before{ box-shadow:inset 0 0 0 3px var(--good), inset 0 0 16px -3px var(--good); }
.pcol.drop-bad::before,.pat-found.drop-bad::before{ box-shadow:inset 0 0 0 3px var(--red), inset 0 0 16px -3px var(--red); }

/* Sleep-spook (eigen klasse — niet gekoppeld aan Spider's inline CSS) */
.pat-ghost{ position:fixed; left:0; top:0; z-index:80; pointer-events:none; will-change:transform; transform-origin:0 0; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.pat-ghost .pcard{ position:absolute; left:0; width:var(--pcw); height:var(--pch); }

/* Deal-animatie: kaarten vallen kort van bovenaf hun plek in (gestaggerd per kolom) */
@keyframes patDeal{ from{ transform:translateY(-26px); opacity:0; } to{ transform:none; opacity:1; } }

/* Win-animatie: stuiterende kaarten over het scherm (klassiek). Eigen vaste maat (= JS CARD_W/CARD_H). */
.pat-wincard{ width:12.2vh; height:17vh; }   /* fallback; winBounce zet de px-maat inline (= JS pcDims) */

/* Variantkeuze netjes gecentreerd, net als Spider */
#overlayP h3{ font-size:3.2vh; } #overlayP p{ font-size:2vh; max-width:none; }
#patience .lvlpick .btn.full{ font-size:2.2vh; padding:1.8vh 2vh; }

@media (prefers-reduced-motion: reduce){ .pcol .pcard{ animation:none !important; } #pTableau, .pcol{ transition:none !important; } }