:root{
  --ink:#0b0614; --paper:#f4efe6; --p1:#8b3dff; --p1b:#c69bff; --opp:#19e3c2; --opp2:#0c6f62;
  --hot:#ffd23f; --red:#ff3b4e;
  --dx1:55%; --dx2:45%;           /* diagonal top/bottom x (desktop) */
  --bot:168px;
  --cond:'Anton',Impact,'Arial Narrow',sans-serif; --tag:'Permanent Marker',cursive;
  --mono:'JetBrains Mono',ui-monospace,monospace; --ui:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--paper);overflow:hidden;font-family:var(--ui);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.stage{position:fixed;inset:0;height:100svh;overflow:hidden;isolation:isolate}
.stage.shake{animation:shake .32s cubic-bezier(.36,.07,.19,.97)}
.stage.shake-big{animation:shake 0.6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-3px)}30%,50%,70%{transform:translate(-8px,4px) rotate(-.4deg)}40%,60%{transform:translate(8px,-4px) rotate(.4deg)}}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.grain{position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}

/* hit zones = diagonal cards */
.hit{position:absolute;inset:0 0 var(--bot) 0;z-index:2}
.hit-l{clip-path:polygon(0 0,var(--dx1) 0,var(--dx2) 100%,0 100%)}
.hit-r{clip-path:polygon(var(--dx1) 0,100% 0,100% 100%,var(--dx2) 100%)}
.hit:focus-visible{outline:none;background:rgba(255,255,255,.04)}
.tap-hint{position:absolute;left:50%;bottom:calc(var(--bot) + 14px);transform:translateX(-50%);z-index:6;font:700 11px var(--mono);letter-spacing:.24em;padding:7px 12px;background:var(--hot);color:var(--ink);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);pointer-events:none;animation:blink 1.1s steps(2) infinite;transition:opacity .4s}
.tap-hint.gone{opacity:0}
@keyframes blink{50%{opacity:.35}}

