/* ═══════════════════════════════════════════════════════════════════════════
   LAST STOP — HUD, screens and touch controls
   Dark tactical HUD in JetBrains Mono. Amber primary, cyan accent, blood-red
   danger, off-white text. Thin 1px lines, letter-spaced uppercase labels.
   Animation is class / custom-property driven (see src/ui/hud.js).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --amber: #ffb347; --amber-hi: #ffd08a; --amber-rgb: 255, 179, 71;
  --cyan: #5ee7ff; --cyan-rgb: 94, 231, 255;
  --red: #ff2f3a; --red-rgb: 255, 47, 58;
  --text: #e8e6e1; --muted: #8a8f8a; --bg: #05070a; --bg-rgb: 5, 7, 10;
  --line: rgba(232, 230, 225, 0.16); --line-strong: rgba(232, 230, 225, 0.34);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'Chakra Petch', 'JetBrains Mono', ui-monospace, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --pad-x: 22px; --pad-y: 18px;
  --edge-t: calc(var(--pad-y) + var(--sat)); --edge-r: calc(var(--pad-x) + var(--sar));
  --edge-b: calc(var(--pad-y) + var(--sab)); --edge-l: calc(var(--pad-x) + var(--sal));
  --dmg: 0; --low: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; background: #000; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--bg); color: var(--text);
  font: 400 13px/1.4 var(--mono);
  overscroll-behavior: none; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }

#game { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
#game canvas { display: block; width: 100%; height: 100%; }

/* ─── Shared type ─────────────────────────────────────────────────────────── */
.lbl { display: block; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.big {
  font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 18px rgba(0, 0, 0, .55);
}

/* ═══ HUD ═══════════════════════════════════════════════════════════════════ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; transition: opacity .3s ease; }
#hud.off { opacity: 0; visibility: hidden; }
#hud > * { position: absolute; }

.hud-frame {
  inset: calc(var(--edge-t) - 8px) calc(var(--edge-r) - 8px) calc(var(--edge-b) - 8px) calc(var(--edge-l) - 8px);
  opacity: .6;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left top / 18px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left top / 1px 18px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top / 18px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top / 1px 18px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 1px 18px no-repeat;
}

/* top-left ident */
#hud-ident { left: var(--edge-l); top: var(--edge-t); display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .24em; color: var(--muted); }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: recBlink 1.6s steps(2, jump-none) infinite; }
@keyframes recBlink { 50% { opacity: .2; } }
body.debug #hud-ident { display: none; }

/* health — bottom left */
#hud-health { left: var(--edge-l); bottom: var(--edge-b); width: 232px; }
.health-row { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 7px; }
.health-row .unit { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--amber); }
#health-bar { --hp: 1; position: relative; height: 7px; border: 1px solid var(--line-strong); background: rgba(var(--bg-rgb), .55); }
#health-bar .fill {
  position: absolute; inset: 1px; transform-origin: 0 50%; transform: scaleX(var(--hp));
  background: linear-gradient(90deg, var(--amber), var(--amber-hi)); box-shadow: 0 0 10px rgba(var(--amber-rgb), .45);
  transition: transform .18s ease-out;
}
#health-bar .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(var(--bg-rgb), .9) calc(10% - 1px) 10%); }
#hud-health.critical #health-num, #hud-health.critical .unit { color: var(--red); }
#hud-health.critical .fill { background: var(--red); box-shadow: 0 0 12px rgba(var(--red-rgb), .6); animation: hardBlink .7s steps(2, jump-none) infinite; }
@keyframes hardBlink { 50% { opacity: .35; } }

/* weapon + ammo — bottom right */
#hud-weapon { right: var(--edge-r); bottom: var(--edge-b); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
#weapon-icon { color: var(--amber); line-height: 0; margin-bottom: 5px; filter: drop-shadow(0 0 6px rgba(var(--amber-rgb), .35)); }
#weapon-icon svg { display: block; width: 120px; height: 45px; overflow: visible; }
#weapon-icon .d { fill: rgba(0, 0, 0, .6); }
#weapon-name { font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--amber); }
.ammo-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 2px; }
.ammo-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; padding-bottom: 3px; }
.ammo-size-row { font-size: 15px; font-weight: 500; color: var(--text); }
.ammo-inf { font-size: 10px; letter-spacing: .2em; color: var(--muted); }
#hud-weapon.low #ammo-mag { color: var(--amber); }
#hud-weapon.empty #ammo-mag { color: var(--red); animation: hardBlink .5s steps(2, jump-none) infinite; }
#hud-weapon.swap #weapon-icon, #hud-weapon.swap #weapon-name { animation: iconSwap .3s ease-out; }
@keyframes iconSwap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* wave / kills — top right */
#hud-stats { right: var(--edge-r); top: var(--edge-t); display: flex; gap: 20px; align-items: flex-start; transition: transform .35s ease; }
.stat { text-align: right; }
.stat-num { display: block; margin-top: 3px; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 14px rgba(0, 0, 0, .5); }
#wave-num { color: var(--amber); }
.stat-sep { width: 1px; align-self: stretch; background: var(--line-strong); }
#train-warning.on ~ #hud-stats { transform: translateY(36px); }

