/* ============================================================
   AstraMiner — military briefing-room art direction.
   Dark slate + cold cyan HUD + amber warnings. Mineral state is
   glyph + color, never color alone (colorblind-safe). One screen
   visible at a time inside the fixed 100dvh shell.

   SECTION OWNERSHIP (module map, ai-docs/plans/P005-multi-file-refactor.md):
   - shell/screens registry + toast  -> core.js
   - stage HUD, field, beam, juice   -> ui-hud.js
   - enemy types, hazards            -> sim.js
   - livery, NG+/endless/onboarding  -> run.js
   - panels (hangar/lab/shop/records/briefing/between/summary) -> ui-screens.js
   ============================================================ */
:root {
  --am-bg: #0b1420;
  --am-bg2: #0f1c2c;
  --am-panel: #122033;
  --am-line: rgba(140, 200, 255, 0.16);
  --am-ink: #dcebfa;
  --am-dim: #8fa7c0;
  --am-cyan: #59d8ff;
  --am-cyan-dim: rgba(89, 216, 255, 0.14);
  --am-amber: #ffb45e;
  --am-red: #ff5d5d;
  --am-red-dim: rgba(255, 93, 93, 0.15);
  --am-green: #50b060;
  --am-ok: #59d89b;
  --am-font: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}
body { background: var(--am-bg); }

/* Game wrapper: full viewport, flex-centers the game shell at a portrait
   mobile aspect ratio. On any viewport — phone, tablet, widescreen — the
   game scales and centers while keeping its mobile layout. */
.game-wrapper {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050d18;
  overflow: hidden;
}
@media (max-aspect-ratio: 3/4) {
  .game-wrapper .game-shell {
    /* Portrait screens keep the 9:16 play box. A wider window gets the
       kit's centred column (P067, ui.css) instead, so no rule here. */
    height: auto;
    width: auto;
    max-width: 100vw;
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
  }
}
.game-shell {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(89, 216, 255, 0.08), transparent 60%),
    radial-gradient(700px 420px at 5% 110%, rgba(255, 180, 94, 0.05), transparent 55%),
    linear-gradient(165deg, var(--am-bg), var(--am-bg2));
}
/* The four screens share one flex slot inside the shell; the shell
   never scrolls. Exactly one screen is .visible at a time. */
.am-main {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* one state per screen: no scroll ever */
}
.screen {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.screen.visible { display: flex; }

.hud-title {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--am-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hud-title .sub {
  font-size: 0.6em;
  letter-spacing: 0.1em;
  color: var(--am-dim);
  font-weight: 600;
}
.rule {
  border: 0;
  border-top: 1px solid var(--am-line);
}
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--am-dim); text-transform: uppercase; }
.kv b { color: var(--am-ink); font-weight: 700; }
.panel {
  background: var(--am-panel);
  border: 1px solid var(--am-line);
  border-radius: 12px;
  padding: 8px 10px;
}

/* ---------- shared button language (kit .btn overrides) ---------- */
.btn { font-family: var(--am-font); background: linear-gradient(170deg, var(--am-cyan), #1f8fb8); color: #06121c; letter-spacing: 0.06em; }
.btn.amber { background: linear-gradient(170deg, var(--am-amber), #c47a24); }
.btn.danger { background: linear-gradient(170deg, var(--am-red), #a52f2f); }
.btn.ghost { background: transparent; color: var(--am-cyan); border: 1px solid rgba(89, 216, 255, 0.4); }
.btn:disabled { filter: grayscale(0.85) brightness(0.6); cursor: not-allowed; transform: none; }

/* ---------- mineral chips (glyph + color, always) ---------- */
.min-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--am-font);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(140, 200, 255, 0.08);
  color: var(--am-ink);
  white-space: nowrap;
  line-height: 1.4;
}
.min-chip .g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 800;
  color: #06121c;
}
.min-chip small { color: var(--am-dim); font-size: 0.62rem; }
.min-fe  .g { background: #c9d2dc; }
.min-ic  .g { background: #a8e4ff; }
.min-co  .g { background: #7fa6ff; }
.min-si  .g { background: #e6c07a; }
.min-ti  .g { background: #d9e6f2; }
.min-su  .g { background: #c99bff; }
.min-cr  .g { background: #ff7ad9; }
.min-ha  .g { background: #7dffc4; }
.min-credits .g { background: #ffd24a; } /* credits meta (v0.16) */
/* cargo tier bins (v0.16): COMMON / ADVANCED aggregate chips */
.tier-common .g   { background: #c9d2dc; }
.tier-advanced .g { background: #e6c07a; }

/* ---------- hangar (command) — ui-screens.js ---------- */
.bank-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* v0.27.4: slim status strip — the permanent currency readout (ADR-033) */
.status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 0;
}
.status-strip .min-chip { font-size: 0.68rem; padding: 1px 6px; }
/* v0.28.2 (ADR-035): cargo capacity is a muted labeled segment, NOT a
   currency chip — no chip chrome, no glyph. Divider + small CAP label. */
.status-strip .cap-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--am-line);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--am-dim);
  font-variant-numeric: tabular-nums;
}
.status-strip .cap-seg .cap-lbl { color: var(--am-dim); }
.status-strip .cap-seg b {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--am-ink);
}
.sector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  /* knob-style scrollbar (briefing-room): amber knob in a dark slot.
     Firefox fallback: thin track + amber thumb. */
  scrollbar-width: thin;
  scrollbar-color: var(--am-amber) rgba(6, 18, 28, 0.55);
}
.sector-list::-webkit-scrollbar { width: 10px; }
.sector-list::-webkit-scrollbar-track {
  background: rgba(6, 18, 28, 0.55);
  border-radius: 999px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
.sector-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(6, 18, 28, 0.85);
  min-height: 34px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(6, 18, 28, 0.5) 42% 58%, transparent 58%),
    radial-gradient(circle at 35% 30%, #ffd9a8, var(--am-amber) 55%, #b9791f);
  box-shadow: 0 0 6px rgba(255, 180, 94, 0.45);
}
.sector-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--am-panel);
  border: 1px solid var(--am-line);
  color: var(--am-ink);
  text-align: left;
}
.sector-card.locked { opacity: 0.55; }
.sector-card .num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--am-cyan);
  min-width: 30px;
  text-align: center;
}
.sector-card.locked .num { color: var(--am-dim); }
.sector-card .meta { flex: 1; min-width: 0; }
.sector-card .meta .n { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; }
.sector-card .meta .d { font-size: 0.68rem; color: var(--am-dim); }
.sector-card .best { font-size: 0.66rem; color: var(--am-amber); font-family: var(--am-font); white-space: nowrap; }
.sector-card .fly { min-height: 44px; padding: 0 12px; }
.brief {
  font-size: 0.74rem;
  color: var(--am-dim);
  line-height: 1.45;
  text-align: center;
}

/* ---------- lab (research) — ui-screens.js ---------- */
.lab-head { display: flex; align-items: center; gap: 8px; }
.lab-head .hud-title { flex: 1; }
/* Command head (T568): the Settings gear wraps under the title when the
   column is too narrow, so it is never clipped. */
#hangar > .lab-head { flex-wrap: wrap; }
#hangar > .lab-head #btn-settings { margin-left: auto; }
.tech-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--am-amber) rgba(6, 18, 28, 0.55);
}
.tech-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 5px 8px;
  background: var(--am-panel);
  border: 1px solid var(--am-line);
  border-radius: 10px;
}
.tech-row .t-main { flex: 1; min-width: 0; }
.tech-row .t-name { font-size: 0.8rem; font-weight: 700; color: var(--am-ink); letter-spacing: 0.03em; }
.tech-row .t-desc { font-size: 0.64rem; color: var(--am-dim); line-height: 1.3; }
.tech-row .t-lvl { font-size: 0.62rem; color: var(--am-amber); font-family: var(--am-font); white-space: nowrap; }
.tech-row .buy {
  flex: none;
  flex-direction: column; /* "Buy" above, cost grid below */
  width: 104px;           /* uniform width (fixed, not min-width) */
  min-height: 44px;
  padding: 5px 6px;
  font-size: 0.68rem;
}
.tech-row .buy .cost {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cols, 2 rows max for 4 minerals */
  gap: 2px 4px;
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- stage (sector run) — ui-hud.js ---------- */
.stage-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--am-font);
}
.stage-hud .sec { font-weight: 800; color: var(--am-cyan); letter-spacing: 0.06em; font-size: 0.85rem; white-space: nowrap; }
.stage-hud .clock { color: var(--am-dim); font-size: 0.72rem; white-space: nowrap; }
.hull-wrap { flex: 1; height: 16px; background: rgba(140, 200, 255, 0.1); border-radius: 999px; overflow: hidden; border: 1px solid var(--am-line); }
.hull-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--am-cyan), var(--am-ok)); transition: width 120ms linear, background 150ms; }
.hull-fill.low { background: linear-gradient(90deg, var(--am-red), var(--am-amber)); }
/* v0.31.5 (spec c): H2O gauge beside the hull bar — a fixed-width tank
   bar (the hull bar flexes). Low state (<= 25% of the cap) turns amber
   and pulses; reduced-motion users get a static fill (media block). */
