/* The opening is a presentation of an already committed server result. */
dialog.pack-opening-modal{width:min(680px,calc(100vw - 28px));max-width:680px;background:#0b2029;color:#eff4e8;border:1px solid #72948455;overflow-x:hidden;border-radius:22px;box-shadow:0 28px 100px #0009}
.pack-opening-modal::backdrop{background:#06141be8;backdrop-filter:blur(12px)}
.pack-opening-modal .modal-close{background:#ffffff12;color:#e9f3e6;z-index:12;border:1px solid #ffffff26}
.pack-opening{--scene-accent:var(--pack-accent);position:relative;isolation:isolate;overflow:hidden;min-height:650px;padding:33px 32px 22px;text-align:center;background:radial-gradient(ellipse at 50% 53%,color-mix(in srgb,var(--scene-accent),transparent 88%),transparent 65%),linear-gradient(155deg,#17313a,#091b24 70%);border-radius:21px}
.pack-opening.phase-ready,.pack-opening.phase-revealed{--scene-accent:var(--pull-accent)}
.pack-opening:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,transparent 0 46px,#c8dfd104 47px 48px,transparent 49px 95px);pointer-events:none}
.pack-opening-orbit{position:absolute;inset:21% -35%;border:1px solid #9fceba12;border-radius:50%;transform:rotate(-24deg);pointer-events:none;z-index:-1}
.pack-opening-header{position:relative;z-index:4;min-height:107px;pointer-events:none}
.pack-opening-header .eyebrow{font-size:9px;letter-spacing:.18em;color:#b6cac2;display:block;padding:0 34px}
.pack-opening-status{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--scene-accent);margin:16px 0 10px;border:1px solid color-mix(in srgb,var(--scene-accent),transparent 65%);background:color-mix(in srgb,var(--scene-accent),transparent 94%);padding:5px 12px;border-radius:30px}
.pack-opening-header h2{font-size:30px;line-height:1.15;letter-spacing:-.035em;margin:0;color:#f3f5e9}
.pack-opening-stage{height:365px;position:relative;perspective:1200px;display:grid;place-items:center}
.pack-opening-floor{position:absolute;bottom:-5px;left:5%;right:5%;height:140px;border-radius:50%;transform:rotateX(68deg);background:repeating-radial-gradient(ellipse at center,transparent 0 26px,color-mix(in srgb,var(--scene-accent),transparent 86%) 27px 28px,transparent 29px 56px);box-shadow:inset 0 0 80px #0a1e27;opacity:.7}
.pack-opening-beam{position:absolute;width:210px;height:400px;bottom:0;left:50%;transform:translateX(-50%);background:linear-gradient(0deg,color-mix(in srgb,var(--scene-accent),transparent 60%),transparent 90%);clip-path:polygon(26% 100%,0 0,100% 0,74% 100%);filter:blur(22px);opacity:0;pointer-events:none}
.pack-sealed{width:238px;height:340px;position:relative;z-index:3;border:0;background:transparent;padding:0;cursor:pointer;filter:drop-shadow(0 18px 18px #0006);animation:packHover 3.5s ease-in-out infinite;transform-style:preserve-3d}
.pack-sealed:focus-visible,.pack-card-turner:focus-visible{outline:2px solid #e8f5d6;outline-offset:10px;border-radius:14px}
.pack-shell-piece{display:block;position:absolute;inset:0;backface-visibility:hidden;transform-origin:center}
.pack-shell-piece img{display:block;width:100%;height:100%;object-fit:contain}
.piece-top{clip-path:polygon(0 0,100% 0,100% 21%,0 21%);z-index:3}
.piece-left{clip-path:polygon(0 20.8%,51% 20.8%,53% 35%,48% 54%,52% 73%,49% 100%,0 100%);z-index:2}
.piece-right{clip-path:polygon(50.8% 20.8%,100% 20.8%,100% 100%,48.8% 100%,51.8% 73%,47.8% 54%,52.8% 35%);z-index:1}
.pack-seal-glint{position:absolute;left:18%;right:12%;top:20%;height:1px;background:#edffc0;box-shadow:0 0 13px 2px var(--pack-accent);opacity:.7;pointer-events:none}
.phase-opening .pack-sealed{animation:packCharge .5s ease-in-out both;cursor:default}
.phase-opening .piece-top{animation:packTearTop 1.1s cubic-bezier(.15,.8,.2,1) .45s both}
.phase-opening .piece-left{animation:packTearLeft 1.15s cubic-bezier(.15,.8,.2,1) .5s both}
.phase-opening .piece-right{animation:packTearRight 1.15s cubic-bezier(.15,.8,.2,1) .5s both}
.phase-opening .pack-seal-glint{animation:packSealBreak .9s .3s both}
.phase-opening .pack-opening-beam{animation:packBeam 1.4s .4s both}
.pack-pull-card{position:relative;z-index:2;width:210px;aspect-ratio:2/3;perspective:1100px;transform-style:preserve-3d;filter:drop-shadow(0 12px 16px #0006)}
.phase-sealed .pack-pull-card{position:absolute;opacity:0;visibility:hidden}
.phase-opening .pack-pull-card{position:absolute;animation:packCardEmerge 1.2s .55s both}
.pack-card-turner{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;transform-style:preserve-3d;cursor:pointer;text-align:initial}
.pack-card-turner:disabled{opacity:1;cursor:default}
.pack-card-side{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:15px;overflow:hidden}
.pack-card-reverse{border:2px solid var(--pull-accent);background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--pull-accent),#16343b 85%),#0c222d 75%);box-shadow:inset 0 0 0 7px #0d2630,inset 0 0 0 8px color-mix(in srgb,var(--pull-accent),transparent 60%),0 0 35px color-mix(in srgb,var(--pull-accent),transparent 85%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.pack-card-reverse:before,.pack-card-reverse:after{content:'';position:absolute;inset:14%;border:1px solid color-mix(in srgb,var(--pull-accent),transparent 80%);transform:rotate(45deg);pointer-events:none}
.pack-card-reverse:after{inset:23%;transform:rotate(-45deg)}
.pack-card-reverse img{width:70px;height:70px;position:relative;z-index:1;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--pull-accent),transparent 50%))}
.pack-card-reverse-word{font-size:15px;letter-spacing:.13em;font-weight:800;color:#e9f2e5;z-index:1}
.pack-card-reverse-rarity{font-size:10px;letter-spacing:.18em;color:var(--pull-accent);margin-top:14px;z-index:1}
.pack-card-reverse-tap{position:absolute;bottom:25px;font-size:8px;letter-spacing:.18em;color:#b9cdc3}
.pack-card-reverse-corner{position:absolute;left:17px;top:16px;color:var(--pull-accent);font-size:9px;line-height:1.4;letter-spacing:.14em}
.pack-card-front{transform:none;overflow:visible;border-radius:0;display:grid;place-items:center}
.pack-card-front .kin-card{width:100%;filter:none}
.phase-ready .pack-pull-card{animation:packCardReady .65s cubic-bezier(.15,.8,.2,1) both}
.phase-ready .pack-opening-beam{opacity:.4}
.phase-revealed .pack-card-turner{transform:none;animation:packCardFlip .65s cubic-bezier(.18,.75,.18,1) both}
.phase-revealed .pack-pull-card{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--pull-accent),transparent 70%))}
.phase-revealed .pack-opening-beam{animation:packRevealBeam 1.6s ease-out both}
.pack-opening-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
.pack-opening-particles i{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);border-radius:50%;background:var(--pull-accent);opacity:0;box-shadow:0 0 6px var(--pull-accent)}
.phase-revealed .pack-opening-particles i{animation:packSpark 2s ease-out calc(.35s + var(--delay)) both}
.phase-revealed.pull-legendary .pack-opening-stage:after,.phase-revealed.pull-godlike .pack-opening-stage:after{content:'';position:absolute;inset:17% 20%;border:1px solid var(--pull-accent);border-radius:50%;pointer-events:none;animation:packLegendRing 1.7s .3s both;z-index:0}
.pull-godlike .pack-opening-orbit{box-shadow:0 0 60px #f3b9820a}
.pack-opening-footer{position:relative;z-index:4;min-height:114px;display:flex;flex-direction:column;align-items:center;gap:11px}
.pack-opening-footer .pack-main-action{min-width:196px;color:#132c35;background:var(--scene-accent);border-color:var(--scene-accent);padding:12px 22px;box-shadow:0 4px 20px #0002}
.pack-opening-hint,.pack-result-note{font-size:12px;color:#c1d0c9;line-height:1.55;margin:4px 0 0;max-width:380px}
.pack-opening-hint{min-height:46px;padding-top:12px}
.pack-skip{background:none;color:#b0c6bb;border:0;font-size:11px;padding:2px 14px;text-decoration:underline;text-underline-offset:4px;min-height:24px}
.pack-opening-saved{font-size:9px;letter-spacing:.05em;color:#88aa9a;margin:2px 0 0}
.pack-result-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.pack-result-actions .btn{padding:11px 16px;font-size:11px}
.pack-result-actions .primary{background:var(--pull-accent);border-color:var(--pull-accent);color:#142d35}
.pack-secondary{color:#dde9de;background:#ffffff09;border:1px solid #ffffff30}
.phase-revealed .pack-result-actions,.phase-revealed .pack-result-note{animation:packResultIn .5s .55s both}
.pack-opening.motion-skipped *{animation:none!important;transition:none!important}.motion-skipped .pack-opening-particles,.motion-skipped .pack-opening-beam{display:none}
@keyframes packHover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes packCharge{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-3deg) scale(1.03)}50%{transform:rotate(3deg) scale(1.06)}75%{transform:rotate(-2deg) scale(1.08)}100%{transform:rotate(0) scale(1.08)}}
@keyframes packTearTop{0%{transform:translate(0) rotate(0);opacity:1}100%{transform:translate(40px,-115px) rotate(20deg);opacity:0}}
@keyframes packTearLeft{0%{transform:translate(0) rotate(0);opacity:1}100%{transform:translate(-145px,30px) rotate(-27deg);opacity:0}}
@keyframes packTearRight{0%{transform:translate(0) rotate(0);opacity:1}100%{transform:translate(145px,38px) rotate(27deg);opacity:0}}
@keyframes packSealBreak{0%{opacity:.6;transform:scaleX(1)}45%{opacity:1;transform:scaleX(1.2)}100%{opacity:0;transform:scaleX(1.7)}}
@keyframes packBeam{0%{opacity:0;transform:translateX(-50%) scaleX(.1)}55%{opacity:.8}100%{opacity:.4;transform:translateX(-50%) scaleX(1.4)}}
@keyframes packCardEmerge{0%{opacity:0;transform:translateY(55px) scale(.65) rotateY(-18deg)}65%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1) rotateY(0)}}
@keyframes packCardReady{from{transform:translateY(10px) scale(.96)}to{transform:translateY(0) scale(1)}}
@keyframes packCardFlip{from{transform:rotateY(-90deg)}to{transform:rotateY(0)}}
@keyframes packRevealBeam{0%{opacity:.1;transform:translateX(-50%) scaleX(.7)}45%{opacity:.75;transform:translateX(-50%) scaleX(2)}100%{opacity:.2;transform:translateX(-50%) scaleX(1.5)}}
@keyframes packSpark{0%{opacity:0;transform:rotate(var(--angle)) translateX(35px) scale(0)}20%{opacity:.9}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(.4)}}
@keyframes packLegendRing{0%{opacity:0;transform:scale(.4) rotateX(30deg)}30%{opacity:.6}100%{opacity:0;transform:scale(2.5) rotateX(65deg)}}
@keyframes packResultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){dialog.pack-opening-modal{width:calc(100vw - 20px);border-radius:18px}.pack-opening{min-height:0;padding:29px 16px 18px;border-radius:17px}.pack-opening-header{min-height:106px}.pack-opening-header h2{font-size:25px}.pack-opening-header .eyebrow{font-size:8px;padding:0 26px}.pack-opening-stage{height:335px}.pack-sealed{width:218px;height:312px}.pack-pull-card{width:196px}.pack-opening-footer{min-height:108px}.pack-result-actions{width:100%;gap:8px}.pack-result-actions .btn{flex:1;padding:11px 8px;font-size:10px;white-space:normal}.pack-result-note{font-size:11px;max-width:285px}}
@media(max-height:720px){.pack-opening{padding-top:23px}.pack-opening-header{min-height:91px}.pack-opening-stage{height:295px}.pack-sealed{width:193px;height:276px}.pack-pull-card{width:176px}.pack-opening-footer{min-height:100px}.pack-opening-header h2{font-size:24px}.pack-opening-status{margin-top:11px}}
@media(prefers-reduced-motion:reduce){.pack-opening *,.pack-opening:before{animation:none!important;transition:none!important}.pack-opening-particles,.pack-opening-beam{display:none}.phase-revealed .pack-card-turner{transform:none}}

.pack-art-preload{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.starter-opening-counter{display:block;color:#c5d8cd;font-size:10px;letter-spacing:.16em;margin-top:9px}.pack-opening:has(.starter-opening-counter) .pack-opening-header{min-height:127px}.starter-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.starter-reveal{padding:32px 24px}.starter-reveal>p{font-size:13px;color:var(--muted);line-height:1.6}@media(max-width:520px){.starter-reveal{padding:28px 14px}.starter-card-grid{gap:8px}.pack-opening:has(.starter-opening-counter) .pack-opening-header{min-height:127px}}

.pack-result-actions .pack-repeat{flex:0 0 100%;width:100%;margin-top:2px;white-space:normal;min-height:42px}.pack-result-actions .pack-repeat:disabled{opacity:.45;cursor:not-allowed}