/* crosshair: four thin lines that spread with --spread, plus a centre dot.
   --ads (0..1, written by hud.setAds) fades it out — the weapon's own red dot / bead takes over. */
#crosshair { --spread: 5px; left: 50%; top: 50%; width: 0; height: 0; opacity: calc(1 - var(--ads, 0)); }
#crosshair i { position: absolute; left: -1px; top: -5px; width: 2px; height: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 4px rgba(0, 0, 0, .5); transition: transform .08s ease-out; }
#crosshair .ch-t { transform: translateY(calc(-1 * var(--spread) - 5px)); }
#crosshair .ch-b { transform: translateY(calc(var(--spread) + 5px)); }
#crosshair .ch-l { transform: rotate(-90deg) translateY(calc(-1 * var(--spread) - 5px)); }
#crosshair .ch-r { transform: rotate(90deg) translateY(calc(-1 * var(--spread) - 5px)); }
#crosshair .ch-dot { left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; }

/* hit marker: four diagonal ticks (white / red head / bigger red kill) */
#hitmarker { --hm-len: 9px; --hm-off: 15px; --hm-col: #fff; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i {
  position: absolute; left: -1px; top: calc(-1 * var(--hm-off)); width: 2px; height: var(--hm-len);
  background: var(--hm-col); transform-origin: 1px var(--hm-off); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
