/* ============================================================
   spider.css — SPIDER SOLITAIRE-specifieke styling. Leunt op core.css
   (incl. de gedeelde overlay-kiezer .lvlpick).

   Layout = vh-game (volle scherm, transform-zoom omzeild via .wrap.vh-game).
   De KOP ZWEEFT in de hoeken (‹ Hub + titel links, Nieuw spel rechts) en de
   status-info (Niveau/Klaar/Score) staat GECENTREERD op die kop-lijn — net als
   Patience/Hartenjagen — zodat het kader de volle hoogte krijgt.
   Binnen het kader: een 3-koloms arena = [links: Ongedaan maken] · [bord: 10
   kolommen, volle hoogte] · [rechts: voltooide reeksen boven + stapel onder].
   Zo gaan de kolommen tot beneden. De kaartmaat is RESPONSIEF (JS sDims leidt
   --scw/--sch af uit de boardbreedte: 10 kolommen vullen de breedte, begrensd
   door de hoogte) → grote kaarten die ook mama's lage resolutie vullen; de
   bestaande waaier-compressie (fscale in render()) vangt lange kolommen op.
   Transform-zoom omzeild → appScale=1 → de /appScale-correcties in de sleep-/
   deal-animaties = no-op.
   ============================================================ */

  /* Vloeiende COMPRESSIE-animatie (zoals Patience), nu PER KOLOM: als één kolom langer/korter wordt schuiven
     enkel DIE kaarten soepel dichter/verder i.p.v. te springen. De fan-gaps (--supgap/--sdngap) + corner-fonts
     (--rfs/--sfs/--cpad) zijn als @property <length> geregistreerd met een transitie op **.scol** (de kolom-
     container, die tussen renders blijft bestaan); de kaarten lezen ze via calc()/var() en erven de frame-per-
     frame geïnterpoleerde waarde — ook al wordt de kaart-DOM elke render herbouwd (de interpolatie zit op de
     OUDER .scol, niet op de kaart). Eigen namen (--supgap/--sdngap) zodat ze niet botsen met Patience'
     --upgap/--downgap (beide spellen draaien in dezelfde DOM). */
  @property --supgap{ syntax:'<length>'; inherits:true; initial-value:34px; }
  @property --sdngap{ syntax:'<length>'; inherits:true; initial-value:20px; }
  @property --rfs{ syntax:'<length>'; inherits:true; initial-value:26px; }
  @property --sfs{ syntax:'<length>'; inherits:true; initial-value:23px; }
  @property --cpad{ syntax:'<length>'; inherits:true; initial-value:6px; }
  .scol{ transition:--supgap .26s ease, --sdngap .26s ease, --rfs .26s ease, --sfs .26s ease, --cpad .26s ease; }
  .board-spider.nofan .scol{ transition:none; }   /* snap bij openen/nieuw spel/resize (render() zet '.nofan' tijdelijk) */

  /* Kop zweeft in de hoeken; status-info gecentreerd op de kop-lijn → kader krijgt de volle hoogte */
  #spider{ position:relative; }
  #spider .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 */
  #spider .game-head .back, #spider .game-head .btn{ pointer-events:auto; }
  #spider .game-head .back{ font-size:2.7vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }
  #spider .game-head h2{ font-size:3.4vh; }
  #spider .game-head .newgame{ font-size:2.5vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }

  .spider-top{ display:flex; gap:3vh; align-items:center; justify-content:center; margin:0 0 .8vh; flex-wrap:wrap; min-height:7vh; }
  #spider .spider-top .stat{ font-family:var(--mono); font-size:2.5vh; color:var(--muted); }
  #spider .spider-top .stat b{ color:var(--text); font-size:2.8vh; }

  /* VAST kader (overflow:hidden) — verandert nooit van grootte; render() comprimeert de waaier.
     margin-top schuift het bord onder de zwevende kop vandaan (lucht boven de bovenrand), en de
     hoogte laat onderaan een kleine marge zodat het kader niet tegen de onderrand plakt — het
     hangt netjes ingesprongen onder de knoppen. Hoog genoeg dat lange kolommen niet afgesneden
     worden (render() comprimeert binnen deze hoogte). */
  .spider-frame{ position:relative; width:min(98vw,1320px); height:clamp(280px, calc(80vh - 24px), 1120px); margin:5vh auto 0;
    background:#171a34; border:1px solid var(--line); border-radius:16px; padding:1.2vh; box-sizing:border-box; overflow:hidden; }

  /* 3-koloms arena: linkerrail (Ongedaan) · bord · rechterrail (voltooid boven + stapel onder) */
  .spider-arena{ display:flex; align-items:stretch; gap:1.4vh; height:100%; }
  .spider-rail{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
  .spider-rail-left{ width:max(98px,13vh); justify-content:flex-end; }
  .spider-rail-right{ width:max(86px,11vh); justify-content:space-between; padding:.4vh 0; }

  /* Bord vult de volle hoogte/breedte van de arena; 10 kolommen, gecentreerd. z-index:0 → eigen stacking-context (kaarten lekken niet over de overlay). */
  .board-spider{ position:relative; z-index:0; flex:1 1 auto; height:100%; display:flex; gap:7px;
    justify-content:center; align-items:flex-start; overflow:hidden; padding:4px 0; box-sizing:border-box; }

  .scol{ position:relative; width:var(--scw,76px); flex:0 0 auto; }
  .scol .slot{ width:var(--scw,76px); height:var(--sch,106px); border:2px dashed var(--line); border-radius:9px; cursor:pointer; }
  .scol .pcard{ position:absolute; left:0; width:var(--scw,76px); height:var(--sch,106px); }
  .scol .pcard .r{ top:var(--cpad,6px); font-size:var(--rfs,26px); } .scol .pcard .su{ top:var(--cpad,6px); } .scol .pcard .s2,.scol .pcard .su,.scol .pcard .su2{ font-size:var(--sfs,23px); }
  .scol .pcard .su,.scol .pcard .su2,.drag-ghost .pcard .su,.drag-ghost .pcard .su2{ display:block; }
  .scol .pcard.up{ cursor:grab; touch-action:none; }
  .scol .pcard.sel{ box-shadow:0 0 0 3px var(--accent),0 4px 8px rgba(0,0,0,.45); }
  .scol .pcard.drag-src{ opacity:0; }   /* opgepakte kaart verbergen → de meebewegende kopie is je hand */
  .scol.drop-ok::before{ content:""; position:absolute; inset:-3px -2px; border-radius:11px; box-shadow:0 0 0 3px var(--good); pointer-events:none; z-index:3; }
  .scol.drop-bad::before{ content:""; position:absolute; inset:-3px -2px; border-radius:11px; box-shadow:0 0 0 3px var(--red); pointer-events:none; z-index:3; opacity:.55; }

  /* Sleep-spook: volgt de muis; kaartmaat + lettergroottes via inline vars (= sDims, volle maat) */
  .drag-ghost{ position:fixed; left:0; top:0; z-index:80; pointer-events:none; will-change:transform; transform-origin:0 0; filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
  .drag-ghost .pcard{ position:absolute; left:0; width:var(--scw,76px); height:var(--sch,106px); }
  .drag-ghost .pcard .r{ top:var(--cpad,6px); font-size:var(--rfs,26px); } .drag-ghost .pcard .su{ top:var(--cpad,6px); }
  .drag-ghost .pcard .s2,.drag-ghost .pcard .su,.drag-ghost .pcard .su2{ font-size:var(--sfs,23px); }

  /* Linkerrail — Ongedaan maken (onderaan, undo-icoon ↺ zoals Patience), tekst eronder */
  #spider .spider-undo{ display:flex; flex-direction:column; align-items:center; gap:.5vh; width:100%;
    font-size:1.85vh; line-height:1.15; padding:1.6vh .6vh; border-radius:1.4vh; }
  #spider .spider-undo .spider-undo-ico{ font-size:4.4vh; line-height:1; margin-bottom:-.2vh; }
  #spider .spider-undo .spider-undo-txt{ display:block; }

  /* Rechterrail — voltooide reeksen (boven, verticale mini-fan) + stapel (onder) */
  .spider-completezone{ display:flex; flex-direction:column; align-items:center; min-height:0; }
  .spider-completezone .pcard{ position:relative; width:7vh; height:9.8vh; box-shadow:0 2px 6px rgba(0,0,0,.45); }
  .spider-completezone .pcard:not(:first-child){ margin-top:calc(2.2vh - 9.8vh); }
  .spider-completezone .pcard .r{ top:.5vh; left:.7vh; font-size:1.9vh; } .spider-completezone .pcard .s2{ font-size:1.6vh; }
  .spider-completezone .pcard .su,.spider-completezone .pcard .su2{ display:block; font-size:1.5vh; }
  .spider-completezone .pcard .mid{ font-size:3vh; }
  .spider-completezone .pcard.pop{ animation:foundPop .45s cubic-bezier(.2,.8,.3,1.1) backwards; }
  @keyframes foundPop{ from{ transform:scale(.4) translateY(-14px); opacity:.2; } to{ transform:scale(1) translateY(0); opacity:1; } }

  .spider-stockzone{ display:flex; flex-direction:column; align-items:center; gap:.4vh; }
  .spider-stockzone.hidden{ visibility:hidden; }
  .stockbtn{ background:none; border:0; padding:.4vh; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s ease; }
  .stockbtn:disabled{ cursor:default; opacity:.5; }
  .stockbtn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .stockbtn:hover:not(:disabled){ transform:translateY(-4px); }
  .stock{ position:relative; display:flex; flex-direction:column; align-items:center; }
  .stock .pcard.down{ position:relative; width:8.6vh; height:12vh; box-shadow:0 3px 7px rgba(0,0,0,.45); }
  .stock .pcard.down:not(:first-child){ margin-top:calc(.7vh - 12vh); }
  .stock-count{ position:absolute; left:50%; bottom:-.7vh; transform:translateX(-50%); z-index:5;
    font-family:var(--mono); font-size:1.7vh; font-weight:700; color:#fff; background:rgba(0,0,0,.6); border-radius:9px; padding:.1vh .9vh; line-height:1.5; }
  .stock-cap{ font-family:var(--mono); font-size:1.5vh; color:var(--muted); }

  .smsg{ text-align:center; font-family:var(--mono); font-size:2vh; color:var(--accent); margin-top:.5vh; min-height:2.4vh; }

  /* Spider — voltooide reeks vliegt naar de rechterrail (zoals delen vanaf de stapel) */
  @keyframes spiderComplete{ from{ transform:translate(0,0) scale(1); opacity:1; } to{ transform:translate(var(--cdx,0px),var(--cdy,0px)) scale(.72); opacity:.15; } }
  .pcard.fly-complete{ animation:spiderComplete .5s cubic-bezier(.4,.1,.3,1) forwards; pointer-events:none; }

  /* Spider — deal-animatie: kaarten vliegen vanaf de stapel naar de kolommen */
  @keyframes spiderDeal{ from{ transform:translate(var(--dx,0px), var(--dy,-120px)); opacity:.25; } to{ transform:translate(0,0); opacity:1; } }
  .scol .pcard.dealing{ animation:spiderDeal .4s cubic-bezier(.2,.7,.3,1) backwards; z-index:6; }

  /* Spider — niveaukeuze netjes gecentreerd in de speelbox. Breedte in vh (niet de px-default
     uit core.css) + nowrap → de labels staan ALTIJD op één lijn, ook op mama's lage resoluties. */
  #overlayS h3{ font-size:3.2vh; } #overlayS p{ font-size:2vh; max-width:none; }
  #spider .lvlpick{ width:max-content; max-width:94vw; gap:2vh; }
  #spider .lvlpick .btn.full{ width:100%; white-space:nowrap; font-size:2.7vh; padding:2.4vh 3.4vh; }

  @media (prefers-reduced-motion: reduce){
    .scol .pcard.dealing, .pcard.fly-complete, .spider-completezone .pcard.pop{ animation:none !important; }
    .stockbtn{ transition:none !important; }
    .scol{ transition:none !important; }   /* geen compressie-glij bij reduced-motion */
  }