/* The wrapper is slightly wider and substantially taller than the cards. */
.booster-theatre{min-height:740px;--pack-width:302px;--card-width:280px;overflow:clip}
.pack{position:absolute;top:145px;left:50%;width:var(--pack-width);aspect-ratio:5/8;transform:translateX(-50%);z-index:12;filter:drop-shadow(0 25px 30px #000a)}
.pack:hover{transform:translateX(-50%) translateY(-3px)}
.pack:not(.tearing){animation:pack-breathe 4s ease-in-out infinite}
@keyframes pack-breathe{50%{filter:drop-shadow(0 28px 35px #000c) drop-shadow(0 0 16px #c79a3a22)}}
.pack.tearing{animation:pack-shudder .55s ease-out}
@keyframes pack-shudder{20%{transform:translateX(-50%) rotate(-2deg)}45%{transform:translateX(-50%) rotate(2deg)}70%{transform:translateX(-50%) rotate(-1deg)}}
.pack.tearing .pack-top{animation:tear-ribbon 1.1s cubic-bezier(.2,.7,.4,1) forwards}
.pack.tearing .pack-bottom{animation:none}
@keyframes tear-ribbon{20%{transform:translate(10px,-16px) rotate(4deg);filter:brightness(1.8)}to{transform:translate(200px,-210px) rotate(55deg);opacity:0}}
.pack.discarded .pack-bottom{animation:empty-wrapper .8s ease-in forwards}
@keyframes empty-wrapper{to{transform:translateY(480px) rotate(-18deg) scale(.8);opacity:0}}
#opening-light{position:absolute;top:210px;left:50%;width:var(--pack-width);height:1px;transform:translateX(-50%);z-index:15;pointer-events:none;opacity:0}
#opening-light.burst{animation:opening-light 3.3s both}
@keyframes opening-light{0%{opacity:0}10%,65%{opacity:1}100%{opacity:0}}
.mouth-glow{position:absolute;top:-10px;left:0;width:100%;height:22px;border-radius:50%;background:#fff7d1;box-shadow:0 0 16px 7px #fff2bc,0 0 65px 35px #edba5999,0 -25px 120px 65px #ffbd4133;animation:mouth-pulse .45s ease-in-out 5 alternate}
@keyframes mouth-pulse{to{filter:brightness(1.8);transform:scaleX(.9)}}
.light-beam{position:absolute;bottom:0;left:-80%;width:260%;height:370px;background:linear-gradient(0deg,#fff1bccc,#f7cc6460 40%,transparent);clip-path:polygon(48% 100%,12% 0,75% 0,52% 100%);filter:blur(10px);transform-origin:50% 100%;animation:beam-sway 1.5s ease-in-out infinite alternate}
.beam-two{transform:rotate(24deg);opacity:.7;animation-delay:-.8s}.beam-three{transform:rotate(-27deg);opacity:.5;animation-delay:-.3s}
@keyframes beam-sway{to{rotate:12deg;opacity:.6}}
.opening-mote{position:absolute;left:50%;top:0;width:3px;height:7px;background:#fff9d7;border-radius:50%;box-shadow:0 0 9px 3px #ffc45c;animation:opening-mote 1.8s var(--delay) ease-out both}
@keyframes opening-mote{from{opacity:0;transform:translate(0,0)}15%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(130deg)}}
#stack{top:160px;width:var(--card-width);z-index:10}
.stack-card{--depth:0;transform:translate(calc(var(--depth)*2px),calc(var(--depth)*-5px)) rotate(calc(var(--depth)*1.1deg));transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s;transform-style:preserve-3d;box-shadow:0 12px 22px #0007}
.stack-card.front{transform:translate(0,0) rotate(0deg)}
.stack-card.emerging{animation:escape-pack 1.1s cubic-bezier(.22,.75,.24,1) both;animation-delay:calc(var(--i)*.16s)}
@keyframes escape-pack{0%{transform:translateY(170px) scale(.94);filter:brightness(1.7)}60%{transform:translate(calc((var(--i) - 2)*10px),-155px) rotate(calc((var(--i) - 2)*4deg)) scale(.96);filter:brightness(1.2)}100%{transform:translate(calc(var(--depth)*2px),-150px) rotate(calc(var(--depth)*1.1deg));filter:brightness(1)}}
.stack-card.settling{animation:settle-stack .8s cubic-bezier(.22,.8,.2,1) both}
@keyframes settle-stack{from{transform:translate(calc(var(--depth)*2px),-150px) rotate(calc(var(--depth)*1.1deg))}75%{transform:translate(calc(var(--depth)*2px),calc(var(--depth)*-5px + 8px)) rotate(calc(var(--depth)*1.1deg))}to{transform:translate(calc(var(--depth)*2px),calc(var(--depth)*-5px)) rotate(calc(var(--depth)*1.1deg))}}
.stack-card.front.revealed{animation:front-reveal .55s ease-out}
@keyframes front-reveal{from{transform:rotateY(-75deg) scale(.96);filter:brightness(1.8)}to{transform:rotateY(0) scale(1);filter:brightness(1)}}
.stack-card.front.depart{transform:translate(135%,-25px) rotate(21deg);opacity:0;pointer-events:none}
.rarity-reveal{top:70px}.stage-ring{bottom:65px}
.booster-theatre[data-rarity=UR].celebrate:after{background:conic-gradient(from 0deg,transparent,#ffd99855,transparent,#b1eeff55,transparent,#d7b4ff55,transparent);animation:legendary-rays 2.8s ease-out forwards}
@keyframes legendary-rays{0%{opacity:0;transform:scale(.5) rotate(-20deg)}25%{opacity:1}100%{opacity:0;transform:scale(1.2) rotate(40deg)}}
.booster-theatre[data-rarity=SSR].celebrate:after{background:radial-gradient(ellipse,#ffd17b66,#ef7b2033 35%,transparent 68%)}
.booster-theatre[data-phase=emerging] .rarity-reveal,.booster-theatre[data-phase=settling] .rarity-reveal{visibility:hidden}
@media(max-width:850px){.booster-theatre{--pack-width:280px;--card-width:258px;min-height:720px}.pack{top:155px}#opening-light{top:216px}#stack{top:170px}}
@media(prefers-reduced-motion:reduce){.light-beam,.opening-mote{display:none}.stack-card.emerging,.stack-card.settling{animation:none}.pack:not(.tearing){animation:none}}
.stack-card:disabled{opacity:1}.stack-card.front.depart:disabled{opacity:0}
/* A broad, forgiving tear area; freeze floating motion while cutting. */
.cut-zone{left:-12%;width:124%;top:-7%;height:43%}
.cut-zone span:last-child{top:14%;right:6%;pointer-events:none}
.pack:not(.tearing){animation:jurassic-float 5s ease-in-out infinite}
.pack.cutting{animation-play-state:paused}
@keyframes jurassic-float{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1.3deg);filter:drop-shadow(0 25px 30px #000a)}50%{transform:translateX(-50%) translateY(-17px) rotate(1.3deg);filter:drop-shadow(0 42px 32px #0008) drop-shadow(0 0 20px #cca34433)}}
.jurassic-air{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:0;transition:opacity .7s}
.booster-theatre[data-phase=sealed] .jurassic-air{opacity:1}
.jungle-mist{position:absolute;inset:30% -30% -10%;background:radial-gradient(ellipse at 30% 70%,#8cba6a22,transparent 45%),radial-gradient(ellipse at 70% 60%,#d5c58018,transparent 50%);filter:blur(22px);animation:mist-drift 12s ease-in-out infinite alternate}
.sun-shaft{position:absolute;inset:-20%;background:conic-gradient(from 155deg at 70% 0%,transparent,#e8d39212 8deg,transparent 14deg,#d6e59709 20deg,transparent 28deg);filter:blur(8px);animation:mist-drift 9s ease-in-out infinite alternate-reverse}
@keyframes mist-drift{to{transform:translate(30px,-15px) scale(1.12)}}
.pollen{position:absolute;left:var(--left);bottom:8%;width:3px;height:3px;border-radius:50%;background:#f9d887;box-shadow:0 0 8px 2px #ffe4a555;animation:pollen-rise 9s var(--delay) linear infinite;opacity:0}
@keyframes pollen-rise{10%,70%{opacity:.6}to{transform:translate(35px,-520px);opacity:0}}
.fern{position:absolute;bottom:8%;height:210px;width:2px;background:#58714a66;transform-origin:bottom;animation:fern-sway 7s ease-in-out infinite alternate}
.fern-left{left:8%;rotate:-28deg}.fern-right{right:7%;rotate:30deg;scale:-1 1;animation-delay:-3s}
.fern i{position:absolute;bottom:calc(var(--n)*23px);left:0;width:calc(65px - var(--n)*6px);height:15px;background:linear-gradient(15deg,#2e5234bb,#71845266);border-radius:0 100% 0 100%;transform:rotate(-30deg);transform-origin:left}
.fern i:after{content:'';position:absolute;inset:0;transform:scaleX(-1) rotate(-30deg);transform-origin:left;background:inherit;border-radius:inherit}
@keyframes fern-sway{to{transform:rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.pack:not(.tearing),.jurassic-air *{animation:none!important}.pollen{display:none}}

.jurassic-air{mask-image:linear-gradient(transparent,#000 12% 83%,transparent)}
/* Wide invisible tear target; the visible perforation stays on the packet. */
.booster-theatre{container-type:inline-size}
.cut-zone{left:50%;transform:translateX(-50%);width:min(740px,calc(100cqw - 24px));cursor:pointer}
.cut-zone .cut-line{left:50%;right:auto;width:calc(var(--pack-width) + 8px);transform:translateX(-50%)}
.rarity-reveal{display:none}
/* The landscape fills desktop space and fades independently on all four edges. */
.jurassic-air{mask-image:linear-gradient(90deg,transparent,#000 16% 84%,transparent),linear-gradient(transparent,#000 15% 78%,transparent);mask-composite:intersect}
.jurassic-air:before{content:'';position:absolute;inset:0;background:url('assets/environments/jurassic-valley-v1.png') center/cover no-repeat;opacity:.8}
.jurassic-air .fern{display:none}
.jurassic-air .jungle-mist{opacity:.45}
@media(min-width:1400px){.jurassic-air:before{background-position:52% center}}
@media(max-width:850px){.jurassic-air:before{background-position:52% center;opacity:.7}.jurassic-air{mask-image:linear-gradient(90deg,transparent,#000 10% 90%,transparent),linear-gradient(transparent,#000 14% 80%,transparent)}}

.cut-zone .cut-line:last-child{top:48%;right:auto;padding:0;border:0;border-radius:0;height:2px;background:repeating-linear-gradient(90deg,#fff9 0 7px,transparent 7px 13px)}
/* Only the packet occludes extraction; light is free to leave the stage. */
.booster-theatre{overflow:visible;--pack-floor:468px}
body:has(.booster-layout){overflow-x:clip}
.jurassic-air{opacity:1}
.booster-theatre[data-phase=emerging] #stack{clip-path:inset(-100vmax -100vmax calc(100% - var(--pack-floor)) -100vmax)}
@keyframes escape-pack{0%{transform:translateY(40px) scale(.94);filter:brightness(1.7)}60%{transform:translate(calc(var(--depth)*3px),-155px) rotate(calc(var(--depth)*1.1deg)) scale(.96);filter:brightness(1.2)}100%{transform:translate(calc(var(--depth)*2px),-150px) rotate(calc(var(--depth)*1.1deg));filter:brightness(1)}}
/* A front face never inherits the angle of the card behind it. */
.stack-card.front{transition:opacity .45s;transform:translate(0,0) rotate(0deg)}
.stack-card.front.depart{transition:transform .45s ease-in,opacity .45s}
@keyframes front-reveal{from{opacity:.2;filter:brightness(1.6)}to{opacity:1;filter:brightness(1)}}
@media(max-width:850px){.booster-theatre{--pack-floor:433px}}

/* Limit only at the page width, never at the booster stage rectangle. */
.booster-layout{overflow-x:clip;overflow-y:visible}

/* Decorative motion may paint outside the layout without changing its scroll bounds. */
.booster-layout{overflow:clip;overflow-clip-margin:180px}
html:has(.booster-layout){scrollbar-gutter:stable}
.pack.discarded{overflow:clip}


/* The page, rather than animated descendants, owns the document height. */
body:has(.booster-layout) main{overflow:clip}