#hitmarker i:nth-child(1) { transform: rotate(45deg); }
#hitmarker i:nth-child(2) { transform: rotate(135deg); }
#hitmarker i:nth-child(3) { transform: rotate(225deg); }
#hitmarker i:nth-child(4) { transform: rotate(315deg); }
#hitmarker::after { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--red); opacity: 0; }
#hitmarker.hm-hit { animation: hmPop .24s ease-out; }
#hitmarker.hm-head { --hm-col: var(--red); animation: hmPop .32s ease-out; }
#hitmarker.hm-kill { --hm-col: var(--red); --hm-len: 13px; --hm-off: 21px; animation: hmPop .5s ease-out; }
#hitmarker.hm-kill::after { animation: ringPop .5s ease-out; }
@keyframes hmPop { 0% { opacity: 1; transform: scale(1.4); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ringPop { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }

/* damage vignette + directional arcs */
#damage-vignette { inset: 0; opacity: var(--dmg); background: radial-gradient(ellipse at center, rgba(var(--red-rgb), 0) 42%, rgba(var(--red-rgb), .28) 70%, rgba(var(--red-rgb), .72) 100%); }
#damage-arcs { --arc-d: 280px; left: 50%; top: 50%; width: 0; height: 0; }
#damage-arcs i {
  --rot: 0deg; position: absolute; left: calc(var(--arc-d) / -2); top: calc(var(--arc-d) / -2); width: var(--arc-d); height: var(--arc-d); opacity: 0;
  transform: rotate(var(--rot));
  background: conic-gradient(from -30deg, rgba(var(--red-rgb), 0) 0deg, var(--red) 12deg 48deg, rgba(var(--red-rgb), 0) 60deg, transparent 60deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(var(--arc-d) / 2 - 20px), #000 calc(var(--arc-d) / 2 - 18px) calc(var(--arc-d) / 2 - 4px), transparent calc(var(--arc-d) / 2 - 2px));
  mask: radial-gradient(circle, transparent 0 calc(var(--arc-d) / 2 - 20px), #000 calc(var(--arc-d) / 2 - 18px) calc(var(--arc-d) / 2 - 4px), transparent calc(var(--arc-d) / 2 - 2px));
  filter: drop-shadow(0 0 3px rgba(var(--red-rgb), .7));
}
body:has(.screen.on) #crosshair, body:has(.screen.on) #hitmarker, body:has(.screen.on) #damage-arcs { visibility: hidden; }
#damage-arcs i.on { animation: arcFade 1s ease-out forwards; }
@keyframes arcFade { 0% { opacity: 1; transform: rotate(var(--rot)) scale(1.08); } 25% { opacity: 1; transform: rotate(var(--rot)) scale(1); } 100% { opacity: 0; transform: rotate(var(--rot)) scale(1); } }

/* low-health pulse: red edge glow keyed to --low */
#low-health { inset: 0; opacity: var(--low); display: none; }
#hud.low #low-health { display: block; }
#low-health::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--red-rgb), 0) 52%, rgba(var(--red-rgb), .55) 88%, rgba(var(--red-rgb), .8) 100%); animation: lowPulse 1.1s ease-in-out infinite; }
@keyframes lowPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* centre banner */
#banner-wrap { left: 0; right: 0; top: 24%; text-align: center; padding: 0 var(--edge-l); }
#banner {
  font-family: var(--display); font-weight: 700; font-size: clamp(34px, 6vw, 74px); line-height: 1.05; letter-spacing: .2em; text-indent: .2em;
  color: var(--amber); opacity: 0; transform: scale(1.06); transition: opacity .35s ease, transform .35s ease;
  text-shadow: -2px 0 rgba(var(--cyan-rgb), .6), 2px 0 rgba(var(--red-rgb), .6), 0 0 34px rgba(var(--amber-rgb), .35), 0 2px 0 rgba(0, 0, 0, .6);
}
#banner-sub { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 0 rgba(0, 0, 0, .7); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
#banner-wrap.show #banner { opacity: 1; transform: scale(1); animation: bannerIn .55s cubic-bezier(.2, .8, .2, 1) both; }
#banner-wrap.show #banner-sub { opacity: 1; transform: none; transition-delay: .12s; }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(1.18); letter-spacing: .5em; } 100% { opacity: 1; transform: scale(1); letter-spacing: .2em; } }

/* train warning: striped hazard bar */
#train-warning {
  left: 0; right: 0; top: 0; height: calc(30px + var(--sat)); padding-top: var(--sat);
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, rgba(var(--amber-rgb), .9) 0 14px, rgba(var(--bg-rgb), .92) 14px 28px);
  border-bottom: 1px solid rgba(var(--amber-rgb), .6);
  transform: translateY(-100%); transition: transform .35s ease;
}
#train-warning.on { transform: translateY(0); }
#train-warning span { background: rgba(var(--bg-rgb), .94); color: var(--amber); padding: 3px 20px; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-indent: .32em; animation: hardBlink 1s steps(2, jump-none) infinite; }

/* debug readout */
#debug { left: var(--edge-l); top: var(--edge-t); margin: 0; padding: 6px 9px; max-width: 42vw; display: none; white-space: pre; font: 11px/1.35 var(--mono); color: var(--cyan); background: rgba(var(--bg-rgb), .6); border-left: 1px solid var(--cyan); }
body.debug #debug { display: block; }

/* ═══ Touch UI ══════════════════════════════════════════════════════════════ */
#touch-ui { display: none; position: fixed; inset: 0; z-index: 20; pointer-events: none; }
body.is-touch #touch-ui { display: block; }
body:has(.screen.on) #touch-ui { visibility: hidden; }
#joystick-zone, #look-zone { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
#joystick-zone { left: 0; }
#look-zone { right: 0; }
/* resting hint where the floating joystick usually lands; fades while a thumb is down */
#joystick-zone::before {
  content: 'MOVE'; position: absolute; left: calc(var(--sal) + 100px); top: calc(100% - var(--sab) - 100px); width: 148px; height: 148px; margin: -74px 0 0 -74px;
  display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(232, 230, 225, .3);
  font: 700 10px var(--mono); letter-spacing: .3em; text-indent: .3em; color: rgba(232, 230, 225, .38);
  opacity: 1; transition: opacity .2s ease; pointer-events: none;
}
#joystick-zone.active::before { opacity: 0; }
#look-zone::before {
  content: 'DRAG TO LOOK'; position: absolute; left: 50%; top: calc(100% - var(--sab) - 30px); transform: translateX(-50%);
  font: 700 10px var(--mono); letter-spacing: .3em; text-indent: .3em; color: rgba(232, 230, 225, .28); white-space: nowrap; pointer-events: none;
}
#joystick-base {
  /* 148 px = 2 × (48 px knob travel + 26 px knob radius): the knob stays inside the ring at full deflection */
  position: absolute; left: calc(var(--sal) + 100px); top: calc(100% - var(--sab) - 100px); width: 148px; height: 148px; margin: -74px 0 0 -74px;
  border-radius: 50%; border: 1px solid rgba(232, 230, 225, .38); background: radial-gradient(circle, rgba(232, 230, 225, .05) 55%, rgba(232, 230, 225, .1) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb), .5), 0 0 0 1px rgba(var(--bg-rgb), .4); opacity: .55; transition: opacity .2s ease;
}
#joystick-base::before { content: ''; position: absolute; inset: 26px; border-radius: 50%; border: 1px dashed rgba(232, 230, 225, .22); }
#joystick-base.active { opacity: 1; }
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(var(--amber-rgb), .55), rgba(var(--amber-rgb), .25) 70%); border: 1px solid rgba(var(--amber-rgb), .8);
  box-shadow: 0 0 14px rgba(var(--amber-rgb), .35), inset 0 0 0 1px rgba(var(--bg-rgb), .4); will-change: transform;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#joystick-knob::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--amber); }

