/* v3 art direction: collectible cards, cinematic stage, vault, sleeves */
.card{container-type:inline-size}
.card .f,.card .bk{border-radius:5.5cqw}
/* ---- card front: foil frame ---- */
.card .f{padding:3.6cqw;gap:0;border:0;--f1:#8a8f94;--f2:#e8ebee;--f3:#5c6168;--f4:#c9ced4;
 background:linear-gradient(var(--fa,135deg),var(--f1),var(--f2) 22%,var(--f3) 40%,var(--f4) 58%,var(--f2) 74%,var(--f3));
 box-shadow:0 22px 40px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.5)}
.t-uncommon .f{--f1:#1f7a4a;--f2:#d8ffe6;--f3:#2fae66;--f4:#a5f3fc}
.t-rare .f{--f1:#2b4fa0;--f2:#e0ecff;--f3:#6d5bd0;--f4:#7dd3fc}
.t-epic .f{--f1:#8a5208;--f2:#fff4cc;--f3:#c27c0e;--f4:#fde68a;box-shadow:0 22px 40px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.7)}
.card .face{position:relative;height:100%;display:flex;flex-direction:column;border-radius:3.4cqw;overflow:hidden;background:#0a0b0d;
 box-shadow:inset 0 0 0 .6cqw rgba(0,0,0,.55),0 0 0 .5cqw rgba(255,255,255,.35)}
.card .c-h{position:absolute;z-index:2;top:0;left:0;right:0;padding:3.6cqw 3.8cqw;display:flex;justify-content:space-between;align-items:center;
 font:600 4.4cqw/1 "JetBrains Mono",monospace;color:rgba(255,255,255,.88);letter-spacing:.04em;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.card .c-h .ser{text-shadow:0 1px 1px rgba(0,0,0,.6)}
.gem{width:8.4cqw;height:8.4cqw;transform:rotate(45deg);border-radius:1.4cqw;display:grid;place-items:center;--g1:#f1f3f5;--g2:#7c838b;
 background:linear-gradient(135deg,var(--g1) 0 45%,var(--g2) 55%),var(--g2);box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.55),inset -1cqw -1cqw 0 rgba(0,0,0,.25),0 .6cqw 1.2cqw rgba(0,0,0,.6)}
.gem b{transform:rotate(-45deg);font:800 4.2cqw/1 "Inter",sans-serif;color:rgba(0,0,0,.72)}
.t-uncommon .gem{--g1:#d8ffe6;--g2:#22a35a}.t-rare .gem{--g1:#dbeafe;--g2:#2f63c9}.t-epic .gem{--g1:#fff1bf;--g2:#d38a0b}
.card .c-art{flex:1;border:0;border-radius:0;box-shadow:none;min-height:0}
.plate{position:relative;margin:-9cqw 3cqw 3cqw;padding:3.4cqw 4cqw 3cqw;border-radius:2.6cqw;z-index:2;
 background:linear-gradient(180deg,#2a2d32,#15171a);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6),0 1.5cqw 3cqw rgba(0,0,0,.6),0 0 0 .4cqw color-mix(in srgb,var(--f2) 40%,transparent)}
.card .c-n{font:800 7.6cqw/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em;color:#f4f5f2;text-shadow:0 -1px 0 rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.12)}
.card .c-f{margin-top:1.8cqw;font:600 4.6cqw/1 "JetBrains Mono",monospace;display:flex;justify-content:space-between;color:#9aa09a;text-transform:uppercase;letter-spacing:.06em}
.card .c-f b{font-size:5.2cqw;letter-spacing:0;color:#e9ecef}
.card .c-h .r,.card .c-f .r{padding:0;background:none;color:inherit;font-size:inherit}
/* per-rarity holo: common none, uncommon sheen, rare prism lines, epic starburst cosmos */
.t-common .holo{opacity:.18;mix-blend-mode:soft-light;background:linear-gradient(120deg,transparent 35%,#fff 50%,transparent 65%);background-size:300% 300%;background-position:var(--bx,50%) var(--by,50%)}
.grid .card .holo,.ring .card .holo{opacity:.25}.grid .t-epic .holo,.ring .t-epic .holo{opacity:.5}
/* ---- card back ---- */
.card .bk{border:0;background:#0d2a1a;box-shadow:inset 0 0 0 3.6cqw #a7f3c6,inset 0 0 0 4.2cqw rgba(0,0,0,.45),0 22px 40px -16px rgba(0,0,0,.85)}
.card .bk::before{inset:4.2cqw;border-radius:3.4cqw;border:0;background:url(/crinkle.svg) center/cover,linear-gradient(150deg,#0f3d24,#06170d);opacity:1}
.bk-foil{position:absolute;inset:4.2cqw;border-radius:3.4cqw;mix-blend-mode:color-dodge;opacity:.45;background:repeating-linear-gradient(115deg,#0f3d24 0,#86efac 6%,#d8ffe6 9%,#a5f3fc 12%,#0f3d24 20%);background-size:300% 300%;background-position:var(--bx,40%) var(--by,40%)}
.bk-mark{position:relative;width:52%;filter:drop-shadow(0 2cqw 3cqw rgba(0,0,0,.6))}
.bk-t{position:absolute;bottom:9cqw;left:0;right:0;text-align:center;font:800 5cqw/1 "Bricolage Grotesque",sans-serif;letter-spacing:.24em;color:#d8ffe6}
.card .bk{display:flex;flex-direction:column;align-items:center;justify-content:center}
.card .bk i{display:none}
/* ---- stage ---- */
.stage4{position:relative;isolation:isolate;padding:36px 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:min(980px,calc(100vh - 30px))}
.stage4::before{content:"";position:absolute;z-index:-2;top:-80px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
 background:radial-gradient(60% 55% at 50% 42%,#1b211d 0,#0e110f 45%,#08090a 80%),#08090a}
.stage4::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);bottom:0;height:42%;
 background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 80px)}
.s4-light{position:absolute;z-index:-1;top:-80px;left:50%;transform:translateX(-50%);width:min(900px,120vw);height:70%;
 background:conic-gradient(from 160deg at 50% 0,transparent 0deg,rgba(230,255,240,.07) 14deg,rgba(230,255,240,.11) 20deg,rgba(230,255,240,.07) 26deg,transparent 40deg);pointer-events:none}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}
.s4-head h1{font:800 clamp(44px,7.4vw,112px)/.92 var(--disp);letter-spacing:-.045em;margin:14px 0 0;display:flex;flex-direction:column}
.s4-head h1 .l2{color:transparent;background:linear-gradient(100deg,#86efac,#e6fff0 45%,#86efac);-webkit-background-clip:text;background-clip:text}
.kicker{justify-content:center}
.stage4 .arena{position:relative;width:100%;height:clamp(480px,58vw,620px);display:grid;place-items:center;margin-top:-10px;perspective:1600px}
.stage4 .pack3{--w:clamp(250px,24vw,330px);--h:calc(var(--w)*1.47)}
.floor4{position:absolute;left:50%;bottom:4%;width:min(620px,90%);height:70px;transform:translateX(-50%);border-radius:50%;
 background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.4) 55%,transparent);z-index:0}
.stage4 .pack3 .front{-webkit-box-reflect:below 18px linear-gradient(transparent 62%,rgba(255,255,255,.14))}
.stage4 .shadow3{display:none}
.stage4 .hint{position:absolute;bottom:-6px;left:0;right:0;margin:0;font:500 13px/1.4 "JetBrains Mono",monospace;color:#8b918b}
.btn-again{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:6}
.s4-foot{width:100%;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:0;align-items:end;margin-top:26px;border-top:1px solid #1f2226;padding-top:22px;text-align:left}
.live-n{padding-right:20px}.live-n span{display:block;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d837d}
.live-n b{display:block;margin-top:10px;font:700 clamp(30px,3.6vw,52px)/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#f4f5f2}
.s4-cta{text-align:right}.s4-cta .mode{margin:10px 0 0;font-size:11.5px}
.s4-lede{max-width:640px;margin:34px auto 0;color:#a3a9a3;font-size:16.5px;line-height:1.6;text-align:center}
.fan .card{width:clamp(130px,15vw,210px);margin-left:calc(clamp(130px,15vw,210px)/-2);margin-top:calc(clamp(130px,15vw,210px)*-.7)}
/* ---- vault carousel ---- */
.show{padding-top:40px}.show .sub{color:#9aa09a;margin:-6px 0 0}
.carousel{height:500px;perspective:1800px;display:grid;place-items:center;overflow:hidden;margin:0 -24px;
 mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ring{position:relative;width:220px;height:308px;transform-style:preserve-3d;animation:spin 48s linear infinite}
.carousel:hover .ring{animation-play-state:paused}
.ring .slot{position:absolute;inset:0;transform-style:preserve-3d}.ring .card{width:220px;backface-visibility:hidden}
@keyframes spin{from{transform:translateZ(calc(var(--r)*-1)) rotateY(0)}to{transform:translateZ(calc(var(--r)*-1)) rotateY(-360deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none;transform:translateZ(calc(var(--r)*-1))}}
/* ---- binder ---- */
.grid{gap:30px 22px}
.sleeve{position:relative;padding:8px 8px 10px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 40%,rgba(255,255,255,.05));
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sleeve::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:10px;border-radius:6px 6px 0 0;border-bottom:1px solid rgba(255,255,255,.14);z-index:5;pointer-events:none}
.sleeve::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:5;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 38%,transparent 46%)}
.sleeve:hover{transform:translateY(-10px) rotate(-.6deg)}.grid .card:hover{transform:none}
.sleeve:hover .card .f{box-shadow:0 34px 50px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.6)}
.filt button{border:0;border-radius:999px;padding:9px 16px;font:700 12px/1 "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:#cfd3cd;
 background:linear-gradient(180deg,#1e2024,#141518);box-shadow:inset 0 0 0 1px #2c2f35,inset 0 1px 0 rgba(255,255,255,.08)}
.filt button.on{color:#07140c;background:linear-gradient(120deg,#86efac,#e6fff0 40%,#a5f3fc 60%,#86efac);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px -6px rgba(0,0,0,.8)}
.filt button[data-t=epic].on{background:linear-gradient(120deg,#d38a0b,#fff1bf 40%,#fbbf24 60%,#d38a0b)}
.filt button[data-t=rare].on{background:linear-gradient(120deg,#60a5fa,#e0ecff 40%,#c4b5fd 60%,#60a5fa)}
.filt button[data-t=common].on{background:linear-gradient(120deg,#9aa09a,#f1f3f5 40%,#c9ced4 60%,#9aa09a)}
.snd{font:600 12px/1 "JetBrains Mono",monospace;color:#9aa09a;background:none;border:1px solid #2a2d33;border-radius:999px;padding:7px 12px;margin-right:14px;cursor:pointer}
.snd[aria-pressed=true]{color:#07140c;background:#86efac;border-color:#86efac}
@media (max-width:860px){
 .stage4{min-height:0;padding-top:22px}
 .s4-head h1{font-size:clamp(40px,12vw,64px)}
 .stage4 .arena{height:520px}
 .stage4 .pack3{--w:230px}
 .s4-foot{grid-template-columns:1fr 1fr;gap:18px 0}.s4-cta{grid-column:1/-1;text-align:left}.s4-cta .btn-rip{width:100%}
 .live-n:nth-child(3){grid-column:1/-1}
 .fan .card{width:118px;margin-left:-59px;margin-top:-82px}
 .carousel{height:380px;margin:0 -16px}.ring,.ring .card{width:160px}.ring{height:224px}
 .grid{gap:18px 12px}.sleeve{padding:5px 5px 7px}
 .snd{margin-right:8px;padding:6px 9px}
}
.stage4 .arena{margin-left:0}
.stage4 .pack3.ripping .front,.stage4 .pack3.ripped .front,.stage4 .pack3.gone .front{-webkit-box-reflect:none}
.s4-head h1{font-size:clamp(44px,6.2vw,92px)}
.stage4 .arena{height:clamp(470px,44vw,580px)}
.live-n b{white-space:nowrap;font-size:clamp(26px,3vw,44px)}
@media (max-width:860px){.s4-head h1{font-size:clamp(40px,12vw,60px)}.stage4 .arena{height:500px}}
.stage4 .hint{transform:none;width:auto;left:16px;right:16px;top:auto}
.s4-cta{display:flex;flex-direction:column;align-items:flex-end}.live-n span{white-space:nowrap}
@media (max-width:860px){.s4-cta{align-items:stretch}.fan .card{width:108px;margin-left:-54px;margin-top:-76px}}
.ring{animation-name:spin2}@keyframes spin2{from{transform:translateZ(calc(var(--r)*-1)) rotateX(-6deg) rotateY(0)}to{transform:translateZ(calc(var(--r)*-1)) rotateX(-6deg) rotateY(-360deg)}}
/* CA strip */
.ca{display:block;height:32px;padding:0;background:#07080a;color:#9aa09a;position:relative;font-size:12px}
.ca::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#3fd17a 20%,#a5f3fc 40%,#c4b5fd 55%,#d8ffe6 70%,#3fd17a 85%,transparent);opacity:.55}
.ca-in{max-width:1180px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace}
.ca-tk{color:#e9ecef;font-weight:700;letter-spacing:.04em}.ca-sep{width:1px;height:12px;background:#2a2d33}
.ca-l{font-weight:700;font-size:10.5px;letter-spacing:.14em;color:#6c726c}
.ca code{color:#a3a9a3;font-size:12px;max-width:none;flex:0 1 auto;min-width:0}
.ca button{font:700 11px/1 "JetBrains Mono",monospace;color:#062012;border:0;border-radius:999px;padding:5px 11px;cursor:pointer;
 background:linear-gradient(180deg,#b6f7cd,#6ee09a);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.5)}
.ca button:disabled{opacity:.45;cursor:default}.ca button.ok{background:linear-gradient(180deg,#f4f5f2,#cfd3cd)}
.ca-pf{margin-left:auto;color:#7d837d;text-decoration:none;font-size:11.5px}.ca-pf:hover{color:#d8ffe6}
@media (max-width:600px){.ca-in{padding:0 16px;gap:8px}.ca-pf{display:none}.ca code{overflow:hidden;text-overflow:ellipsis}}
.ca button{margin:0;height:20px;padding:0 11px;display:inline-flex;align-items:center}.ca-in>*{flex-shrink:0}.ca code{flex-shrink:1}
.ca{z-index:40}.top{z-index:35}