/* INVOLVED website v2 · design system (B7)
   CONTRACT NOTE: base rules describe the STATIC layout (no WebGL, ?nogl, 3D off, JS off). The pinned / sticky set-piece
   layout exists only under html.js3d, so "neither class" (JS disabled) reads exactly like html.no-3d.
   CONTRACT NOTE: .hud-tag and .dmg are centred on their projected point with the CSS `translate` property
   (tags sit above the point, floaters centred), which composes with the translate3d() written by hud.placeAt().
   .hud-ring is centred with negative margins. Scenes only need placeAt(el, x, y, on).
   CONTRACT NOTE: [data-hud] elements whose text is empty collapse or keep one line (alerts), so scenes may clear text to hide.
   CONTRACT NOTE: main (z-index 1) sits above the fixed #gl canvas (z-index 0); pieces and stages are transparent,
   DOM sections are opaque --void so bloom never reaches their text. */

:root {
  color-scheme: dark;
  --void:#0B0D1C; --void-2:#11142A; --void-3:#181C36;
  --ink:#F4EDE6; --ink-2:#C9C2CF; --ink-3:#8E8AA3;
  --rust:#A8432F; --rust-deep:#6E2626; --peach:#F2C9A8; --orange:#F2801F;
  --hull-blue:#2E59BF; --hull-white:#EDEDF2;
  --shield:#59BFFF; --laser:#FF4033; --heavy:#FF8C26; --rail:#59D9FF; --gold:#E8B54A;
  --core:#4DFFB3; --safe:#66FF66; --jam:#B366FF; --flare:#FFCC4D;
  --line:rgba(242,201,168,.16); --line-strong:rgba(242,201,168,.34);
  --scrim:rgba(11,13,28,.74); --scrim-strong:rgba(11,13,28,.86);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gutter:clamp(16px,4vw,64px); --maxw:1440px; --col-gap:clamp(12px,2vw,28px);
  --nav-h:64px; --ease:cubic-bezier(.2,.7,.2,1);
  --sec-pad:clamp(72px,12vw,180px);
  --rail-room:0px;
}
@media (max-width:768px){ :root{ --nav-h:56px; } }
@media (min-width:1024px){ :root{ --rail-room:40px; } }

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--void);color:var(--ink);overflow-x:clip}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;padding:0;font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-width:320px}
@media (max-width:480px){ body{font-size:16px} }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
video{display:block;max-width:100%}
svg{max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
code,kbd{font-family:var(--mono);font-size:.88em}
kbd{padding:1px 6px;border:1px solid var(--line-strong);border-radius:2px;background:rgba(242,201,168,.06);white-space:nowrap}
code{padding:1px 5px;background:rgba(242,201,168,.08)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:var(--void)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
h2{font-weight:900;font-size:clamp(40px,8vw,128px);line-height:.88;letter-spacing:-.005em}
h3{font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.05;letter-spacing:.01em}
p{max-width:62ch}
.mega{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(64px,17vw,300px);line-height:.82;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere;max-width:none}
.mega--long{font-size:clamp(48px,12vw,220px);line-height:.84}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:58ch}
.folio,.eyebrow{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);max-width:none}
.eyebrow{color:var(--orange);margin-bottom:14px}
.caption{font-size:13px;line-height:1.45;color:var(--ink-3)}
.data-line{font:500 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--peach);max-width:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:1024px){ .wrap{padding-right:max(var(--gutter),calc(16px + var(--rail-room) + 16px))} }
.sec{position:relative;background:var(--void);padding-block:var(--sec-pad)}
.ruled > * + *{border-top:1px solid var(--line)}
main,.foot{position:relative;z-index:1}

/* ---------- buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:2px;border:1px solid transparent;background:transparent;color:var(--ink);font:600 15px/1.15 var(--body);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.btn--primary{background:var(--orange);color:var(--void)}
.btn--primary:hover{background:#F48F37}
.btn--ghost{border-color:var(--line-strong);background:rgba(11,13,28,.55)}
.btn--ghost:hover{border-color:var(--peach)}
.btn--sm{min-height:40px;padding:0 14px;font-size:13px}
.btn[aria-pressed="true"]{border-color:var(--core);color:var(--core)}
@media (pointer:coarse){ .btn--sm{min-height:48px} }
.pill{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.pill::after{content:"";position:absolute;inset:-8px -2px}
.pill--gold{border:1px solid var(--gold);color:var(--gold)}
.pill--gold:hover{background:rgba(232,181,74,.14)}
.pill--gold[aria-current="page"]{background:var(--gold);color:var(--void)}
.pill--lg{min-height:48px;padding:0 20px;font-size:13px}
.chip{display:inline-block;padding:4px 9px 4px 10px;border-left:3px solid var(--c,var(--ink-3));background:rgba(242,201,168,.05);font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
.chip--weapon{--c:var(--laser)} .chip--defense{--c:var(--shield)} .chip--utility{--c:var(--core)}
.panel{background:var(--scrim);border:1px solid var(--line)}
.panel--hud{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- chrome: skip, canvas, overlays ---------- */
.skip-top{position:fixed;left:16px;top:10px;z-index:100;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;background:var(--orange);color:var(--void);font:600 14px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;transform:translateY(-160%);transition:transform .15s}
.skip-top:focus,.skip-top:focus-visible{transform:none}
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block;pointer-events:none}
html:not(.js3d) #gl{display:none}
#live{position:absolute}
#warp{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;overflow:hidden}
#warp::before{content:"";position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 2.6deg,rgba(242,201,168,.55) 2.6deg 3deg,transparent 3deg 6.4deg,rgba(89,217,255,.5) 6.4deg 6.7deg,transparent 6.7deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 0 6%,#000 22%,#000 55%,transparent 70%);mask:radial-gradient(circle,transparent 0 6%,#000 22%,#000 55%,transparent 70%);
  transform:scale(.6)}
#warp::after{content:"";position:absolute;inset:0;background:var(--void);opacity:0}
#warp.is-on{animation:warp-o .52s linear both}
#warp.is-on::before{animation:warp-s .52s cubic-bezier(.55,0,.85,.35) both}
#warp.is-on::after{animation:warp-v .52s linear both}
#warp.is-fade{animation:warp-f .25s linear both}
#warp.is-fade::before{display:none}
#warp.is-fade::after{opacity:1}
@keyframes warp-o{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes warp-s{0%{transform:scale(.6);filter:blur(0)}100%{transform:scale(2.2);filter:blur(4px)}}
@keyframes warp-v{0%,22%{opacity:0}45%{opacity:1}62%{opacity:1}100%{opacity:0}}
@keyframes warp-f{0%{opacity:0}45%{opacity:1}100%{opacity:0}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s}
.nav.is-scrolled{background:rgba(11,13,28,.88);border-bottom-color:var(--line)}
.nav-in{height:100%;padding:0 var(--gutter);display:flex;align-items:center;gap:14px}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;flex:none}
.wordmark b{font:800 22px/1 var(--display);letter-spacing:.07em}
.wm-cells{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;width:22px;height:22px;flex:none}
.wm-cells i{display:block;background:var(--orange);opacity:.22;transition:opacity .2s}
.wm-cells i:nth-child(even){background:var(--peach)}
.wm-cells i:nth-child(5){background:var(--hull-blue)}
.wm-cells i.is-lit,html:not(.js3d) .wm-cells i{opacity:1}
.nav-links{display:none;align-items:center;gap:clamp(14px,1.6vw,26px);margin-left:clamp(8px,1.5vw,24px)}
.nav-links a{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;color:var(--ink-2);padding:14px 0}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;background:rgba(11,13,28,.5)}
.seg button{min-width:40px;min-height:36px;padding:0 10px;border:0;background:transparent;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--void)}
.tgl3d{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(11,13,28,.5);font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--ink-2);cursor:pointer}
.tgl-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.tgl3d[aria-pressed="true"]{color:var(--ink)}
.tgl3d[aria-pressed="true"] .tgl-dot{background:var(--rail);box-shadow:0 0 8px var(--rail)}
.nav-chap{gap:10px}
.chap-ico{display:inline-flex;flex-direction:column;gap:3px;width:14px}
.chap-ico i{display:block;height:2px;background:currentColor}
.chap-ico i:nth-child(2){width:70%}
.steam-sm{display:none}
@media (min-width:1024px){ .nav-links{display:flex} .nav-chap{display:none} }
@media (max-width:1180px) and (min-width:1024px){ .nav-links a:nth-child(n+4){display:none} }
@media (max-width:768px){
  .nav-opt{display:none}
  .nav--rm .nav-opt.seg{display:inline-flex}
  .nav-in{gap:8px}
  .wordmark b{font-size:19px}
  .nav-chap{width:44px;padding:0}
  .chap-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav-steam{padding:0 12px}
  .steam-lg{display:none}
  .steam-sm{display:inline}
}
@media (max-width:400px){ .wordmark{gap:7px} .wordmark b{font-size:17px} .pill{padding:0 9px;font-size:11px} }
@media (max-width:359px){ .nav-in .pill-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} }

