/* ─────────────────────────────────────────────────────────────
   TYPE-SAFE — sci-fi cockpit HUD typing defense game
   ───────────────────────────────────────────────────────────── */

:root {
  --void-0: #02060d;
  --void-1: #050b18;
  --void-2: #0a1426;
  --void-3: #0f1d36;

  --hud:       #4ee2ff;
  --hud-soft:  #7df0ff;
  --hud-dim:   rgba(78, 226, 255, 0.55);
  --hud-faint: rgba(78, 226, 255, 0.18);
  --hud-line:  rgba(78, 226, 255, 0.32);
  --hud-grid:  rgba(78, 226, 255, 0.09);

  --teal: #1fb6c0;
  --ice:  #c8f4ff;

  --warn:        #ffb547;
  --danger:      #ff5577;
  --danger-soft: #ff88a3;
  --enemy:       #ff3b6b;

  --ok: #5dffb1;

  --font-display: 'Orbitron', 'Eurostile', 'Bank Gothic', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --glow-hud:    0 0 8px rgba(78, 226, 255, 0.55), 0 0 22px rgba(78, 226, 255, 0.25);
  --glow-warn:   0 0 8px rgba(255, 181, 71, 0.6),  0 0 22px rgba(255, 181, 71, 0.25);
  --glow-danger: 0 0 8px rgba(255, 85, 119, 0.65), 0 0 22px rgba(255, 85, 119, 0.3);
  --glow-ok:     0 0 8px rgba(93, 255, 177, 0.55), 0 0 22px rgba(93, 255, 177, 0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #02060d;
  color: var(--ice);
  font-family: var(--font-display);
  overflow: hidden;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/* Stage centers the 1280×800 viewport regardless of window size.
   Flat near-black so the letterbox bars blend with the cockpit's
   outer (darkest) tone; the cyan grid on ::before runs across the
   whole stage and ties the bars into the game world. */
#stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  background: #02060d;
}

/* Faint cyan grid behind the viewport — this is the layer that's
   visible inside the letterbox bars. Slightly larger cells than the
   in-cockpit grid (those panels are ship-side; these are hull-side),
   and intentionally not masked: the corner vignette in ::after dims
   the extreme edges so it doesn't feel like an infinite checkerboard. */
#stage::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(78, 226, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 226, 255, 0.04) 1px, transparent 1px);
  background-size: 88px 88px;
}

/* Subtle CRT-style scanlines, matching the cockpit's own .scanlines
   layer so the bars feel continuous. No vignette — that introduced
   uneven darkness; flat black blends cleanly. */
#stage::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(78, 226, 255, 0.018) 3px,
    transparent 4px
  );
}

.viewport {
  position: relative;
  z-index: 1;                            /* sit above the stage's grid + vignette */
  width: 1280px; height: 800px;
  transform-origin: center;
  /* JS sets --vp-scale based on window size */
  transform: scale(var(--vp-scale, 1));
}

