/* ------------------------------------------------------------------
   VOIDSTAR LABS // MISSION CONTROL CONSOLE
------------------------------------------------------------------ */

:root {
  --void:        #06070a;
  --void-2:      #0b0d12;
  --panel:       #14171c;
  --panel-2:     #1c2027;
  --panel-edge:  #2a2f37;
  --metal:       #3a3f48;
  --metal-hi:    #525863;
  --label:       #8a8e95;
  --bone:        #d8d4c8;
  --amber:       #ffa033;
  --amber-dim:   #b56e15;
  --amber-glow:  #ffb766;
  --phosphor:    #4ddbff;
  --phosphor-dim:#1f7d99;
  --phosphor-glow:#9aeaff;
  --warn:        #ff4d4d;
  --warn-dim:    #8a2222;
  --green:       #5dd17a;
  --green-dim:   #2a6a36;
}

* { box-sizing: border-box; }

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--void);
  overflow: hidden;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--bone);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  /* hard cap viewport */
  position: fixed;
  inset: 0;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   ROOT CHASSIS
------------------------------------------------------------------ */
.console {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 44px 46px 1fr 30px;
  background:
    radial-gradient(ellipse at 50% 40%, #1a1d24 0%, #0a0b0f 60%, #050608 100%);
  position: relative;
  overflow: hidden;
}

/* faint hex grid texture across whole console */
.console::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,0.025) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.025) 95%);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

/* film grain */
.console::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,160,51,0.04), transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(77,219,255,0.03), transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------------------------------------
   HEADER BAND — lamps + mini-dials below telemetry
------------------------------------------------------------------ */
.telemetry-band {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 14px;
  height: 46px;
  background: linear-gradient(180deg, #0a0c10 0%, #07090c 100%);
  border-bottom: 1px solid #1d2128;
  font-family: 'VT323', monospace;
  overflow: hidden;
  min-width: 0;
}
/* responsive scaling — past ~1100px, status lamps tighten so all 8 stay on-screen */
@media (max-width: 1180px) {
  .telemetry-band .band-lamps { gap: 4px; }
  .telemetry-band .band-lamps .lamp .bulb { width: 6px; height: 6px; }
  .telemetry-band .band-lamps .lamp .lbl { font-size: 6.5px; letter-spacing: 0.1em; }
  .telemetry-band { gap: 8px; padding: 0 8px; }
  .telemetry-band .band-label { font-size: 8px; padding: 2px 4px; letter-spacing: 0.16em; }
  .telemetry-band .mdial-label { width: 30px; flex: 0 0 30px; font-size: 8px; }
  .telemetry-band .mdial-value { width: 32px; flex: 0 0 32px; font-size: 9px; }
}
@media (max-width: 1000px) {
  .telemetry-band { gap: 6px; padding: 0 6px; }
  .telemetry-band .band-lamps { gap: 3px; }
  .telemetry-band .band-lamps .lamp .bulb { width: 5px; height: 5px; }
  .telemetry-band .band-lamps .lamp .lbl { font-size: 6px; letter-spacing: 0.06em; }
  .telemetry-band .band-label { font-size: 7px; padding: 2px 3px; letter-spacing: 0.1em; }
  .telemetry-band .mdial { gap: 4px; }
  .telemetry-band .mdial-label { width: 26px; flex: 0 0 26px; font-size: 7px; }
  .telemetry-band .mdial-value { width: 26px; flex: 0 0 26px; font-size: 8px; }
  .telemetry-band .mdial-bar { height: 6px; }
}
@media (max-width: 950px) {
  .telemetry-band { gap: 4px; padding: 0 4px; }
  .telemetry-band .band-group { gap: 5px; }
  .telemetry-band .band-lamps { gap: 2px; }
  .telemetry-band .band-lamps .lamp .bulb { width: 4px; height: 4px; }
  .telemetry-band .band-lamps .lamp .lbl { font-size: 5.5px; letter-spacing: 0; }
  .telemetry-band .band-label { font-size: 6.5px; padding: 1px 2px; letter-spacing: 0.06em; }
  .telemetry-band .mdial-label { width: 22px; flex: 0 0 22px; font-size: 6.5px; }
  .telemetry-band .mdial-value { width: 22px; flex: 0 0 22px; font-size: 7px; }
}
.band-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}
.band-group.band-dials { gap: 8px; flex: 1 1 auto; min-width: 0; }
.band-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--label);
  border: 1px solid #1d2128;
  padding: 2px 6px;
  background: #0a0c10;
  white-space: nowrap;
  flex: 0 0 auto;
}
.band-lamps {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}
.band-lamps .lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.band-lamps .lamp .bulb { width: 7px; height: 7px; }
.band-lamps .lamp .lbl { font-size: 7px; letter-spacing: 0.14em; }
.band-divider {
  width: 1px;
  background: #1d2128;
  margin: 6px 0;
  flex: 0 0 1px;
}

/* compact horizontal mini-dial */
.mdial {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 0;
}
.mdial-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--label);
  width: 36px;
  text-align: right;
  flex: 0 0 36px;
}
.mdial-bar {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  background: #050608;
  border: 1px solid #1d2128;
  box-shadow: inset 0 0 4px #000;
  min-width: 30px;
}
.mdial-fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255,160,51,0.5) 0%,
    rgba(255,160,51,0.95) 70%,
    rgba(255,200,80,1) 100%);
  box-shadow: 0 0 6px rgba(255,160,51,0.6);
  transition: width 0.6s ease-out;
}
.mdial-mark {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: rgba(255,255,255,0.2);
}
.mdial-value {
  font-size: 10px;
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(77,219,255,0.5);
  letter-spacing: 0.08em;
  width: 38px;
  flex: 0 0 38px;
  text-align: left;
}

/* ------------------------------------------------------------------
   TELEMETRY STRIP (top)
------------------------------------------------------------------ */
.telemetry {
  background: linear-gradient(180deg, #0d0f13 0%, #0a0c10 100%);
  border-bottom: 1px solid #1d2128;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--label);
  position: relative;
  z-index: 5;
}

.telemetry .tel-block {
  display: flex;
  align-items: center;
  gap: 6px;
}

.telemetry .tel-label {
  color: var(--label);
}

.telemetry .tel-value {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,160,51,0.4);
  min-width: 5ch;
  text-align: left;
}

.telemetry .tel-value.cyan {
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(77,219,255,0.4);
}

.telemetry .tel-divider {
  width: 1px;
  height: 14px;
  background: #2a2f37;
}

.telemetry .tel-spacer { flex: 1; }

.tel-lamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tel-lamp .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green), inset 0 0 2px rgba(0,0,0,0.4);
}
.tel-lamp.warn .dot { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.tel-lamp.idle .dot { background: var(--green-dim); box-shadow: none; }

@keyframes lamp-blink {
  0%, 60%, 100% { opacity: 1; }
  61%, 99% { opacity: 0.25; }
}
.tel-lamp .dot.blink { animation: lamp-blink 2.2s infinite; }

/* ------------------------------------------------------------------
   MAIN BODY GRID
------------------------------------------------------------------ */
.body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  position: relative;
  z-index: 2;
  min-height: 0;
}

