/* Realmbreak Packs: shop, booster opening, grading slabs. Uses shared tokens
   (--frame, --cond, --gold1..4, --back) from styles/arena.css. Everything is pk-prefixed. */
.pk{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;gap:18px;padding-top:24px;background:#0a0d10}
.pk::before{content:"";position:absolute;inset:-40px;z-index:-2;background:var(--pk-bg) center 30%/cover no-repeat;filter:blur(18px) saturate(.9) brightness(.42);transform:scale(1.08)}
.pk::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 42%,rgba(255,196,110,.10),transparent 70%),linear-gradient(180deg,rgba(6,8,10,.55),rgba(6,8,10,.2) 30%,rgba(6,8,10,.75))}

/* ---------- header: title + wallet ---------- */
.pk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pk-title small{display:block;font:700 13px/1 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--gold1);margin-bottom:6px;text-shadow:0 2px 6px #000}
.pk-title h1{margin:0;font:700 clamp(40px,4.6vw,72px)/.9 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff6de,#e9bb6a 60%,#a47232);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
.pk-wallet{display:flex;gap:12px;flex-wrap:wrap}
.pk-chip{display:flex;align-items:center;gap:10px;min-width:118px;padding:7px 16px 7px 8px;border-radius:12px;border:2px solid transparent;
  background:linear-gradient(180deg,#1b1714,#0b0908) padding-box,var(--frame) border-box;box-shadow:0 6px 14px rgba(0,0,0,.6)}
.pk-chip b{font:700 clamp(20px,1.7vw,28px)/1 var(--cond);color:#fff;text-shadow:0 2px 4px #000}
.pk-chip small{margin-left:auto;font:700 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#b3a88f)}
.pk-chip--coin b{color:#ffe7a8}
.pk-ico{display:inline-block;flex:none;width:30px;height:30px}
.pk-ico--coin{border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 52%,rgba(90,56,14,.55) 54%,transparent 62%),radial-gradient(circle at 35% 30%,#fff2c6,#e5b457 45%,#8a5f22 90%);box-shadow:inset 0 0 0 2px rgba(74,50,18,.6),0 2px 4px rgba(0,0,0,.6)}
/* wallet chips: miniature products (products.css hides their print at this size) */
.pk-ico--prod{position:relative;display:grid;place-items:center;width:30px;height:34px}
.pk-ico--prod .pr-pack{--pw:21px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.pk-ico--boxprod{width:36px}
.pk-ico--boxprod .pr-box{--bw:25px;margin-top:4px}
.pk-modal-prod{position:relative;display:grid;place-items:center;height:150px;margin:-6px -6px 4px;border-radius:6px;overflow:hidden;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 40%,transparent),transparent),radial-gradient(120% 90% at 50% 100%,rgba(0,0,0,.6),transparent)}
.pk-modal-prod .pr-pack{--pw:78px}
.pk-modal-prod .pr-bundle{--pw:62px}
.pk-modal-prod .pr-box{--bw:128px}
.pk-ico--pack{width:24px;height:32px;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),linear-gradient(160deg,#2f6db0,#123a66);border:2px solid var(--gold2);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.pk-ico--box{width:32px;height:26px;border-radius:3px;background:linear-gradient(90deg,transparent 44%,var(--gold2) 44% 56%,transparent 56%),linear-gradient(180deg,#b3482c,#5a1a10);border:2px solid var(--gold2);box-shadow:0 2px 4px rgba(0,0,0,.6)}

/* ---------- section tabs ---------- */
.pk-tabs{display:flex;gap:4px;border-bottom:2px solid rgba(215,166,83,.35)}
.pk-tabs button{position:relative;display:flex;align-items:center;gap:10px;padding:12px 26px 13px;margin-bottom:-2px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;
  font:700 clamp(15px,1.3vw,20px)/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#a99f88;transition:color .15s}
.pk-tabs button:hover{color:#fff}
.pk-tabs button.is-on{color:#fff;border-bottom-color:var(--gold1);background:linear-gradient(0deg,rgba(215,166,83,.18),transparent)}
.pk-tabs em{min-width:24px;padding:4px 7px;border-radius:999px;font:700 13px/1 var(--cond);font-style:normal;letter-spacing:0;color:#fff;background:radial-gradient(circle at 35% 30%,#bff6ff,#1aa6c4 50%,#0b5264);border:1px solid var(--gold1)}
.pk-body{position:relative;flex:1;display:flex;flex-direction:column}

/* ---------- buttons ---------- */
.pk-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;cursor:pointer;
  border:2px solid transparent;border-radius:4px;background:linear-gradient(180deg,rgba(24,26,28,.95),rgba(8,9,10,.95)) padding-box,var(--frame) border-box;
  font:700 clamp(15px,1.2vw,19px)/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 3px #000;
  box-shadow:0 0 0 2px rgba(0,0,0,.6),0 10px 22px rgba(0,0,0,.5);transition:filter .15s,transform .15s}
.pk-btn::before{content:"";position:absolute;inset:4px;border:1px solid rgba(215,166,83,.4);pointer-events:none}
.pk-btn:hover:not(:disabled){filter:brightness(1.2);transform:translateY(-2px)}
.pk-btn:disabled{filter:grayscale(.9) brightness(.6);cursor:default}
.pk-btn em{font:600 12px/1 var(--cond);font-style:normal;letter-spacing:.14em;color:#cfe3ff;opacity:.9}
.pk-btn--hero{min-height:58px;padding:0 34px;background:linear-gradient(180deg,#2168aa,#0e2f55) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 30px rgba(63,168,255,.4),0 10px 24px rgba(0,0,0,.6)}
.pk-btn--ghost{background:linear-gradient(rgba(8,9,10,.55),rgba(8,9,10,.55)) padding-box,linear-gradient(rgba(215,166,83,.5),rgba(215,166,83,.5)) border-box;box-shadow:none}
.pk-btn--ghost::before{display:none}
.pk-eyebrow{font:700 13px/1 var(--cond);letter-spacing:.28em;text-transform:uppercase;color:var(--gold1)}

/* ---------- open stage ---------- */
.pk-stage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;min-height:min(72vh,720px);padding:20px 0}
@keyframes pkSpin{to{rotate:360deg}}

/* the booster pack object */
.pk-pack{--w:clamp(200px,19vw,270px);position:relative;width:var(--w);aspect-ratio:.58;transition:transform .25s}
/* the pack on the altar is a products.mjs booster, alone (no stash peeking out behind it) */
.pk-pack>.pr-pack{position:absolute;inset:0;--pw:100%}
.pk-pack-front{z-index:2;transform:perspective(800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.pk-pack.is-tilting .pk-pack-front{transition:transform .08s linear}
.pk-pack .pk-pack-tear{z-index:7}
@keyframes pkFloat{50%{translate:0 -10px}}
/* tear strip along the top: crimped foil band */
.pk-pack-flash{position:absolute;left:50%;top:11%;width:0;height:0;z-index:7;pointer-events:none}
.pk-pack-flash::before{content:"";position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,236,190,.9) 18%,rgba(255,200,110,.35) 45%,transparent 70%);opacity:0;scale:.2}
/* opening sequence: shake -> strip tears away -> light burst -> pack drops away */
@keyframes pkTear{0%{transform:none}30%{transform:translate(6px,-4px) rotate(3deg)}100%{transform:translate(160%,-140%) rotate(38deg);opacity:0}}
@keyframes pkFlash{0%{opacity:0;scale:.2}35%{opacity:1;scale:1}100%{opacity:0;scale:2.4}}
@keyframes pkDrop{to{transform:translateY(60px) scale(.86);opacity:0;filter:brightness(1.8)}}

/* ---------- opening ceremony: altar, charge, comet, burst, grid, spotlight ----------
   The stage steps through s-charge → s-comet → s-impact(+s-warm) → s-dealt → s-done (packs.mjs pkCeremony).
   --best is the best rarity colour in the opening: it paints the comet, the shockwave and the warm tint. */
.pk-show{--cool:#7b86ff;--hot:var(--best,#ffd27a);--cy:44%;justify-content:flex-start;gap:8px;padding:4px 0 12px;min-height:min(calc(100vh - 190px),860px)}
.pk-show::before,.pk-show::after{content:"";position:absolute;top:-30px;bottom:-30px;left:50%;width:100vw;translate:-50% 0;z-index:-1;pointer-events:none;transition:opacity .7s}
.pk-show::before{background:radial-gradient(55% 60% at 50% 48%,rgba(123,134,255,.30),rgba(40,30,90,.22) 45%,transparent 75%),linear-gradient(180deg,rgba(14,10,40,.5),rgba(8,6,20,.7))}
.pk-show::after{opacity:0;background:radial-gradient(55% 60% at 50% 48%,color-mix(in srgb,var(--hot) 45%,transparent),color-mix(in srgb,var(--hot) 14%,rgba(40,20,6,.4)) 50%,transparent 80%)}
.pk-show.s-warm::after{opacity:1}
.pk-show[data-best="common"]::after{opacity:0}

.pk-arena{position:relative;flex:1;width:100%;display:grid;place-items:center;min-height:400px}
.pk-altar{position:absolute;inset:0;pointer-events:none}
.pk-glow{position:absolute;left:50%;top:var(--cy);width:min(640px,70vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0,rgba(170,176,255,.35) 18%,rgba(123,134,255,.12) 42%,transparent 68%);transition:scale .9s,opacity .6s}
.s-warm .pk-glow{background:radial-gradient(circle,rgba(255,255,255,.7) 0,color-mix(in srgb,var(--hot) 55%,transparent) 20%,color-mix(in srgb,var(--hot) 18%,transparent) 44%,transparent 68%)}
.s-charge .pk-glow{scale:1.35}
.pk-floor{position:absolute;left:50%;top:66%;width:min(900px,92vw);aspect-ratio:1;translate:-50% -50%;transform:perspective(1000px) rotateX(74deg);color:rgba(176,184,255,.5);transition:color .7s}
.s-warm .pk-floor{color:color-mix(in srgb,var(--hot) 80%,#fff 10%)}
.pk-runes{width:100%;height:100%;filter:drop-shadow(0 0 5px currentColor);animation:pkSpin 90s linear infinite}
.s-charge .pk-runes{animation-duration:6s}

.pk-shards{--u:clamp(4px,.6vw,8px)}
.pk-shards i{position:absolute;left:calc(50% + var(--x) * var(--u) * 1.25);top:calc(var(--cy) + 40px + var(--y) * var(--u) * .75);width:calc(var(--u) * 1.3);height:calc(var(--u) * 3);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(160deg,#fff,#c9ccff 45%,#7b7fd6);filter:drop-shadow(0 0 6px #b9bfff);
  animation:pkBob 3.2s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
.s-warm .pk-shards i{background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--hot) 60%,#fff) 45%,var(--hot))}
@keyframes pkBob{50%{translate:0 -12px}}
.s-charge .pk-shards i{animation:pkSuck 1.1s cubic-bezier(.6,0,.9,.5) forwards}
@keyframes pkSuck{to{left:50%;top:var(--cy);opacity:0;scale:.3}}
.s-dealt .pk-shards i{animation:pkBob 3.2s ease-in-out infinite;animation-delay:calc(var(--d) * -1);opacity:.8}

.pk-core{position:absolute;left:50%;top:var(--cy);translate:-50% -50%}
.pk-core .pk-pack{--w:clamp(150px,13.5vw,205px);animation:pkFloat 3.4s ease-in-out infinite}
.pk-arena:has(.pk-packhit:hover) .pk-core .pk-pack{transform:translateY(-8px) scale(1.04);filter:brightness(1.12)}
.pk-packhit{position:absolute;left:50%;top:var(--cy);translate:-50% -50%;z-index:3;width:clamp(150px,13.5vw,205px);aspect-ratio:.58;padding:0;border:0;border-radius:12px;background:none;cursor:pointer}
.s-charge .pk-pack{animation:pkRumble .12s linear infinite;filter:brightness(1.25) drop-shadow(0 0 30px rgba(190,196,255,.9))}
@keyframes pkRumble{0%,100%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px -2px}}
.s-comet .pk-pack-tear{animation:pkTear .5s cubic-bezier(.3,.1,.4,1) forwards}
.s-impact .pk-pack{animation:pkPop2 .3s ease-in forwards}
@keyframes pkPop2{to{scale:1.35;opacity:0;filter:brightness(3)}}
.s-dealt .pk-core,.s-dealt .pk-speed{visibility:hidden}

/* converging speed lines while the pack charges */
.pk-speed{position:absolute;left:50%;top:var(--cy);width:1800px;height:1800px;translate:-50% -50%;opacity:0}
.pk-speed::before,.pk-speed::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.9) 0 .35deg,transparent .35deg 9deg);
  mask:radial-gradient(circle,transparent 9%,#000 13%,#000 24%,transparent 40%);-webkit-mask:radial-gradient(circle,transparent 9%,#000 13%,#000 24%,transparent 40%)}
.pk-speed::after{rotate:4.5deg}
.s-charge .pk-speed{opacity:1}
.s-charge .pk-speed::before{animation:pkSpeed .42s linear infinite}
.s-charge .pk-speed::after{animation:pkSpeed .42s .21s linear infinite}
.s-impact .pk-speed{opacity:0;transition:opacity .2s}
@keyframes pkSpeed{0%{scale:1.35;opacity:0}35%{opacity:1}100%{scale:.75;opacity:0}}

/* impact: white flash + three shockwave rings */
.pk-shock{position:absolute;left:50%;top:var(--cy);width:0;height:0}
.pk-shock::before{content:"";position:absolute;left:-260px;top:-260px;width:520px;height:520px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0,#fff 22%,color-mix(in srgb,var(--hot) 60%,transparent) 45%,transparent 70%)}
.pk-shock i{position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;opacity:0;border:3px solid color-mix(in srgb,var(--hot) 70%,#fff);box-shadow:0 0 24px var(--hot),inset 0 0 24px var(--hot)}
.s-impact .pk-shock::before{animation:pkFlash .8s ease-out forwards}
.s-impact .pk-shock i{animation:pkShock 1.1s cubic-bezier(.1,.6,.3,1) forwards}
.s-impact .pk-shock i:nth-child(2){animation-delay:.12s}
.s-impact .pk-shock i:nth-child(3){animation-delay:.24s}
@keyframes pkShock{0%{opacity:1;scale:.2}100%{opacity:0;scale:9}}
@keyframes pkFlash{0%{opacity:0;scale:.2}35%{opacity:1;scale:1}100%{opacity:0;scale:2.4}}

/* the grid the cards land in */
.pk-grid{--cw:min(200px,15.5vw,calc((min(100vh - 190px,860px) - 230px) / var(--rows,1) / 1.55));position:relative;z-index:2;visibility:hidden;
  display:grid;grid-template-columns:repeat(var(--cols,5),var(--cw));gap:clamp(8px,1.2vw,18px) clamp(10px,1.6vw,24px);perspective:1400px;transition:filter .4s,scale .4s}
.s-dealt .pk-grid{visibility:visible}
.pk-gslot{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--cw)}
.pk-card.is-away{visibility:hidden}
.is-spot .pk-grid,.is-grading .pk-grid{filter:brightness(.35) blur(2px);scale:.96}
/* The rarity gem hangs 7.2% of the card width below the frame: the chips start under it, not behind it. */
.pk-show .pk-cap{min-height:22px;gap:4px;margin-top:calc(var(--cw) * .075)}
.pk-show .pk-cap .pk-rchip,.pk-show .pk-cap .pk-gchip{padding:4px 8px;font-size:11px;animation:pkFade .3s}
.pk-card.is-pop{animation:pkJump .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pkJump{40%{scale:1.1}}
/* --rc on each card is its tier colour: the rarity's, or the Alt / Secret Art colour for those copies. */
.pk-card.is-pop:is(.r-epic,.r-legendary,.v-alt,.v-secret)::after{content:"";position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  border:2px solid color-mix(in srgb,var(--rc) 55%,#fff);box-shadow:0 0 24px var(--rc),inset 0 0 22px color-mix(in srgb,var(--rc) 70%,transparent);animation:pkRing .9s ease-out forwards}
@keyframes pkRing{0%{opacity:1;scale:.5}100%{opacity:0;scale:1.5}}

/* head, skip, summary, buttons */
.pk-showhead{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:48px}
.pk-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pk-schip{padding:6px 12px;border-radius:999px;font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#1a1106;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 55%,#fff),var(--rc));box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 14px color-mix(in srgb,var(--rc) 50%,transparent);animation:pkChip .45s cubic-bezier(.3,1.6,.5,1) backwards}
.pk-schip:nth-child(2){animation-delay:.08s}.pk-schip:nth-child(3){animation-delay:.16s}.pk-schip:nth-child(4){animation-delay:.24s}
.pk-schip--gem{--rc:#fff0c0}
.pk-schip--avg{--rc:#bfe6ff}
/* icon chips: dark pill, the rarity gem / foil / 10 badge, then the count */
.pk-schip--ico{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 6px;color:#fff;letter-spacing:.04em;
  background:rgba(10,8,14,.72);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 70%,transparent),0 2px 0 rgba(0,0,0,.5),0 0 14px color-mix(in srgb,var(--rc) 40%,transparent)}
.pk-schip--ico b{font:inherit;font-size:15px}
.pk-schip--ico .gem{width:22px;height:22px;filter:drop-shadow(0 0 5px currentColor)}
.pk-sfoil{width:14px;height:14px;margin:4px;rotate:45deg;border-radius:3px;background:linear-gradient(135deg,#fff,var(--rc) 55%);box-shadow:0 0 10px var(--rc)}
.pk-sfoil--secret{background:conic-gradient(#ff8ad8,#ffe27a,#8cffb5,#6fd6ff,#b98cff,#ff8ad8)}
.pk-s10{display:grid;place-items:center;min-width:22px;height:22px;padding:0 3px;border-radius:5px;font:800 12px/1 var(--cond);font-style:normal;letter-spacing:0;color:#2a1a04;
  background:linear-gradient(180deg,#fff2c6,#e0b35e);box-shadow:0 0 10px rgba(255,210,120,.7)}
@keyframes pkChip{from{opacity:0;scale:.4}}
.pk-skip{position:absolute;top:0;right:0;z-index:60;padding:8px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(8,8,16,.6);cursor:pointer;
  font:700 13px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#e8e4ff}
.pk-skip:hover{background:rgba(40,36,80,.8)}
.is-idle .pk-skip{display:none}
.pk-bar{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:66px}
.pk-bar .pk-owned{margin:0;font:600 13px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#cfc6e8;text-align:center}
.pk-bar .pk-owned b{font-size:18px;color:#fff}
.pk-summon{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.pk-after:not([hidden]){animation:pkRise .45s cubic-bezier(.2,.9,.3,1.1)}
@keyframes pkRise{from{opacity:0;translate:0 20px}}
.pk-sbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:clamp(150px,13vw,200px);min-height:58px;padding:8px 22px;cursor:pointer;
  border:2px solid rgba(8,6,20,.85);border-radius:10px;color:#fff;background:linear-gradient(180deg,#8a7bff,#5140d6 55%,#3a2aa8);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.25),0 5px 0 #231a6e,0 12px 22px rgba(0,0,0,.5);transition:translate .1s,box-shadow .1s,filter .15s}
.pk-sbtn b{font:700 clamp(18px,1.5vw,22px)/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.pk-sbtn small{font:700 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.pk-sbtn--two{color:#2a1606;background:linear-gradient(180deg,#ffe49a,#f2b43e 55%,#d48a1f);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.2),0 5px 0 #7a4a10,0 12px 22px rgba(0,0,0,.5)}
.pk-sbtn--two b{text-shadow:0 1px 0 rgba(255,255,255,.5)}
.pk-sbtn:hover:not(:disabled){filter:brightness(1.1);translate:0 -2px}
.pk-sbtn:active:not(:disabled){translate:0 4px;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 #231a6e,0 6px 12px rgba(0,0,0,.5)}
.pk-sbtn:disabled{filter:grayscale(.85) brightness(.55);cursor:default}
.pk-show:not(.is-idle):not(.s-done) .pk-bar .pk-summon:not(.pk-after){display:none}

/* ---------- Champion spotlight ---------- */
.pk-spot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.pk-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff8e8 0,color-mix(in srgb,var(--rc) 70%,#fff) 16%,color-mix(in srgb,var(--rc) 45%,#3a1e0a) 42%,#14090a 85%);animation:pkFade .35s;transition:opacity .35s}
.pk-spot-rays{position:absolute;left:50%;top:50%;width:260vmax;height:260vmax;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,246,220,.42) 0 4deg,transparent 4deg 13deg);mask:radial-gradient(circle,#000 3%,transparent 36%);-webkit-mask:radial-gradient(circle,#000 3%,transparent 36%);
  animation:pkSpin 40s linear infinite,pkFade .6s;transition:opacity .3s}
.pk-spot-body{position:relative;display:flex;align-items:center;gap:clamp(26px,4vw,64px);padding:24px}
.pk-spot-card{position:relative;width:min(300px,30vw,calc(62vh / 1.4));aspect-ratio:5/7;perspective:1600px}
.pk-spot-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.pk-spot.is-open .pk-spot-inner{transform:rotateY(180deg)}
.pk-spot-card .pk-face--front .cf{height:100%}
.pk-spot-card .pk-cardback{box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px color-mix(in srgb,var(--rc) 50%,transparent)}
.pk-spot.is-charge:not(.is-open) .pk-spot-card{animation:pkCharge 1.2s ease-in forwards}
@keyframes pkCharge{0%{filter:brightness(1)}70%{filter:brightness(1.5) drop-shadow(0 0 30px var(--rc))}100%{filter:brightness(2.2) drop-shadow(0 0 60px #fff);scale:1.04}}
.pk-spot-sheen{position:absolute;inset:0;border-radius:11px;opacity:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 48%,rgba(170,220,255,.6) 52%,transparent 62%);background-size:300% 100%;background-position:130% 0}
.pk-spot.is-charge .pk-spot-sheen{opacity:1;animation:pkSheen .55s ease-in-out 2}
@keyframes pkSheen{from{background-position:130% 0}to{background-position:-30% 0}}
.pk-spot-flash{position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;z-index:4;
  background:radial-gradient(circle,#fff 0,#fff 26%,rgba(255,255,255,.6) 40%,transparent 68%)}
.pk-spot.is-flash .pk-spot-flash{animation:pkWhite .75s ease-out forwards}
@keyframes pkWhite{0%{opacity:0;scale:.3}22%{opacity:1;scale:1}100%{opacity:0;scale:1.5}}
.pk-spot-card::after{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  border:3px solid color-mix(in srgb,var(--rc) 60%,#fff);box-shadow:0 0 40px var(--rc)}
.pk-spot.is-flash .pk-spot-card::after{animation:pkRing 1s .1s ease-out forwards}
.pk-spot-stamp{position:absolute;left:-16%;top:-9%;z-index:5;rotate:-9deg;opacity:0;pointer-events:none;
  font:700 clamp(34px,4.2vw,60px)/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:#fff4d8;
  -webkit-text-stroke:2px #3a1c06;paint-order:stroke fill;text-shadow:0 4px 0 #3a1c06,0 0 24px var(--rc)}
.pk-spot.is-open .pk-spot-stamp{animation:pkStamp .42s .12s cubic-bezier(.2,1.5,.4,1) forwards}
.pk-spot.v-secret .pk-spot-stamp{color:#fff;text-shadow:0 4px 0 #3a1c06,0 0 18px #ff8ad8,0 0 34px #8fe8ff}
.pk-spot-chips{display:flex;gap:8px;flex-wrap:wrap}
@keyframes pkStamp{0%{opacity:0;scale:3.4}100%{opacity:1;scale:1}}
.pk-spot-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:min(340px,40vw);max-width:420px;cursor:default}
.pk-spot:not(.is-open) .pk-spot-info{visibility:hidden}
.pk-spot.is-open .pk-spot-info>*{animation:pkSlide .4s cubic-bezier(.2,.9,.3,1.1) backwards}
.pk-spot.is-open .pk-spot-info>:nth-child(2){animation-delay:.18s}.pk-spot.is-open .pk-spot-info>:nth-child(3){animation-delay:.26s}
.pk-spot.is-open .pk-spot-info>:nth-child(4){animation-delay:.34s}.pk-spot.is-open .pk-spot-info>:nth-child(5){animation-delay:.42s}
@keyframes pkSlide{from{opacity:0;translate:-24px 0}}
.pk-new{padding:5px 10px;border-radius:5px;rotate:-4deg;background:linear-gradient(180deg,#ff7a93,#e0284f);border:2px solid #4a0a18;font:700 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 #4a0a18}
.pk-spot-info h2{margin:0;font:700 clamp(34px,4.2vw,62px)/.95 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:#fff;-webkit-text-stroke:2px #1a0c04;paint-order:stroke fill;text-shadow:0 4px 0 #1a0c04,0 8px 24px rgba(0,0,0,.5)}
.pk-spot-info>small{font:700 14px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:#fff3dc;text-shadow:0 1px 3px #000}
.pk-spot-grade{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;border-radius:8px;background:rgba(10,6,4,.6);border:1px solid color-mix(in srgb,var(--rc) 60%,transparent)}
.pk-spot-grade b{min-width:1.3em;text-align:center;font:700 56px/1 var(--cond);color:#fff2c6;text-shadow:0 0 18px var(--rc)}
.pk-spot-grade span{display:flex;flex-direction:column;gap:4px}
.pk-spot-grade small{font:700 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#bfb49a}
.pk-spot-grade em{font:700 20px/1 var(--cond);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.pk-spot-subs{display:grid;gap:7px;width:100%}
.pk-spot-subs span{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:10px}
.pk-spot-subs small{font:700 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#fff3dc;text-shadow:0 1px 2px #000}
.pk-spot-subs i{position:relative;height:9px;border-radius:9px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);overflow:hidden}
.pk-spot-subs i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-radius:9px;background:linear-gradient(90deg,#4aa8ff,#9fe0ff);transition:width .7s cubic-bezier(.2,.8,.3,1)}
.pk-spot.is-open .pk-spot-subs i::after{width:var(--v);transition-delay:calc(.55s + var(--k) * .1s)}
.pk-spot-subs b{font:700 15px/1 var(--cond);color:#fff;text-align:right}
.pk-spot-go{opacity:0;pointer-events:none;transition:opacity .3s}
.pk-spot.is-ready .pk-spot-go{opacity:1;pointer-events:auto;animation:pkNudge 1.6s ease-in-out infinite}
@keyframes pkNudge{50%{translate:0 -3px}}
.pk-spot.is-leaving::before,.pk-spot.is-leaving .pk-spot-rays,.pk-spot.is-leaving .pk-spot-info,.pk-spot.is-leaving .pk-spot-stamp{opacity:0;transition:opacity .25s}

/* ---------- Packs | Boxes switcher (top left of My Packs) ---------- */
.pk-kinds{position:absolute;left:0;top:0;z-index:6;display:flex;gap:4px;padding:4px;border-radius:12px;border:2px solid transparent;
  background:linear-gradient(180deg,rgba(22,18,14,.92),rgba(8,7,6,.92)) padding-box,var(--frame) border-box;box-shadow:0 10px 24px rgba(0,0,0,.55)}
.pk-kinds button{display:flex;align-items:center;gap:10px;padding:5px 16px 5px 8px;border:0;border-radius:8px;background:none;cursor:pointer;color:#a99f88;transition:background .2s,color .2s}
.pk-kinds button:hover{color:#fff;background:rgba(255,255,255,.06)}
.pk-kinds button.is-on{color:#fff;background:linear-gradient(180deg,rgba(215,166,83,.34),rgba(215,166,83,.08));box-shadow:inset 0 0 0 1px rgba(251,231,176,.55),0 0 18px rgba(255,200,110,.22)}
.pk-kinds button:not(.is-on) .pk-ico--prod{filter:grayscale(.6) brightness(.7)}
.pk-kind-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pk-kind-text b{font:700 clamp(15px,1.2vw,18px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.pk-kind-text small{font:700 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.pk-kind-text em{display:inline-block;font-style:normal;color:#ffe7a8}
.pk-box-ghost{width:180px;height:128px}

/* ---------- box altar + unboxing ----------
   s-charge (rumble, light leaks from the lid seam) → .is-thump ×3 → s-crack (the lid strains) → s-burst (+s-impact s-warm:
   the lid blows off, the mouth blazes) → then the box's first pack rises
   onto the altar and the box is opened pack by pack (packs.mjs pkRiseFromBox). */
.pk-show--box{--cy:60%;--bwv:clamp(160px,min(18vw,30vh),280px)}
.pk-boxobj{position:relative;display:grid;place-items:center;transition:transform .25s,filter .25s}
.pk-boxobj .pr-box{--bw:var(--bwv)}
.pk-core .pk-boxobj{animation:pkFloat 3.4s ease-in-out infinite}
.pk-arena:has(.pk-boxhit:hover) .pk-core .pk-boxobj{transform:translateY(-8px) scale(1.04);filter:brightness(1.12)}
.pk-boxhit{width:calc(var(--bwv) * 1.25);aspect-ratio:1.05}
.s-charge .pk-boxobj .pr-box{animation:pkRumble .12s linear infinite}
.s-charge .pk-boxobj.is-thump .pr-box{animation:pkRumble .12s linear infinite,pkThump .34s cubic-bezier(.3,1.7,.5,1)}
.s-crack .pk-boxobj .pr-box{animation-duration:.06s}
.s-charge .pk-boxobj{filter:brightness(1.12) drop-shadow(0 0 26px rgba(255,210,122,.6))}
@keyframes pkThump{35%{scale:1.08}}
/* light leaking from the seam: the body's seam and a matching strip along the bottom of the lid */
.pk-boxobj .pr-lid-seam{transition:background .5s,box-shadow .5s}
.s-charge .pk-boxobj .pr-lid-seam{background:#fff6d8;box-shadow:0 0 6px 1px #ffd27a,0 0 18px 5px rgba(255,200,100,.7)}
.s-charge .pk-boxobj .pr-box-lid .pr-lid-seam{display:block;top:auto;bottom:77%;height:2px}
.s-crack .pk-boxobj .pr-lid-seam{box-shadow:0 0 8px 3px #fff2c8,0 0 34px 12px rgba(255,200,100,.9)}
.s-crack .pk-boxobj .pr-box-lid{animation:pkLidStrain .1s linear infinite}
@keyframes pkLidStrain{50%{transform:translateY(-3%)}}
.s-burst .pk-boxobj .pr-box-lid{animation:pkLidOff 1s cubic-bezier(.2,.7,.4,1) forwards}
.s-burst .pk-boxobj .pr-box-lid>.pr-bf{animation:pkLidFade 1s ease-in forwards}
@keyframes pkLidOff{0%{transform:none}10%{transform:translate3d(0,-18%,0) rotateX(-8deg)}100%{transform:translate3d(-60%,-380%,0) rotateX(-72deg) rotateZ(-34deg)}}
@keyframes pkLidFade{0%,55%{opacity:1}100%{opacity:0}}
.s-open .pk-boxobj .pr-box-lid{visibility:hidden}
.s-burst .pk-boxobj .pr-box-mouth,.s-open .pk-boxobj .pr-box-mouth{opacity:1}
.s-burst .pk-boxobj .pr-box-mouth{animation:pkMouth 1.3s ease-out}
@keyframes pkMouth{from{filter:brightness(2.4)}}
.s-open .pk-boxobj{filter:drop-shadow(0 0 34px rgba(255,210,122,.5))}
.s-open .pk-glow{scale:1.15}

/* Booster Box results: every card the box gave, face up, ten to a row; rarer cards glow in their tier colour */
.pk-boxgrid{--bc:clamp(64px,min(8.2vw,calc((100vh - 330px) / 5 / 1.4)),120px);position:relative;z-index:2;display:grid;grid-template-columns:repeat(10,var(--bc));gap:10px;
  justify-content:center;max-width:100%;animation:pkFade .4s}
.pk-bcard{position:relative;width:var(--bc);aspect-ratio:5/7;border-radius:8px;animation:pkRise .45s cubic-bezier(.2,.9,.3,1.1) backwards}
.pk-bcard .cf{height:100%}
.pk-bcard:not(.t-common){box-shadow:0 0 0 2px var(--rc),0 0 16px color-mix(in srgb,var(--rc) 70%,transparent)}
.pk-bcard:hover{z-index:3;scale:1.9;transition:scale .18s cubic-bezier(.2,.8,.3,1)}
@media (max-width:760px){.pk-boxgrid{--bc:calc((100vw - 72px) / 5);grid-template-columns:repeat(5,var(--bc));gap:8px}.pk-bcard:hover{scale:1}}
.pk-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:30px}
.pk-empty h2{margin:0;font:700 36px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.pk-empty p{margin:0 0 10px;color:#cfc4ac;max-width:380px}
.pk-pack-ghost{display:grid;place-items:center;width:120px;height:170px;border-radius:10px;border:3px dashed rgba(215,166,83,.45);font-size:44px;color:rgba(251,231,176,.5);margin-bottom:10px}

/* ---------- dealt cards ---------- */
.pk-cap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:26px}
.pk-cap-hint{font:700 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#bfb49a;padding:6px 0}
.pk-rchip,.pk-gchip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font:700 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pk-rchip{color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 70%,transparent);background:color-mix(in srgb,var(--rc) 14%,rgba(0,0,0,.6))}
.pk-rchip--secret{color:#ffe6f6;border-color:transparent;background:linear-gradient(rgba(30,8,28,.85),rgba(30,8,28,.85)) padding-box,linear-gradient(100deg,#ff8ad8,#ffe27a,#8cffb5,#6fd6ff,#b98cff) border-box}
.pk-gchip{color:#1a1106;background:linear-gradient(180deg,#f1f4f7,#aeb8c2)}
.pk-gchip.g10{background:linear-gradient(180deg,#fff2c6,#e0b35e);box-shadow:0 0 12px rgba(255,210,120,.7)}
.pk-gchip.g9{background:linear-gradient(180deg,#e0f3ff,#8cc6ef)}
.pk-gchip.g1,.pk-gchip.g2,.pk-gchip.g3,.pk-gchip.g4,.pk-gchip.g5{background:linear-gradient(180deg,#c9b9a6,#7e6d5b)}
.pk-gchip.is-pending{min-width:24px;justify-content:center;color:#ece8ff;background:linear-gradient(180deg,#4b4470,#2a2545);box-shadow:inset 0 0 0 1px rgba(200,190,255,.45);animation:pkPend 1.8s ease-in-out infinite}
@keyframes pkPend{50%{box-shadow:inset 0 0 0 1px rgba(225,215,255,.95),0 0 12px rgba(160,140,255,.65)}}

/* flip card: inner rotates by half-turns. Even turns show the back face (card back, then the grade slab once revealed). */
.pk-card{position:relative;display:block;width:100%;aspect-ratio:5/7;padding:0;border:0;background:none;cursor:pointer;border-radius:11px;perspective:1100px}
/* --turn is where the card rests; pkSetTurn() animates the turn itself (in two halves, see there). */
.pk-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--turn,0) * 180deg))}
.pk-card:not(.is-revealed) .pk-card-inner{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:11px}
.pk-face--front{transform:rotateY(180deg)}
/* Don't rely on backface culling alone (Firefox and some GPUs paint the turned-away face, mirrored):
   the face turned away is also hidden outright. is-face = odd turn; in the grid pkSetTurn() swaps it at edge-on.
   The spotlight still switches on a timer: its .3s curve is edge-on at ~.06s, under the white flash. */
.pk-card.is-face .pk-face--back,.pk-card:not(.is-face) .pk-face--front{visibility:hidden}
.pk-spot-inner .pk-face{transition:visibility 0s .06s}
.pk-spot.is-open .pk-spot-inner .pk-face--back,.pk-spot:not(.is-open) .pk-spot-inner .pk-face--front{visibility:hidden}
.pk-face--back{container-type:inline-size}
.pk-face--front .cf{height:100%}
.pk-cardback{position:absolute;inset:0;border-radius:11px;background:var(--back);border:3px solid var(--gold2);box-shadow:0 16px 30px rgba(0,0,0,.6)}
.pk-cardback{overflow:hidden}
/* No mix-blend-mode on the backs: inside a backface-hidden 3D face it makes Chrome drop the whole face on some GPUs. */
.pk-cardback::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.24) 46%,rgba(160,210,255,.16) 50%,transparent 60%) 130% 0/300% 100% no-repeat;
  animation:pkBackSheen 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .22s)}
@keyframes pkBackSheen{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}
body.no-motion .pk-cardback::after{animation:none;opacity:0}
.pk-card:not(.is-revealed):hover .pk-card-inner{transform:translateY(-10px) rotateY(12deg)}
.pk-card:not(.is-revealed) .pk-cardback{animation:pkIdle 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .2s)}
@keyframes pkIdle{50%{box-shadow:0 16px 30px rgba(0,0,0,.6),0 0 26px rgba(120,190,255,.45)}}
.pk-card .pk-slab{display:none}
.pk-card.has-slab .pk-slab{display:flex}
.pk-card.has-slab .pk-cardback{display:none}
/* rarity presentation once revealed */
.pk-card.is-revealed.r-common .pk-face--front{box-shadow:0 0 26px rgba(143,208,255,.35)}
.pk-card.is-revealed.r-rare .pk-face--front{box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 70%,transparent),0 0 36px color-mix(in srgb,var(--rc) 50%,transparent)}
/* Epic and better pulse: the brighter glow (--pulse) sits on the face's ::before and only its opacity animates.
   Never animate a face itself. Box-shadow keyframes repaint every frame, and in Firefox a face animation that started
   with its flip (Skip turns every card at once) froze the old timed face swap, leaving the card blank until clicked. */
.pk-card.is-revealed:is(.r-epic,.v-alt) .pk-face--front{box-shadow:0 0 0 2px var(--rc),0 0 44px color-mix(in srgb,var(--rc) 60%,transparent);
  --pulse:0 0 0 2px color-mix(in srgb,var(--rc) 45%,#fff),0 0 80px color-mix(in srgb,var(--rc) 90%,transparent);--pulse-t:2.6s}
.pk-card.is-revealed:is(.r-legendary,.v-secret) .pk-face--front{box-shadow:0 0 0 2px var(--rc),0 0 60px color-mix(in srgb,var(--rc) 80%,transparent);
  --pulse:0 0 0 3px color-mix(in srgb,var(--rc) 40%,#fff),0 0 100px var(--rc);--pulse-t:2.2s}
.pk-card.is-revealed:is(.r-epic,.r-legendary,.v-alt,.v-secret,.v-ultimate,.is-gemtell) .pk-face--front::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:var(--pulse);opacity:0;animation:pkPulse var(--pulse-t) ease-in-out infinite}
@keyframes pkPulse{50%{opacity:1}}
.pk-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.pk-burst::before,.pk-burst::after{content:"";position:absolute;opacity:0;border-radius:50%}
.pk-burst::before{left:-120px;top:-120px;width:240px;height:240px;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(143,208,255,.55) 30%,transparent 68%)}
.pk-burst::after{left:-220px;top:-220px;width:440px;height:440px;background:repeating-conic-gradient(rgba(255,220,150,.55) 0 5deg,transparent 5deg 18deg);mask:radial-gradient(circle,#000 10%,transparent 62%);-webkit-mask:radial-gradient(circle,#000 10%,transparent 62%)}
.pk-card.is-pop .pk-burst::before{animation:pkPop .9s .18s ease-out}
.pk-card.is-pop:is(.r-rare,.r-epic,.r-legendary,.v-alt,.v-secret) .pk-burst::before{background:radial-gradient(circle,#fff,color-mix(in srgb,var(--rc) 85%,transparent) 30%,transparent 68%)}
.pk-card.is-pop:is(.r-epic,.r-legendary,.v-alt,.v-secret) .pk-burst::after{animation:pkRays 1.3s .15s ease-out;background:repeating-conic-gradient(color-mix(in srgb,var(--rc) 70%,transparent) 0 6deg,transparent 6deg 16deg)}
@keyframes pkPop{0%{opacity:0;scale:.2}30%{opacity:1}100%{opacity:0;scale:1.8}}
@keyframes pkRays{0%{opacity:0;scale:.3;rotate:0deg}30%{opacity:1}100%{opacity:0;scale:1.4;rotate:40deg}}

/* grade slab (the card's back after reveal) */
.pk-slab{position:absolute;inset:0;flex-direction:column;gap:3cqw;padding:4cqw;border-radius:11px;overflow:hidden;text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 40%,rgba(255,255,255,.12) 70%,rgba(255,255,255,.03)),linear-gradient(180deg,#26303a,#141a20);
  border:2px solid rgba(214,226,238,.75);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 20px rgba(255,255,255,.08),0 16px 30px rgba(0,0,0,.6)}
.pk-slab::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.18) 48%,transparent 58%)}
.pk-slab-label{display:flex;align-items:stretch;gap:3cqw;padding:3.5cqw 4cqw;border-radius:2.5cqw;background:linear-gradient(180deg,#fbf5e6,#e6dcc4);color:#1b1408;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 6px rgba(0,0,0,.4);border-top:1.5cqw solid var(--rc)}
.pk-slab-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.4cqw}
.pk-slab-id small{font:700 4.4cqw/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#8a5f22}
/* whole name always shown: shrink with length (--nl, set inline), then wrap to a second line */
.pk-slab-id b{font:700 clamp(4.6cqw,calc(84cqw / var(--nl,10)),7.6cqw)/1 var(--cond);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:break-word;text-wrap:balance}
.pk-slab-id i{font:600 4.2cqw/1.1 var(--cond);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#5a4a33}
.pk-slab-grade{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:24cqw;padding-left:3cqw;border-left:1px solid rgba(60,40,10,.25)}
.pk-slab-grade b{font:700 19cqw/.85 var(--cond);color:#1b1408}
.pk-slab-grade small{font:700 3.6cqw/1.05 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#6b5330;max-width:26cqw}
.pk-slab.is-gem .pk-slab-label{background:linear-gradient(180deg,#fff6d8,#f0cf82)}
.pk-slab.is-gem .pk-slab-grade b{background:linear-gradient(180deg,#8a5f22,#3a2408);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-slab-window{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3.2cqw;padding:4cqw 5cqw;border-radius:2.5cqw;
  background:linear-gradient(rgba(6,12,20,.78),rgba(6,12,20,.78)),var(--back);border:1px solid rgba(255,255,255,.18)}
.pk-sub{display:grid;grid-template-columns:34cqw 1fr 12cqw;align-items:center;gap:3cqw}
.pk-sub small{font:700 4.8cqw/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#d8cdb2}
.pk-sub i{height:2.4cqw;border-radius:999px;background:linear-gradient(90deg,var(--gold2),var(--gold1)) 0 0/var(--v) 100% no-repeat,rgba(255,255,255,.12)}
.pk-sub b{font:700 6cqw/1 var(--cond);color:#fff;text-align:right}
.pk-slab-serial{font:600 4cqw/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#b8c4ce;text-align:center}

.pk-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:6px}
.pk-actions-done{display:contents}

/* ---------- shop ---------- */
.pk-shop{display:flex;flex-direction:column;gap:22px;padding:8px 0 20px}
.pk-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,26px)}
.pk-tile{position:relative;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:3px solid transparent;
  background:linear-gradient(180deg,#15120f,#090807) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s}
.pk-tile:hover{transform:translateY(-4px);box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 40px rgba(255,200,110,.25),0 22px 44px rgba(0,0,0,.7)}
.pk-tile-art{--accent:#ffd27a;position:relative;isolation:isolate;height:clamp(250px,24vw,330px);overflow:hidden;display:grid;place-items:center}
/* the product stage: blurred key art, slow light rays and a glow in the product's colour, a shadow on the floor */
.pk-tile-bg{position:absolute;inset:-14px;z-index:-4;background:var(--bg) center 35%/cover no-repeat;filter:blur(3px) brightness(.34) saturate(1.15)}
.pk-tile-rays{position:absolute;left:50%;top:46%;z-index:-3;width:190%;aspect-ratio:1;translate:-50% -50%;opacity:.75;
  background:repeating-conic-gradient(color-mix(in srgb,var(--accent) 16%,transparent) 0 3deg,transparent 3deg 13deg);
  mask:radial-gradient(circle,#000 4%,transparent 52%);-webkit-mask:radial-gradient(circle,#000 4%,transparent 52%);animation:pkSpin 70s linear infinite}
.pk-tile-glow{position:absolute;left:50%;top:48%;z-index:-2;width:115%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;transition:scale .5s,opacity .5s;opacity:.85;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 48%,transparent),color-mix(in srgb,var(--accent) 12%,transparent) 55%,transparent)}
.pk-tile:hover .pk-tile-glow{scale:1.12;opacity:1}
.pk-tile-floor{position:absolute;left:50%;bottom:9%;z-index:-1;width:62%;height:13%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.pk-tile-prod{position:relative;z-index:1;display:grid;place-items:center;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);animation:pkFloat 4.6s ease-in-out infinite}
.pk-tile-prod.is-tilting{transition:transform .08s linear}
.pk-tile-prod:has(.pr-box){transform:none}
.pk-tile--pack .pr-pack{--pw:clamp(118px,10.6vw,152px)}
.pk-tile--bundle .pr-bundle{--pw:clamp(92px,8.2vw,118px)}
.pk-tile--box .pr-box{--bw:clamp(165px,16vw,234px)}
.pk-tile-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#0c0a08)}
.pk-tile-tag{position:absolute;right:10px;top:10px;z-index:2;padding:6px 10px;border-radius:3px;font:700 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#1a1106;background:linear-gradient(180deg,#fbe7b0,#d7a653)}
.pk-tile--box .pk-tile-tag{background:linear-gradient(180deg,#ffc7b0,#e0603c);color:#fff;text-shadow:0 1px 2px #000}
/* painted mini packs fanned inside the tile */
.pk-tile-body{display:flex;flex-direction:column;gap:8px;padding:6px 18px 18px;flex:1}
.pk-tile-body h3{margin:0;font:700 clamp(22px,1.9vw,28px)/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.pk-tile-body p{margin:0 0 8px;color:#cfc4ac;font-size:14px;flex:1}
.pk-btn--buy{justify-content:space-between;width:100%}
.pk-price{display:inline-flex;align-items:center;gap:8px;font-size:22px;color:#ffe7a8}
.pk-price .pk-ico{width:24px;height:24px}
.pk-btn--buy:disabled span:last-child{font-size:13px;color:#ffb0a0}
.pk-stipend{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:8px;background:rgba(0,0,0,.5);border:1px solid rgba(215,166,83,.4)}
.pk-stipend>div{flex:1;display:flex;flex-direction:column;gap:4px}
.pk-stipend b{font:700 18px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.pk-stipend small{color:#cfc4ac}
.pk-stipend.is-claimed{opacity:.75}
.pk-fine{margin:0;font-size:12px;color:#8f8672;text-align:center}

/* confirm dialog */
.pk-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(3,5,7,.72);backdrop-filter:blur(3px);animation:pkFade .2s ease-out}
.pk-modal-card{width:min(420px,100%);display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:8px;border:3px solid transparent;
  background:linear-gradient(180deg,#1a1612,#0a0908) padding-box,var(--frame) border-box;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.pk-modal-card h3{margin:0;font:700 32px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.pk-modal-card p{margin:0;color:#cfc4ac}
.pk-modal-card dl{margin:8px 0;display:grid;gap:8px;padding:12px 14px;border-radius:6px;background:rgba(0,0,0,.45)}
.pk-modal-card dl div{display:flex;justify-content:space-between;align-items:center}
.pk-modal-card dt{font:700 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#a99f88}
.pk-modal-card dd{margin:0;display:flex;align-items:center;gap:8px;font:700 22px/1 var(--cond);color:#ffe7a8}
.pk-modal-card dd .pk-ico{width:22px;height:22px}
.pk-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:6px}
@keyframes pkFade{from{opacity:0}}

/* ---------- motion & layout ---------- */
body.no-motion .pk-card-inner,body.no-motion .pk-face{transition:none}
body.no-motion .pk-core .pk-pack,body.no-motion .pk-core .pk-boxobj,body.no-motion .pk-runes,body.no-motion .pk-shards i,body.no-motion .pk-tile-prod,body.no-motion .pk-tile-rays{animation:none}
@media (prefers-reduced-motion:reduce){
  .pk *,.pk *::before,.pk *::after{animation:none!important;transition:none!important}
}
@media (max-width:760px){
  .pk-show{min-height:0}
  .pk-arena{min-height:360px}
  .pk-grid{--cw:min(200px,calc((100vw - 64px) / 5))}
  .pk-spot{place-items:start center;overflow-y:auto}
  .pk-spot-body{flex-direction:column;gap:18px;padding:56px 16px 96px}
  .pk-spot-card{width:min(210px,52vw,34vh)}
  .pk-spot-info{align-items:center;text-align:center;min-width:0;max-width:92vw}
  .pk-spot-stamp{left:-10%}
  .pk-tabs button{padding:12px 14px;letter-spacing:.1em}
  .pk-wallet{width:100%}.pk-chip{flex:1;min-width:0}
  .pk-kinds{position:relative;align-self:center;flex:none}
}

/* left-rail pack count */
.railnav .rail-badge{right:auto;left:calc(50% + 12px);top:10%;min-width:26px;height:26px;padding:0 5px;border-radius:999px;font-size:14px;color:#fff}
@media (max-width:700px){.railnav .rail-badge{top:2px;min-width:20px;height:20px;font-size:12px}}

/* ---------- holo tilt: revealed cards lean toward the pointer, a glare follows it, rare cards shimmer ---------- */
.pk-gslot{position:relative;perspective:900px}
.pk-gslot:has(.is-tilting){z-index:4}
.pk-card.is-revealed{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.pk-card.is-tilting{transition:transform .08s linear}
.pk-holo,.pk-glare{position:absolute;inset:0;border-radius:11px;pointer-events:none}
/* No rainbow holo: the forged frames carry the shine now, and only the white glare follows the pointer. */
.pk-holo{display:none}
.pk-glare{z-index:9;opacity:0;mix-blend-mode:overlay;transition:opacity .3s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),rgba(255,255,255,.18) 26%,transparent 56%)}
.is-tilting .pk-glare{opacity:1}
.pk-spot.is-open .pk-spot-inner{transform:rotateX(var(--tx,0deg)) rotateY(calc(180deg + var(--ty,0deg)))}
.pk-spot-card.is-tilting .pk-spot-inner{transition:transform .08s linear}
/* an ungraded revealed card offers grading on hover */
.pk-card.is-revealed:not(.is-graded)::before{content:"Grade";position:absolute;left:50%;bottom:-2px;z-index:12;translate:-50% 0;padding:5px 12px;border-radius:999px;opacity:0;pointer-events:none;
  font:700 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#10202a;background:linear-gradient(180deg,#e6fbff,#8fd8f5);box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 16px rgba(120,210,255,.6);transition:opacity .2s,translate .2s}
.pk-show.s-done .pk-card.is-revealed:not(.is-graded):hover::before{opacity:1;translate:-50% -10px}

/* ---------- rare tell: the face-down card trembles and glows before it flips ---------- */
.pk-card.is-tell{animation:pkTell .5s linear}
.pk-card.is-tell .pk-cardback{animation:pkTellGlow .5s ease-in forwards}
@keyframes pkTell{0%,100%{translate:0 0}10%{translate:-2px 1px}20%{translate:3px -1px}30%{translate:-3px 0;scale:1.02}40%{translate:3px 1px}50%{translate:-2px -2px;scale:1.04}60%{translate:3px 1px}70%{translate:-3px 1px;scale:1.06}80%{translate:3px -1px}90%{translate:-2px 1px;scale:1.08}}
@keyframes pkTellGlow{to{filter:brightness(1.35);box-shadow:0 0 0 3px var(--rc),0 0 40px var(--rc),0 0 90px color-mix(in srgb,var(--rc) 60%,transparent),0 16px 30px rgba(0,0,0,.6)}}

/* ---------- grading sweep in the grid: scan line, stamped slab ---------- */
.pk-card.is-scanning .pk-glare,.pk-card.is-gemtell .pk-glare{opacity:1;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 40%,rgba(110,215,255,.28) 47%,rgba(190,245,255,.95) 49.6%,#fff 50%,transparent 50.5%) 0 75%/100% 300% no-repeat}
.pk-card.is-scanning .pk-glare{animation:pkScan .56s cubic-bezier(.45,0,.55,1) forwards}
.pk-card.is-gemtell .pk-glare{background-image:linear-gradient(180deg,transparent 40%,rgba(255,210,122,.3) 47%,#ffe7a8 49.6%,#fff 50%,transparent 50.5%)}
@keyframes pkScan{from{background-position:0 75%}to{background-position:0 25%}}
.pk-card.is-revealed.is-gemtell .pk-face--front{--pulse:0 0 0 3px #ffe7a8,0 0 70px rgba(255,210,122,1),0 0 140px rgba(255,190,90,.6);--pulse-t:.9s}
.pk-card.is-stamp .pk-slab-grade b{animation:pkStampIn .5s .32s cubic-bezier(.2,1.6,.4,1) backwards}
.pk-card.is-stamp .pk-slab::after{animation:pkSlabSheen .8s .3s ease-out}
@keyframes pkStampIn{from{opacity:0;scale:2.8}}
@keyframes pkSlabSheen{from{translate:-110% 0}to{translate:110% 0}}