/* ---------- rail ---------- */
.rail{display:none}
@media (min-width:1024px){
  .rail{display:block;position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40}
}
.rail ol{display:flex;flex-direction:column;gap:2px}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:28px;color:var(--ink-3);text-decoration:none;transition:color .2s}
.rail a:hover{color:var(--ink)}
.rail .flag{font:14px/1 var(--mono)}
.rail a.is-active{color:var(--orange)}
.rail .lbl{position:absolute;right:34px;top:50%;transform:translateY(-50%);padding:5px 9px;background:var(--scrim-strong);border:1px solid var(--line);font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .15s}
.rail a:hover .lbl,.rail a:focus-visible .lbl{opacity:1}

/* ---------- chapter sheet ---------- */
.sheet{position:fixed;inset:0 0 0 auto;margin:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100%;max-height:100%;padding:0;border:0;border-left:1px solid var(--line);background:var(--void-2);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(11,13,28,.72)}
.sheet-in{min-height:100%;padding:16px var(--gutter) 28px;display:flex;flex-direction:column;gap:22px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.sheet-h{font-size:clamp(28px,5vw,40px)}
.sheet-list a{display:flex;align-items:center;gap:14px;min-height:52px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font:800 clamp(24px,4vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.sheet-list li:last-child a{border-bottom:1px solid var(--line)}
.sheet-list .flag{font:14px/1 var(--mono);color:var(--ink-3)}
.sheet-list a:hover .flag,.sheet-list a.is-active .flag{color:var(--orange)}
.sheet-list .sheet-rm{color:var(--gold)}
.sheet-list .sheet-rm .flag{color:var(--gold)}
.sheet-settings{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sheet-hint{font:500 12px/1.5 var(--mono);color:var(--ink-3);letter-spacing:.04em}

/* ---------- pieces & stages (static base) ---------- */
.piece{position:relative;background:var(--void);padding-block:clamp(56px,8vw,120px)}
.stage{position:relative}
.stage-poster{position:relative;margin:0 auto 28px;max-width:calc(var(--maxw) - 2 * var(--gutter));width:calc(100% - 2 * var(--gutter));aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--void-2)}
.stage-poster img{width:100%;height:100%;object-fit:cover}
.stage-shade,.stage-flash{display:none}
.stage-ui{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:flex;flex-direction:column;gap:22px}
.stage-chip{display:none}
.hud-tag,.hud-ring,.dmg{display:none}
html:not(.js3d) [data-needs-3d],html:not(.js3d) .stage-chip,html:not(.js3d) .stage-flash{display:none!important}
.skip{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus,.skip:focus-visible{position:fixed;left:auto;top:auto;right:16px;bottom:16px;z-index:60;width:auto;height:auto;overflow:visible;clip-path:none;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--line-strong);background:var(--scrim-strong);color:var(--ink);font:600 14px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;text-decoration:none}

/* beats: always readable in flow until the director runs */
.beats{display:flex;flex-direction:column;gap:14px}
html.is-live .beats{display:grid;align-items:end;gap:0}
html.is-live .beats > .beat{grid-area:1/1}
html.is-live .beat{opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s}
html.is-live .beat.is-on{opacity:1;visibility:visible;transition:opacity .25s var(--ease)}
html.is-reduced .beat,html.is-reduced .beat.is-on{transition:none!important}
.beat-sub{margin-top:8px;font-size:.88em;color:var(--ink-2)}

/* HUD */
.hud{font-family:var(--mono);color:var(--ink)}
.hud .kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.hud .k,.k{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.hud b{font:700 clamp(20px,2.4vw,32px)/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.panel--hud{padding:14px 16px 12px;width:clamp(240px,24vw,340px);max-width:100%}
.hud-line{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-2);min-height:1.4em;margin-top:6px;max-width:none}
.hud-big{font:700 clamp(18px,2vw,26px)/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--core);max-width:none}
.hud-dmg{color:var(--heavy);font-weight:700}
.hud-drain{color:var(--rail)}
.hud-hint{color:var(--flare)}
[data-hud="alert"].is-warn{color:var(--laser);font-weight:700;animation:blink 1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.35}}
html.is-reduced [data-hud="alert"].is-warn{animation:none}
html:not(.js3d) .hud-line:empty,html:not(.js3d) .hud-big:empty{display:none}
.bar{position:relative;height:4px;margin-top:10px;background:var(--line);overflow:hidden}
.bar-fill{height:100%;width:calc(var(--k,0) * 100%);background:var(--c,var(--ink));max-width:100%}
.bar--shield{--c:var(--shield)} .bar--rail{--c:var(--rail)}
.load-line{display:block;margin-top:14px;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--rail)}
.load-line:empty{display:none}

/* ---------- pieces under html.js3d (pinned) ---------- */
html.js3d .piece{background:transparent;padding-block:0}
html.js3d .piece[data-pin="stage"]{height:var(--len)}
@media (max-width:768px){ html.js3d .piece[data-pin="stage"]{height:var(--len-m,var(--len))} }
html.js3d .piece .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;touch-action:pan-y;background:transparent}
html.js3d .stage:focus-visible{outline-offset:-4px}
html.js3d .stage-poster{position:absolute;inset:0;z-index:0;width:auto;max-width:none;margin:0;border:0;aspect-ratio:auto;transition:opacity .6s var(--ease)}
html.js3d .piece.is-live .stage-poster{opacity:0}
html.js3d .piece.is-failed .stage-poster,html.js3d.gl-lost .stage-poster,html.gl-lost .stage-poster{opacity:1}
html.js3d .stage-shade{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--void) 0,rgba(11,13,28,0) 12vh,rgba(11,13,28,0) calc(100% - 12vh),var(--void) 100%),
    radial-gradient(ellipse 75% 70% at 50% 50%,rgba(11,13,28,0) 55%,rgba(11,13,28,.35) 100%)}
