/* P25X Live -- deep-space tracking station.

   ANIMATION AUDIT (photosensitivity: nothing may flash more than 3x/s; every
   repeating effect below has a period >= 1.5 s, changes opacity/position
   smoothly, never full-screen, never red). All are disabled under
   prefers-reduced-motion and the manual "Reduce motion" toggle (body.rm).
   All pause 30 s after the last over (body.calm, js/main.js) until the next call.

   CSS
   - .live-dot / .pill .dot  pulse      2.0 s ease-in-out, opacity 0.45-1 + soft glow
   - .tx-call                callglow   2.4 s ease-in-out, text-shadow brightness only
   - .pill.bad .dot          pulse      2.0 s (same keyframes as live-dot)
   - .radar .sweep           sweep      4.0 s linear rotation (no luminance change)
   - .radar .blip            blip       4.0 s, fades in/out once per sweep
   - .badge                  badgeglow  3.0 s ease-in-out, box-shadow only
   - .crew.on-air            airglow    2.0 s ease-in-out, border glow
   - .tx-card, .crew         enter      0.5 s one-shot fade/slide (not repeating)
   - .quiet-s                breathe    3.0 s opacity 0.55-1
   JS canvas (period noted in the source too)
   - starfield twinkle       per star sine, 3-9 s, <=35 % amplitude; drift continuous
   - nebula drift            ~90-110 s
   - Reflector corona        breathe 3 s, rays rotate 40 s/turn
   - station halo            breathe 4 s, +-10 % alpha
   - station moons           orbit 12-36 s
   - outer tick ring         rotate 60 s/turn
   - on-air ripples          each ring 2 s, one new ring per 1 s, fading out
   - beam comets             one volley per 1.6 s (moving dot, constant brightness)
   - particle burst          one-shot per key-up, 1.4 s soft fade-out
   - waveform/spectrum       continuous smooth motion (bar heights, not brightness)
   - stats count-up 0.9 s, timeline bar grow 0.7 s: one-shot on range change
   Rocket Scope tab (js/tab-scope.js, css/tab-scope.css)
   - open voice bar          breathe    2.0 s, alpha 0.75-1, only while a call is open
   - arrival glow/ring/sparks one-shot 1.4 s fade; max 3 start per second; never on errors
   - lane wobble             one-shot, same 1.4 s envelope
   - .rs-led.hot             one-shot 450 ms light-up (re-arming holds it lit, no flicker)
   - .rs-row.fresh rsIn      one-shot 1.2 s, max one per 400 ms
   reduced motion: none of the above; canvas redraws at 1 fps
*/