/* ── Cockpit screen base ───────────────────────────────────── */
.cockpit {
  position: absolute; inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, #08172e 0%, #02060d 70%);
  color: var(--hud);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* Box-shadow starfield with periodic vertical drift.
   30 unique stars are placed in y ∈ [0, 800], then duplicated at y+800
   so the full field spans [0, 1600]. The animation translates the field
   from translateY(0) to translateY(-800px) over 30s — at the loop point
   the lower duplicates have moved exactly into the upper positions, so
   the loop is seamless and the stars appear to drift downward forever
   (illusion of the ship moving forward through the starfield). */
.starfield {
  position: absolute; top: 0; left: 0;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: drift 30s linear infinite;
  /* All stars are 2×2 cores; "bright" stars get a small blur for a halo. */
  box-shadow:
    /* ── 5 bright stars (with glow halo) ── */
    180px  80px 3px 0 rgba(255,255,255,0.95),
    420px 320px 3px 0 rgba(220,240,255,0.95),
    980px 540px 3px 0 rgba(255,255,255,0.95),
    320px 700px 3px 0 rgba(200,244,255,0.95),
    1000px 100px 3px 0 rgba(255,255,255,0.95),
    /* their duplicates at y+800 */
    180px  880px 3px 0 rgba(255,255,255,0.95),
    420px 1120px 3px 0 rgba(220,240,255,0.95),
    980px 1340px 3px 0 rgba(255,255,255,0.95),
    320px 1500px 3px 0 rgba(200,244,255,0.95),
    1000px 900px 3px 0 rgba(255,255,255,0.95),
    /* ── 10 medium stars (no halo, full alpha) ── */
    320px 200px 0 0 rgba(255,255,255,0.7),
    740px 270px 0 0 rgba(255,255,255,0.7),
    240px 380px 0 0 rgba(220,240,255,0.7),
    1140px 350px 0 0 rgba(255,255,255,0.7),
    540px  50px 0 0 rgba(255,255,255,0.7),
    720px 640px 0 0 rgba(220,240,255,0.7),
    880px 700px 0 0 rgba(255,255,255,0.7),
    200px 680px 0 0 rgba(255,255,255,0.7),
    560px 410px 0 0 rgba(220,240,255,0.7),
    760px 460px 0 0 rgba(255,255,255,0.7),
    /* their duplicates */
    320px 1000px 0 0 rgba(255,255,255,0.7),
    740px 1070px 0 0 rgba(255,255,255,0.7),
    240px 1180px 0 0 rgba(220,240,255,0.7),
    1140px 1150px 0 0 rgba(255,255,255,0.7),
    540px  850px 0 0 rgba(255,255,255,0.7),
    720px 1440px 0 0 rgba(220,240,255,0.7),
    880px 1500px 0 0 rgba(255,255,255,0.7),
    200px 1480px 0 0 rgba(255,255,255,0.7),
    560px 1210px 0 0 rgba(220,240,255,0.7),
    760px 1260px 0 0 rgba(255,255,255,0.7),
    /* ── 15 small dust stars (dimmer, fill the field) ── */
    640px 130px 0 0 rgba(255,255,255,0.4),
    880px  80px 0 0 rgba(255,255,255,0.4),
    100px 250px 0 0 rgba(255,255,255,0.4),
    1080px 200px 0 0 rgba(255,255,255,0.4),
    660px 520px 0 0 rgba(255,255,255,0.4),
    160px 580px 0 0 rgba(255,255,255,0.4),
    480px 600px 0 0 rgba(255,255,255,0.4),
    1100px 620px 0 0 rgba(255,255,255,0.4),
    600px 720px 0 0 rgba(255,255,255,0.4),
    1180px 750px 0 0 rgba(255,255,255,0.4),
     60px 420px 0 0 rgba(255,255,255,0.4),
    800px 360px 0 0 rgba(255,255,255,0.4),
    460px 770px 0 0 rgba(255,255,255,0.4),
    380px 480px 0 0 rgba(255,255,255,0.4),
    1040px 280px 0 0 rgba(255,255,255,0.4),
    /* their duplicates */
    640px  930px 0 0 rgba(255,255,255,0.4),
    880px  880px 0 0 rgba(255,255,255,0.4),
    100px 1050px 0 0 rgba(255,255,255,0.4),
    1080px 1000px 0 0 rgba(255,255,255,0.4),
    660px 1320px 0 0 rgba(255,255,255,0.4),
    160px 1380px 0 0 rgba(255,255,255,0.4),
    480px 1400px 0 0 rgba(255,255,255,0.4),
    1100px 1420px 0 0 rgba(255,255,255,0.4),
    600px 1520px 0 0 rgba(255,255,255,0.4),
    1180px 1550px 0 0 rgba(255,255,255,0.4),
     60px 1220px 0 0 rgba(255,255,255,0.4),
    800px 1160px 0 0 rgba(255,255,255,0.4),
    460px 1570px 0 0 rgba(255,255,255,0.4),
    380px 1280px 0 0 rgba(255,255,255,0.4),
    1040px 1080px 0 0 rgba(255,255,255,0.4);
}

@keyframes drift {
  /* Translate the field DOWN by exactly one viewport-height (800px).
     Each star has a duplicate at y+800, so we start at translateY(-800)
     (the duplicates are in view) and animate to translateY(0) (originals
     in view). At the loop boundary the two halves are visually identical,
     so the field appears to drift continuously — stars stream downward
     past the cockpit, giving the illusion of forward flight. */
  0%   { transform: translateY(-800px); }
  100% { transform: translateY(0); }
}

.nebula {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 18% 28%, rgba(95, 60, 180, 0.32), transparent 60%),
    radial-gradient(50% 35% at 78% 70%, rgba(0, 120, 200, 0.28), transparent 60%),
    radial-gradient(30% 25% at 60% 20%, rgba(255, 100, 160, 0.14), transparent 60%);
  filter: blur(2px);
}