html.js3d .stage-flash{display:block;position:absolute;inset:0;z-index:2;background:var(--flash-color,#fff);opacity:0;pointer-events:none;mix-blend-mode:screen}
html.js3d .stage-ui{position:absolute;inset:0;z-index:3;max-width:none;margin:0;padding:calc(var(--nav-h) + 16px) calc(var(--gutter) + var(--rail-room)) 24px var(--gutter);pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
html.js3d .stage-ui a,html.js3d .stage-ui button,html.js3d .stage-ui input,html.js3d .stage-ui select,html.js3d .stage-ui .callout{pointer-events:auto}
html.js3d .stage-chip{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);padding:8px 12px;background:var(--scrim-strong);border:1px solid var(--line);font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);white-space:nowrap}
html.js3d .piece:not(.is-live):not(.is-failed) .stage-chip{display:inline-flex;align-items:center;gap:10px}
.stage-chip::before{content:"";width:7px;height:7px;background:var(--rail);animation:chip 1.2s ease-in-out infinite}
@keyframes chip{50%{opacity:.25}}
html.is-reduced .stage-chip::before{animation:none}
html.js3d.gl-lost .stage-chip{display:none!important}

/* projected elements */
html.js3d .hud-tag{display:block;position:absolute;left:0;top:0;z-index:4;translate:-50% calc(-100% - 8px);padding:4px 8px;background:var(--scrim);border-left:1px solid var(--c,var(--orange));font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;color:var(--ink);pointer-events:none;will-change:transform;transition:opacity .2s}
html.js3d .hud-tag.is-hidden,html.js3d .hud-tag:empty,html.js3d .piece:not(.is-live) .hud-tag{opacity:0}
html.js3d .hud-tag--icon{translate:-50% -50%;width:0;height:0;padding:0;background:none;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--orange);filter:drop-shadow(0 0 4px rgba(242,128,31,.8))}
html.js3d .hud-tag--icon.is-hidden{opacity:0}
html.js3d .hud-tag--owner{--c:var(--core)}
html.js3d .hud-ring{display:block;position:absolute;left:0;top:0;z-index:4;width:72px;height:72px;margin:-36px 0 0 -36px;overflow:visible;pointer-events:none;will-change:transform;transition:opacity .2s}
html.js3d .hud-ring.is-hidden,html.js3d .piece:not(.is-live) .hud-ring{opacity:0}
.hud-ring circle{fill:none;stroke-width:6}
.hud-ring .track{stroke:var(--line-strong)}
.hud-ring .bar{stroke:var(--core);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--k,0) * 100);transform:rotate(-90deg);transform-origin:50% 50%;height:auto;margin:0;background:none}
html.js3d .dmg{display:block;position:absolute;left:0;top:0;z-index:4;translate:-50% -50%;font:700 20px/1 var(--mono);color:var(--laser);text-shadow:0 0 2px var(--void),0 1px 6px rgba(11,13,28,.9);white-space:nowrap;pointer-events:none;will-change:transform}
html.js3d .dmg:empty,html.js3d .dmg.is-hidden{opacity:0}

/* shared stage copy styles */
html.js3d .stage-ui .mega{text-shadow:0 2px 30px rgba(11,13,28,.45)}
html.js3d .stage-ui .folio{color:var(--ink-2);text-shadow:0 1px 8px rgba(11,13,28,.9)}
html.js3d .stage-ui .caption{color:var(--ink-2);background:var(--scrim);padding:8px 10px;max-width:44ch}
html.js3d .beats > .beat{background:var(--scrim-strong);padding:16px 18px;font-size:clamp(16px,1.25vw,19px);line-height:1.5}

/* ---------- 1 · hero ---------- */
.piece--hero{padding-top:calc(var(--nav-h) + 24px)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.hero-h{display:flex;flex-direction:column;font-weight:900;font-size:clamp(44px,9vw,150px);line-height:.86;letter-spacing:-.005em;margin:16px 0 20px;text-transform:uppercase}
.h1-kicker{font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1;letter-spacing:.08em;color:var(--orange);margin-bottom:.3em}
.h1-l2{color:var(--laser)}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid var(--line-strong);background:var(--scrim);font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;max-width:none}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--laser);box-shadow:0 0 8px var(--laser)}
.hero-copy .meta{margin-top:14px;font:500 12px/1.55 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.hero-side{display:flex;flex-direction:column;gap:16px}
.hud--hero{display:flex;flex-wrap:wrap;gap:12px 28px}
.hud--hero .kv{flex-direction:column;align-items:flex-start;gap:6px}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.hero-foot .caption{flex:1 1 280px}
.cue{font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);max-width:none}
html.js3d .piece--hero{padding-top:0}
@media (min-width:769px){
  html.js3d .piece--hero .stage-ui{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto;column-gap:var(--col-gap);row-gap:14px}
  html.js3d .piece--hero .hero-top{grid-column:1/-1;grid-row:1}
  html.js3d .piece--hero .hero-copy{grid-column:1/span 6;grid-row:2/span 2;align-self:center}
  html.js3d .piece--hero .hero-side{grid-column:8/-1;grid-row:3;justify-self:end;align-self:end;align-items:flex-end;max-width:min(440px,38vw)}
  html.js3d .piece--hero .hero-foot{flex-direction:column;align-items:flex-end;text-align:right}
  html.js3d .piece--hero .hero-foot .caption{flex:none}
  html.js3d .piece--hero .hud--hero{padding:12px 16px;background:var(--scrim);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
  html.js3d .piece--hero .cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%)}
  html.js3d .piece--hero .hero-h{font-size:clamp(44px,min(9vw,12.5vh),150px)}
  html.js3d .piece--hero .stage-shade{background:
    linear-gradient(90deg,var(--scrim-strong) 0,var(--scrim-strong) 38%,rgba(11,13,28,0) 70%),
    linear-gradient(to bottom,var(--void) 0,rgba(11,13,28,0) 12vh,rgba(11,13,28,0) calc(100% - 12vh),var(--void) 100%),
    radial-gradient(ellipse 75% 70% at 50% 50%,rgba(11,13,28,0) 55%,rgba(11,13,28,.35) 100%)}
}
@media (max-width:768px){
  html.js3d .piece--hero .stage-ui{padding-bottom:16px;gap:10px}
  html.js3d .piece--hero .hero-side{display:contents}
  html.js3d .piece--hero .hero-top{order:1}
  html.js3d .piece--hero .hud--hero{order:2;gap:8px 18px}
  html.js3d .piece--hero .hud--hero b{font-size:17px}
  html.js3d .piece--hero .hud--hero .kv{flex-direction:row;align-items:baseline;gap:6px}
  html.js3d .piece--hero .hero-copy{order:3;margin:auto calc(-1 * var(--gutter)) 0;padding:56px var(--gutter) 0;background:linear-gradient(to bottom,rgba(11,13,28,0) 0,var(--scrim-strong) 56px)}
  html.js3d .piece--hero .hero-foot{order:4;margin:0 calc(-1 * var(--gutter)) -16px;padding:4px var(--gutter) 16px;background:var(--scrim-strong);flex-wrap:nowrap}
  html.js3d .piece--hero .hero-foot .caption{background:none;padding:0;font-size:12px}
  html.js3d .piece--hero .lede{font-size:15px;line-height:1.45}
  html.js3d .piece--hero .hero-h{margin:10px 0 12px}
  html.js3d .piece--hero .cta-row{margin-top:14px;gap:8px}
  html.js3d .piece--hero .cta-row .btn{flex:1 1 100%}
  html.js3d .piece--hero .meta{font-size:11px;margin-top:10px}
}