.panel {
  background:
    linear-gradient(180deg, #14171c 0%, #0e1115 100%);
  border: 1px solid #1d2128;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel.left  { border-right: 1px solid #1d2128; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2f37 #0a0c10; }
.panel.left::-webkit-scrollbar { width: 6px; }
.panel.left::-webkit-scrollbar-track { background: #0a0c10; }
.panel.left::-webkit-scrollbar-thumb { background: #2a2f37; }

/* rivets at corners */
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6a6f78, #1a1d22 70%);
  box-shadow: inset 0 0 1px #000;
  z-index: 4;
}
.panel::before { top: 6px; left: 6px; }
.panel::after  { top: 6px; right: 6px; }
.panel .rivet-bl, .panel .rivet-br {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6a6f78, #1a1d22 70%);
  box-shadow: inset 0 0 1px #000;
  z-index: 4;
}
.panel .rivet-bl { bottom: 6px; left: 6px; }
.panel .rivet-br { bottom: 6px; right: 6px; }

/* ------------------------------------------------------------------
   PANEL SECTIONS
------------------------------------------------------------------ */
.section {
  border-bottom: 1px solid #1d2128;
  padding: 10px 12px;
  position: relative;
}
.panel.left .section {
  flex-shrink: 0;
}
.section:last-child { border-bottom: none; }

.section-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--label);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #2a2f37, transparent);
}
.section-label .badge {
  font-size: 8px;
  background: #1d2128;
  color: var(--amber);
  padding: 1px 5px;
  border-radius: 1px;
  letter-spacing: 0.15em;
}

/* ------------------------------------------------------------------
   PROGRAM SWITCHES
------------------------------------------------------------------ */
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #1d2128;
}
.switch-row:last-child { border-bottom: none; }

.toggle {
  position: relative;
  width: 26px;
  height: 42px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0a0c10 0%, #14171c 100%);
  border: 1px solid #2a2f37;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px;
}
.toggle .well {
  position: absolute;
  inset: 6px 8px;
  background: #050608;
  border-radius: 1px;
  box-shadow: inset 0 0 4px #000;
}
.toggle .lever {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 18px;
  background: linear-gradient(180deg, #c8ccd2 0%, #6a6f78 50%, #3a3f48 100%);
  border: 1px solid #1a1d22;
  border-radius: 2px;
  transform: translateX(-50%);
  top: 20px;
  transition: top 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.toggle .lever::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 6px;
  background: linear-gradient(180deg, #14171c, #2a2f37);
}
.toggle.on .lever { top: 4px; }
.toggle.on .lever::before { bottom: auto; top: 100%; background: linear-gradient(180deg, #2a2f37, #14171c); }
.toggle .tick-up, .toggle .tick-dn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 1px;
  background: #2a2f37;
}
.toggle .tick-up { top: 2px; }
.toggle .tick-dn { bottom: 2px; }

.switch-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.switch-label .name {
  font-size: 11px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.switch-label .meta {
  font-size: 8.5px;
  color: var(--label);
  letter-spacing: 0.15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.switch-row.active .switch-label .name {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,160,51,0.4);
}
.switch-row.active .switch-label .meta {
  color: var(--amber-dim);
}

.switch-id {
  font-size: 8.5px;
  color: var(--label);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  width: 28px;
  text-align: right;
}

/* tiny lamp for switch */
.switch-lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d2128;
  box-shadow: inset 0 0 2px #000;
  flex-shrink: 0;
  position: relative;
}
.switch-row.active .switch-lamp {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow), inset 0 0 2px rgba(0,0,0,0.4);
}

/* ------------------------------------------------------------------
   CRT MAIN DISPLAY (center)
------------------------------------------------------------------ */
.center {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #101317 0%, #0a0c10 100%);
  position: relative;
  min-height: 0;
}

.crt-bezel {
  flex: 1;
  margin: 14px;
  background: linear-gradient(180deg, #1a1d22 0%, #101317 100%);
  border-radius: 14px;
  padding: 18px;
  border: 1px solid #2a2f37;
  box-shadow:
    inset 0 0 0 2px #0a0c10,
    inset 0 0 30px rgba(0,0,0,0.8),
    0 8px 30px rgba(0,0,0,0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* bezel labels */
.bezel-label {
  position: absolute;
  font-size: 8.5px;
  letter-spacing: 0.25em;
  color: var(--label);
  text-transform: uppercase;
}
.bezel-label.tl { top: 5px; left: 18px; }
.bezel-label.tr { top: 5px; right: 18px; color: var(--amber); }
.bezel-label.bl { bottom: 5px; left: 18px; }
.bezel-label.br { bottom: 5px; right: 18px; }

/* the CRT screen */
.crt-bezel { margin: 10px 14px 10px 6px; }
.crt {
  flex: 1;
  background:
    radial-gradient(ellipse at 50% 50%, #0a1a14 0%, #050b09 70%, #02060a 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.9),
    inset 0 0 6px rgba(77,219,255,0.08);
  min-height: 0;
}

/* curvature illusion via vignette */
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 50;
}

/* scanlines */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.18) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
  z-index: 60;
  mix-blend-mode: multiply;
}

/* moving scan flicker */
@keyframes scan-roll {
  0% { transform: translateY(-30%); }
  100% { transform: translateY(130%); }
}
.crt-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  overflow: hidden;
}
.crt-scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 18%;
  top: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,160,51,0.05) 40%,
    rgba(77,219,255,0.06) 50%,
    transparent 100%);
  animation: scan-roll 7s linear infinite;
}

/* CRT inner content area (expanded) */
.crt-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  padding: 22px;
  display: flex;
  flex-direction: column;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,160,51,0.5), 0 0 1px rgba(255,255,255,0.3);
  font-family: 'IBM Plex Mono', monospace;
  overflow: hidden;
}

/* CRT header bar always present */
.crt-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(77,219,255,0.5);
  padding: 8px 12px;
  letter-spacing: 0.18em;
  z-index: 20;
  pointer-events: none;
}

.crt-hud .blinker {
  animation: lamp-blink 1.6s infinite;
}

/* ------------------------------------------------------------------
   CRT — SPLASH / BLACK HOLE
------------------------------------------------------------------ */
.splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.bh-stage {
  position: relative;
  width: min(46%, 320px);
  aspect-ratio: 1 / 1;
}

/* starfield */
.starfield {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(1px 1px at 17% 23%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 14%, #c0c0c0 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 67%, #ffe8c0 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 81%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 87%, #a0d0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 31%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 52%, #c0c0c0 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 12%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 49%, #ffd0a0 50%, transparent 51%),
    radial-gradient(2px 2px at 67% 58%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 6%  63%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 91%, #ffffff 50%, transparent 51%);
  opacity: 0.85;
  animation: star-twinkle 4s steps(2, end) infinite;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.6; }
}

.bh-stage::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(180, 60, 20, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(80, 30, 90, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(60, 90, 140, 0.10) 0%, transparent 50%);
  filter: blur(20px);
  z-index: -1;
  animation: nebula-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes nebula-drift {
  0%   { transform: rotate(0deg) scale(1);   opacity: 0.85; }
  100% { transform: rotate(8deg) scale(1.08); opacity: 1; }
}

/* relativistic jets from poles — behind the void-star core */
.bh-stage::after {
  content: "";
  position: absolute;
  top: -50%; bottom: -50%;
  left: 50%;
  width: 8%;
  transform: translateX(-50%);
  z-index: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,200,140, 0.35) 30%,
    rgba(255,240,200, 0.7)  48%,
    rgba(255,200,140, 0.0)  50%,
    rgba(255,200,140, 0.0)  50%,
    rgba(255,240,200, 0.7)  52%,
    rgba(255,200,140, 0.35) 70%,
    transparent 100%);
  filter: blur(6px);
  animation: jets-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes jets-pulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 0.85; transform: translateX(-50%) scaleY(1.1); }
}