/* sprint: full stick extent. controls.js toggles `.sprint` on the base — the knob goes cyan and a label appears. */
#joystick-base::after {
  content: 'SPRINT'; position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
  font: 700 9px/1 var(--mono); letter-spacing: .3em; text-indent: .3em; color: var(--cyan); white-space: nowrap;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
#joystick-base.sprint { border-color: rgba(var(--cyan-rgb), .65); }
#joystick-base.sprint::after { opacity: 1; text-shadow: 0 0 10px rgba(var(--cyan-rgb), .8); }
#joystick-base.sprint #joystick-knob {
  border-color: rgba(var(--cyan-rgb), .9);
  background: radial-gradient(circle at 35% 35%, rgba(var(--cyan-rgb), .6), rgba(var(--cyan-rgb), .28) 70%);
  box-shadow: 0 0 24px rgba(var(--cyan-rgb), .6), inset 0 0 0 1px rgba(var(--bg-rgb), .4);
}
#joystick-base.sprint #joystick-knob::after { background: var(--cyan); }

.touch-buttons { position: absolute; inset: 0; pointer-events: none; }
.tbtn {
  position: absolute; pointer-events: auto; touch-action: none; display: grid; place-items: center; padding: 0; margin: 0; border-radius: 50%;
  border: 1px solid rgba(232, 230, 225, .42); background: radial-gradient(circle, rgba(var(--bg-rgb), .35), rgba(var(--bg-rgb), .6)); color: var(--text);
  font: 700 11px/1 var(--mono); letter-spacing: .18em; text-indent: .18em; box-shadow: 0 0 0 1px rgba(var(--bg-rgb), .5), inset 0 0 0 3px rgba(var(--bg-rgb), .25);
  transition: transform .08s ease, background-color .08s ease; -webkit-user-select: none; user-select: none;
}
.tbtn-sm { width: 66px; height: 66px; }
.tbtn-fire { width: 96px; height: 96px; right: calc(var(--sar) + 26px); bottom: calc(var(--sab) + 30px); border-color: rgba(var(--amber-rgb), .85); color: var(--amber); font-size: 13px; box-shadow: 0 0 22px rgba(var(--amber-rgb), .22), inset 0 0 0 4px rgba(var(--bg-rgb), .3); }
.tbtn-fire::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(var(--amber-rgb), .45); transition: border-color .08s ease, border-style .08s ease; }
/* One right-hand column so nothing sits in FIRE's thumb arc: FIRE (bottom) → SWAP → RELOAD, ~10px apart.
   RELOAD used to sit 16px to the left of FIRE at the same height, which cost mags mid-fight. */
