/* The pack-opening stage. Transform and opacity only (cheap on phones); every moving part has a reduced-motion alternative. */
body.has-stage{overflow:hidden}
dialog.stage{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:#070b1c;color:#fff;overflow:hidden}
dialog.stage::backdrop{background:#000}
.stage__bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,#18246b 0%,#0a1034 45%,#050818 100%);transition:background .6s}
dialog.stage[data-rarity="uncommon"] .stage__bg{background:radial-gradient(110% 90% at 50% 40%,#1d3f8f 0%,#0a1440 50%,#050818 100%)}
dialog.stage[data-rarity="rare"] .stage__bg{background:radial-gradient(110% 90% at 50% 38%,#2b3bff 0%,#0d1450 48%,#050818 100%)}
dialog.stage[data-rarity="epic"] .stage__bg{background:radial-gradient(110% 90% at 50% 38%,#6b3fd1 0%,#1d1259 46%,#050818 100%)}
.stage__bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:max(12px,env(safe-area-inset-top)) 16px 8px}
.stage__title{margin:0;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.01em;color:#fff}
.stage__close{color:#fff;background:rgba(255,255,255,.12)}
.stage__body{position:relative;z-index:2;height:100%;display:grid;align-content:center;justify-items:center;gap:var(--s-4);padding:64px 20px 24px;overflow:auto;text-align:center}
.stage a{color:#cfd8ff}.stage .dim,.stage .muted{color:#b7c1e6}
.stage .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.stage__hint{margin:0;font-size:1.05rem;color:#dfe5ff}.stage__fine{font-size:var(--fs-sm);max-width:34ch}
.stage__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}

/* ---------- the pack ---------- */
.pack-wrap{position:relative;perspective:900px;display:grid;place-items:center;width:min(70vw,300px)}
.pack{--rx:0deg;--ry:0deg;--shake:0;position:relative;width:100%;aspect-ratio:3/4.2;border-radius:18px;background:linear-gradient(160deg,#2f3dff,#0b1230 60%);border:2px solid rgba(255,255,255,.35);box-shadow:0 30px 60px -20px #000,inset 0 0 0 6px rgba(255,255,255,.06);transform:rotateX(var(--rx)) rotateY(var(--ry)) translateX(calc(var(--shake)*3px));transform-style:preserve-3d;transition:transform .15s ease-out;overflow:hidden;display:grid;place-items:center}
.pack__foil{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,rgba(190,170,255,.3) 52%,transparent 66%);background-size:250% 100%;background-position:calc(50% + var(--ry)*6) 0;mix-blend-mode:screen;pointer-events:none}
.pack__art{position:relative;width:62%;height:auto;border-radius:12px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.pack__name{position:absolute;left:10px;right:10px;bottom:12px;font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.1;text-shadow:0 2px 6px #000}
.pack__tear{position:absolute;top:0;left:0;right:0;height:14%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 6px,transparent 6px 12px);opacity:.35}
.pack.is-held{animation:pack-hum .12s linear infinite}
@keyframes pack-hum{0%{translate:-1px 0}50%{translate:1px -1px}100%{translate:-1px 1px}}
.pack--tearing{animation:pack-tear 2.2s ease-in both}
@keyframes pack-tear{0%{transform:scale(1)}20%{transform:scale(1.03) rotate(-1.5deg)}40%{transform:scale(1.05) rotate(1.5deg)}60%{transform:scale(1.07) rotate(-2deg)}85%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:scale(1.2);opacity:.4}}
.pack--tearing .pack__tear{animation:tear-open 2.2s ease-in both}
@keyframes tear-open{0%{transform:translateY(0);opacity:.35}70%{opacity:1}100%{transform:translateY(-120%) rotate(-6deg);opacity:0}}
.stage__glow{position:absolute;inset:-30%;background:radial-gradient(closest-side,rgba(180,190,255,.55),transparent);opacity:0;animation:glow-up 2.2s ease-in both;pointer-events:none}
@keyframes glow-up{to{opacity:1;transform:scale(1.3)}}
.stage__hold{position:relative;min-width:200px;overflow:hidden}
.stage__ring{position:absolute;left:0;bottom:0;height:4px;width:var(--p,0%);background:#fff;--p:0%}

/* ---------- reveal ---------- */
.reveal-stage{position:relative;width:min(62vw,260px);aspect-ratio:5/7;display:grid;place-items:center;perspective:900px}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -16px #000;background:#0b1230;display:grid;place-items:center}
.flip__face img{width:100%;height:100%;object-fit:contain}.flip__front{transform:rotateY(180deg)}
.flip.is-flipped{transform:rotateY(180deg)}
.reveal-stage[data-animate="0"] .flip{transition:none}
.reveal-stage__flash,.reveal-stage__rays,.reveal-stage__shock{position:absolute;inset:-40%;pointer-events:none;opacity:0}
.reveal-stage__rays{background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,255,255,.5) 10deg,transparent 14deg 30deg,rgba(255,255,255,.4) 32deg,transparent 36deg 60deg,rgba(255,255,255,.5) 62deg,transparent 66deg 90deg,rgba(255,255,255,.4) 92deg,transparent 96deg 120deg,rgba(255,255,255,.5) 122deg,transparent 126deg 150deg,rgba(255,255,255,.4) 152deg,transparent 156deg 180deg,rgba(255,255,255,.5) 182deg,transparent 186deg 210deg,rgba(255,255,255,.4) 212deg,transparent 216deg 240deg,rgba(255,255,255,.5) 242deg,transparent 246deg 270deg,rgba(255,255,255,.4) 272deg,transparent 276deg 300deg,rgba(255,255,255,.5) 302deg,transparent 306deg 330deg,rgba(255,255,255,.4) 332deg,transparent 336deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.reveal-stage__flash{background:#fff}
.reveal-stage__shock{border-radius:50%;border:3px solid rgba(255,255,255,.8);inset:10%}
.spark{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;--a:0deg;--r:140px;--dl:0ms}
/* common: a quiet flip. uncommon: a soft blue halo. rare: a burst of rays. epic: flash, shockwave, rays and sparks. */
.reveal-stage--uncommon.is-in .reveal-stage__shock{animation:shock 1s .2s ease-out both;border-color:#8fb0ff}
.reveal-stage--rare.is-in .reveal-stage__rays{animation:rays 1.6s .3s ease-out both}
.reveal-stage--rare.is-in .reveal-stage__shock{animation:shock 1s .5s ease-out both;border-color:#8c9bff}
.reveal-stage--epic.is-in .reveal-stage__flash{animation:flash .9s .6s ease-out both}
.reveal-stage--epic.is-in .reveal-stage__rays{animation:rays 2.2s .7s ease-out both}
.reveal-stage--epic.is-in .reveal-stage__shock{animation:shock 1.3s .7s ease-out both;border-color:#d8c9ff}
.reveal-stage--rare.is-in .spark{animation:spark 1.2s ease-out both;animation-delay:calc(.8s + var(--dl))}
.reveal-stage--epic.is-in .spark{animation:spark 1.6s ease-out both;animation-delay:calc(.9s + var(--dl))}
.reveal-stage--epic.is-in .flip__front{box-shadow:0 0 60px 8px rgba(190,160,255,.65),0 24px 50px -16px #000}
.reveal-stage--rare.is-in .flip__front{box-shadow:0 0 44px 4px rgba(90,110,255,.6),0 24px 50px -16px #000}
.reveal-stage--uncommon.is-in .flip__front{box-shadow:0 0 30px 2px rgba(110,150,255,.5),0 24px 50px -16px #000}
@keyframes flash{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
@keyframes rays{0%{opacity:0;transform:scale(.4) rotate(0)}30%{opacity:.9}100%{opacity:0;transform:scale(1.5) rotate(40deg)}}
@keyframes shock{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}
@keyframes spark{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(1)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) scale(.2)}}

/* ---------- result ---------- */
.result{display:grid;gap:var(--s-3);justify-items:center;max-width:46ch;opacity:1}
#result:not(.is-in){opacity:0;transform:translateY(12px)}
#result{transition:opacity .5s,transform .5s}
.result__name{margin:0;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.1;color:#fff}
.result__rarity{display:inline-block;padding:4px 14px;border-radius:999px;font-weight:700;font-size:var(--fs-sm);background:#fff;color:#0b1230}
.result__rarity--uncommon{background:#bcd0ff}.result__rarity--rare{background:#8c9bff}.result__rarity--epic{background:#e0d4ff}
.result__value strong{font-family:var(--display);font-size:1.9rem}
.bb{display:grid;gap:8px;padding:var(--s-3);border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.06)}
.stage .progress-steps{text-align:left;color:#fff}.stage .state{color:#fff}.stage .state h3{color:#fff}
@media (max-width:640px){.pack-wrap{width:min(62vw,260px)}.result__name{font-size:1.35rem}}
@media (prefers-reduced-motion:reduce){
  .pack,.pack.is-held,.pack--tearing,.pack--tearing .pack__tear,.stage__glow{animation:none!important;transition:none}
  .flip{transition:none}.reveal-stage__flash,.reveal-stage__rays,.reveal-stage__shock,.spark{display:none}
  #result{transition:none}
}