/* infalling dust particles orbiting in */
.bh-particles {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
  animation: particles-spin 30s linear infinite;
}
.bh-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 220, 160, 0.9);
  box-shadow: 0 0 4px rgba(255, 180, 80, 0.8);
  animation: particle-fall 6s linear infinite;
}
@keyframes particles-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes particle-fall {
  0%   { transform: translate(var(--x, 0px), var(--y, 0px)) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translate(0, 0) scale(0.2); opacity: 0; }
}

/* slow conic radar sweep */
.bh-sweep {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(77,219,255,0.16) 0deg, transparent 30deg, transparent 360deg);
  animation: sweep-rot 8s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}
@keyframes sweep-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* gravitational lensing ripples */
.bh-ripple {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px solid rgba(255,200,120,0.35);
  animation: ripple-out 5s ease-out infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
@keyframes ripple-out {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.bh-ripple.r2 { animation-delay: 1.6s; }
.bh-ripple.r3 { animation-delay: 3.2s; }

/* dark-orange accretion glow filling space behind the void-star */
.bh-lens {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(120, 35, 5, 0.95)   0%,
      rgba(160, 55, 10, 0.90)  20%,
      rgba(200, 85, 20, 0.85)  35%,
      rgba(230,120, 40, 0.75)  45%,
      rgba(255,160, 60, 0.55)  55%,
      rgba(180, 70, 20, 0.30)  68%,
      rgba( 80, 25,  5, 0.12)  80%,
      transparent 95%);
  filter: blur(3px);
  animation: lens-pulse 6s ease-in-out infinite;
}
.bh-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,180, 80, 0.35) 0%,
    rgba(255,140, 50, 0.20) 30%,
    transparent 60%);
  filter: blur(8px);
}
@keyframes lens-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%     { opacity: 0.78; transform: scale(1.03); }
}

/* photon ring — circular */
.bh-photon {
  position: absolute;
  inset: 18%;
  z-index: 3;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,220,160,0.95);
  box-shadow:
    0 0 26px rgba(255,200,120,0.75),
    0 0 70px rgba(255,160, 51,0.45),
    inset 0 0 10px rgba(255,255,255,0.35);
  animation: photon-pulse 3.4s ease-in-out infinite;
}
@keyframes photon-pulse {
  0%, 100% { box-shadow: 0 0 26px rgba(255,200,120,0.75), 0 0 70px rgba(255,160,51,0.45), inset 0 0 10px rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 0 44px rgba(255,200,120,0.95), 0 0 100px rgba(255,160,51,0.65), inset 0 0 14px rgba(255,255,255,0.55); }
}

/* secondary inner photon ring for richness */
.bh-photon::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 0.5px solid rgba(255,240,200,0.6);
  box-shadow: inset 0 0 8px rgba(255,200,120,0.5), 0 0 12px rgba(255,140,40,0.6);
}

/* event horizon — 4-point void star */
.bh-core {
  position: absolute;
  inset: 22%;
  z-index: 4;
  background: radial-gradient(circle at 50% 50%, #000 60%, #050204 100%);
  clip-path: polygon(
    50% 0%,
    58% 42%,
    100% 50%,
    58% 58%,
    50% 100%,
    42% 58%,
    0% 50%,
    42% 42%
  );
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.95))
          drop-shadow(0 0 22px rgba(255,140,50,0.55))
          drop-shadow(0 0 40px rgba(255,180,80,0.35));
  animation: void-star-rot 60s linear infinite;
  z-index: 2;
}
@keyframes void-star-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* bright tips on the void-star */
.bh-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%,   rgba(255,240,200,0.85) 0%, transparent 18%),
    radial-gradient(circle at 100% 50%, rgba(255,240,200,0.85) 0%, transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(255,240,200,0.85) 0%, transparent 18%),
    radial-gradient(circle at 0%  50%, rgba(255,240,200,0.85) 0%, transparent 18%);
  mix-blend-mode: screen;
  animation: void-star-tips 2.4s ease-in-out infinite;
}
@keyframes void-star-tips {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; filter: brightness(1.4); }
}

