/* ==========================================================================
   Pack-opener (/pack-opening). Eigen, losse stylesheet: niets van de rest van
   de site laadt op deze pagina, en deze stylesheet laadt nergens anders.
   Script: js/pack-opener.js.
   ========================================================================== */
:root{
  --ink:#07080c;
  --text:#f2f1ec;
  --dim:rgba(242,241,236,.62);
  --gold:#c9a227;
  --gold-b:#e4bc3e;
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  /* Het pack in de uitgesneden foto (640 x 840): 30th Celebration loopt van
     19,4% tot 80,6% in de breedte en van 3% tot 97% in de hoogte. Per pack
     zet pack-opener.js --pack-l, --pack-w, --art-top en --cut-y. */
  --pack-l:19.4%;
  --pack-w:61.2%;
  --cut-y:7.4%;
  --card-ratio:300 / 419;
  /* Openen: het pack wordt zo breed als dit, en de bovenkant staat op
     --pack-top. De rest valt onder de rand van het scherm, zoals in Pocket. */
  --art:min(88vw, 60svh, 540px);   /* breedte van 30th Celebration; Terastal Gathering is 7% breder */
  --pack-top:30svh;
  --ball:clamp(64px, 15vw, 84px);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--ink); color:var(--text); font-family:var(--font);
  overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
[hidden]{ display:none !important; }
.pk-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Achtergrond: een diepe gloed die langzaam draait, geen beeld dat afleidt. */
.pk{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 45%, #1b1f3a 0%, rgba(27,31,58,0) 70%),
    radial-gradient(40% 40% at 20% 85%, rgba(0,106,255,.18), transparent 70%),
    radial-gradient(40% 40% at 85% 15%, rgba(184,76,255,.16), transparent 70%),
    var(--ink);
}
.pk::before{
  content:""; position:absolute; inset:-30%;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0 10deg, rgba(255,255,255,.035) 14deg, transparent 22deg, transparent 52deg, rgba(255,255,255,.03) 58deg, transparent 66deg);
  animation:pkRays 60s linear infinite; pointer-events:none;
}
@keyframes pkRays{ to{ transform:rotate(360deg); } }
/* Linksboven: een glazen terugknop met daarnaast het logo (zelfde opmaak als
   .logo in css/style.css). */
