/* $KNOCKOUT — late-90s 3D fighting game look.
   One dark look on purpose (arcade screen), so there is no light theme. */

:root{
  color-scheme:dark;
  --ink:#07050b;
  --night:#140a24;
  --panel:#1b1030;
  --panel-2:#241540;
  --line:#3b2560;
  --line-soft:#2a1946;
  --fire:#ff6a13;
  --fire-hot:#ffb347;
  --gold:#f6c343;
  --gold-hi:#ffe38a;
  --gold-dk:#a8740c;
  --glove:#d7192a;
  --glove-dk:#8e0f1a;
  --text:#f6efe4;
  --body:#e4d9f0;
  --muted:#bcaed3;
  --dim:#8b7ca6;
  --led-g:#3dfc8c;
  --led-r:#ff3b4e;
  --f-display:'Exo 2','Arial Black',Impact,sans-serif;
  --f-hud:'Chakra Petch','Arial Narrow',system-ui,sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-led:'Doto','Courier New',monospace;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:16px;
  --dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E");
  --chrome:linear-gradient(180deg,#ffffff 0%,#fff1c8 20%,#ffc94d 40%,#8f3000 49%,#4a1200 51%,#ff7a1a 55%,#ff5208 72%,#ffb03a 90%,#ffe9a6 100%);
}
@media (min-width:720px){:root{--gutter:32px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden;overflow-x:clip}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--gold)}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:200;padding:10px 16px;background:var(--gold);color:#000;font-family:var(--f-hud);font-weight:700}