/* tune-hint banner above program switches in standby */
.tune-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px dashed rgba(255,160,51,0.5);
  background: rgba(255,160,51,0.05);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,160,51,0.5);
  animation: hint-pulse 2.4s ease-in-out infinite;
}
.tune-hint .arrow { animation: hint-arrow 1.6s ease-in-out infinite; }
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,160,51,0); }
  50%      { box-shadow: 0 0 8px rgba(255,160,51,0.4), inset 0 0 4px rgba(255,160,51,0.1); }
}
@keyframes hint-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* in standby, non-active switches pulse to invite interaction */
.panel.left.standby .switch-row:not(.active) .toggle {
  animation: switch-pulse 2.4s ease-in-out infinite;
}
.panel.left.standby .switch-row:not(.active) .switch-lamp {
  animation: lamp-soft-blink 1.4s ease-in-out infinite;
}
@keyframes switch-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,160,51,0); }
  50%      { box-shadow: 0 0 10px rgba(255,160,51,0.5); }
}
@keyframes lamp-soft-blink {
  0%, 100% { background: #1d2128; box-shadow: inset 0 0 2px #000; }
  50%      { background: rgba(255,160,51,0.5); box-shadow: 0 0 6px rgba(255,160,51,0.6); }
}
.mobile-progs.standby .mobile-prog:not(.active) {
  animation: switch-pulse 2.4s ease-in-out infinite;
}

/* deep-field starfield filling the CRT behind the blackhole */
.splash-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.splash-stars.layer-far {
  background-image:
    radial-gradient(0.5px 0.5px at 4% 8%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 13% 22%, #c8d8ff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 27% 6%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 36% 17%, #ffe8c0 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 48% 4%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 61% 19%, #c0c0c0 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 72% 8%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 84% 24%, #c8d8ff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 94% 9%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 7% 38%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 19% 47%, #ffe0b0 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 9% 71%,  #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 22% 84%, #c0c0c0 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 35% 92%, #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 53% 86%, #c8d8ff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 68% 78%, #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 80% 92%, #ffe0b0 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 91% 71%, #ffffff 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 96% 53%, #c0c0c0 50%, transparent 51%),
    radial-gradient(0.5px 0.5px at 3% 56%,  #ffffff 50%, transparent 51%);
  opacity: 0.55;
  animation: stars-twinkle-a 6s steps(2, end) infinite;
}
.splash-stars.layer-mid {
  background-image:
    radial-gradient(1px 1px at 11% 14%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 29% 33%, #ffd8a0 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 12%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 59% 27%, #c8e0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 16%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 33%, #ffd0a0 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 78%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 89%, #c8e0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 73%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 88%, #ffd0a0 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 81%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 65%, #c0d8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 6%  44%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 41%, #ffe0b0 50%, transparent 51%);
  opacity: 0.7;
  animation: stars-twinkle-b 4s steps(2, end) infinite;
}
.splash-stars.layer-near {
  background-image:
    radial-gradient(1.5px 1.5px at 8%  18%, #ffffff 60%, transparent 62%),
    radial-gradient(2px 2px   at 23% 9%,  #ffe8c0 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 41% 21%, #ffffff 60%, transparent 62%),
    radial-gradient(2px 2px   at 71% 13%, #c8e0ff 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 91% 28%, #ffffff 60%, transparent 62%),
    radial-gradient(2px 2px   at 18% 81%, #ffd0a0 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 39% 92%, #ffffff 60%, transparent 62%),
    radial-gradient(2px 2px   at 76% 87%, #c8e0ff 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 88% 76%, #ffffff 60%, transparent 62%);
  opacity: 0.95;
  animation: stars-twinkle-c 3s steps(2, end) infinite;
  filter: drop-shadow(0 0 1px rgba(255,240,200,0.7));
}
@keyframes stars-twinkle-a {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.3; }
}
@keyframes stars-twinkle-b {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.4; }
}
@keyframes stars-twinkle-c {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.55; }
}

/* spiral galaxies — drifting in deep field */
.galaxy {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 24% at center,
      rgba(255,240,210,0.9) 0%,
      rgba(255,200,160,0.55) 12%,
      rgba(220,180,230,0.25) 35%,
      rgba(120,140,200,0.10) 60%,
      transparent 80%);
  filter: blur(0.6px);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: galaxy-spin 90s linear infinite;
}
.galaxy::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,210,180,0.35) 40deg,
    transparent 90deg,
    rgba(200,180,255,0.30) 130deg,
    transparent 180deg,
    rgba(180,210,255,0.30) 220deg,
    transparent 270deg,
    rgba(255,210,180,0.30) 310deg,
    transparent 360deg);
  mask: radial-gradient(ellipse 60% 24% at center, black 8%, rgba(0,0,0,0.5) 30%, transparent 70%);
  -webkit-mask: radial-gradient(ellipse 60% 24% at center, black 8%, rgba(0,0,0,0.5) 30%, transparent 70%);
  filter: blur(1.5px);
}
.galaxy.distant {
  background:
    radial-gradient(ellipse 70% 30% at center,
      rgba(220,210,255,0.5) 0%,
      rgba(180,160,220,0.25) 25%,
      transparent 70%);
  opacity: 0.45;
  filter: blur(1px);
  animation-duration: 140s;
}
.galaxy.distant::before { display: none; }

.galaxy.g1 { top: 12%; left: 8%;  width: 90px;  height: 90px;  transform: rotate(-18deg); }
.galaxy.g2 { top: 18%; right: 9%; width: 70px;  height: 70px;  transform: rotate(34deg); animation-direction: reverse; }
.galaxy.g3 { bottom: 14%; left: 14%; width: 110px; height: 110px; transform: rotate(8deg); }
.galaxy.g4 { top: 62%; right: 11%; width: 60px;  height: 60px;  transform: rotate(-42deg); }
.galaxy.g5 { top: 38%; left: 4%;   width: 50px;  height: 50px;  transform: rotate(70deg); }

@keyframes galaxy-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* shooting star — occasional streak */
.shooting-star {
  position: absolute;
  top: 18%;
  left: -10%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.9));
  opacity: 0;
  z-index: 1;
  animation: shoot 9s ease-in infinite;
}
@keyframes shoot {
  0%, 80%   { transform: translate(0, 0); opacity: 0; }
  82%       { opacity: 1; }
  92%       { transform: translate(560px, 110px); opacity: 1; }
  100%      { transform: translate(620px, 130px); opacity: 0; }
}

/* on-splash CTA pointing at the panel */
.splash-cta {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255,160,51,0.7);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,160,51,0.5);
  padding: 5px 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: cta-pulse 2.4s ease-in-out infinite;
  white-space: nowrap;
  font-family: 'VT323', monospace;
}
.splash-cta.top {
  bottom: auto;
  top: 18px;
  font-size: 22px;
  letter-spacing: 0.22em;
  padding: 8px 22px;
  gap: 14px;
  border-width: 2px;
  background: rgba(0,0,0,0.92);
  z-index: 35;
  max-width: calc(100% - 24px);
}
@media (max-width: 1100px) {
  .splash-cta.top { font-size: 16px; letter-spacing: 0.16em; padding: 6px 14px; gap: 8px; }
}
@media (max-width: 900px) {
  .splash-cta.top { font-size: 13px; letter-spacing: 0.12em; padding: 5px 10px; gap: 6px; }
}
/* hide corner annotations on standby so the CTA gets clean space */
.splash .splash-anno.tl,
.splash .splash-anno.tr { top: 70px; }
.splash-cta.top .pointer.right { animation: cta-arrow-right 1.4s ease-in-out infinite; }
@keyframes cta-arrow-right {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.splash-cta .pointer { animation: cta-arrow 1.4s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,160,51,0); }
  50%      { box-shadow: 0 0 14px rgba(255,160,51,0.6); }
}
@keyframes cta-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}
@media (max-width: 760px) {
  .splash-cta { bottom: 10px; font-size: 9px; padding: 4px 10px; }
  .splash-cta.top { top: 10px; font-size: 13px; padding: 5px 12px; gap: 8px; letter-spacing: 0.18em; }
}

/* brand under blackhole */
.brand-mark {
  font-family: 'Major Mono Display', monospace;
  font-size: 30px;
  letter-spacing: 0.1em;
  color: var(--bone);
  text-shadow: 0 0 12px rgba(255,160,51,0.5);
  margin-top: 8px;
  white-space: nowrap;
}
.brand-sub {
  font-size: 13px;
  letter-spacing: 0.5em;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(77,219,255,0.5);
  text-align: center;
  margin-top: 2px;
}
.brand-tag {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--amber);
  letter-spacing: 0.18em;
  text-align: center;
  opacity: 0.9;
  line-height: 1.7;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 12px;
  z-index: 25;
  text-shadow: 0 0 6px rgba(255,160,51,0.4);
}
@media (max-width: 1100px) {
  .brand-tag { font-size: 9px; letter-spacing: 0.14em; bottom: 12px; }
}
@media (max-width: 900px) {
  .brand-tag { font-size: 8px; letter-spacing: 0.1em; bottom: 10px; }
}
@media (max-width: 760px) {
  .brand-tag { font-size: 7px; letter-spacing: 0.06em; bottom: 8px; }
}

/* corner annotations on splash */
.splash-anno {
  position: absolute;
  font-size: 9px;
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(77,219,255,0.5);
  letter-spacing: 0.15em;
  line-height: 1.6;
  pointer-events: none;
  z-index: 25;
}
.splash-anno.tl { top: 32px;  left: 18px;  text-align: left; }
.splash-anno.tr { top: 32px;  right: 18px; text-align: right; }
.splash-anno.bl { top: 32px;  left: 18px;  text-align: left;  display: none; }
.splash-anno.br { top: 32px;  right: 18px; text-align: right; display: none; }
.splash-anno b {
  color: var(--amber);
  text-shadow: 0 0 4px rgba(255,160,51,0.5);
  font-weight: 500;
}

/* crosshair removed by design */

/* ------------------------------------------------------------------
   PROGRAM SCREENS — generic
------------------------------------------------------------------ */
.program {
  position: absolute;
  inset: 0;
  padding: 36px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  overflow: hidden;
}

.program-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px dashed rgba(255,160,51,0.3);
  padding-bottom: 8px;
}
.program-head .title {
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--amber);
  font-weight: 600;
}
.program-head .codeword {
  font-size: 9px;
  color: var(--phosphor);
  letter-spacing: 0.25em;
  text-align: right;
}
.program-head .codeword .big {
  display: block;
  font-size: 14px;
  color: var(--amber);
  font-weight: 600;
  margin-top: 4px;
}