/* ---------- 2 · pvp opener ---------- */
.sec--pvp{background:radial-gradient(ellipse 70% 60% at 0% 100%,rgba(168,67,47,.22),rgba(168,67,47,0) 70%),var(--void)}
.pvp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px;align-items:start}
.pvp-title{grid-column:1/-1}
.data-line{grid-column:1/-1}
.pvp-lede{grid-column:1/span 7}
.pvp-contents{grid-column:1/span 7;grid-row:4/span 2;margin-top:16px}
.pvp-contents li + li{margin-top:clamp(12px,2vw,24px)}
.pvp-contents a{display:inline-flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.pvp-contents .big{font:900 clamp(56px,10vw,168px)/.84 var(--display);text-transform:uppercase;letter-spacing:-.01em;transition:color .2s}
.pvp-contents .big--red{color:var(--laser)}
.pvp-contents a:hover .big{color:var(--orange)}
.pvp-contents .sub{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
.poster-card{grid-column:8/-1;grid-row:4;align-self:start;margin-top:24px;display:block;text-decoration:none;color:var(--ink)}
.poster-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.poster-label{display:flex;align-items:center;gap:12px;margin-top:12px;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.play{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--laser);flex:none}
.poster-card:hover img{border-color:var(--laser)}
.bracket{position:relative}
.bracket::before,.bracket::after{content:"";position:absolute;width:40px;height:40px;pointer-events:none;z-index:1}
.bracket::before{left:-8px;top:-8px;border-left:3px solid var(--laser);border-top:3px solid var(--laser)}
.bracket::after{right:-8px;bottom:-8px;border-right:3px solid var(--laser);border-bottom:3px solid var(--laser)}
.poster-card.bracket::after{bottom:28px}

/* ---------- set pieces: defend / attack / raid ---------- */
.piece--defend{--c:var(--shield)} .piece--attack{--c:var(--rail)} .piece--raid{--c:var(--core)}
.su-top,.su-bottom{display:flex;flex-direction:column;gap:18px}
.su-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.side-note{font-size:15px;color:var(--ink-2)}
.controls{font:500 12px/1.9 var(--mono);color:var(--ink-2);letter-spacing:.02em}
html.js3d .piece--set .stage-shade{background:
  radial-gradient(ellipse 60% 55% at 0% 0%,rgba(11,13,28,.72),rgba(11,13,28,0) 72%),
  linear-gradient(to bottom,var(--void) 0,rgba(11,13,28,0) 12vh,rgba(11,13,28,0) calc(100% - 12vh),var(--void) 100%),
  radial-gradient(ellipse 75% 70% at 50% 50%,rgba(11,13,28,0) 55%,rgba(11,13,28,.35) 100%)}
html.js3d .piece--set .mega{font-size:clamp(64px,min(17vw,24vh),300px)}
html.js3d .piece--set .mega--long{font-size:clamp(48px,min(12vw,20vh),220px)}
html.js3d .su-top,html.js3d .su-bottom{gap:14px}
html.js3d .side-note{background:var(--scrim-strong);padding:14px 16px;max-width:44ch;text-align:left}
html.js3d .controls{background:var(--scrim);padding:6px 10px}
@media (min-width:769px){
  html.js3d .piece--set .su-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:32px;row-gap:8px;align-items:start}
  html.js3d .piece--set .su-top .folio{grid-column:1;grid-row:1}
  html.js3d .piece--set .su-top .mega{grid-column:1;grid-row:2}
  html.js3d .piece--set .su-top .hud{grid-column:2;grid-row:1/span 2}
  html.js3d .piece--set .su-bottom{display:grid;grid-template-columns:minmax(0,46ch) minmax(0,1fr) minmax(0,44ch);column-gap:32px;align-items:end}
  html.js3d .piece--set .beats{grid-column:1}
  html.js3d .piece--set .su-side{grid-column:3;justify-self:end;align-items:flex-end;text-align:right}
}
@media (max-width:768px){
  html.js3d .piece--set .stage-ui{padding-top:calc(var(--nav-h) + 8px);padding-bottom:14px;gap:10px}
  html.js3d .piece--set .panel--hud{width:100%;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  html.js3d .piece--set .panel--hud > *{min-width:0}
  html.js3d .piece--set .panel--hud .bar,html.js3d .piece--set .panel--hud .hud-pierce,html.js3d .piece--set .panel--hud .hud-alert,html.js3d .piece--set .panel--hud .hud-hint,html.js3d .piece--set .panel--hud [data-hud="hackRule"]{grid-column:1/-1}
  html.js3d .piece--set .panel--hud .kv{grid-column:auto}
  html.js3d .piece--defend .panel--hud .kv{grid-column:1/-1}
  html.js3d .piece--set .hud b{font-size:18px}
  html.js3d .piece--set .hud-line{font-size:11px;margin-top:4px}
  html.js3d .piece--set .hud-big{font-size:17px}
  html.js3d .beats > .beat{padding:12px 14px;font-size:15px}
  html.js3d .side-note{font-size:13px;padding:10px 12px}
  html.js3d .piece--set .stage-ui .caption{font-size:12px;padding:6px 8px;max-width:none}
  html.js3d .controls{font-size:11px}
}

/* attack ruler */
.ruler{position:relative;padding-top:18px;font:500 11px/1 var(--mono);color:var(--ink-2);pointer-events:none;max-width:var(--maxw)}
.ruler-track{position:relative;height:2px;background:var(--line-strong)}
.ruler-slug{position:absolute;top:50%;left:calc(var(--k,0) * 100%);width:22px;height:4px;margin:-2px 0 0 -22px;background:var(--rail);box-shadow:0 0 10px var(--rail)}
.ruler-ticks{position:relative;height:1.2em;margin-top:8px}
.ruler-ticks li{position:absolute;top:0;white-space:nowrap}
.ruler-ticks li:nth-child(1){left:0}
.ruler-ticks li:nth-child(2){left:33.333%;transform:translateX(-50%)}
.ruler-ticks li:nth-child(3){left:66.667%;transform:translateX(-50%)}
.ruler-ticks li:nth-child(4){right:0}
.ruler-ticks li::before{content:"";position:absolute;top:-12px;width:1px;height:8px;background:var(--line-strong)}
.ruler-ticks li:nth-child(1)::before{left:0} .ruler-ticks li:nth-child(2)::before,.ruler-ticks li:nth-child(3)::before{left:50%} .ruler-ticks li:nth-child(4)::before{right:0}
.ruler-note{position:absolute;right:0;top:0;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-size:10px}
html.js3d .ruler{background:linear-gradient(to top,var(--scrim) 0,rgba(11,13,28,0));padding-bottom:2px}

/* raid */
.captured-band{background:var(--scrim-strong);padding:18px var(--gutter);color:var(--core)}
.band-main{font:700 clamp(40px,9vw,150px)/.95 var(--body);text-transform:uppercase;letter-spacing:.04em;max-width:none;overflow-wrap:anywhere}
.band-sub{margin-top:8px;font:500 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink);max-width:none}
html.js3d .captured-band{position:absolute;left:0;right:0;bottom:18%;z-index:3;padding-right:calc(var(--gutter) + var(--rail-room))}
html.js3d .captured-band.is-on{animation:band-in .45s var(--ease) both}
@keyframes band-in{from{transform:scale(1.12);opacity:0}to{transform:none;opacity:1}}
html.is-reduced .captured-band.is-on{animation:none}
@media (max-width:768px){ html.js3d .captured-band{bottom:auto;top:38%} }
.raid-controls{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:769px){ html.js3d .raid-controls{justify-content:flex-end} }

/* ---------- 4 · energy ---------- */
.energy-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px}
.energy-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:20px;align-items:end}
.energy-head h2{grid-column:1/span 8}
.energy-head .lede{grid-column:9/-1}
.figs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.fig{padding:28px 24px 28px 0;display:flex;flex-direction:column;gap:14px}
.fig + .fig{border-left:1px solid var(--line);padding-left:24px}
.fig-n{font:700 clamp(40px,5.4vw,84px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.fig--draw .fig-n{color:var(--laser)} .fig--make .fig-n{color:var(--flare)} .fig--store .fig-n{color:var(--shield)}
.fig-t{font-size:16px;color:var(--ink-2);max-width:38ch}
.energy-foot{grid-column:1/-1}
@media (max-width:1023px){ .energy-head h2,.energy-head .lede{grid-column:1/-1} }
@media (max-width:768px){
  .figs{grid-template-columns:1fr}
  .fig{padding:22px 0}
  .fig + .fig{border-left:0;border-top:1px solid var(--line);padding-left:0}
}

/* ---------- 6 · on foot ---------- */
.sec--onfoot h2{margin-bottom:clamp(28px,4vw,56px)}
.spec{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;row-gap:12px;align-items:baseline;padding:clamp(18px,2.4vw,30px) 0}
.spec-name{font:800 clamp(44px,6vw,88px)/.9 var(--display)}
.spec-name--core{color:var(--core)}
.spec-stats{font:500 clamp(13px,1.2vw,16px)/1.4 var(--mono);text-align:right;color:var(--ink);white-space:nowrap;max-width:none}
.spec-text{max-width:52ch;justify-self:end;text-align:right;color:var(--ink-2)}
.range{grid-column:1/-1;display:block;height:3px;background:var(--line);position:relative}
.range i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--r,0) * 100%);background:var(--laser)}
.scale-note{margin-top:14px;font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.gauge{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:clamp(32px,4vw,56px);font-family:var(--mono)}
.gauge-n{font:700 28px/1 var(--mono);color:var(--shield)}
.gauge-bar{position:relative;width:min(260px,40vw);height:10px;border:1px solid var(--line-strong);padding:2px}
.gauge-bar i{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--shield) 0 8px,transparent 8px 10px)}
.gauge-t{flex:1 1 320px;font:400 16px/1.5 var(--body);color:var(--ink-2)}
@media (max-width:768px){
  .spec-row{grid-template-columns:1fr}
  .spec-stats,.spec-text{text-align:left;justify-self:start;white-space:normal}
}

