/* =====================================================================
   GROYPER WARS v2 — "MISPRINT" art direction layer.
   Loaded after styles.css; overrides palette/type/effects only, so v1
   structure + JS hooks stay identical (easy merge).
   Inks: mustard ground, teal ground, black ink, red plate, cream, khaki.
   ===================================================================== */
/* self-hosted fonts (latin subsets + katakana-only subset of Dela Gothic One), OFL */
@font-face{font-family:'Anton';src:url(fonts/anton.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(fonts/bebas.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Oswald';src:url(fonts/oswald.woff2) format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/jbm.woff2) format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'Dela Gothic One';src:url(fonts/dela-kata.woff2) format('woff2');font-weight:400;font-display:swap}
:root{
  --mus:#E8B820; --teal:#1F5C55; --teal2:#2E7F75; --red:#E03A22; --k:#141210; --cream:#F3E6C4; --khaki:#D9B46A;
  --ink:var(--k); --paper:var(--cream); --hot:var(--mus); --p1b:var(--khaki); --opp:var(--red);
  --cond:'Anton','Bebas Neue',Impact,'Arial Narrow',sans-serif; --tag:'Oswald','Anton',sans-serif;
  --disp:'Bebas Neue','Anton',Impact,sans-serif; --jp:'Dela Gothic One','Noto Sans JP',sans-serif;
  --mis:2px 1.5px 0 var(--red);           /* red plate misregistration */
  --mis2:-1.5px -1px 0 rgba(31,92,85,.7);  /* teal plate */
}
html,body{background:var(--k);color:var(--k)}
html{height:100%;height:100dvh}
.stage{height:100vh;height:100dvh}
#gl{filter:contrast(1.04) saturate(1.04)}
.grain{opacity:.16;mix-blend-mode:multiply}
/* paper texture + fixed halftone screen (also the no-WebGL fallback look) */
.paper{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background:
   radial-gradient(rgba(20,18,16,.18) 1px,transparent 1.4px) 0 0/5px 5px,
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask:radial-gradient(120% 90% at 50% 40%,transparent 35%,#000 100%);mask:radial-gradient(120% 90% at 50% 40%,transparent 35%,#000 100%)}
.no-gl .paper{opacity:.9;-webkit-mask:none;mask:none}

/* vertical katakana side labels */
.kata{position:absolute;z-index:4;pointer-events:none;writing-mode:vertical-rl;text-orientation:upright;font:400 clamp(20px,2.4vw,34px)/1 var(--jp);letter-spacing:.06em;white-space:nowrap;filter:url(#rough)}
.kata-r{right:max(8px,.6vw);top:50%;transform:translateY(-50%);color:var(--red);text-shadow:2px 2px 0 var(--k)}
.kata-l{left:max(8px,.6vw);top:140px;color:var(--k);text-shadow:var(--mis);font-size:clamp(16px,1.6vw,24px);opacity:.85}

/* poster lockup: stacked "X VS Y" */
.lockup{position:absolute;z-index:6;pointer-events:none;right:calc(min(31vw,440px) + 3.5vw);bottom:calc(var(--bot) + 18px);display:flex;flex-direction:column;align-items:flex-end;text-align:right;filter:url(#rough);max-width:28vw}
.lockup span{display:block;font:400 clamp(30px,3.7vw,58px)/.86 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.lk-a{color:var(--k);text-shadow:3px 2px 0 var(--red)}
.lk-vs{color:var(--red)!important;font-family:var(--cond)!important;font-size:clamp(20px,2vw,30px)!important;margin:.08em 0;padding:0 .3em;background:var(--k);transform:rotate(-4deg)}
.lk-b{color:var(--khaki);text-shadow:3px 2px 0 var(--red),-1px -1px 0 var(--k)}
.lockup small{margin-top:8px;font:700 8.5px var(--mono);letter-spacing:.2em;color:var(--cream);background:var(--k);padding:3px 6px}

/* HUD */
.hp-name{font-family:var(--disp);font-size:18px;letter-spacing:.06em}
.hp-l .hp-name{color:var(--k);text-shadow:var(--mis)}
.hp-r .hp-name{color:var(--khaki);text-shadow:1.5px 1.5px 0 var(--k)}
.hp-track{background:var(--k);border:2px solid var(--k);box-shadow:3px 3px 0 var(--red)}
.hp-r .hp-track{box-shadow:-3px 3px 0 var(--red)}
.hp-fill{background:repeating-linear-gradient(90deg,var(--cream) 0 3px,#efe0b4 3px 4px)}
.hp-r .hp-fill{background:repeating-linear-gradient(90deg,var(--khaki) 0 3px,#cfa95c 3px 4px)}
.hp-fill.low,.hp-r .hp-fill.low{background:var(--red)}
.hp-lag{background:var(--red);opacity:.65}
.timer{background:var(--red);border:0;clip-path:polygon(50% 0,62% 18%,82% 8%,80% 30%,100% 38%,84% 54%,98% 74%,76% 76%,72% 100%,56% 84%,40% 100%,32% 80%,8% 86%,16% 64%,0 48%,18% 36%,10% 12%,34% 18%)}
.timer{width:74px;height:66px}
.timer span{color:var(--cream);font-family:var(--disp);font-size:36px;text-shadow:2px 2px 0 var(--k)}
.smw{color:var(--k)} .hp-r .smw{color:var(--cream)}
.sm{background:rgba(20,18,16,.35);border-color:var(--k)}
.sm i{background:var(--k)} .hp-r .sm i{background:var(--cream)}
.smw.ready{color:var(--red)} .smw.ready .sm{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.smw.ready .sm i{background:repeating-linear-gradient(90deg,var(--red) 0 6px,var(--cream) 6px 9px)}
.brand{transform:rotate(-2deg);filter:url(#rough);align-items:center}
.brand-k{font-family:var(--disp);font-size:30px;color:var(--k);text-shadow:var(--mis)}
.brand-s{font-family:var(--disp);font-size:30px;color:var(--red);text-shadow:2px 2px 0 var(--k)}
.brand-j{font:400 22px/1 var(--jp);color:var(--cream);background:var(--red);padding:2px 4px;margin-left:2px;box-shadow:2px 2px 0 var(--k)}
.pill{background:var(--k);color:var(--cream);border:0;font-weight:700;min-height:34px}
.pill:hover,.pill.on{background:var(--cream);color:var(--k)}
.pill-sc{background:var(--red);color:var(--cream);animation:none;box-shadow:none}
.pill-sc i{background:var(--cream);color:var(--red)}
.mode{color:var(--k)}

/* side panels */
.slot{font-weight:700;opacity:1}
.side-l .slot{color:var(--k)} .side-r .slot{color:var(--khaki)}
.name{font-family:var(--disp);letter-spacing:.005em;-webkit-text-stroke:0;filter:url(#rough);line-height:.84}
.side-l .name{color:var(--k);text-shadow:4px 3px 0 var(--red),-2px -1px 0 rgba(31,92,85,.55)}
.side-r .name{color:var(--khaki);text-shadow:4px 3px 0 var(--red),7px 6px 0 var(--k)}
.tag{font:500 12px/1 var(--tag);letter-spacing:.04em;text-transform:uppercase;background:var(--k);color:var(--mus);box-shadow:2px 2px 0 var(--red)}
.tag:nth-child(2){background:var(--cream);color:var(--k)}
.tag:nth-child(3){background:var(--red);color:var(--cream)}
.side-r .tag{background:var(--khaki);color:var(--k)}
.side-r .tag:nth-child(2){background:var(--cream)}
.side-r .tag:nth-child(3){background:var(--red);color:var(--cream)}
.tag sup{opacity:.75}
.stats{background:rgba(243,230,196,.88);color:var(--k);border-left:4px solid var(--k);box-shadow:5px 5px 0 var(--red);backdrop-filter:none;-webkit-backdrop-filter:none}
.side-r .stats{background:rgba(20,18,16,.82);color:var(--cream);border-right:4px solid var(--khaki);box-shadow:-5px 5px 0 var(--red)}
.st-k{font-family:var(--tag);font-weight:700;letter-spacing:.06em}
.st-bar{background:rgba(20,18,16,.14)}
.side-r .st-bar{background:rgba(243,230,196,.14)}
.st-bar i{background:repeating-linear-gradient(90deg,var(--k) 0 8px,transparent 8px 10px)}
.side-r .st-bar i{background:repeating-linear-gradient(270deg,var(--khaki) 0 8px,transparent 8px 10px)}
.st-bar b{background:var(--red);opacity:.9}
.st-v .up{color:var(--red)}

/* center */
.vs span{font-family:var(--disp);font-size:84px;color:var(--cream);text-shadow:4px 3px 0 var(--red),7px 6px 0 var(--k);filter:url(#rough)}
.vs::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%) rotate(8deg);background:var(--red);z-index:-1;
  clip-path:polygon(50% 0,58% 30%,80% 8%,70% 36%,100% 30%,76% 50%,100% 70%,70% 64%,80% 92%,58% 70%,50% 100%,42% 70%,20% 92%,30% 64%,0 70%,24% 50%,0 30%,30% 36%,20% 8%,42% 30%)}
.radar text{fill:var(--k);opacity:1;font-weight:700}
.center::before{content:"";position:absolute;inset:-14px -10px 10px;background:rgba(243,230,196,.72);box-shadow:5px 5px 0 var(--k);z-index:-1;clip-path:polygon(0 4%,100% 0,98% 100%,2% 96%)}

/* bottom bar = black ink band */
.bottom{background:var(--k);border-top:4px solid var(--red);box-shadow:0 -3px 0 var(--k)}
.m-label{color:var(--mus);font-family:var(--disp);font-size:20px;min-height:36px}
.seg{background:#2a2620;border-color:rgba(243,230,196,.3)}
.seg i{background:var(--mus)}
.m-lv{color:var(--cream)} .m-lv b{color:var(--mus)} .m-lv small{color:var(--red);border-color:var(--red);opacity:1}
.roster{-webkit-mask:none;mask:none}
.tile{background:var(--mus);border:2px solid var(--k);transform:skewX(-8deg)}
.tile>div{transform:skewX(8deg)}
.tile:nth-child(even){background:var(--teal)}
.tile.p1{background:var(--teal)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(20,18,16,.3) 1px,transparent 1.4px) 0 0/5px 5px;pointer-events:none}
.tile canvas{opacity:1}
.tile .tn{font-family:var(--disp);font-size:18px;letter-spacing:.03em;color:var(--cream);text-shadow:2px 2px 0 var(--k),-1px 0 0 var(--k)}
.tile .tb{background:var(--red);height:5px}
.tile .badge{background:var(--red);color:var(--cream)}
.tile:hover,.tile:focus-visible{transform:skewX(-8deg) translateY(-4px);border-color:var(--cream)}
.tile.sel{border-color:var(--red);box-shadow:4px 4px 0 var(--red);transform:skewX(-8deg) translateY(-6px)}
.tile::after{background:linear-gradient(100deg,transparent 30%,rgba(243,230,196,.5) 48%,transparent 62%)}
.tap-hint{background:var(--red);color:var(--cream);font-weight:700}

/* FX */
.star{position:absolute;width:150px;height:150px;transform:translate(-50%,-50%) rotate(var(--r,0));background:var(--red);pointer-events:none;mix-blend-mode:multiply;
  clip-path:polygon(50% 0,57% 32%,79% 6%,68% 37%,100% 26%,74% 48%,100% 64%,69% 62%,82% 94%,58% 70%,48% 100%,42% 70%,16% 92%,30% 62%,0 70%,25% 50%,2% 28%,31% 37%,22% 6%,43% 31%);animation:starpop .55s cubic-bezier(.2,1.6,.3,1) forwards}
.star::after{content:"";position:absolute;inset:26%;background:var(--mus);clip-path:inherit}
.star.big{width:300px;height:300px}
@keyframes starpop{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.2)}35%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.1)}100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1);opacity:0}}
.word{font:400 60px/1 var(--disp);letter-spacing:.02em;background:var(--cream);color:var(--k);border:3px solid var(--k);box-shadow:5px 4px 0 var(--red);border-radius:2px;text-shadow:2px 1px 0 rgba(224,58,34,.55);transform-origin:center}
.word::after{border-top-color:var(--k)}
.word.parry{background:var(--teal);color:var(--cream)} .word.block{background:var(--khaki)} .word.crit{background:var(--red);color:var(--cream);box-shadow:5px 4px 0 var(--k)} .word.pick{background:var(--mus)}
.dmg{font-family:var(--disp);color:var(--cream);text-shadow:3px 2px 0 var(--red),5px 4px 0 var(--k)}
.dmg.crit{color:var(--red);text-shadow:3px 2px 0 var(--cream),5px 4px 0 var(--k)} .dmg.block{color:var(--khaki)}
.flash-l,.flash-r{background:var(--cream)}
.parry-flash{background:radial-gradient(circle,rgba(46,127,117,.6),transparent 60%);mix-blend-mode:multiply}
.combo b{font-family:var(--disp);color:var(--cream);-webkit-text-stroke:0;text-shadow:4px 3px 0 var(--red),7px 6px 0 var(--k)}
.combo span{background:var(--k);color:var(--mus)}
.ko{background:radial-gradient(circle,rgba(224,58,34,.55),rgba(20,18,16,.8))}
.ko span{font-family:var(--disp);color:var(--mus);-webkit-text-stroke:0;text-shadow:8px 6px 0 var(--red),16px 12px 0 var(--k);filter:url(#rough)}
.ko-sub{background:var(--cream);color:var(--k);border:3px solid var(--k);box-shadow:6px 6px 0 var(--red)}
.ko-sub em{font-family:var(--tag);font-weight:700;color:var(--red)}
.cutin-band{background:linear-gradient(90deg,var(--k),var(--c) 30%,var(--k));border-block:6px solid var(--mus);box-shadow:0 0 0 6px var(--k)}
.cutin-band::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(20,18,16,.45) 1.5px,transparent 2px) 0 0/7px 7px;pointer-events:none}
.cutin b{font-family:var(--disp);color:var(--cream);-webkit-text-stroke:0;text-shadow:5px 4px 0 var(--red),9px 8px 0 var(--k)}
.cutin em{font-family:var(--tag);color:var(--mus);font-weight:700}
.cutin small{color:var(--cream)}
.pickup .chute{background:repeating-linear-gradient(90deg,var(--cream) 0 10px,var(--red) 10px 20px);border-color:var(--k)}
.pickup canvas{background:var(--k);border-color:var(--mus)}
@keyframes pkpulse{50%{box-shadow:0 0 0 4px var(--red)}}
.pickup b{background:var(--mus);color:var(--k);font-family:var(--disp)}
.pickup small{background:var(--k);color:var(--cream)}
.pickpop{font-family:var(--disp);color:var(--mus);-webkit-text-stroke:0;text-shadow:3px 2px 0 var(--red),5px 4px 0 var(--k)}
.bill{background:var(--teal2);color:var(--cream);border-color:var(--k)}
.chatdrop{background:var(--mus);border-left-color:var(--red)}

/* sheets = printed cream stock */
.backdrop{background:rgba(20,18,16,.6)}
.sheet{background:var(--cream);color:var(--k);border-left:4px solid var(--k);box-shadow:-8px 0 0 var(--red)}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(20,18,16,.07) 1px,transparent 1.4px) 0 0/5px 5px;z-index:0}
.sheet>*{position:relative;z-index:1}
.sh-head h3{font-family:var(--disp);font-size:44px;color:var(--k);text-shadow:var(--mis);filter:url(#rough)}
.sh-x{border:2px solid var(--k);width:44px;height:44px}
.chip{border:1.5px solid var(--k);min-height:34px}
.chip.on{background:var(--k);color:var(--mus);border-color:var(--k)}
.chip-sep{background:rgba(20,18,16,.3)}
.card{background:#fff8e4;box-shadow:6px 6px 0 var(--c)}
.card.empty{color:var(--k);border-color:var(--k)}
.card-about{color:var(--k)}
.lbl{opacity:1;font-weight:700}
.tier{background:#fff8e4;border:2px solid var(--k)}
.tier b{color:var(--k)} .tier small{color:var(--k)}
.tier.on{background:var(--c);border-color:var(--k);box-shadow:4px 4px 0 var(--k)}
.backer{background:#fff8e4;border:2px solid rgba(20,18,16,.3);color:var(--k);min-height:52px}
.backer.on{border-color:var(--k);box-shadow:4px 4px 0 var(--red)}
.fields input,.fields textarea{background:#fff8e4;color:var(--k);border:2px solid var(--k);font-size:16px}
.fields input:focus,.fields textarea:focus{border-color:var(--red)}
.sc-prev,.scfly{border-color:var(--k);box-shadow:5px 5px 0 var(--k)}
.send{border-color:var(--k);box-shadow:0 6px 0 var(--k);font-family:var(--disp);font-size:26px;color:var(--k)}
.demo{background:var(--teal);color:var(--cream)}
.grab{background:rgba(20,18,16,.35)!important}

/* ---------- desktop tuning ---------- */
@media (min-width:761px){
  .side{top:150px}
  .kata-l{top:auto;bottom:calc(var(--bot) + 20px)}
}
@media (min-width:761px) and (max-height:760px){ .lockup span{font-size:clamp(26px,3vw,44px)} }

/* ---------- mobile ---------- */
@media (max-width:760px){
  .timer{width:52px;height:48px} .timer span{font-size:26px}
  .hp-name{font-size:14px}
  .brand-k,.brand-s{font-size:20px} .brand-j{font-size:15px}
  .pill{min-height:32px}
  .side-l{top:104px}
  .name{font-size:clamp(40px,12.5vw,56px)}
  .tag{font-size:10.5px}
  .kata-r{font-size:17px;top:auto;bottom:calc(var(--bot) + 14px);transform:none;right:4px;opacity:.95}
  .kata-l{display:none}
  .lockup{right:auto;left:12px;bottom:auto;top:calc((100dvh - var(--bot)) * .5 + 6px);align-items:flex-start;text-align:left;max-width:44vw}
  .lockup span{font-size:22px}
  .lk-vs{font-size:15px!important;transform:rotate(-4deg)}
  .lockup small{display:none}
  .vs span{font-size:54px}
  .vs::before{width:96px;height:96px}
  .word{font-size:34px}
  .star{width:96px;height:96px} .star.big{width:190px;height:190px}
  .tile .tn{font-size:16px}
  .sheet{border-left:0;border-top:4px solid var(--k);box-shadow:0 -8px 0 var(--red)}
}
@media (prefers-reduced-motion:reduce){ .grain{animation:none} .star{animation:none;opacity:0} }

/* ---------- pass 2 layout fixes ---------- */
.center::before{inset:-6px 6px 26px;background:rgba(243,230,196,.42);box-shadow:4px 4px 0 rgba(20,18,16,.6);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@media (min-width:761px){
  .side-r{right:calc(2.6vw + 40px)}
  .kata-r{font-size:clamp(20px,2vw,30px);right:10px}
  .lockup{bottom:calc(var(--bot) + 54px)}
  .lockup small{display:none}
}
@media (max-width:760px){
  .kata-r{top:150px;bottom:auto;right:6px;font-size:16px;opacity:1}
  .kata-r span{display:none}
  .lockup{left:10px;top:auto;bottom:calc(var(--bot) + 12px);max-width:40vw;background:var(--k);padding:6px 8px 7px;box-shadow:3px 3px 0 var(--red);filter:none}
  .lockup span{font-size:19px;line-height:.9}
  .lk-a{color:var(--mus);text-shadow:2px 1px 0 var(--red)}
  .lk-vs{background:var(--red)!important;color:var(--cream)!important;font-size:12px!important;padding:1px 5px!important;margin:3px 0}
  .side-l{top:100px}
  .tag{font-size:9.5px;padding:4px 6px 3px}
  .vs{left:80%;top:calc((100dvh - var(--bot)) * .43 - 30px)}
  .side-r .tags{max-width:62vw;margin-left:auto}
}
@media (max-width:760px){
  .name{font-size:clamp(48px,15vw,66px)}
  .kata-r{color:var(--cream);text-shadow:1.5px 1.5px 0 var(--k),-1px 0 0 var(--red)}
}
/* lockup on a mustard poster card (both breakpoints) */
.lockup{background:var(--mus);padding:10px 14px 12px;box-shadow:5px 5px 0 var(--red),5px 5px 0 2px var(--k);border:2px solid var(--k)}
.lockup .lk-a{color:var(--k);text-shadow:2px 1.5px 0 var(--red)}
.lockup .lk-b{color:var(--teal);text-shadow:2px 1.5px 0 var(--red)}
.lockup small{background:var(--k);color:var(--mus)}
@media (max-width:760px){ .lockup{padding:6px 9px 8px;box-shadow:3px 3px 0 var(--red)} }
/* verdict inks */
.v-t{background:var(--teal2);color:var(--cream)} .v-f{background:var(--red);color:var(--cream)} .v-m{background:var(--mus);color:var(--k)} .v-u{background:#6b6458;color:var(--cream)}
.stamp.v-t{color:var(--teal)} .stamp.v-f{color:var(--red)} .stamp.v-m{color:#a87d00} .stamp.v-u{color:#5a5448}
.tally{border:2px solid var(--k);padding:2px;background:var(--k)}
.tier.on .sparks{opacity:.18!important}
/* hit flash = red plate tint (multiply) instead of white overlay */
.flash-l,.flash-r{background:var(--red);mix-blend-mode:multiply;animation:hitflash2 .22s forwards}
@keyframes hitflash2{0%{opacity:.45}100%{opacity:0}}

/* static VS badge in the old timer burst (countdown removed) */
.timer.vs-top span{font-size:28px;letter-spacing:.02em;transform:rotate(-6deg);text-shadow:2px 1.5px 0 var(--k)}
@media (max-width:760px){ .timer.vs-top span{font-size:20px} }
/* lockup: mid widths (tablet / small laptop) */
@media (min-width:761px) and (max-width:1100px){
  .lockup{right:auto;left:50%;transform:translateX(-50%);bottom:calc(var(--bot) + 64px);max-width:40vw;align-items:center;text-align:center;padding:8px 12px 10px}
  .lockup span{font-size:clamp(24px,3.4vw,36px)}
}

/* V2 fix: stage can never be scrolled/panned programmatically */
html,body{overflow:clip;overscroll-behavior:none;max-width:100vw}
.stage{overflow:clip;width:100vw;max-width:100vw}
.roster{overscroll-behavior-x:contain}
.roster{position:relative}

/* ---------- matchup layer: FIGHT TOPIC ribbon (inside the lockup) + bigger bills ---------- */
.lk-topic{display:flex;flex-direction:column;align-items:inherit;margin-top:10px;max-width:100%;filter:none}
.lk-topic i{font:700 9px/1 var(--mono);font-style:normal;letter-spacing:.22em;background:var(--red);color:var(--cream);padding:3px 7px 2px;box-shadow:2px 2px 0 var(--k)}
.lk-topic b{display:block;margin-top:3px;font:400 clamp(15px,1.45vw,22px)/1.02 var(--disp);letter-spacing:.03em;background:var(--k);color:var(--mus);padding:4px 9px 3px;text-shadow:1.5px 1px 0 var(--red);box-shadow:3px 3px 0 var(--red);clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%)}
.lk-topic em{display:block;margin-top:3px;font:700 9.5px/1.2 var(--mono);font-style:normal;letter-spacing:.14em;background:var(--cream);color:var(--k);padding:2px 6px}
.lk-topic.nobeef b{color:var(--cream)}
.bill{width:40px;height:24px;font:800 16px var(--mono);background:var(--khaki);color:var(--k);border:2px solid var(--k);box-shadow:3px 2px 0 rgba(224,58,34,.8)}
@media (max-width:760px){
  .lockup{max-width:48vw}
  .lk-topic{margin-top:5px}
  .lk-topic i{display:none}
  .lk-topic b{font-size:11.5px;line-height:1.05;padding:3px 6px 2px;box-shadow:2px 2px 0 var(--red);clip-path:none}
  .lk-topic em{font-size:7px;letter-spacing:.06em;padding:2px 4px}
  .lk-topic em::before{content:"FIGHT TOPIC · ";color:var(--red)}
}
@media (max-width:760px){ .lockup span{font-size:16px} .lockup{padding:5px 7px 6px} }

/* ---------- V2 signature powers, war mode, chat heckle ---------- */
.sig{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform;filter:drop-shadow(3px 2px 0 rgba(224,58,34,.9)) drop-shadow(-1px -1px 0 rgba(20,18,16,.85))}
.sig canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.sig::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(20,18,16,.32) 28%,transparent 31%) 0 0/5px 5px;mix-blend-mode:multiply;-webkit-mask:linear-gradient(#000,#000);opacity:.7}
.sig.car{z-index:4;filter:drop-shadow(5px 3px 0 rgba(224,58,34,.9)) drop-shadow(-2px -1px 0 rgba(20,18,16,.9)) drop-shadow(0 10px 0 rgba(20,18,16,.25))}
.skid{position:absolute;width:70px;height:9px;margin:-4px 0 0 -35px;background:repeating-linear-gradient(90deg,rgba(20,18,16,.9) 0 7px,rgba(20,18,16,.45) 7px 10px);box-shadow:2px 2px 0 rgba(224,58,34,.45);transform:rotate(var(--r));border-radius:2px;animation:skid 2s ease-in forwards;z-index:2}
@keyframes skid{0%,40%{opacity:.9}100%{opacity:0}}
.smoke{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(243,230,196,.95) 0 45%,rgba(217,180,106,.8) 46% 70%,transparent 71%);box-shadow:3px 2px 0 rgba(224,58,34,.35);animation:smoke 1.4s ease-out forwards;z-index:3}
@keyframes smoke{0%{opacity:.95;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.6)}}
.heckle{position:absolute;z-index:6;max-width:min(300px,70vw);background:var(--cream);color:var(--k);border:2px solid var(--k);box-shadow:4px 3px 0 var(--red);padding:6px 9px 7px;font:700 12px/1.25 var(--mono);letter-spacing:.04em;animation:heckle 3.6s ease-out forwards}
.heckle i{display:inline-block;font-style:normal;background:var(--k);color:var(--mus);padding:1px 5px;margin-right:6px;font-size:9px;letter-spacing:.2em}
.heckle b{color:var(--teal);margin-right:4px}
@keyframes heckle{0%{opacity:0;transform:translateY(10px)}8%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.fcstamp{position:absolute;right:-18px;top:-30px;transform:rotate(-9deg);border:3px solid var(--red);color:var(--red);background:rgba(243,230,196,.92);padding:3px 8px 4px;font:400 22px/1 var(--disp);letter-spacing:.04em;text-align:center;box-shadow:2px 2px 0 var(--k);animation:stampIn .35s cubic-bezier(.2,1.6,.4,1) both}
.fcstamp span{display:block;font:700 8px var(--mono);letter-spacing:.25em}
.fcstamp small{display:block;font:700 7px var(--mono);letter-spacing:.12em;color:var(--k);margin-top:2px}
@keyframes stampIn{0%{transform:rotate(-9deg) scale(2.2);opacity:0}100%{transform:rotate(-9deg) scale(1);opacity:1}}
@media (max-width:760px){ .heckle{font-size:10.5px;padding:5px 7px} .fcstamp{font-size:17px;right:-8px;top:-28px} }
@media (prefers-reduced-motion:reduce){ .smoke,.skid{display:none} .heckle,.fcstamp{animation:none} }
.fcstamp{right:auto;left:40%;top:100%;margin-top:-6px}
.heckle{white-space:nowrap}
@media (max-width:760px){ .tag{white-space:normal;max-width:92vw} .fcstamp{left:30%;margin-top:-4px} }
@media (max-width:760px){ .heckle{white-space:normal;max-width:64vw} .fcstamp{left:auto;right:-36px;margin-top:-10px} }

/* V2 receipts: neutral stamp for unsourced EXAMPLE cards; source-less chip */
.stamp.ex-st{padding:5px 9px;border-width:3px}
.stamp.ex-st span{font-size:19px;letter-spacing:.05em;white-space:nowrap}
.src-chip.none{background:transparent;color:#6b6458;border-style:dashed;box-shadow:none}
.m-lv b{white-space:nowrap}

/* V2 mobile: collapse the lockup to a one-line FIGHT TOPIC strip in the mid band between the stat panels
   (fighter names already live in the HP bar), so the lower fighter's face and body stay clear */
@media (max-width:760px){
  .lockup{left:10px;right:10px;bottom:auto;top:calc((100svh - var(--bot)) * .47 + 26px);max-width:none;width:auto;
    background:none;border:0;box-shadow:none;padding:0;align-items:flex-start;text-align:left;filter:none}
  .lockup .lk-a,.lockup .lk-vs,.lockup .lk-b,.lockup small{display:none}
  .lk-topic{margin-top:0;flex-direction:row;align-items:center;gap:0;max-width:calc(100vw - 20px)}
  .lk-topic b{font-size:12px;padding:4px 7px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw;border:1.5px solid var(--k)}
  .lk-topic b::before{content:"FIGHT TOPIC · ";color:var(--red);font-size:.8em}
  .lk-topic em{display:none}
  .tap-hint{left:10px;transform:none;top:calc((100svh - var(--bot)) * .47 + 168px)}
}
@media (max-width:760px){ .lockup.lk-r{align-items:flex-end} .lockup.lk-r .lk-topic{margin-left:auto} }

/* V2 desktop money overlay: above the stat panels (z5) and lockup (z6), below HUD/footer/FX; never takes taps */
.billfx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
@media (min-width:761px){ .bill{width:70px;height:42px;font-size:28px;border-width:3px;box-shadow:5px 3px 0 rgba(224,58,34,.8)} }
.lockup.lk-front{z-index:10} /* V2: above the FX layer while the Tate car drives past */
/* V2 short phones (e.g. 360x780): tighter stat rows so the two stat panels stop overlapping and both fighters stay clear */
@media (max-width:760px) and (max-height:800px){
  .stats{padding:5px 8px 4px} .st{height:12.5px} .st-head{margin-bottom:2px}
  .side-l{top:96px} .side-l .tags,.side-r .tags{gap:3px}
}
@media (max-width:760px){ .tap-hint{letter-spacing:.12em;padding:6px 9px} }

/* V2: old Nick-only inset (.nickpow) + cut-in art removed; replaced by the POWER TAKEOVER block below */

/* ---------- V2 POWER TAKEOVER (takeover.js): full-half art, jagged cream stroke, torn diagonal, energy, bottom band ---------- */
.ptk{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden}
.ptk-svg,.ptk-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.stage.tk-on .topbar{z-index:13}
.ptk-svg{animation:ptkIn .26s cubic-bezier(.2,1.4,.4,1) both}
.ptk .ptk-slam{transform-box:view-box;transform-origin:50% 60%;animation:ptkSlam .5s cubic-bezier(.2,1.6,.35,1) both}
.ptk .ptk-art{animation:ptkShake 2.3s .5s linear infinite}
.ptk .pl-r{animation:ptkPlR 1.7s .1s steps(1) infinite;opacity:.9}
.ptk .pl-t{animation:ptkPlT 2.1s .1s steps(1) infinite;opacity:.65;mix-blend-mode:multiply}
.ptk-band{position:absolute;display:flex;align-items:center;gap:14px;padding:0 22px;transform-origin:50% 50%;animation:ptkBand .42s .08s cubic-bezier(.2,1.4,.35,1) both}
.ptk-glyph{height:62%;max-height:84px;image-rendering:pixelated;flex:0 0 auto;filter:drop-shadow(4px 3px 0 var(--red)) drop-shadow(-2px -1px 0 var(--k));background:var(--cream);padding:6px;clip-path:polygon(8% 0,100% 6%,92% 100%,0 94%)}
.ptk-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.ptk-txt small{font:700 11px var(--mono);letter-spacing:.26em;color:var(--mus)}
.ptk-txt b{font:400 clamp(34px,4.4vw,64px)/.92 var(--disp);color:var(--cream);text-shadow:4px 3px 0 var(--red),7px 6px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:clip}
.ptk-txt em{font:700 clamp(12px,1.15vw,16px)/1.22 var(--tag);font-style:normal;color:var(--mus);overflow-wrap:break-word}
.ptk.at-r .ptk-band{flex-direction:row-reverse;text-align:right}
.ptk.out{opacity:0;transition:opacity .26s}
@keyframes ptkIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes ptkSlam{0%{transform:scale(1.35) rotate(-4deg);opacity:0}60%{transform:scale(.97) rotate(1deg);opacity:1}100%{transform:none}}
@keyframes ptkBand{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
/* loop: slight irregular shake (1-2px), plates jolt + drift out of register at uneven beats; never strobes */
@keyframes ptkShake{0%{transform:translate(0,0)}13%{transform:translate(1.5px,-1px)}21%{transform:translate(-1px,1px)}44%{transform:translate(0,0)}58%{transform:translate(-1.5px,-.5px)}63%{transform:translate(1px,1px)}86%{transform:translate(.5px,-1px)}100%{transform:translate(0,0)}}
@keyframes ptkPlR{0%{translate:9px 7px}18%{translate:13px 9px}26%{translate:8px 6px}55%{translate:11px 5px}71%{translate:7px 8px}100%{translate:9px 7px}}
@keyframes ptkPlT{0%{translate:-5px -4px}23%{translate:-8px -3px}41%{translate:-4px -5px}68%{translate:-7px -6px}84%{translate:-3px -3px}100%{translate:-5px -4px}}
@media (max-width:760px){
  .ptk-band{gap:8px;padding:0 12px}
  .ptk-glyph{max-height:54px;padding:4px}
  .ptk-txt small{font-size:9.5px;letter-spacing:.2em}
  .ptk-txt b{font-size:30px}
  .ptk-txt em{font-size:11.5px;line-height:1.18}
  @keyframes ptkPlR{0%{translate:6px 5px}18%{translate:9px 6px}26%{translate:5px 4px}55%{translate:8px 3px}71%{translate:5px 6px}100%{translate:6px 5px}}
  @keyframes ptkPlT{0%{translate:-4px -3px}23%{translate:-6px -2px}41%{translate:-3px -4px}68%{translate:-5px -4px}84%{translate:-2px -2px}100%{translate:-4px -3px}}
}
@media (prefers-reduced-motion:reduce){
  .ptk-svg,.ptk .ptk-slam,.ptk .ptk-art,.ptk .pl-r,.ptk .pl-t,.ptk-band{animation:none}
  .ptk .pl-r{translate:9px 7px} .ptk .pl-t{translate:-5px -4px}
}
.cutin{display:none!important} /* V2: the old cut-in band is replaced by the takeover */