/* ---------- Type ---------- */
.eyebrow{margin:0;font-family:var(--f-hud);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--fire-hot)}
.h1{margin:0;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(50px,8.4vw,98px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--text);text-shadow:4px 4px 0 #000;text-wrap:balance}
.h2{margin:0;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(38px,5.6vw,64px);line-height:.95;letter-spacing:-.005em;text-transform:uppercase;color:var(--text);text-shadow:3px 3px 0 #000;text-wrap:balance}
.h3{margin:0;font-family:var(--f-hud);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.lead{margin:0;font-size:19px;line-height:1.55;color:var(--body);max-width:36em;text-wrap:pretty}
.copy{margin:0;font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.ko-fight{color:var(--fire)}
.ko-stock{color:var(--led-g);text-shadow:4px 4px 0 #000,0 0 18px rgba(61,252,140,.45)}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:0;background:none;font-family:var(--f-hud);font-weight:700;font-size:18px;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.btn::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;transform:skewX(-12deg);border:3px solid #000;background:var(--btn-bg);box-shadow:var(--btn-in,inset 0 0 0 0 transparent),0 5px 0 #000}
.btn-fire{--btn-bg:linear-gradient(180deg,#ffd36b 0%,#ff9a2e 46%,#ff6a13 54%,#e0480a 100%);--btn-in:inset 0 2px 0 rgba(255,255,255,.45);color:#1a0800}
.btn-dark{--btn-bg:linear-gradient(180deg,#34204f,#1c1030);--btn-in:inset 0 0 0 2px rgba(188,174,211,.18);color:var(--text)}
.btn-fire:hover{color:#1a0800}
.btn-dark:hover{color:var(--gold-hi)}
.btn:hover::before{filter:brightness(1.1)}
.btn:active{transform:translateY(4px)}
.btn:active::before{box-shadow:var(--btn-in,inset 0 0 0 0 transparent),0 1px 0 #000}
.btn:focus-visible{outline:none}
.btn:focus-visible::before{outline:3px solid var(--gold-hi);outline-offset:3px}
.btn-sm{min-height:44px;padding:0 18px;font-size:16px}
.tba{display:inline-block;padding:3px 6px 2px;background:#000;color:var(--gold);font-family:var(--f-hud);font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.2;transform:skewX(-12deg)}
.is-tba{cursor:default}
.cta{display:flex;flex-wrap:wrap;gap:16px 22px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(7,5,11,.94);border-bottom:3px solid #000;box-shadow:0 3px 0 rgba(255,106,19,.55)}
.hdr-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:64px}
.hdr-l{display:flex;align-items:center;min-width:0}
.hdr-r{display:flex;justify-content:flex-end;min-width:0}
.nav-desk{display:flex;gap:24px;white-space:nowrap}
.nav-desk a{padding-block:10px;font-family:var(--f-hud);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.nav-desk a:hover{color:var(--gold)}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:3px solid #000;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--gold);text-decoration:none;white-space:nowrap}
.logo:hover{color:var(--gold-hi)}
.logo-mark{position:relative;flex-shrink:0;width:38px;height:38px}
.logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid #000}
.logo-mark .ph{width:100%;height:100%}
.logo-word{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:26px;line-height:1;letter-spacing:.01em;color:var(--gold);text-shadow:2px 2px 0 #000}
.hdr .tba{display:none}
.sheet{display:flex;flex-direction:column;padding:6px var(--gutter) 20px;background:#0d0818;border-top:3px solid #000}
.sheet[hidden]{display:none}
.sheet-link{display:flex;align-items:center;min-height:56px;border-bottom:2px dashed var(--line);font-family:var(--f-hud);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.sheet-link:hover{color:var(--gold)}

/* ---------- Slots: real image if present, drawn placeholder otherwise ---------- */
.slot > img{display:none}
.slot.has-img > img{display:block}
.slot.has-img > .ph{display:none}

/* ---------- Shared scene: night street, LED boards, floor, scanlines ---------- */
.scene{position:relative;overflow:hidden;isolation:isolate;container-type:size;background:#0a0514;--cqw:1vw;--cqh:4px}
@supports (width:1cqw){.scene{--cqw:1cqw;--cqh:1cqh}}
.scene-sky{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:
  radial-gradient(ellipse 55% 40% at 50% 80%,rgba(255,106,19,.55),transparent 70%),
  linear-gradient(180deg,#07030f 0%,#1a0a33 28%,#3a1560 52%,#6a1d4a 74%,#9a3320 100%)}
.scene-skyline{position:absolute;left:0;right:0;bottom:26%;z-index:1;width:100%;height:62%}
.led-band{position:absolute;left:0;right:0;bottom:26%;z-index:2;display:flex;align-items:center;height:clamp(18px,calc(6.5 * var(--cqh)),30px);overflow:hidden;background:#040107;border-block:2px solid #1d1528}
.led-band::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,transparent 44%,rgba(0,0,0,.55) 46%) 0 0/3px 3px;pointer-events:none}
.led-track{display:flex;white-space:nowrap;font-family:var(--f-led);font-weight:900;font-size:clamp(11px,calc(4.2 * var(--cqh)),19px);letter-spacing:.08em;animation:marquee 44s linear infinite}
.led-track span{margin-right:3em}
.led-track .up{color:var(--led-g);text-shadow:0 0 6px rgba(61,252,140,.8)}
.led-track .dn{color:var(--led-r);text-shadow:0 0 6px rgba(255,59,78,.8)}
@keyframes marquee{to{transform:translateX(-50%)}}
.scene-floor{position:absolute;left:0;right:0;bottom:0;z-index:3;height:26%;overflow:hidden;background:linear-gradient(180deg,#1d0b26 0%,#0a0410 100%)}
.scene-floor::before{content:"";position:absolute;left:-60%;right:-60%;top:0;height:320%;transform-origin:50% 0;transform:perspective(200px) rotateX(60deg);background-image:linear-gradient(90deg,rgba(255,106,19,.38) 2px,transparent 2px),linear-gradient(0deg,rgba(255,106,19,.38) 2px,transparent 2px);background-size:64px 64px;background-position:center top}
.scene-floor::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 45% 70% at 50% 0%,rgba(255,138,40,.35),transparent 70%)}
.scene-props{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}
.prop-crate{position:absolute;left:1.5%;bottom:3%;--ph:min(calc(34 * var(--cqh)),calc(24 * var(--cqw)));height:var(--ph);width:calc(var(--ph) * .857)}
.prop-bottles{position:absolute;right:1.5%;bottom:3%;--ph:min(calc(24 * var(--cqh)),calc(17 * var(--cqw)));height:var(--ph);width:calc(var(--ph) * 1.364)}
@media (max-width:640px){
  .prop-crate{left:50%;bottom:23%;--ph:calc(17 * var(--cqh));transform:translateX(-50%)}
  .prop-bottles{display:none}
}
.scene-fx{position:absolute;top:0;right:0;bottom:0;left:0;z-index:7;pointer-events:none;background:
  repeating-linear-gradient(180deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.scene-fx::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--dither);background-size:4px 4px;image-rendering:pixelated}

/* ---------- HUD (hero and game) ---------- */
.hud{position:absolute;top:clamp(8px,calc(2.5 * var(--cqh)),16px);left:clamp(8px,calc(2 * var(--cqw)),20px);right:clamp(8px,calc(2 * var(--cqw)),20px);z-index:9;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:clamp(6px,calc(1.4 * var(--cqw)),16px)}
.hud-side{display:flex;align-items:flex-start;gap:clamp(5px,calc(1 * var(--cqw)),10px);min-width:0}
.hud-p2{flex-direction:row-reverse}
.hud-face{flex-shrink:0;--fs:clamp(28px,min(calc(11 * var(--cqh)),calc(12 * var(--cqw))),62px);width:var(--fs);height:var(--fs);overflow:hidden;border:3px solid #000;background:linear-gradient(180deg,#3a1f5a,#150a26);box-shadow:inset 0 0 0 2px var(--gold)}
.hud-face svg{display:block;width:100%;height:100%}
.hud-meta{display:flex;flex:1;flex-direction:column;gap:clamp(3px,calc(1 * var(--cqh)),6px);min-width:0}
.hud-p2 .hud-meta{align-items:flex-end}
.hud-p2 .hud-name{justify-content:flex-end}
.hud-bar{position:relative;width:100%;height:clamp(12px,calc(4.4 * var(--cqh)),24px);overflow:hidden;border:3px solid #000;background:#3b0710;box-shadow:0 0 0 2px var(--gold-dk);transform:skewX(-20deg)}
.hud-p2 .hud-bar{transform:skewX(20deg)}
.hud-fill,.hud-lag{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;transform:scaleX(var(--v,1))}
.hud-p2 .hud-fill,.hud-p2 .hud-lag{transform-origin:right center}
.hud-fill{background:linear-gradient(180deg,#fff6b0 0%,#ffd23f 32%,#ff9a1f 70%,#e0520a 100%);transition:transform .18s ease-out}
.hud-lag{background:#ff2a3a;transition:transform .6s ease-in .35s}
.is-reset .hud-fill,.is-reset .hud-lag{transition:none}
.hud-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%;overflow:hidden;font-family:var(--f-hud);font-style:italic;font-weight:700;font-size:clamp(10px,min(calc(3.8 * var(--cqh)),calc(3.4 * var(--cqw))),18px);line-height:1.1;letter-spacing:.06em;color:#fff;text-shadow:2px 2px 0 #000;white-space:nowrap}
.hud-wins{display:inline-flex;gap:5px}
.hud-wins b{--ws:clamp(7px,calc(2.2 * var(--cqh)),11px);width:var(--ws);height:var(--ws);border:2px solid #000;background:#2b1a40;transform:rotate(45deg)}
.hud-wins b.on{background:var(--gold)}
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:2px}
.hud-timer{min-width:2ch;padding:0 .12em;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(28px,calc(12 * var(--cqh)),64px);line-height:.95;text-align:center;font-variant-numeric:tabular-nums;color:var(--gold);text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.hud-round,.hud-score{font-family:var(--f-hud);font-weight:700;font-size:clamp(9px,calc(3 * var(--cqh)),14px);letter-spacing:.12em;line-height:1.1;color:#fff;text-shadow:2px 2px 0 #000;white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-score{color:var(--fire-hot)}

/* ---------- Chrome lettering (K.O., VS, FIGHT!) ---------- */
.chrome{position:relative;display:inline-block;isolation:isolate;padding:0 .14em;font-family:var(--f-display);font-style:italic;font-weight:900;line-height:1;letter-spacing:.01em;white-space:nowrap;color:transparent}
.chrome::before,.chrome::after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;padding:inherit}
.chrome::before{z-index:0;color:#000;-webkit-text-stroke:.16em #000;text-shadow:0 .07em 0 #000,0 0 .35em rgba(255,106,19,.75),0 0 .9em rgba(255,60,0,.45)}
.chrome::after{z-index:1;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.chrome-gold{--chrome:linear-gradient(180deg,#fffbe6 0%,#ffe38a 30%,#e0a31a 49%,#6a4200 51%,#f6c343 62%,#ffe9a0 100%)}
.chrome-red{--chrome:linear-gradient(180deg,#fff2e6 0%,#ff9a6b 30%,#e0202f 49%,#5a0410 51%,#ff3b3b 64%,#ffb08a 100%)}

/* ---------- Hero stage ---------- */
.stage{height:clamp(360px,100vw,460px);border-bottom:4px solid #000}
@media (min-width:900px){.stage{height:clamp(480px,44vw,640px)}}
.fighter{position:absolute;bottom:6%;z-index:5}
.fighter::before{content:"";position:absolute;left:8%;right:8%;bottom:-4%;height:9%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}
.fighter > img,.fighter > .ph{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
.fighter-roo{left:max(3%,calc(50% - calc(64 * var(--cqh))));--fh:min(calc(66 * var(--cqh)),calc(54 * var(--cqw)));height:var(--fh);width:calc(var(--fh) * .765)}
.fighter-bear{right:max(2%,calc(50% - calc(70 * var(--cqh))));--fh:min(calc(72 * var(--cqh)),calc(58 * var(--cqw)));height:var(--fh);width:calc(var(--fh) * .824);transform-origin:70% 100%}
.stars{position:absolute;top:3%;left:10%;width:50%;height:16%;display:none;z-index:2;font-size:clamp(12px,calc(4.2 * var(--cqh)),22px)}
.stars svg{position:absolute;left:50%;top:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;animation:orbit 1.1s linear infinite}
.stars svg:nth-child(2){animation-delay:-.37s}
.stars svg:nth-child(3){animation-delay:-.73s}
@keyframes orbit{0%{transform:translate(-2.2em,0) scale(.8)}25%{transform:translate(0,.5em) scale(1.1)}50%{transform:translate(2.2em,0) scale(.8)}75%{transform:translate(0,-.5em) scale(.55)}100%{transform:translate(-2.2em,0) scale(.8)}}
.stage-spark{position:absolute;left:calc(50% + calc(1 * var(--cqw)));top:34%;z-index:6;--sz:min(calc(22 * var(--cqh)),calc(18 * var(--cqw)));width:var(--sz);height:var(--sz);opacity:0;pointer-events:none}
.announce{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;place-items:start center;padding-top:clamp(62px,calc(17 * var(--cqh)),118px);pointer-events:none}
.ann{grid-area:1/1;opacity:0}
.ann-vs{font-size:min(calc(30 * var(--cqh)),calc(24 * var(--cqw)))}
.ann-round{font-size:min(calc(15 * var(--cqh)),calc(12 * var(--cqw)))}
.ann-fight{font-size:min(calc(22 * var(--cqh)),calc(18 * var(--cqw)))}
.ann-ko{font-size:min(calc(27 * var(--cqh)),calc(23 * var(--cqw)))}
.replay{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:11;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:2px solid #000;background:rgba(7,5,11,.75);color:var(--muted);font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.replay:hover{color:var(--gold)}

.stage[data-phase="vs"] .ann-vs{opacity:1;animation:ann-in .5s cubic-bezier(.2,1.5,.4,1) both}
.stage[data-phase="round"] .ann-round{opacity:1;animation:ann-in .45s cubic-bezier(.2,1.5,.4,1) both}
.stage[data-phase="fight"] .ann-fight{opacity:1;animation:ann-in .35s cubic-bezier(.2,1.6,.4,1) both}
.stage[data-phase="ko"] .ann-ko{opacity:1;transform:rotate(-4deg);animation:ko-in .55s cubic-bezier(.2,1.4,.4,1) both}
.stage[data-phase="brawl"] .fighter-roo{animation:jab .3s ease-out 3}
.stage[data-phase="brawl"] .fighter-bear{animation:flinch .3s ease-out 3}
.stage[data-phase="brawl"] .stage-spark{animation:spark-flash .3s ease-out 3}
.stage[data-phase="ko"] .fighter-bear{transform:translateY(5%) rotate(12deg);filter:saturate(.55) brightness(.75);transition:transform .5s cubic-bezier(.3,1.5,.5,1),filter .5s}
.stage[data-phase="ko"] .fighter-bear .stars{display:block}
.stage[data-phase="ko"] .fighter-roo{animation:hop 1.1s ease-in-out infinite}
.stage[data-phase="vs"] .fighter-roo,.stage[data-phase="round"] .fighter-roo,.stage[data-phase="fight"] .fighter-roo,
.stage[data-phase="vs"] .fighter-bear,.stage[data-phase="round"] .fighter-bear,.stage[data-phase="fight"] .fighter-bear{animation:idle 1s ease-in-out infinite}
@keyframes ann-in{0%{transform:scale(2.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ko-in{0%{transform:scale(3.2) rotate(-12deg);opacity:0}55%{transform:scale(.9) rotate(-2deg);opacity:1}78%{transform:scale(1.07) rotate(-5deg)}100%{transform:scale(1) rotate(-4deg);opacity:1}}
@keyframes jab{0%,100%{transform:translateX(0)}35%{transform:translateX(12%)}}
@keyframes flinch{0%,100%{transform:none;filter:none}35%{transform:translateX(6%) rotate(4deg);filter:brightness(2)}}
@keyframes spark-flash{0%{transform:scale(.2) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.3) rotate(40deg);opacity:0}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%)}}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5%)}}

/* ---------- Hero panel ---------- */
.hero{background:linear-gradient(180deg,#0e0619 0%,var(--ink) 100%)}
.hero-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 48px;align-items:end;padding-block:48px 80px}
.hero-copy{display:flex;flex-direction:column;gap:20px}
.hero-act{display:flex;flex-direction:column;gap:22px}
.ca{display:flex;flex-direction:column;gap:8px;min-width:0}
.ca-label{font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ca-row{display:flex;min-height:56px;border:3px solid #000;background:#0d0818;box-shadow:inset 0 0 0 2px var(--line),0 5px 0 #000}
.ca-value{flex:1;min-width:0;display:flex;align-items:center;padding:10px 14px;font-family:var(--f-mono);font-size:15px;line-height:1.35;color:var(--text);overflow-wrap:anywhere;user-select:all}
.ca-value.is-tba{font-family:var(--f-hud);font-weight:700;letter-spacing:.2em;color:var(--gold)}
.ca-copy{flex-shrink:0;min-width:92px;padding:0 16px;border:0;border-left:3px solid #000;background:linear-gradient(180deg,#ffe38a,#f6c343);color:#1a0f00;font-family:var(--f-hud);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ca-copy:hover{background:linear-gradient(180deg,#fff0b0,#ffd35a)}
.ca-copy:disabled{background:#241540;color:var(--dim);cursor:not-allowed}
.ca-note{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(64px,9vw,112px)}
.sec-night{background-color:#110822;background-image:var(--dither),linear-gradient(180deg,#110822 0%,#1a0c31 100%);background-size:4px 4px,auto;border-block:4px solid #000}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:46em;margin-bottom:40px}

/* double meaning */
.ko-split{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch}
.ko-card{display:flex;flex-direction:column;gap:10px;padding:26px 28px 30px;border:3px solid #000;box-shadow:inset 0 0 0 2px var(--line),0 6px 0 #000}
.ko-card-fight{background:radial-gradient(ellipse 80% 70% at 20% 0%,rgba(255,106,19,.28),transparent 70%),var(--panel)}
.ko-card-stock{background:radial-gradient(ellipse 80% 70% at 20% 0%,rgba(61,252,140,.14),transparent 70%),#0b1410}
.ko-word{margin:0 0 6px;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:96px;line-height:.9;text-shadow:5px 5px 0 #000}
.ko-led{align-self:flex-start;padding:4px 18px 8px;font-family:var(--f-led);font-style:normal;font-size:84px;line-height:1;letter-spacing:.06em;color:var(--led-g);background:#030b06;border:3px solid #000;box-shadow:inset 0 0 0 2px #0e5a31;text-shadow:0 0 14px rgba(61,252,140,.7)}
.ko-label{margin:0;font-family:var(--f-hud);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ko-eq{display:grid;place-items:center}
.ko-eq span{display:inline-block;padding:10px 16px;background:var(--gold);color:#1a0f00;border:3px solid #000;box-shadow:0 4px 0 #000;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:24px;letter-spacing:.04em;transform:skewX(-10deg)}

/* how it works */
.rounds{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.round{position:relative;display:flex;flex-direction:column;gap:12px;padding:34px 24px 26px;background:var(--panel);border:3px solid #000;box-shadow:inset 0 0 0 2px var(--line-soft),0 6px 0 #000}
.round:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:14px;height:22px;margin-top:-11px;background:var(--fire);clip-path:polygon(0 0,100% 50%,0 100%)}
.round-tag{position:absolute;top:-16px;left:18px;padding:5px 12px;background:var(--gold);border:3px solid #000;color:#1a0f00;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:16px;letter-spacing:.04em;text-transform:uppercase;transform:skewX(-10deg)}
.round-ico{width:56px;height:56px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.fact{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:3px solid #000;background:#0d0818;box-shadow:inset 0 0 0 2px var(--line-soft)}
.fact-num{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:46px;line-height:1;color:var(--gold);text-shadow:3px 3px 0 #000;font-variant-numeric:tabular-nums}
.fact-txt{font-size:16px;line-height:1.45;color:var(--muted)}
.source{margin:14px 0 0;font-size:14px;color:var(--dim)}

/* fighter card */
.fcard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:4px solid #000;background:#12081f;box-shadow:0 8px 0 #000,inset 0 0 0 3px var(--gold-dk)}
.fcard-art{position:relative;min-height:480px;overflow:hidden;border-right:4px solid #000;background:
  repeating-linear-gradient(-60deg,rgba(255,106,19,.09) 0 18px,transparent 18px 36px),
  radial-gradient(ellipse 70% 55% at 50% 72%,rgba(255,106,19,.55),transparent 70%),
  linear-gradient(160deg,#3a1450,#12081f)}
.fcard-art > img,.fcard-art > .ph{position:absolute;left:50%;bottom:92px;height:calc(100% - 130px);width:auto;max-width:92%;aspect-ratio:260/340;object-fit:contain;object-position:bottom;transform:translateX(-50%)}
.fcard-plate{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;padding:14px 18px;background:#000;border-top:3px solid var(--gold-dk)}
.fcard-p1{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;background:var(--glove);color:#fff;border:2px solid var(--gold);font-family:var(--f-display);font-style:italic;font-weight:900;font-size:20px;transform:skewX(-10deg)}
.fcard-name{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:32px;line-height:1;color:var(--gold)}
.fcard-class{font-family:var(--f-hud);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fcard-info{display:flex;flex-direction:column;gap:26px;padding:30px;min-width:0}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0}
.stat{padding-block:12px;border-bottom:2px dashed var(--line);min-width:0}
.stat dt{font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat dd{margin:4px 0 0;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:26px;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat dd small{margin-left:6px;font-family:var(--f-hud);font-style:normal;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fire-hot)}
.curve{padding:18px 20px;border:3px solid #000;background:#0d0818;box-shadow:inset 0 0 0 2px var(--line-soft)}
.curve-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.curve-title{font-family:var(--f-hud);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.chip{padding:4px 8px;border:2px solid #000;background:#2a1c40;color:var(--gold);font-family:var(--f-hud);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.curve-bar{position:relative;height:22px;margin:14px 6px 0;border:3px solid #000;background:linear-gradient(90deg,transparent calc(100% - 2px),#000 0) 0 0/10% 100%,#211536;transform:skewX(-20deg);overflow:hidden}
.curve-bar i{display:block;height:100%;width:calc(var(--p,0) * 1%);background:linear-gradient(180deg,#fff6b0,#ff9a1f 60%,#e0520a)}
.curve-marks{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--f-hud);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.curve-marks b{color:var(--text);font-size:15px}
.curve-note{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--dim)}
.special{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 20px;border:3px solid #000;background:linear-gradient(90deg,rgba(246,195,67,.16),rgba(255,106,19,.05));box-shadow:inset 0 0 0 2px var(--gold-dk)}
.special-label{grid-column:1/-1;font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.special-name{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:28px;line-height:1.05;text-transform:uppercase;color:var(--text)}
.special-cmd{padding:6px 10px;background:#000;color:var(--gold);font-family:var(--f-hud);font-weight:700;font-size:19px;letter-spacing:.1em;white-space:nowrap}
.special-desc{grid-column:1/-1;font-size:16px;color:var(--muted)}

/* how to buy */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;padding:22px;border:3px solid #000;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line-soft)}
.step .h3{margin-bottom:6px}
.step-n{display:grid;place-items:center;width:50px;height:50px;background:linear-gradient(180deg,#ffd36b,#ff6a13);border:3px solid #000;color:#1a0800;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:28px;transform:skewX(-10deg)}
.buy-box{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
.buy-box .ca{max-width:640px}
.warn{margin:32px 0 0;padding:14px 18px;border:3px solid #000;background:rgba(215,25,42,.14);box-shadow:inset 0 0 0 2px rgba(215,25,42,.55);font-size:16px;line-height:1.5;color:var(--body)}
.warn b{color:#fff}

/* faq */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:0 32px;align-items:start}
.faq-wrap .sec-head{grid-column:1/-1}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{border:3px solid #000;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line-soft)}
.faq summary{display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 18px;list-style:none;cursor:pointer;font-family:var(--f-hud);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:.02em;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex-shrink:0;width:0;height:0;border-left:10px solid var(--fire);border-block:7px solid transparent;transition:transform .15s}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq summary:hover{color:var(--gold-hi)}
.faq p{margin:0;padding:0 20px 18px 42px;font-size:17px;line-height:1.6;color:var(--body)}
.faq .example{margin:0 20px 20px 42px;padding:14px 16px;border:2px dashed var(--line);background:#0d0818;font-size:16px}
.faq code{padding:1px 6px;background:#000;color:var(--gold);font-family:var(--f-mono);font-size:.88em}
.risks{position:sticky;top:96px;padding:22px 24px;border:3px solid #000;background:linear-gradient(180deg,rgba(215,25,42,.2),rgba(215,25,42,.05));box-shadow:inset 0 0 0 2px rgba(215,25,42,.55)}
.risks ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.45;color:var(--body)}
.risks li::marker{color:var(--led-r)}

/* ---------- Game ---------- */
.sec-game{background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,106,19,.16),transparent 70%),var(--ink)}
.game{position:relative;max-width:980px;margin-inline:auto;border:4px solid #000;background:#0a0514;box-shadow:0 8px 0 #000,inset 0 0 0 3px var(--line);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.g-arena{height:clamp(420px,62vh,560px);cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-fighter{position:absolute;bottom:7%;z-index:5}
.g-fighter::before{content:"";position:absolute;left:8%;right:8%;bottom:-4%;height:9%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}
.g-roo{left:max(4%,calc(50% - calc(60 * var(--cqh))));--fh:min(calc(58 * var(--cqh)),calc(48 * var(--cqw)));height:var(--fh);width:calc(var(--fh) * .765);transition:transform .16s ease-out,opacity .16s}
.g-bear{right:max(3%,calc(50% - calc(66 * var(--cqh))));--fh:min(calc(66 * var(--cqh)),calc(54 * var(--cqw)));height:var(--fh);width:calc(var(--fh) * .824)}
.g-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.g-svg .p-arm,.g-svg .p-farm,.g-svg .p-head{transform-box:view-box;transition:transform .14s ease-out}
.g-roo .p-arm{transform-origin:158px 118px}
.g-bear .p-arm{transform-origin:150px 120px}
.g-bear .p-farm{transform-origin:190px 112px}
.g-bear .p-head{transform-origin:130px 110px}

.g-roo.is-punch{animation:roo-lunge .17s ease-out}
.g-roo.is-punch .p-arm{animation:roo-jab .17s ease-out}
.g-roo.is-dodge{transform:translate(-30%,4%) scale(.94);opacity:.55;transition-duration:.05s}
.g-roo.is-hurt{animation:roo-hurt .4s ease-out}
.g-roo.is-super{animation:roo-super .5s cubic-bezier(.2,.8,.3,1)}
.g-roo.is-super .p-arm{animation:roo-upper .5s ease-out}
.g-roo.is-win{animation:hop .6s ease-in-out infinite}
.g-roo.is-down{transform:translateY(8%) rotate(-14deg);transform-origin:30% 100%;filter:saturate(.5) brightness(.7);transition:transform .5s,filter .5s}
@keyframes roo-lunge{35%{transform:translateX(20%)}}
@keyframes roo-jab{35%{transform:translate(30px,-8px)}}
@keyframes roo-hurt{25%{transform:translateX(-18%) rotate(-6deg);filter:brightness(1.5) sepia(1) saturate(5) hue-rotate(-30deg)}}
@keyframes roo-super{40%{transform:translate(32%,-20%) rotate(-8deg)}}
@keyframes roo-upper{40%{transform:translate(18px,-44px) rotate(-55deg)}}

.g-bear[data-state="idle"] .g-svg{animation:breathe 1.4s ease-in-out infinite}
.g-bear[data-state="guard"] .p-arm{transform:rotate(40deg)}
.g-bear[data-state="guard"] .p-farm{transform:rotate(48deg)}
.g-bear[data-state="guard"] .g-svg{filter:drop-shadow(0 0 5px rgba(140,190,255,.95))}
.g-bear[data-state="windup"] .p-arm{transform:rotate(95deg);transition-duration:.25s}
.g-bear[data-state="windup"] .p-farm{transform:rotate(60deg);transition-duration:.25s}
.g-bear[data-state="windup"] .g-svg{transform:translateX(3%) rotate(5deg);transition:transform .25s;filter:drop-shadow(0 0 7px rgba(255,59,78,.95))}
.g-bear[data-state="swipe"] .p-arm{transform:rotate(-25deg);transition-duration:.07s}
.g-bear[data-state="swipe"] .g-svg{transform:translateX(-30%) rotate(-4deg);transition:transform .08s}
.g-bear[data-state="dizzy"] .g-svg{animation:wobble .5s ease-in-out infinite}
.g-bear[data-state="dizzy"] .p-arm{transform:rotate(-12deg)}
.g-bear[data-state="ko"] .g-svg{transform:translate(6%,9%) rotate(16deg);filter:saturate(.5) brightness(.7);transition:transform .6s cubic-bezier(.3,1.4,.5,1),filter .6s}
.g-bear[data-state="dizzy"] .stars,.g-bear[data-state="ko"] .stars{display:block}
.g-bear.is-hit{animation:bear-hit .2s ease-out}
@keyframes breathe{50%{transform:scaleY(1.02) translateY(-.4%)}}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateX(2%)}}
@keyframes bear-hit{35%{transform:translateX(4%) rotate(3deg);filter:brightness(2.2)}}

.g-warn{position:absolute;left:18%;top:-14%;z-index:3;display:none;--wsz:calc(var(--fh) * .165);width:var(--wsz);height:var(--wsz);place-items:center}
.g-bear[data-state="windup"] .g-warn{display:grid}
.g-bang{position:relative;z-index:1;display:grid;place-items:center;width:78%;height:78%;background:var(--glove);border:3px solid #000;color:#fff;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:min(calc(8 * var(--cqh)),calc(7 * var(--cqw)));line-height:1;transform:skewX(-8deg);text-shadow:2px 2px 0 #000}
.g-ring{position:absolute;top:-35%;right:-35%;bottom:-35%;left:-35%;border:4px solid var(--gold);border-radius:50%;opacity:.4}
.g-bear[data-state="windup"] .g-ring{animation:ring var(--wind,800ms) linear forwards}
.g-warn.is-now .g-ring{border-color:var(--led-g);box-shadow:0 0 14px var(--led-g),inset 0 0 10px var(--led-g)}
.g-warn.is-now .g-bang{background:#0e7a3e}
@keyframes ring{from{transform:scale(2.3);opacity:.35}to{transform:scale(.72);opacity:1}}

.g-fxlayer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none}
.g-bottle{position:absolute;bottom:7%;z-index:9;--bw:clamp(44px,min(calc(9 * var(--cqh)),calc(8 * var(--cqw))),64px);width:var(--bw);height:calc(var(--bw) * 2.75);margin-left:calc(var(--bw) * -.5);padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 0 10px rgba(246,195,67,.85));animation:bottle-drop .5s cubic-bezier(.3,1.6,.5,1) both;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.g-bottle svg{display:block;width:100%;height:100%}
.g-bottle.is-blink{animation:bottle-blink .2s steps(2) infinite}
@keyframes bottle-drop{0%{transform:translateY(-140%) rotate(-30deg);opacity:0}60%{transform:translateY(0) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes bottle-blink{50%{opacity:.35}}
.g-spark{position:absolute;--sz:min(calc(18 * var(--cqh)),calc(15 * var(--cqw)));width:var(--sz);height:var(--sz);margin:calc(var(--sz) * -.5) 0 0 calc(var(--sz) * -.5);animation:g-spark .28s ease-out forwards}
.g-spark.is-big{--sz:min(calc(34 * var(--cqh)),calc(28 * var(--cqw)))}
.g-spark.is-block{filter:hue-rotate(170deg) saturate(.6)}
@keyframes g-spark{0%{transform:scale(.3) rotate(0);opacity:1}100%{transform:scale(1.25) rotate(35deg);opacity:0}}
.g-pop{position:absolute;left:50%;top:30%;z-index:12;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:min(calc(9 * var(--cqh)),calc(7.5 * var(--cqw)));line-height:1;letter-spacing:.02em;white-space:nowrap;color:#fff;text-shadow:3px 3px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;pointer-events:none;animation:pop .75s ease-out forwards}
.g-pop.is-good{color:var(--led-g)}
.g-pop.is-bad{color:var(--led-r)}
.g-pop.is-gold{color:var(--gold)}
.g-pop.is-block{color:#9fd8ff}
@keyframes pop{0%{transform:translate(-50%,12px) scale(.6);opacity:0}18%{transform:translate(-50%,0) scale(1.12);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-26px) scale(1);opacity:0}}
.g-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;pointer-events:none;animation:flash .3s ease-out forwards}
@keyframes flash{from{opacity:.55}to{opacity:0}}
.g-arena.is-shake{animation:shake .3s}
.game.is-paused .g-arena *{animation-play-state:paused!important}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}

.g-combo{position:absolute;left:3%;top:25%;z-index:9;display:none;flex-direction:column;align-items:flex-start;gap:2px;line-height:.9;pointer-events:none}
.g-combo.is-on{display:flex}
.g-combo b{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:min(calc(14 * var(--cqh)),calc(11 * var(--cqw)));color:var(--gold);text-shadow:3px 3px 0 #000,-1px -1px 0 #000}
.g-combo span{font-family:var(--f-hud);font-weight:700;font-size:min(calc(4.6 * var(--cqh)),calc(4 * var(--cqw)));letter-spacing:.12em;color:#fff;text-shadow:2px 2px 0 #000}
.g-combo em{font-family:var(--f-hud);font-style:normal;font-weight:700;font-size:min(calc(4.2 * var(--cqh)),calc(3.6 * var(--cqw)));color:var(--fire-hot);text-shadow:2px 2px 0 #000}
.g-combo.is-bump b{animation:bump .15s ease-out}
@keyframes bump{50%{transform:scale(1.18)}}
.g-announce{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding-bottom:8%;pointer-events:none}
.g-announce .chrome{animation:ann-in .4s cubic-bezier(.2,1.5,.4,1) both}
.g-announce .g-ann-ko{font-size:min(calc(30 * var(--cqh)),calc(26 * var(--cqw)));transform:rotate(-4deg);animation:ko-in .55s cubic-bezier(.2,1.4,.4,1) both}
.g-announce .g-ann-mid{font-size:min(calc(16 * var(--cqh)),calc(13 * var(--cqw)))}

.g-sound,.g-pause{position:absolute;bottom:8px;z-index:11;display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:2px solid #000;background:rgba(7,5,11,.78);color:var(--muted);font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.g-sound{left:8px;padding:0 12px}
.g-pause{right:8px;width:44px}
.g-sound:hover,.g-pause:hover{color:var(--gold)}
.g-sound[aria-pressed="false"]{color:var(--dim);text-decoration:line-through}

.g-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:16px;overflow:auto;background:rgba(7,5,11,.74);cursor:default}
.g-overlay[hidden]{display:none}
.g-panel{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,520px);margin:auto;padding:22px 20px 24px;text-align:center;background:linear-gradient(180deg,#221338,#12081f);border:4px solid #000;box-shadow:inset 0 0 0 2px var(--gold-dk),0 8px 0 #000}
.g-kicker{margin:0;font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fire-hot)}
.g-title{margin:0;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(28px,5vw,42px);line-height:1;text-transform:uppercase;color:var(--text);text-shadow:3px 3px 0 #000}
.g-title .chrome{font-size:1.4em}
.g-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,calc(1.6 * var(--cqw)),10px);width:100%;padding-top:10px}
.g-pick{position:relative;--pk:clamp(44px,calc(12.5 * var(--cqw)),78px);width:var(--pk);height:var(--pk);padding:0;border:3px solid #000;background:linear-gradient(180deg,#3a1f5a,#150a26);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-pick svg{display:block;width:100%;height:100%}
.g-pick:hover{box-shadow:inset 0 0 0 2px var(--gold-hi)}
.g-pick[aria-checked="true"]{background:linear-gradient(180deg,#8a2a1c,#2a0e44);box-shadow:inset 0 0 0 3px var(--gold),0 0 0 3px var(--fire)}
.g-pick[aria-checked="true"]::after{content:"P2";position:absolute;top:-12px;left:50%;padding:1px 6px;background:var(--glove);border:2px solid #000;color:#fff;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:11px;line-height:1.2;transform:translateX(-50%)}
.g-foe{display:flex;flex-direction:column;align-items:center;gap:6px}
.g-tag{margin:0;font-family:var(--f-hud);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--fire-hot)}
.g-stats{display:grid;grid-template-columns:auto auto;align-items:center;gap:6px 14px;margin:4px 0 0;font-family:var(--f-hud);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.g-stats dt{color:var(--muted);text-align:right}
.g-stats dd{display:flex;gap:4px;margin:0}
.g-stats i{width:16px;height:10px;border:1px solid #000;background:#2b1a40;transform:skewX(-20deg)}
.g-stats i.on{background:linear-gradient(180deg,#ffd36b,#ff6a13)}
.g-guide{list-style:none;max-width:980px;margin:20px auto 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.g-guide li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border:3px solid #000;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line-soft);font-size:15px;line-height:1.4;color:var(--body)}
.g-guide b{font-family:var(--f-hud);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.g-guide em{padding:0 6px;background:var(--glove);color:#fff;font-style:normal;font-weight:700}
.g-guide kbd{margin-top:2px;padding:2px 6px;border:1px solid var(--line);background:#000;color:var(--muted);font-family:var(--f-hud);font-weight:600;font-size:12px;white-space:nowrap}
.g-best{margin:0;font-family:var(--f-hud);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--muted)}
.g-best:empty{display:none}
.g-res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;width:100%;max-width:320px;margin:0;font-family:var(--f-hud);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.g-res dt{color:var(--muted)}
.g-res dd{margin:0;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.g-res .g-res-total{color:var(--gold);font-size:18px}
.g-msg{margin:0;font-size:16px;line-height:1.5;color:var(--body);max-width:30em}
.g-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 24px;padding-top:4px}

.g-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.35fr);gap:10px;padding:12px;background:#120a20;border-top:4px solid #000}
.g-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:84px;padding:6px 8px;border:3px solid #000;font-family:var(--f-hud);font-weight:700;font-size:20px;line-height:1;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 5px 0 #000,inset 0 2px 0 rgba(255,255,255,.22)}
.g-btn small{font-size:11px;font-weight:600;letter-spacing:.08em;opacity:.75}
.g-btn:active,.g-btn.is-down{transform:translateY(4px);box-shadow:0 1px 0 #000,inset 0 2px 0 rgba(255,255,255,.22)}
.g-punch{background:linear-gradient(180deg,#ff5a5a,#d7192a 55%,#8e0f1a);color:#fff;text-shadow:2px 2px 0 #000}
.g-dodge{background:linear-gradient(180deg,#3d2c66,#241540);color:var(--text)}
.g-super{background:linear-gradient(180deg,#2e2014,#1a1108);color:var(--dim);cursor:not-allowed}
.g-super.is-ready{background:linear-gradient(180deg,#fff0a0,#f6c343 50%,#d98a0c);color:#1a0f00;cursor:pointer;animation:ready .55s ease-in-out infinite alternate}
@keyframes ready{to{box-shadow:0 5px 0 #000,inset 0 2px 0 rgba(255,255,255,.4),0 0 18px rgba(246,195,67,.8)}}
.g-meter{display:block;width:82%;height:8px;border:1px solid #000;background:#000}
.g-meter b{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff6a13,#f6c343)}
@media (hover:none){.g-guide kbd,.g-btn small{display:none}}
.g-problem{display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 14px;background:#3a0710;border-top:3px solid #000;color:#fff;font-family:var(--f-hud);font-weight:600;font-size:14px;line-height:1.4;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.g-problem small{font-weight:500;font-size:11px;color:#ffb3bb}

/* ---------- Footer, toast ---------- */
.ftr{padding-block:52px 64px;background:#050309;border-top:4px solid #000}
.ftr-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 48px}
.ftr-tag{margin:8px 0 0;font-family:var(--f-hud);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ftr-links{display:flex;flex-wrap:wrap;gap:6px 24px;align-content:start}
.ftr-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-hud);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.ftr-links a:hover{color:var(--gold)}
.ftr-links a.is-tba{color:var(--dim)}
.ftr-legal{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:2px dashed var(--line);font-size:15px;line-height:1.55;color:var(--muted);max-width:72em}
.ftr-legal p{margin:0}
.ftr-legal b{color:var(--text)}
.ftr-copy{color:var(--dim)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:300;max-width:calc(100% - 32px);padding:12px 18px;border:3px solid #000;background:#0d0818;box-shadow:inset 0 0 0 2px var(--gold-dk),0 5px 0 #000;color:var(--text);font-family:var(--f-hud);font-weight:700;font-size:15px;letter-spacing:.06em;text-align:center;opacity:0;transform:translate(-50%,16px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1079px){
  .nav-desk{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:899px){
  .hero-panel{grid-template-columns:minmax(0,1fr);padding-block:32px 60px}
  .ko-split{grid-template-columns:minmax(0,1fr)}
  .ko-eq{margin-block:-4px}
  .rounds{grid-template-columns:minmax(0,1fr);gap:34px}
  .round:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-29px;margin:0 0 0 -7px;transform:rotate(90deg)}
  .facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .fact{display:grid;grid-template-columns:152px minmax(0,1fr);align-items:center;gap:18px}
  .fcard{grid-template-columns:minmax(0,1fr)}
  .fcard-art{min-height:400px;border-right:0;border-bottom:4px solid #000}
  .fcard-info{padding:22px 18px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .faq-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .risks{position:static}
  .ftr-in{grid-template-columns:minmax(0,1fr)}
  .g-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-guide-bottle{grid-column:1/-1}
}
@media (max-width:599px){
  body{font-size:16px}
  .lead{font-size:18px}
  .cta .btn{width:100%}
  .buy-box .cta{flex-direction:column}
  .ko-word{font-size:80px}
  .ko-led{font-size:68px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat dd{font-size:24px}
  .special{grid-template-columns:minmax(0,1fr)}
  .special-cmd{justify-self:start}
  .fact{grid-template-columns:116px minmax(0,1fr);padding:16px 18px;gap:12px}
  .fact-num{font-size:34px}
  .faq summary{font-size:17px;padding:12px 14px}
  .faq p{padding:0 16px 16px 38px;font-size:16px}
  .faq .example{margin:0 16px 16px 38px}
  .game{margin-inline:calc(-1 * var(--gutter));border-inline:0}
  .g-arena{height:clamp(420px,64vh,540px)}
  .g-controls{padding:10px var(--gutter) 14px}
  .g-guide{gap:10px}
  .g-guide li{padding:12px 14px;font-size:14px}
}
@media (max-width:420px){
  .logo-mark{width:32px;height:32px}
  .logo-word{font-size:22px}
  .logo{gap:8px}
  .btn-sm{padding:0 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .game .g-bear[data-state="windup"] .g-ring{animation-duration:var(--wind,800ms)!important}
  /* keep the hit feedback visible, without movement */
  .game .g-pop{animation:pop-still .8s linear forwards!important}
  .game .g-spark{animation:fade-out .3s linear forwards!important}
  .game .g-flash{animation:flash .3s ease-out forwards!important}
}
@keyframes pop-still{0%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}