/* itsjoeymack: character select
   Arena black, P1 red (JoeyMackAI), P2 cyan (itsjoeymack). Saira italic condensed plates, Geist body, Geist Mono HUD. */

@font-face{font-family:"Saira";src:url("assets/Saira-Italic-Variable.woff2") format("woff2");font-style:italic;font-weight:100 900;font-stretch:50%;font-variation-settings:"wdth" 50; 125%;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#07070a;
  --bg-2:#0d0d12;
  --bg-3:#13131a;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#f3f3f5;
  --muted:#a6a6b2;
  --dim:#868699;
  --p1:#ff354d;
  --p1-deep:#b3142a;
  --p1-fill:#e0193b;
  --p2:#35c8ff;
  --p2-deep:#0e7fb0;
  --gold:#ffd447;
  --discord:#5865f2;
  --display:"Saira","Geist",system-ui,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --snap:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,3.6vw,40px);
  --max:1320px;
  --hud:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hud) + 12px);-webkit-text-size-adjust:100%;scrollbar-color:#2c2c36 var(--bg);scrollbar-width:thin}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--p1);color:#fff}
img,svg,canvas{display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
.defs{position:absolute;width:0;height:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;padding:10px 14px;background:var(--p1);color:#fff;font-weight:600;text-decoration:none}
.skip:focus{left:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}
.dc{width:20px;height:20px;fill:currentColor;flex:none}
em{font-style:inherit;color:var(--p1)}

/* plate type: the select-screen voice */
.plate,.f-plate b,.vs-mark,.vs-title,h1,h2,.press-main,.slots h3,.pv-name,.cutin,.challenger,.continue,.brand,.chip,.f-tag,.pv-tag,.cursor-tag,.plate-tag,.cb-steps li{font-family:var(--display);font-style:italic;font-stretch:66%;font-variation-settings:"wdth" 66;text-transform:uppercase;letter-spacing:.005em}

/* buttons */
.btn{--c:var(--p1);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px 0 24px;border:0;background:var(--c);color:#fff;font:italic 800 19px/1 var(--display);font-stretch:70%;font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter .2s,transform .2s var(--snap)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn .i{transition:transform .25s var(--snap)}
.btn:hover .i{transform:translate(2px,-2px)}
.btn-red{--c:var(--p1)}
.btn-discord{--c:var(--discord)}
.btn-light{--c:#f3f3f5;color:#09090c}
.btn-sm{min-height:38px;padding:0 16px;font-size:15px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}

/* HUD header */
.hud{position:sticky;top:0;z-index:50;height:var(--hud);background:rgba(7,7,10,.82);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.hud-in{max-width:var(--max);margin-inline:auto;height:100%;padding-inline:var(--gut);display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;font-size:27px;font-weight:900;font-stretch:72%;font-variation-settings:"wdth" 72;text-transform:none;letter-spacing:0;text-decoration:none;line-height:1}
.brand .its{color:var(--dim)}
.brand .joey{color:var(--p1)}
.hud-links{display:flex;gap:26px;margin-left:auto}
.hud-links a,.hud-clipbot{font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-decoration:none;transition:color .2s}
.hud-links a:hover,.hud-clipbot:hover{color:var(--text)}
.hud-clipbot{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:.02em}
.hud-clipbot .i{width:13px;height:13px}

/* ---------- VERSUS ---------- */
.vs{position:relative;min-height:calc(100svh - var(--hud));display:flex;flex-direction:column;padding:clamp(14px,2.4vw,28px) var(--gut) clamp(26px,4vw,44px);overflow:hidden;isolation:isolate}
.vs::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(7,7,10,.2),var(--bg) 92%),
  linear-gradient(102deg,#2a0910 0,#14060a 49.8%,#05141c 50.2%,#071f2b 100%)}
.vs::after{content:"";position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
.vs-hud{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:clamp(6px,1.2vw,14px)}
.vs-title{display:flex;align-items:center;gap:16px;font-size:clamp(18px,1.7vw,24px);font-weight:800;color:var(--text);letter-spacing:.06em}
.vs-title::before,.vs-title::after{content:"";width:clamp(40px,8vw,120px);height:2px;background:linear-gradient(90deg,transparent,var(--line-2))}
.vs-title::after{transform:scaleX(-1)}
.vs-timer{display:flex;align-items:baseline;gap:8px}
.vs-timer small{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.vs-count{font:italic 900 34px/1 var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;color:var(--gold);font-variant-numeric:tabular-nums;min-width:2ch}
.vs-count.free{font-size:20px;letter-spacing:.06em}

.vs-stage{position:relative;flex:1;max-width:var(--max);width:100%;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.62fr) minmax(0,1fr);grid-template-areas:"f1 c f2" "h h h" "p p p";column-gap:clamp(12px,2vw,28px);row-gap:clamp(10px,1.4vw,16px);align-items:start;align-content:center}
.f1{grid-area:f1}.f2{grid-area:f2}
.fighter{position:relative;display:grid;gap:12px;min-width:0}
.f-frame{position:relative;aspect-ratio:4/4.4;max-height:calc(100svh - var(--hud) - 390px);min-height:250px;width:100%;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);background:var(--p1)}
.f2 .f-frame{background:var(--p2)}
.f-frame>canvas{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);background:#0b0b10}
.f-tag{position:absolute;z-index:2;top:14px;left:13%;padding:5px 12px 4px 10px;background:var(--p1);color:#fff;font-size:22px;font-weight:900;line-height:1;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.f2 .f-tag{left:auto;right:13%;background:var(--p2);color:#03121b}
.f-plate{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-inline:6%}
.f-plate b{display:block;font-size:clamp(40px,5vw,84px);font-weight:900;font-stretch:58%;font-variation-settings:"wdth" 58;line-height:.82;color:var(--text);overflow-wrap:anywhere}
.f-plate b span{color:var(--p1)}
.f-plate small{padding:5px 14px 4px 12px;font:italic 800 13px/1 var(--display);font-stretch:72%;font-variation-settings:"wdth" 72;letter-spacing:.14em;text-transform:uppercase;background:var(--p1-fill);color:#fff;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.f2 .f-plate{text-align:right;align-items:flex-end}
.f2 .f-plate small{background:var(--p2);color:#03121b}

h1{grid-area:h;display:grid;grid-template-columns:subgrid;font-size:clamp(30px,3vw,50px);font-weight:900;font-stretch:64%;font-variation-settings:"wdth" 64;line-height:.92}
h1 .line{display:block;grid-row:1;padding-inline:6%}
h1 .l2{grid-column:1}
h1 .l1{grid-column:3;text-align:right}
.press-row{grid-area:p;display:flex;justify-content:center;gap:clamp(10px,1.4vw,18px)}
.press{position:relative;flex:0 1 340px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;padding:13px 26px 13px 24px;text-decoration:none;color:#fff;background:var(--p1-fill);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:filter .2s,transform .25s var(--snap)}
.press:hover{filter:brightness(1.1);transform:translateY(-2px)}
.press-cue{grid-column:1/-1;font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);animation:blink 1.1s steps(2,jump-none) infinite}
.press-main{display:flex;align-items:center;gap:10px;font-size:clamp(20px,1.9vw,27px);font-weight:900;font-stretch:66%;font-variation-settings:"wdth" 66;line-height:1}
.press-main .i{width:18px;height:18px}
.press small{font:500 12px/1 var(--mono);color:rgba(255,255,255,.85);letter-spacing:.04em}
.press-2{background:transparent;box-shadow:inset 0 0 0 2px var(--p2);color:var(--text)}
.press-2::before{content:"";position:absolute;inset:0;background:var(--p2);opacity:.08;transition:opacity .2s}
.press-2:hover::before{opacity:.16}
.press-2 .press-cue{color:var(--p2);animation:none}
.press-2 .press-main .i{color:var(--p2)}
.press-2 small{color:var(--p2)}
@keyframes blink{50%{opacity:.25}}

.vs-center{grid-area:c;align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.vs-mark{display:flex;font-size:clamp(96px,12vw,196px);font-weight:900;font-stretch:56%;font-variation-settings:"wdth" 56;line-height:.78;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
.vs-mark i{font-style:inherit;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
.vs-mark i:first-child{color:var(--p1);margin-right:-.02em}
.vs-mark i:last-child{color:var(--p2);transform:translateY(.08em)}
.lead{max-width:30ch;font-size:16px;color:var(--muted)}
.all{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none;padding:10px 2px;border-bottom:1px solid var(--line-2);transition:border-color .2s,color .2s}
.all:hover{border-color:var(--p2);color:var(--p2)}
.all .i{width:13px;height:13px;transform:rotate(90deg)}

/* intro: everything is visible by default; .js plays the slam once */
@media (prefers-reduced-motion:no-preference){
  .js .f1{animation:in-left .7s var(--snap) .05s both}
  .js .f2{animation:in-right .7s var(--snap) .05s both}
  .js .vs-mark{animation:slam .55s var(--snap) .45s both}
  .js .vs::after{animation:flash .5s ease-out .5s both}
  .js .f-plate b{animation:wipe .6s var(--snap) .7s both}
  .js .vs h1 .line,.js .vs-center .lead,.js .vs-center .all,.js .press{animation:rise .6s var(--snap) .85s both}
  .js .vs-hud{animation:rise .5s var(--snap) .2s both}
}
@keyframes in-left{from{transform:translateX(-14vw) skewX(-8deg);opacity:0}}
@keyframes in-right{from{transform:translateX(14vw) skewX(-8deg);opacity:0}}
@keyframes slam{0%{transform:scale(2.2);opacity:0;filter:blur(14px)}60%{opacity:1;filter:blur(0)}100%{transform:none}}
@keyframes flash{0%{opacity:0}18%{opacity:.35}100%{opacity:0}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ---------- MOVE LIST ---------- */
.moves{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);padding-block:clamp(48px,7vw,96px) clamp(24px,4vw,48px)}
.move{position:relative;padding:28px 32px 30px;background:linear-gradient(180deg,rgba(255,53,77,.10),transparent 70%),var(--bg-2);border-top:3px solid var(--p1);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.m2{background:linear-gradient(180deg,rgba(53,200,255,.09),transparent 70%),var(--bg-2);border-top-color:var(--p2)}
.move h2{display:flex;align-items:center;gap:14px;font-size:clamp(34px,3.6vw,52px);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;line-height:.9}
.chip{display:inline-block;padding:5px 10px 4px 8px;font-size:.42em;font-weight:900;line-height:1;background:var(--p1-fill);color:#fff;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transform:translateY(-.1em)}
.m2 .chip{background:var(--p2);color:#03121b}
.move>p{margin-top:12px;color:var(--muted);max-width:46ch}
.cmds{margin-top:22px;display:grid;gap:10px}
.cmds a{display:inline-flex;align-items:center;gap:10px;font:600 16px/1.3 var(--sans);color:var(--text);text-decoration:none;padding-bottom:3px;border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s}
.cmds a:hover{color:var(--p1);border-color:var(--p1)}
.m2 .cmds a:hover{color:var(--p2);border-color:var(--p2)}
.cmds small{display:block;margin-top:6px;font-size:12.5px;color:var(--dim);max-width:52ch}

/* ---------- ROSTER ---------- */
.roster{padding-block:clamp(56px,8vw,112px)}
.roster-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.roster-head h2{font-size:clamp(46px,6.4vw,104px);font-weight:900;font-stretch:56%;font-variation-settings:"wdth" 56;line-height:.84}
.roster-head h2 span{color:var(--dim)}
.roster-head p{max-width:46ch;color:var(--muted)}
.roster-head b{color:var(--text);font-weight:600}
.roster-body{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(14px,2vw,24px);align-items:stretch}

.preview{--c:var(--p1);position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:28px 30px 30px;min-height:100%;background:radial-gradient(90% 70% at 30% 20%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),var(--bg-2);clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);overflow:hidden}
.preview.p2{--c:var(--p2)}
.preview::after{content:"";position:absolute;inset:0;border-top:3px solid var(--c);pointer-events:none}
.pv-tag{position:absolute;top:22px;left:24px;padding:5px 12px 4px 10px;background:var(--c);filter:brightness(.9);color:#fff;font-size:20px;font-weight:900;line-height:1;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.preview.p2 .pv-tag{color:#03121b}
.pv-icon{position:absolute;top:50%;right:-4%;width:58%;height:auto;aspect-ratio:1;transform:translateY(-62%) rotate(-8deg);fill:var(--c);opacity:.2}
.pv-name{font-size:clamp(44px,5vw,80px);font-weight:900;font-stretch:58%;font-variation-settings:"wdth" 58;line-height:.86}
.pv-name em{color:var(--c)}
.pv-what{font-size:17px;color:var(--text)}
.pv-handle{font:500 14px/1 var(--mono);color:var(--c)}
.pv-hint{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slots a{--c:var(--p2);position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;aspect-ratio:1/1.08;padding:16px 16px 14px 18px;background:var(--bg-2);text-decoration:none;color:var(--text);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background .2s}
.slots .ai a{--c:var(--p1)}
.slots a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,transparent),transparent 65%);opacity:.5;transition:opacity .25s}
.slots a:hover,.slots a:focus-visible{background:var(--bg-3)}
.slots a:hover::before,.slots a:focus-visible::before{opacity:1}
.slots a:focus-visible{outline:none}
.s-icon{position:absolute;top:16px;left:18px;width:34px;height:34px;fill:var(--c);transition:transform .3s var(--snap)}
.slots a:hover .s-icon,.slots a:focus-visible .s-icon{transform:scale(1.12) rotate(-4deg)}
.slots h3{position:relative;font-size:24px;font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;line-height:.95}
.slots h3 em{color:var(--c)}
.slots .what{position:relative;font-size:13px;line-height:1.35;color:var(--muted)}
.slots .handle{position:relative;font:500 11.5px/1 var(--mono);color:var(--dim)}
.cursor{--c:var(--p1);position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;opacity:0;transition:transform .2s var(--snap),opacity .2s}
.cursor.on{opacity:1}
.cursor.p2{--c:var(--p2)}
.cursor::before{content:"";position:absolute;inset:-5px;background:
  linear-gradient(var(--c),var(--c)) top left/22px 3px,linear-gradient(var(--c),var(--c)) top left/3px 22px,
  linear-gradient(var(--c),var(--c)) top right/22px 3px,linear-gradient(var(--c),var(--c)) top right/3px 22px,
  linear-gradient(var(--c),var(--c)) bottom left/22px 3px,linear-gradient(var(--c),var(--c)) bottom left/3px 22px,
  linear-gradient(var(--c),var(--c)) bottom right/22px 3px,linear-gradient(var(--c),var(--c)) bottom right/3px 22px;background-repeat:no-repeat;animation:cursor-pulse 1s ease-in-out infinite;transform-origin:center}
.cursor-tag{position:absolute;top:-14px;right:-10px;padding:4px 9px 3px 7px;background:var(--c);filter:brightness(.9);color:#fff;font-size:15px;font-weight:900;line-height:1;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.cursor.p2 .cursor-tag{color:#03121b}
@keyframes cursor-pulse{50%{transform:scale(1.035)}}

/* ---------- SUPER: CLIPBOT ---------- */
.super{position:relative;padding-block:0 clamp(64px,9vw,128px);background:radial-gradient(60% 50% at 70% 60%,rgba(255,53,77,.14),transparent 70%),linear-gradient(180deg,var(--bg),#0b0609 60%,var(--bg));overflow:hidden}
.cutin{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,28px);margin:0 0 clamp(36px,5vw,64px);padding:clamp(14px,2vw,22px) var(--gut);background:var(--p1);color:#fff;transform:skewY(-3deg);transform-origin:left}
.cutin span{font-size:clamp(20px,2.4vw,34px);font-weight:800;font-stretch:70%;font-variation-settings:"wdth" 70;letter-spacing:.2em;color:rgba(255,255,255,.75)}
.cutin b{font-size:clamp(64px,10vw,168px);font-weight:900;font-stretch:54%;font-variation-settings:"wdth" 54;line-height:.8;letter-spacing:-.01em}
.cutin-sub{position:relative;z-index:1;align-self:flex-end;margin-bottom:.4em;padding:6px 14px 5px 12px;background:#fff;color:#0b0b0f;font:italic 800 clamp(14px,1.3vw,18px)/1 var(--display);font-stretch:72%;font-variation-settings:"wdth" 72;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.cutin::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-60deg,transparent 0 18px,rgba(255,255,255,.08) 18px 20px);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .js .cutin{clip-path:inset(0 100% 0 0)}
  .js .super.in .cutin{animation:slash .7s var(--snap) both}
  .js .super.in .cutin b{animation:cut-text .9s var(--snap) .15s both}
}
@keyframes slash{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes cut-text{from{transform:translateX(-18%);letter-spacing:.2em;opacity:0}}
.super-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.super-copy{padding-top:clamp(8px,2vw,28px)}
.plate-tag{display:inline-block;padding:6px 14px 5px 12px;font-size:15px;font-weight:800;font-stretch:72%;font-variation-settings:"wdth" 72;letter-spacing:.08em;line-height:1;color:var(--text);background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.super-copy h2{font-size:clamp(46px,5.6vw,92px);font-weight:900;font-stretch:56%;font-variation-settings:"wdth" 56;line-height:.86}
.super-copy>p{margin-top:22px;max-width:46ch;color:var(--muted);font-size:18px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.cb-note{font:500 14px/1.3 var(--sans);color:var(--muted)}

.combo{display:grid;gap:16px}
.cb-app{position:relative;background:#0e0e14;border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,53,77,.08);overflow:hidden}
.app-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font:600 13px/1 var(--sans)}
.app-dot{width:10px;height:10px;border-radius:50%;background:var(--p1)}
.app-rec{display:inline-flex;align-items:center;gap:7px;margin-left:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.app-rec i{width:7px;height:7px;border-radius:50%;background:var(--dim);transition:background .3s}
.cb-app[data-hit="1"] .app-rec,.cb-app[data-hit="2"] .app-rec,.cb-app[data-hit="3"] .app-rec{color:var(--p1)}
.cb-app[data-hit="1"] .app-rec i,.cb-app[data-hit="2"] .app-rec i,.cb-app[data-hit="3"] .app-rec i{background:var(--p1);animation:blink 1s steps(2,jump-none) infinite}
.combo-count{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;font:italic 800 14px/1 var(--display);font-stretch:66%;font-variation-settings:"wdth" 66;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.combo-count b{font-size:30px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums}
.cb-app[data-hit="3"] .combo-count{color:var(--gold)}
.cb-app[data-hit="3"] .combo-count b{color:var(--gold)}
.combo-count.pop{animation:pop .4s var(--snap)}
@keyframes pop{0%{transform:scale(1.5) rotate(-6deg)}100%{transform:none}}
.app-view{padding:16px}
.app-frame{position:relative;aspect-ratio:16/8;background:url("assets/studio-768.webp") center 60%/cover;overflow:hidden}
.app-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6))}
.app-live{position:absolute;z-index:1;top:10px;left:10px;padding:4px 8px;background:rgba(0,0,0,.6);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.app-cap{position:absolute;z-index:1;left:50%;bottom:14px;padding:7px 14px;background:#fff;color:#0b0b0f;font:italic 900 18px/1 var(--display);font-stretch:66%;font-variation-settings:"wdth" 66;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,10px);opacity:0;transition:opacity .3s,transform .4s var(--snap)}
.cb-app[data-hit="2"] .app-cap,.cb-app[data-hit="3"] .app-cap{opacity:1;transform:translate(-50%,0)}
.app-track{position:relative;height:56px;margin-top:12px;background:var(--bg);overflow:hidden}
.wave{position:absolute;inset:8px 0;display:flex;align-items:center;gap:2px}
.wave i{flex:1;height:100%;background:#33333f;border-radius:1px;transform-origin:center;transform:scaleY(0);transition:transform .4s var(--snap),background .3s}
.cb-app:not([data-hit="0"]) .wave i{transform:scaleY(var(--h))}
.cb-app[data-hit="2"] .wave i.in,.cb-app[data-hit="3"] .wave i.in{background:var(--p1)}
.sel{position:absolute;top:0;bottom:0;left:52%;width:24%;border:2px solid var(--p1);border-block-width:3px;background:rgba(255,53,77,.12);opacity:0;transform:scaleX(.4);transition:opacity .3s,transform .45s var(--snap)}
.cb-app[data-hit="2"] .sel,.cb-app[data-hit="3"] .sel{opacity:1;transform:none}
.head{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 8px #fff;opacity:0}
.cb-app[data-hit="1"] .head{opacity:1;animation:scan 1s linear both}
@keyframes scan{from{left:0}to{left:100%}}
.app-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.app-trim{font:500 12px/1 var(--mono);color:var(--dim);letter-spacing:.06em}
.app-approve{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font:600 13px/1 var(--sans);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .3s,color .3s,box-shadow .3s}
.app-approve .i{width:15px;height:15px;stroke-width:2.6}
.cb-app[data-hit="3"] .app-approve{background:var(--p1);color:#fff;box-shadow:none}
.app-note{padding:0 16px 12px;font:500 11px/1 var(--mono);color:var(--dim)}
.cb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cb-steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;background:var(--bg-2);font-size:28px;font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;line-height:.9;color:var(--dim);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:color .3s,background .3s}
.cb-steps span{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.cb-steps small{font:400 13.5px/1.4 var(--sans);font-style:normal;text-transform:none;letter-spacing:0;color:var(--dim);transition:color .3s}
.cb-steps li.hit{color:var(--text);background:linear-gradient(180deg,rgba(255,53,77,.18),transparent),var(--bg-2)}
.cb-steps li.hit span{color:var(--p1)}
.cb-steps li.hit small{color:var(--muted)}
.no-js-combo .cb-steps li{color:var(--text)}

/* ---------- STAGE: ASHENFALL ----------
   A P1 project: red frame, same slant as the fighter frames. The Present (cold) is cut away on a slanted seam over the Past. */
.stage{position:relative;padding-block:clamp(64px,9vw,128px);background:radial-gradient(55% 60% at 24% 52%,rgba(255,53,77,.12),transparent 70%),linear-gradient(180deg,var(--bg),#0a0709 55%,var(--bg));overflow:hidden}
.stage-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,80px);align-items:center}
.st-view{min-width:0}
.st-frame{--s:54;position:relative;aspect-ratio:16/10;background:var(--p1);clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:background .2s}
.st-frame:focus-visible{outline:none;background:var(--p2)}
.st-stage{position:absolute;inset:2px;overflow:hidden;background:#0b0b10;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}
.st-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;pointer-events:none}
.st-now{position:absolute;inset:0;clip-path:polygon(0 0,calc(var(--s) * 1% + 4.5%) 0,calc(var(--s) * 1% - 4.5%) 100%,0 100%);pointer-events:none}
.st-seam{position:absolute;inset:0;background:#fff;clip-path:polygon(calc(var(--s) * 1% + 4.2%) 0,calc(var(--s) * 1% + 4.8%) 0,calc(var(--s) * 1% - 4.2%) 100%,calc(var(--s) * 1% - 4.8%) 100%);pointer-events:none}
.st-era{position:absolute;z-index:2;right:12%;bottom:14px;display:flex;align-items:baseline;gap:8px;margin:0;padding:6px 14px 5px 12px;background:rgba(7,7,10,.84);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.st-era small{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.st-n{font:italic 900 26px/1 var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;color:var(--gold);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.st-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:14px;padding-inline:6%;font:500 12px/1.5 var(--mono);color:var(--dim)}
.st-hint{color:var(--muted);letter-spacing:.04em}
.stage-copy h2{font-size:clamp(46px,5.6vw,92px);font-weight:900;font-stretch:56%;font-variation-settings:"wdth" 56;line-height:.86}
.stage-copy>p:not(.status){margin-top:22px;max-width:46ch;color:var(--muted);font-size:18px}
.stage-copy .status{margin:20px 0 0 !important}
.stage-copy .actions{margin-top:28px}
@media (prefers-reduced-motion:no-preference){
  .js .st-frame{opacity:0}
  .js .stage.in .st-frame{animation:st-in .8s var(--snap) both}
}
@keyframes st-in{from{opacity:0;transform:translateX(-10vw) skewX(-8deg)}to{opacity:1;transform:none}}

/* ---------- ARENA: community ---------- */
.arena{padding-block:clamp(40px,6vw,80px) clamp(64px,9vw,120px)}
.challenger{position:relative;margin:0 calc(var(--gut) * -1) clamp(32px,5vw,56px);padding:14px 0;background:repeating-linear-gradient(-45deg,var(--p1) 0 14px,#d81f38 14px 28px);overflow:hidden;text-align:center}
.challenger span{display:inline-block;padding:6px 22px;background:#fff;color:#0b0b0f;font-size:clamp(22px,3.4vw,48px);font-weight:900;font-stretch:58%;font-variation-settings:"wdth" 58;line-height:1;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
@media (prefers-reduced-motion:no-preference){
  .js .challenger{transform:scaleX(0)}
  .js .arena.in .challenger{animation:band .5s var(--snap) both}
  .js .arena.in .challenger span{animation:shout .7s var(--snap) .25s both}
}
@keyframes band{from{transform:scaleX(0)}to{transform:none}}
@keyframes shout{0%{transform:scale(1.8);opacity:0}60%{opacity:1}100%{transform:none}}
.arena-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(12px,2vw,24px)}
.panel{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.4vw,44px);padding-top:clamp(40px,4vw,56px);background:var(--bg-2);border:1px solid var(--line)}
.panel .plate-tag{position:absolute;top:-1px;right:clamp(20px,3vw,40px);transform:translateY(-50%)}
.panel-discord{background:radial-gradient(80% 90% at 0% 0%,rgba(88,101,242,.22),transparent 70%),var(--bg-2)}
.panel-discord .plate-tag{background:var(--discord);box-shadow:none;color:#fff}
.panel h2{font-size:clamp(44px,5vw,80px);font-weight:900;font-stretch:56%;font-variation-settings:"wdth" 56;line-height:.86}
.panel>p{margin-top:14px;color:var(--muted);max-width:44ch}
.join{margin-top:28px}
.join-note{margin-top:12px;font:500 14px/1.5 var(--sans);color:var(--dim)}
.status{display:flex;align-items:center;gap:10px;margin:18px 0 26px !important;font:500 15px/1.45 var(--sans);color:var(--gold) !important}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1.4s steps(2,jump-none) infinite}

/* ---------- CONTINUE ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,88px) 32px;background:linear-gradient(180deg,var(--bg),#050507)}
.continue{display:flex;justify-content:center;align-items:baseline;gap:clamp(14px,2vw,28px);margin-bottom:clamp(40px,6vw,72px);font-weight:900;font-stretch:56%;font-variation-settings:"wdth" 56;line-height:.8}
.continue span{font-size:clamp(48px,8vw,128px);color:var(--text)}
.continue b{font-size:clamp(72px,12vw,196px);color:var(--p1);font-variant-numeric:tabular-nums;min-width:1ch}
.continue b.done{font-size:clamp(30px,4vw,60px);color:var(--gold);letter-spacing:.02em}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:500 13px/1.4 var(--mono);color:var(--dim)}
.foot-row p{font:400 15px/1.4 var(--sans);color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media (min-width:901px){
  .super-copy{position:sticky;top:calc(var(--hud) + 48px)}
}
@media (max-width:1100px){
  .hud-clipbot{display:none}
  .slots h3{font-size:21px}
  .slots .what{display:none}
}
@media (max-width:900px){
  .hud-links{display:none}
  .hud .btn-sm{margin-left:auto}
  .vs-stage{grid-template-columns:1fr 1fr;grid-template-areas:"f1 f2" "h h" "p p" "c c";column-gap:12px}
  .vs-center{padding-top:10px}
  .f-frame{min-height:0;max-height:none}
  .vs-mark{position:absolute;z-index:3;top:calc((100vw - 2 * var(--gut) - 12px) * .275);left:50%;translate:-50% -50%;font-size:clamp(70px,16vw,120px);pointer-events:none}
  h1 .l1{grid-column:2}
  .f-plate b{font-size:clamp(28px,7vw,52px)}
  .press{flex:1 1 0;grid-template-columns:1fr;padding:12px 16px}
  .press-main{font-size:clamp(17px,4vw,22px)}
  .press small{font-size:11px}
  .moves,.roster-head,.super-grid,.arena-grid,.stage-grid{grid-template-columns:1fr}
  .roster-body{grid-template-columns:1fr}
  .preview{display:none}
  .slots{grid-template-columns:repeat(2,1fr)}
  .slots a{aspect-ratio:auto;min-height:150px}
  .slots .what{display:block}
  .cutin{flex-wrap:wrap}
}
@media (max-width:560px){
  body{font-size:16px}
  .vs{min-height:auto}
  .vs-stage{column-gap:8px}
  .vs-mark{top:calc((100vw - 2 * var(--gut) - 8px) * .275)}
  .f-tag{font-size:16px;top:10px}
  .f1 .f-tag{background:var(--p1-fill)}
  .f-plate small{font-size:10px;letter-spacing:.1em}
  h1{font-size:clamp(24px,7vw,34px)}
  .press{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);padding:11px 12px}
  .press-cue{font-size:9px;letter-spacing:.14em}
  .move{padding:24px 22px}
  .cb-steps{grid-template-columns:1fr}
  .st-n{font-size:22px}
  .st-era{right:10%}
  .st-cap{padding-inline:4%}
  .cb-steps li{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .continue{flex-direction:column;align-items:center}
  .foot-row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}