/* ---------- 8 · ranges ---------- */
.ranges-h{font-size:clamp(40px,6vw,104px)}
.head-panel{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.ranges-fb{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:28px var(--col-gap);align-items:center}
.ranges-fallback{width:100%;height:auto;display:block}
.rfb-t text{font-family:var(--mono);font-weight:700;paint-order:stroke;stroke:var(--void);stroke-width:4px;stroke-linejoin:round}
.rfb-legend{display:flex;flex-direction:column;gap:8px}
.rfb-legend li{display:flex;align-items:center;gap:12px;font:500 13px/1.4 var(--mono);color:var(--ink)}
.rfb-legend li::before{content:"";width:22px;height:3px;background:var(--c);flex:none}
.ranges-fb .caption{grid-column:1/-1}
html.js3d .ranges-fb{display:none}
html.js3d .piece--ranges .head-panel{background:var(--scrim);padding:16px 18px;max-width:min(640px,100%)}
html.js3d .piece--ranges .ranges-h{font-size:clamp(36px,min(5vw,8vh),88px)}
html.js3d .piece--ranges .beats > .beat{--c:var(--safe)}
@media (min-width:769px){
  html.js3d .piece--ranges .su-bottom{display:grid;grid-template-columns:minmax(0,46ch) minmax(0,1fr) minmax(0,44ch);column-gap:32px;align-items:end}
  html.js3d .piece--ranges .su-side{grid-column:3;justify-self:end;text-align:right;align-items:flex-end}
}
@media (max-width:768px){
  .ranges-fb{grid-template-columns:1fr}
  html.js3d .piece--ranges .head-panel{padding:12px 14px}
  html.js3d .piece--ranges .head-panel .lede{font-size:15px}
}

/* ---------- 9 · rules ---------- */
.rules-grid h2{max-width:16ch;margin-bottom:clamp(28px,4vw,56px)}
.rules{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.rules li{display:grid;grid-template-columns:clamp(150px,24vw,340px) minmax(0,1fr);column-gap:28px;align-items:baseline;padding:clamp(16px,2vw,24px) 0}
.rv{font:700 clamp(28px,3.4vw,56px)/1 var(--mono);color:var(--shield);font-variant-numeric:tabular-nums;white-space:nowrap}
.rules li p{font-size:clamp(16px,1.3vw,19px)}
@media (max-width:768px){ .rules li{grid-template-columns:1fr;row-gap:8px} }

/* ---------- 10 · armory ---------- */
.piece--armory{padding:0;background:transparent}
.armory-head{background:var(--void);padding:var(--sec-pad) 0 clamp(32px,4vw,56px)}
.armory-head .lede{margin-top:20px}
.armory-head .caption{margin-top:12px}
.armory-layout{position:relative}
.arm-index{background:var(--void)}
.arm-index li{background:var(--void)}
.arm-row{--c:var(--ink-3);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;width:100%;padding:28px var(--gutter);border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.arm-row[data-class="weapon"]{--c:var(--laser)} .arm-row[data-class="defense"]{--c:var(--shield)} .arm-row[data-class="utility"]{--c:var(--core)}
.arm-row:hover,.arm-row:focus-visible{background:rgba(242,201,168,.04)}
.arm-row.is-selected{background:linear-gradient(90deg,rgba(242,201,168,.08),rgba(242,201,168,0) 75%)}
.arm-row:focus-visible{outline-offset:-4px}
.arm-name{font:800 clamp(28px,4vw,56px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
.arm-row.is-selected .arm-name{color:var(--c)}
.arm-stats{font:500 13px/1.55 var(--mono);color:var(--ink-2);max-width:60ch}
.arm-desc{font-size:16px;line-height:1.5;color:var(--ink);max-width:52ch}
.arm-fit{display:inline-block;padding:5px 9px;border:1px solid rgba(232,181,74,.55);font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
html:not(.js3d) .armory-layout > .stage{display:none}
html.js3d .arm-row{min-height:max(280px,38vh)}
html.js3d .piece--armory .stage-ui{padding:calc(var(--nav-h) + 16px) calc(var(--gutter) + var(--rail-room)) 24px var(--gutter)}
.arm-top,.arm-bottom{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.arm-meter{width:min(280px,100%);padding:10px 12px;background:var(--scrim);border:1px solid var(--line)}
.arm-meter .bar{margin-top:8px}
.arm-meter .bar-fill{background:var(--shield)}
.arm-meter:has([data-hud="armMeterLabel"]:empty){display:none}
.arm-note{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;background:var(--scrim);color:var(--ink);max-width:none}
.arm-note:empty{display:none}
.arm-hud{max-width:52ch;padding:14px 16px;background:var(--scrim-strong)}
.arm-hud-name{font:800 clamp(24px,2.4vw,36px)/1 var(--display);text-transform:uppercase}
.arm-hud-stats{margin-top:8px;font:500 12px/1.5 var(--mono);color:var(--ink-2)}
.arm-hint{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);background:var(--scrim);padding:6px 10px;max-width:none}
@media (min-width:769px){
  html.js3d .armory-layout{display:grid;grid-template-columns:56fr 44fr;align-items:start}
  html.js3d .armory-layout > .stage{grid-column:2;grid-row:1;align-self:start}
  html.js3d .arm-index{grid-column:1;grid-row:1}
}
@media (max-width:768px){
  html.js3d .armory-layout > .stage{top:var(--nav-h);height:46vh;height:46svh;z-index:2}
  html.js3d .piece--armory .stage-ui{padding:12px var(--gutter)}
  html.js3d .arm-hud{display:none}
  html.js3d .arm-index{padding-top:0}
  html.js3d .arm-row{min-height:44vh;min-height:44svh}
}

/* ---------- 11 · trailers ---------- */
.tr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;margin-top:clamp(32px,4vw,56px);align-items:start}
.tr--pvp{grid-column:1/span 8}
.tr--launch{grid-column:9/-1;margin-top:12vh}
.frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.frame video{width:100%;height:100%;object-fit:contain;background:#000}
.tr figcaption{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.tr-t{font:500 12px/1.45 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.tr--pvp .tr-t{color:var(--peach)}
.credit{font-size:13px;line-height:1.45;color:var(--ink-3)}
.credit a{color:var(--ink-2)}
.tr-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--line)}
.tr-note{color:var(--ink-2);max-width:62ch}
@media (max-width:1023px){ .tr--pvp,.tr--launch{grid-column:1/-1;margin-top:0} }

/* ---------- 12 · build ---------- */
.build-hud{display:flex;flex-wrap:wrap;gap:12px 28px}
.build-hud .kv{flex-direction:column;align-items:flex-start;gap:6px}
.legend{display:none}
.build-phase{display:flex;flex-direction:column;gap:16px}
.build-grow h2{font-size:clamp(40px,7vw,120px)}
.paint-line{font:500 13px/1.5 var(--mono);color:var(--peach);max-width:none}
.callouts{display:grid;grid-template-columns:1fr;gap:10px}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:baseline;padding:12px 14px;background:var(--void-2)}
.callout:focus-visible{outline-offset:2px}
.co-n{grid-row:span 2;font:700 clamp(28px,3vw,44px)/1 var(--mono);color:var(--c);font-variant-numeric:tabular-nums}
.co-l{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.co-c{font-size:14px;line-height:1.4;color:var(--ink-2)}
.build-xray .more{font-size:14px;color:var(--ink-3)}
.leaders{display:none}
html.js3d .piece--build .stage-ui{display:block}
html.js3d .piece--build .folio{position:absolute;top:calc(var(--nav-h) + 12px);left:var(--gutter)}
html.js3d .build-hud{position:absolute;z-index:1;top:calc(var(--nav-h) + 12px);right:calc(var(--gutter) + var(--rail-room));display:block;width:clamp(240px,22vw,320px);padding:14px 16px;background:var(--scrim);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
html.js3d .build-hud .kv{flex-direction:row;align-items:baseline;justify-content:space-between}
html.js3d .build-hud .kv + .kv{margin-top:8px}
html.js3d .legend{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:2px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);max-height:calc(7 * 1.5em + 12px);overflow:hidden}
html.js3d .legend:empty{display:none}
.legend-row{display:flex;justify-content:space-between;gap:6px;font:500 10.5px/1.5 var(--mono);color:var(--ink-2);white-space:nowrap;min-width:0}
.legend-row span{overflow:hidden;text-overflow:ellipsis}
.legend-row b{font:700 10.5px/1.5 var(--mono);color:var(--ink)}
html.js3d .build-phase{position:absolute;left:var(--gutter);max-width:min(560px,44vw);z-index:1}
html.js3d .build-grow{top:calc(var(--nav-h) + 44px)}
html.js3d .build-grow .beat{background:var(--scrim-strong);padding:10px 14px}
html.js3d .build-grow h2{font-size:clamp(40px,min(6vw,9vh),104px);padding:14px 16px 12px}
html.js3d .build-strata{top:50%;transform:translateY(-50%);max-width:min(440px,34vw)}
html.js3d .build-strata h3{background:var(--scrim-strong);padding:10px 14px;align-self:flex-start}
html.js3d .callout{background:var(--scrim-strong)}
html.js3d .build-xray{bottom:26px;background:var(--scrim-strong);padding:18px 20px;gap:12px}
html.js3d .leaders{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .25s}
.leaders line{stroke:var(--c,var(--ink-2));stroke-width:1;stroke-dasharray:4 3;opacity:.85}
html.js3d .piece--build:has(.build-strata:not(.is-on)) .leaders{opacity:0}
html:not(.is-live) .piece--build .leaders{opacity:0}
@media (max-width:768px){
  html.js3d .build-hud{left:var(--gutter);right:var(--gutter);width:auto;top:calc(var(--nav-h) + 34px);display:flex;justify-content:space-between;padding:8px 12px}
  html.js3d .build-hud .kv + .kv{margin-top:0}
  html.js3d .build-hud b{font-size:16px}
  html.js3d .legend{display:none}
  html.js3d .build-phase{left:0;right:0;bottom:0;top:auto;transform:none;max-width:none;padding:18px var(--gutter) 16px;background:linear-gradient(to bottom,rgba(11,13,28,0),var(--scrim-strong) 36px);gap:10px}
  html.js3d .build-grow .beat,html.js3d .build-grow h2{background:none;padding:0}
  html.js3d .build-grow .lede{font-size:15px}
  html.js3d .build-strata h3{background:none;padding:0}
  html.js3d .callouts{grid-template-columns:1fr 1fr;gap:8px}
  html.js3d .callout{grid-template-columns:1fr;padding:8px 10px}
  html.js3d .co-n{grid-row:auto;font-size:24px}
  html.js3d .co-c{font-size:12px}
  html.js3d .build-xray{padding-top:28px}
  html.js3d .build-xray p{font-size:14px}
}

/* ---------- 13 · explore + recorder ---------- */
.sec--explore{background:transparent;padding-top:0}
.ex-hero{position:relative;background:var(--void)}
.ex-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;max-height:92vh}
.ex-hero-over{position:absolute;left:0;right:0;bottom:44px;padding:clamp(40px,6vw,96px) var(--gutter) clamp(18px,3vw,40px);background:linear-gradient(to top,rgba(110,38,38,.9) 0,rgba(110,38,38,.72) 55%,rgba(110,38,38,0) 100%)}
.ex-hero-over h2{max-width:14ch;font-size:clamp(40px,8vw,140px)}
.ex-hero figcaption{height:44px;padding:12px var(--gutter);background:var(--void)}
.ex-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(32px,5vw,72px);padding-top:clamp(48px,8vw,120px);align-items:start}
.ex-grid > *{background:var(--void)}
.ex-grid figure figcaption{margin-top:12px}
.ex-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.ex-lede{grid-column:2/span 7}
.ex-a{grid-column:1/span 7}
.ex-b{grid-column:8/-1;margin-top:10vh}
.ex-quote{grid-column:1/-1}
.ex-quote p{font:900 clamp(36px,6vw,96px)/.92 var(--display);text-transform:uppercase;max-width:22ch;text-wrap:balance;overflow-wrap:anywhere}
.ex-quote p::before{content:"";display:block;width:64px;height:3px;background:var(--orange);margin-bottom:22px}
.ex-c{grid-column:1/span 6}
.ex-c img{aspect-ratio:16/10}
.piece--recorder{grid-column:7/-1;padding:0;background:var(--void)}
.ex-d{grid-column:3/span 4}
.ex-map{grid-column:8/-1;align-self:center}
.ex-map h3{margin-bottom:14px}
.map-list li{display:flex;align-items:center;gap:12px;padding:12px 0;font:500 14px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.map-list .flag{color:var(--orange)}
html:not(.js3d) .piece--recorder{display:none}
html:not(.js3d) .ex-c{grid-column:2/span 10}
html.js3d .piece[data-pin="inline"] .stage{position:relative;top:auto;height:auto;aspect-ratio:16/10;border:1px solid var(--line)}
html.js3d .piece[data-pin="inline"] .stage-shade{background:radial-gradient(ellipse 80% 75% at 50% 50%,rgba(11,13,28,0) 60%,rgba(11,13,28,.4) 100%),linear-gradient(to top,rgba(11,13,28,.6),rgba(11,13,28,0) 32%)}
html.js3d .piece[data-pin="inline"] .stage-ui{padding:14px 16px}
.rec-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rec-h{font-size:clamp(18px,1.8vw,24px);background:var(--scrim);padding:4px 8px}
.rec-t{font:700 16px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--rail);background:var(--scrim);padding:6px 8px;max-width:none}
.rec-ctl{display:flex;align-items:center;gap:12px}
.rec-play{flex:none}
.rec-ico{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
.rec-play[aria-pressed="true"] .rec-ico{width:10px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.rec-scrub{flex:1;min-width:0;min-height:40px;accent-color:var(--orange);cursor:pointer}
.rec-cap{margin-top:12px}
@media (max-width:1023px){
  .ex-lede,.ex-quote{grid-column:1/-1}
  .ex-a,.ex-b,.ex-c,.piece--recorder,.ex-d,.ex-map,html:not(.js3d) .ex-c{grid-column:1/-1;margin-top:0}
}
@media (max-width:768px){ .ex-hero-over{bottom:auto;top:auto;position:relative;background:var(--rust-deep)} .ex-hero figcaption{height:auto} }

/* ---------- 14 · co-op ---------- */
.coop-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;align-items:start}
.coop-head{grid-column:1/span 5;position:sticky;top:calc(var(--nav-h) + 28px)}
.coop-h{font-size:clamp(56px,8vw,150px);line-height:.86}
.coop-body{grid-column:7/-1;min-width:0}
.feat{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line-strong)}
.feat li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);column-gap:24px;row-gap:6px;padding:20px 0}
.feat h3{font-size:clamp(20px,2vw,28px)}
.feat p{color:var(--ink-2);font-size:16px}
.coop-matrix{margin-top:clamp(32px,4vw,56px)}
.mx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--void-2)}
.mx{width:100%;min-width:560px;border-collapse:collapse}
.mx-title{caption-side:top;text-align:left;padding:12px 14px;font:500 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.mx th,.mx td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.mx thead th{font:500 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
.mx tbody th{font:600 15px/1.2 var(--body);white-space:nowrap}
.pair{display:flex;gap:6px}
.pair button{display:inline-flex;align-items:center;gap:6px;min-height:48px;min-width:74px;padding:0 10px;border:1px solid var(--line-strong);border-radius:2px;background:transparent;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);cursor:pointer}
.pair button::before{content:"";width:8px;height:8px;border:1px solid currentColor;flex:none}
.pair button[aria-pressed="true"]{border-color:var(--core);color:var(--core);background:rgba(77,255,179,.10)}
.pair button[aria-pressed="true"]::before{background:currentColor}
.pair button[aria-disabled="true"]{cursor:not-allowed;opacity:.75}
.coop-matrix .caption{margin-top:10px}
@media (max-width:1023px){ .coop-head{grid-column:1/-1;position:static} .coop-body{grid-column:1/-1} }
@media (max-width:768px){ .feat li{grid-template-columns:1fr} }

/* ---------- 15 · next ---------- */
.route{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--col-gap);row-gap:40px;margin-top:clamp(36px,5vw,64px)}
.route::before{content:"";position:absolute;left:0;right:0;top:27px;border-top:2px dashed var(--line-strong)}
.wp{position:relative}
.wp-mark{display:flex;align-items:center;gap:14px;height:56px}
.wp-flag{width:44px;height:56px;padding:4px 8px 4px 4px;background:var(--void);flex:none;overflow:visible}
.wp--now .wp-flag{color:var(--orange)}
.wp--next .wp-flag{color:var(--gold);animation:wp-pulse 2.4s ease-in-out infinite}
@keyframes wp-pulse{0%,100%{opacity:1}50%{opacity:.4}}
html.is-reduced .wp--next .wp-flag{animation:none}
@media (prefers-reduced-motion:reduce){ .wp--next .wp-flag{animation:none} }
.stamp{display:inline-block;padding:6px 9px;border:2px solid var(--orange);background:var(--void);font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--orange);transform:rotate(-4deg)}
.wp-date{margin-top:18px;font:900 clamp(40px,6.4vw,104px)/.88 var(--display);text-transform:uppercase;max-width:none}
.wp--next .wp-date{color:var(--gold)}
.wp-name{margin-top:12px;font:600 clamp(18px,1.6vw,22px)/1.3 var(--body)}
.wp-status{margin-top:4px;color:var(--ink-2)}
.next-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(40px,5vw,64px)}
@media (max-width:768px){
  .route{grid-template-columns:1fr;padding-left:0}
  .route::before{left:10px;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px dashed var(--line-strong)}
  .wp{padding-left:0}
}