.h2o-wrap { flex: none; width: 52px; height: 16px; background: rgba(140, 200, 255, 0.08); border-radius: 999px; overflow: hidden; border: 1px solid var(--am-line); }
.h2o-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #3f8fd6, #7cc4f0); transition: width 120ms linear, background 150ms; }
.h2o-fill.low { background: linear-gradient(90deg, var(--am-amber), #ffd27a); animation: h2o-pulse 1.2s ease-in-out infinite; }
@keyframes h2o-pulse { 50% { opacity: 0.45; } }
.field {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--am-line);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(rgba(89, 216, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 216, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}
.beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.beam-line { stroke: var(--am-cyan); stroke-width: 2.5; stroke-dasharray: 7 6; filter: drop-shadow(0 0 4px rgba(89,216,255,0.8)); }
.beam-line.combat { stroke: var(--am-red); filter: drop-shadow(0 0 5px rgba(255,93,93,0.9)); }
/* v0.31.15 (spec j2): hold-to-charge pauses the beams (dimmed) and the
   meter glows once past the minimum charge */
.beam-line.paused { opacity: 0.22; }
.charge-meter {
  position: absolute; left: 50%; top: calc(100% - 56px);
  transform: translateX(-50%);
  width: 64px; height: 5px; z-index: 4;
  border: 1px solid rgba(89, 216, 255, 0.5);
  border-radius: 3px; background: rgba(5, 18, 28, 0.85);
  display: none; pointer-events: none;
}
.charge-meter.on { display: block; }
.charge-meter i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--am-cyan), #9be9ff);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(89, 216, 255, 0.9);
}
.charge-shot {
  position: absolute; width: 12px; height: 12px; z-index: 5;
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #dff6ff 0%, var(--am-cyan) 55%, rgba(89,216,255,0.15) 75%);
  box-shadow: 0 0 12px 3px rgba(89, 216, 255, 0.85);
}

.obj { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
/* ship */
.ship {
  width: 46px; height: 46px; z-index: 3;
}
.ship .hull {
  width: 46px; height: 46px; border-radius: 40% 40% 55% 55%;
  background: linear-gradient(170deg, #1d3f5c, #0e2133);
  border: 2px solid var(--am-cyan);
  position: relative;
}
.ship .hull::after {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid var(--am-cyan);
}
.ship .tag { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); font-size: 0.5rem; color: var(--am-cyan); letter-spacing: 0.1em; white-space: nowrap; }

/* asteroids */
.node {
  width: 52px; height: 52px; border-radius: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid; cursor: pointer;
  box-shadow: inset -6px -8px 14px rgba(0,0,0,0.4);
  transition: box-shadow 120ms;
}
.node.mining { box-shadow: inset -6px -8px 14px rgba(0,0,0,0.4), 0 0 14px rgba(89,216,255,0.65); }
.node .glyph { font-size: 0.95rem; font-weight: 900; color: #06121c; line-height: 1; font-family: var(--am-font); }
.node .ore { margin-top: 3px; width: 32px; height: 4px; background: rgba(6,18,28,0.5); border-radius: 2px; overflow: hidden; }
.node .ore i { display: block; height: 100%; background: #06121c; border-radius: 2px; }
.node.ty-fe  { background: radial-gradient(circle at 32% 30%, #e6ecf2, #9aa7b5); border-color: #c9d2dc; }
.node.ty-ic  { background: radial-gradient(circle at 32% 30%, #cfefff, #79c4e8); border-color: #a8e4ff; }
.node.ty-co  { background: radial-gradient(circle at 32% 30%, #b9caff, #4f6fc9); border-color: #7fa6ff; }
.node.ty-si  { background: radial-gradient(circle at 32% 30%, #f0d9a4, #b7914a); border-color: #e6c07a; }
.node.ty-ti  { background: radial-gradient(circle at 32% 30%, #ffffff, #93a8bd); border-color: #d9e6f2; }
.node.ty-cr  { background: radial-gradient(circle at 32% 30%, #ffd0f0, #c93e9e); border-color: #ff7ad9; }
.node.ty-ha  { background: radial-gradient(circle at 32% 30%, #d2ffe9, #37b98a); border-color: #7dffc4; animation: ha-glow 1.6s ease-in-out infinite; }
.node.ty-su  { background: radial-gradient(circle at 32% 30%, #e4ccff, #9a63d8); border-color: #c99bff; }
@keyframes ha-glow { 0%,100% { box-shadow: 0 0 2px rgba(125,255,196,0.4); } 50% { box-shadow: 0 0 18px rgba(125,255,196,0.95); } }
/* cocoon hazard: stripes + glyph, never color alone */
.node.cocoon {
  background: repeating-linear-gradient(45deg, #5a4a3a 0 8px, #2b2118 8px 16px);
  border-color: #ffb45e;
}
.node.cocoon .glyph { color: #ffb45e; }
.node.cocoon.ty-su { background: repeating-linear-gradient(45deg, #7b5ba8 0 8px, #3c2a55 8px 16px); border-color: #c99bff; }
.node.cocoon.ty-su .glyph { color: #efe2ff; }
.node.cocoon::after {
  content: ""; position: absolute; right: -2px; top: -2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--am-amber);
  animation: cocoon-blink 0.9s steps(2) infinite;
}
@keyframes cocoon-blink { 50% { opacity: 0.25; } }

/* swarm ships: shape + label, never color alone */
.enemy {
  width: 40px; height: 40px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.enemy .shape { width: 26px; height: 26px; position: relative; }
.enemy .tag { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 0.48rem; letter-spacing: 0.08em; white-space: nowrap; color: var(--am-dim); }
.enemy.latched .shape { animation: latch-wiggle 0.35s infinite; }
@keyframes latch-wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.enemy.ty-scout .shape {
  width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--am-red);
  filter: drop-shadow(0 0 5px rgba(255,93,93,0.7));
}
.enemy.ty-scout .tag { color: var(--am-red); }
.enemy.ty-drone .shape { border-radius: 50%; background: var(--am-red); border: 2px solid #ffd0d0; animation: drone-spin 1.4s linear infinite; }
.enemy.ty-drone .tag { color: var(--am-red); }
@keyframes drone-spin { to { transform: rotate(360deg); } }
.enemy.ty-striker .shape { background: var(--am-amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: striker-pulse 0.7s ease-in-out infinite; }
.enemy.ty-striker .tag { color: var(--am-amber); }
@keyframes striker-pulse { 50% { transform: scale(0.72); } }
.enemy.targeted .shape { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
/* v0.30.6 (ADR-045): slim enemy HP bar — hidden at full health, fills
   left-to-right as the enemy takes damage (width carries the info,
   color is accent only). Positioned above the shape, never color alone. */
.enemy .hpbar {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 2px;
  background: rgba(6, 18, 28, 0.6); overflow: hidden;
  opacity: 0; transition: opacity 120ms ease-out;
  pointer-events: none;
}
.enemy.hurt .hpbar { opacity: 1; }
.enemy .hpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--am-red), var(--am-amber)); }
/* v0.30.6 (ADR-045): target-lock ring — persistent marker on an
   acquired target. Follows the target; replays a fade-in when the lock
   moves (retarget); fades out when released. Shared base for the beam's
   own lock ring AND the enemy-acquired-a-structure telegraph
   (.struct-ring, sim-core.js) — the base stays cyan/plain for the
   telegraph; .beam-ring overrides below give the player's beam lock its
   own amber crosshair look (T083 spec 1a). */
.lock-ring {
  position: absolute; z-index: 5; pointer-events: none;
  border: 2px solid var(--am-cyan); border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 180ms ease-out;
  box-shadow: 0 0 12px rgba(89, 216, 255, 0.5);
}
.lock-ring.on { opacity: 1; animation: lock-fade-in 220ms ease-out; }
.lock-ring.on.combat { border-color: var(--am-red); box-shadow: 0 0 12px rgba(255, 93, 93, 0.55); }
@keyframes lock-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* v0.32 (T083 spec 1a, 1d/6): the beam's drag-lock ring — a circled
   crosshair, amber (red on an enemy), visible even while the beam is
   idle/paused/charging (driven by run.target alone). Tappable: a
   pointerdown on the ring itself releases the lock (AM_ui.releaseLock,
   ui-hud.js) so the player can tap the ring to go idle without hunting
   for empty field space. */
.lock-ring.beam-ring {
  border-color: var(--am-amber);
  box-shadow: 0 0 12px rgba(255, 180, 94, 0.55);
  pointer-events: auto; cursor: pointer;
}
.lock-ring.beam-ring::before, .lock-ring.beam-ring::after {
  content: ""; position: absolute; background: var(--am-amber);
  top: 50%; left: 50%;
}
.lock-ring.beam-ring::before { width: 60%; height: 2px; transform: translate(-50%, -50%); }
.lock-ring.beam-ring::after { width: 2px; height: 60%; transform: translate(-50%, -50%); }
.lock-ring.beam-ring.on.combat { border-color: var(--am-red); box-shadow: 0 0 12px rgba(255, 93, 93, 0.55); }
.lock-ring.beam-ring.on.combat::before, .lock-ring.beam-ring.on.combat::after { background: var(--am-red); }

/* v0.31.7 (spec d): structures — one base box, per-type accent border.
   Glyph + tag + the v0.30.6 slim HP bar (hidden at full).
   v0.33.7 (T105): positioning comes from .obj (absolute + centering
   translate), so nothing here may set `position` on .structure or a bare
   `transform` (animations/scoop compose the -50% centering translate).
   One art block per type: T099 art merged over the T084 shapes. */
.structure {
  width: 44px; height: 44px; z-index: 2;
  border-radius: 8px; background: linear-gradient(170deg, #1d3f5c, #0e2133);
  border: 2px solid var(--am-amber);
  display: flex; align-items: center; justify-content: center;
}
.structure .g { font-size: 0.7rem; font-weight: 900; color: var(--am-amber); font-family: var(--am-font); }
.structure .g { display: none; }
.structure .tag { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 0.48rem; color: var(--am-amber); letter-spacing: 0.08em; white-space: nowrap; }
.structure.ghost { opacity: 0.5; border-style: dashed; pointer-events: none; z-index: 4; }

/* Turret: sentry ring + hub, barrel tracks --turret-angle (0 = right,
   idle -90deg = up; sim-core.js turret rotation) */
.structure.ty-turret {
  width: 32px; height: 32px;
  border: none;
  background: radial-gradient(circle at 50% 50%, var(--am-amber) 0 4px, transparent 4.5px);
}
.structure.ty-turret::before {
  content: "";
  position: absolute; inset: 4px;
  border: 2px solid var(--am-amber); border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 180, 94, 0.4);
}
.structure.ty-turret::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 4px; margin-top: -2px;
  border-radius: 2px;
  background: var(--am-amber);
  box-shadow: 0 0 6px rgba(255, 180, 94, 0.6);
  transform-origin: 0 50%;
  rotate: var(--turret-angle, -1.5708rad);
  transition: rotate 0.1s linear;
}

/* Drone: hover-bot, body core + four rotor pods */
.structure.ty-drone {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(89, 216, 255, 0.2);
  border: 1.5px solid var(--am-cyan);
  box-shadow: 0 0 6px rgba(89, 216, 255, 0.3);
  animation: drone-hover 3s ease-in-out infinite;
}
.structure.ty-drone::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--am-cyan);
  box-shadow: 0 0 4px var(--am-cyan);
}
.structure.ty-drone::after {
  content: "";
  position: absolute; top: -4px; left: -4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(89, 216, 255, 0.6);
  box-shadow: 23px 0 0 rgba(89, 216, 255, 0.6), 0 23px 0 rgba(89, 216, 255, 0.6), 23px 23px 0 rgba(89, 216, 255, 0.6);
  animation: drone-rotor 0.6s linear infinite;
}
@keyframes drone-hover {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 2px)); }
}
@keyframes drone-rotor {
  50% { opacity: 0.35; }
}
.structure.ty-drone .g, .structure.ty-drone .tag { color: var(--am-cyan); }
.drone-tether { position: absolute; z-index: 3; pointer-events: none; height: 1px; background: var(--am-cyan); opacity: 0.3; transform-origin: 0 50%; }

/* Collector: open scoop dish, base bar, intake cone below */
.structure.ty-collector {
  width: 28px; height: 14px; border-radius: 50% 50% 0 0;
  background: rgba(80, 176, 96, 0.2);
  border: 1.5px solid var(--am-green);
  border-bottom: 2px solid transparent;
}
.structure.ty-collector::before {
  content: "";
  position: absolute; bottom: -4px; left: 50%;
  width: 18px; height: 3px; margin-left: -9px;
  border-radius: 2px;
  background: rgba(80, 176, 96, 0.5);
}
.structure.ty-collector::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  width: 14px; height: 16px;
  background: rgba(255, 255, 255, 0.15);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}
.structure.ty-collector.scoop { transform: translate(-50%, -50%) scale(1.15); transition: transform 0.3s ease-out; }
.structure.ty-collector .g, .structure.ty-collector .tag { color: #7be3a5; }
.structure.ty-collector .tag { bottom: -30px; } /* clear the intake cone */

/* Extractor: drill shaft with a centre line, bit tip, drip at the bit */
.structure.ty-extractor {
  width: 8px; height: 24px; border-radius: 2px;
  border: none;
  background:
    linear-gradient(90deg, transparent 3px, rgba(126, 200, 255, 0.5) 3px 5px, transparent 5px),
    linear-gradient(180deg, rgba(126, 200, 255, 0.3), rgba(126, 200, 255, 0.1));
  box-shadow: 0 0 4px rgba(126, 200, 255, 0.3);
}
.structure.ty-extractor::before {
  content: "";
  position: absolute; bottom: -4px; left: 50%;
  width: 0; height: 0; margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(126, 200, 255, 0.7);
}
.structure.ty-extractor::after {
  content: "";
  position: absolute; bottom: -9px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--am-cyan);
  animation: structure-drip 1.5s ease-in-out infinite;
}
@keyframes structure-drip {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.structure.ty-extractor .g, .structure.ty-extractor .tag { color: #7ec8ff; }
.structure.ty-extractor .tag { bottom: -22px; } /* clear the bit + drip */

.h2o-drip { position: absolute; z-index: 6; pointer-events: none; width: 3px; height: 3px; border-radius: 50%; background: var(--am-cyan); animation: h2o-rise 1s ease-out forwards; }
@keyframes h2o-rise {
  0% { opacity: 0.8; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}
/* structure HP bar — the enemy pattern (v0.30.6): hidden at full, fills
   left-to-right with hp/hpMax, color is accent only. */
.structure .hpbar {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 2px;
  background: rgba(6, 18, 28, 0.6); overflow: hidden;
  opacity: 0; transition: opacity 120ms ease-out;
  pointer-events: none;
}
.structure.hurt .hpbar { opacity: 1; }
.structure .hpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--am-red), var(--am-amber)); }
/* v0.31.9 (spec d): PHYSICAL chips — salvage + spill drops on the
   field. Small mineral coin with the value tag; taps pass through. */
.dropchip {
  position: absolute; z-index: 6; pointer-events: none;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px 2px 2px; border-radius: 12px;
  background: rgba(6, 18, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--am-font);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.dropchip .g {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 50%;
  font-size: 0.6rem; font-weight: 900; color: #06121c;
}
.dropchip .v { font-size: 0.55rem; font-weight: 800; color: var(--am-dim); letter-spacing: 0.02em; }
.dropchip.ty-fe .g { background: #c9d2dc; }
.dropchip.ty-co .g { background: #7fa6ff; }
.dropchip.ty-si .g { background: #e6c07a; }
.dropchip.ty-ti .g { background: #d9e6f2; }
.dropchip.ty-su .g { background: #c99bff; }

/* v0.31.10 (spec b2): FRAGMENTS — physical rock shards (mineral glyph +
   value) spawned by fragmentation. Same tap-through pickup semantics as
   chips; drawn as a small angular shard so it reads distinct from the
   round chip coin. */
.frag {
  position: absolute; z-index: 6; pointer-events: none;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px 2px 2px; border-radius: 4px;
  background: rgba(6, 18, 28, 0.9); border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--am-font);
  transform: translate(-50%, -50%) rotate(-6deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.frag .g {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 3px;
  font-size: 0.58rem; font-weight: 900; color: #06121c;
}
.frag .v { font-size: 0.52rem; font-weight: 800; color: var(--am-dim); letter-spacing: 0.02em; }
.frag.ty-fe .g { background: #c9d2dc; }
.frag.ty-co .g { background: #7fa6ff; }
.frag.ty-si .g { background: #e6c07a; }
.frag.ty-ti .g { background: #d9e6f2; }
.frag.ty-su .g { background: #c99bff; }
.frag.ty-ic .g { background: #9fdcf5; }

/* v0.31.10 (spec b3): ICE CHUNKS — portable ice lodes (50 H2O) that
   drift across the field; icy block look, tap-through like chips. */
.icechunk {
  position: absolute; z-index: 6; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 2px 8px;
  border-radius: 8px 4px 8px 4px;
  background: linear-gradient(135deg, #dff4ff, #8fd0f0 55%, #5fb4e0);
  border: 1px solid rgba(210, 240, 255, 0.8);
  font-family: var(--am-font);
  font-size: 0.56rem; font-weight: 900; color: #05364f; letter-spacing: 0.04em;
  transform: translate(-50%, -50%) rotate(-8deg);
  box-shadow: 0 0 10px rgba(143, 208, 240, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.icechunk .g { display: inline; }

/* v0.31.7 (spec j): BUILD POPUP overlay — fixed over the stage, rows
   >= 44px, touch-action manipulation, no text selection. */
#stage { position: relative; }
.build-popup {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 16, 0.72);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.build-popup[hidden] { display: none; }
.build-popup-card {
  width: min(320px, 88%);
  background: linear-gradient(170deg, #13293d, #0b1a29);
  border: 1px solid var(--am-line);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.build-rows { display: flex; flex-direction: column; gap: 8px; }
.build-row {
  min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(89, 216, 255, 0.06);
  border: 1px solid rgba(89, 216, 255, 0.25);
  border-radius: 10px;
  padding: 4px 10px;
  font-family: var(--am-font);
  color: var(--am-ink);
  text-align: left;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.build-row .g { font-size: 0.9rem; font-weight: 900; color: var(--am-amber); min-width: 18px; text-align: center; }
.build-row .n { flex: 1 1 auto; font-size: 0.78rem; letter-spacing: 0.04em; }
.build-row .n em { font-style: normal; color: var(--am-dim); font-size: 0.68rem; margin-left: 4px; }
.build-row .cost { font-size: 0.7rem; color: var(--am-cyan); white-space: nowrap; }
.build-row:disabled { opacity: 0.45; border-style: dashed; cursor: not-allowed; }
.build-row:disabled .cost { color: var(--am-dim); }
.build-row:not(:disabled):active { transform: scale(0.98); }
.build-row:focus-visible { outline: 2px solid var(--am-cyan); outline-offset: 1px; }
.build-row.ty-drone .g { color: var(--am-cyan); }
.build-row.ty-collector .g { color: #7be3a5; }
.build-row.ty-extractor .g { color: #7ec8ff; }
/* v0.31.8 (spec e): extractor mode selector — the live H2O row in the
   extractor cyan; future per-mineral rows dimmed as placeholders. */
.build-row.ty-h2o .g { color: #7ec8ff; }
.build-row.ty-h2o .n em { color: #7ec8ff; }
.build-row.future { opacity: 0.5; }
.build-row.future .g { color: var(--am-dim); }

.stage-feet { display: flex; flex-direction: column; gap: 6px; }
.cargo-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cargo-row .lbl { font-size: 0.62rem; color: var(--am-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 2px; font-family: var(--am-font); }
.ctrl-row { display: flex; gap: 8px; }
.ctrl-row .btn { flex: 1; min-height: 44px; font-size: 0.78rem; padding: 0 6px; }
.evt-line { min-height: 15px; font-size: 0.66rem; color: var(--am-amber); letter-spacing: 0.05em; text-align: center; font-family: var(--am-font); }
.evt-line.warn { color: var(--am-red); }
.evt-line.quiet { color: var(--am-dim); }

/* stage HUD action buttons (pause) */
.stage-hud .hud-btn {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  font-size: 0.85rem;
  border-radius: 10px;
  background: transparent;
  color: var(--am-cyan);
  border: 1px solid rgba(89, 216, 255, 0.35);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
/* v0.33.8 (T106): every game button, not just .hud-btn (#btn-charge is
   a .btn): no callout, no text selection on long press, no double-tap
   zoom delay. */
.game-shell .btn {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.stage-hud .hud-btn.off { color: var(--am-dim); border-color: rgba(140, 200, 255, 0.2); }
/* pause overlay: audio settings panel */
#pause .audio-panel { display: flex; flex-direction: column; gap: 8px; text-align: left; }
#pause .audio-panel .kv { font-size: 0.7rem; }
#pause input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--am-amber);
  background: transparent;
}

/* ---------- summary — ui-screens.js ---------- */
.summary-card { text-align: center; gap: 8px; display: flex; flex-direction: column; }
.verdict { font-size: clamp(1.25rem, 6vw, 1.8rem); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.verdict.clear { color: var(--am-ok); }
.verdict.destroyed { color: var(--am-red); }
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.sum-cell { background: rgba(140,200,255,0.06); border: 1px solid var(--am-line); border-radius: 10px; padding: 6px 4px; }
.sum-cell .k { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--am-dim); }
.sum-cell .v { font-size: clamp(0.95rem, 4vw, 1.25rem); font-weight: 800; color: var(--am-ink); font-variant-numeric: tabular-nums; }
.sum-cell .v small { font-size: 0.55em; color: var(--am-dim); font-weight: 600; }
.sum-notes { font-size: 0.72rem; color: var(--am-dim); line-height: 1.5; }
.sum-actions { display: flex; gap: 8px; }
.sum-actions .btn { flex: 1; }

/* ============ Phase A juice (v0.11) — ui-hud.js ============
   All feedback is CSS/DOM/WebAudio: no images, no canvas, no network.
   Motion effects are gated on prefers-reduced-motion (media block at the
   bottom): reduced-motion users get static fallbacks, no particles. */

/* beam energy flow: a stream of dashes running toward the target */
@keyframes beam-flow { to { stroke-dashoffset: -13; } }
.beam-line { animation: beam-flow 0.45s linear infinite; }

/* tip sparks: small dots at the beam's rock/enemy end */
.spark {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  pointer-events: none; z-index: 6; background: var(--am-cyan);
  box-shadow: 0 0 6px rgba(89, 216, 255, 0.9);
  animation: spark-rise 0.4s ease-out forwards;
}
.spark.combat { background: #fff; box-shadow: 0 0 6px var(--am-red); }
@keyframes spark-rise {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(0.2); }
}

/* ore chips: outer slides horizontally, inner arcs up then down to the ship */
.chip { position: absolute; z-index: 6; pointer-events: none; }
.chip .g {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 50%;
  font-family: var(--am-font); font-size: 0.62rem; font-weight: 900; color: #06121c;
}
.chip-outer { animation: chip-x 0.5s cubic-bezier(0.3, 0.6, 0.4, 1) forwards; }
.chip-inner { animation: chip-y 0.5s cubic-bezier(0.5, 0.05, 0.5, 1) forwards; }
@keyframes chip-x {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--dx, 0px)); }
}
@keyframes chip-y {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(calc(var(--dy, 0px) * -0.35)); }
  100% { transform: translateY(var(--dy, 0px)); }
}

/* enemy combat feedback: hit flash + knockback nudge */
.enemy {
  transform: translate(calc(-50% + var(--kb, 0px)), calc(-50% + var(--kby, 0px)));
  transition: transform 90ms ease-out;
}
.enemy .shape { transition: filter 60ms ease-out; }
.enemy.hit .shape {
  filter: brightness(2.6) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* enemy death: shards + lingering smoke */
.shard {
  position: absolute; width: 5px; height: 5px; border-radius: 2px;
  pointer-events: none; z-index: 6;
  animation: shard-fly 0.55s ease-out forwards;
}
@keyframes shard-fly {
  from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  to   { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(260deg); opacity: 0; }
}
.smoke {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 150, 170, 0.5), transparent 70%);
  pointer-events: none; z-index: 5;
  animation: smoke-fade 1.1s ease-out forwards;
}
@keyframes smoke-fade {
  from { opacity: 0.8; transform: scale(0.5); }
  to   { opacity: 0; transform: scale(1.6); }
}

/* cargo counter pulse when ore chips land */
.cargo-row.pulse { animation: counter-pulse 0.35s ease-out; }
@keyframes counter-pulse { 30% { transform: scale(1.08); } }

/* latch dread: red vignette overlay (static under reduced motion) */
#latch-vignette {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity 250ms;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(255, 45, 45, 0.5) 100%);
}
#latch-vignette.on { opacity: 1; animation: vignette-pulse 1s ease-in-out infinite; }
@keyframes vignette-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* first-clear celebration: banner + NEW BEST flash + confetti */
.clear-banner {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%);
  z-index: 45; text-align: center; pointer-events: none;
  animation: banner-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.clear-banner .big {
  font-size: clamp(1.3rem, 7vw, 2rem); font-weight: 900; letter-spacing: 0.12em;
  color: var(--am-ok); text-transform: uppercase;
  text-shadow: 0 0 14px rgba(89, 216, 155, 0.8);
}
.clear-banner .sub {
  font-size: 0.72rem; letter-spacing: 0.22em; color: var(--am-ink);
  text-transform: uppercase; margin-top: 4px;
}
@keyframes banner-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#s-best.newbest {
  display: inline-block; color: var(--am-amber);
  animation: newbest-flash 0.9s ease-out;
}
@keyframes newbest-flash {
  0%   { text-shadow: 0 0 0 rgba(255, 180, 94, 0); }
  35%  { text-shadow: 0 0 14px rgba(255, 180, 94, 0.95); transform: scale(1.25); }
  100% { text-shadow: 0 0 0 rgba(255, 180, 94, 0); transform: scale(1); }
}
.confetti {
  position: fixed; width: 7px; height: 11px; border-radius: 2px; z-index: 44;
  pointer-events: none; animation: confetti-fall 1.4s ease-in forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  to   { transform: translateY(var(--dy, 160px)) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* buy burst: quick scale pulse on the purchased tech button */
.btn.burst { animation: buy-burst 0.28s ease-out; }
@keyframes buy-burst { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* shake + reduced motion */
.field.shake { animation: am-shake 0.28s; }
@keyframes am-shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}
.msg-pop { position: absolute; z-index: 5; font-family: var(--am-font); font-size: 0.7rem; font-weight: 800; color: var(--am-cyan); pointer-events: none; animation: msg-rise 1.1s ease-out forwards; white-space: nowrap; }
.msg-pop.good { color: var(--am-ok); }
.msg-pop.bad { color: var(--am-red); }
@keyframes msg-rise { from { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-30px); } }

/* ============ Phase B — sector identity (v0.12) — sim.js ============
   New swarm units, the Hive Mother boss, sector hazards, win
   reasons. All shapes are shape+label (never color alone). */

/* leech: fast parasite, slithers */
.enemy.ty-leech .shape {
  width: 30px; height: 12px;
  background: linear-gradient(90deg, #ff5d5d, #7a1e1e);
  clip-path: polygon(0 30%, 26% 0, 100% 30%, 100% 70%, 26% 100%, 0 70%);
  filter: drop-shadow(0 0 5px rgba(255, 93, 93, 0.75));
  animation: leech-slither 0.5s ease-in-out infinite;
}
.enemy.ty-leech .tag { color: var(--am-red); }
@keyframes leech-slither { 50% { transform: translateY(2px) skewX(10deg); } }

/* splitter: faceted core that cracks in two */
.enemy.ty-splitter .shape {
  width: 30px; height: 30px;
  background: repeating-conic-gradient(#ffb45e 0 45deg, #5a2e0a 45deg 90deg);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(0 0 5px rgba(255, 180, 94, 0.7));
  animation: splitter-turn 1.1s linear infinite;
}
.enemy.ty-splitter .tag { color: var(--am-amber); }
@keyframes splitter-turn { to { transform: rotate(360deg); } }

/* weaver: web cross-hair that snags your beam */
.enemy.ty-weaver .shape {
  width: 30px; height: 30px;
  background:
    linear-gradient(45deg, transparent 44%, var(--am-amber) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--am-amber) 44% 56%, transparent 56%),
    radial-gradient(circle, var(--am-amber) 0 24%, transparent 25%);
  filter: drop-shadow(0 0 5px rgba(232, 161, 58, 0.7));
  animation: weaver-throb 0.9s ease-in-out infinite;
}
.enemy.ty-weaver .tag { color: var(--am-amber); }
@keyframes weaver-throb { 50% { transform: scale(0.82); opacity: 0.75; } }

/* v0.30.1 (ADR-040): shielded drone — red core under an energy bubble;
   the bubble class is removed when a PD/sentry shot strips the shield */
.enemy.ty-shielded .shape {
  border-radius: 50%; background: var(--am-red); border: 2px solid #ffd0d0;
  animation: drone-spin 1.4s linear infinite;
}
.enemy.ty-shielded .tag { color: var(--am-cyan); }
.enemy.shielded .shape::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(89, 216, 255, 0.85);
  box-shadow: 0 0 10px rgba(89, 216, 255, 0.6), inset 0 0 8px rgba(89, 216, 255, 0.35);
}
.enemy.shielded.hit .shape::after { box-shadow: 0 0 16px rgba(89, 216, 255, 0.9); }

/* v0.30.1 (ADR-040): rockbreaker — heavy slab, slow, shatters belt rocks */
.enemy.ty-rockbreaker { width: 52px; height: 52px; }
.enemy.ty-rockbreaker .shape {
  width: 40px; height: 34px;
  background: linear-gradient(160deg, #c3d0de, #5b6b7c);
  border: 2px solid #dbe6f2;
  clip-path: polygon(8% 12%, 92% 12%, 100% 55%, 78% 100%, 22% 100%, 0 55%);
  filter: drop-shadow(0 0 6px rgba(200, 215, 230, 0.55));
  animation: breaker-pulse 1.2s ease-in-out infinite;
}
.enemy.ty-rockbreaker .tag { color: var(--am-cyan); }
@keyframes breaker-pulse { 50% { transform: scale(0.9); } }

/* v0.31.14 (spec i2, G): mite/brute/raider — the three new content
   types. MITE (the cocoon hatchling, v0.31.11) finally gets a shape:
   a tiny red dart, weakest + fastest. BRUTE: a heavy dark slab,
   below rockbreaker on hp but hits harder. RAIDER: a slim amber
   chevron, fast diver. */
.enemy.ty-mite { width: 22px; height: 22px; }
.enemy.ty-mite .shape {
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #ff5d5d;
  filter: drop-shadow(0 0 4px rgba(255, 93, 93, 0.8));
  animation: mite-skitter 0.4s ease-in-out infinite;
}
.enemy.ty-mite .tag { color: var(--am-red); }
@keyframes mite-skitter { 50% { transform: translateY(-2px) rotate(12deg); } }

.enemy.ty-brute { width: 48px; height: 48px; }
.enemy.ty-brute .shape {
  width: 38px; height: 30px;
  background: linear-gradient(160deg, #8a5a3b, #4a2410);
  border: 2px solid #c98a5e;
  clip-path: polygon(10% 0, 90% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
  filter: drop-shadow(0 0 6px rgba(201, 138, 94, 0.55));
  animation: breaker-pulse 1.1s ease-in-out infinite;
}
.enemy.ty-brute .tag { color: var(--am-amber); }

.enemy.ty-raider .shape {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #ffd27a, #b06a00);
  clip-path: polygon(100% 50%, 62% 12%, 22% 12%, 40% 50%, 22% 88%, 62% 88%);
  filter: drop-shadow(0 0 5px rgba(255, 210, 122, 0.7));
  animation: raider-drift 0.55s ease-in-out infinite;
}
.enemy.ty-raider .tag { color: var(--am-amber); }
@keyframes raider-drift { 50% { transform: translateY(-3px) skewX(6deg); } }

/* Hive Mother boss: large crown, exposed-core weak-point cycle */
.enemy.ty-queen { width: 104px; height: 104px; z-index: 4; }
.enemy.ty-queen .shape {
  width: 96px; height: 96px;
  background: radial-gradient(circle at 50% 35%, #6a1040, #2b0518);
  border: 3px solid #ff5d5d;
  clip-path: polygon(50% 0, 84% 18%, 84% 62%, 50% 100%, 16% 62%, 16% 18%);
  box-shadow: 0 0 24px rgba(255, 93, 93, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.enemy.ty-queen .core {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #ffd0d0, #ff5d5d);
  box-shadow: 0 0 10px rgba(255, 93, 93, 0.9);
  transition: opacity 120ms, filter 120ms;
}
.enemy.ty-queen:not(.weak) .core { opacity: 0.25; filter: grayscale(0.7); }
.enemy.ty-queen.weak .core { opacity: 1; animation: core-flash 0.5s ease-in-out infinite; }
@keyframes core-flash { 50% { box-shadow: 0 0 28px rgba(255, 255, 255, 0.95); } }
.enemy.ty-queen .tag { bottom: -16px; font-size: 0.56rem; color: #ffb45e; letter-spacing: 0.12em; }
.enemy.ty-queen.latched .shape { animation: none; }

/* ---- sector hazards — sim.js ---- */
.vent {
  position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 60, 0.85), rgba(180, 60, 20, 0.25) 65%, transparent 70%);
  border: 1px dashed rgba(255, 150, 80, 0.6);
  pointer-events: none; z-index: 1;
  animation: vent-flicker 1.6s ease-in-out infinite;
}
@keyframes vent-flicker { 0%,100% { opacity: 0.75; } 30% { opacity: 1; } 60% { opacity: 0.55; } }
.well {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(201, 155, 255, 0.4);
  background: radial-gradient(circle, rgba(201, 155, 255, 0.14), transparent 68%);
  pointer-events: none; z-index: 1;
  animation: well-pulse 2.4s ease-in-out infinite;
}
@keyframes well-pulse { 50% { border-color: rgba(201, 155, 255, 0.75); } }
.pocket {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.55), transparent 70%);
  border: 1px solid rgba(140, 200, 255, 0.15);
  pointer-events: none; z-index: 0;
}
.node.dark { opacity: 0.22; filter: brightness(0.5); transition: opacity 200ms, filter 200ms; }
.field.abyss-tint { box-shadow: inset 0 0 160px rgba(255, 45, 45, 0.28); }
/* v0.30.2 (ADR-041): EMP pulse — offline turrets dim (never color alone:
   the dim + desaturation reads even for colorblind players) + a soft
   field flash marks the pulse moment. */
.structure.ty-turret.emp { opacity: 0.35; filter: grayscale(0.85) brightness(0.55); border-color: rgba(90, 110, 130, 0.6); }
.structure.ty-turret.emp .g { color: rgba(90, 110, 130, 0.6); }
.field.emp-pulse { animation: emp-flash 0.6s ease-out; }
@keyframes emp-flash { 0% { box-shadow: inset 0 0 70px rgba(120, 200, 255, 0.28); } 100% { box-shadow: inset 0 0 0 rgba(120, 200, 255, 0); } }
.shard-ice {
  position: absolute; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, #cfefff, #79c4e8);
  box-shadow: 0 0 8px rgba(127, 196, 232, 0.8);
  pointer-events: none; z-index: 2; opacity: 0.85;
}
.sum-reason { font-family: var(--am-font); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.2em; color: var(--am-amber); text-transform: uppercase; margin: -2px 0 2px; }
.sum-reason.ok { color: var(--am-ok); }

@media (prefers-reduced-motion: reduce) {
  .field.shake, .node.cocoon::after, .enemy.ty-drone .shape, .enemy.ty-striker .shape,
  .node.ty-ha, .msg-pop, .beam-line,
  .enemy.ty-leech .shape, .enemy.ty-splitter .shape, .enemy.ty-weaver .shape,
  .enemy.ty-mite .shape, .enemy.ty-brute .shape, .enemy.ty-raider .shape,
  .enemy.ty-queen .core, .vent, .well, .field.emp-pulse,
  .lock-ring { animation: none !important; transition: none !important; }
  /* Phase A static fallbacks: no particles, no pulses, no celebration motion */
  .spark, .chip, .chip-outer, .chip-inner, .shard, .smoke, .confetti,
  .cargo-row.pulse, .clear-banner, #s-best.newbest, .btn.burst,
  .h2o-fill.low,
  #latch-vignette.on { animation: none !important; }
  .enemy { transition: none !important; }
}
/* ============ Phase C — meta expansion (v0.13) — ui-screens.js ============
   New screens: salvage choice, shop, feats, stats, contracts.
   Same fixed-shell rules: inner scroll areas only, one screen visible. */
/* v0.21: bottom icon nav (5 panels, one state per screen).
   The nav is a flex child of the shell: it shows only on nav-panel
   screens; the main slot shrinks to fit (never overlapped). */
.bottom-nav {
  display: none;
  flex: none;
  border-top: 1px solid var(--am-line);
  background: rgba(6, 18, 28, 0.97);
  padding: 4px var(--rr-space-2) var(--rr-safe-min-bottom);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rr-safe-min-bottom));
}
.bottom-nav.on { display: flex; }
.bn-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  border-top: 2px solid transparent;
  color: var(--am-dim);
  font-family: var(--am-font);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.bn-item .bn-ico { font-size: 1.15rem; line-height: 1; }
.bn-item .bn-lbl { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bn-item.on { color: var(--am-amber); border-top-color: var(--am-amber); }
.bn-item.on .bn-ico { filter: drop-shadow(0 0 6px rgba(255, 180, 94, 0.55)); }
/* v0.21: Records panel sub-tabs (feats + stats + contracts) */
.rec-tabs { display: flex; gap: 6px; flex: none; }
.rec-tab {
  flex: 1;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-family: var(--am-font);
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--am-dim);
  border: 1px solid var(--am-line);
  border-radius: 10px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.rec-tab.on { color: var(--am-cyan); border-color: rgba(89, 216, 255, 0.5); background: rgba(89, 216, 255, 0.08); }
.rec-body { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 8px; }
.rec-body.on { display: flex; }
/* v0.21: settings overlay (hidden menu — gear in the top bar) */
#settings-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background: rgba(4, 10, 18, 0.9); backdrop-filter: blur(3px);
  padding: 20px;
}
#settings-overlay.on { display: flex; }
.set-card { max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.set-card .btn { min-height: 44px; width: 100%; }
.set-hint { font-size: 0.7rem; color: var(--am-dim); line-height: 1.45; margin: 0; }
.head-row { display: flex; align-items: center; gap: 8px; }
.head-row .hud-title { flex: 1; }
.vlist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--am-amber) rgba(6, 18, 28, 0.55);
}
.vlist::-webkit-scrollbar { width: 10px; }
.vlist::-webkit-scrollbar-track { background: rgba(6, 18, 28, 0.55); border-radius: 999px; }
.vlist::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(6, 18, 28, 0.85);
  background: linear-gradient(90deg, transparent 42%, rgba(6, 18, 28, 0.5) 42% 58%, transparent 58%),
    radial-gradient(circle at 35% 30%, #ffd9a8, var(--am-amber) 55%, #b9791f);
}
/* salvage choice cards */
.salvage-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--am-panel);
  border: 1px solid var(--am-line);
  color: var(--am-ink);
  text-align: left;
  font-family: var(--am-font);
}
.salvage-card .n { font-size: 0.8rem; font-weight: 800; color: var(--am-amber); letter-spacing: 0.05em; }
.salvage-card .d { font-size: 0.68rem; color: var(--am-dim); line-height: 1.35; }
.salvage-card:active { transform: scale(0.98); }
/* shop */
.shop-sec { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--am-cyan); font-family: var(--am-font); margin-top: 2px; }
.shop-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--am-panel);
  border: 1px solid var(--am-line);
}
.shop-card .swatch {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--am-line);
  background: linear-gradient(170deg, #1d3f5c, #0e2133);
}
.shop-card.livery-amber .swatch { border-color: var(--am-amber); box-shadow: 0 0 8px rgba(255,180,94,0.6); }
.shop-card.livery-jade .swatch { border-color: #7dffc4; box-shadow: 0 0 8px rgba(125,255,196,0.6); }
.shop-card.livery-void .swatch { border-color: #c99bff; box-shadow: 0 0 8px rgba(201,155,255,0.6); }
/* v0.30.17 (ADR-056): premium-tier paint swatches — solar (orange-white),
   tidal (deep teal), arkane (dark red) */
.shop-card.livery-solar .swatch { border-color: #ffd9a0; box-shadow: 0 0 8px rgba(255,217,160,0.6); }
.shop-card.livery-tidal .swatch { border-color: #59d8c2; box-shadow: 0 0 8px rgba(89,216,194,0.6); }
.shop-card.livery-arkane .swatch { border-color: #e05555; box-shadow: 0 0 8px rgba(224,85,85,0.6); }
.shop-card .meta { flex: 1; min-width: 0; }
.shop-card .meta .n { font-size: 0.78rem; font-weight: 700; color: var(--am-ink); }
.shop-card .meta .d { font-size: 0.62rem; color: var(--am-dim); }
.shop-card .price { font-size: 0.68rem; color: var(--am-amber); font-family: var(--am-font); white-space: nowrap; }
.shop-card .btn { min-height: 44px; padding: 0 10px; font-size: 0.66rem; flex: none; }
.shop-card.owned { opacity: 0.9; border-color: rgba(125,255,196,0.4); }
.shop-card .equip { border-color: rgba(125,255,196,0.6); }
/* v0.30.9 (ADR-048): exchange rows on the hauler — a number input for
   the meta amount, a live grant preview, and a 44px Convert button. */
.exchange-row { gap: 6px; }
.exchange-row .ex-amt {
  flex: none;
  width: 64px;
  min-height: 44px;
  padding: 0 6px;
  background: rgba(6, 18, 28, 0.55);
  color: var(--am-ink);
  border: 1px solid rgba(140, 200, 255, 0.25);
  border-radius: 10px;
  font-family: var(--am-font);
  font-size: 0.8rem;
  text-align: center;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.exchange-row .ex-amt:focus-visible { outline: 2px solid var(--am-cyan); outline-offset: 1px; }
.exchange-row .ex-gain {
  flex: none;
  color: var(--am-cyan);
  font-size: 0.66rem;
  font-family: var(--am-font);
  white-space: nowrap;
}
.exchange-row .btn { padding: 0 10px; font-size: 0.66rem; }
/* feats */
.feat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--am-panel);
  border: 1px solid var(--am-line);
}
.feat-row .f-main { flex: 1; min-width: 0; }
.feat-row .f-name { font-size: 0.76rem; font-weight: 700; color: var(--am-ink); }
.feat-row .f-desc { font-size: 0.62rem; color: var(--am-dim); line-height: 1.3; }
.feat-row .f-prog { font-size: 0.6rem; color: var(--am-amber); font-family: var(--am-font); }
.feat-row .f-state { flex: none; font-size: 0.62rem; font-weight: 800; font-family: var(--am-font); white-space: nowrap; }
.feat-row.claimed { border-color: rgba(125,255,196,0.4); }
.feat-row.claimed .f-state { color: var(--am-ok); }
.feat-row.locked .f-state { color: var(--am-dim); }
/* stats */
.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 2px;
  font-size: 0.72rem;
  border-bottom: 1px dashed rgba(140,200,255,0.12);
}
.stat-row .k { color: var(--am-dim); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.64rem; }
.stat-row .v { color: var(--am-ink); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--am-font); }
.stat-row .v small { color: var(--am-dim); font-weight: 600; }
/* contracts */
.bounty-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--am-panel);
  border: 1px solid var(--am-line);
}
.bounty-row .b-top { display: flex; align-items: center; gap: 8px; }
.bounty-row .b-name { flex: 1; font-size: 0.78rem; font-weight: 800; color: var(--am-amber); letter-spacing: 0.05em; }
.bounty-row .b-award { font-size: 0.66rem; color: var(--am-cyan); font-family: var(--am-font); white-space: nowrap; }
.bounty-row .b-desc { font-size: 0.64rem; color: var(--am-dim); }
.bounty-row .b-prog { font-size: 0.62rem; color: var(--am-amber); font-family: var(--am-font); }
.bounty-row .btn { min-height: 44px; font-size: 0.68rem; }
/* toast (achievement / purchase feedback) */
#toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%) translateY(24px);
  max-width: min(88vw, 480px);
  background: linear-gradient(170deg, #14303f, #0d1f2c);
  border: 1px solid var(--am-amber);
  color: var(--am-ink);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 0.72rem;
  font-family: var(--am-font);
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 14px rgba(255,180,94,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast .t-cr { color: var(--am-amber); font-weight: 800; }
#toast .t-ha { color: #7dffc4; font-weight: 800; } /* v0.31.16: hallostrix feat payouts */
/* twin beam + charge visuals */
.beam-line.twin { stroke: var(--am-amber); stroke-dasharray: 3 8; opacity: 0.85; filter: drop-shadow(0 0 3px rgba(255,180,94,0.7)); }
.beam-line.charged { stroke-width: 4; filter: drop-shadow(0 0 10px rgba(89,216,255,1)); }
#btn-charge { flex: none; min-width: 96px; }
#btn-charge.on { background: linear-gradient(170deg, var(--am-amber), #c47a24); color: #06121c; border-color: var(--am-amber); }
/* livery on the ship hull */
.ship .hull.livery-amber { border-color: var(--am-amber); background: linear-gradient(170deg, #4a3a22, #171006); }
.ship .hull.livery-amber::after { border-bottom-color: var(--am-amber); }
.ship .hull.livery-jade { border-color: #7dffc4; background: linear-gradient(170deg, #12402f, #04150e); }
.ship .hull.livery-jade::after { border-bottom-color: #7dffc4; }
.ship .hull.livery-void { border-color: #c99bff; background: linear-gradient(170deg, #2a1d4a, #0b0618); }
.ship .hull.livery-void::after { border-bottom-color: #c99bff; }
/* v0.30.17 (ADR-056): premium paints on the hull — solar (orange-white),
   tidal (deep teal), arkane (dark red) */
.ship .hull.livery-solar { border-color: #ffd9a0; background: linear-gradient(170deg, #5c3a1c, #1c0f05); }
.ship .hull.livery-solar::after { border-bottom-color: #ffd9a0; }
.ship .hull.livery-tidal { border-color: #59d8c2; background: linear-gradient(170deg, #0d3a33, #031512); }
.ship .hull.livery-tidal::after { border-bottom-color: #59d8c2; }
.ship .hull.livery-arkane { border-color: #e05555; background: linear-gradient(170deg, #3d1010, #140404); }
.ship .hull.livery-arkane::after { border-bottom-color: #e05555; }
/* ============ Phase D — endgame (v0.14) — run.js ============
   Deep Belt endless, Iron Belt NG+ toggle + banner, daily contracts
   progress bars, death recap line, first-run onboarding overlay. */
.ngp-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ngp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--am-line);
  background: var(--am-panel);
  color: var(--am-ink);
  font-family: var(--am-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ngp-toggle .ngp-k { color: var(--am-dim); }
.ngp-toggle .ngp-v { color: var(--am-ink); }
.ngp-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
/* v0.31.16 (spec a2): NG+ entry ha-cost label inside the toggle —
   "25 ✦" when affordable (short), "costs 25 ✦" when not (full). */
.ngp-cost { font-size: 0.6rem; font-weight: 600; color: var(--am-dim); }
.ngp-cost.short { color: #7dffc4; }
.ngp-toggle.on {
  border-color: rgba(255, 180, 94, 0.55);
  background: rgba(255, 180, 94, 0.1);
}
.ngp-toggle.on .ngp-v { color: var(--am-amber); }
.ngp-info {
  min-height: 44px;
  min-width: 44px;
  border-radius: 999px;
  border: 1px solid var(--am-line);
  background: transparent;
  color: var(--am-dim);
  font-family: var(--am-font);
  font-size: 0.85rem;
}
.ngp-desc { font-size: 0.62rem; color: var(--am-dim); line-height: 1.35; margin: 0; text-align: center; }
.ngp-banner {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-align: center;
  color: var(--am-amber); border: 1px solid rgba(255, 180, 94, 0.5);
  border-radius: 999px; padding: 5px 8px; background: rgba(255, 180, 94, 0.08);
  font-family: var(--am-font);
}
.endless-card { border-color: rgba(89, 216, 255, 0.45); }
.endless-card .num { color: var(--am-cyan); font-size: 1.05rem; }
/* death recap: one plain-language line on the run summary */
.sum-recap {
  font-family: var(--am-font); font-size: 0.7rem; color: var(--am-ink);
  background: rgba(140, 200, 255, 0.07); border: 1px solid var(--am-line);
  border-radius: 10px; padding: 6px 8px; text-align: center;
}
/* v0.30.7 (ADR-046): clean-round streak line on the summary — amber
   kicker accent, hidden until a run with a streak resolves */
.streak-line {
  font-family: var(--am-font); font-size: 0.7rem; color: var(--am-amber);
  background: rgba(255, 180, 94, 0.08); border: 1px solid rgba(255, 180, 94, 0.35);
  border-radius: 10px; padding: 6px 8px; text-align: center;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.streak-line b { color: #ffd28a; font-weight: 800; }
/* daily contracts progress bar */
.b-bar { height: 6px; border-radius: 999px; background: rgba(140, 200, 255, 0.12); overflow: hidden; }
.b-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--am-amber), #c47a24); border-radius: 999px; transition: width 160ms linear; }
.b-bar.done i { background: linear-gradient(90deg, var(--am-ok), #2f9e6b); }
/* first-run onboarding overlay (fixed over the shell, one step at a time) */
#onboarding {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  background: rgba(4, 10, 18, 0.88); backdrop-filter: blur(3px);
  padding: 20px;
}
#onboarding.on { display: flex; }
.ob-card {
  width: 100%; max-width: 330px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--am-panel); border: 1px solid var(--am-amber);
  border-radius: 14px; padding: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.ob-title {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--am-amber); display: flex; justify-content: space-between; align-items: baseline;
}
.ob-title .sub { font-size: 0.62rem; color: var(--am-dim); letter-spacing: 0.08em; font-weight: 600; }
.ob-step { display: flex; gap: 10px; align-items: flex-start; font-size: 0.74rem; color: var(--am-ink); line-height: 1.45; }
.ob-step b { color: var(--am-cyan); }
.ob-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(89, 216, 255, 0.15); border: 1px solid rgba(89, 216, 255, 0.5);
  color: var(--am-cyan); font-family: var(--am-font); font-weight: 800; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
#btn-ob-skip { min-height: 44px; }
/* v0.17: New Game wipe-save overlay (two-step armed confirm, spec §7).
   Same fixed-overlay pattern as onboarding — never a browser dialog. */
#newgame-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  background: rgba(4, 10, 18, 0.9); backdrop-filter: blur(3px);
  padding: 20px;
}
#newgame-overlay.on { display: flex; }
.ng-card { border-color: rgba(255, 93, 93, 0.65); max-width: 330px; }
.ng-card .ob-title { color: var(--am-red); }
.ng-intro {
  font-size: 0.74rem; color: var(--am-ink); line-height: 1.45;
  background: rgba(255, 93, 93, 0.08); border: 1px solid rgba(255, 93, 93, 0.35);
  border-radius: 10px; padding: 8px 10px;
}
.ng-list {
  margin: 0; padding: 0 0 0 18px;
  font-size: 0.7rem; color: var(--am-ink); line-height: 1.6;
}
.ng-keep { font-size: 0.66rem; color: var(--am-ok); margin: 0; }
.ng-actions { display: flex; gap: 8px; }
.ng-actions .btn { flex: 1; min-height: 44px; }
/* v0.17: cargo capacity readout chip on the stage HUD */
.cap-chip {
  border: 1px dashed rgba(255, 180, 94, 0.55);
  color: var(--am-amber); background: rgba(255, 180, 94, 0.08);
  font-variant-numeric: tabular-nums;
}
/* v0.18: round briefing screen (one state per screen — replaces the stage
   slot; the shell never scrolls). Fits 360x640: compact card, 44px+ ENGAGE. */
.brief-card {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.brief-objective {
  font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--am-cyan);
  line-height: 1.2;
}
.brief-line {
  font-family: var(--am-font);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--am-ink);
  background: rgba(140, 200, 255, 0.07);
  border: 1px solid var(--am-line);
  border-radius: 10px;
  padding: 6px 10px;
  line-height: 1.45;
}
.brief-line.hazard { border-color: rgba(255, 180, 94, 0.4); color: var(--am-amber); }
.brief-line.enemies { color: var(--am-ink); }
/* v0.30.7 (ADR-046): clean-round streak line on the briefing — cyan to
   echo the objective color; always present on sector rounds */
.brief-line.streak { border-color: rgba(89, 216, 255, 0.4); color: var(--am-cyan); }
.brief-controls {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--am-dim);
  text-transform: uppercase;
}
#btn-engage {
  min-height: 48px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
/* v0.20: interaction pass (spec §8). The autopilot pick row + mid-round
   switch button shipped in v0.20 and were removed in v0.22.1 (ADR-020,
   manual-only beam — the player selects every target). The beam heat
   bar + overheat tint shipped in v0.20 and were removed in v0.22.2
   (ADR-021 — the beam never overheats). */
/* v0.19: between-round screen (perk pick + round shop). Two phases in
   one screen; the vlist scrolls internally, the shell never scrolls. */
.between-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.between-body .vlist { flex: 1 1 auto; }
.between-body .brief { flex: none; }
#btn-between-continue, #btn-between-skip { min-height: 48px; }
#selftest { display: none; }