#btn-swap { right: calc(var(--sar) + 41px); bottom: calc(var(--sab) + 142px); }
#btn-reload { right: calc(var(--sar) + 41px); bottom: calc(var(--sab) + 218px); }
.tbtn:active, .tbtn.pressed { transform: scale(.92); background: rgba(232, 230, 225, .22); }
.tbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan); }
/* held FIRE: filled amber disc, solid inner ring, dark glyph — unmistakable against the tap state */
.tbtn-fire:active, .tbtn-fire.pressed {
  transform: scale(.95); color: var(--bg); border-color: var(--amber-hi);
  background: radial-gradient(circle, rgba(var(--amber-rgb), .95), rgba(var(--amber-rgb), .62));
  box-shadow: 0 0 44px rgba(var(--amber-rgb), .7), 0 0 0 2px rgba(var(--amber-rgb), .45), inset 0 0 0 2px rgba(var(--bg-rgb), .2);
}
.tbtn-fire:active::before, .tbtn-fire.pressed::before { border-style: solid; border-color: rgba(var(--bg-rgb), .55); }

/* ADS — diagonally up-left of FIRE: same thumb, clear of FIRE's side-to-side arc. Toggles, so it holds a
   persistent `.active` state (cyan) rather than the momentary `.pressed` flash the other buttons use. */
.tbtn-aim { right: calc(var(--sar) + 136px); bottom: calc(var(--sab) + 128px); border-color: rgba(var(--cyan-rgb), .55); color: var(--cyan); }
.tbtn-aim::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; border: 1px solid rgba(var(--cyan-rgb), .35); }
.tbtn-aim.active {
  color: var(--bg); border-color: var(--cyan);
  background: radial-gradient(circle, rgba(var(--cyan-rgb), .95), rgba(var(--cyan-rgb), .6));
  box-shadow: 0 0 30px rgba(var(--cyan-rgb), .55), inset 0 0 0 2px rgba(var(--bg-rgb), .2);
}
.tbtn-aim.active::before { border-color: rgba(var(--bg-rgb), .5); }

/* pause — top-right, out of both thumb zones. The weapon block shifts left to clear it (see touch layout). */
.tbtn-pause {
  width: 44px; height: 44px; right: var(--edge-r); top: var(--edge-t);
  grid-auto-flow: column; gap: 4px; border-color: var(--line-strong); background: rgba(var(--bg-rgb), .55);
  transition: transform .35s ease, background-color .08s ease, border-color .12s ease;
}
.tbtn-pause i { display: block; width: 3px; height: 14px; background: var(--text); box-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.tbtn-pause:active, .tbtn-pause.pressed { transform: scale(.92); }
/* the hazard bar pushes the whole top row down 30px */
body.train-warn .tbtn-pause { transform: translateY(30px); }
body.train-warn .tbtn-pause:active, body.train-warn .tbtn-pause.pressed { transform: translateY(30px) scale(.92); }

#rotate-hint { display: none; position: absolute; inset: 0; z-index: 30; pointer-events: auto; place-items: center; text-align: center; background: var(--bg); color: var(--text); }
#rotate-hint svg { width: 72px; height: 72px; color: var(--amber); animation: rotateHint 2.4s ease-in-out infinite; }
#rotate-hint .rh-title { margin-top: 20px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .3em; text-indent: .3em; }
#rotate-hint .rh-sub { margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@keyframes rotateHint { 0%, 20% { transform: rotate(0deg); } 55%, 75% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (orientation: portrait) { body.is-touch #rotate-hint { display: grid; } }

/* ═══ Screens ═══════════════════════════════════════════════════════════════ */
.screen {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; overflow: hidden;
  padding: var(--edge-t) var(--edge-r) var(--edge-b) var(--edge-l);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease; }
.screen > * { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 500; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--muted); }
.eyebrow i { display: block; width: 56px; height: 1px; background: var(--line-strong); }

.title {
  position: relative; font-family: var(--display); font-weight: 700; line-height: .95; letter-spacing: .12em; text-indent: .12em; color: var(--text); text-align: center;
  text-shadow: 0 0 44px rgba(var(--amber-rgb), .22);
}
.title::before, .title::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; mix-blend-mode: screen; text-shadow: none; }
.title::before { color: var(--cyan); transform: translateX(-3px); opacity: .55; animation: splitA 7s ease-in-out infinite; }
.title::after { color: var(--red); transform: translateX(3px); opacity: .55; animation: splitB 7s ease-in-out infinite; }
@keyframes splitA { 0%, 91%, 100% { transform: translateX(-3px); } 93% { transform: translate(-7px, 1px); } 95% { transform: translateX(-2px); } }
@keyframes splitB { 0%, 91%, 100% { transform: translateX(3px); } 93% { transform: translate(6px, -1px); } 96% { transform: translateX(4px); } }
.title-xl { font-size: clamp(54px, 9.4vw, 128px); animation: signFlicker 9s linear infinite; }
.title-sm { font-size: clamp(22px, 3.4vw, 42px); letter-spacing: .12em; text-indent: .12em; text-wrap: balance; }
@keyframes signFlicker { 0%, 96.5%, 97.6%, 98.4%, 100% { opacity: 1; } 97% { opacity: .55; } 98% { opacity: .8; } }