.planet {
  position: absolute; border-radius: 50%; filter: blur(0.4px);
  pointer-events: none;
}

.hud-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hud-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 55%, #000 40%, transparent 95%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 55%, #000 40%, transparent 95%);
}
.hud-grid.fine {
  background-image:
    linear-gradient(rgba(78,226,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,226,255,0.05) 1px, transparent 1px);
  background-size: 14px 14px;
}

.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(78, 226, 255, 0.025) 3px, transparent 4px
  );
}

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  /* Softer corners so the starfield underneath isn't blacked out at the edges */
  background: radial-gradient(ellipse 100% 90% at 50% 55%, transparent 60%, rgba(0,0,0,0.55) 100%);
}

/* ── Corner brackets / HUD chrome ───────────────────────────── */
.hud-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: var(--hud);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.hud-corner.tl { top: 0; left: 0;     border-top-width: 2px; border-left-width: 2px; }
.hud-corner.tr { top: 0; right: 0;    border-top-width: 2px; border-right-width: 2px; }
.hud-corner.bl { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px; }
.hud-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.hud-frame {
  border: 1px solid var(--hud-line);
  background: rgba(5, 11, 24, 0.72);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  position: relative;
}

.hud-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud-dim);
}

.hud-value {
  font-family: var(--font-mono);
  color: var(--hud);
  text-shadow: var(--glow-hud);
}

/* ── Wordmark ───────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--hud);
  text-shadow: var(--glow-hud);
  display: inline-flex; align-items: center;
  gap: 0.05em;
}
.wordmark .dash {
  display: inline-block;
  width: 0.5em; height: 0.12em;
  background: var(--hud);
  margin: 0 0.18em;
  box-shadow: var(--glow-hud);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 18px 56px;
  background: linear-gradient(180deg, rgba(78,226,255,0.18), rgba(78,226,255,0.04));
  color: var(--hud);
  border: 1px solid var(--hud);
  position: relative;
  cursor: pointer;
  text-shadow: var(--glow-hud);
  box-shadow: var(--glow-hud), inset 0 0 18px rgba(78, 226, 255, 0.18);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: filter 0.15s, transform 0.1s;
}
.btn-primary:hover { filter: brightness(1.18); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(78,226,255,0.35);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  pointer-events: none;
}

.btn-ghost {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--hud-dim);
  color: var(--hud-dim);
  cursor: pointer;
  transition: all 0.12s;
}
.btn-ghost:hover, .btn-ghost.active {
  border-color: var(--hud);
  color: var(--hud);
  background: rgba(78,226,255,0.08);
  text-shadow: var(--glow-hud);
}

/* ── Missile ────────────────────────────────────────────────── */
.missile {
  position: absolute;
  transform-origin: center;
  pointer-events: none;
  /* JS sets --mx/--my as transform fields */
  transform: translate(var(--mx, 0), var(--my, 0)) translate(-50%, -50%);
  will-change: transform;
}