.program-body {
  flex: 1;
  display: grid;
  gap: 12px;
  min-height: 0;
}

.program-foot {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--phosphor);
  letter-spacing: 0.18em;
}

/* a small stat card used inside program screens */
.stat {
  border: 1px solid rgba(255,160,51,0.25);
  background: rgba(255,160,51,0.04);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .k {
  font-size: 8.5px;
  color: var(--phosphor);
  letter-spacing: 0.2em;
}
.stat .v {
  font-size: 16px;
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.stat .v small {
  font-size: 9px;
  color: var(--amber-dim);
  letter-spacing: 0.1em;
  margin-left: 4px;
}

.box {
  border: 1px solid rgba(77,219,255,0.25);
  background: rgba(77,219,255,0.03);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.box-title {
  font-size: 9px;
  color: var(--phosphor);
  letter-spacing: 0.22em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.box-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(77,219,255,0.4), transparent);
}

/* ----- program: ASTRAL DRIFT (game) ----- */
.game-grid {
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr auto;
}
.game-viewport {
  grid-row: 1 / 3;
  position: relative;
  border: 1px solid rgba(255,160,51,0.4);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(77,219,255,0.05), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,160,51,0.05), transparent 50%),
    #02050a;
  overflow: hidden;
  min-height: 0;
}
.game-viewport .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 30%, #aaa 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 75%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 15%, #ffd 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 35%, #aaa 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 88%, #fff 50%, transparent 51%);
  animation: star-twinkle 5s steps(2) infinite;
}
.game-viewport .ship {
  position: absolute;
  left: 30%;
  top: 60%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%) rotate(-30deg);
  z-index: 4;
  animation: ship-bob 3s ease-in-out infinite;
}
@keyframes ship-bob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-30deg) translateY(0); }
  50%      { transform: translate(-50%, -50%) rotate(-30deg) translateY(-4px); }
}
.game-viewport .ship svg { width: 100%; height: 100%; }

.game-viewport .planet {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  right: 18%;
  top: 28%;
  background: radial-gradient(circle at 30% 30%, #8a4d20 0%, #4a2410 60%, #1a0a06 100%);
  box-shadow: 0 0 30px rgba(255,160,51,0.3), inset -10px -10px 20px rgba(0,0,0,0.6);
}
.game-viewport .moon {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  right: 8%;
  top: 18%;
  background: radial-gradient(circle at 30% 30%, #ccc 0%, #555 100%);
}
.game-viewport .trail {
  position: absolute;
  left: 30%;
  top: 60%;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, rgba(77,219,255,0.6), transparent);
  transform: translate(0, -50%) rotate(150deg);
  transform-origin: left center;
  z-index: 3;
  filter: blur(0.5px);
}
.game-viewport .hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 8.5px;
  color: var(--phosphor);
  letter-spacing: 0.15em;
}
.game-viewport .hud .corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.game-viewport .hud .corner.tl { top: 8px; left: 10px; }
.game-viewport .hud .corner.tr { top: 8px; right: 10px; text-align: right; }
.game-viewport .hud .corner.bl { bottom: 8px; left: 10px; }
.game-viewport .hud .corner.br { bottom: 8px; right: 10px; text-align: right; }

.game-viewport .reticle {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(77,219,255,0.4);
  border-radius: 50%;
}

.game-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.minimap {
  position: relative;
  border: 1px solid rgba(255,160,51,0.3);
  height: 90px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,160,51,0.08), transparent 70%),
    #050a08;
  overflow: hidden;
}
.minimap-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 50%, rgba(77,219,255,0.15) 50%),
    linear-gradient(90deg, transparent 50%, rgba(77,219,255,0.15) 50%);
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
}
.minimap .blip {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}
.minimap .blip.you { background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); }
.minimap .ping {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ping 2s ease-out infinite;
  opacity: 0;
}
@keyframes ping {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(8);   opacity: 0; }
}

/* ----- program: SINGULARITY (data parser) ----- */
.parser-grid {
  grid-template-columns: 1fr 0.85fr;
  grid-template-rows: 1fr 1fr;
}
.parser-stream {
  grid-row: 1 / 3;
  font-size: 10px;
  line-height: 1.45;
  font-family: 'IBM Plex Mono', monospace;
  position: relative;
  overflow: hidden;
}
.parser-stream pre {
  margin: 0;
  white-space: pre;
  color: var(--amber);
  text-shadow: 0 0 4px rgba(255,160,51,0.4);
}
.parser-stream .cursor {
  display: inline-block;
  width: 7px;
  height: 11px;
  background: var(--amber);
  vertical-align: middle;
  animation: cursor-blink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.parser-stream .tok-key { color: var(--phosphor); }
.parser-stream .tok-str { color: var(--green); }
.parser-stream .tok-num { color: var(--bone); }
.parser-stream .tok-com { color: var(--label); }
.parser-stream .tok-warn { color: var(--warn); }

.parser-tree {
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--phosphor);
  font-family: 'IBM Plex Mono', monospace;
  overflow: hidden;
}
.parser-tree .branch { color: var(--label); }
.parser-tree .leaf   { color: var(--amber); }

.parser-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meter {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.meter .k {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--phosphor);
  letter-spacing: 0.18em;
}
.meter .bar {
  height: 6px;
  background: rgba(255,160,51,0.1);
  border: 1px solid rgba(255,160,51,0.2);
  position: relative;
  overflow: hidden;
}
.meter .bar .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  box-shadow: 0 0 6px rgba(255,160,51,0.5);
}

