/* His pack opening's own rules, keyframes and media rules, taken unchanged out of his lab's style.css by tools/port-store-lab.mjs. */
.pack-cinema{--reveal-color:#dfbb7c;position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#433329 0%,#111a21 44%,#05090e 90%);isolation:isolate}
.pack-cinema::backdrop{background:#05090e}
.cinema-header{position:absolute;top:0;left:0;right:0;height:85px;margin:0 5vw;z-index:10}
.cinema-header b{font-size:30px;letter-spacing:-2px}
.cinema-header span{font-size:10px;letter-spacing:2px;color:#aeb8bb}
.cinema-skip{margin-left:auto;background:transparent;border:1px solid #ffffff35;border-radius:30px;color:#e6e0d6;padding:9px 18px;font-size:12px}
.cinema-title{position:absolute;top:13vh;left:5vw;right:5vw;text-align:center;z-index:3}
.cinema-title small{color:var(--reveal-color);letter-spacing:3px}
.cinema-title h2{font-family:Georgia,serif;font-size:clamp(27px,3vw,48px);letter-spacing:-1px;margin:12px 0}
.cinema-title p{font-size:12px;margin:0}
.cinema-nebula{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,var(--reveal-color),transparent 55%);opacity:.13;transition:background 1s;pointer-events:none}
.cinema-orbit{position:absolute;width:70vw;height:70vw;left:15vw;top:20vh;border:1px solid #c4bba322;border-radius:50%;transform:rotateX(60deg);box-shadow:0 0 0 30px #a9bba008,0 0 0 120px #a9bba006}
.cinema-wrapper{position:absolute;left:50%;top:33%;width:min(28vh,240px);aspect-ratio:2/3;transform:translateX(-50%);filter:drop-shadow(0 30px 40px #000);transition:opacity .6s,transform 1s;z-index:4}
.wrapper-body{width:100%;height:100%;display:block;mix-blend-mode:screen}
.wrapper-strip{position:absolute;inset:0;background:url(assets/booster-pack.png) center/100% 100%;clip-path:inset(0 0 87% 0);opacity:0;transform-origin:0 12%}
.wrapper-seam{position:absolute;top:13%;left:8%;width:84%;height:2px;background:#fff6cc;box-shadow:0 0 14px #fff3a7,0 0 35px #ffdd83;transform:scaleX(0);transform-origin:left}
.wrapper-light{position:absolute;inset:-20%;background:radial-gradient(ellipse,#ffe8af85,transparent 65%);opacity:0;mix-blend-mode:screen}
.seal-breaking .wrapper-body{clip-path:inset(13% 0 0 0);animation:wrapper-drop 1.2s both}
.seal-breaking .wrapper-strip{opacity:1;animation:foil-tear 1.1s both}
.seal-breaking .wrapper-seam{animation:seam-open 1s both}
.seal-breaking .wrapper-light{animation:light-spill 1.8s both}
.cards-arrive .cinema-wrapper{opacity:0;transform:translate(-50%,25vh) rotate(12deg);pointer-events:none}
.cinema-hand{position:absolute;top:35%;left:50%;width:min(86vw,1120px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.5vw,24px);transform:translateX(-50%);perspective:1400px}
.cinema-card{min-width:0;opacity:0;transform:translateY(25vh) rotate(-7deg) scale(.55);transition:opacity .6s,transform .85s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--order)*.09s)}
.cards-arrive .cinema-card{opacity:1;transform:translateY(0) rotate(0) scale(1)}
.cinema-card-turn{position:relative;aspect-ratio:307/673;max-height:44vh;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);margin:auto}
.cinema-card-front,.cinema-card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px}
.cinema-card-front{transform:rotateY(180deg)}
.cinema-card-front .face{width:100%;height:100%;box-shadow:0 18px 35px #0009,0 0 20px color-mix(in srgb,var(--accent) 25%,transparent)}
.cinema-card-back{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:16% 3%;border:4px double #c7a573;background:repeating-linear-gradient(45deg,transparent 0 10px,#d6bc7610 10px 11px),radial-gradient(ellipse,#33434b,#101a22);box-shadow:0 20px 40px #0008;outline:1px solid #b8986260;outline-offset:4px}
.cinema-card-back>span{font-size:clamp(18px,3vw,40px);font-weight:900;letter-spacing:-2px}
.cinema-card-back>div{width:65%;aspect-ratio:1;border:1px solid #d7b57b;border-radius:50%;display:grid;place-items:center;font-size:clamp(22px,4vw,56px);color:#dfbb7c;box-shadow:0 0 0 8px #dfbb7c12}
.cinema-card-back small{text-align:center;font-size:clamp(6px,.65vw,10px);letter-spacing:1px}
.revealed .cinema-card-turn{transform:rotateY(180deg)}
.cinema-card-label{text-align:center;opacity:0;transform:translateY(8px);transition:opacity .6s .4s,transform .6s .4s;margin-top:17px}
.revealed .cinema-card-label{opacity:1;transform:translateY(0)}
.cinema-card-label small{color:var(--accent);text-transform:uppercase;letter-spacing:1px}
.cinema-card-label b{display:block;font-size:clamp(10px,1vw,15px);font-weight:400;margin:4px 0}
.cinema-card-label>span{font-size:10px;color:#a9b1b3}
.prestige .cinema-card-front:after{content:'';position:absolute;inset:-12px;border:1px solid var(--accent);border-radius:18px;animation:prestige-ring 1.5s ease-out both;pointer-events:none}
.revealed .face:after{opacity:1;animation:foil-sweep 1.5s ease-out both}
.cinema-footer{position:absolute;bottom:5vh;left:5vw;right:5vw;display:flex;align-items:center;gap:25px}
.cinema-footer>span{font-size:10px;letter-spacing:2px;color:#b1b5b0;min-width:155px}
.cinema-progress{height:2px;background:#ffffff20;flex:1}
.cinema-progress i{display:block;height:100%;width:0;background:var(--reveal-color);box-shadow:0 0 15px var(--reveal-color);transition:width .7s}
.cinema-continue{padding:13px 25px;background:#dfbb7c;color:#131b20;border:0;border-radius:4px}
.cinema-dust{position:absolute;inset:0;pointer-events:none}
.cinema-dust i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;background:#ebd19a;box-shadow:0 0 8px #ebd19a;animation:dust-float 6s var(--delay) infinite alternate;opacity:.5}
@keyframes dust-float{to{transform:translate(calc(var(--drift)*25px),-40px);opacity:.1}}
@keyframes foil-tear{0%{transform:none}40%{transform:translate(20px,-15px) rotate(-8deg)}100%{transform:translate(190px,-150px) rotate(45deg);opacity:0}}
@keyframes wrapper-drop{30%{transform:rotate(-3deg)}100%{transform:translateY(45px) rotate(4deg)}}
@keyframes seam-open{20%,65%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes light-spill{30%{opacity:.9;transform:scale(1.4)}100%{opacity:0;transform:scale(2)}}
@keyframes prestige-ring{0%{opacity:.9;transform:scale(.95)}100%{opacity:0;transform:scale(1.18)}}
@keyframes foil-sweep{0%{background-position:-300px 0;opacity:0}35%{opacity:.9}100%{background-position:300px 0;opacity:.15}}
@media(max-width:650px){.cinema-header{height:66px;gap:12px}.cinema-header span{display:none}.cinema-title{top:12vh}.cinema-title small{font-size:8px;letter-spacing:1px}.cinema-hand{top:33%;width:91vw;gap:8px;grid-template-columns:repeat(5,1fr)}.cinema-card-turn{border-radius:5px}.cinema-card-back{border-width:2px;outline-offset:2px}.cinema-card-label small{font-size:8px}.cinema-card-label>span{font-size:8px}.cinema-card-label b{font-size:9px;line-height:1.3}.cinema-footer{flex-wrap:wrap;bottom:7vh;gap:15px}.cinema-continue{width:100%}.cinema-wrapper{top:32%;width:30vh}.cinema-card-front .face{border-radius:5px}}
@media(prefers-reduced-motion:reduce){.pack-cinema *{animation:none!important;transition:none!important}}
.cards-arrive .cinema-wrapper{visibility:hidden}
.cinema-dust{overflow:hidden}
@media(max-width:650px){.cinema-hand{top:29%;grid-template-columns:repeat(3,minmax(0,1fr));width:76vw;gap:15px 18px}.cinema-card-turn{max-height:23vh}.cinema-card-label{margin-top:6px}.cinema-card-label b{margin:1px 0}.cinema-card-label>span{display:none}.cinema-card:nth-child(n+4){transform:translateX(55%)}.cinema-title h2{font-size:25px}.cinema-footer{bottom:3vh}.cinema-card-back>div{font-size:24px}}
.cards-arrive .cinema-wrapper{display:none}