/* Pack-opening stage. Decorative layers never intercept the real controls. */
.mart-experience #pack-screen{isolation:isolate;position:relative;min-height:690px;overflow:hidden;border:1px solid #70a5ce80;border-radius:20px;background:#071e35;box-shadow:0 20px 60px #00102066}
.mart-experience #pack-screen:before{inset:0;filter:none;background:radial-gradient(ellipse at 76% 40%,#2678a54d,transparent 48%),radial-gradient(ellipse at 65% 90%,#f4ba5933,transparent 42%),linear-gradient(125deg,#061a30,#123b5c 65%,#071e32);z-index:-2}
.mart-experience #pack-screen:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;background-image:radial-gradient(circle at 13% 23%,#b5d9ff 0 1px,transparent 2px),radial-gradient(circle at 84% 18%,#ffe8a4 0 1px,transparent 2px),radial-gradient(circle at 92% 63%,#b5d9ff 0 1px,transparent 2px),radial-gradient(circle at 63% 31%,#ffe8a4 0 1px,transparent 2px),radial-gradient(circle at 53% 77%,#b5d9ff 0 1px,transparent 2px);background-size:440px 340px}
.mart-experience #pack-screen .pack-opening-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:1fr auto;align-items:center;max-width:none;min-height:690px;margin:0;padding:35px 54px;gap:0 20px;text-align:left}
.pack-copy{grid-column:1;grid-row:1;align-self:end;padding-bottom:24px;position:relative;z-index:2}
.mart-experience #pack-screen .pill{font-size:10px;letter-spacing:2px;padding:9px 13px;border:1px solid #8cbad060;border-radius:5px;color:#a9d7f4;background:#0a2c48}
.pack-eyebrow{margin:30px 0 15px;color:#91c3df;font-size:10px;letter-spacing:2px;font-weight:700}
.mart-experience #pack-screen h2{font-size:clamp(29px,3.1vw,43px);font-weight:850;letter-spacing:-1.7px;line-height:1.16;margin:0 0 21px;text-shadow:none;color:#eff7ff}
.mart-experience #pack-screen h2 span{color:#ffdf86}
.mart-experience #pack-screen .pack-copy>p{font-size:14px;color:#b6cedf;margin:0;line-height:1.85;max-width:365px}
.pack-facts{display:flex;gap:23px;margin-top:24px;color:#b3cbde;font-size:11px;line-height:1.7}
.pack-facts>span+span{padding-left:23px;border-left:1px solid #78a4c444}.pack-facts b{display:block;font-size:25px;line-height:1.2;color:#e9f5ff;font-weight:800}
.pack-opening-controls{grid-column:1;grid-row:2;align-self:start;padding-bottom:52px;position:relative;z-index:2}
.mart-experience #pack-screen #open-pack{display:block;width:min(100%,340px);min-width:0;padding:16px 25px;border:1px solid #ffe291;border-radius:9px;background:linear-gradient(125deg,#ffe7a0,#ffd354 55%,#eeb039);box-shadow:0 5px 0 #a76d1c66,0 8px 30px #efb84126;color:#132b43;font-size:17px;letter-spacing:.2px;margin:0 0 18px}
.mart-experience #pack-screen #open-pack:disabled{opacity:1;background:linear-gradient(125deg,#d4c18e,#c4a14b);color:#253c50;box-shadow:none}
.mart-experience #pack-screen .pack-opening-status{font-size:12px;color:#e7d398;line-height:1.5;margin:0 0 9px;max-width:340px}
.mart-experience #pack-screen .hint{font-size:11px;color:#9cbad1!important;margin:0;max-width:340px}
.pack-theater{position:relative;grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;min-width:0;height:580px;perspective:1100px;overflow:hidden}
.pack-orbit{position:absolute;width:420px;height:420px;border:1px solid #91b5d32b;border-radius:50%;background:radial-gradient(ellipse,#a9dcff12,transparent 70%);pointer-events:none}
.pack-orbit:before,.pack-orbit:after{content:'';position:absolute;border:1px solid #91b5d319;border-radius:50%;inset:28px}.pack-orbit:after{inset:-22px;border-style:dashed;opacity:.5}
.pack-pedestal{position:absolute;bottom:42px;width:90%;height:55px;border-radius:50%;background:radial-gradient(ellipse,#f6db7b80,#bc9a3e24 45%,transparent 70%);transform:rotateX(35deg);box-shadow:0 -2px 0 #ffe3a82b;pointer-events:none}
.mart-experience #pack-screen .pack-art{position:relative;z-index:1;display:block;width:290px;height:460px;margin:0 auto 35px;perspective:1100px;--pack-open-time:2200ms;--pack-image:url('kanto-pack.png')}
.mart-experience #pack-screen .pack-stage{width:100%;height:100%;animation:pack-idle-float 4s ease-in-out infinite;isolation:isolate;transform-style:preserve-3d}
.mart-experience #pack-screen .pack-art:focus-visible{outline:2px solid #ffdc7c;outline-offset:8px;border-radius:10px}
.mart-experience #pack-screen .pack-stage img{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:contain;transform:none;filter:drop-shadow(0 24px 18px #0008);transition:filter .2s}
.mart-experience #pack-screen .pack-art:hover:not(.opening) .pack-stage img{transform:none;filter:drop-shadow(0 20px 24px #77ccf755) brightness(1.06)}
.pack-stage-caption{position:absolute;bottom:9px;display:flex;align-items:center;gap:13px;color:#cfb777;font-size:9px;font-weight:750;letter-spacing:3px;pointer-events:none}
.pack-stage-caption span{display:block;width:27px;height:1px;background:#b6985577}
.mart-experience #pack-screen .pack-glow{inset:-10%;width:120%;height:120%;z-index:0;opacity:.6;border-radius:50%;filter:none;background:radial-gradient(ellipse,#ffdc8630,#97dfff0a 44%,transparent 68%)}
.mart-experience #pack-screen .pack-burst{inset:-20%;width:140%;height:140%;z-index:1;filter:none;mix-blend-mode:screen;background:repeating-conic-gradient(from 5deg,transparent 0deg 14deg,#ffe8acb0 15deg 17deg,transparent 18deg 35deg);mask-image:radial-gradient(ellipse,transparent 20%,black 42%,transparent 70%)}
.mart-experience #pack-screen .pack-top-flap{inset:0;width:100%;height:100%;background:var(--pack-image) center/contain no-repeat;clip-path:polygon(0 0,100% 0,100% 15.5%,96% 16.5%,91% 15.5%,86% 16.5%,81% 15.5%,76% 16.5%,71% 15.5%,66% 16.5%,61% 15.5%,56% 16.5%,51% 15.5%,46% 16.5%,41% 15.5%,36% 16.5%,31% 15.5%,26% 16.5%,21% 15.5%,16% 16.5%,11% 15.5%,6% 16.5%,0 15.5%);border-radius:0;transform-origin:70% 16%;filter:drop-shadow(0 5px 6px #00152b99);z-index:6}
.mart-experience #pack-screen .pack-rip{top:16%;left:11%;right:11%;height:3px;z-index:7;border-radius:0;background:linear-gradient(90deg,transparent,#fff5b9 15%,white 50%,#ffd569 85%,transparent);box-shadow:0 0 8px #fff8cc,0 0 25px #ffc44b}
.pack-sheen{position:absolute;inset:6% 11%;pointer-events:none;z-index:5;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.pack-sheen:before{content:'';position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 40%,#ddf9ff44 49%,#ffffff77 50%,transparent 57%);transform:translateX(-60%);animation:pack-foil-sheen 5s ease-in-out infinite}
.pack-particles{position:absolute;inset:0;pointer-events:none;z-index:8}
.pack-particles i{position:absolute;left:50%;top:20%;width:5px;height:5px;background:#fff1b4;border-radius:1px;opacity:0;box-shadow:0 0 9px #ffdb73;--angle:calc(var(--i)*22.5deg);--distance:clamp(90px,18vw,185px)}
.pack-particles i:nth-child(3n){width:9px;height:9px;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 38%)}
.pack-reveal-cards{position:absolute;inset:0;z-index:3;pointer-events:none}
.pack-reveal-cards span{position:absolute;left:19%;top:26%;width:62%;height:55%;opacity:0;border:4px solid #edcf6c;border-radius:10px;background:radial-gradient(circle at center,#f6f6ed 0 8%,#225ca3 9% 12%,#e8c562 13% 15%,transparent 16%),radial-gradient(ellipse at center,#528ac0,#164271 65%);box-shadow:inset 0 0 0 3px #c0dcf0,0 0 25px #ffdb7c66;transform:translateY(30px) scale(.75)}
.pack-reveal-cards span:after{content:'✦';position:absolute;inset:10px;border:1px solid #beddf288;border-radius:5px;text-align:center;padding-top:12px;color:#f5d677;font-size:24px}
.mart-experience #pack-screen .opening .pack-stage{animation:none}
.mart-experience #pack-screen .opening .pack-stage img{animation:pack-body-open var(--pack-open-time) ease-in-out both}
.mart-experience #pack-screen .opening .pack-top-flap{animation:pack-flap-open var(--pack-open-time) ease-in-out both}
.mart-experience #pack-screen .opening .pack-rip{animation:pack-rip-open var(--pack-open-time) ease-in-out both}
.mart-experience #pack-screen .opening .pack-glow{animation:pack-glow-open var(--pack-open-time) ease-in-out both}
.mart-experience #pack-screen .opening .pack-burst{animation:pack-burst-open var(--pack-open-time) ease-out both}
.opening .pack-sheen{opacity:0}.opening .pack-sheen:before{animation:none}
.opening .pack-particles i{animation:pack-seal-spark var(--pack-open-time) ease-out both}
.opening .pack-reveal-cards span{animation:pack-card-emerge var(--pack-open-time) cubic-bezier(.2,.65,.3,1) both}
@keyframes pack-idle-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(-1deg)}}
@keyframes pack-foil-sheen{0%,25%{transform:translateX(-60%)}65%,100%{transform:translateX(60%)}}
@keyframes pack-body-open{0%,12%{transform:rotate(-2deg);opacity:1;clip-path:inset(0)}18%{transform:rotate(2deg) translateY(-3px)}24%{transform:rotate(-2deg)}30%{transform:rotate(1deg);clip-path:inset(0)}35%,52%{transform:translateY(4px);opacity:1;clip-path:polygon(0 16%,6% 17%,11% 16%,16% 17%,21% 16%,26% 17%,31% 16%,36% 17%,41% 16%,46% 17%,51% 16%,56% 17%,61% 16%,66% 17%,71% 16%,76% 17%,81% 16%,86% 17%,91% 16%,96% 17%,100% 16%,100% 100%,0 100%)}78%{opacity:.9;transform:translateY(100px) rotate(6deg)}100%{opacity:0;transform:translateY(170px) rotate(12deg);clip-path:inset(17% 0 0)}}
@keyframes pack-flap-open{0%,30%{opacity:0;transform:none}31%{opacity:1;transform:none}47%{opacity:1;transform:translate(24px,-22px) rotate(9deg)}72%{opacity:.9;transform:translate(65px,-90px) rotate(24deg)}100%{opacity:0;transform:translate(100px,-135px) rotate(38deg)}}
@keyframes pack-rip-open{0%,22%{opacity:0;transform:scaleX(0);transform-origin:left}34%,42%{opacity:1;transform:scaleX(1);transform-origin:left}60%,100%{opacity:0;transform:scaleX(1.15) translateY(-15px)}}
@keyframes pack-glow-open{0%{opacity:.4;transform:scale(.85)}35%{opacity:.7;transform:scale(1)}62%,85%{opacity:1;transform:scale(1.5);background:radial-gradient(ellipse,#fff4b4aa,#ffd97c44 35%,transparent 68%)}100%{opacity:.7;transform:scale(1.6)}}
@keyframes pack-burst-open{0%,35%{opacity:0;transform:scale(.7) rotate(0)}65%{opacity:.8;transform:scale(1.2) rotate(10deg)}100%{opacity:0;transform:scale(1.5) rotate(24deg)}}
@keyframes pack-seal-spark{0%,32%{opacity:0;transform:rotate(var(--angle)) translateX(0) scale(.2)}40%{opacity:1}75%{opacity:1;transform:rotate(var(--angle)) translateX(var(--distance)) rotate(90deg)}100%{opacity:0;transform:rotate(var(--angle)) translateX(calc(var(--distance)*1.3)) rotate(150deg) scale(.3)}}
@keyframes pack-card-emerge{0%,43%{opacity:0;transform:translateY(35px) scale(.75)}53%{opacity:1}82%,100%{opacity:1;transform:translate(calc(var(--fan)*55px),-85px) rotate(calc(var(--fan)*16deg)) scale(1)}}
@media(max-width:900px){.mart-experience #pack-screen .pack-opening-layout{padding:30px;gap:10px}.mart-experience #pack-screen h2{font-size:31px}.pack-theater{height:550px}.pack-orbit{width:320px;height:320px}.mart-experience #pack-screen .pack-art{width:250px;height:400px}.pack-facts{gap:15px}.pack-facts>span+span{padding-left:15px}}
@media(max-width:650px){
 .mart-experience #pack-screen{min-height:0;border-radius:14px}
 .mart-experience #pack-screen .pack-opening-layout{display:flex;flex-direction:column;min-height:0;padding:23px 18px 24px;gap:0;text-align:center}
 .pack-copy{align-self:stretch;padding:0}.pack-eyebrow{margin:17px 0 10px;font-size:8px;letter-spacing:1.5px}
 .mart-experience #pack-screen h2{font-size:28px;letter-spacing:-1px;line-height:1.15;margin:0 0 12px}.mart-experience #pack-screen .pack-copy>p{font-size:12px;line-height:1.65;margin:0 auto;max-width:310px}
 .pack-facts{display:none}.pack-theater{height:405px;width:100%;margin:8px 0 10px}.pack-orbit{width:290px;height:290px}.pack-pedestal{bottom:19px;width:90%;height:35px}
 .mart-experience #pack-screen .pack-art{width:215px;height:345px;margin:0 auto 8px}.pack-stage-caption{bottom:0;font-size:8px;letter-spacing:2px}
 .pack-opening-controls{align-self:stretch;padding:0}.mart-experience #pack-screen #open-pack{font-size:16px;padding:14px 20px;width:100%;max-width:340px;margin:0 auto 15px}
 .mart-experience #pack-screen .pack-opening-status{font-size:11px;max-width:none;margin:0 0 7px}.mart-experience #pack-screen .hint{max-width:none;font-size:10px}
 .pack-reveal-cards span{border-width:3px}.pack-particles i{--distance:110px}
}
@media(max-width:360px){.mart-experience #pack-screen .pack-opening-layout{padding:22px 14px}.mart-experience #pack-screen h2{font-size:25px}.pack-theater{height:365px}.mart-experience #pack-screen .pack-art{width:195px;height:310px}.pack-orbit{width:260px;height:260px}}
@media(prefers-reduced-motion:reduce){.mart-experience #pack-screen .pack-stage,.pack-sheen:before,.opening .pack-particles i,.opening .pack-reveal-cards span{animation:none!important}.mart-experience #pack-screen .pack-stage img{transition:none}.pack-orbit:after{border-style:solid}}
@supports (background-image:image-set(url('probe.webp') type('image/webp'))){
 .mart-experience #pack-screen .pack-art{--pack-image:image-set(url('kanto-pack.webp') type('image/webp'),url('kanto-pack.png') type('image/png'))}
}