.missile-tag {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 500;
  padding: 5px 10px;
  background: rgba(2, 6, 13, 0.85);
  border: 1px solid var(--hud-line);
  color: var(--ice);
  text-shadow: 0 0 6px rgba(78, 226, 255, 0.6);
  white-space: nowrap;
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 14px;
}
.missile-tag::before, .missile-tag::after {
  content: ''; position: absolute;
  width: 6px; height: 6px;
  border: 1px solid var(--hud);
}
.missile-tag::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.missile-tag::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.missile.targeted .missile-tag {
  background: rgba(78, 226, 255, 0.12);
  border-color: var(--hud);
  box-shadow: var(--glow-hud);
}
.missile.danger .missile-tag {
  border-color: var(--danger);
  color: var(--danger-soft);
  text-shadow: 0 0 6px rgba(255, 85, 119, 0.7);
}
.missile.danger .missile-tag::before, .missile.danger .missile-tag::after {
  border-color: var(--danger);
}

.missile .connector {
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translateX(-50%);
  width: 1px; height: 14px;
  background: var(--hud-line);
}
.missile.targeted .connector { background: var(--hud); box-shadow: var(--glow-hud); }
.missile.danger    .connector { background: var(--danger); }

.missile .body {
  width: 38px; height: 64px;
  filter: drop-shadow(0 0 6px rgba(78,226,255,0.4));
}
.missile.danger .body {
  filter: drop-shadow(0 0 6px rgba(255,85,119,0.6));
}

/* "Ready to fire" state: missile is fully typed but waiting on SPACE */
.missile.ready .missile-tag {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(93, 255, 177, 0.1);
  box-shadow: var(--glow-ok);
  text-shadow: var(--glow-ok);
  animation: pulseReady 0.6s ease-in-out infinite alternate;
}
.missile.ready .missile-tag::before,
.missile.ready .missile-tag::after { border-color: var(--ok); }
.missile.ready .connector { background: var(--ok); box-shadow: var(--glow-ok); }
@keyframes pulseReady {
  from { transform: translateX(-50%) scale(1); }
  to   { transform: translateX(-50%) scale(1.06); }
}

.kbd.ok {
  border-color: var(--ok);
  color: var(--ok);
  text-shadow: var(--glow-ok);
}

/* ── Typed-word coloring ────────────────────────────────────── */
.typed   { color: var(--ok); text-shadow: var(--glow-ok); }
.untyped { color: var(--ice); opacity: 0.95; }
.cursor-char {
  background: var(--hud);
  color: #02060d !important;
  padding: 0 1px;
  text-shadow: none;
  animation: blink 0.9s infinite;
}
@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.4; }
}

