/* ===== demo common ===== */
@font-face{font-family:"Orbitron";src:url(/v3/orbitron-900.woff2) format("woff2");font-weight:400 900;font-display:optional}
@font-face{font-family:"Chakra Petch";src:url(/v3/chakra-700.woff2) format("woff2");font-weight:700;font-display:optional}
@font-face{font-family:"Chakra Petch";src:url(/v3/chakra-600.woff2) format("woff2");font-weight:600;font-display:optional}
:root{--disp:"Orbitron","Arial Narrow",system-ui,sans-serif;--head:"Chakra Petch","Arial Narrow","Roboto Condensed",system-ui,sans-serif}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden}
.brand{font-family:var(--disp);font-weight:900;font-size:18px}
h1{font-family:var(--disp);font-weight:900;letter-spacing:.04em}
body.legal h1{font-family:var(--head)}
.home h2{font-family:var(--disp);font-weight:800;letter-spacing:.08em}
.tag{font-family:var(--disp);font-weight:800;letter-spacing:.06em}
/* scroll reveal (only below-the-fold items are ever hidden, and only when JS runs) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}
.appstore{backdrop-filter:blur(6px)}

/* tap targets */
.brand{display:inline-flex;align-items:center;min-height:44px}
.navlinks a{display:inline-flex;align-items:center;min-height:32px}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--cyan)}
/* ===== A: CINEMATIC ===== */
body[data-site=v3]{background:var(--bg)}
.para{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.para i{position:absolute;left:-10%;right:-10%;display:block;will-change:transform}
.para .p1{top:0;height:140vh;background:radial-gradient(ellipse 60% 40% at 20% 20%,#ff2bd622,transparent 70%),radial-gradient(ellipse 50% 35% at 85% 35%,#00f0ff1c,transparent 70%),radial-gradient(ellipse 80% 50% at 50% 100%,#6a00ff22,transparent 70%)}
.para .p2{bottom:-30vh;height:70vh;opacity:.55}
.para .p3{bottom:-20vh;height:50vh;opacity:.8}
body.legal .para{opacity:.5}
/* hero */
.home.v3 main{padding-top:0}
.cine{position:relative;margin:0 calc(50% - 50vw);width:100vw;min-height:calc(100svh - 46px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.cine-bg{position:absolute;inset:0;z-index:-2;background:#05030d}
.cine-bg video{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.cine-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 3px),radial-gradient(ellipse at 50% 45%,#0000 30%,#05030dcc 85%),linear-gradient(180deg,#05030d99,#0000 25%,#0000 55%,#05030d 100%)}
.cine-fx::after{content:"";position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(180deg,#0000,#00f0ff10,#0000);animation:sweep 5.5s linear infinite}
@keyframes sweep{to{top:110%}}
.cine-in{width:100%;max-width:1180px;margin:0 auto;padding:40px 20px 80px;display:grid;gap:30px;align-items:center}
.cine-copy{text-align:center}
.cine .sub{font-size:18px;color:#e3ecff;max-width:44ch;margin:10px auto 0;text-shadow:0 2px 12px #000}
.cine .tag{font-size:clamp(17px,4.4vw,30px);margin:16px 0 0;text-shadow:-2px 0 #00f0ffaa,2px 0 #ff2b55aa,0 0 22px #ff2bd666}
.logo-glitch{position:relative;display:inline-block;max-width:min(460px,86vw)}
.logo-glitch img{display:block;width:100%;filter:drop-shadow(0 0 22px #ff2bd677) drop-shadow(0 0 2px #00f0ff)}
.logo-glitch .gl{position:absolute;inset:0;background:url(/logo.webp) center/100% 100% no-repeat;opacity:0;mix-blend-mode:screen;pointer-events:none}
.phone{display:none}
.cue{position:absolute;left:50%;bottom:18px;width:26px;height:42px;margin-left:-13px;border:2px solid #00f0ffaa;border-radius:14px;box-shadow:0 0 12px #00f0ff55}
.cue span{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--cyan);animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(min-width:900px){
 .cine-in{grid-template-columns:1.15fr .85fr;padding:30px 32px 70px}
 .cine-copy{text-align:left}.cine .sub{margin-left:0}.cine .cta{justify-content:flex-start}
 .cine-bg video{filter:blur(16px) saturate(1.4);transform:scale(1.15);opacity:.5}
 .phone{display:block;position:relative;justify-self:center;width:min(330px,26vw);aspect-ratio:886/1920;border-radius:42px;padding:10px;background:linear-gradient(145deg,#2a1f55,#0b0718);
  box-shadow:0 0 0 1px #00f0ff66,0 0 40px #00f0ff44,0 0 90px #ff2bd633,0 30px 80px #000;transform:perspective(1200px) rotateY(-14deg) rotateX(4deg);transition:transform .6s}
 .phone:hover{transform:perspective(1200px) rotateY(-4deg) rotateX(1deg)}
 .phone video{width:100%;height:100%;object-fit:cover;border-radius:32px;display:block;background:#000}
 .phone .notch{position:absolute;top:18px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#000;z-index:1}
}
/* intro sequence */
@media(prefers-reduced-motion:no-preference){
 .cine.intro .logo-glitch img{animation:lgIn 1.1s steps(1) both}
 .cine.intro .logo-glitch .g1{animation:gl1 1.1s steps(1) both}
 .cine.intro .logo-glitch .g2{animation:gl2 1.1s steps(1) both}
 .cine.intro .sub{animation:upT .8s .2s cubic-bezier(.2,.7,.2,1) both}.cine.intro .cta{animation:up .8s 1s cubic-bezier(.2,.7,.2,1) both}
 .cine.intro .phone{animation:phIn 1.2s .5s cubic-bezier(.2,.7,.2,1) both}
 .logo-glitch:hover .g1{animation:gl1 .6s steps(1)}.logo-glitch:hover .g2{animation:gl2 .6s steps(1)}
}
@keyframes lgIn{0%{opacity:0}10%{opacity:1;clip-path:inset(40% 0 45% 0)}20%{clip-path:inset(0 0 70% 0)}30%{opacity:0}40%{opacity:1;clip-path:inset(60% 0 0 0)}55%{clip-path:inset(10% 0 30% 0)}70%,100%{opacity:1;clip-path:none}}
@keyframes gl1{0%,100%{opacity:0}15%{opacity:.9;transform:translate(-8px,0);clip-path:inset(20% 0 60% 0);filter:hue-rotate(160deg)}35%{opacity:.9;transform:translate(6px,0);clip-path:inset(65% 0 10% 0)}55%{opacity:.7;transform:translate(-3px,0);clip-path:inset(40% 0 40% 0)}75%{opacity:0}}
@keyframes gl2{0%,100%{opacity:0}20%{opacity:.8;transform:translate(9px,0);clip-path:inset(55% 0 20% 0);filter:hue-rotate(-90deg)}45%{opacity:.8;transform:translate(-7px,0);clip-path:inset(5% 0 75% 0)}65%{opacity:.6;transform:translate(4px,0);clip-path:inset(30% 0 50% 0)}85%{opacity:0}}
@keyframes upT{from{transform:translateY(18px)}to{transform:none}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes phIn{from{opacity:0;transform:perspective(1200px) rotateY(-40deg) translateX(80px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.cine-fx::after,.cue span{animation:none}}
/* first look rail */
.firstlook{position:relative;padding:40px 0 10px;overflow:hidden;margin:0 calc(50% - 50vw);width:100vw}
.firstlook .kicker,.firstlook h2{text-align:center;max-width:1120px;margin-left:auto;margin-right:auto;padding:0 16px}
.kicker{font:700 13px/1 var(--head);letter-spacing:.4em;color:var(--pink);margin:0}
.home h2.big{font-size:clamp(24px,5.5vw,44px);border:0;margin:.3em auto .8em;color:#fff;text-shadow:0 0 18px #00f0ff88,3px 0 #ff2b55}
.rail{display:flex;gap:18px;padding:10px 6vw 30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;will-change:transform}
.rail::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;width:min(62vw,250px);margin:0;scroll-snap-align:center;border-radius:22px;overflow:hidden;border:1px solid #00f0ff55;box-shadow:0 0 0 1px #ff2bd622,0 18px 50px #000,0 0 30px #00f0ff22;transition:transform .4s}
.shot img{display:block;width:100%;height:auto}
.shot:nth-child(even){transform:translateY(26px)}
@media(min-width:900px){.rail{overflow:visible;justify-content:center;padding:10px 0 50px}.shot{width:200px}.shot:hover{transform:translateY(-10px) scale(1.04)}.shot:nth-child(even):hover{transform:translateY(16px) scale(1.04)}}
/* section headings glitch-wipe in */
.home h2.rv,.rv h2{transition-duration:.6s}
.home main h2.rv.in{animation:h2in .7s steps(6) both}
@keyframes h2in{0%{clip-path:inset(0 100% 0 0);text-shadow:4px 0 var(--red),-4px 0 var(--cyan)}100%{clip-path:inset(0 0 0 0)}}
.pillar{background:linear-gradient(160deg,#120a2bcc,#0d0820cc);backdrop-filter:blur(6px)}
.tile{transition:transform .3s,box-shadow .3s}

@media(max-width:899px){.cine-bg video{opacity:.32}.cine-fx{background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 3px),linear-gradient(180deg,#05030dee 0,#05030d88 30%,#05030d66 50%,#05030dee 85%,#05030d 100%)}
 .cine{align-items:flex-end}.cine-in{padding-bottom:70px}}
/* ===== B: INTERACTIVE CARDS ===== */
.sparks{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
.bhero{display:grid;gap:10px;align-items:center;padding:20px 0 10px;min-height:min(760px,calc(100svh - 50px))}
.bh-copy{text-align:center;position:relative;z-index:2}
.bh-copy img{max-width:min(400px,80%);filter:drop-shadow(0 0 18px #ff2bd655)}
.bhero .tag{font-size:clamp(16px,4.4vw,26px);margin:10px 0}
.bhero .sub{color:#d8e8ff;max-width:46ch;margin:0 auto}
.gyro{margin-top:8px;font-size:12px;padding:6px 12px}
.btn.sm{padding:4px 10px;font-size:12px;vertical-align:middle;margin-left:8px}
/* fan of holo cards */
.fan{position:relative;height:clamp(300px,82vw,440px);perspective:1100px;margin:0 auto;width:100%;max-width:620px;--px:0;--py:0;order:-1}
.holo{position:absolute;left:50%;top:50%;width:clamp(128px,34vw,200px);aspect-ratio:5/7;margin:0;text-decoration:none;color:#fff;transform-style:preserve-3d;
 --rot:0deg;--tx:0px;--ty:0px;--z:0px;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--rot)) translateZ(var(--z));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.holo .hc-in{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#1a0f3d,#0a0619);border:2px solid var(--rc);
 box-shadow:0 0 0 1px #0008,0 14px 40px #000c,0 0 24px color-mix(in srgb,var(--rc) 45%,transparent);transform:rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));transition:transform .15s ease-out}
.holo.combo .hc-in{border-color:var(--cyan);box-shadow:-5px 0 22px #00f0ff77,5px 0 22px #ff2b5577,0 14px 40px #000c}
.holo img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.holo b{position:absolute;left:0;right:0;bottom:0;padding:10px 8px 12px;font:700 clamp(12px,3vw,16px)/1.1 var(--head);letter-spacing:.06em;text-transform:uppercase;text-align:center;background:linear-gradient(0deg,#05030d,#05030dcc 60%,#0000)}
.holo .cost{top:8px;left:8px}
.shine,.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.shine{--mx:50%;--my:50%;opacity:.22;mix-blend-mode:color-dodge;-webkit-mask:radial-gradient(circle at var(--mx) var(--my),#000 0,#0008 35%,#0000 70%);mask:radial-gradient(circle at var(--mx) var(--my),#000 0,#0008 35%,#0000 70%);background:
 repeating-linear-gradient(115deg,#ff2bd6 0%,#00f0ff 6%,#ffe600 12%,#00ff9c 18%,#ff2bd6 24%) calc(var(--mx)*1.2) calc(var(--my)*1.2)/300% 300%,
 repeating-linear-gradient(55deg,#0000 0 6px,#ffffff18 6px 7px);filter:saturate(1.3) contrast(1.1);transition:opacity .3s}
.glare{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffffaa 0,#ffffff22 18%,#0000 45%);mix-blend-mode:overlay;opacity:.8}
.f0{--rot:-18deg;--tx:-62%;--ty:6%;z-index:1}.f1{--rot:-9deg;--tx:-32%;--ty:-2%;z-index:2}.f2{--rot:0deg;--tx:0px;--ty:-6%;z-index:3;--z:30px}.f3{--rot:9deg;--tx:32%;--ty:-2%;z-index:2}.f4{--rot:18deg;--tx:62%;--ty:6%;z-index:1}
.f0,.f1,.f2,.f3,.f4{transform:translate(-50%,-50%) translate(calc(var(--tx) * 1),var(--ty)) rotate(var(--rot)) translateZ(var(--z))}
.fan .holo{transform:translate(-50%,-50%) translateX(calc(var(--tx))) translateY(var(--ty)) rotate(var(--rot)) translateZ(var(--z))}
.fan .holo:hover,.fan .holo:focus-visible{--z:90px;z-index:5;--ty:-12%}
.fan .holo.f0{--tx:-150%}.fan .holo.f1{--tx:-80%}.fan .holo.f3{--tx:80%}.fan .holo.f4{--tx:150%}
@media(max-width:520px){.fan{height:300px}.holo{width:116px}.fan .holo.f0{--tx:-104%;--ty:10%}.fan .holo.f1{--tx:-56%}.fan .holo.f3{--tx:56%}.fan .holo.f4{--tx:104%;--ty:10%}}
.fan-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--py)*-8deg)) rotateY(calc(var(--px)*12deg));transition:transform .2s ease-out}
@media(prefers-reduced-motion:no-preference){.fan.deal .holo{animation:deal .9s cubic-bezier(.2,.8,.2,1) both}.fan.deal .f0{animation-delay:.05s}.fan.deal .f1{animation-delay:.15s}.fan.deal .f2{animation-delay:.25s}.fan.deal .f3{animation-delay:.35s}.fan.deal .f4{animation-delay:.45s}
 .fan.idle .fan-in{animation:float 6s ease-in-out infinite}}
@keyframes deal{from{opacity:0;transform:translate(-50%,40%) rotate(0deg) translateZ(-200px) rotateY(180deg)}}
@keyframes float{0%,100%{transform:rotateX(4deg) rotateY(-8deg)}50%{transform:rotateX(-4deg) rotateY(8deg)}}
@media(min-width:900px){.bhero{grid-template-columns:1fr 1.1fr}.bh-copy{text-align:left}.bhero .sub{margin:0}.bhero .cta{justify-content:flex-start}.fan{order:0;height:480px}}
/* tilt on all tiles */
.tile{transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;will-change:transform}
.tile.tilting{transition:transform .06s linear,box-shadow .3s}
.tile .shine{opacity:0}.tile:hover .shine,.tile.tilting .shine{opacity:.45}
.holo:hover .shine,.fan:hover .shine{opacity:.5}
.gyro[hidden]{display:none}
.cardhero .art{transform-style:preserve-3d;transition:transform .2s ease-out;perspective:900px}
.cardhero .art .tw{position:relative;display:block;border-radius:14px;overflow:hidden;transition:transform .12s ease-out}
.cardhero .art .tw img{border:0!important;display:block;border-radius:0}
.cardhero .art .tw{border:3px solid var(--rc);box-shadow:0 0 24px color-mix(in srgb,var(--rc) 45%,transparent)}
/* flip cards */
.hint{margin-top:-6px}
.flips{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:700px){.flips{grid-template-columns:repeat(4,1fr)}}
.flip{perspective:1000px;display:flex;flex-direction:column;gap:6px}
.flip-in{position:relative;display:block;width:100%;aspect-ratio:5/7;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:14px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--rc);background:linear-gradient(160deg,#1a0f3d,#0a0619);box-shadow:0 0 16px color-mix(in srgb,var(--rc) 35%,transparent);display:flex;flex-direction:column}
.flip.combo .face{border-color:var(--cyan);box-shadow:-4px 0 16px #00f0ff55,4px 0 16px #ff2b5555}
.face.front img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.face.front b{font:700 15px/1.15 var(--head);letter-spacing:.05em;text-transform:uppercase;padding:8px 10px 4px}
.face.front .rar{align-self:flex-start;margin:0 10px}
.tapme{margin-top:auto;padding:6px 10px;font:700 10px/1 var(--head);letter-spacing:.2em;color:var(--dim)}
.face.back{transform:rotateY(180deg);padding:12px;gap:6px;background:linear-gradient(160deg,#120a2b,#05030d),var(--panel)}
.face.back::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#0000 0 10px,color-mix(in srgb,var(--rc) 10%,transparent) 10px 11px);pointer-events:none}
.face.back b{font:700 16px/1.1 var(--head);text-transform:uppercase;color:var(--rc)}
.face.back .role{font:700 11px/1 var(--head);letter-spacing:.12em;color:var(--yel);text-transform:uppercase}
.face.back dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:6px 0;font-size:13px}.face.back dt{color:var(--dim)}.face.back dd{margin:0;font-weight:700;text-align:right}
.face.back .one{font-size:12px;color:#d8e8ff;line-height:1.35}
.face.back .lvl{margin-top:auto;font:700 10px/1 var(--head);letter-spacing:.2em;color:var(--dim)}
.flip-link{display:block;padding:12px 0;font:700 12px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center}
@media(prefers-reduced-motion:reduce){.flip-in{transition:none}.holo,.holo .hc-in,.tile{transition:none}}
/* deck builder */
.deckb{margin-top:30px;background:linear-gradient(160deg,#120a2b,#0a0619);border:1px solid var(--line);border-radius:18px;padding:4px 16px 18px;box-shadow:0 0 40px #6a00ff22 inset}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}@media(min-width:700px){.slots{grid-template-columns:repeat(8,1fr)}}
.slot{aspect-ratio:1;border-radius:10px;border:1px dashed #00f0ff55;background:#05030d88;position:relative;overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot.fill{border:2px solid var(--rc);box-shadow:0 0 12px color-mix(in srgb,var(--rc) 45%,transparent)}
@media(prefers-reduced-motion:no-preference){.slot.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}}
@keyframes pop{from{transform:scale(.4) rotate(-8deg);opacity:0}}
.slot .cost{width:22px;height:22px;font-size:12px;line-height:22px;top:3px;left:3px}
.deckstat{font:600 15px/1.4 var(--head);letter-spacing:.05em}.deckstat b{color:var(--yel)}
.pool{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}@media(min-width:700px){.pool{grid-template-columns:repeat(8,1fr)}}
.pc{position:relative;padding:0;border:2px solid var(--rc);border-radius:10px;overflow:hidden;background:#000;cursor:pointer;color:#fff;transition:transform .2s,opacity .2s,filter .2s}
.pc img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pc .cost{width:22px;height:22px;font-size:12px;line-height:22px;top:3px;left:3px}
.pc .nm{display:block;font:700 10px/1.15 var(--head);letter-spacing:.04em;text-transform:uppercase;padding:4px 3px;background:#0d0820}
.pc[aria-pressed=true]{filter:grayscale(.85) brightness(.8)}.pc[aria-pressed=true] img{opacity:.45}.pc[aria-pressed=true]::after{content:"\2713";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#00f0ff;color:#04020c;font:700 13px/22px var(--head);text-align:center}.pc:hover{transform:translateY(-3px)}
.pc:disabled{cursor:not-allowed}
.face.back .bgart{position:absolute;left:0;right:0;bottom:0;width:100%;aspect-ratio:1;object-fit:cover;opacity:.28;-webkit-mask:linear-gradient(0deg,#000 10%,#0000 85%);mask:linear-gradient(0deg,#000 10%,#0000 85%);pointer-events:none;z-index:-1}
.face.back{isolation:isolate}
/* ===== site-v3: A (cinematic) + B (holo cards) + polish ===== */
/* hero: still slideshow (used until a new gameplay loop is dropped into media/hero.mp4) */
.slides{position:absolute;inset:0;overflow:hidden}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;display:block}
.slides img:first-child{opacity:1}
.cine-bg .slides{opacity:.5}
@media(min-width:900px){.cine-bg .slides{filter:blur(14px) saturate(1.35);transform:scale(1.15);opacity:.45}
 .phone .slides{position:absolute;inset:10px;border-radius:32px;background:#000}}
@media(max-width:899px){.cine-bg .slides{opacity:.38}}
@media(prefers-reduced-motion:no-preference){
 .slides img{animation:xf 20s linear infinite both}
 .slides img:nth-child(2){animation-delay:5s}.slides img:nth-child(3){animation-delay:10s}.slides img:nth-child(4){animation-delay:15s}
 .cine.off .slides img{animation-play-state:paused}}
@keyframes xf{0%{opacity:0;transform:scale(1.1)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.prerel{font:600 12px/1.4 var(--head);letter-spacing:.08em;color:var(--dim);text-align:center;margin:-10px auto 6px;padding:0 16px}
/* first-look rail with captions */
.shot{position:relative}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;font:700 13px/1.1 var(--head);letter-spacing:.12em;text-transform:uppercase;text-align:center;color:#fff;background:linear-gradient(0deg,#05030d,#05030dcc 55%,#0000)}
/* arenas page: portrait art + tower showcase */
.arena img{aspect-ratio:3/4;object-fit:cover;height:auto}
.towers{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin:8px 0 18px}
.towers figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.towers img{display:block;width:100%;height:auto}
.towers figcaption{padding:10px 12px;font-size:14px;color:#d8e8ff}
.towers figcaption b{display:block;font:700 13px/1.2 var(--head);letter-spacing:.12em;color:var(--cyan);text-transform:uppercase;margin-bottom:2px}
@media(max-width:520px){.towers{grid-template-columns:1fr}}
/* card detail: flip the art for level 1 stats */
.cardhero .art .tw{cursor:pointer;outline-offset:4px}
.fl3{position:relative;display:block;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.art.on .fl3{transform:rotateY(180deg)}
.fl3 .ff{display:block;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl3 .bk{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:6px;padding:14px;
 background:linear-gradient(160deg,#120a2b,#05030d);overflow:hidden;text-align:left}
.fl3 .bk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#0000 0 10px,color-mix(in srgb,var(--rc) 12%,transparent) 10px 11px);pointer-events:none}
.fl3 .bk b{font:700 18px/1.1 var(--head);text-transform:uppercase;color:var(--rc)}
.fl3 .bk dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:4px 0;font-size:14px}.fl3 .bk dt{color:var(--dim)}.fl3 .bk dd{margin:0;font-weight:700;text-align:right}
.fl3 .bk .lvl{margin-top:auto;font:700 11px/1 var(--head);letter-spacing:.2em;color:var(--dim)}
.art.on .cost{opacity:0}
.fliphint{font:700 11px/1 var(--head);letter-spacing:.2em;color:var(--dim);text-align:center;margin:8px 0 0;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.fl3{transition:none}}
/* /cards extras */
.flipsec{margin:10px 0 24px}
.flipsec h2,.deckb h2{font-family:var(--disp);font-weight:800;letter-spacing:.08em}
/* polish: tap targets */
.consent{position:relative;display:flex;gap:12px;align-items:center;min-height:48px;padding:10px 12px;margin:14px 0 6px;border:1px solid var(--line);border-radius:12px;background:#0d082088;cursor:pointer}
.consent input{width:24px!important;height:24px!important;margin:0!important;flex:0 0 24px;cursor:pointer}
.consent:hover,.consent:focus-within{border-color:var(--cyan)}
.consent a{display:inline-block;padding:6px 2px;margin:-6px 0}
.step a[href="/combos"]{display:inline-block;padding:11px 2px;margin:-11px 0}
.brand{min-height:44px;padding:0 4px}
/* store: coming soon (no checkout) */
.pack .soonpill{display:inline-block;margin-top:8px;padding:7px 14px;border:1px dashed var(--yel,#ffe600);border-radius:999px;font:700 12px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--yel,#ffe600);background:#ffe60010}
.checkoutinfo h2{margin-top:26px}