:root {
  --bg: #02030a;
  --panel: rgba(8, 14, 32, 0.72);
  --panel-b: rgba(77, 232, 255, 0.22);
  --ink: #e6f1ff;
  --muted: #9fb3cc;
  --dim: #6f7f99;
  --cyan: #4de8ff;
  --teal: #39ffb0;
  --gold: #ffcf7a;
  --amber: #ffb35c;
  --violet: #b38cff;
  --pink: #ff7ad9;
  --warn: #ffd166;
  --bad: #ff8fc8;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  --fs: 1rem;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 400 var(--fs)/1.45 var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--gold); color: #000; padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }
.mono { font-family: var(--mono); }

/* ---------- header / bridge ---------- */
.bridge {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px 24px; align-items: center;
  padding: 14px clamp(12px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(2, 6, 20, 0.92), rgba(2, 6, 20, 0.55));
  border-bottom: 1px solid var(--panel-b);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 44px; height: 44px; filter: drop-shadow(0 0 6px rgba(77, 232, 255, 0.5)); }
h1 { margin: 0; font: 800 1.55rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
h1 span { color: var(--cyan); text-shadow: 0 0 12px rgba(77, 232, 255, 0.6); }
.slogan { margin: 4px 0 0; font: 500 0.82rem/1.2 var(--mono); color: var(--gold); letter-spacing: 0.04em; }
.demo-banner {
  text-align: center; padding: 8px 12px; font: 700 0.8rem/1.3 var(--mono); letter-spacing: 0.08em;
  color: #1a0b00; background: var(--warn);
}
.demo-banner[hidden] { display: none; }
.demo-badge {
  font: 800 0.75rem/1 var(--mono); letter-spacing: 0.2em; padding: 6px 10px; border-radius: 6px;
  color: #1a0b00; background: var(--warn); box-shadow: 0 0 14px rgba(255, 209, 102, 0.55);
}

.telemetry { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font: 600 0.74rem/1 var(--mono); letter-spacing: 0.08em; white-space: nowrap;
  border: 1px solid rgba(159, 179, 204, 0.3); background: rgba(5, 10, 26, 0.7);
}
.pill-k { color: var(--muted); }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.pill.ok { border-color: rgba(57, 255, 176, 0.45); color: var(--teal); }
.pill.ok .dot { background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse 2s ease-in-out infinite; }
.pill.warn { border-color: rgba(255, 209, 102, 0.4); color: var(--warn); }
.pill.warn .dot { background: var(--warn); }
.pill.bad { border-color: rgba(255, 143, 200, 0.5); color: var(--bad); }
.pill.bad .dot { background: var(--bad); animation: pulse 2s ease-in-out infinite; }
.pill.clock { color: var(--cyan); }

.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ctl {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(77, 232, 255, 0.35); background: rgba(10, 22, 48, 0.75);
  font: 600 0.8rem/1 var(--sans); letter-spacing: 0.03em;
}
.ctl svg { width: 18px; height: 18px; }
.ctl:hover { border-color: var(--cyan); }
.ctl[aria-pressed="true"] { background: rgba(77, 232, 255, 0.18); border-color: var(--cyan); color: #fff; box-shadow: 0 0 10px rgba(77, 232, 255, 0.35); }
.ctl:disabled { cursor: default; opacity: 0.8; }
.vol input { width: 96px; accent-color: var(--cyan); vertical-align: middle; }

/* ---------- tabs (#live / #scope / #messages / #help, js/main.js showView) ---------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px clamp(12px, 3vw, 32px) 0;
  font: 600 0.85rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.tabs a {
  color: var(--muted); text-decoration: none; padding: 9px 14px;
  border: 1px solid rgba(77, 232, 255, 0.25); border-radius: 10px; background: rgba(8, 14, 32, 0.6);
}
.tabs a:hover { border-color: var(--cyan); color: var(--ink); }
.tabs a[aria-current="page"] { background: rgba(77, 232, 255, 0.18); border-color: var(--cyan); color: #fff; box-shadow: 0 0 10px rgba(77, 232, 255, 0.35); }
.view { padding: 16px clamp(12px, 3vw, 32px) 24px; max-width: 1600px; margin: 0 auto; }
body.kiosk .tabs { display: none; }

/* ---------- layout ---------- */
.deck {
  display: grid; gap: 16px; padding: 16px clamp(12px, 3vw, 32px) 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "map map map map map map map hero hero hero hero hero"
    "time time time time time time time time time time time time"
    "crew crew crew crew crew crew crew log log log log log";
  max-width: 1800px; margin: 0 auto;
}
.p-map { grid-area: map; }
.p-hero { grid-area: hero; }
.p-time { grid-area: time; }
.p-crew { grid-area: crew; }
.p-log { grid-area: log; }

.panel {
  position: relative; min-width: 0; padding: 14px 16px 16px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--panel-b);
  box-shadow: inset 0 0 40px rgba(77, 232, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.4);
}
/* corner brackets */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 2px solid rgba(77, 232, 255, 0.6);
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r); }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r); }
.ph {
  margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
  font: 700 0.8rem/1.2 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
}
.ph-meta { margin-left: auto; color: var(--muted); letter-spacing: 0.08em; font-weight: 500; }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ph-row .ph { margin: 0; }
.live-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 10px var(--gold); animation: pulse 2s ease-in-out infinite;
}

