/* A continuous opening: seal, sleeve, stack, then one face at a time. */
.pack-detail .opening-table{border-radius:16px;overflow:hidden;align-self:start;background:radial-gradient(ellipse at 48% 40%,#fff 4%,#eff1f5 58%,#dde1e9)}
.pack-detail .table-caption{font-size:11px;padding:20px 24px}
.pack-detail .opening-stage,.pack-detail .opening-stage[data-state="revealed"]{height:480px;perspective:1300px;overflow:hidden}
.pack-detail .pack-wrap{width:252px;height:420px;margin-top:0;z-index:3}
.pack-detail .booster{transform:rotate(-3deg) rotateY(-5deg)}
.pack-detail .opening-stage[data-state="sealed"] .booster{animation:sealed-breathe 5s ease-in-out infinite}
.pack-detail .booster.returning{animation:none!important}
.pack-detail .tear-grip{top:7%;width:44px;height:44px;background:#fff;border:1px solid #15192255;border-radius:50%;box-shadow:0 3px 12px #15192230;cursor:grab}
.pack-detail .tear-grip:active{cursor:grabbing}
.pack-detail .tear-grip:after{content:'';position:absolute;left:42px;top:19px;width:170px;border-top:1px dashed #fff;filter:drop-shadow(0 1px 1px #000);pointer-events:none;opacity:.65}
.pack-detail .pack-shadow{bottom:27px;transition:opacity .4s}
.pack-detail .opening-stage[data-state="opening"] .pack-body{animation:sleeve-away 1.2s .18s cubic-bezier(.35,.02,.72,1) both}
.pack-detail .opening-stage[data-state="opening"] .pack-peeled{animation:seal-peel 1.05s cubic-bezier(.2,.5,.5,1) both}
.pack-detail .opening-stage[data-state="opening"] .pack-shadow{animation:shadow-away 1.4s both}
.pack-detail .opening-stage:is([data-state="flipping"],[data-state="advancing"],[data-state="faceup"],[data-state="revealed"]) .pack-wrap{display:none}
.pack-detail .opening-stage:is([data-state="flipping"],[data-state="advancing"],[data-state="faceup"],[data-state="revealed"]) .pack-shadow{width:250px;bottom:25px;opacity:.15}
.reveal-stack{position:absolute;left:50%;top:50%;width:252px;height:402px;transform:translate(-50%,-50%);z-index:2;perspective:1500px;pointer-events:none;visibility:hidden}
.opening-stage:not([data-state="sealed"]) .reveal-stack{visibility:visible}
.opening-stage[data-state="opening"] .reveal-stack{animation:stack-extract 1.8s cubic-bezier(.2,.7,.2,1) both}
.pull-card{position:absolute;inset:0;z-index:var(--depth);transform:translate(calc(var(--stack) * 4px),calc(var(--stack) * 2px)) rotate(calc(var(--stack) * 1.3deg));transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .35s;transform-style:preserve-3d}
.pull-turn{width:100%;height:100%;transform-style:preserve-3d;position:relative;transition:transform .76s cubic-bezier(.22,.7,.18,1)}
.pull-card.is-faceup .pull-turn{transform:rotateY(180deg)}
.pull-card.is-current{transform:translate(0,0) rotate(-1deg)}
.pull-card.is-collected{transform:translate(140%,-15%) rotate(20deg) scale(.85);opacity:0;pointer-events:none}
.pull-back,.pull-front{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;border:6px solid #c5cfd9;border-radius:12px;padding:9px;background:linear-gradient(135deg,#f7fbffe6,#bbc9d9b3 40%,#f8fcffcc 65%,#bec9d7cf);box-shadow:inset 0 0 0 1px #fff,0 1px 0 1px #8595a766,7px 14px 20px #17203222;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.pull-back:after,.pull-front:after{content:'';position:absolute;inset:2px;border-radius:7px;border:1px solid #fff9;background:linear-gradient(117deg,transparent 20%,#fff0 42%,#fff3 44%,#fff0 48%,transparent 80%);pointer-events:none}
.pull-back{transform:translateZ(1px)}
.pull-front{transform:rotateY(180deg) translateZ(1px)}
.pull-back-label{height:45px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#f5f6ff;font-size:9px;letter-spacing:.7px;flex:none;border:3px solid #eff4ff}
.pull-back-art{flex:1;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(#ffffff30 1px,transparent 1px) 0 0/8px 8px,var(--blue);border:5px solid var(--ink);outline:1px solid #fff8;outline-offset:2px;border-radius:5px;box-shadow:inset 0 0 0 3px var(--yellow)}
.pull-back-art>span{font:900 51px/.87 var(--heading);padding:18px 11px;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px var(--ink);transform:rotate(-8deg);text-align:center}
.pull-back-art>small{position:absolute;bottom:23px;left:0;right:0;font-size:9px;font-weight:800;letter-spacing:.8px;color:var(--green);text-align:center;line-height:1.5}
.pull-label{height:45px;flex:none;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 8px;border:3px solid var(--blue);background:#fbfcfd;line-height:1.2}
.pull-label>span{font-size:11px;font-weight:800;min-width:0}.pull-label small{display:block;font-size:7px;font-weight:600;letter-spacing:.2px;margin-top:3px}.pull-label b{font-size:10px;align-self:flex-start;color:var(--blue)}
.pull-art{position:relative;min-height:0;flex:1;border-radius:6px;overflow:hidden;border:1px solid #667182;background:var(--ink)}
.pull-art img{width:100%;height:100%;display:block;object-fit:fill}
.pull-holo:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 15%,#74deff77 25%,#f897ffbb 34%,#f8ffb4dd 39%,transparent 55%);background-size:300% 100%;mix-blend-mode:color-dodge}
.is-faceup .pull-holo:after{animation:pull-foil 1.5s .3s ease-out both}
.stack-tap{position:absolute;left:50%;top:50%;width:265px;height:415px;transform:translate(-50%,-50%);z-index:5;border:0;background:transparent;border-radius:16px;display:none}
.opening-stage[data-state="faceup"] .stack-tap{display:block;cursor:pointer}
.single-reveal{padding:0 26px 24px;text-align:center;min-height:218px}
.pull-progress{display:flex;align-items:center;justify-content:center;gap:15px;font-size:11px;letter-spacing:1px;font-weight:700}
.reveal-pips{display:flex;gap:5px}.reveal-pips>span{display:block;width:22px;height:5px;background:#15192220;border-radius:2px;transition:background .2s}.reveal-pips>.is-seen{background:var(--blue)}
.pull-result{min-height:78px;padding:12px 0}.pack-detail .pull-result h2{margin:0;font-size:34px;letter-spacing:.1px;line-height:1}.pull-result #pull-finish{display:inline-block;margin-top:7px;font-size:10px;font-weight:800;letter-spacing:1px}.pull-result #pull-finish[data-finish="Rare Holo"]{color:#4333a6}
.pull-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.pull-controls .button{box-shadow:none;min-height:44px;padding:12px 18px;font-size:11px;border-width:1px;border-radius:6px;letter-spacing:.4px}.pull-controls .button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #15192225}.pull-controls .button:disabled{opacity:.6;transform:none;box-shadow:none}.inspect-pull{background:none;border:0;border-bottom:1px solid #15192255;padding:8px 0;font-size:10px;font-weight:700;color:var(--ink)}
#pull-note{font-size:9px;letter-spacing:.4px;line-height:1.5;color:#5f6671;margin:17px 0 0}
.pack-detail .tear-guide{min-height:151px;padding:20px 22px 22px;background:transparent;border:0}
.pack-detail .tear-guide #tear-instruction{font-size:12px;margin-top:15px;color:#48505c}
.pack-detail .tear-guide #action-caption{font-size:10px;margin-top:12px}
.pack-detail #open-pack{border:1px solid #15192266;border-radius:5px;padding:10px 18px;text-decoration:none;font-size:11px;background:#ffffff7a}
.pack-detail .tear-track{height:3px;max-width:160px}.pack-detail .pack-done{display:none!important}
.pack-detail .card-reveal{border:1px solid #15192233;border-radius:16px;background:#eff1f5;padding:35px 24px;box-shadow:none}
.pack-detail .card-reveal .revealed-card{transform:none}.pack-detail .card-reveal .reveal-art{padding:7px;background:linear-gradient(135deg,#fff,#cbd5e0,#f9fcff);border:1px solid #a6b5c3;border-radius:10px}.pack-detail .card-reveal .revealed-card img{box-shadow:none}
@keyframes sealed-breathe{0%,100%{transform:rotate(-3deg) rotateY(-5deg) translateY(0)}50%{transform:rotate(-1deg) rotateY(3deg) translateY(-5px)}}
@keyframes seal-peel{0%{transform:translate(14px,-48px) rotate(-12deg);opacity:1}35%{transform:translate(90px,-72px) rotate(20deg);opacity:1}100%{transform:translate(290px,320px) rotate(100deg);opacity:0}}
@keyframes sleeve-away{0%{transform:translateY(0) rotate(0);opacity:1}28%{transform:translateY(70px) rotate(3deg);opacity:1}70%{opacity:1}100%{transform:translateY(540px) rotate(14deg) scale(.87);opacity:0}}
@keyframes stack-extract{0%,8%{transform:translate(-50%,-38%) scale(.83) rotate(-3deg)}45%{transform:translate(-50%,-54%) scale(.89) rotate(-1deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes shadow-away{0%{opacity:.22}60%{opacity:.3}100%{opacity:.15}}
@keyframes pull-foil{0%{opacity:0;background-position:130% 0}20%{opacity:.65}100%{opacity:0;background-position:-40% 0}}
@media(max-width:1000px) and (min-width:701px){.pack-detail .pack-store{grid-template-columns:1.12fr 1fr;gap:30px}.pack-detail .pack-wrap{width:232px;height:387px}.reveal-stack{width:232px;height:374px}.pull-back-art>span{font-size:46px}.stack-tap{width:245px;height:386px}.single-reveal{padding-inline:14px}.pull-controls{gap:12px}}
@media(min-width:701px) and (max-height:800px){.pack-detail .opening-stage,.pack-detail .opening-stage[data-state="revealed"]{height:395px}.pack-detail .pack-wrap{width:210px;height:350px}.reveal-stack{width:214px;height:343px}.pull-back-art>span{font-size:42px}.pull-back-art>small{bottom:17px;font-size:8px}.pull-back,.pull-front{padding:7px;gap:7px;border-width:5px}.pull-label,.pull-back-label{height:39px}.stack-tap{width:224px;height:355px}.single-reveal{min-height:200px;padding-bottom:20px}.pack-detail .tear-grip:after{width:132px}}
@media(max-width:700px){.pack-detail .opening-stage,.pack-detail .opening-stage[data-state="revealed"]{height:420px}.pack-detail .pack-wrap{width:222px;height:370px}.reveal-stack{width:224px;height:359px}.stack-tap{width:235px;height:370px}.pull-back,.pull-front{padding:7px;gap:7px;border-width:5px}.pull-back-label,.pull-label{height:40px}.pull-back-art>span{font-size:44px}.pull-back-art>small{bottom:18px;font-size:8px}.pack-detail .table-caption{padding:18px 16px;font-size:9px}.single-reveal{min-height:213px;padding:4px 14px 22px}.pack-detail .pull-result h2{font-size:31px}.pull-controls{gap:12px}.pack-detail .card-reveal{padding:28px 15px}.pack-detail .tear-grip:after{width:142px}.pack-detail .pack-actions{padding-top:15px}}
@media(prefers-reduced-motion:reduce){.pack-detail .booster,.pack-detail .foil-shine{animation:none!important}.pack-detail .pack-body,.pack-detail .pack-peeled,.pack-detail .reveal-stack,.pack-detail .pack-shadow,.pack-detail .pull-holo:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}.pull-card,.pull-turn,.reveal-pips>span{transition:none!important}}
