/* Pack opening: 3D carousel reel + spinning sunburst landing + Best pull */

.open-stage{
  margin-top:36px;position:relative;
  background:radial-gradient(ellipse at 50% 28%,rgba(105,170,193,.08),transparent 55%),#0b161a;
  border:1px solid var(--line2);border-radius:18px;padding:20px 14px 28px;
  min-height:640px;overflow:hidden;perspective:1600px;
}
.open-stage[hidden]{display:none!important}
.open-stage .arena{
  position:relative;min-height:420px;height:auto!important;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  z-index:2;padding-top:12px;
}
.open-stage .hint{color:var(--muted);font-size:14px;margin:14px 0 0;min-height:1.2em;text-align:center}
.open-stage .floor{display:none}

.open-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
#skipOpen{display:none}
.open-stage.spinning #skipOpen{display:inline-flex}
#againBtn[hidden]{display:none!important}

/* --- sealed pack in arena --- */
#ripWrap{transition:opacity .4s,transform .5s}
#ripWrap.gone{opacity:0;transform:translateY(40px) scale(.9);pointer-events:none;position:absolute}

/* foil shards */
.shards{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.shard{
  position:absolute;width:10px;height:18px;border-radius:2px;
  background:linear-gradient(135deg,#F3F8F8,#69AAC1,#A4C5CF);
  opacity:0;box-shadow:0 0 8px rgba(164,197,207,.5);
}

/* --- CAROUSEL REEL --- */
.reel-wrap{
  position:relative;width:100%;max-width:920px;margin:0 auto;
  height:380px;perspective:1200px;display:none;
}
.reel-wrap.on{display:block}
.reel-marker{
  position:absolute;left:50%;top:10px;bottom:10px;width:2px;
  transform:translateX(-50%);z-index:6;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent2),transparent);
  box-shadow:0 0 18px rgba(164,197,207,.55);
}
.reel-marker::before,.reel-marker::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;
}
.reel-marker::before{top:0;border-top:10px solid var(--accent2)}
.reel-marker::after{bottom:0;border-bottom:10px solid var(--accent2)}

.reel{
  position:absolute;inset:20px 0 30px;transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
}
.reel-track{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  will-change:transform;
}