/* ---------- map ---------- */
.map-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px; }
.map-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font: 500 0.72rem/1.2 var(--sans); border: 1px solid rgba(159, 179, 204, 0.22); background: rgba(5, 10, 26, 0.6);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.chip-id { font-family: var(--mono); color: var(--muted); }
.chip-s { font: 700 0.62rem/1 var(--mono); letter-spacing: 0.1em; color: var(--dim); }
.chip.on .dot { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.chip.on .chip-s { color: var(--teal); }
.chip.tx { border-color: rgba(255, 207, 122, 0.6); }
.chip.tx .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.chip.tx .chip-s { color: var(--gold); }
.chip.off { color: var(--dim); }

/* ---------- now transmitting ---------- */
.p-hero { display: flex; flex-direction: column; }
.tx-stack { display: flex; flex-direction: column; gap: 10px; }
.tx-card {
  position: relative; padding: 14px 16px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 179, 92, 0.16), rgba(10, 16, 36, 0.85) 60%);
  border: 1px solid rgba(255, 207, 122, 0.45);
  box-shadow: 0 0 24px rgba(255, 179, 92, 0.12);
  animation: enter 0.5s ease-out both;
}
.tx-head { display: flex; align-items: center; gap: 8px; }
.tx-kicker { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.22em; color: var(--gold); }
.tg-badge {
  margin-left: auto; padding: 4px 9px; border-radius: 6px; font: 700 0.75rem/1 var(--mono);
  color: #d9ccff; border: 1px solid rgba(179, 140, 255, 0.55); background: rgba(179, 140, 255, 0.12);
}
.tx-call {
  margin-top: 8px; font: 800 clamp(2.4rem, 5vw, 4rem)/1 var(--mono); letter-spacing: 0.06em; color: #fff4dc;
  animation: callglow 2.4s ease-in-out infinite; overflow-wrap: anywhere;
}
.tx-call.unid { color: var(--muted); font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: 0.12em; }
.tx-name { min-height: 1.4em; font: 600 1.25rem/1.3 var(--sans); color: var(--gold); }
.tx-via { margin-top: 2px; color: var(--muted); font-size: 0.9rem; }
.tx-via b { color: var(--ink); font-weight: 600; }
.tx-via .k { color: var(--dim); }
.tx-wave { display: block; width: 100%; height: 72px; margin-top: 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(77, 232, 255, 0.15); }
.tx-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.tx-foot .k { font: 600 0.7rem/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }
.tx-timer { font: 700 1.9rem/1 var(--mono); color: var(--cyan); text-shadow: 0 0 12px rgba(77, 232, 255, 0.5); font-variant-numeric: tabular-nums; }
.tx-card.compact { padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.tx-card.compact .tx-head { grid-column: 1 / -1; }
.tx-card.compact .tx-call { font-size: 1.6rem; margin-top: 4px; }
.tx-card.compact .tx-name { font-size: 1rem; min-height: 0; }
.tx-card.compact .tx-wave { display: none; }
.tx-card.compact .tx-via { grid-column: 1; font-size: 0.82rem; }
.tx-card.compact .tx-foot { grid-column: 2; grid-row: 2 / span 2; margin: 0; flex-direction: column; align-items: flex-end; }
.tx-card.compact .tx-timer { font-size: 1.3rem; }

.quiet { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 8px; min-height: 280px; }
.radar {
  position: relative; width: min(220px, 60vw); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 24%, rgba(77, 232, 255, 0.25) 24.5% 25%, transparent 25.5% 49%, rgba(77, 232, 255, 0.25) 49.5% 50%, transparent 50.5% 74%, rgba(77, 232, 255, 0.25) 74.5% 75%, transparent 75.5%),
    radial-gradient(circle, rgba(10, 40, 60, 0.6), rgba(2, 8, 20, 0.9));
  border: 1px solid rgba(77, 232, 255, 0.45); overflow: hidden;
  box-shadow: 0 0 30px rgba(77, 232, 255, 0.12), inset 0 0 30px rgba(77, 232, 255, 0.1);
}
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(77, 232, 255, 0.2); }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(57, 255, 176, 0.45), rgba(57, 255, 176, 0.08) 50deg, transparent 90deg);
  animation: sweep 4s linear infinite;
}
.blip { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); opacity: 0; animation: blip 4s linear infinite; }
.b1 { left: 64%; top: 26%; animation-delay: 0.45s; }
.b2 { left: 70%; top: 66%; animation-delay: 1.5s; }
.b3 { left: 28%; top: 58%; animation-delay: 2.6s; }
.quiet-t { margin: 18px 0 2px; font: 800 1.15rem/1.2 var(--mono); letter-spacing: 0.2em; color: var(--ink); }
.quiet-s { margin: 0; font: 500 0.85rem/1.2 var(--mono); color: var(--teal); letter-spacing: 0.12em; animation: breathe 3s ease-in-out infinite; }

