.pack-opening[hidden]{display:none!important}
#reveal.pack-opening{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 43%,#302246 0,#13101ded 53%,#090810fa 100%);overflow-y:auto;display:block;padding:18px;color:#f7f3ff;--opening-glow:#b7a0ff}
.opening-shell{max-width:980px;min-height:calc(100dvh - 36px);margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.opening-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px}.opening-label{font-size:11px;color:#b9b0ca;text-align:left}.opening-close{width:40px;height:40px;border:1px solid #ffffff20;background:#ffffff08;border-radius:50%;color:#eee;font-size:24px}.opening-head{margin:6px 0 0;min-height:98px}.opening-head h2{font:500 clamp(22px,4vw,34px) Outfit,sans-serif;margin:8px 0}.opening-head>p:last-child{font-size:12px;color:#aaa0bc;margin:6px 0}.opening-stage{position:relative;height:min(52dvh,430px);width:100%;display:grid;place-items:center;perspective:1000px;margin:8px 0 12px}.sealed-pack{width:220px;height:330px;position:relative;transform:rotate(-5deg);filter:drop-shadow(0 20px 25px #0009);z-index:4;transition:opacity .25s,transform .6s}.foil-body{position:absolute;inset:28px 0 0;background:linear-gradient(115deg,#2a213d,#51416e 28%,#211a32 49%,#705889 76%,#2a213d);border:1px solid #b99ace77;clip-path:polygon(0 0,100% 0,100% 100%,97% 98%,94% 100%,91% 98%,88% 100%,85% 98%,82% 100%,79% 98%,76% 100%,73% 98%,70% 100%,67% 98%,64% 100%,61% 98%,58% 100%,55% 98%,52% 100%,49% 98%,46% 100%,43% 98%,40% 100%,37% 98%,34% 100%,31% 98%,28% 100%,25% 98%,22% 100%,19% 98%,16% 100%,13% 98%,10% 100%,7% 98%,4% 100%,0 98%);display:flex;align-items:center;flex-direction:column;overflow:hidden}.foil-body:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff2 43%,transparent 66%);transform:translateX(-100%);animation:foil-shine 3s ease-in-out infinite}.foil-lines{position:absolute;inset:9px;border:1px solid #d4bdea55;pointer-events:none}.foil-symbol{font-size:66px;color:#ead3a2;margin:24px 0 12px;text-shadow:0 0 30px #d2a6ff55}.foil-body strong{font:600 31px Outfit,sans-serif;letter-spacing:5px}.foil-body>span:not(.foil-symbol){font-size:9px;letter-spacing:2px;color:#d0bddd;margin:6px 0 19px}.foil-body small{font-size:11px;max-width:175px;line-height:1.5;color:#ead3a2}.foil-bottom{position:absolute;bottom:23px;font-size:8px;letter-spacing:1.5px;color:#b8a3c9}.foil-rip{position:absolute;inset:0 0 auto;height:32px;background:repeating-linear-gradient(90deg,#6b537e 0 2px,#493653 2px 4px);border-top:1px solid #d6bce580;border-bottom:2px dashed #c6add477;z-index:2;transform-origin:100% 100%;display:grid;place-items:center}.foil-rip span{font-size:7px;letter-spacing:3px;color:#e9d6f3}.opening-burst{position:absolute;width:320px;height:320px;background:radial-gradient(circle,#efd7ff77,transparent 65%);opacity:0;transform:scale(.2);pointer-events:none}.opening-fan{position:absolute;inset:0;display:grid;place-items:center;opacity:0}.card-back{position:absolute;width:190px;height:280px;border:2px solid #d5c2f0;border-radius:13px;background:repeating-linear-gradient(45deg,#3a2e50 0 1px,#241c34 1px 12px);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#e6d2b1;box-shadow:0 12px 25px #0008;transform:translateY(70px)scale(.8)}.card-back:after{content:'';position:absolute;inset:9px;border:1px solid #baa4d566;border-radius:6px}.card-back span{font-size:62px}.card-back small{font:500 13px Outfit,sans-serif;letter-spacing:4px;margin-top:12px}.is-tearing .foil-rip{animation:foil-tear 1s cubic-bezier(.25,.7,.15,1) forwards}.is-tearing .sealed-pack{animation:pack-shake .45s ease-in-out}.is-tearing .opening-burst{animation:pack-burst 1.3s .2s ease-out forwards}.is-ready .sealed-pack{opacity:0;transform:translateY(100px)rotate(-12deg);pointer-events:none}.is-ready .opening-fan{opacity:1;transition:opacity .3s}.is-ready .card-back{transform:translateX(var(--fan-x))rotate(var(--fan-angle));transition:transform .65s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--fan-index)*35ms)}.opening-sparks{position:absolute;left:50%;top:50%;pointer-events:none}.opening-sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ead3a2;opacity:0}.is-tearing .opening-sparks i{animation:opening-spark 1.1s calc(.25s + var(--spark-delay)) ease-out forwards}.opening-front{position:relative;z-index:6;width:245px;perspective:1000px}.opening-card{border:1px solid var(--card-glow);border-radius:15px;padding:7px;background:linear-gradient(145deg,#2c263b,#15111e);text-align:left;box-shadow:0 14px 40px #0008,0 0 25px color-mix(in srgb,var(--card-glow) 20%,transparent);overflow:hidden;position:relative}.opening-front .opening-card{animation:opening-flip .65s cubic-bezier(.2,.75,.25,1) both;transform-origin:center;backface-visibility:hidden}.opening-portrait{height:270px;position:relative;border-radius:9px;overflow:hidden;background:#211b2d}.opening-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}.opening-rarity{position:absolute;bottom:0;left:0;right:0;padding:18px 10px 8px;background:linear-gradient(transparent,#0c0918f5);font-size:10px;color:var(--card-glow);text-transform:uppercase;letter-spacing:1.4px}.opening-card-info{padding:10px 6px 6px;display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap}.opening-card-info h3{width:100%;font:500 19px Outfit,sans-serif;margin:0 0 4px}.opening-card-info>span{font-size:9px;color:#a89db7;letter-spacing:.7px}.opening-card.rarity-epic:after,.opening-card.rarity-legendary:after,.opening-card.rarity-mythic:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#fff5 48%,transparent 62%);animation:rare-sheen 1.2s .4s ease-out both}.opening-card.rarity-mythic{box-shadow:0 0 45px #ff8db855,0 15px 40px #0008}.opening-progress{display:flex;gap:7px;justify-content:center;margin:2px 0 19px}.opening-progress span{height:4px;width:25px;border-radius:5px;background:#ffffff1c;transition:background .3s}.opening-progress span.revealed{background:var(--opening-glow)}.opening-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}.opening-actions .button{min-width:205px}.opening-actions .text-button{font-size:12px;color:#c6bad6;padding:12px}.opening-footnote{font-size:10px;color:#82788f;margin:16px 0 10px}.opening-summary .opening-stage{height:auto;min-height:250px;margin:20px 0 25px}.opening-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;width:min(740px,100%)}.opening-summary-grid .opening-portrait{height:180px}.opening-summary-grid .opening-card-info h3{font-size:16px}.opening-summary .opening-head{min-height:80px}
@keyframes foil-shine{0%,30%{transform:translateX(-100%)}75%,100%{transform:translateX(110%)}}@keyframes foil-tear{0%{transform:none}25%{transform:translate(12px,-6px)rotate(6deg)}60%{transform:translate(70px,-70px)rotate(26deg);opacity:1}100%{transform:translate(150px,-150px)rotate(48deg);opacity:0}}@keyframes pack-shake{0%,100%{transform:rotate(-5deg)}25%{transform:rotate(-9deg)translateX(-4px)}55%{transform:rotate(-1deg)translateX(4px)}}@keyframes pack-burst{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2)}}@keyframes opening-spark{0%{opacity:1;transform:translate(0,0)scale(1.6)}100%{opacity:0;transform:translate(var(--sx),var(--sy))scale(.2)}}@keyframes opening-flip{from{transform:rotateY(-100deg)translateY(16px);opacity:0}to{transform:none;opacity:1}}@keyframes rare-sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@media(max-width:600px){#reveal.pack-opening{padding:12px}.opening-shell{min-height:calc(100dvh - 24px)}.opening-head{min-height:100px;margin-top:2px}.opening-stage{height:370px;max-height:51dvh}.sealed-pack{transform:rotate(-5deg)scale(.86)}.opening-front{width:215px}.opening-portrait{height:235px}.opening-card-info h3{font-size:18px}.opening-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.opening-summary-grid .opening-portrait{height:170px}.opening-summary-grid .opening-card-info h3{font-size:14px}.opening-summary .opening-stage{max-height:none}.opening-actions{gap:6px}.opening-label{max-width:75%;font-size:10px}.card-back{width:160px;height:245px}}
@media(max-height:740px)and(min-width:601px){.opening-head{min-height:80px}.opening-stage{height:330px}.sealed-pack{transform:rotate(-5deg)scale(.85)}.opening-front{width:210px}.opening-portrait{height:220px}}
@media(prefers-reduced-motion:reduce){#reveal.pack-opening *,#reveal.pack-opening *:after{animation:none!important;transition:none!important}.is-ready .sealed-pack{display:none}.opening-front .opening-card{transform:none;opacity:1}}