.btn-primary {
  position: relative; border: 0; padding: 17px 48px; min-width: 300px;
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .32em; text-indent: .32em; color: var(--bg);
  background: linear-gradient(180deg, var(--amber-hi), var(--amber)); box-shadow: 0 0 34px rgba(var(--amber-rgb), .35), 0 0 0 1px rgba(var(--amber-rgb), .6);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0 48px rgba(var(--amber-rgb), .5), 0 0 0 1px rgba(var(--amber-rgb), .8); }
.btn-primary:active { transform: translateY(1px) scale(.99); filter: brightness(.96); }
.btn-primary:disabled { background: rgba(var(--bg-rgb), .5); color: var(--muted); box-shadow: 0 0 0 1px var(--line-strong); cursor: default; filter: none; transform: none; }
.btn-primary:disabled::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(232, 230, 225, .035) 8px 16px); }

/* outlined secondary: same notched silhouette, one weight quieter than the amber primary */
.btn-secondary {
  position: relative; padding: 12px 24px; border: 1px solid var(--line-strong); background: rgba(var(--bg-rgb), .55); color: var(--text);
  font: 700 12px/1 var(--mono); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.btn-secondary:hover { color: var(--amber); border-color: rgba(var(--amber-rgb), .75); background: rgba(var(--amber-rgb), .1); }
.btn-secondary:active { transform: translateY(1px); }
/* clip-path would eat an outline, so the focus ring is drawn inside the shape */
.btn-primary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(var(--bg-rgb), .9), 0 0 44px rgba(var(--amber-rgb), .6), 0 0 0 1px var(--amber-hi); }
.btn-secondary:focus-visible { outline: none; color: var(--amber); border-color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); }

/* start screen */
#screen-start {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(var(--amber-rgb), .13), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(var(--cyan-rgb), .07), transparent 70%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .9), rgba(var(--bg-rgb), .96));
  touch-action: pan-y; overflow-y: auto; overscroll-behavior: none;   /* `none`, not `contain`: iOS still rubber-bands on contain */
}
#screen-start::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#screen-start::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.start-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 22px); width: min(880px, 100%); }
.start-inner .subtitle { font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .06em; color: var(--text); opacity: .85; text-align: center; }
.rule { width: min(520px, 70%); height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: .7; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; padding: 16px 26px; border: 1px solid var(--line); background: rgba(var(--bg-rgb), .45); box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb), .6); width: min(560px, 100%); }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.lg-key { display: inline-flex; gap: 4px; }
.lg-key b { display: inline-block; min-width: 22px; padding: 3px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-align: center; color: var(--amber); background: rgba(var(--bg-rgb), .6); }
.lg-act { color: var(--muted); }