/* ---------- mission log ---------- */
.range { display: inline-flex; border: 1px solid rgba(77, 232, 255, 0.35); border-radius: 10px; overflow: hidden; }
.range button {
  min-width: 52px; min-height: 36px; padding: 6px 12px; border: 0; cursor: pointer;
  background: rgba(10, 22, 48, 0.7); font: 700 0.82rem/1 var(--mono); letter-spacing: 0.08em; color: var(--muted);
}
.range button + button { border-left: 1px solid rgba(77, 232, 255, 0.25); }
.range button[aria-pressed="true"] { background: rgba(77, 232, 255, 0.2); color: #fff; text-shadow: 0 0 8px rgba(77, 232, 255, 0.8); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.stat { padding: 10px 12px; border-radius: 10px; background: rgba(4, 10, 26, 0.7); border: 1px solid rgba(77, 232, 255, 0.15); min-width: 0; }
.stat dt { font: 600 0.68rem/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.stat dd { margin: 4px 0 0; font: 800 1.6rem/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat:nth-child(1) dd { color: var(--cyan); }
.stat:nth-child(3) dd { color: var(--teal); }
.stat:nth-child(4) dd { color: var(--gold); }
.stat:nth-child(5) dd { color: var(--violet); font-size: 1.25rem; line-height: 1.4; }
.tl-wrap { position: relative; }
#tl { display: block; width: 100%; height: 130px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); cursor: crosshair; }
.tl-empty { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px; font: 600 0.82rem/1.3 var(--mono); letter-spacing: 0.14em; color: var(--muted); pointer-events: none; }
.tl-axis { display: flex; justify-content: space-between; font: 500 0.72rem/1 var(--mono); color: var(--dim); margin-top: 6px; }
.tl-read { margin: 8px 0 0; font: 500 0.8rem/1.3 var(--mono); color: var(--muted); min-height: 1.3em; }
.tl-error { margin: 6px 0 0; font: 600 0.8rem/1.3 var(--mono); color: var(--warn); }

/* ---------- crew roster ---------- */
.crew-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.crew {
  display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "patch id" "patch badges" "stats stats";
  gap: 4px 12px; padding: 12px; border-radius: 12px; background: rgba(4, 10, 26, 0.72); border: 1px solid rgba(77, 232, 255, 0.16);
}
.crew.fresh { animation: enter 0.5s ease-out both; }
.crew.on-air { border-color: rgba(255, 207, 122, 0.7); animation: airglow 2s ease-in-out infinite; }
.patch { grid-area: patch; width: 56px; height: 56px; filter: drop-shadow(0 0 6px rgba(77, 232, 255, 0.25)); }
.patch-tx { font: 700 9px var(--mono); letter-spacing: 0.06em; }
.crew-id { grid-area: id; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.crew-call { font: 800 1.15rem/1.1 var(--mono); letter-spacing: 0.05em; }
.crew-name { color: var(--gold); font-weight: 600; }
.badges { grid-area: badges; display: flex; gap: 4px; flex-wrap: wrap; min-height: 4px; }
.badge {
  padding: 3px 7px; border-radius: 5px; font: 800 0.6rem/1.1 var(--mono); letter-spacing: 0.12em; white-space: nowrap;
  animation: badgeglow 3s ease-in-out infinite;
}
.b-most { color: #c8fff0; background: rgba(57, 255, 176, 0.14); border: 1px solid rgba(57, 255, 176, 0.6); --g: rgba(57, 255, 176, 0.35); }
.b-new { color: #ffe0f4; background: rgba(255, 122, 217, 0.14); border: 1px solid rgba(255, 122, 217, 0.6); --g: rgba(255, 122, 217, 0.35); }
.b-long { color: #fff0d2; background: rgba(255, 207, 122, 0.14); border: 1px solid rgba(255, 207, 122, 0.6); --g: rgba(255, 207, 122, 0.35); }
.b-air { color: #1b1000; background: var(--gold); border: 1px solid var(--gold); --g: rgba(255, 207, 122, 0.45); }
.crew-stats { grid-area: stats; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 0.8rem; }
.crew-stats dt { color: var(--dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; align-self: center; }
.crew-stats dd { margin: 0; color: var(--ink); font-family: var(--mono); text-align: right; }
.more { margin-top: 10px; }
.empty { margin: 10px 0; color: var(--muted); font: 500 0.85rem/1.4 var(--mono); letter-spacing: 0.06em; }

/* ---------- recent calls ---------- */
.log-scroll { max-height: 520px; overflow: auto; }
.log { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.log th { position: sticky; top: 0; background: rgba(6, 12, 30, 0.97); text-align: left; font: 700 0.66rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; }
.log td { padding: 7px 6px; border-top: 1px solid rgba(77, 232, 255, 0.08); white-space: nowrap; }
.log .num { text-align: right; }
.log th:last-child { text-align: right; }
.log .call { font: 700 0.9rem/1 var(--mono); }
.log .unid { color: var(--muted); font-weight: 500; letter-spacing: 0.05em; }
.log .nm { color: var(--gold); }
.log tbody tr:first-child td { color: #fff; }

.foot { padding: 10px clamp(12px, 3vw, 32px) 28px; text-align: center; color: var(--dim); font-size: 0.78rem; }
.foot p { margin: 4px 0; }
.kiosk-exit { display: none; }

/* ---------- keyframes ---------- */
@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes callglow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 207, 122, 0.35), 0 0 2px rgba(255, 255, 255, 0.4); }
  50% { text-shadow: 0 0 22px rgba(255, 207, 122, 0.75), 0 0 4px rgba(255, 255, 255, 0.6); }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0% { opacity: 0; } 6% { opacity: 0.9; } 45% { opacity: 0; } 100% { opacity: 0; } }
@keyframes badgeglow { 0%, 100% { box-shadow: 0 0 2px var(--g); } 50% { box-shadow: 0 0 10px var(--g); } }
@keyframes airglow { 0%, 100% { box-shadow: 0 0 4px rgba(255, 207, 122, 0.2); } 50% { box-shadow: 0 0 16px rgba(255, 207, 122, 0.45); } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- reduced motion: OS setting or the manual toggle ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body.rm *, body.rm *::before, body.rm *::after { animation: none !important; transition: none !important; }
/* Calm (js/main.js frame): 30 s with nothing on air -> loops hold still until the next call. */
body.calm *, body.calm *::before, body.calm *::after { animation-play-state: paused !important; }
body.rm .blip { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .blip { opacity: 0.8; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .deck { grid-template-columns: 1fr 1fr; grid-template-areas: "hero hero" "map map" "time time" "crew crew" "log log"; }
  .bridge { grid-template-columns: 1fr auto; }
  .telemetry { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --fs: 0.95rem; }
  .deck { grid-template-columns: 1fr; grid-template-areas: "hero" "map" "time" "crew" "log"; gap: 12px; padding: 12px 10px 20px; }
  .bridge { grid-template-columns: 1fr; position: static; gap: 10px; }
  .controls { justify-content: flex-start; }
  .telemetry { grid-row: auto; }
  .pill-k { display: none; }
  .map-wrap { aspect-ratio: 4 / 5; min-height: 340px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(5) { grid-column: 1 / -1; }
  .stat dd { font-size: 1.35rem; }
  .quiet { min-height: 220px; }
}

/* ---------- kiosk ---------- */
body.kiosk { --fs: 1.15rem; }
body.kiosk .controls, body.kiosk .foot, body.kiosk .skip, body.kiosk .p-log { display: none; }
body.kiosk .bridge { position: static; grid-template-columns: auto 1fr; }
body.kiosk .deck { max-width: none; grid-template-areas:
    "map map map map map map map hero hero hero hero hero"
    "time time time time time time time crew crew crew crew crew"; }
body.kiosk .tx-call { font-size: clamp(3rem, 6vw, 6rem); }
body.kiosk .crew-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
body.kiosk.idle, body.kiosk.idle * { cursor: none !important; }
body.kiosk .kiosk-exit {
  display: block; position: fixed; right: 12px; bottom: 12px; z-index: 20; opacity: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(77, 232, 255, 0.5); background: rgba(5, 10, 26, 0.9);
}
body.kiosk .kiosk-exit:hover, body.kiosk .kiosk-exit:focus-visible, body.kiosk:not(.idle) .kiosk-exit { opacity: 1; }
@media (max-width: 1100px) {
  body.kiosk .deck { grid-template-areas: "hero hero" "map map" "time time" "crew crew"; }
}
@media (max-width: 640px) {
  body.kiosk .deck { grid-template-areas: "hero" "map" "time" "crew"; }
}