body.opening-active{overflow:hidden}
#opening-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:#f2f0e9;background:#111216;overflow-y:auto;overscroll-behavior:contain}
#opening-dialog::backdrop{background:#08090c}
.opening-room{--hit-color:#f47738;position:relative;isolation:isolate;min-height:100%;display:flex;align-items:center;flex-direction:column;padding:27px 5% 35px;background:radial-gradient(ellipse at 50% 48%,#30231f 0,#17171d 40%,#101115 75%);overflow:hidden}
.opening-grain{position:absolute;inset:0;filter:url(#noise);opacity:.08;z-index:-1;pointer-events:none}
.opening-top{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:48px;z-index:5}
#opening-edition{font-size:9px;letter-spacing:2px;color:#aaa3a4;margin-left:-70px}
.opening-close{color:#e3dedc;background:#25242a;border:1px solid #ffffff20;font-size:30px;width:42px;height:42px;line-height:1;clip-path:polygon(5% 0,100% 4%,96% 100%,0 96%)}
.opening-heading{text-align:center;margin-top:22px;z-index:4}
.opening-heading .eyebrow{font-size:8px;letter-spacing:2.3px;color:#b7a79e}
.opening-heading h2{font:51px/1.13 Anton;margin:12px 0 10px;letter-spacing:.4px}
#opening-progress{font-size:12px;color:#93909c;margin:0;min-height:20px}
.opening-stage{position:relative;width:min(650px,100%);height:365px;flex-shrink:0;margin:10px auto 0;perspective:1200px;isolation:isolate}
.opening-glow{position:absolute;inset:0 8%;background:radial-gradient(ellipse,color-mix(in srgb,var(--hit-color) 45%,transparent),transparent 65%);filter:blur(20px);opacity:.1;transition:opacity 1.2s,transform 1.2s;transform:scale(.6);z-index:-1}
.opening-rays{position:absolute;inset:-40% -10%;background:repeating-conic-gradient(from 14deg,transparent 0 20deg,color-mix(in srgb,var(--hit-color) 10%,transparent) 22deg 24deg,transparent 26deg 40deg);mask-image:radial-gradient(ellipse,#000,transparent 67%);opacity:0;transition:opacity 1.2s;pointer-events:none;z-index:-1}
.opening-wrapper{position:absolute;width:244px;height:342px;top:12px;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:3;filter:drop-shadow(0 20px 20px #0008)}
.opening-wrapper img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform,opacity;transition:transform .95s cubic-bezier(.2,.7,.2,1),opacity .85s ease}
.wrapper-top{clip-path:polygon(0 0,100% 0,100% 24%,86% 23%,74% 25%,62% 23%,50% 25%,38% 23%,26% 25%,12% 23%,0 25%);transform-origin:90% 24%}
.wrapper-bottom{clip-path:polygon(0 25%,12% 23%,26% 25%,38% 23%,50% 25%,62% 23%,74% 25%,86% 23%,100% 24%,100% 100%,0 100%)}
.tear-line{position:absolute;top:24%;left:5%;width:90%;height:2px;background:#ffe3c6;box-shadow:0 0 10px #f47738;transform:scaleX(0);transform-origin:left;transition:transform .7s ease}
.reveal-card{position:absolute;top:50%;left:50%;width:213px;height:298px;transform:translate(-50%,-42%) scale(.72) rotateY(-25deg);opacity:0;z-index:2;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s;filter:drop-shadow(0 12px 26px #000b);border-radius:11px;overflow:hidden}
.reveal-card>img{width:100%;height:100%;object-fit:contain}
.card-sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff8 47%,transparent 64%);transform:translateX(-140%);mix-blend-mode:screen;pointer-events:none}
.opening-particles{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none}
.opening-particles i{position:absolute;width:5px;height:10px;background:var(--hit-color);opacity:0;border-radius:1px}
.opening-result{text-align:center;z-index:4;margin:0 auto;animation:result-in .55s ease both}
.opening-result[hidden],.opening-actions[hidden]{display:none}
#reveal-rarity{display:inline-block;padding:6px 14px;background:color-mix(in srgb,var(--hit-color) 13%,#15161a);border:1px solid color-mix(in srgb,var(--hit-color) 55%,transparent);color:var(--hit-color);font-size:9px;letter-spacing:2px;font-weight:800;transform:rotate(-2deg)}
.opening-result h3{font:31px/1.2 Anton;margin:12px 0 7px}
.opening-result p{font-size:11px;color:#9e99a6;margin:0}
.opening-actions{display:flex;gap:24px;justify-content:center;align-items:center;margin:23px auto 0;z-index:4;animation:result-in .6s .1s ease both}
.opening-actions .button{font-size:12px;min-height:49px}
.opening-back{background:none;color:#aaa4b0;font-size:11px;padding:12px}
.opening-back:hover{color:#fff}
.opening-room[data-phase=charging] .opening-wrapper{animation:pack-charge 1s ease both}
.opening-room[data-phase=charging] .tear-line{transform:scaleX(1)}
.opening-room[data-phase=charging] .opening-glow{opacity:.65;transform:scale(.9)}
.opening-room[data-phase=tearing] .wrapper-top,.opening-room[data-phase=revealed] .wrapper-top{transform:translate(105px,-100px) rotate(27deg);opacity:0}
.opening-room[data-phase=tearing] .wrapper-bottom,.opening-room[data-phase=revealed] .wrapper-bottom{transform:translate(0,200px) rotate(-13deg);opacity:0}
.opening-room[data-phase=tearing] .reveal-card{opacity:1;transform:translate(-50%,-50%) scale(.94) rotateY(0)}
.opening-room[data-phase=revealed] .reveal-card{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotateY(0)}
.opening-room[data-phase=tearing] .opening-glow,.opening-room[data-phase=revealed] .opening-glow{opacity:.85;transform:scale(1.2)}
.opening-room[data-phase=revealed] .opening-rays{opacity:1}
.opening-room[data-phase=revealed] .opening-particles i{animation:confetti-out 1.6s var(--delay) ease-out both}
.opening-room[data-phase=revealed] .card-sheen{animation:card-glint 1.3s .1s ease both}
.opening-room[data-phase=revealed] .opening-heading h2{color:var(--hit-color);transition:color .6s}
@keyframes pack-charge{0%{transform:translateX(-50%) rotate(-4deg)}35%{transform:translateX(-50%) translateY(-8px) rotate(-2deg) scale(1.025)}65%{transform:translateX(-50%) translateY(-5px) rotate(-5deg) scale(1.025)}100%{transform:translateX(-50%) rotate(-4deg)}}
@keyframes confetti-out{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--turn)) scale(.5)}}
@keyframes card-glint{to{transform:translateX(140%)}}
@keyframes result-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:900px) and (max-height:850px){.opening-room{padding-top:16px;padding-bottom:20px}.opening-heading{margin-top:10px}.opening-heading h2{font-size:43px}.opening-stage{height:290px}.opening-wrapper{width:197px;height:276px;top:7px}.reveal-card{width:176px;height:246px}.opening-result h3{font-size:27px;margin:9px 0 5px}.opening-actions{margin-top:17px}.opening-actions .button{min-height:45px}}
@media(max-width:760px){.opening-room{padding:17px 20px 28px}.opening-top{min-height:39px}.opening-top .logo>span{font-size:31px}.opening-top .logo img{width:28px;height:33px}#opening-edition{font-size:7px;letter-spacing:1.2px;margin-left:0;max-width:120px}.opening-close{width:34px;height:34px;font-size:25px}.opening-heading{margin-top:29px}.opening-heading .eyebrow{font-size:6px;letter-spacing:1.5px}.opening-heading h2{font-size:36px;margin:12px 0 10px}#opening-progress{font-size:10px}.opening-stage{height:322px;margin-top:13px}.opening-wrapper{width:217px;height:304px;top:8px}.reveal-card{width:193px;height:270px}.opening-result h3{font-size:29px}.opening-result p{font-size:9px}.opening-actions{flex-direction:column;gap:7px;margin-top:21px;width:100%;max-width:300px}.opening-actions .button{width:100%;min-height:48px;font-size:11px}.opening-back{font-size:10px;padding:10px}#reveal-rarity{font-size:8px;padding:5px 12px}.opening-glow{inset:0 -30%}.opening-rays{inset:-20% -50%}}
@media(max-width:360px),(max-width:760px) and (max-height:740px){.opening-heading{margin-top:18px}.opening-heading h2{font-size:31px}.opening-stage{height:270px}.opening-wrapper{width:182px;height:255px}.reveal-card{width:165px;height:231px}.opening-result h3{font-size:26px}.opening-actions{margin-top:15px}}
@media(prefers-reduced-motion:reduce){#opening-dialog *{animation:none!important;transition:none!important}}
#opening-title:focus{outline:none}