/* The wrapper and cards share one coordinate system and one fixed card size. */
.pack-stage{--pack-card-width:min(244px,23.5dvh);--pack-card-height:calc(var(--pack-card-width)*88/63);--pack-body-width:calc(var(--pack-card-width) + 26px);--pack-body-top:calc(var(--pack-card-height)*.74)}
.card-pull-table{width:var(--pack-card-width);height:calc(var(--pack-card-height) + 8px)}
.card-pull-table .reveal-card{height:var(--pack-card-height);bottom:auto}
.pack-stage.pack-opening-stage{min-height:0;justify-content:flex-start;padding:10px 0}
.pack-opening-stage>h1{margin:7px 0 8px}
.pack-opening-stage>.pack-instruction{margin:0;color:#718067;font-size:11px;transform:translateY(calc(var(--pack-card-height)*.74 - 30px))}
.pack-opening-stage .pack-assembly{--tear:0;position:relative;width:calc(var(--pack-body-width) + 42px);height:calc(var(--pack-card-height)*1.74 + 48px);margin:12px auto 14px;perspective:900px;transform:none;isolation:isolate}
.pack-opening-stage .pack-big{position:absolute;left:21px;top:var(--pack-body-top);width:var(--pack-body-width);height:calc(var(--pack-card-height) + 30px);margin:0;z-index:4;transform:none;transition:none;filter:drop-shadow(0 9px 9px #16352324)}
.pack-opening-stage .pack-big .pack{border-radius:2px 2px 7px 7px}
.pack-opening-stage .pack-pull-stack{position:absolute;left:34px;top:calc(var(--pack-body-top) + 14px);width:var(--pack-card-width);height:var(--pack-card-height);z-index:2;transform:none;transform-style:flat}
.pack-opening-stage .pack-pull-stack .physical-card-back{transform:translate(calc(var(--stack-i)*.65px),calc(var(--stack-i)*-.65px));border-radius:10px}
.pack-mouth{position:absolute;left:23px;top:calc(var(--pack-body-top) - 4px);width:calc(var(--pack-body-width) - 4px);height:9px;z-index:3;background:#0c261d;border-top:1px solid #aaba8b;clip-path:inset(0 calc((1 - var(--tear))*100%) 0 0)}
.pack-seal{position:absolute;left:21px;top:calc(var(--pack-body-top) - 21px);width:var(--pack-body-width);height:22px;z-index:5;transform-origin:50% 100%;transform-style:flat;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.seal-intact,.seal-peeled{position:absolute;inset:0;border:1px solid #637e59;border-bottom:1px solid #b6c590;border-radius:2px 2px 0 0;background:repeating-linear-gradient(90deg,#69895e 0px,#36553e 1px,#36553e 3px);box-shadow:inset 0 3px 0 #c6d6a21f}
.seal-intact{clip-path:inset(0 0 0 calc(var(--tear)*100%))}
.seal-peeled{clip-path:inset(0 calc((1 - var(--tear))*100%) 0 0);transform:rotateX(calc(var(--tear)*-80deg));transform-origin:50% 100%;filter:brightness(1.12)}
.pack-opening-stage .tear-grip{position:absolute;left:15px;top:calc(var(--pack-body-top) - 38px);width:calc(var(--pack-body-width) + 12px);height:56px;padding:0;z-index:8;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;transform-origin:center;transition:none;touch-action:none;cursor:grab}
.pack-opening-stage .tear-grip:active{cursor:grabbing}
.seal-cursor{position:absolute;left:calc(var(--tear)*var(--pack-body-width) - 12px);top:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #a4b68c;border-radius:5px;background:#e9edd9;color:#3d5b35;box-shadow:0 2px 4px #13271d20;pointer-events:none}
.seal-cursor svg{width:18px;height:18px}
.seal-open .tear-grip{opacity:0;pointer-events:none}
.pack-opening-stage>.eyebrow,.pack-opening-stage>h1,.pack-opening-stage>.pack-instruction,.pack-opening-stage>.primary,.pack-opening-stage>.pack-footnote,.pack-opening-stage>.pack-rates{transition:opacity .14s}
.pack-opening-stage.is-drawing>.eyebrow,.pack-opening-stage.is-drawing>h1,.pack-opening-stage.is-drawing>.pack-instruction,.pack-opening-stage.is-drawing>.primary,.pack-opening-stage.is-drawing>.pack-footnote,.pack-opening-stage.is-drawing>.pack-rates{opacity:0;pointer-events:none}
.pack-opening-stage>.pack-footnote{margin-top:12px}.pack-opening-stage>.pack-rates{margin-top:7px;min-height:28px}
.opening-transfer{position:fixed;z-index:70;perspective:1000px;pointer-events:none}
.opening-transfer-solid{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
.opening-transfer-front,.opening-transfer-back{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.opening-transfer-back{transform:rotateY(180deg)}
.opening-transfer-front .trading-card{width:100%;height:100%;aspect-ratio:auto;transform:none!important;transition:none}
.pack-big.pack-wrapper-ghost{position:fixed!important;z-index:65;margin:0!important;transform:none!important;filter:drop-shadow(0 9px 9px #16352324);pointer-events:none}
.pack-wrapper-ghost .pack:before{display:none}.pack-wrapper-ghost .pack{border-radius:2px 2px 7px 7px;background:#244a36}.pack-wrapper-ghost .pack img{opacity:.58;mix-blend-mode:normal;mask-image:linear-gradient(transparent 10%,#000 38%,#000 65%,transparent 95%)}
@media(max-width:650px){.pack-stage{--pack-card-width:min(214px,23.5dvh)}.pack-opening-stage>.pack-instruction{font-size:10px}.pack-opening-stage>h1{font-size:27px}.pack-opening-stage>.primary{min-height:42px}}
@media(max-width:360px){.pack-stage{--pack-card-width:min(195px,23.5dvh)}}
@media(prefers-reduced-motion:reduce){.pack-opening-stage>*{transition:none!important}}

.pack-stage.is-presenting>.eyebrow,.pack-stage.is-presenting>h1,.pack-stage.is-presenting>.reveal-rarity,.pack-stage.is-presenting>.owned-update,.pack-stage.is-presenting>.reveal-dots,.pack-stage.is-presenting>.reveal-actions,.pack-stage.is-presenting>.reveal-bottom{visibility:hidden}

@media(max-height:720px){
 .pack-stage.pack-opening-stage{padding:5px 0}
 .pack-opening-stage>.eyebrow{display:none}
 .pack-opening-stage>h1{font-size:24px;margin:3px 0 5px}
 .pack-opening-stage>.pack-instruction{font-size:9px}
 .pack-opening-stage .pack-assembly{height:calc(var(--pack-card-height)*1.74 + 28px);margin:6px auto 8px}
 .pack-opening-stage>.pack-footnote{font-size:8px;margin-top:8px}
 .pack-opening-stage>.pack-rates{min-height:24px;margin-top:2px;font-size:9px}
}