/* ── Reticle ────────────────────────────────────────────────── */
.reticle {
  position: absolute;
  width: 84px; height: 84px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.reticle .ring {
  position: absolute; inset: 0;
  border: 1.5px solid var(--hud);
  border-radius: 50%;
  box-shadow: var(--glow-hud), inset 0 0 14px rgba(78, 226, 255, 0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
.reticle .bracket {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--hud);
}
.reticle .bracket.tl { top: -6px; left: -6px;     border-right: 0; border-bottom: 0; }
.reticle .bracket.tr { top: -6px; right: -6px;    border-left: 0; border-bottom: 0; }
.reticle .bracket.bl { bottom: -6px; left: -6px;  border-right: 0; border-top: 0; }
.reticle .bracket.br { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.reticle .ch-h, .reticle .ch-v {
  position: absolute; background: var(--hud); box-shadow: var(--glow-hud);
}
.reticle .ch-h { top: 50%; left: 50%; width: 18px; height: 1px; transform: translate(-50%, -50%); }
.reticle .ch-v { top: 50%; left: 50%; width: 1px; height: 18px; transform: translate(-50%, -50%); }
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

/* ── Laser beam ─────────────────────────────────────────────── */
.beam {
  position: absolute;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--hud), #fff, var(--hud), transparent);
  box-shadow: 0 0 8px var(--hud), 0 0 18px var(--hud);
  pointer-events: none;
  animation: laserFlicker 0.12s linear infinite;
}
@keyframes laserFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* ── Explosion ──────────────────────────────────────────────── */
.explosion {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  animation: explode 0.55s ease-out forwards;
}
.explosion .core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--hud-soft) 25%, var(--hud) 45%, transparent 70%);
  filter: blur(1px);
}
.explosion .ring1, .explosion .ring2 {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--hud);
  box-shadow: var(--glow-hud), inset 0 0 12px var(--hud);
}
.explosion .ring2 { border-color: var(--hud-soft); inset: 18%; opacity: 0.7; }
.explosion .shard {
  position: absolute; top: 50%; left: 50%;
  width: 2px; height: 80px;
  background: linear-gradient(var(--hud-soft), transparent);
  transform-origin: 50% 0;
  box-shadow: var(--glow-hud);
}
@keyframes explode {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

.shockwave {
  position: absolute;
  width: 600px; height: 600px;
  transform: translate(-50%,-50%) scale(0.4);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(78,226,255,0.18) 50%, transparent 56%);
  animation: shockwave 0.55s ease-out forwards;
}
@keyframes shockwave {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.2); opacity: 0; }
}

/* +1 score float */
.score-float {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ok);
  text-shadow: var(--glow-ok);
  letter-spacing: 0.12em;
  pointer-events: none;
  animation: scoreFloat 1s ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes scoreFloat {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1.05); }
}

/* miss flash — when typing wrong char */
.miss-flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(255,85,119,0.35), transparent 70%);
  animation: missFlash 0.32s ease-out forwards;
}
@keyframes missFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* hull-damage flash */
.dmg-flash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 50% 50%, rgba(255,85,119,0.25), transparent 70%),
    linear-gradient(0deg, rgba(255,85,119,0.18), transparent 30%);
  animation: dmgFlash 0.5s ease-out forwards;
}
@keyframes dmgFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ── Top HUD layout ─────────────────────────────────────────── */
.top-hud-left {
  position: absolute; top: 32px; left: 36px;
  display: flex; align-items: center; gap: 10px;
}
.dot { width: 8px; height: 8px; background: var(--hud); box-shadow: var(--glow-hud); }
.dot.warn   { background: var(--warn);   box-shadow: var(--glow-warn); }
.dot.danger { background: var(--danger); box-shadow: var(--glow-danger); }
.dot.ok     { background: var(--ok);     box-shadow: var(--glow-ok); }

.top-hud-center {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  text-align: center;
}
.top-hud-center .score {
  font-family: var(--font-display); font-size: 32px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--hud); text-shadow: var(--glow-hud);
  font-variant-numeric: tabular-nums;
}

.top-hud-right {
  position: absolute; top: 32px; right: 36px; text-align: right;
}

/* ── Bottom dash ────────────────────────────────────────────── */
.bottom-dash {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 36px 22px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
}
.bd-left  { flex: 0 0 220px; }
.bd-center{ flex: 1; text-align: center; min-width: 0; }
.bd-right { flex: 0 0 220px; text-align: right; }