.console { display: flex; align-items: flex-end; gap: 28px; width: min(560px, 100%); }
.quality { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; align-items: stretch; }
/* shown by hud.js only when the picked tier differs from the one this page booted with */
.btn-apply { margin-top: 2px; padding: 8px 10px; font-size: 10px; letter-spacing: .16em; text-indent: .16em; color: var(--amber); border-color: rgba(var(--amber-rgb), .55); }
.btn-apply[hidden] { display: none; }
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1px solid var(--amber); border-bottom: 1px solid var(--amber); transform: rotate(45deg); pointer-events: none; }
#quality-select { appearance: none; -webkit-appearance: none; width: 150px; padding: 8px 32px 8px 12px; border: 1px solid var(--line-strong); background: rgba(var(--bg-rgb), .6); color: var(--text); font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#quality-select:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }
#quality-select option { background: #0b0f14; color: var(--text); }
.loading { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.loading-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
#loading-pct { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
#loading-bar { --p: 0; position: relative; height: 3px; background: var(--line); overflow: visible; }
#loading-bar i { position: absolute; left: 0; top: -1px; height: 5px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--amber), var(--amber-hi)); box-shadow: 0 0 12px rgba(var(--amber-rgb), .7); transition: transform .25s ease-out; }
#screen-start.ready #loading-bar i { background: var(--cyan); box-shadow: 0 0 12px rgba(var(--cyan-rgb), .7); }
#screen-start.ready #loading-pct { color: var(--cyan); }
.start-foot { display: flex; justify-content: space-between; width: min(560px, 100%); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: .8; }

.rails { position: absolute; left: 0; right: 0; bottom: calc(var(--edge-b) + 46px); height: 26px; z-index: 1; opacity: .16; pointer-events: none; background:
  linear-gradient(var(--text), var(--text)) 0 4px / 100% 1px no-repeat,
  linear-gradient(var(--text), var(--text)) 0 21px / 100% 1px no-repeat,
  repeating-linear-gradient(90deg, transparent 0 22px, var(--text) 22px 25px, transparent 25px 48px) 0 0 / 100% 100% no-repeat; }

/* ─── Pause menu ──────────────────────────────────────────────────────────────
   Overlay click resumes; the panel stops propagation (hud.js) so the slider is safe. */
#screen-pause { background: rgba(var(--bg-rgb), .78); }
/* the live HUD stays readable behind the menu but stops competing with it */
body:has(#screen-pause.on) #hud { opacity: .3; }
#screen-pause::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); pointer-events: none; }
.pause-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(420px, 100%); }
.pause-panel {
  width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border: 1px solid var(--line); background: rgba(var(--bg-rgb), .74);
  box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb), .6), 0 22px 60px rgba(0, 0, 0, .55);
}
.pause-panel .btn-primary { width: 100%; min-width: 0; padding: 14px 20px; font-size: 18px; }
.pause-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pause-row .btn-secondary { width: 100%; padding: 12px 8px; letter-spacing: .18em; text-indent: .18em; }

.sens { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.sens-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; }
#sens-val { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
#sens-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
#sens-range::-webkit-slider-runnable-track { height: 3px; background: var(--line-strong); box-shadow: 0 0 0 1px rgba(var(--bg-rgb), .6); }
#sens-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--amber-hi), var(--amber) 72%); border: 1px solid rgba(var(--bg-rgb), .7);
  box-shadow: 0 0 16px rgba(var(--amber-rgb), .55);
}
#sens-range::-moz-range-track { height: 3px; background: var(--line-strong); }
#sens-range::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--amber); border: 1px solid rgba(var(--bg-rgb), .7);
  box-shadow: 0 0 16px rgba(var(--amber-rgb), .55);
}
#sens-range:focus { outline: none; }
#sens-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--cyan), 0 0 16px rgba(var(--cyan-rgb), .5); }
#sens-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--cyan); }

.hint { font-size: 12px; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--muted); text-align: center; animation: hintPulse 2.2s ease-in-out infinite; }
@keyframes hintPulse { 50% { opacity: .45; } }

/* SIGNAL LOST (WebGL context loss): only the RELOAD button remains */
.lost-only { display: none; }
#screen-pause.lost #btn-resume, #screen-pause.lost .pause-row, #screen-pause.lost .sens { display: none; }
#screen-pause.lost .lost-only { display: block; }
#screen-pause.lost .title { color: var(--red); }
#screen-pause.lost .hint { animation: none; opacity: 1; }

/* game over */
#screen-gameover { background: radial-gradient(60% 50% at 50% 30%, rgba(var(--red-rgb), .12), transparent 70%), rgba(var(--bg-rgb), .93); }
#screen-gameover::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .4; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.over-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6vh, 26px); width: min(1040px, 100%); }
#screen-gameover .title { color: var(--amber); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; width: min(640px, 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 0; }
.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateY(6px); animation: rowIn .4s ease-out forwards; animation-delay: calc(.12s + var(--i, 0) * .06s); }
.st-row:nth-last-child(-n + 2) { border-bottom: 0; }
.st-k { white-space: nowrap; }
.st-v { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--text); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-row.hi .st-v { color: var(--amber); }
.st-tag { display: inline-block; margin-left: 8px; padding: 2px 6px; font: 700 9px var(--mono); letter-spacing: .2em; color: var(--bg); background: var(--cyan); vertical-align: middle; }
@keyframes rowIn { to { opacity: 1; transform: none; } }
.over-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.over-actions .btn-secondary { min-width: 200px; }