/* top HUD */
.topbar{position:absolute;top:0;left:0;right:0;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:14px 22px 0;pointer-events:none}
.hp-name{font:400 15px/1 var(--cond);letter-spacing:.08em;margin-bottom:5px}
.hp-r .hp-name{text-align:right;color:var(--p1b)}
.hp-l .hp-name{color:var(--opp)}
.hp-track{position:relative;height:20px;background:#1a1226;border:2px solid #fff;transform:skewX(-20deg);overflow:hidden;box-shadow:0 0 0 2px var(--ink),0 6px 20px rgba(0,0,0,.5)}
.hp-r .hp-track{transform:skewX(20deg)}
.hp-fill,.hp-lag{position:absolute;inset:0;transform-origin:right center;transition:transform .18s ease-out}
.hp-r .hp-fill,.hp-r .hp-lag{transform-origin:left center}
.hp-lag{background:var(--red);transition:transform .7s .35s ease-in}
.hp-fill{background:linear-gradient(180deg,#fff7a8 0,var(--hot) 45%,#ff9f1c 100%)}
.hp-fill.low{background:linear-gradient(180deg,#ffb3b3,var(--red))}
.timer{width:62px;height:52px;display:grid;place-items:center;background:var(--ink);border:2px solid #fff;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}
.timer span{font:400 34px/1 var(--cond);color:#fff}
.subbar{position:absolute;top:92px;left:22px;right:22px;z-index:8;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.brand{display:flex;gap:6px;align-items:baseline;transform:rotate(-3deg)}
.brand-k{font:400 22px/1 var(--cond);letter-spacing:.02em}
.brand-s{font:400 22px/1 var(--tag);color:var(--hot);text-shadow:2px 2px 0 var(--red)}
.mode{display:flex;align-items:center;gap:8px;font:700 10.5px var(--mono);letter-spacing:.18em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1s steps(2) infinite}
.mock{padding:3px 6px;border:1px solid currentColor;opacity:.75}

/* sides */
.side{position:absolute;top:134px;bottom:calc(var(--bot) + 10px);width:min(31vw,440px);z-index:5;--sw2:min(22vw,320px);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.side-l{left:2.6vw}
.side-r{right:2.6vw;text-align:right;align-items:flex-end}
.slot{font:700 11px var(--mono);letter-spacing:.26em;opacity:.8;margin-bottom:6px}
.side-l .slot{color:var(--opp)} .side-r .slot{color:var(--p1b)}
.name{font:400 clamp(44px,6.4vw,104px)/.86 var(--cond);letter-spacing:-.01em;text-transform:uppercase;text-shadow:4px 4px 0 var(--ink);-webkit-text-stroke:1px rgba(0,0,0,.4)}
.side-l .name{color:#fff}
.side-r .name{color:#fff;text-shadow:4px 4px 0 #2a0a5e,8px 8px 0 rgba(0,0,0,.35)}
.name.in{animation:namein .55s cubic-bezier(.2,1.4,.3,1)}
@keyframes namein{0%{transform:translateX(-40px) skewX(-18deg);opacity:0;filter:blur(6px)}60%{transform:translateX(6px) skewX(4deg);opacity:1;filter:none}}
.side-r .name.in{animation-name:nameinR}
@keyframes nameinR{0%{transform:translateX(40px) skewX(18deg);opacity:0;filter:blur(6px)}60%{transform:translateX(-6px) skewX(-4deg);opacity:1;filter:none}}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.side-r .tags{justify-content:flex-end}
.tag{animation:tagin .45s cubic-bezier(.2,1.6,.3,1) both;animation-delay:var(--d,0ms);font:400 12.5px/1 var(--tag);padding:6px 10px 5px;background:var(--hot);color:var(--ink);transform:rotate(var(--r,-2deg));box-shadow:3px 3px 0 var(--ink)}
.tag:nth-child(2){background:#fff;--r:1.5deg}
.tag:nth-child(3){background:var(--c,var(--opp));--r:-1deg}
.tag sup{font:700 7px var(--mono);letter-spacing:.1em;margin-left:5px;opacity:.6;vertical-align:top}

.stats{width:var(--sw2,100%);padding:12px 14px 10px;background:linear-gradient(90deg,rgba(11,6,20,.82),rgba(11,6,20,.25));border-left:3px solid var(--c,var(--opp));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.side-r .stats{background:linear-gradient(270deg,rgba(26,6,52,.82),rgba(26,6,52,.25));border-left:0;border-right:3px solid var(--p1b)}
.st-head{display:flex;justify-content:space-between;font:700 9.5px var(--mono);letter-spacing:.2em;opacity:.75;margin-bottom:8px}
.st{display:grid;grid-template-columns:108px 1fr 30px;align-items:center;gap:10px;height:24px}
.side-r .st{grid-template-columns:30px 1fr 108px}
.st-k{font:800 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.st-v{font:700 12px var(--mono)}
.st-v .up{color:var(--hot);font-size:9px}
.st-bar{position:relative;height:10px;background:rgba(255,255,255,.08);transform:skewX(-20deg);overflow:hidden}
.st-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(90deg,var(--c,var(--opp)) 0 10px,transparent 10px 12px);transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.side-r .st-bar{transform:skewX(20deg)}
.side-r .st-bar i{transform-origin:right;background:repeating-linear-gradient(270deg,var(--p1b) 0 10px,transparent 10px 12px)}
.st-bar b{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.55}

/* center */
.vs{position:absolute;left:50%;top:150px;transform:translate(-50%,0) rotate(-8deg);z-index:6;pointer-events:none}
.vs span{display:block;font:400 64px/1 var(--tag);color:var(--hot);text-shadow:3px 3px 0 var(--red),6px 6px 0 var(--ink)}
.vs.pop span{animation:vspop .5s cubic-bezier(.2,1.6,.3,1)}
@keyframes vspop{0%{transform:scale(2.4);opacity:0}}
.center{position:absolute;left:50%;top:236px;width:min(24vw,320px);transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.radar{width:100%;max-width:286px;overflow:visible;flex:0 0 auto}
.radar text{font:700 7.5px var(--mono);letter-spacing:.08em;fill:#fff;opacity:.8}
.radar .poly{transition:all .8s cubic-bezier(.2,.9,.2,1)}
/* bottom */
.bottom{position:absolute;left:0;right:0;bottom:0;height:var(--bot);z-index:7;padding:10px 22px 22px;background:linear-gradient(0deg,rgba(11,6,20,.96) 55%,rgba(11,6,20,0));display:flex;flex-direction:column;gap:10px}
.meter{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.m-label{font:400 17px/1 var(--cond);letter-spacing:.1em;color:var(--hot);padding:4px 0}
.m-label i{font-style:normal;font-size:11px;display:inline-block;transition:transform .3s}
.m-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;height:14px}
.seg{position:relative;background:#211933;transform:skewX(-24deg);overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.seg i{position:absolute;inset:0;background:linear-gradient(90deg,#3df5d7,#c69bff);transform-origin:left;transform:scaleX(0);transition:transform .5s ease-out}
.seg.full i{transform:scaleX(1);animation:segglow 1.6s ease-in-out infinite}
@keyframes segglow{50%{filter:brightness(1.5)}}
.m-lv{font:700 10px var(--mono);letter-spacing:.16em;display:flex;gap:6px;align-items:center}
.m-lv b{color:var(--hot)} .m-lv small{font-size:8px;opacity:.55;border:1px solid;padding:1px 4px}
.roster{display:flex;gap:10px;justify-content:safe center;flex:1;min-height:0;padding:6px 24px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.roster::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 124px;scroll-snap-align:center;transform:skewX(-12deg);background:#1a1226;border:2px solid rgba(255,255,255,.22);overflow:hidden;transition:transform .25s cubic-bezier(.2,1.5,.3,1),border-color .2s,box-shadow .2s}
.tile>div{position:absolute;inset:0 -14px;transform:skewX(12deg)}
.tile canvas{position:absolute;right:6px;bottom:0;height:100%;image-rendering:pixelated;opacity:.9}
.tile .tn{position:absolute;left:18px;right:8px;bottom:8px;font:400 15px/1 var(--cond);letter-spacing:.03em;text-shadow:2px 2px 0 var(--ink);text-align:left}
.tile .tb{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c)}
.tile .badge{position:absolute;left:18px;top:6px;font:700 8.5px var(--mono);letter-spacing:.16em;padding:2px 5px;background:var(--c);color:var(--ink);opacity:0;transform:translateY(-6px);transition:.2s}
.tile:hover,.tile:focus-visible{transform:skewX(-12deg) translateY(-5px);border-color:#fff;outline:none}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.tile:hover::after{transform:translateX(120%);transition:transform .55s ease}
.tile.sel{border-color:var(--c);box-shadow:0 0 0 2px var(--ink),0 0 24px var(--c);transform:skewX(-12deg) translateY(-7px)}
.tile.sel .badge{opacity:1;transform:none}
.tile.flash{animation:tflash .45s}
@keyframes tflash{0%{filter:brightness(3) saturate(0)}}
.tile.p1{background:linear-gradient(135deg,#3b0f80,#1a0638)}

/* FX */
.fx{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.proj{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;image-rendering:pixelated;will-change:transform}
.proj canvas{width:100%;height:100%;image-rendering:pixelated}
.word{position:absolute;font:400 64px/1 var(--tag);padding:16px 28px 12px;border-width:4px!important;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:46% 54% 50% 50%/55% 45% 55% 45%;box-shadow:4px 4px 0 var(--ink);white-space:nowrap;transform:translate(-50%,-50%);animation:word .9s cubic-bezier(.2,1.6,.3,1) forwards}
.word::after{content:"";position:absolute;left:24%;bottom:-24px;border:14px solid transparent;border-top:20px solid var(--ink)}
@keyframes word{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg)}25%{transform:translate(-50%,-50%) scale(1.15) rotate(var(--r))}75%{opacity:1}100%{transform:translate(-50%,-90%) scale(1) rotate(var(--r));opacity:0}}
.puff{position:absolute;border-radius:50%;transform:translate(-50%,-50%);animation:puff .9s ease-out forwards}
@keyframes puff{0%{transform:translate(-50%,-50%) scale(.1);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1);opacity:0}}
.stem{position:absolute;width:var(--sw,52px);transform:translate(-50%,0);transform-origin:bottom;background:linear-gradient(#fff3c4,#ff9f1c);border-radius:10px 10px 4px 4px;animation:stem .9s ease-out forwards}
@keyframes stem{0%{transform:translate(-50%,0) scaleY(0)}40%{transform:translate(-50%,0) scaleY(1)}100%{opacity:0}}
.flash-l,.flash-r{position:absolute;inset:0;background:#fff;mix-blend-mode:overlay;animation:hitflash .22s forwards}
.flash-l{clip-path:polygon(0 0,var(--dx1) 0,var(--dx2) 100%,0 100%)}
.flash-r{clip-path:polygon(var(--dx1) 0,100% 0,100% 100%,var(--dx2) 100%)}
@keyframes hitflash{0%{opacity:.95}100%{opacity:0}}
.dmg{position:absolute;font:400 48px/1 var(--cond);color:var(--hot);text-shadow:2px 2px 0 var(--red),3px 3px 0 var(--ink);animation:dmg .8s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes dmg{100%{transform:translate(-50%,-160%);opacity:0}}
.combo{position:absolute;z-index:10;top:118px;left:50%;transform:translateX(-50%) rotate(-6deg);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0}
.combo b{font:400 64px/.9 var(--cond);color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--red)}
.combo span{font:700 12px var(--mono);letter-spacing:.3em;background:var(--red);padding:3px 8px}
.combo.on{opacity:1;animation:cpop .25s cubic-bezier(.2,1.8,.3,1)}
@keyframes cpop{0%{transform:translateX(-50%) rotate(-6deg) scale(1.5)}}
.ko{position:absolute;inset:0;z-index:12;display:none;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(255,59,78,.35),rgba(11,6,20,.75));pointer-events:none}
.ko.on{display:flex}
.ko span{font:400 clamp(110px,24vw,300px)/.85 var(--cond);color:var(--hot);-webkit-text-stroke:4px var(--ink);text-shadow:8px 8px 0 var(--red),16px 16px 0 var(--ink);animation:ko .8s cubic-bezier(.2,1.6,.3,1)}
.ko small{margin-top:20px;font:700 13px var(--mono);letter-spacing:.3em;background:var(--ink);padding:6px 12px;border:1px solid #fff}
@keyframes ko{0%{transform:scale(4) rotate(-10deg);opacity:0}60%{transform:scale(.92) rotate(2deg);opacity:1}}

/* ---------- MOBILE: top/bottom diagonal ---------- */
@media (max-width:760px){
  :root{--bot:132px;--yl:53%;--yr:41%}
  .hit{inset:0 0 var(--bot) 0}
  .hit-l,.flash-l{clip-path:polygon(0 0,100% 0,100% var(--yr),0 var(--yl))}
  .hit-r,.flash-r{clip-path:polygon(0 var(--yl),100% var(--yr),100% 100%,0 100%)}
  .topbar{padding:10px 12px 0;gap:8px}
  .hp-name{font-size:12px;margin-bottom:3px}
  .hp-track{height:13px;border-width:1.5px}
  .timer{width:44px;height:38px}.timer span{font-size:24px}
  .subbar{top:66px;left:12px;right:12px}
  .brand-k,.brand-s{font-size:15px}
  .mode{font-size:8px;letter-spacing:.12em;gap:5px}
  .mode .mock{display:none}
  .side{--sw2:100%;width:62%;bottom:auto;justify-content:flex-start;gap:10px}
  .side-l{left:12px;top:96px}
  .side-r{right:12px;top:auto;bottom:calc(var(--bot) + 8px)}
  .side-r{flex-direction:column-reverse}
  .slot{font-size:8.5px;margin-bottom:3px}
  .name{font-size:clamp(34px,11vw,48px)}
  .tags{margin-top:7px;gap:4px}
  .tag{font-size:10px;padding:4px 6px 3px}
  .stats{padding:7px 8px 6px}
  .st-head{font-size:7.5px;margin-bottom:4px}
  .st{grid-template-columns:78px 1fr 22px;gap:6px;height:16px}
  .side-r .st{grid-template-columns:22px 1fr 78px}
  .st-k{font-size:8.5px;letter-spacing:.02em}
  .st-v{font-size:9.5px}
  .st-bar{height:7px}
  .vs{top:calc((100svh - var(--bot)) * .47 - 26px);left:50%}
  .vs span{font-size:44px}
  .combo{top:auto;bottom:52%;left:auto;right:16px;transform:rotate(-6deg)}
  .combo b{font-size:46px}
  @keyframes cpop{0%{transform:rotate(-6deg) scale(1.5)}}
  .center{display:none}
  .bottom{padding:8px 0 20px;gap:8px}
  .tile .tn{bottom:6px}
  .meter{padding:0 12px;gap:10px}
  .m-label{font-size:14px}
  .m-lv{font-size:8.5px}.m-lv small{display:none}
  .m-bar{height:11px;gap:3px}
  .roster{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none}
  .roster::-webkit-scrollbar{display:none}
  .tile{flex:0 0 112px;scroll-snap-align:center}
  .tile .tn{font-size:14px}
  .tap-hint{bottom:auto;top:calc((100svh - var(--bot)) * .47 + 30px);font-size:9px}
  .word{font-size:36px;padding:9px 15px 7px;border-width:3px!important}
  .word::after{bottom:-18px;border-width:10px;border-top-width:14px}
  .dmg{font-size:32px}
  .stem{--sw:30px}
}
@media (min-width:761px) and (max-height:760px){.radar{max-width:220px}.center{top:220px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== v3 additions ===== */
@keyframes tagin{0%{transform:translateY(8px) rotate(var(--r,-2deg)) scale(.6);opacity:0}}
.actions{display:flex;gap:8px;pointer-events:auto}
.pill{font:700 10px var(--mono);letter-spacing:.16em;padding:7px 11px;border:1px solid rgba(255,255,255,.35);background:rgba(11,6,20,.6);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:.2s}
.pill:hover,.pill.on{background:#fff;color:var(--ink)}
.pill-sc{background:linear-gradient(90deg,#ff3b4e,#ff6fd8,#ffd23f);color:var(--ink);border:0;font-weight:800;animation:scglow 2.4s ease-in-out infinite}
.pill-sc i{font-style:normal;display:inline-grid;place-items:center;width:15px;height:15px;background:var(--ink);color:#ffd23f;margin-right:4px}
@keyframes scglow{50%{filter:brightness(1.25) saturate(1.3)}}
.hp-sub{display:flex;align-items:center;gap:8px;margin-top:6px;height:14px}
.hp-r .hp-sub{justify-content:flex-end}
.smw{display:flex;align-items:center;gap:6px;font:700 8.5px var(--mono);letter-spacing:.2em;color:#9ad}
.sm{width:clamp(70px,12vw,170px);height:7px;background:#1a1226;border:1px solid rgba(255,255,255,.4);transform:skewX(-20deg);overflow:hidden}
.hp-r .sm{transform:skewX(20deg)}
.sm i{display:block;height:100%;background:linear-gradient(90deg,#2f7bff,#19e3c2);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.hp-r .sm i{transform-origin:right;background:linear-gradient(270deg,#8b3dff,#ff6fd8)}
.smw.ready{color:var(--hot)}
.smw.ready span{animation:blink .4s steps(2) infinite}
.smw.ready .sm{border-color:var(--hot);box-shadow:0 0 12px var(--hot)}
.smw.ready .sm i{background:repeating-linear-gradient(90deg,#ffd23f 0 6px,#fff 6px 9px);animation:segglow .5s infinite}
.buffs{display:flex;gap:4px}
.buffs canvas{width:14px;height:16px;image-rendering:pixelated;animation:blink 1s steps(2) infinite}
/* pickups */
.drops{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.pickup{position:absolute;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;cursor:pointer;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.pickup .chute{width:64px;height:28px;border-radius:64px 64px 6px 6px;background:repeating-linear-gradient(90deg,#fff 0 10px,#ff3b4e 10px 20px);border:2px solid var(--ink);margin-bottom:-2px;position:relative}
.pickup .chute::after{content:"";position:absolute;left:8px;right:8px;top:24px;height:16px;border-left:1px solid #fff;border-right:1px solid #fff}
.pickup canvas{width:54px;height:60px;image-rendering:pixelated;background:rgba(11,6,20,.75);border:2px solid var(--hot);padding:4px;animation:pkpulse .8s ease-in-out infinite}
@keyframes pkpulse{50%{box-shadow:0 0 0 4px rgba(255,210,63,.35),0 0 26px var(--hot)}}
.pickup b{font:400 15px/1 var(--cond);letter-spacing:.06em;background:var(--hot);color:var(--ink);padding:3px 6px;white-space:nowrap}
.pickup small{font:700 8px var(--mono);letter-spacing:.14em;background:var(--ink);padding:2px 5px;white-space:nowrap}
.pickpop{position:absolute;transform:translate(-50%,-50%);font:400 40px/1 var(--cond);color:var(--hot);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);text-align:center;animation:dmg 1.2s ease-out forwards;white-space:nowrap}
.pickpop small{display:block;font:700 10px var(--mono);letter-spacing:.2em;-webkit-text-stroke:0;color:#fff}
.bill{position:absolute;width:30px;height:18px;display:grid;place-items:center;font:800 12px var(--mono);background:#3ccf6e;color:#0b3a1c;border:2px solid #0b3a1c}
.chatdrop{position:absolute;font:700 11px var(--mono);padding:4px 8px;background:#ffd23f;color:var(--ink);border-left:4px solid #ff3b4e;white-space:nowrap}
.word.parry{background:#19e3c2;font-size:72px} .word.block{background:#cfd6e0;font-size:40px} .word.crit{background:#ff3b4e;color:#fff} .word.pick{background:#ffd23f;font-size:34px}
.dmg.crit{color:#ff3b4e;font-size:64px;text-shadow:3px 3px 0 #fff,5px 5px 0 var(--ink)} .dmg.block{color:#cfd6e0;font-size:30px}
.parry-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(25,227,194,.65),transparent 60%);animation:hitflash .38s forwards;mix-blend-mode:screen}
/* super cut-in */
.cutin{position:absolute;inset:0;z-index:11;pointer-events:none;display:none;align-items:center}
.cutin.on{display:flex}
.cutin-band{width:100%;height:clamp(150px,26vh,240px);background:linear-gradient(90deg,var(--ink),var(--c) 30%,var(--ink));display:flex;align-items:center;gap:24px;padding:0 6vw;transform:skewY(-6deg);border-block:6px solid #fff;box-shadow:0 0 0 6px var(--ink);animation:cutband 1.5s cubic-bezier(.2,1,.3,1) forwards;overflow:hidden}
.cutin.from-r .cutin-band{flex-direction:row-reverse;text-align:right;background:linear-gradient(270deg,var(--ink),var(--c) 30%,var(--ink));animation-name:cutbandR}
@keyframes cutband{0%{transform:skewY(-6deg) translateX(-100%)}18%,82%{transform:skewY(-6deg) translateX(0)}100%{transform:skewY(-6deg) translateX(100%)}}
@keyframes cutbandR{0%{transform:skewY(-6deg) translateX(100%)}18%,82%{transform:skewY(-6deg) translateX(0)}100%{transform:skewY(-6deg) translateX(-100%)}}
.cutin canvas{height:120%;image-rendering:pixelated;transform:skewY(6deg) scale(1.2);filter:drop-shadow(8px 8px 0 var(--ink))}
.cutin-band>div{display:flex;flex-direction:column;gap:6px;transform:skewY(6deg)}
.cutin small{font:700 13px var(--mono);letter-spacing:.3em}
.cutin b{font:400 clamp(40px,7vw,104px)/.9 var(--cond);color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:6px 6px 0 var(--ink)}
.cutin em{font:400 clamp(14px,1.6vw,20px)/1.2 var(--tag);font-style:normal;color:var(--hot);text-shadow:2px 2px 0 var(--ink)}
.ko-sub{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:8px;font:700 14px var(--mono);letter-spacing:.3em;background:var(--ink);padding:12px 18px;border:1px solid #fff;text-align:center;max-width:90vw}
.ko-sub em{font:400 18px/1.25 var(--tag);letter-spacing:0;color:var(--hot);font-style:normal}
.ko-sub small{font-size:8px;letter-spacing:.2em;opacity:.55}
/* sheets */
.backdrop{position:absolute;inset:0;z-index:20;background:rgba(5,2,10,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;z-index:21;top:0;right:0;bottom:0;width:min(480px,100%);background:linear-gradient(180deg,#140b24,#0b0614);border-left:2px solid #fff;box-shadow:-12px 0 0 rgba(0,0,0,.35);padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.9,.15,1);overflow:hidden}
.sheet.open{transform:none}
.grab{display:none}
.sh-head{display:flex;align-items:center;gap:10px}
.sh-head h3{font:400 38px/1 var(--cond);letter-spacing:.02em;transform:skewX(-8deg)}
.sh-x{margin-left:auto;width:36px;height:36px;border:1px solid rgba(255,255,255,.4);font-size:16px}
.ex-stamp{font:700 8.5px var(--mono);letter-spacing:.14em;color:var(--red);border:1px solid var(--red);padding:3px 6px;transform:rotate(-2deg)}
.demo{font:800 9px var(--mono);letter-spacing:.14em;background:#19e3c2;color:var(--ink);padding:4px 7px;transform:rotate(-2deg)}
.tally{display:flex;height:22px;gap:3px;transform:skewX(-14deg)}
.tally i{display:grid;place-items:center;min-width:22px;transition:flex .6s cubic-bezier(.2,.9,.2,1)}
.tally b{font:800 11px var(--mono);transform:skewX(14deg)}
.legend{display:flex;flex-wrap:wrap;gap:10px;font:700 8.5px var(--mono);letter-spacing:.12em;opacity:.8}
.legend i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:700 9.5px var(--mono);letter-spacing:.12em;padding:6px 9px;border:1px solid rgba(255,255,255,.3);transition:.15s}
.chip.on{background:#fff;color:var(--ink);border-color:#fff}
.chip-sep{width:1px;background:rgba(255,255,255,.2);margin:0 4px}
.deck{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;flex:1;min-height:0;padding:6px 2px 10px;scrollbar-width:thin}
.card{position:relative;flex:0 0 86%;scroll-snap-align:center;background:#f4efe6;color:var(--ink);padding:16px 16px 14px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--c);display:flex;flex-direction:column;gap:12px;align-self:flex-start;min-height:min(330px,100%);overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(0,0,0,.06) 23px 24px);pointer-events:none}
.card.empty{background:none;color:#fff;border:1px dashed rgba(255,255,255,.3);box-shadow:none;font:600 12px var(--mono)}
.card-top{display:flex;align-items:center;gap:8px;font:700 9px var(--mono);letter-spacing:.14em}
.card-n{font:400 26px/1 var(--cond);letter-spacing:0}
.card-about{background:var(--c);padding:3px 6px}
.card .ex{margin-left:auto;color:var(--red);border:1px solid var(--red);padding:2px 5px}
.card-claim{font:800 17px/1.3 var(--ui);letter-spacing:-.01em}
.card-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;font:600 11px var(--mono)}
.card-meta dt{font-size:8px;letter-spacing:.2em;opacity:.55}
.src-chip{align-self:flex-start;font:700 10px var(--mono);color:var(--ink);background:#fff;border:2px solid var(--ink);padding:5px 9px;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.stamp{position:absolute;right:12px;bottom:14px;padding:6px 12px;border:4px solid currentColor;transform:rotate(-12deg);opacity:0;background:transparent!important}
.stamp span{font:400 30px/1 var(--cond);letter-spacing:.06em}
.stamp.v-t{color:#13a35c} .stamp.v-f{color:#e0263a} .stamp.v-m{color:#c98a00} .stamp.v-u{color:#555}
.stamp.slam{animation:slam .45s cubic-bezier(.2,1.8,.3,1) forwards}
@keyframes slam{0%{transform:rotate(-12deg) scale(3.2);opacity:0}60%{opacity:.95}100%{transform:rotate(-12deg) scale(1);opacity:.92}}
.sh-foot{font:600 9px/1.4 var(--mono);opacity:.5}
/* superchat */
.lbl{font:700 9px var(--mono);letter-spacing:.24em;opacity:.65}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tier{position:relative;padding:10px 4px 8px;background:#1a1226;border:2px solid color-mix(in srgb,var(--c) 50%,transparent);display:flex;flex-direction:column;align-items:center;gap:4px;overflow:hidden;transition:transform .2s cubic-bezier(.2,1.6,.3,1)}
.tier b{font:400 24px/1 var(--cond);color:var(--c)}
.tier small{font:700 6.5px/1.25 var(--mono);letter-spacing:.06em;opacity:.75;text-align:center}
.tier.on{background:var(--c);border-color:#fff;transform:translateY(-4px);box-shadow:0 0 22px var(--c)}
.tier.on b,.tier.on small{color:var(--ink);opacity:1}
.tier .sparks{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:9px 9px;opacity:0;animation:sparks 1.2s steps(6) infinite}
.tier.on .sparks{opacity:.5}
.tier:nth-child(4).on .sparks,.tier:nth-child(5).on .sparks{opacity:.8;background-size:6px 6px}
@keyframes sparks{to{background-position:9px -18px}}
.backers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.backer{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:#1a1226;border:2px solid rgba(255,255,255,.2);font:400 15px/1 var(--cond);letter-spacing:.04em;text-align:left;transition:.15s}
.backer canvas{width:30px;height:40px;image-rendering:pixelated}
.backer.on{border-color:var(--c);box-shadow:inset 0 0 0 2px var(--c),0 0 16px color-mix(in srgb,var(--c) 60%,transparent)}
.fields{display:flex;flex-direction:column;gap:8px}
.fields input,.fields textarea{font:600 14px var(--ui);color:#fff;background:#0b0614;border:1px solid rgba(255,255,255,.3);padding:10px 12px;resize:none;outline:none;border-radius:0}
.fields input:focus,.fields textarea:focus{border-color:var(--hot)}
.sc-prev,.scfly{--c:#19e3c2;background:var(--c);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(0,0,0,.5);padding:0 0 8px;overflow:hidden}
.sc-h{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(0,0,0,.18);padding:7px 10px;font:800 12px var(--ui)}
.sc-h span{font:400 18px/1 var(--cond)}
.sc-prev p,.scfly p{font:700 14px/1.3 var(--ui);padding:8px 10px 4px;word-break:break-word}
.sc-prev small,.scfly small{font:700 8px var(--mono);letter-spacing:.14em;padding:0 10px;opacity:.7}
.send{--c:#19e3c2;font:400 22px/1 var(--cond);letter-spacing:.06em;padding:15px;background:var(--c);color:var(--ink);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);transition:transform .1s}
.send:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.fine{font:600 9px var(--mono);opacity:.5;text-align:center}
.scfly{position:absolute;left:0;width:min(340px,78vw);z-index:12}
.scfly.big{width:min(440px,88vw);animation:segglow .5s infinite}
.scfly.big p{font-size:18px}
@media (max-width:760px){
  .hp-sub{margin-top:4px;height:10px}.smw{font-size:7px;gap:4px}.sm{width:52px;height:5px}.buffs canvas{width:10px;height:12px}
  .pill{font-size:8.5px;padding:6px 8px;letter-spacing:.1em}
  .brand-k,.brand-s{font-size:14px}
  .roster{padding:4px 16px 0;-webkit-mask:none;mask:none;justify-content:flex-start}
  .tile{flex:0 0 108px}
  .sheet{top:auto;left:0;right:0;width:100%;height:min(86svh,720px);border-left:0;border-top:2px solid #fff;box-shadow:0 -12px 0 rgba(0,0,0,.35);transform:translateY(105%);padding:10px 16px calc(16px + env(safe-area-inset-bottom));gap:10px}
  .grab{display:block;width:44px;height:5px;background:rgba(255,255,255,.35);margin:0 auto 2px;border-radius:3px}
  .sh-head h3{font-size:30px}
  .card{flex-basis:88%}.card-claim{font-size:15px}
  .tier b{font-size:20px}.tier small{font-size:6px}
  .pickup .chute{width:46px;height:20px}.pickup canvas{width:40px;height:44px}.pickup b{font-size:12px}.pickup small{display:none}
  .pickpop{font-size:28px}
  .cutin-band{height:150px;gap:12px}
  .word.parry{font-size:44px}.word.block{font-size:26px}.word.pick{font-size:22px}.dmg.crit{font-size:40px}
}

.v-t{background:#1fd17a;color:var(--ink)} .v-f{background:var(--red);color:#fff} .v-u{background:#666;color:#fff} .v-m{background:var(--hot);color:var(--ink)}
.card{min-height:min(280px,100%)}