/* SCUTTLE X website. The home page is the game's stage at night: the hero you pick colours the page
   (--hero, also the in-game role colour), the hero turns into a spider bot on site.js's WebGL canvas.
   Sharp corners everywhere, like the game's UI kit. */
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
/* Thai, as in the game (tools/make_thai_font.py cuts these): Noto Sans Thai Extra Condensed beside Barlow
   in headings, at full size; body text in the normal width. Thai letters only (unicode-range). */
@font-face { font-family: "Scuttle Thai Condensed"; src: url("fonts/NotoSansThaiXC-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Scuttle Thai Condensed"; src: url("fonts/NotoSansThaiXC-Bold.woff") format("woff"); font-weight: 700; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Scuttle Thai"; src: url("fonts/NotoSansThai-Regular.woff") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Scuttle Thai"; src: url("fonts/NotoSansThai-Bold.woff") format("woff"); font-weight: 700; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }

@property --hero { syntax: "<color>"; inherits: true; initial-value: #c7ff26; }

:root {
  --night: #0d0a1f;
  --deep: #151030;
  --line: rgba(206, 196, 255, 0.13);
  --text: #efeaff;
  --body-c: #d6d0f2;
  --dim: #a29bcd;
  --violet: #9e4dff;
  --lime: #ccff0d;
  --bomb: #ff3d55;
  --defuse: #4db8ff;
  --hot: #fff7e6;
  --hero: #c7ff26;
  --display: "Barlow Condensed", "Scuttle Thai Condensed", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
  --body: "Scuttle Thai", system-ui, -apple-system, "Segoe UI", "Sukhumvit Set", "Thonburi", Roboto, sans-serif;
  --wrap: 1240px;
  --gut: max(20px, env(safe-area-inset-left), calc((100vw - var(--wrap)) / 2));
  color-scheme: dark;
  transition: --hero 0.7s ease;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: var(--hero); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.i { width: 1em; height: 1em; flex: none; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; color: var(--night); padding: 10px 14px; font-weight: 700; }
.skip:focus { left: 12px; }

/* --- header ------------------------------------------------------------------------------------ */
.top { position: sticky; top: 0; z-index: 30; background: rgba(13, 10, 31, 0.9); border-bottom: 1px solid var(--line); }
.page-index .top { position: absolute; left: 0; right: 0; background: linear-gradient(rgba(13, 10, 31, 0.85), rgba(13, 10, 31, 0)); border: 0; }
.top .in { max-width: calc(var(--wrap) + 40px); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 23px/1 var(--display); letter-spacing: 0.06em; }
.brand img { width: 34px; height: 34px; }
.brand:hover { color: #fff; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font: 600 17px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.nav a { color: var(--dim); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: #fff; border-bottom-color: var(--hero); }
.nav a.lang { color: var(--text); border: 1px solid var(--line); padding: 7px 10px; }
.nav a.lang:hover { border-color: var(--hero); }

/* the English pages' link to the Thai ones uses the phone's own Thai font, so they never download ours */
html[lang="en"] a[lang="th"] { font-family: "Barlow Condensed", "Sukhumvit Set", "Thonburi", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif; }

/* --- buttons ----------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 24px; background: var(--hero); color: var(--night);
       font: 700 21px/1 var(--display); letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer;
       box-shadow: 0 0 0 0 var(--hero); transition: background 0.15s, box-shadow 0.2s; }
.btn .i { width: 16px; height: 16px; }
.btn:hover { background: #fff; color: var(--night); box-shadow: 0 0 28px -4px var(--hero); }
.soon { display: inline-flex; align-items: center; min-height: 54px; padding: 0 0 0 14px; border-left: 2px solid var(--hero); color: var(--text);
        font: 600 19px/1.1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* --- the stage ---------------------------------------------------------------------------------- */
.stage { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 700px);
         display: grid; grid-template-columns: minmax(0, 1fr) auto 220px; grid-template-rows: 1fr auto auto;
         grid-template-areas: "copy arena squad" "cta arena squad" "skill arena squad"; column-gap: clamp(20px, 3vw, 48px);
         padding: 92px var(--gut) 44px; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(42% 52% at 60% 58%, color-mix(in oklab, var(--hero) 26%, transparent), transparent 72%),
    radial-gradient(50% 40% at 8% 0%, rgba(158, 77, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #0b0919 0%, #17113a 62%, #0d0a1f 100%); }
.floor { position: absolute; z-index: -2; left: -110%; right: -110%; bottom: -1%; height: 64%; pointer-events: none;
  background-image: linear-gradient(color-mix(in oklab, var(--hero) 32%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in oklab, var(--hero) 32%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center bottom;
  transform: perspective(380px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(46% 100% at 50% 100%, #000 25%, transparent 75%); mask-image: radial-gradient(46% 100% at 50% 100%, #000 25%, transparent 75%); }

.stage-copy { grid-area: copy; align-self: end; position: relative; z-index: 2; container-type: inline-size; }
.stage-cta { grid-area: cta; padding-bottom: 30px; position: relative; z-index: 2; }
.word { margin: 0 0 18px; white-space: nowrap; font: 700 clamp(52px, 25cqi, 142px)/0.82 var(--display); letter-spacing: 0.005em; text-transform: uppercase; color: #fff;
        text-shadow: 0 0 40px color-mix(in oklab, var(--hero) 35%, transparent); }
.pitch { margin: 0 0 30px; max-width: 19ch; font: 600 clamp(24px, 2.3vw, 32px)/1.12 var(--display); letter-spacing: 0.01em; color: var(--text); }

.skill { grid-area: skill; align-self: start; display: flex; gap: 16px; align-items: flex-start; max-width: 430px; padding: 18px 0 0;
         border-top: 1px solid var(--line); position: relative; z-index: 2; }
.skill-icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; color: var(--night); background: var(--hero); }
.skill-icon .i { width: 30px; height: 30px; }
.skill p { margin: 0; color: var(--body-c); font-size: 16px; line-height: 1.5; }
.skill b { display: block; color: #fff; font: 700 24px/1.1 var(--display); letter-spacing: 0.05em; margin-bottom: 3px; }

.arena { grid-area: arena; position: relative; align-self: end; height: min(80svh, 820px); aspect-ratio: 690 / 1220; margin-bottom: -10px; }
.bigname { position: absolute; z-index: -1; left: 50%; top: 2%; margin: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none; user-select: none;
           font: 700 min(30vw, 46svh)/0.78 var(--display); letter-spacing: 0.01em; color: transparent;
           -webkit-text-stroke: 2px color-mix(in oklab, var(--hero) 70%, transparent); opacity: 0.55; }
/* the lobby's two light pillars, far behind the hero */
.arena::before, .arena::after { content: ""; position: absolute; z-index: -2; top: 6%; bottom: 4%; width: 3px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--hero) 22%, color-mix(in oklab, var(--hero) 60%, #fff) 60%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in oklab, var(--hero) 45%, transparent); opacity: 0.45; }
.arena::before { left: -34%; }
.arena::after { right: -34%; }
/* light cells drifting up off the floor (site.js adds them) */
.motes { position: absolute; z-index: -1; left: -20%; right: -20%; bottom: 2%; height: 70%; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent); }
.motes i { position: absolute; bottom: -8px; left: var(--x); width: var(--s); height: var(--s); background: var(--hero); box-shadow: 0 0 8px var(--hero);
  opacity: 0; animation: mote var(--t) linear var(--d) infinite; }
@keyframes mote { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.8; } 100% { transform: translateY(calc(-1 * var(--h))); opacity: 0; } }
.still, .gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.still { object-fit: contain; transition: opacity 0.25s; }
.js .still { opacity: 0; animation: show-still 0s 2.6s forwards; }  /* the canvas takes over; shown anyway if it never does */
.js .arena.fallback .still { opacity: 1; animation: none; }
.js .arena.gl-on .still { animation: none; }
@keyframes show-still { to { opacity: 1; } }

.ring { position: absolute; z-index: -1; left: 50%; bottom: 0.6%; width: 118%; aspect-ratio: 3.6; transform: translate(-50%, 50%); border-radius: 50%;
        border: 2px solid var(--hero); box-shadow: 0 0 22px var(--hero), inset 0 0 22px color-mix(in oklab, var(--hero) 50%, transparent); opacity: 0.85; }
.ring i { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--hot); opacity: 0; }
.ring.burst i { animation: ring-burst 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ring-burst { 0% { transform: scale(0.35); opacity: 1; box-shadow: 0 0 30px var(--hero); } 100% { transform: scale(2.1); opacity: 0; } }
.beam { position: absolute; z-index: 3; left: 50%; bottom: 1%; width: 8px; height: 160svh; transform-origin: 50% 100%; opacity: 0; pointer-events: none;
        background: linear-gradient(0deg, var(--hot) 0%, var(--hero) 30%, color-mix(in oklab, var(--hero) 0%, transparent) 100%);
        box-shadow: 0 0 22px 6px color-mix(in oklab, var(--hero) 55%, transparent); }
.beam.drop { animation: beam 1.05s cubic-bezier(0.3, 0.6, 0.2, 1) forwards; }
@keyframes beam {
  0% { opacity: 1; transform: translateX(-50%) translateY(-100%) scaleX(0.6); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scaleX(1.4); }
  40% { opacity: 0.9; transform: translateX(-50%) translateY(0) scaleX(0.7); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0) scaleX(0.15); } }

.morph { position: absolute; z-index: 4; right: -14%; bottom: 13%; display: grid; justify-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; }
.morph-ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--hero); background: rgba(13, 10, 31, 0.62);
              box-shadow: 0 0 24px -6px var(--hero), inset 0 0 18px -8px var(--hero); transition: background 0.15s, transform 0.15s; }
.morph-ring .i { width: 40px; height: 40px; grid-area: 1 / 1; }
.morph-ring .i + .i, .morph[aria-pressed="true"] .morph-ring .i:first-child { display: none; }
.morph[aria-pressed="true"] .morph-ring .i + .i { display: block; }
.morph[aria-pressed="true"] .morph-ring { background: var(--hero); color: var(--night); }
.morph:hover .morph-ring { transform: scale(1.06); }
.morph:active .morph-ring { transform: scale(0.94); }
.morph-label { font: 700 16px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 8px var(--night); white-space: nowrap; }
.morph:focus-visible { outline: none; }
.morph:focus-visible .morph-ring { outline: 3px solid #fff; outline-offset: 4px; }

.squad { grid-area: squad; align-self: center; display: grid; gap: 10px; position: relative; z-index: 2; }
.squad button { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left;
                padding: 8px 12px 8px 8px; background: rgba(13, 10, 31, 0.55); border: 1px solid var(--line); color: var(--text); cursor: pointer;
                font: inherit; transition: border-color 0.15s, background 0.15s; }
.squad img { grid-row: 1 / 3; width: 64px; height: 64px; background: color-mix(in oklab, var(--c) 34%, #0d0a1f); }
.squad b { align-self: end; font: 700 25px/1 var(--display); letter-spacing: 0.06em; }
.squad .cls { align-self: start; display: flex; align-items: center; gap: 6px; color: var(--dim); font: 600 15px/1.4 var(--display); letter-spacing: 0.1em; }
.squad .cls .i { width: 15px; height: 15px; color: var(--c); }
.squad button:hover { border-color: color-mix(in oklab, var(--c) 60%, transparent); }
.squad button[aria-checked="true"] { border-color: var(--c); background: color-mix(in oklab, var(--c) 14%, rgba(13, 10, 31, 0.7)); box-shadow: inset 4px 0 0 var(--c); }
.squad button[aria-checked="true"] b { color: var(--c); }

/* --- sections ----------------------------------------------------------------------------------- */
.band { padding: clamp(80px, 11vw, 150px) var(--gut); border-top: 1px solid var(--line); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.band h2 { margin: 0 0 22px; max-width: 15ch; font: 700 clamp(46px, 6.2vw, 88px)/0.88 var(--display); letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }
.lede { margin: 0 0 30px; max-width: 50ch; font-size: 19px; line-height: 1.6; color: var(--body-c); }
.small { color: var(--dim); font-size: 15px; margin: 22px 0 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* a frame like the game's panels: coloured top line, ticks at the bottom corners */
.shot, .player, .map { position: relative; margin: 0; background: var(--deep); }
.shot::before, .player::before, .map::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: var(--hero); box-shadow: 0 0 16px var(--hero); }
.shot::after, .player::after, .map::after { content: ""; position: absolute; z-index: 2; inset: auto -1px -1px -1px; height: 14px; pointer-events: none;
  background: linear-gradient(var(--text), var(--text)) left bottom / 14px 2px no-repeat, linear-gradient(var(--text), var(--text)) left bottom / 2px 14px no-repeat,
              linear-gradient(var(--text), var(--text)) right bottom / 14px 2px no-repeat, linear-gradient(var(--text), var(--text)) right bottom / 2px 14px no-repeat; opacity: 0.6; }
.shot img, .map img { width: 100%; height: auto; }

.trailer h2 { margin-bottom: 30px; }
.player { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; aspect-ratio: 16 / 9; color: #fff; overflow: hidden; }
.player img, .player video { width: 100%; height: 100%; object-fit: cover; }
.player .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
                background: rgba(13, 10, 31, 0.55); border: 2px solid var(--hero); box-shadow: 0 0 40px -6px var(--hero); transition: transform 0.15s, background 0.15s; }
.player .play .i { width: 40px; height: 40px; margin-left: 6px; }
.player:hover .play { transform: translate(-50%, -50%) scale(1.06); background: var(--hero); color: var(--night); }
.player.playing { cursor: auto; }
.note { margin: 14px 0 0; color: var(--dim); font-size: 15px; }

.phases { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.phases li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.phases .t { grid-row: 1 / 4; font: 700 34px/1 var(--display); color: #fff; letter-spacing: 0.01em; }
.phases b { font: 700 22px/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pc, #fff); }
.phases .d { color: var(--body-c); font-size: 16px; line-height: 1.5; }
.phases i { height: 4px; margin-top: 8px; width: max(3%, calc(var(--d) * 1%)); background: var(--pc, #fff); box-shadow: 0 0 10px -2px var(--pc, #fff); }
.ph-freeze { --pc: #d9d3ff; }
.ph-push { --pc: #b98aff; }
.ph-plant { --pc: var(--bomb); }
.ph-fuse { --pc: var(--bomb); }
.ph-fuse i { background: repeating-linear-gradient(90deg, var(--bomb) 0 10px, transparent 10px 16px); box-shadow: none; }
.ph-defuse { --pc: var(--defuse); }

.race { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.race li { --f: calc(var(--v) / 7.5); display: grid; grid-template-columns: 110px minmax(0, 1fr) 92px; align-items: end; gap: 16px; }
.race .who { color: var(--body-c); font-size: 16px; padding-bottom: 2px; }
.race .lane { position: relative; height: 40px; container-type: inline-size; border-bottom: 1px dashed var(--line); }
.race .fill { position: absolute; left: 0; bottom: -1px; height: 6px; width: calc(var(--f) * 100%); background: rgba(239, 234, 255, 0.3); transform-origin: left; }
.race .runner { position: absolute; left: 0; bottom: 8px; width: 28px; height: 28px; color: #fff; transform: translateX(calc(var(--f) * (100cqw - 28px))); }
.race .runner .i { width: 28px; height: 28px; }
.race .val { text-align: right; font: 700 26px/1 var(--display); color: #fff; padding-bottom: 2px; }
.race .fast .fill { background: var(--hero); box-shadow: 0 0 14px -2px var(--hero); }
.race .fast .runner, .race .fast .val { color: var(--hero); }
.facts { list-style: none; margin: 0; padding: 0; color: var(--body-c); }
.facts li { position: relative; padding-left: 22px; margin: 8px 0; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--hero); }

.map-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: 34px; }
.map img { aspect-ratio: 16 / 9; object-fit: cover; }
.map figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 64px 24px 22px;
                  background: linear-gradient(180deg, rgba(13, 10, 31, 0), rgba(13, 10, 31, 0.92) 62%); color: var(--body-c); font-size: 16px; line-height: 1.5; }
.map b { display: block; color: #fff; font: 700 clamp(30px, 3vw, 42px)/1 var(--display); letter-spacing: 0.04em; margin-bottom: 6px; }

.guns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.guns li { background: var(--night); padding: 26px 22px 20px; display: grid; grid-template-rows: 84px auto auto; }
.guns img { width: 100%; height: 84px; object-fit: contain; object-position: left center; margin-bottom: 16px; }
.guns b { font: 700 22px/1.1 var(--display); letter-spacing: 0.05em; color: #fff; }
.guns span { color: var(--dim); font-size: 15px; }

.outro { padding-bottom: clamp(90px, 12vw, 170px); background: radial-gradient(60% 80% at 0% 100%, color-mix(in oklab, var(--hero) 14%, transparent), transparent 70%); }

/* Thai: lines break only between phrases (Thai has no spaces between words) */
.nw { white-space: nowrap; }
:lang(th) .band h2 { max-width: 22ch; font-size: clamp(42px, 5.4vw, 78px); line-height: 1.1; }
:lang(th) .pitch { max-width: 24ch; line-height: 1.25; }

/* --- footer ------------------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); color: var(--dim); font-size: 15px; }
.foot .in { max-width: calc(var(--wrap) + 40px); margin: 0 auto; padding: 34px 20px 44px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 44px; align-items: start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 600 17px/1.4 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.foot-links a { color: var(--text); text-decoration: none; }
.foot-links a:hover { color: var(--hero); }
.foot-meta { margin: 0; text-align: right; line-height: 1.7; }
.foot-meta a { color: var(--text); }

/* --- support / privacy / terms -------------------------------------------------------------------- */
.doc main { max-width: 800px; margin: 0 auto; padding: 56px 20px 100px; }
.doc main h1 { font: 700 clamp(48px, 7vw, 76px)/0.92 var(--display); text-transform: uppercase; margin: 10px 0 18px; letter-spacing: 0.01em; }
.doc main h2 { font: 700 32px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: #fff; margin: 48px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.doc main h3 { font: 700 21px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--hero); margin: 26px 0 6px; }
.doc main p, .doc main li { color: var(--body-c); }
.doc main ul { padding-left: 22px; }
.doc main li { margin: 5px 0; }
.updated { color: var(--dim); font-size: 15px; margin: 0 0 26px; }
.box { background: var(--deep); border: 1px solid var(--line); border-top: 2px solid var(--violet); padding: 16px 20px; margin: 20px 0; }
.box ul { margin: 6px 0; }
.muted { color: var(--dim); }
.doc .faq h3 { color: #fff; text-transform: none; font: 700 18px/1.4 var(--body); letter-spacing: 0; }


/* ===== motion ==================================================================================
   All of it is transform / opacity (cheap for the GPU), runs once or pauses off screen (site.js sets
   .live / .away), and none of it plays with reduced motion. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes hint { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.75); opacity: 0; } }

/* page load: the stage builds itself, like the game's onboarding opening */
.top { animation: drop-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.word { position: relative; display: inline-block; animation: word-in 1s cubic-bezier(0.65, 0, 0.2, 1) 0.1s backwards; }  /* (backwards: no clip left on the glow after) */
.word::after { content: ""; position: absolute; top: -8%; bottom: -8%; left: 0; width: 5px; transform: translateX(-100%); background: var(--hot);
  box-shadow: 0 0 22px 6px var(--hero); opacity: 0; pointer-events: none; animation: seam-x 1s cubic-bezier(0.65, 0, 0.2, 1) 0.1s both; }
@keyframes word-in { from { clip-path: inset(-12% 100% -12% 0); } to { clip-path: inset(-12% -4% -12% -4%); } }
@keyframes seam-x { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pitch { animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both; }
.stage-cta { animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s both; }
.skill { animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both; }
.bigname { animation: name-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
@keyframes name-in { from { opacity: 0; transform: translateX(-50%) scale(1.3); } }
.bigname.swap { animation: name-swap 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes name-swap { from { opacity: 0; transform: translateX(-50%) scale(0.85); } }
.floor { animation: floor-in 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
@keyframes floor-in { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0); } }
.ring { animation: ring-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }
@keyframes ring-in { from { opacity: 0; transform: translate(-50%, 50%) scale(0.3); } }
.arena::before, .arena::after { transform-origin: 50% 100%; animation: pillar-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
@keyframes pillar-in { from { transform: scaleY(0); opacity: 0; } }
.morph { animation: pop-in 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 1.5s both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.4); } }
.morph-ring { position: relative; }
.morph-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--hero); opacity: 0; pointer-events: none; animation: hint 2.4s ease-out 2.2s infinite; }
.morph.used .morph-ring::after { animation: none; }
.squad button { position: relative; overflow: hidden; animation: tile-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.squad button::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--c) 75%, transparent), transparent 80%); animation: flash 1s ease-out both; }
.squad button:nth-child(1), .squad button:nth-child(1)::before { animation-delay: 0.3s; }
.squad button:nth-child(2), .squad button:nth-child(2)::before { animation-delay: 0.42s; }
.squad button:nth-child(3), .squad button:nth-child(3)::before { animation-delay: 0.54s; }
.squad button:nth-child(4), .squad button:nth-child(4)::before { animation-delay: 0.66s; }
@keyframes tile-in { 0% { opacity: 0; transform: translateY(-28px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.squad button::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); }
.squad button:hover::after { animation: sheen-once 0.7s ease-out; }
@keyframes sheen-once { to { transform: translateX(400%); } }
.skill.swap .skill-icon, .skill.swap p { animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.skill.swap p { animation-delay: 0.06s; }

/* the stage at rest: the hero breathes, the spider idles, light runs over the floor */
.gl, .still { transform-origin: 50% 97%; animation: breathe 3.4s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scaleY(1.009); } }
.arena.spider .gl, .arena.spider .still { animation: idle-bot 0.34s ease-in-out infinite alternate; }
@keyframes idle-bot { to { transform: scale(1.01, 0.985); } }
.floor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; opacity: 0;
  background: linear-gradient(0deg, transparent, color-mix(in oklab, var(--hero) 60%, transparent) 50%, transparent); animation: floor-sweep 5.5s ease-in 2.4s infinite; }
@keyframes floor-sweep { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(-620%); opacity: 0; } }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: sheen 5s ease-in-out 2.6s infinite; }
@keyframes sheen { 0% { transform: translateX(-130%); } 26%, 100% { transform: translateX(330%); } }
/* the pointer tilts the stage a little (site.js sets --px / --py) */
.bigname { translate: calc(var(--px, 0) * -24px) calc(var(--py, 0) * -12px); }
.arena::before { translate: calc(var(--px, 0) * -40px) 0; }
.arena::after { translate: calc(var(--px, 0) * -40px) 0; }
.motes { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -6px); }
.gl, .still { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 4px); }

/* the ticker band */
.ticker { overflow: hidden; padding: 20px 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.ticker-track { display: flex; align-items: center; width: max-content; animation: tick 40s linear infinite; }
.ticker-track > * { margin-right: 40px; flex: none; }
.ticker .tw { font: 700 clamp(46px, 6.4vw, 92px)/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--hero) 75%, transparent); }
.ticker .tw.solid { color: var(--hero); -webkit-text-stroke: 0; text-shadow: 0 0 28px color-mix(in oklab, var(--hero) 45%, transparent); }
.ticker .i { width: 42px; height: 42px; color: var(--hero); opacity: 0.75; }
@keyframes tick { to { transform: translateX(-50%); } }

/* sections come in as they scroll up: headings are written by a white-hot seam, pictures scanned in */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--rd, 0s); }
.rv.in { opacity: 1; transform: none; }
.band h2.rv { opacity: 1; transform: none; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #fff 0 46%, var(--hot) 48%, var(--hero) 49.5%, transparent 51.5%); background-size: 220% 100%; background-position: 100% 0;
  transition: background-position 1.2s cubic-bezier(0.65, 0, 0.2, 1); }
.band h2.rv.in { background-position: 0 0; }
.shot.rv, .player.rv, .map.rv { opacity: 1; transform: none; overflow: hidden; }
/* a shutter with a white-hot edge slides down off the picture (the picture itself is never clipped,
   so the browser still sees it and loads it lazily) */
.scan { position: absolute; z-index: 2; inset: 0; background: var(--deep); border-top: 3px solid var(--hot); box-shadow: inset 0 14px 18px -12px var(--hero);
        pointer-events: none; transition: transform 1.15s cubic-bezier(0.7, 0, 0.2, 1) var(--rd, 0s); }
.in > .scan { transform: translateY(101%); }

/* the trailer and the maps drift slowly while on screen */
.player .play::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--hero); opacity: 0; animation: hint 2.2s ease-out infinite; }
.player img { animation: drift 26s ease-in-out infinite alternate; }
.map img { animation: drift 22s ease-in-out infinite alternate; }
.map + .map img { animation-direction: alternate-reverse; transform-origin: 70% 40%; }
@keyframes drift { to { transform: scale(1.08) translate(-1.5%, -1%); } }
.player, .map { overflow: hidden; }

/* a round plays itself through: freeze, push, plant, the fuse beeping, defuse */
.phases i { position: relative; overflow: hidden; background: color-mix(in oklab, var(--pc, #fff) 22%, transparent); box-shadow: none; }
.phases i::after { content: ""; position: absolute; inset: 0; background: var(--pc, #fff); box-shadow: 0 0 10px var(--pc, #fff); transform-origin: left; }
.ph-fuse i::after { background: repeating-linear-gradient(90deg, var(--bomb) 0 10px, transparent 10px 16px); box-shadow: none; }
.ph-fuse i { background: color-mix(in oklab, var(--bomb) 18%, transparent); }
.phases.sim li { opacity: 0.4; transition: opacity 0.35s; }
.phases.sim li.on, .phases.sim li.done { opacity: 1; }
.phases.sim i::after { transform: scaleX(0); }
.phases.sim li.done i::after { transform: scaleX(1); }
.phases.sim li.on i::after { animation: fill var(--pt, 1s) linear both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.phases.sim li.on .t { color: var(--pc); text-shadow: 0 0 20px var(--pc); }
.phases.sim li.ph-fuse.on { animation: beep 0.5s steps(1) infinite; }
.phases.sim li.ph-fuse.on b { text-shadow: 0 0 14px var(--bomb); }
@keyframes beep { 50% { opacity: 0.7; } }

/* the speed race: everyone runs for the same time, the spider bot gets furthest */
.race.go .fill { animation: race-fill 1.9s cubic-bezier(0.3, 0, 0.6, 1) both; }
.race.go .runner { animation: race-run 1.9s cubic-bezier(0.3, 0, 0.6, 1) both; }
.race.go .val { animation: pop-in 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.8s both; }
.race.go .fast .runner .i { animation: idle-bot 0.12s ease-in-out 9 alternate; }
@keyframes race-fill { from { transform: scaleX(0); } }
@keyframes race-run { from { transform: translateX(0); } }

/* guns: a bolt leaves the muzzle when you point at one */
.guns li { position: relative; overflow: hidden; }
.guns li::after { content: ""; position: absolute; left: 62%; top: 66px; width: 90px; height: 2px; background: linear-gradient(90deg, transparent, #fff); opacity: 0; pointer-events: none; }
.guns li:hover::after { animation: bolt 0.34s ease-out; }
.guns li:hover img { animation: recoil 0.26s ease-out; }
@keyframes bolt { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(300%); } }
@keyframes recoil { 30% { transform: translateX(-7px); } }

/* a neon ring where you tap, like the game's touch ripple */
.tap { position: fixed; z-index: 90; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid var(--hero);
  box-shadow: 0 0 14px var(--hero); pointer-events: none; animation: tap 0.5s ease-out forwards; }
@keyframes tap { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* off screen, the endless ones wait */
.stage.away *, .stage.away *::before, .stage.away *::after,
.ticker:not(.live) *, .player:not(.live) *, .player:not(.live) *::after, .map:not(.live) * { animation-play-state: paused !important; }

/* --- narrow screens ------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy arena" "cta arena" "skill arena" "squad squad"; grid-template-rows: 1fr auto auto auto; }
  .squad { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
  .arena { height: min(70svh, 720px); }
  .morph { right: -6%; }
}
@media (max-width: 760px) {
  .top .in { padding: 12px 16px; gap: 12px; }
  .brand span { display: none; }
  .nav { gap: 16px; font-size: 15px; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "arena" "squad" "skill" "cta"; grid-template-rows: auto; padding: 72px 16px 36px; min-height: 0; }
  .stage-cta { padding: 26px 0 0; }
  .stage::before { background:
    radial-gradient(70% 34% at 50% 50%, color-mix(in oklab, var(--hero) 26%, transparent), transparent 72%),
    radial-gradient(80% 30% at 0% 0%, rgba(158, 77, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #0b0919 0%, #17113a 62%, #0d0a1f 100%); }
  .stage-copy { padding-bottom: 0; }
  .word { margin-bottom: 12px; }
  .pitch { font-size: 22px; margin-bottom: 0; max-width: 24ch; }
  .btn, .soon { min-height: 50px; font-size: 19px; }
  .arena { justify-self: center; height: auto; width: min(66vw, 300px, 30svh); margin: 4px 0 0; }
  .bigname { font-size: 44vw; top: 4%; }
  .morph { right: -14%; bottom: 6%; }
  .morph-ring { width: 68px; height: 68px; }
  .morph-ring .i { width: 32px; height: 32px; }
  .morph-label { font-size: 14px; }
  .squad { margin-top: 30px; gap: 6px; }
  .squad button { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; padding: 6px 4px 8px; }
  .squad img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1; }
  .squad b { font-size: 19px; margin-top: 6px; }
  .squad .cls { font-size: 12px; gap: 4px; letter-spacing: 0.06em; }
  .squad .cls .i { width: 12px; height: 12px; }
  .squad button[aria-checked="true"] { box-shadow: inset 0 3px 0 var(--c); }
  .skill { margin-top: 18px; }
  .split, .split.rev { grid-template-columns: minmax(0, 1fr); }
  .split.rev .shot { order: 2; }
  .band h2 { font-size: clamp(42px, 12vw, 60px); }
  .lede { font-size: 17px; }
  .phases li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; }
  .phases .t { font-size: 28px; }
  .race li { grid-template-columns: 76px minmax(0, 1fr) 70px; gap: 10px; }
  .race .val { font-size: 22px; }
  .map-row { grid-template-columns: minmax(0, 1fr); }
  .map figcaption { position: static; padding: 16px 18px 18px; background: var(--deep); }
  .guns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guns li { padding: 18px 14px 16px; grid-template-rows: 60px auto auto; }
  .guns img { height: 60px; margin-bottom: 12px; }
  .guns li::after { top: 48px; }
  .ticker { padding: 14px 0; }
  .ticker .i { width: 30px; height: 30px; }
  .guns b { font-size: 18px; }
  .player .play { width: 84px; height: 84px; }
  .foot .in { grid-template-columns: minmax(0, 1fr); }
  .foot-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :root { transition: none; }
  .js .still { opacity: 1; }
}