/* ----- program: TIDAL (content rating) ----- */
.tidal-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
}
.rating-card {
  border: 1px solid rgba(255,160,51,0.3);
  background: rgba(255,160,51,0.04);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.rating-card .stamp {
  position: absolute;
  top: 6px; right: 8px;
  border: 1.5px solid var(--phosphor);
  color: var(--phosphor);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  transform: rotate(8deg);
  text-shadow: 0 0 6px rgba(77,219,255,0.5);
}
.rating-card .stamp.warn { border-color: var(--warn); color: var(--warn); text-shadow: 0 0 6px rgba(255,77,77,0.5); }
.rating-card .stamp.green { border-color: var(--green); color: var(--green); text-shadow: 0 0 6px rgba(93,209,122,0.5); }

.rating-card .name {
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 0.1em;
  font-weight: 600;
  padding-right: 56px;
}
.rating-card .meta {
  font-size: 8.5px;
  color: var(--phosphor);
  letter-spacing: 0.18em;
}
.rating-card .glyph-row {
  display: flex;
  gap: 4px;
  margin-top: auto;
}
.rating-card .glyph {
  width: 18px; height: 18px;
  border: 1px solid rgba(77,219,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: var(--phosphor);
  letter-spacing: 0;
}
.rating-card .glyph.on {
  background: rgba(255,160,51,0.15);
  border-color: var(--amber);
  color: var(--amber);
}
.rating-card .desc {
  font-size: 9px;
  color: var(--bone);
  opacity: 0.7;
  line-height: 1.5;
}

.tidal-spectrum {
  grid-column: 1 / 4;
  border: 1px solid rgba(77,219,255,0.3);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spectrum-bars {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 2px;
  height: 40px;
  align-items: end;
}
.spectrum-bars .b {
  background: linear-gradient(180deg, var(--amber), var(--amber-dim));
  width: 100%;
  box-shadow: 0 0 4px rgba(255,160,51,0.5);
  animation: spec 1.4s ease-in-out infinite;
}
@keyframes spec {
  0%, 100% { height: var(--h, 40%); }
  50%      { height: calc(var(--h, 40%) + 12%); }
}
.spectrum-axis {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--phosphor);
  letter-spacing: 0.18em;
}

/* ----- program: PULSAR (audio/sound) ----- */
.pulsar-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.4fr 1fr;
}
.waveform {
  grid-column: 1 / 3;
  border: 1px solid rgba(77,219,255,0.3);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.waveform-canvas {
  position: relative;
  flex: 1;
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  min-height: 0;
}
.waveform-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.waveform-canvas .play-head {
  position: absolute;
  top: 0; bottom: 0;
  left: 38%;
  width: 1px;
  background: var(--warn);
  box-shadow: 0 0 6px var(--warn);
}
.transport {
  display: flex;
  gap: 4px;
}
.transport .tbtn {
  width: 28px; height: 22px;
  border: 1px solid rgba(255,160,51,0.4);
  color: var(--amber);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.transport .tbtn.on { background: rgba(255,160,51,0.2); }

.tracklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  overflow: hidden;
}
.track {
  display: grid;
  grid-template-columns: 24px 1fr 60px 50px;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px dashed rgba(255,160,51,0.15);
}
.track .n { color: var(--phosphor); font-size: 9px; }
.track .nm { color: var(--amber); }
.track.active .nm { font-weight: 600; text-shadow: 0 0 6px rgba(255,160,51,0.6); }
.track .tm { color: var(--label); font-size: 9px; text-align: right; }
.track .key { color: var(--phosphor); font-size: 9px; text-align: right; letter-spacing: 0.1em; }

/* ----- program: HORIZON (generative art) ----- */
.horizon-grid {
  grid-template-columns: 1fr 0.7fr;
  grid-template-rows: 1fr 1fr;
}
.horizon-canvas {
  grid-row: 1 / 3;
  position: relative;
  border: 1px solid rgba(255,160,51,0.4);
  background: #02050a;
  overflow: hidden;
  min-height: 0;
}

/* ----- program: ARCHIVE / about ----- */
.archive-grid {
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr;
}
.archive-letter {
  font-size: 11px;
  line-height: 1.65;
  color: var(--amber);
  white-space: pre-wrap;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.archive-letter .head {
  color: var(--phosphor);
  font-size: 9px;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  display: block;
}
.archive-letter .sig {
  color: var(--bone);
  margin-top: 8px;
  font-style: italic;
  display: block;
  opacity: 0.85;
}
.archive-grid .box {
  display: flex;
  flex-direction: column;
}
.archive-fact {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(77,219,255,0.15);
}
.archive-fact .k { color: var(--phosphor); letter-spacing: 0.16em; font-size: 9px; }
.archive-fact .v { color: var(--amber); }

/* ------------------------------------------------------------------
   RIGHT PANEL — instruments
------------------------------------------------------------------ */
.dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dial-face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1c2027 0%, #0a0c10 80%);
  border: 2px solid #2a2f37;
  position: relative;
  box-shadow: inset 0 0 12px #000, 0 0 4px rgba(0,0,0,0.6);
}
.dial-arc {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(
    from 135deg,
    var(--green) 0deg,
    var(--amber) 110deg,
    var(--warn) 160deg,
    transparent 270deg
  );
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 58%, #000 70%, transparent 72%);
          mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 58%, #000 70%, transparent 72%);
  opacity: 0.65;
}
.dial-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: 20px;
  background: linear-gradient(180deg, transparent 0%, var(--amber) 30%, var(--amber) 100%);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  box-shadow: 0 0 6px rgba(255,160,51,0.6);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dial-cap {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: linear-gradient(180deg, #c0c4ca, #3a3f48);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #1a1d22;
}
.dial-tick {
  position: absolute;
  top: 50%; left: 50%;
  width: 1px; height: 18px;
  background: var(--label);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%);
}
.dial-ticks {
  position: absolute;
  inset: 0;
}
.dial-label {
  font-size: 8.5px;
  color: var(--label);
  letter-spacing: 0.2em;
  text-align: center;
}
.dial-value {
  font-size: 11px;
  color: var(--amber);
  text-shadow: 0 0 4px rgba(255,160,51,0.4);
  letter-spacing: 0.1em;
}

.dials-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dial { gap: 2px; }
.dial-value { font-size: 10px; }
.dial-label { font-size: 8px; }

/* vu-style horizontal meters */
.hmeter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
.hmeter .k {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--label);
}
.hmeter .k .v { color: var(--amber); }
.hmeter .segments {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 2px;
  height: 6px;
}
.hmeter .seg {
  background: #1d2128;
  box-shadow: inset 0 0 1px #000;
}
.hmeter .seg.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
.hmeter .seg.on.mid { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.hmeter .seg.on.hi  { background: var(--warn);  box-shadow: 0 0 4px var(--warn); }

/* lamp grid */
.lamp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.lamp { padding: 4px 3px; gap: 3px; }
.lamp .bulb { width: 10px; height: 10px; }
.lamp .lbl { font-size: 7px; letter-spacing: 0.12em; }
.lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 3px;
  border: 1px solid #1d2128;
  background: #0a0c10;
}
.lamp .bulb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #1d2128;
  box-shadow: inset 0 0 3px #000;
}
.lamp.on.amber .bulb  { background: var(--amber);    box-shadow: 0 0 8px var(--amber-glow), inset 0 0 2px rgba(0,0,0,0.4); }
.lamp.on.cyan  .bulb  { background: var(--phosphor); box-shadow: 0 0 8px var(--phosphor-glow), inset 0 0 2px rgba(0,0,0,0.4); }
.lamp.on.green .bulb  { background: var(--green);    box-shadow: 0 0 8px var(--green), inset 0 0 2px rgba(0,0,0,0.4); }
.lamp.on.warn  .bulb  { background: var(--warn);     box-shadow: 0 0 8px var(--warn), inset 0 0 2px rgba(0,0,0,0.4); }
.lamp .lbl {
  font-size: 7.5px;
  letter-spacing: 0.15em;
  color: var(--label);
  text-align: center;
}