.hull-bar {
  height: 8px;
  background: rgba(78,226,255,0.08);
  border: 1px solid var(--hud-line);
  position: relative;
}
.hull-bar > div {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--hud), var(--hud-soft));
  box-shadow: var(--glow-hud);
  transition: width 0.25s ease-out;
}
.hull-bar.warn  > div { background: linear-gradient(90deg, var(--warn), #ffd07a); box-shadow: var(--glow-warn); }
.hull-bar.crit  > div { background: linear-gradient(90deg, var(--danger), var(--danger-soft)); box-shadow: var(--glow-danger); }

.hull-readout {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--hud-dim); letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.active-word {
  font-family: var(--font-mono);
  font-size: 32px; font-weight: 500;
  letter-spacing: 0.05em;
  min-height: 1.3em;
}
.active-word.idle {
  font-size: 22px;
  color: var(--hud-faint);
  letter-spacing: 0.4em;
}

/* ── Settings cards ─────────────────────────────────────────── */
.mode-card, .toggle-card, .lang-card {
  cursor: pointer;
  border: 1px solid var(--hud-line);
  background: rgba(2,6,13,0.4);
  transition: all 0.12s;
}
.mode-card.active, .toggle-card.active, .lang-card.active {
  border-color: var(--hud);
  background: rgba(78,226,255,0.1);
  box-shadow: var(--glow-hud), inset 0 0 14px rgba(78,226,255,0.12);
}
.mode-card { padding: 18px 22px; flex: 1; position: relative;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.toggle-card { padding: 14px 18px; flex: 1; display: flex; align-items: center; gap: 14px; }
.toggle-card .checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--hud-dim);
  background: transparent;
  flex-shrink: 0;
}
.toggle-card.active .checkbox {
  border-color: var(--hud);
  background: var(--hud);
  box-shadow: var(--glow-hud);
}
.lang-card { padding: 14px 10px; text-align: center; }
.lang-card.disabled,
.toggle-card.disabled,
.mode-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ── Debris chip ────────────────────────────────────────────── */
.chip {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,6,13,0.85);
  border: 1px solid var(--hud-line);
  font-family: var(--font-mono); font-weight: 600;
  color: var(--ice);
  text-shadow: 0 0 4px rgba(78,226,255,0.5);
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
  will-change: transform;
}
.chip.targeted {
  background: rgba(78,226,255,0.15);
  border-color: var(--hud);
  box-shadow: var(--glow-hud);
  color: var(--ok);
  text-shadow: var(--glow-ok);
}

/* ── Boss banner ────────────────────────────────────────────── */
.boss-banner {
  position: absolute;
  left: 50%; top: 130px;
  transform: translateX(-50%);
  background: rgba(2,6,13,0.92);
  border: 1px solid var(--enemy);
  box-shadow: 0 0 14px rgba(255,85,119,0.35), inset 0 0 14px rgba(255,85,119,0.08);
  padding: 14px 32px;
  min-width: 540px; max-width: 880px;
  text-align: center;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  z-index: 3;
}
.boss-banner .label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--enemy);
  margin-bottom: 8px;
}
.boss-banner .sentence {
  font-family: var(--font-mono); font-size: 26px;
  letter-spacing: 0.04em;
}
.boss-banner .progress {
  margin-top: 12px; height: 3px;
  background: rgba(255,85,119,0.15);
  position: relative;
}
.boss-banner .progress > div {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--enemy), var(--danger-soft));
  box-shadow: 0 0 8px var(--enemy);
  transition: width 0.1s linear;
}

.boss-ship {
  position: absolute;
  filter: drop-shadow(0 0 14px rgba(255,85,119,0.5));
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.boss-ship.hit { animation: shipHit 0.18s ease-out; }
@keyframes shipHit {
  0%   { filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)) brightness(2); }
  100% { filter: drop-shadow(0 0 14px rgba(255,85,119,0.5)) brightness(1); }
}

/* warn banner (debris) */
.warn-banner {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  padding: 6px 18px;
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--warn);
  background: rgba(40, 26, 8, 0.7);
  box-shadow: var(--glow-warn);
  z-index: 3;
}
.warn-banner .label {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; color: var(--warn);
}

/* ── Streak badge ───────────────────────────────────────────── */
.streak-badge {
  position: absolute; top: 90px; right: 60px;
  text-align: right;
  pointer-events: none;
}
.streak-badge .num {
  font-family: var(--font-display); font-weight: 800; font-size: 36px;
  letter-spacing: 0.18em; color: var(--ok); text-shadow: var(--glow-ok);
}

