.pack-opening{position:relative;display:grid;width:100%;height:100%;min-height:100dvh;overflow:hidden;place-items:center;color:#fff;background:rgba(1,5,18,.96);font-family:"Baloo 2",system-ui,sans-serif}
.pack-opening__ambient{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 45%,rgba(48,133,224,.25),transparent 27%),radial-gradient(circle at 50% 55%,rgba(255,190,55,.13),transparent 42%);animation:packAmbient 3s ease-in-out infinite alternate;pointer-events:none}
.pack-opening__intro{position:relative;z-index:2;display:grid;width:100%;height:100%;padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));place-items:center;align-content:center;text-align:center}
.pack-opening__intro[hidden],.pack-opening__results[hidden],.pack-opening__continue[hidden]{display:none}
.pack-opening__eyebrow,.pack-opening__results header small{color:#67d9ff;font-size:clamp(.55rem,2vw,.72rem);font-weight:800;letter-spacing:.15em}
.pack-opening__intro h1,.pack-opening__results h1{margin:3px 0 10px;font-size:clamp(1.15rem,5vw,1.8rem);line-height:1;text-shadow:0 3px 8px #000}
.pack-opening__pack{position:relative;display:grid;width:min(66vw,330px);margin-top:clamp(8px,2dvh,20px);padding:0;place-items:center;border:0;color:#fff;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:packIdle 1.8s ease-in-out infinite}
.pack-opening__pack:focus,.pack-opening__pack:focus-visible{outline:none}
.pack-opening__pack img{position:relative;z-index:2;display:block;width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.62))}
.pack-opening__hint{position:absolute;z-index:4;right:16px;bottom:max(22px,env(safe-area-inset-bottom));left:16px;color:#fff;font-size:clamp(.68rem,2.7vw,.9rem);letter-spacing:.08em;text-align:center;text-shadow:0 2px 7px #000;pointer-events:none}
.pack-opening__rays{position:absolute;z-index:1;inset:-12%;border-radius:38%;opacity:.46;background:radial-gradient(circle at 50% 50%,rgba(255,231,137,.2) 0 9%,transparent 36%),repeating-conic-gradient(from -4deg at 50% 50%,rgba(255,224,116,.18) 0deg 6deg,rgba(255,196,55,.06) 6deg 7deg,transparent 7deg 17deg);animation:packRaysAmbient 3.4s ease-in-out infinite alternate;pointer-events:none}
.pack-opening[data-pack-state="opening"] .pack-opening__pack{animation:packOpen 1.05s cubic-bezier(.45,0,.2,1) forwards}
.pack-opening[data-pack-state="opening"] .pack-opening__rays{animation:packRaysOpen 1.05s cubic-bezier(.22,.7,.22,1) forwards}
.pack-opening[data-pack-state="revealing"] .pack-opening__rays,.pack-opening[data-pack-state="complete"] .pack-opening__rays{opacity:.34;animation:packRaysAmbient 3.4s ease-in-out infinite alternate}
.pack-opening__results{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(100%,720px);min-height:100dvh;height:auto;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.pack-opening__results header{flex:none;text-align:center}.pack-opening__results header p{min-height:18px;margin:0;color:#f5cb59;font-size:clamp(.55rem,2vw,.7rem);font-weight:800;letter-spacing:.07em}
.pack-opening__cards{display:grid;flex:none;width:100%;min-height:0;margin-top:clamp(7px,1.5dvh,14px);grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:clamp(7px,1.6vw,13px);perspective:1000px}
.pack-opening[data-pack-kind="standard"] .pack-opening__cards{grid-template-columns:minmax(0,min(58vw,280px));justify-content:center}
.pack-card{position:relative;width:100%;aspect-ratio:650/1001;opacity:.13;filter:brightness(.25) saturate(.25);transform:scale(.78) rotateY(82deg);transition:opacity .45s ease,filter .55s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.pack-card::before{content:"";position:absolute;z-index:0;inset:-18%;border-radius:50%;opacity:0;pointer-events:none}
.pack-card::after{content:"?";position:absolute;z-index:5;inset:35% 33% auto;display:grid;aspect-ratio:1;place-items:center;border:2px solid rgba(255,218,107,.7);border-radius:50%;color:#ffd967;background:#10213e;box-shadow:0 0 22px rgba(255,205,67,.18);font-size:clamp(1rem,6vw,2.2rem);font-weight:800;transition:opacity .2s}
.pack-card.is-revealed{opacity:1;filter:none;transform:scale(1) rotateY(0);animation:cardRevealGlow .8s ease-out}.pack-card.is-revealed::after{opacity:0}
.pack-card.rarity-gold.is-revealed{animation:cardRevealGold 1.15s cubic-bezier(.18,.78,.2,1)}
.pack-card.rarity-gold.is-revealed::before{background:repeating-conic-gradient(from 0deg,rgba(255,242,151,.95) 0 5deg,rgba(255,177,26,.15) 5deg 14deg,transparent 14deg 25deg);animation:cardGoldBurst 1.15s ease-out}
.pack-card.rarity-legend.is-revealed{animation:cardRevealLegend 1.6s cubic-bezier(.16,.82,.18,1)}
.pack-card.rarity-legend.is-revealed::before{inset:-28%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 4%,rgba(61,220,255,.78) 5% 15%,rgba(122,67,255,.48) 20% 35%,transparent 62%),repeating-conic-gradient(from 8deg,rgba(255,220,83,.9) 0 4deg,rgba(45,218,255,.32) 4deg 10deg,transparent 10deg 22deg);animation:cardLegendBurst 1.6s ease-out}
.pack-card.rarity-legend.is-revealed .pack-card__body{animation:cardLegendBody 1.8s ease-out}
.pack-card__body{position:absolute;inset:0;filter:drop-shadow(0 8px 9px rgba(0,0,0,.52))}
.pack-card__background{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:contain}
.pack-card__character{position:absolute;z-index:1;top:10%;left:7%;width:86%;height:67%;object-fit:contain;object-position:center bottom}
.pack-card__frame{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain}
.pack-card__specialty,.pack-card__score,.pack-card__name{position:absolute;z-index:3;display:grid;place-items:center;color:#fff7e6;text-shadow:none;-webkit-font-smoothing:antialiased}
.pack-card__specialty{top:18.5%;left:10%;width:18.5%;aspect-ratio:1;border-radius:100%;background-color:var(--specialty-color,#d83a3a);box-shadow:inset 0 2px rgba(255,255,255,.24),0 2px 5px rgba(0,0,0,.32);font-size:clamp(.55rem,3.1vw,1.1rem)}
.pack-card__score{top:17.5%;right:8.5%;width:22%;aspect-ratio:1;font-size:clamp(.65rem,3.7vw,1.3rem)}
.pack-card__name{right:12%;bottom:21%;left:12%;height:10%;overflow:hidden;color:#111722;font-size:clamp(.52rem,2.65vw,.95rem);line-height:1;text-overflow:ellipsis;text-shadow:none;text-transform:uppercase;white-space:nowrap}
.pack-opening[data-pack-kind="standard"] .pack-card__specialty{font-size:clamp(.82rem,4.5vw,1.35rem)}
.pack-opening[data-pack-kind="standard"] .pack-card__score{font-size:clamp(1rem,5.5vw,1.65rem)}
.pack-opening[data-pack-kind="standard"] .pack-card__name{font-size:clamp(.72rem,3.8vw,1.15rem)}
.pack-card.rarity-legend .pack-card__name,.pack-card[data-rarity="legend"] .pack-card__name{color:#fff}
.pack-opening__continue{flex:none;width:100%;min-height:48px;margin-top:8px;border:2px solid #ffe690;border-radius:13px;color:#402707;background:linear-gradient(#ffdc67,#eca51c);box-shadow:inset 0 2px rgba(255,255,255,.35),0 4px 0 #86500b;font:800 .85rem/1 "Baloo 2",sans-serif;cursor:pointer}
.pack-opening__continue[hidden]{display:block;visibility:hidden;opacity:0;pointer-events:none}.pack-opening__continue:not([hidden]){visibility:visible;opacity:1;transition:opacity .28s ease}
.pack-opening__continue:active{transform:translateY(3px);box-shadow:inset 0 2px rgba(255,255,255,.25),0 1px 0 #86500b}
@keyframes packIdle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes packRaysAmbient{to{opacity:.58}}@keyframes packRaysOpen{0%{opacity:.46}58%{opacity:.9}100%{opacity:0}}@keyframes packAmbient{to{opacity:.75}}@keyframes packOpen{0%{transform:scale(1)}22%{transform:scale(1.06) rotate(-3deg)}40%{transform:scale(1.07) rotate(3deg)}58%{transform:scale(1.08) rotate(-2deg)}72%{transform:scale(1.12)}100%{opacity:0;transform:scale(1.75)}}@keyframes cardRevealGlow{0%{filter:brightness(2.2) drop-shadow(0 0 25px #ffd65a)}100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}}
@keyframes cardRevealGold{0%{opacity:.15;filter:brightness(.2);transform:scale(.62) rotateY(105deg)}38%{opacity:1;filter:brightness(3.4) saturate(1.6);transform:scale(1.13) rotateY(-8deg)}62%{filter:brightness(1.45) drop-shadow(0 0 28px #ffc52f);transform:scale(.97) rotateY(3deg)}100%{filter:none;transform:scale(1) rotateY(0)}}
@keyframes cardGoldBurst{0%{opacity:0;transform:scale(.2) rotate(-25deg)}34%{opacity:1}100%{opacity:0;transform:scale(1.45) rotate(32deg)}}
@keyframes cardRevealLegend{0%{opacity:0;filter:brightness(.1) saturate(2);transform:scale(.42) rotateY(160deg) rotateZ(-5deg)}24%{opacity:.75;filter:brightness(1.2) saturate(2);transform:scale(.72) rotateY(70deg) rotateZ(3deg)}48%{opacity:1;filter:brightness(4.2) saturate(1.7);transform:scale(1.2) rotateY(-10deg) rotateZ(-1deg)}70%{filter:brightness(1.7) drop-shadow(0 0 36px #55dcff);transform:scale(.96) rotateY(4deg)}86%{transform:scale(1.04) rotateY(-2deg)}100%{filter:none;transform:scale(1) rotateY(0) rotateZ(0)}}
@keyframes cardLegendBurst{0%{opacity:0;transform:scale(.05) rotate(-60deg)}32%{opacity:.35}50%{opacity:1}100%{opacity:0;transform:scale(1.65) rotate(65deg)}}
@keyframes cardLegendBody{0%,42%{filter:drop-shadow(0 8px 9px rgba(0,0,0,.52))}52%{filter:drop-shadow(0 0 24px #fff) drop-shadow(0 0 36px #42cfff)}100%{filter:drop-shadow(0 8px 9px rgba(0,0,0,.52))}}
@media(max-height:660px){.pack-opening__results{padding-top:7px}.pack-opening__results h1{font-size:1rem;margin-bottom:3px}.pack-opening__cards{gap:6px;margin-top:4px}.pack-opening__continue{min-height:40px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.pack-opening__pack,.pack-opening__rays,.pack-opening__ambient,.pack-card,.pack-card::before,.pack-card__body{animation:none!important}.pack-card{transition-duration:.01ms}}

/* Cartas y acción forman un conjunto centrado, sin empujar el botón al pie. */
.pack-opening[data-pack-state="revealing"],.pack-opening[data-pack-state="complete"]{overflow-y:auto;align-items:safe center}
.pack-opening[data-pack-kind="standard"] .pack-opening__cards,
.pack-opening[data-pack-kind="standard"] .pack-opening__continue{width:min(100%,58vw,280px)}