.pk-top{
  position:absolute; z-index:20; display:flex; align-items:center; gap:14px;
  left:max(16px, env(safe-area-inset-left)); top:max(14px, env(safe-area-inset-top));
}
.pk-back{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(255,255,255,.24), rgba(255,255,255,.05) 60%, rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
          backdrop-filter:blur(12px) saturate(1.4);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.pk-back:hover{ transform:scale(1.06); border-color:rgba(255,255,255,.5); background:linear-gradient(150deg, rgba(255,255,255,.32), rgba(255,255,255,.08) 60%, rgba(255,255,255,.14)); }
.pk-back:active{ transform:scale(.96); }
.pk-back:focus-visible{ outline:2px solid var(--gold-b); outline-offset:3px; }
/* Het pijltje zelf ook als glas: van wit naar half doorzichtig, met een
   zachte schaduw eronder. */
.pk-back svg{ width:22px; height:22px; margin-left:-2px; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
.pk-back path{ fill:none; stroke:url(#pkBackG); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pk-logo{
  font-family:var(--serif); font-size:22px; color:#ECEAE3; text-decoration:none;
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
}
.pk-logo em{
  font-style:italic;
  background:linear-gradient(100deg, #C9A227 0%, #E4BC3E 30%, #2FD9C4 55%, #7B5FFF 75%, #C9A227 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Bovenaan altijd ruimte voor de terugknop en het logo (44px hoog, plus de
   rand van het scherm) en daaronder nog lucht. De inhoud staat in het midden
   zolang het past (margin:auto op de eerste en laatste), en begint anders
   onder het logo en schuift dan. */
.pk-screen{
  --top-clear:calc(max(14px, env(safe-area-inset-top)) + 44px + 36px);
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:var(--top-clear) 20px 40px; overflow-x:hidden; overflow-y:auto; animation:pkScreenIn .45s ease both;
}
.pk-screen > :first-child{ margin-top:auto; }
.pk-screen > :last-child{ margin-bottom:auto; }
@keyframes pkScreenIn{ from{ opacity:0; } to{ opacity:1; } }
.pk-title{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,56px); line-height:1.05; text-align:center; }
.pk-sub{ margin:10px 0 0; color:var(--dim); font-size:15px; text-align:center; }
.pk-hint{ margin:22px 0 0; color:var(--dim); font-size:14px; font-weight:600; text-align:center; min-height:1.4em; }

/* ---------- 1. laden ----------
   Dezelfde stuiterende Pokéball als het laadscherm van de homepage
   (css/style.css §14): zelfde maat, zelfde drie elementen (val, indeuken,
   contactvlek op de grond), zelfde keyframes. Zonder het 30th-logo. */
.pk-load{
  position:fixed; inset:0; z-index:50; background:var(--ink);
  transition:opacity .45s ease .25s;
}
.pk-load.is-done{ opacity:0; pointer-events:none; }
.pk-load-stage{
  position:absolute; left:50%; top:50%;
  width:var(--ball); height:var(--ball);
  margin:calc(var(--ball) / -2) 0 0 calc(var(--ball) / -2);
  animation:pkStageIn .16s linear .06s both;
}
.pk-load.is-done .pk-load-stage{ animation:pkStageOut .55s cubic-bezier(.5,0,.75,1) both; }
@keyframes pkStageIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pkStageOut{
  0%   { transform:scale(1);   opacity:1; }
  70%  {                       opacity:1; }
  100% { transform:scale(1.9); opacity:0; }
}
.pk-load-drop{
  position:absolute; inset:0; display:block; will-change:transform;
  animation:pkDrop .90s .12s both;
}
@keyframes pkDrop{
  0%   { transform:translateY(calc(var(--ball) * -1));        animation-timing-function:cubic-bezier(.45,0,.85,.6); }
  24%  { transform:translateY(0);                             animation-timing-function:cubic-bezier(.2,.6,.4,1); }
  52%  { transform:translateY(calc(var(--ball) * -.40));      animation-timing-function:cubic-bezier(.5,0,.85,.55); }
  78%  { transform:translateY(0);                             animation-timing-function:cubic-bezier(.2,.6,.4,1); }
  90%  { transform:translateY(calc(var(--ball) * -.12));      animation-timing-function:cubic-bezier(.5,0,.9,.6); }
  100% { transform:translateY(0); }
}
.pk-load-ball{
  display:block; width:100%; height:100%;
  transform-origin:50% 100%; will-change:transform;
  animation:pkSquash .90s .12s both;
}
@keyframes pkSquash{
  0%,20%   { transform:scale(1,1); }
  25%      { transform:scale(1.16,.84); }
  33%      { transform:scale(.95,1.05); }
  44%,74%  { transform:scale(1,1); }
  79%      { transform:scale(1.09,.91); }
  86%      { transform:scale(.98,1.02); }
  94%,100% { transform:scale(1,1); }
}
.pk-load-shadow{
  position:absolute; left:50%; top:calc(100% + 7px);
  width:var(--ball); height:calc(var(--ball) * .17); margin-left:calc(var(--ball) / -2);
  border-radius:50%; background:rgba(255,255,255,.55); filter:blur(5px); opacity:.12;
  animation:pkShadow .90s linear .12s both;
}
@keyframes pkShadow{
  0%   { transform:scale(.5,.5);   opacity:.05; }
  24%  { transform:scale(1.1,1);   opacity:.15; }
  33%  { transform:scale(1,1);     opacity:.12; }
  52%  { transform:scale(.68,.9);  opacity:.07; }
  78%  { transform:scale(1.06,1);  opacity:.14; }
  90%  { transform:scale(.86,.95); opacity:.10; }
  100% { transform:scale(1,1);     opacity:.12; }
}
.pk-load-bar{
  position:absolute; left:50%; top:50%; transform:translateX(-50%);
  margin-top:calc(var(--ball) * .5 + clamp(34px, 7vw, 44px));
  width:clamp(140px, 46vw, 200px); height:3px; border-radius:999px;
  background:rgba(255,255,255,.13); overflow:hidden;
  transition:opacity .22s ease;
}
.pk-load.is-done .pk-load-bar{ opacity:0; }
.pk-load-bar span{
  display:block; height:100%; width:100%; border-radius:inherit;
  background:rgba(255,255,255,.92);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.45,.15,.2,1);
}

/* ---------- 2. kiezen ---------- */
.pk-choices{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin-top:34px; }
.pk-choice{
  appearance:none; border:0; background:none; color:inherit; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:0;
}
.pk-choice img{
  height:min(46vh, 380px); width:auto; display:block;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3);
  animation:pkFloat 4.5s ease-in-out infinite;
}
.pk-choice:hover img, .pk-choice:focus-visible img{ transform:translateY(-10px) scale(1.04); }
@keyframes pkFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
.pk-choice b{ font-size:17px; }
.pk-choice span{ color:var(--dim); font-size:13.5px; }
.pk-choice:focus-visible{ outline:2px solid var(--gold-b); outline-offset:8px; border-radius:12px; }
.pk-select.is-leaving{ animation:pkScreenOut .3s ease forwards; pointer-events:none; }
.pk-select.is-leaving .pk-choice.is-picked img{ visibility:hidden; }
@keyframes pkScreenOut{ to{ opacity:0; } }

/* ---------- 3. openen ----------
   Het pack vergroot naar de bovenkant: zo breed als --art, de bovenrand op
   --pack-top, de onderkant valt buiten beeld. pack-opener.js laat het pack
   vanaf de plek in het keuzescherm hierheen vliegen. */
.pk-open{ display:block; padding:0; z-index:3; animation:none; touch-action:none; overflow:hidden; }
.pk-open .pk-hint{
  position:absolute; left:20px; right:20px; top:calc(var(--pack-top) - 70px); margin:0;
  /* pkHintHop loopt in de maat van de gloed over de lijn (pkSweep, 2.3s):
     allebei beginnen ze als het openscherm verschijnt, dus elke keer dat de
     gloed vertrekt, stuitert de tekst twee keer. */
  animation:pkScreenIn .4s ease .45s both, pkHintHop 2.3s ease-in-out infinite;
}
@keyframes pkHintHop{
  0%, 24%, 100% { translate:0 0; }
  6%  { translate:0 -9px; }
  12% { translate:0 0; }
  17% { translate:0 -5px; }
  21% { translate:0 0; }
}
.pk-pack{
  /* --art-top: waar het pack in het beeld begint (per pack, pack-opener.js). */
  position:absolute; left:50%; top:calc(var(--pack-top) - var(--art) / .612 * 1.3125 * var(--art-top, .03));
  width:calc(var(--art) / .612); margin-left:calc(var(--art) / .612 / -2);
  aspect-ratio:640 / 840;
  touch-action:none; cursor:grab; transform-origin:0 0;
}
.pk-pack.is-cutting{ cursor:grabbing; }
/* Het pack krijgt na het inzoomen de focus (Enter of spatie opent het). Safari
   tekende daar een blauwe rand omheen, en omdat het pack groter is dan het
   scherm zag je daarvan alleen de bovenkant: een blauwe lijn. De lijn met de
   gloed laat al zien waar je moet zijn. */
.pk-pack:focus, .pk-pack:focus-visible{ outline:none; }
.pk-pack-body, .pk-pack-top{ position:absolute; inset:0; will-change:transform; }
.pk-pack img{ width:100%; height:100%; display:block; pointer-events:none; }
.pk-pack-top{ z-index:3; }
.pk-pack-body{ z-index:2; }

/* De snijlijn, in regenboogkleuren: een dunne lijn over de bovenrand, waar
   steeds opnieuw een dikke gloed van links naar rechts overheen trekt, zoals
   in TCG Pocket. Zo zie je meteen: hier moet ik overheen vegen. Tijdens het
   vegen neemt het regenboogspoor onder je vinger het over. */
.pk-cut{
  position:absolute; z-index:4; left:var(--pack-l); width:var(--pack-w);
  top:var(--cut-y); height:0; pointer-events:none;
  transition:opacity .35s ease;
  --rainbow:#ff4f5e, #ff9f43, #ffe14d, #5ee37a, #3fc3ff, #7a6bff, #e45cff;
}
.pk-pack.is-arriving .pk-cut{ opacity:0; transition:none; }
.pk-cut-guide{
  /* Een strook van 16px met de lijn in het midden en een zachte gloed eromheen,
     uitlopend aan de uiteinden. De gloed maakt de lijn ook op het lichte deel
     van het pack zichtbaar. */
  position:absolute; left:0; right:0; top:-8px; height:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  animation:pkGuide 2.3s ease-in-out infinite;
}
.pk-cut-guide::before, .pk-cut-guide::after{
  content:""; position:absolute; left:0; right:0; border-radius:3px;
  background:linear-gradient(90deg, var(--rainbow));
}
.pk-cut-guide::before{ top:6.5px; height:3px; }
.pk-cut-guide::after{ top:3px; height:10px; filter:blur(4px); opacity:.7; }
@keyframes pkGuide{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
.pk-cut-sweep{
  position:absolute; left:-4%; right:-4%; top:-40px; height:80px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  transition:opacity .2s ease;
}
/* De kop van de gloed: een witte schittering (verticale streep, samen met de
   kern hieronder een vierpuntige ster). De halo loopt onderweg door alle
   kleuren van de regenboog. */
.pk-cut-sweep i{
  position:absolute; left:0; top:0; width:40%; height:100%;
  transform:translateX(-100%);
  animation:pkSweep 2.3s cubic-bezier(.5,.1,.4,1) infinite, pkHue 2.3s linear infinite;
  background:linear-gradient(180deg, rgba(255,255,255,0) 18%, #fff 50%, rgba(255,255,255,0) 82%) 62% 0 / 3px 100% no-repeat;
}
/* Halo, veel dikker dan de lijn. */
.pk-cut-sweep i::before{
  content:""; position:absolute; left:0; right:0; top:12%; bottom:12%;
  background:radial-gradient(closest-side at 62% 50%, #fff 0%, rgba(255,255,255,.96) 24%, rgba(255,120,200,.85) 42%, rgba(140,110,255,.6) 62%, rgba(70,190,255,.25) 82%, rgba(70,190,255,0) 100%);
}
/* De staart achter de kop: de regenboog, uitlopend naar wit. */
.pk-cut-sweep i::after{
  content:""; position:absolute; left:0; width:68%; top:calc(50% - 2.5px); height:5px; border-radius:3px;
  background:linear-gradient(90deg, rgba(255,79,94,0), #ff4f5e 18%, #ffe14d 40%, #5ee37a 58%, #3fc3ff 74%, #fff 94%, #fff);
  box-shadow:0 0 10px 2px rgba(255,255,255,.75);
}
@keyframes pkSweep{
  0%{ transform:translateX(-100%); }
  70%, 100%{ transform:translateX(280%); }
}
@keyframes pkHue{ to{ filter:hue-rotate(360deg); } }
.pk-pack.is-cutting .pk-cut-sweep, .pk-pack.is-open .pk-cut-sweep{ opacity:0; }
/* Het spoor onder je vinger: de hele regenbooglijn ligt klaar en wordt
   onthuld (clip-path, pack-opener.js), zodat de kleuren op hun plek blijven. */
.pk-cut-fill{
  position:absolute; left:0; right:0; top:-14px; height:28px;
  clip-path:inset(0 100% 0 0);
}
.pk-cut-fill::before, .pk-cut-fill::after{
  content:""; position:absolute; left:0; right:0; border-radius:3px;
  background:linear-gradient(90deg, var(--rainbow));
}
.pk-cut-fill::before{ top:8px; height:12px; filter:blur(6px); opacity:.95; }
.pk-cut-fill::after{ top:12px; height:4px; box-shadow:0 0 6px rgba(255,255,255,.85); }
.pk-cut-spark{
  position:absolute; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.95) 26%, rgba(255,120,200,.75) 44%, rgba(120,140,255,0) 70%);
  opacity:0; animation:pkHue 1.2s linear infinite;
}
.pk-pack.is-cutting .pk-cut-spark{ opacity:1; }
.pk-pack.is-open .pk-cut{ opacity:0; transition:opacity .2s; }

/* Het licht uit het pack bij het openscheuren; de kleur zegt iets over wat
   erin zit (zie pack-opener.js). */
.pk-flash{
  position:absolute; z-index:5; left:0; right:0; top:calc(var(--cut-y) - 20%); height:40%;
  background:radial-gradient(50% 50% at 50% 50%, var(--flash, #fff) 0%, transparent 70%);
  opacity:0; pointer-events:none; mix-blend-mode:screen;
}
.pk-pack.is-open .pk-flash{ animation:pkFlash .9s ease-out both; }
@keyframes pkFlash{ 0%{ opacity:0; transform:scale(.4); } 20%{ opacity:1; } 100%{ opacity:0; transform:scale(1.6); } }

/* ---------- kaarten ---------- */
.pk-card{
  position:relative; aspect-ratio:var(--card-ratio); border-radius:4.6% / 3.3%;
  overflow:hidden; background:#111; box-shadow:0 22px 46px -18px rgba(0,0,0,.8);
}
.pk-card img{ width:100%; height:100%; display:block; object-fit:cover; }
/* Holo-glans voor de bijzondere kaarten. */
.pk-card.is-hit::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge;
  background:linear-gradient(115deg, transparent 25%, rgba(255,0,140,.5) 38%, rgba(255,214,0,.5) 45%, rgba(0,255,170,.5) 52%, rgba(0,170,255,.5) 59%, rgba(170,0,255,.5) 66%, transparent 78%);
  background-size:260% 260%; animation:pkSheen 2.8s ease-in-out infinite;
}
@keyframes pkSheen{ 0%{ background-position:100% 100%; } 50%{ background-position:0 0; } 100%{ background-position:100% 100%; } }

/* Poké Ball- en Master Ball-patroon (Terastal Gathering): dezelfde C/U/R-
   kaart, met een glanspatroon van kleine ballen over de hele kaart. */
.pk-pattern{
  position:absolute; inset:0; pointer-events:none;
  background-size:22px 22px; background-repeat:repeat;
}
/* Een zachte regenboogglans die over het patroon schuift. */
.pk-pattern::after{
  content:""; position:absolute; inset:0; mix-blend-mode:color-dodge; opacity:.32;
  background:linear-gradient(115deg, transparent 20%, rgba(255,90,140,.7) 35%, rgba(255,220,90,.7) 45%, rgba(90,255,190,.7) 55%, rgba(90,170,255,.7) 65%, transparent 80%);
  background-size:260% 260%; animation:pkSheen 3.4s ease-in-out infinite;
}
.pk-card.is-pb .pk-pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='%23d9e4f5' stroke-opacity='.75' stroke-width='1.2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M4.5 11h4.3M13.2 11h4.3'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}
.pk-card.is-mb .pk-pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='%23b28cff' stroke-opacity='.8' stroke-width='1.2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M4.5 11h4.3M13.2 11h4.3M7.6 8.6l1.7-2 1.7 2 1.7-2 1.7 2'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}
.pk-card.is-mb .pk-pattern::after{ opacity:.4; }
/* Een patroonkaart heeft zijn eigen glans; de holo-glans van de bijzondere
   kaarten erbovenop zou de afbeelding uitbleken. De gloed eromheen blijft. */
.pk-card.is-pb::after, .pk-card.is-mb::after{ display:none; }

/* ---------- 4. onthullen ----------
   Ligt onder het openscherm: als het pack wegzakt, liggen de kaarten hier. */
.pk-reveal{ z-index:2; }
.pk-reveal.from-pack{ animation:none; }
.pk-reveal.from-pack .pk-hint,
.pk-reveal.from-pack .pk-rarity{ opacity:0; }
.pk-reveal.is-settled .pk-hint,
.pk-reveal.is-settled .pk-rarity{ opacity:1; transition:opacity .35s ease; }
.pk-stack{
  /* Nooit breder dan het pack: de stapel ligt er bij het openen achter. */
  position:relative; height:min(64vh, 560px, calc(var(--art) * 1.34)); aspect-ratio:var(--card-ratio);
  cursor:pointer; outline:none; touch-action:none;
}
.pk-stack .pk-card{
  position:absolute; inset:0;
  transition:transform .42s cubic-bezier(.3,.7,.2,1), opacity .42s ease, box-shadow .4s;
}
.pk-stack .pk-card.is-gone{ pointer-events:none; }
.pk-stack .pk-card.is-top.is-hit{
  box-shadow:0 0 0 2px rgba(255,236,170,.65), 0 0 60px 10px var(--aura, rgba(255,214,0,.45)), 0 22px 46px -18px rgba(0,0,0,.8);
  animation:pkPop .55s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pkPop{ from{ transform:scale(.92); } to{ transform:scale(1); } }
.pk-stack:focus-visible{ outline:2px solid var(--gold-b); outline-offset:10px; border-radius:16px; }
.pk-rarity{
  position:absolute; left:50%; bottom:-38px; transform:translateX(-50%);
  padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em;
  background:rgba(255,255,255,.1); color:var(--text); white-space:nowrap;
}
/* Ruimte voor het naamlabel onder de kaart. */
.pk-reveal .pk-hint{ margin-top:60px; }

/* ---------- 5. overzicht ---------- */
.pk-row{
  display:grid; grid-template-columns:repeat(var(--cols, 6), minmax(0, 1fr)); gap:clamp(10px,1.6vw,22px);
  width:min(1100px, 100%); margin-top:28px;
}
.pk-tile{ display:flex; flex-direction:column; align-items:center; gap:8px; color:inherit; text-decoration:none;
  animation:pkTileIn .5s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:calc(var(--i) * 70ms); }
@keyframes pkTileIn{ from{ opacity:0; transform:translateY(16px) rotateY(70deg); } to{ opacity:1; transform:none; } }
.pk-tile .pk-card{ width:100%; transition:transform .25s ease; }
.pk-tile:hover .pk-card, .pk-tile:focus-visible .pk-card{ transform:translateY(-6px); }
.pk-tile b{ font-size:13px; text-align:center; line-height:1.25; }
.pk-tile small{ font-size:11.5px; color:var(--dim); text-align:center; }
.pk-tile small em{ font-style:normal; color:var(--gold-b); }
.pk-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.pk-btn{
  appearance:none; font:600 15px var(--font); padding:13px 22px; border-radius:10px; cursor:pointer; text-decoration:none;
  background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.28);
}
.pk-btn:hover{ border-color:rgba(255,255,255,.6); }
.pk-btn-gold{ background:var(--gold); color:#141004; border-color:var(--gold); }
.pk-btn-gold:hover{ background:var(--gold-b); border-color:var(--gold-b); }

@media (max-width:760px){
  /* Smaller dan het scherm, met ruim 40px aan elke kant: wie vanaf de rand
     van het scherm veegt, krijgt in Safari "terug naar de vorige pagina".
     Zo begin je vanzelf op het pack. */
  :root{ --pack-top:34svh; --art:min(76vw, 60svh, 540px); }
  /* Twee packs naast elkaar: het beeld heeft aan weerskanten lege rand
     (19,4%), die mag overlappen. */
  .pk-choices{ gap:0; flex-wrap:nowrap; }
  .pk-choice{ width:min(48vw, 250px); }
  .pk-choice img{ width:100%; height:auto; margin:0 0 -4px; }
  .pk-choice span{ font-size:12px; padding:0 8px; text-align:center; }
  .pk-row{ grid-template-columns:repeat(var(--cols-m, 3), minmax(0, 1fr)); width:min(460px,100%); gap:8px; }
  .pk-tile b{ font-size:11.5px; }
  .pk-tile small{ font-size:10px; }
  .pk-stack{ height:min(56vh, 480px, calc(var(--art) * 1.34)); }
  .pk-screen{ padding:var(--top-clear) 16px 28px; }
  .pk-open{ padding:0; }
}
@media (prefers-reduced-motion:reduce){
  .pk::before, .pk-choice img, .pk-cut-guide, .pk-card.is-hit::after, .pk-pattern::after,
  .pk-load-drop, .pk-load-ball, .pk-load-shadow{ animation:none; }
  .pk-cut-sweep i{ animation-duration:4s, 4s; }
  .pk-open .pk-hint{ animation:pkScreenIn .4s ease .45s both; }
  .pk-cut-spark{ animation:none; }
}