/* ── Pause / Game over big text ─────────────────────────────── */
.huge-paused {
  font-family: var(--font-display); font-weight: 900; font-size: 96px;
  letter-spacing: 0.32em; color: var(--hud); text-shadow: var(--glow-hud);
}
.huge-failed {
  font-family: var(--font-display); font-weight: 900; font-size: 92px;
  letter-spacing: 0.2em; color: var(--danger);
  text-shadow: 0 0 12px rgba(255,85,119,0.7), 0 0 32px rgba(255,85,119,0.4);
}

/* Game-over cracks svg overlay */
.dmg-cracks { position: absolute; inset: 0; pointer-events: none; }
.dmg-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,85,119,0.18) 0%, rgba(255,85,119,0.05) 40%, transparent 70%);
}

/* ── Stat readouts ──────────────────────────────────────────── */
.stat { text-align: center; }
.stat .v {
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  letter-spacing: 0.14em; color: var(--hud); text-shadow: var(--glow-hud);
  font-variant-numeric: tabular-nums;
}
.stat .v.big { font-size: 44px; }

.divider-h {
  height: 1px; width: 320px;
  background: linear-gradient(90deg, transparent, var(--hud-line), transparent);
  margin: 12px 0;
}

.ticker-tape {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--hud-dim);
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* ── Helpers ────────────────────────────────────────────────── */
.center-stack {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--hud-line); color: var(--hud);
  background: rgba(2,6,13,0.7);
  letter-spacing: 0.18em;
}

/* hidden screens */
.scene { display: none; }
.scene.active { display: block; }

/* shake on hull damage */
.shake { animation: shake 0.3s ease-out; }
@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
}

/* prevent any default focus rings on game buttons */
button:focus { outline: none; }

/* ── Traditional Typing Test ────────────────────────────────── */
.tt-root {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 56px 80px 36px;
  pointer-events: auto;
}

.tt-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; color: var(--hud-dim);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}

.tt-config {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
  transition: opacity 0.4s, transform 0.4s;
}
.tt-config.hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.tt-config-row {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.22em;
}

.tt-row-label {
  color: var(--hud-faint);
  margin-right: 12px;
  font-size: 10px;
}

.tt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hud-line);
  background: rgba(2,6,13,0.4);
  color: var(--hud-dim);
  cursor: pointer;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.12s;
  user-select: none;
  font-family: var(--font-display);
  font-size: 11px;
}
.tt-tab:hover, .tt-tab.active {
  border-color: var(--hud);
  color: var(--hud);
  text-shadow: var(--glow-hud);
  background: rgba(78,226,255,0.08);
  box-shadow: var(--glow-hud);
}
.tt-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tt-divider {
  width: 1px; height: 14px;
  background: var(--hud-line);
  margin: 0 4px;
}

/* live readouts above the text */
.tt-live {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center;
  gap: 36px;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
}
.tt-live-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 70px;
}
.tt-live-stat .label {
  font-size: 10px; color: var(--hud-faint); letter-spacing: 0.32em;
  font-family: var(--font-display); text-transform: uppercase;
}
.tt-live-stat .value {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 800;
  color: var(--hud); text-shadow: var(--glow-hud);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
}
.tt-live-stat .sub {
  font-size: 10px; color: var(--hud-dim); letter-spacing: 0.18em;
}

/* the typing area */
.tt-text-window {
  margin-top: 28px;
  flex: 1;
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
}

.tt-text-frame {
  width: 100%;
  max-width: 1080px;
  position: relative;
  height: 168px;        /* ~3 lines @ 56px line-height */
  overflow: hidden;
}

.tt-text-track {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 56px;
  letter-spacing: 0.04em;
  color: var(--hud-faint);
  white-space: normal;
  word-break: break-word;
  transition: transform 0.18s ease;
  position: absolute;
  inset: 0;
  padding: 0 8px;
  text-align: center;
}