.rcard{
  --tc:#69AAC1;
  position:absolute;left:50%;top:50%;
  width:min(168px,38vw);aspect-ratio:63/88;
  margin-left:calc(min(168px,38vw) / -2);margin-top:calc(min(168px,38vw) * 88/63 / -2);
  transform-style:preserve-3d;
  transform: translate3d(var(--x,0px), var(--y,0px), var(--z,0px))
             rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,0.82));
  opacity:var(--op,0.45); filter:saturate(var(--sat,0.75));
  transition: filter .2s, box-shadow .2s;
  z-index:var(--zi,1);
  pointer-events:none;
}
.rcard.center{
  --op:1; --sc:1.05; --sat:1; --zi:10;
  pointer-events:auto;
  filter:saturate(1) drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.rcard.pop{
  animation:rcard-pop .55s cubic-bezier(.2,1.2,.3,1) forwards;
}
@keyframes rcard-pop{
  0%{transform:translate3d(0,0,40px) rotateY(0) scale(1.05)}
  60%{transform:translate3d(0,-18px,120px) rotateY(0) scale(1.18)}
  100%{transform:translate3d(0,-8px,90px) rotateY(0) scale(1.12)}
}

/* collectible card face */
.ccard{
  --rx:0deg;--ry:0deg;
  width:100%;height:100%;border-radius:14px;position:relative;overflow:hidden;
  background:#0a1014;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--frame,#d4af37) 85%, #fff),
    0 0 0 5px color-mix(in srgb, var(--frame,#d4af37) 40%, #000),
    0 16px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform-style:preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .12s ease-out;
}
.ccard .foil-glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.35;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,40%), rgba(255,255,255,.45), transparent 42%);
}
.ccard .sunburst{
  position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg 8deg, var(--ray,rgba(232,160,60,.55)) 8deg 14deg,
    transparent 14deg 22deg, var(--ray,rgba(232,160,60,.35)) 22deg 26deg,
    transparent 26deg 34deg, var(--ray,rgba(255,220,140,.45)) 34deg 40deg,
    transparent 40deg 48deg, var(--ray,rgba(232,160,60,.5)) 48deg 54deg,
    transparent 54deg 62deg, var(--ray,rgba(255,200,100,.3)) 62deg 68deg,
    transparent 68deg 76deg, var(--ray,rgba(232,160,60,.55)) 76deg 82deg,
    transparent 82deg 90deg, var(--ray,rgba(255,220,140,.4)) 90deg 96deg,
    transparent 96deg 104deg, var(--ray,rgba(232,160,60,.45)) 104deg 110deg,
    transparent 110deg 118deg, var(--ray,rgba(255,200,100,.35)) 118deg 124deg,
    transparent 124deg 132deg, var(--ray,rgba(232,160,60,.5)) 132deg 138deg,
    transparent 138deg 146deg, var(--ray,rgba(255,220,140,.4)) 146deg 152deg,
    transparent 152deg 160deg, var(--ray,rgba(232,160,60,.45)) 160deg 166deg,
    transparent 166deg 174deg, var(--ray,rgba(255,200,100,.3)) 174deg 180deg,
    transparent 180deg 188deg, var(--ray,rgba(232,160,60,.55)) 188deg 194deg,
    transparent 194deg 202deg, var(--ray,rgba(255,220,140,.35)) 202deg 208deg,
    transparent 208deg 216deg, var(--ray,rgba(232,160,60,.5)) 216deg 222deg,
    transparent 222deg 230deg, var(--ray,rgba(255,200,100,.35)) 230deg 236deg,
    transparent 236deg 244deg, var(--ray,rgba(232,160,60,.45)) 244deg 250deg,
    transparent 250deg 258deg, var(--ray,rgba(255,220,140,.4)) 258deg 264deg,
    transparent 264deg 272deg, var(--ray,rgba(232,160,60,.5)) 272deg 278deg,
    transparent 278deg 286deg, var(--ray,rgba(255,200,100,.3)) 286deg 292deg,
    transparent 292deg 300deg, var(--ray,rgba(232,160,60,.55)) 300deg 306deg,
    transparent 306deg 314deg, var(--ray,rgba(255,220,140,.35)) 314deg 320deg,
    transparent 320deg 328deg, var(--ray,rgba(232,160,60,.45)) 328deg 334deg,
    transparent 334deg 342deg, var(--ray,rgba(255,200,100,.4)) 342deg 348deg,
    transparent 348deg 360deg);
  animation:sun-spin 8s linear infinite;
  opacity:.85;
  mask-image:radial-gradient(circle at 50% 42%, #000 0%, #000 28%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, #000 28%, transparent 72%);
}
.ccard .orb{
  position:absolute;left:50%;top:38%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:1;
  background:radial-gradient(circle at 40% 35%, #fff 0%, var(--orb,#f5d089) 28%, transparent 70%);
  box-shadow:0 0 40px color-mix(in srgb, var(--orb,#f5d089) 55%, transparent);
  animation:orb-pulse 2.4s ease-in-out infinite;
}
.ccard .orb::after{
  content:"";position:absolute;inset:-35%;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 12deg, color-mix(in srgb,var(--ray,rgba(232,160,60,.7)) 80%, transparent) 12deg 16deg, transparent 16deg 28deg);
  animation:sun-spin 6s linear infinite reverse;
  opacity:.7;pointer-events:none;
}
.ccard .sil{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:48%;height:42%;z-index:2;opacity:.92;
  background:var(--sil) center/contain no-repeat;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));
}
.ccard .sparkles{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 60%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 80% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 25% 70%, #fff 50%, transparent 51%);
  animation:spark-drift 3.5s ease-in-out infinite alternate;
  opacity:.75;mix-blend-mode:screen;
}
.ccard .serial{
  position:absolute;top:10px;left:12px;z-index:4;
  font:700 9px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.ccard .gem{
  position:absolute;top:8px;right:10px;z-index:4;
  width:22px;height:22px;
  background:linear-gradient(145deg,#fff,var(--gem,#e8c36a) 40%, color-mix(in srgb,var(--gem,#e8c36a) 50%,#000));
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  box-shadow:0 0 10px color-mix(in srgb,var(--gem,#e8c36a) 60%, transparent);
  display:grid;place-items:center;
  font:800 8px var(--mono);color:#071013;
}
.ccard .plate{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:4;
  padding:10px 12px 8px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(7,16,19,.55));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.ccard .plate .nm{font:800 13px/1.15 var(--font);color:#F3F8F8;letter-spacing:-.02em}
.ccard .plate .meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;
  font:700 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(243,248,248,.7)}
.ccard .plate .meta b{color:#F3F8F8;font-size:11px;letter-spacing:0}

@keyframes sun-spin{to{transform:rotate(1turn)}}
@keyframes orb-pulse{50%{transform:translate(-50%,-50%) scale(1.06);opacity:.95}}
@keyframes spark-drift{to{transform:translateY(-6px);opacity:.95}}

/* landing burst overlay behind centre card */
.land-burst{
  position:absolute;left:50%;top:50%;width:min(520px,90vw);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:4;
  background:conic-gradient(from 0deg,
    transparent 0 10deg, var(--burst,rgba(232,160,60,.7)) 10deg 14deg,
    transparent 14deg 28deg, var(--burst,rgba(255,220,140,.55)) 28deg 32deg,
    transparent 32deg 46deg, var(--burst,rgba(232,160,60,.65)) 46deg 50deg,
    transparent 50deg 64deg, var(--burst,rgba(255,200,100,.5)) 64deg 68deg,
    transparent 68deg 82deg, var(--burst,rgba(232,160,60,.7)) 82deg 86deg,
    transparent 86deg 100deg, var(--burst,rgba(255,220,140,.5)) 100deg 104deg,
    transparent 104deg 118deg, var(--burst,rgba(232,160,60,.6)) 118deg 122deg,
    transparent 122deg 136deg, var(--burst,rgba(255,200,100,.55)) 136deg 140deg,
    transparent 140deg 154deg, var(--burst,rgba(232,160,60,.7)) 154deg 158deg,
    transparent 158deg 172deg, var(--burst,rgba(255,220,140,.45)) 172deg 176deg,
    transparent 176deg 190deg, var(--burst,rgba(232,160,60,.65)) 190deg 194deg,
    transparent 194deg 208deg, var(--burst,rgba(255,200,100,.5)) 208deg 212deg,
    transparent 212deg 226deg, var(--burst,rgba(232,160,60,.7)) 226deg 230deg,
    transparent 230deg 244deg, var(--burst,rgba(255,220,140,.5)) 244deg 248deg,
    transparent 248deg 262deg, var(--burst,rgba(232,160,60,.6)) 262deg 266deg,
    transparent 266deg 280deg, var(--burst,rgba(255,200,100,.55)) 280deg 284deg,
    transparent 284deg 298deg, var(--burst,rgba(232,160,60,.7)) 298deg 302deg,
    transparent 302deg 316deg, var(--burst,rgba(255,220,140,.45)) 316deg 320deg,
    transparent 320deg 334deg, var(--burst,rgba(232,160,60,.65)) 334deg 338deg,
    transparent 338deg 352deg, var(--burst,rgba(255,200,100,.5)) 352deg 356deg,
    transparent 356deg 360deg);
  mask-image:radial-gradient(circle, #000 0%, #000 18%, transparent 62%);
  -webkit-mask-image:radial-gradient(circle, #000 0%, #000 18%, transparent 62%);
  animation:none;
}
.land-burst.on{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  animation:sun-spin 4s linear infinite, burst-in .55s ease-out;
  filter:drop-shadow(0 0 40px var(--burst,rgba(232,160,60,.6)));
}
@keyframes burst-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.screen-glow{
  position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(ellipse at 50% 45%, var(--glow,rgba(232,160,60,.28)), transparent 55%);
  transition:opacity .4s;
}
.screen-glow.on{opacity:1}

/* rarity themes */
.r-common{--tc:#8AA4AE;--frame:#8AA4AE;--ray:rgba(138,164,174,.55);--orb:#c5d4da;--gem:#8AA4AE;--burst:rgba(138,164,174,.65);--glow:rgba(138,164,174,.22)}
.r-rare{--tc:#5B9BD5;--frame:#6eb0e8;--ray:rgba(91,155,213,.65);--orb:#9fd0ff;--gem:#5B9BD5;--burst:rgba(91,155,213,.7);--glow:rgba(91,155,213,.28)}
.r-epic{--tc:#E8A03C;--frame:#e8c36a;--ray:rgba(232,160,60,.7);--orb:#f5d089;--gem:#E8C36A;--burst:rgba(232,160,60,.75);--glow:rgba(232,160,60,.32)}
.r-legendary{--tc:#E8C36A;--frame:#f0d78c;--ray:rgba(255,214,120,.75);--orb:#ffe6a8;--gem:#F5D76E;--burst:rgba(255,214,120,.8);--glow:rgba(255,214,120,.35)}
.r-mythic{--tc:#FB7185;--frame:#fb8a9a;--ray:rgba(251,113,133,.7);--orb:#ffb3be;--gem:#FB7185;--burst:rgba(251,113,133,.75);--glow:rgba(251,113,133,.32)}

/* --- Best pull panel --- */
.best-pull{
  display:none;margin:22px auto 0;max-width:860px;
  grid-template-columns:220px 1fr;gap:28px;align-items:center;
  padding:18px;background:rgba(7,16,19,.65);border:1px solid var(--line);
  border-radius:16px;position:relative;overflow:hidden;
}
.best-pull.on{display:grid}
.best-pull .bp-card{position:relative;width:200px;aspect-ratio:63/88;margin:0 auto;z-index:2}
.best-pull .bp-card .sunburst{animation-duration:10s;opacity:.9}
.best-pull .bp-rays{
  position:absolute;left:100px;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;
  z-index:0;pointer-events:none;opacity:.55;
  background:conic-gradient(from 0deg, transparent 0 12deg, var(--burst,rgba(232,160,60,.5)) 12deg 16deg, transparent 16deg 28deg);
  animation:sun-spin 12s linear infinite;
  mask-image:radial-gradient(circle,#000 10%,transparent 65%);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 65%);
}
.best-pull h3{margin:0 0 6px;font-size:28px;letter-spacing:-.03em}
.best-pull .bp-sub{color:var(--muted);margin:0 0 14px;font-size:14px}
.best-pull .bp-table{
  background:#050c0e;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font:500 12px var(--mono);color:var(--dim);
}
.best-pull .bp-table div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:5px 0;border-top:1px solid rgba(28,54,64,.6)}
.best-pull .bp-table div:first-child{border-top:0}
.best-pull .bp-table b{color:var(--text);font-weight:600;word-break:break-all}
.best-pull .bp-verify{display:inline-block;margin-top:14px;color:var(--up);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.best-pull .bp-verify:hover{color:#5ee9b5}

@media(max-width:720px){
  .best-pull{grid-template-columns:1fr;justify-items:center;text-align:center}
  .best-pull .bp-table div{grid-template-columns:1fr;text-align:left}
  .reel-wrap{height:340px}
  .open-stage{min-height:560px}
}

@media(prefers-reduced-motion:reduce){
  .ccard .sunburst,.ccard .orb,.ccard .orb::after,.ccard .sparkles,
  .land-burst.on,.best-pull .bp-rays{animation:none!important}
  .rcard.pop{animation:none}
}