/* ═══ Touch layout: readouts go to the top edge, thumbs own the bottom ═══════ */
body.is-touch #hud-ident { display: none; }
body.is-touch #hud-health { left: var(--edge-l); top: var(--edge-t); bottom: auto; width: 196px; transition: transform .35s ease; }
/* the 44px pause button owns the top-right corner, so the weapon block steps left to clear it */
body.is-touch #hud-weapon { right: calc(var(--edge-r) + 56px); top: var(--edge-t); bottom: auto; transition: transform .35s ease; }
body.is-touch #hud-stats { left: 50%; right: auto; top: var(--edge-t); transform: translateX(-50%); }
body.is-touch #train-warning.on ~ #hud-stats { transform: translate(-50%, 36px); }
body.is-touch #train-warning.on ~ #hud-health, body.is-touch #train-warning.on ~ #hud-weapon { transform: translateY(30px); }
/* the touch legend carries longer phrases than the desktop one, so it gets a wider grid */
body.is-touch .legend { width: min(720px, 100%); gap: 6px 30px; }
body.is-touch .lg-row { letter-spacing: .12em; }
body.is-touch .lg-key b { white-space: nowrap; }
body.is-touch .lg-act { text-align: right; }
body.is-touch #damage-arcs { --arc-d: 220px; }
body.is-touch .big { font-size: 36px; }
body.is-touch .stat-num { font-size: 26px; }
body.is-touch #weapon-icon svg { width: 92px; height: 35px; }
body.is-touch #banner-wrap { top: 30%; }

/* short / small viewports (phones in landscape) */
@media (max-height: 520px) {
  :root { --pad-y: 12px; --pad-x: 16px; }
  .start-inner { gap: clamp(6px, 1.6vh, 12px); }
  .title-xl { font-size: clamp(40px, 9vw, 72px); }
  .title-sm { font-size: clamp(18px, 3.4vw, 30px); }
  .legend { gap: 4px 28px; padding: 10px 18px; }
  .lg-row { font-size: 10px; }
  .btn-primary { padding: 12px 36px; font-size: 16px; min-width: 240px; }
  .rails, .start-foot { display: none; }
  .st-row { padding: 5px 4px; }
  .st-v { font-size: 16px; }
  #banner { font-size: clamp(26px, 6vw, 48px); }
  #damage-arcs { --arc-d: 180px; }
  /* pause menu must still fit 667x375 whole */
  .pause-inner { gap: 10px; width: min(380px, 100%); }
  .pause-panel { padding: 13px 15px; gap: 10px; }
  .pause-panel .btn-primary { padding: 10px 16px; font-size: 15px; }
  .pause-row { gap: 10px; }
  .pause-row .btn-secondary { padding: 9px 6px; font-size: 10px; }
  .sens { padding-top: 9px; }
  #sens-val { font-size: 15px; }
  .hint { font-size: 10px; }
  .over-actions { gap: 8px; }
  .btn-secondary { padding: 9px 18px; font-size: 11px; }
  /* thumb column shrinks with the viewport (still ≥ 44px targets) and keeps ~20px clear of the
     weapon readout even when the hazard bar pushes the top row down 30px */
  .tbtn-sm { width: 54px; height: 54px; font-size: 9px; }
  .tbtn-fire { width: 82px; height: 82px; right: calc(var(--sar) + 22px); bottom: calc(var(--sab) + 22px); }
  #btn-swap { right: calc(var(--sar) + 36px); bottom: calc(var(--sab) + 112px); }
  #btn-reload { right: calc(var(--sar) + 36px); bottom: calc(var(--sab) + 174px); }
  .tbtn-aim { right: calc(var(--sar) + 116px); bottom: calc(var(--sab) + 106px); }
  .tbtn-aim::before { inset: 10px; }
  body.is-touch .big { font-size: 30px; }
  body.is-touch .stat-num { font-size: 22px; }
  body.is-touch #weapon-icon svg { width: 76px; height: 29px; }
  body.is-touch #hud-health { width: 160px; }
}
@media (max-width: 600px) {
  .legend, .console, .stats { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .console { gap: 14px; }
  .rails, .start-foot { display: none; }
  #hud-health { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .title::before, .title::after, .title-xl, .rec-dot { animation: none; }
  /* every remaining looping animation: kill the loop, keep the element at its readable extreme */
  #low-health::before,
  #hud-health.critical .fill,
  #hud-weapon.empty #ammo-mag,
  #train-warning span,
  .hint { animation: none; opacity: 1; }
  #rotate-hint svg { animation: none; transform: none; }
  #joystick-base::after { transition: none; }
  .st-row { animation: none; opacity: 1; transform: none; }
}