.tt-text-track .word {
  display: inline-block;
  white-space: nowrap;
}
.tt-text-track .ch {
  display: inline-block;
  position: relative;
  transition: color 0.05s, background 0.05s;
}
.tt-text-track .ch.correct { color: var(--ok); text-shadow: var(--glow-ok); }
.tt-text-track .ch.wrong   { color: var(--danger); text-shadow: var(--glow-danger); background: rgba(255,85,119,0.08); }
.tt-text-track .ch.extra   { color: var(--danger); opacity: 0.6; text-decoration: underline; }
.tt-text-track .ch.cursor::before {
  content: ''; position: absolute;
  left: -1px; top: 8%; bottom: 8%;
  width: 2px;
  background: var(--hud);
  box-shadow: 0 0 6px var(--hud);
  animation: blink 0.9s infinite;
}
.tt-text-track .ch.cursor-end::after {
  content: ''; position: absolute;
  right: -1px; top: 8%; bottom: 8%;
  width: 2px;
  background: var(--hud);
  box-shadow: 0 0 6px var(--hud);
  animation: blink 0.9s infinite;
}
.tt-text-track .ch.space { padding: 0 0.18em; }
.tt-text-track .ch.space.correct { background: rgba(93,255,177,0.12); }
.tt-text-track .ch.space.wrong   { background: rgba(255,85,119,0.18); }

/* zen mode: just shows what user typed */
.tt-zen-area {
  width: 100%; max-width: 1080px;
  height: 200px; padding: 14px;
  font-family: var(--font-mono); font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ice);
  background: rgba(2,6,13,0.55);
  border: 1px solid var(--hud-line);
  white-space: pre-wrap;
  overflow-y: auto;
  text-align: left;
}

/* custom mode: textarea before start */
.tt-custom-input {
  width: 100%; max-width: 880px;
  min-height: 140px; padding: 12px 14px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ice);
  background: rgba(2,6,13,0.7);
  border: 1px solid var(--hud-line);
  resize: vertical;
  outline: none;
  caret-color: var(--hud);
}
.tt-custom-input:focus { border-color: var(--hud); box-shadow: var(--glow-hud); }

.tt-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--hud-dim); letter-spacing: 0.28em;
  gap: 16px;
}
.tt-bottom .left, .tt-bottom .right { display: flex; gap: 14px; align-items: center; }

/* ── Result screen ─────────────────────────────────────────── */
.tt-result-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
  width: 100%; max-width: 1080px;
  margin-top: 28px;
}
.tt-result-stats {
  display: flex; flex-direction: column; gap: 22px;
}
.tt-result-big {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
}
.tt-result-big .label {
  font-family: var(--font-display); font-size: 10px;
  color: var(--hud-faint); letter-spacing: 0.32em;
  text-transform: uppercase;
}
.tt-result-big .value {
  font-family: var(--font-display); font-weight: 800;
  font-size: 64px;
  color: var(--hud); text-shadow: var(--glow-hud);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.tt-result-big .unit {
  font-size: 14px; color: var(--hud-dim); letter-spacing: 0.32em;
  margin-top: -4px;
}

.tt-graph {
  background: rgba(2,6,13,0.6);
  border: 1px solid var(--hud-line);
  position: relative;
  padding: 14px 16px 22px;
}
.tt-graph svg { width: 100%; height: 220px; display: block; }

.tt-result-meta {
  margin-top: 16px;
  display: flex; gap: 30px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--hud-dim); letter-spacing: 0.18em;
}
.tt-result-meta .item { display: flex; flex-direction: column; gap: 4px; }
.tt-result-meta .item .l { color: var(--hud-faint); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; }
.tt-result-meta .item .v { color: var(--hud); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.08em; }

/* the off-screen real input that captures keystrokes (visual hidden, focusable) */
.hidden-input {
  position: absolute;
  left: -9999px; top: 0;
  opacity: 0;
  width: 1px; height: 1px;
}