/* keypad */
.keypad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.key { font-size: 9px; padding: 2px 0; }
.key.wide { grid-column: span 6; }
.key {
  background: linear-gradient(180deg, #1c2027 0%, #14171c 100%);
  border: 1px solid #2a2f37;
  border-bottom-color: #0a0c10;
  border-right-color: #0a0c10;
  color: var(--amber);
  font-size: 10px;
  padding: 3px 0;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
  text-shadow: 0 0 3px rgba(255,160,51,0.4);
}
.key:hover { color: var(--amber-glow); }
.key:active {
  transform: translateY(1px);
  border-bottom-color: #2a2f37;
}
.key.wide { grid-column: span 3; }
.key.warn { color: var(--warn); text-shadow: 0 0 3px rgba(255,77,77,0.4); }

/* ------------------------------------------------------------------
   TOP-LEFT BRAND BLOCK
------------------------------------------------------------------ */
.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 10px;
  border-right: 1px solid #1d2128;
  margin-right: 4px;
  height: 100%;
}
.brand-logo {
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
}
.brand-logo .lg-halo {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(120, 35,  5, 0.95)  0%,
    rgba(180, 65, 15, 0.85) 25%,
    rgba(230,120, 40, 0.65) 45%,
    rgba(255,160, 60, 0.40) 60%,
    rgba(120, 40, 10, 0.18) 78%,
    transparent 95%);
  filter: blur(1.5px);
}
.brand-logo .lg-ring {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(255,220,160,0.95);
  box-shadow: 0 0 5px rgba(255,180,80,0.7), inset 0 0 3px rgba(255,200,120,0.5);
}
.brand-logo .lg-ring::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 0.5px solid rgba(255,240,200,0.6);
}
.brand-logo .lg-star {
  position: absolute;
  inset: 24%;
  background: #000;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  animation: void-star-rot 60s linear infinite;
  filter: drop-shadow(0 0 3px rgba(255,140,50,0.6));
}
.brand-logo .lg-star::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%,   rgba(255,240,200,0.85) 0%, transparent 22%),
    radial-gradient(circle at 100% 50%, rgba(255,240,200,0.85) 0%, transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255,240,200,0.85) 0%, transparent 22%),
    radial-gradient(circle at 0% 50%,   rgba(255,240,200,0.85) 0%, transparent 22%);
  mix-blend-mode: screen;
  animation: void-star-tips 2.4s ease-in-out infinite;
}
.brand-text { display: flex; flex-direction: column; gap: 0; line-height: 1.05; }
.brand-text .b1 {
  font-family: 'Major Mono Display', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--bone);
  text-shadow: 0 0 6px rgba(255,160,51,0.5);
  white-space: nowrap;
  text-transform: lowercase;
}
.brand-text .b2 {
  font-size: 8px;
  letter-spacing: 0.5em;
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(77,219,255,0.5);
  text-align: left;
}

/* ------------------------------------------------------------------
   COMMS LOG (bottom strip)
------------------------------------------------------------------ */
.comms {
  background: linear-gradient(180deg, #0a0c10 0%, #06070a 100%);
  border-top: 1px solid #1d2128;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.comms-label {
  color: var(--phosphor);
  letter-spacing: 0.22em;
  font-size: 9px;
  flex-shrink: 0;
}
.comms-stream {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.comms-track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: comms-roll 90s linear infinite;
  color: var(--amber);
  text-shadow: 0 0 4px rgba(255,160,51,0.4);
  letter-spacing: 0.08em;
}
.comms-track .t { color: var(--phosphor); margin-right: 6px; letter-spacing: 0.15em; }
.comms-track .w { color: var(--warn);     margin-right: 6px; letter-spacing: 0.15em; }
@keyframes comms-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.comms-clock {
  color: var(--amber);
  letter-spacing: 0.16em;
  text-shadow: 0 0 4px rgba(255,160,51,0.4);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   PROGRAM TRANSITIONS
------------------------------------------------------------------ */
@keyframes static-in {
  0%   { opacity: 0; filter: blur(4px) brightness(2); }
  20%  { opacity: 1; filter: blur(0) brightness(1.2); }
  100% { opacity: 1; filter: none; }
}
.program, .splash {
  animation: static-in 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@keyframes static-flash {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.crt-static {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.0) 0px,
      rgba(255,255,255,0.0) 2px,
      rgba(255,255,255,0.06) 2px,
      rgba(255,255,255,0.06) 3px
    );
  mix-blend-mode: screen;
  z-index: 70;
  opacity: 0;
}
.crt-static.flash { animation: static-flash 0.18s ease-out; }

/* ------------------------------------------------------------------
   PRODUCT META BANNER (above CRT outside bezel)
------------------------------------------------------------------ */
.signal-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 18px 0;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--label);
}
.signal-strip .sig-id {
  color: var(--amber);
  text-shadow: 0 0 4px rgba(255,160,51,0.4);
}
.signal-strip .sig-spacer { flex: 1; }
.signal-strip .sig-bars {
  display: inline-flex;
  gap: 2px;
  align-items: end;
}
.signal-strip .sig-bars span {
  display: inline-block;
  width: 3px;
  background: var(--phosphor);
  box-shadow: 0 0 4px var(--phosphor);
}