/* ---------- 16 · finale ---------- */
.hud-alt{font:700 16px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);max-width:none}
.finale-copy{display:flex;flex-direction:column;gap:16px}
.finale-copy h2{font-size:clamp(48px,10vw,170px)}
.finale-links{font:500 13px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.finale-links a{color:var(--peach)}
html.js3d .piece--finale .stage-ui{justify-content:flex-end}
html.js3d .piece--finale .hud-alt{position:absolute;top:calc(var(--nav-h) + 16px);right:calc(var(--gutter) + var(--rail-room));padding:8px 10px;background:var(--scrim);border:1px solid var(--line)}
html.js3d .finale-copy{align-items:center;text-align:center;margin:0 calc(-1 * var(--gutter) - var(--rail-room)) -24px calc(-1 * var(--gutter));padding:clamp(56px,10vh,120px) var(--gutter) 32px;background:linear-gradient(to bottom,rgba(11,13,28,0) 0,var(--scrim-strong) clamp(56px,10vh,120px))}
html.js3d .finale-copy p{margin-inline:auto}
html.js3d .finale-copy .cta-row{justify-content:center;margin-top:4px}
html.js3d .finale-copy h2{font-size:clamp(48px,min(10vw,15vh),170px)}

/* ---------- 17 · footer ---------- */
.foot{background:var(--void);border-top:1px solid var(--line);padding:clamp(56px,8vw,120px) 0 40px}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;align-items:start}
.wordmark--lg{grid-column:1/-1;gap:clamp(14px,2vw,24px)}
.wordmark--lg .wm-cells{width:64px;height:64px;gap:4px}
.wordmark--lg b{font:900 clamp(48px,9vw,140px)/.85 var(--display);letter-spacing:.04em}
.foot-honesty{grid-column:1/span 6;color:var(--ink-2);font-size:15px}
.credits{grid-column:7/-1;display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.credits p{max-width:none}
.credits a{color:var(--peach);overflow-wrap:anywhere}
.credit-k{display:block;font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.foot-h{font:800 22px/1 var(--display)}
.foot-links{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.foot-links nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-links nav a{display:inline-flex;align-items:center;min-height:44px;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.foot-links nav a:hover{border-bottom-color:var(--orange)}
.foot-set{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.foot-dates{grid-column:1/-1}
@media (max-width:1023px){ .foot-honesty,.credits{grid-column:1/-1} }

/* ---------- roadmap page ---------- */
.rm-head{padding-top:calc(var(--nav-h) + clamp(48px,8vw,120px))}
.rm-head h1{font:900 clamp(64px,17vw,300px)/.82 var(--display);letter-spacing:-.01em;margin-top:6px}
.rm-head .lede{margin-top:24px}
.fp-h{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
.fp-bar{display:flex;flex-wrap:wrap;gap:10px 32px;padding:14px 16px;margin-top:10px}
.fp-bar li{display:flex;flex-direction:column;gap:4px}
.fp-bar b{font:700 clamp(15px,1.4vw,19px)/1.1 var(--mono);white-space:nowrap}
.fp-bar li:nth-child(2) b{color:var(--gold)}
.route-fallback{display:block;width:100%;height:auto;max-width:900px}
.route-fallback text{font-family:var(--mono);font-size:15px;font-weight:700;paint-order:stroke;stroke:var(--void);stroke-width:4px}
html.js3d .route-fallback{display:none}
html.js3d .piece--flight .fp-bar{width:fit-content;max-width:100%}
html.js3d .piece--flight .hud-tag--pvp{--c:var(--orange)}
html.js3d .piece--flight .hud-tag--pirate{--c:var(--gold);color:var(--gold)}
.rm-cards{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,72px);row-gap:56px}
.rm-card{border-top:2px solid var(--orange);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.rm-card--next{border-top-color:var(--gold)}
.rm-status{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--orange);max-width:none}
.rm-card--next .rm-status{color:var(--gold)}
.rm-card h2{font-size:clamp(44px,6vw,96px)}
.rm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rm-tags li{padding:6px 10px;border:1px solid var(--line-strong);font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.rm-card a.rm-see{align-self:flex-start;margin-top:6px}
@media (max-width:768px){ .rm-cards{grid-template-columns:1fr} }

/* ---------- reduced motion (belt and braces) ---------- */
html.is-reduced .stage-poster,html.is-reduced .nav,html.is-reduced .hud-tag{transition:none}
@media (prefers-reduced-motion:reduce){
  .stage-chip::before,[data-hud="alert"].is-warn{animation:none}
  .captured-band.is-on{animation:none}
}

/* ---------- preloader (shown only while html.is-preloading; no JS → never shown) ---------- */
#preloader{display:none}
html.is-preloading{overflow:hidden}
html.is-preloading #preloader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:
  radial-gradient(ellipse 70% 55% at 50% 45%,rgba(46,89,191,.22),transparent 70%),var(--void);
  clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
html.pl-exit #preloader{clip-path:inset(0 0 100% 0)}
.pl-in{display:grid;justify-items:center;gap:22px;width:min(420px,calc(100vw - 32px));transition:opacity .5s,transform .9s cubic-bezier(.7,0,.2,1)}
html.pl-exit .pl-in{opacity:0;transform:translateY(-40px)}
.pl-cells.wm-cells{width:84px;height:84px;gap:5px}
.pl-cells i{transform:scale(.55);opacity:.14;transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.pl-cells i.is-lit{opacity:1;transform:none}
.pl-cells i:not(.is-lit){animation:pl-wait 1.2s ease-in-out infinite}
.pl-cells i:nth-child(3n+2):not(.is-lit){animation-delay:.2s}
.pl-cells i:nth-child(3n):not(.is-lit){animation-delay:.4s}
@keyframes pl-wait{50%{opacity:.34}}
.pl-word{font:900 clamp(44px,11vw,72px)/.9 var(--display);letter-spacing:.08em;color:var(--ink)}
.pl-bar{display:block;width:100%;height:3px;background:rgba(242,201,168,.14);overflow:hidden}
.pl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--peach));transform:scaleX(var(--pl,0));transform-origin:0 50%;transition:transform .6s var(--ease)}
.pl-meta{display:flex;justify-content:space-between;width:100%;min-height:16px}
.pl-meta .load-line{margin:0}
.pl-pct{font:500 12px/1.3 var(--mono);letter-spacing:.12em;color:var(--ink-3)}
html.is-reduced #preloader,html.is-reduced .pl-in,html.is-reduced .pl-cells i{transition-duration:.01s;animation:none}
html.is-reduced.pl-exit #preloader{clip-path:inset(0 0 0 0);opacity:0}

/* ---------- PvP Update: nav pill, featured block (home) and pvp.html ---------- */
.pill--pvp{border:1px solid var(--laser);color:#FF7A6E}
.pill--pvp:hover{background:rgba(255,64,51,.14)}
.pill--pvp[aria-current="page"]{background:var(--laser);color:var(--void)}
.pill-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pill-pulse 1.6s ease-in-out infinite}
@keyframes pill-pulse{50%{opacity:.35}}
html.is-reduced .pill-dot{animation:none}
@media (max-width:560px){ .nav-in .pill--gold .pill-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .nav-in .pill--gold{padding:0 10px} }

.sec--feature{background:
  radial-gradient(ellipse 60% 70% at 85% 30%,rgba(255,64,51,.16),transparent 70%),
  radial-gradient(ellipse 70% 60% at 0% 100%,rgba(168,67,47,.26),transparent 70%),var(--void);
  border-block:1px solid rgba(255,64,51,.22)}
.feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(28px,4vw,48px);align-items:center}
.feat-copy{grid-column:1/span 6}
.feat-media{grid-column:7/-1;margin:0}
.feat-media figcaption{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.feat-media .tr-t{color:var(--peach)}
.feat-title{font:900 clamp(56px,8.4vw,148px)/.84 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:18px 0 16px;text-wrap:balance}
.feat-copy .lede{margin-top:16px}
.feat-pillars{list-style:none;padding:0;margin:clamp(22px,3vw,34px) 0 0;display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,36px)}
.feat-pillars a{display:inline-flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.feat-pillars .big{font:900 clamp(34px,4vw,60px)/.9 var(--display);text-transform:uppercase;transition:color .2s}
.feat-pillars .big--red{color:var(--laser)}
.feat-pillars a:hover .big{color:var(--orange)}
.feat-pillars .sub{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
.btn--xl{min-height:60px;padding:0 30px;font-size:17px}
.feat-chips{grid-column:1/-1;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.feat-chips li{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);padding:10px 14px;border:1px solid var(--line-strong);background:var(--scrim)}
@media (max-width:1023px){ .feat-copy,.feat-media{grid-column:1/-1} }

.tr-grid--solo .tr{grid-column:1/-1;max-width:1100px;margin-top:0}
.sec--pvp-top{padding-top:calc(var(--nav-h) + clamp(48px,8vw,120px))}
.pvp-badge{grid-column:1/-1;justify-self:start}

/* ---------- coming-soon home: liftoff hero + 2027 countdown ---------- */
.piece--soon .finale-copy .badge{align-self:center}
.piece--soon .finale-copy h1{margin:0;font:900 clamp(48px,10vw,170px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
html.js3d .piece--soon .finale-copy h1{font-size:clamp(48px,min(10vw,15vh),170px)}
html:not(.js3d) .piece--soon .finale-copy{align-items:flex-start}
.soon-cue{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);margin-top:4px;animation:soon-bob 2.2s ease-in-out infinite}
@keyframes soon-bob{50%{transform:translateY(5px)}}
html.is-reduced .soon-cue{animation:none}

.sec--countdown{background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(242,128,31,.16),transparent 70%),var(--void);border-top:1px solid var(--line)}
.cd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.4vw,28px)}
.cd .eyebrow{margin:0}
.cd-title{margin:0;font:900 clamp(44px,8vw,120px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.cd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.6vw,20px);width:min(100%,880px);margin-top:clamp(8px,2vw,20px)}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(16px,2.6vw,30px) 8px;border:1px solid var(--line-strong);background:var(--scrim);position:relative}
.cd-cell::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--orange)}
.cd-cell:nth-child(2)::before{background:var(--peach)}
.cd-cell:nth-child(3)::before{background:var(--hull-blue)}
.cd-cell:nth-child(4)::before{background:var(--laser)}
.cd-cell b{font:900 clamp(40px,8vw,112px)/.9 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.cd-cell span{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2)}
.cd-lede{margin:0 auto;max-width:52ch}
.cd-note{color:var(--ink-3);margin:0}
@media (max-width:480px){ .cd-cell span{font-size:9px;letter-spacing:.1em} }

.foot--soon .foot-soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.foot--soon .caption{max-width:60ch;margin:0}