/* hailing section in left panel — email + legal links. */
.hail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.7;
}
.hail-line {
  color: var(--phosphor);
  text-decoration: none;
  transition: color 0.15s, text-shadow 0.15s, transform 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hail-line:hover,
.hail-line:focus-visible {
  color: var(--phosphor-glow);
  text-shadow: 0 0 6px rgba(154,234,255,0.6);
  outline: none;
  transform: translateX(2px);
}

/* mobile program switcher (display:flex only at <=880px below).
   Wrapped in .mobile-progs-wrap so a fade-cue and arrow can sit above
   the scrolling strip without scrolling with it. */
.mobile-progs-wrap {
  display: none;
  position: relative;
}
.mobile-progs-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 44px;
  background: linear-gradient(to right,
    rgba(6,7,10,0) 0%,
    rgba(6,7,10,0.85) 60%,
    rgba(6,7,10,1) 100%);
  pointer-events: none;
  z-index: 2;
}
.mobile-progs-wrap::before {
  content: "▸";
  position: absolute;
  right: 10px;
  top: 50%;
  color: var(--amber);
  font-size: 14px;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 0 6px rgba(255,160,51,0.6);
  animation: mp-cue 1.4s ease-in-out infinite;
}
@keyframes mp-cue {
  0%, 100% { transform: translate(0, -50%); opacity: 0.85; }
  50%      { transform: translate(4px, -50%); opacity: 1; }
}
.mobile-progs {
  display: none;
  gap: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid #1d2128;
  background: linear-gradient(180deg, #0a0c10 0%, #06070a 100%);
  scroll-snap-type: x proximity;
  scroll-padding-left: 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.mobile-progs::-webkit-scrollbar { display: none; }
.mobile-prog {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid #2a2f37;
  background: linear-gradient(180deg, #14171c 0%, #0a0c10 100%);
  color: var(--bone);
  font-family: inherit;
  cursor: pointer;
  min-width: 86px;
  position: relative;
  scroll-snap-align: start;
}
.mobile-prog .mp-name {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  white-space: nowrap;
}
.mobile-prog .mp-meta {
  font-size: 7.5px;
  letter-spacing: 0.15em;
  color: var(--label);
  white-space: nowrap;
}
.mobile-prog.active {
  border-color: var(--amber);
  box-shadow: 0 0 6px rgba(255,160,51,0.35), inset 0 0 4px rgba(255,160,51,0.15);
}
.mobile-prog.active .mp-name {
  color: var(--amber);
  text-shadow: 0 0 4px rgba(255,160,51,0.5);
}
.mobile-prog.active .mp-meta { color: var(--amber-dim); }
.mobile-prog .mp-lamp {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1d2128;
}
.mobile-prog.active .mp-lamp {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
}

/* ------------------------------------------------------------------
   MOBILE — bumped up to 880px so iPad mini portrait (768) and small
   foldables get the stacked layout instead of cramped desktop.
------------------------------------------------------------------ */
@media (max-width: 880px) {
  .mobile-progs-wrap { display: block; }
  .mobile-progs { display: flex; }
  .console { grid-template-rows: 40px auto 1fr 28px; }
  /* hide standby switch in left panel — STANDBY is in mobile-progs */
  .master-section { display: none; }
  /* compress header band on mobile */
  .telemetry-band {
    height: auto;
    min-height: 80px;
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .telemetry-band::-webkit-scrollbar { display: none; }
  .band-divider { display: none; }
  .band-group { flex-wrap: wrap; }
  .band-group.band-dials { width: 100%; flex-wrap: wrap; }
  .mdial { flex: 1 1 calc(50% - 6px); min-width: 130px; }
  .band-lamps { flex-wrap: wrap; }
  .band-lamps .lamp .lbl { font-size: 6.5px; }
  body { font-size: 11px; }
  html, body, #root { position: relative; overflow: auto; }
  .console { height: auto; min-height: 100vh; overflow: visible; min-width: 0; }

  .telemetry { gap: 8px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
  .telemetry::-webkit-scrollbar { display: none; }
  .telemetry .tel-spacer { flex: 0 0 0; }
  .telemetry .tel-block.hide-mobile, .telemetry .tel-divider.hide-mobile { display: none; }

  /* minmax(0, 1fr) — without this, the grid column expands to the
     mobile-progs intrinsic width (~780px) and blows the layout out
     horizontally past the viewport. */
  .body { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .panel.left { border-right: none; border-bottom: 1px solid #1d2128; max-height: none; overflow: visible; order: 2; min-width: 0; }
  .center { order: 1; min-height: 60vh; min-width: 0; }
  /* mobile-progs strip needs an explicit width cap; flex children with
     min-width:86px would otherwise force the parent to ~780px wide. */
  .mobile-progs { max-width: 100%; }

  .crt-bezel { margin: 8px; padding: 22px 14px 22px; border-radius: 10px; }
  .crt-content { padding: 14px; }
  /* allow program content to scroll inside the CRT — multi-box layouts
     (parser, archive, pulsar) overflow the CRT's height when stacked
     vertically. The bezel + scanlines stay fixed, content scrolls.
     flex-shrink:0 on children prevents the default flex squash that
     would otherwise hide content inside .box (which has overflow:hidden). */
  .crt { overflow: hidden; }
  .program { padding: 30px 14px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .program > * { flex-shrink: 0; }
  .program .box { overflow: visible; }
  .parser-stream { overflow: hidden; }
  .program-head .title { font-size: 18px; }
  .program-body { gap: 8px; }

  .bh-stage { width: min(70%, 260px); }
  .brand-mark { font-size: 18px; letter-spacing: 0.06em; }
  .splash-anno { font-size: 8px; }
  .splash-anno.tl { top: 24px; left: 12px; }
  .splash-anno.tr { top: 24px; right: 12px; }

  .signal-strip { padding: 4px 10px 0; font-size: 8px; gap: 8px; }

  .game-grid, .parser-grid, .tidal-grid, .pulsar-grid, .horizon-grid, .archive-grid {
    grid-template-columns: 1fr;
  }
  .game-viewport, .parser-stream, .horizon-canvas { grid-row: auto; min-height: 180px; }
  .tidal-spectrum { grid-column: 1; }
  .program-head { flex-wrap: wrap; gap: 6px; }
  .program-head .codeword { text-align: left; }
  .program-head .codeword .big { font-size: 12px; }

  .dial-face { width: 56px; height: 56px; }
  .dial-needle { height: 22px; }
  .lamp-grid { grid-template-columns: repeat(4, 1fr); }

  .panel.left .section.programs-section { display: none; }
  .brand-block { gap: 8px; }
  .brand-text .b1 { font-size: 11px; }
  .brand-text .b2 { font-size: 7px; letter-spacing: 0.4em; }
}

/* ------------------------------------------------------------------
   SMALL PHONES — iPhone SE through Pro Max (≤ 480px)
   At this width, the lamp parade in the telemetry band wraps into
   3+ rows, the long bezel labels collide with the HUD, and the
   splash CTA + corner annotations crowd the centered black hole.
------------------------------------------------------------------ */
@media (max-width: 480px) {
  /* drop the decorative MASTER + STATUS lamps; keep the GW dials so
     the band still reads as instrumentation, not chrome. */
  .telemetry-band .band-group:not(.band-dials) { display: none; }
  .telemetry-band { min-height: 0; padding: 6px 8px; gap: 6px; }
  .telemetry-band .band-group.band-dials { gap: 6px; }
  .mdial { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .mdial-label { width: 30px; flex: 0 0 30px; }
  .mdial-value { width: 30px; flex: 0 0 30px; }

  /* hide the wordy bezel labels — they collide with the HUD on a
     narrow CRT. Keep tr (channel) and br (clock) which are short. */
  .bezel-label.tl, .bezel-label.bl { display: none; }
  .bezel-label.tr, .bezel-label.br { font-size: 7.5px; letter-spacing: 0.18em; }

  .crt-bezel { margin: 6px; padding: 16px 8px; border-radius: 8px; }
  .program { padding: 24px 10px 16px; }
  .program-head .title { font-size: 16px; letter-spacing: 0.14em; }
  .program-head .codeword { font-size: 8px; }
  .program-head .codeword .big { font-size: 11px; }

  /* splash: hide the corner astro readouts to give the black hole and
     CTA breathing room. The CTA itself shrinks. */
  .splash .splash-anno { display: none; }
  .splash-cta.top { font-size: 11px; padding: 4px 8px; gap: 6px; letter-spacing: 0.1em; border-width: 1px; }
  .bh-stage { width: min(78%, 220px); }
  .brand-mark { font-size: 16px; }
  .brand-sub { font-size: 11px; letter-spacing: 0.4em; }
  .brand-tag { font-size: 6.5px; letter-spacing: 0.04em; bottom: 6px; }

  .signal-strip { padding: 4px 8px 0; font-size: 7.5px; gap: 6px; letter-spacing: 0.14em; }

  /* tighten the chip switcher so 3 chips fit before the scroll cue. */
  .mobile-progs { padding: 6px 8px; gap: 5px; }
  .mobile-progs-wrap::after { width: 36px; }
  .mobile-progs-wrap::before { right: 8px; font-size: 12px; }
  .mobile-prog { min-width: 78px; padding: 5px 8px; }
  .mobile-prog .mp-name { font-size: 9.5px; }
  .mobile-prog .mp-meta { font-size: 7px; }

  /* comms ticker: tighter on small phones. */
  .comms { padding: 0 8px; gap: 8px; font-size: 9px; }
  .comms-label { font-size: 8px; letter-spacing: 0.18em; }
  .comms-clock { font-size: 9px; }

  /* program-screen tweaks: smaller min-heights so vertically-stacked
     boxes don't all reserve 180px each and force a long scroll. */
  .game-viewport, .parser-stream, .horizon-canvas { min-height: 160px; }
  .game-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat .v { font-size: 14px; }
  .archive-letter { font-size: 10px; line-height: 1.55; }

  /* the brand block shouldn't take more than the dot of clock space */
  .brand-block { padding-right: 6px; margin-right: 0; gap: 6px; }
  .brand-logo { width: 26px; height: 26px; }
  .brand-text .b1 { font-size: 10px; letter-spacing: 0.06em; }
  .brand-text .b2 { font-size: 6.5px; letter-spacing: 0.3em; }
}

/* ------------------------------------------------------------------
   small utility
------------------------------------------------------------------ */
.mono { font-family: 'IBM Plex Mono', monospace; }
.amber { color: var(--amber); }
.cyan  { color: var(--phosphor); }
.dim   { color: var(--label); }
.warn  { color: var(--warn); }