/* Art of Bow Radio — 1940s space radio console */
:root {
  --metal-0: #0a0b0e;
  --metal-1: #12141a;
  --metal-2: #1a1d24;
  --metal-3: #252830;
  --metal-4: #343840;
  --metal-edge: #4a505c;
  --rivet: #6a7078;
  --bakelite: #1c1410;
  --bakelite-hi: #3a2a1c;
  --amber: #ff9a3c;
  --amber-dim: #c46a20;
  --amber-glow: rgba(255, 154, 60, 0.55);
  --tube-cold: #2a3038;
  --phosphor: #33ff66;
  --phosphor-dim: #1a9940;
  --phosphor-glow: rgba(51, 255, 102, 0.45);
  --cream: #e8dcc0;
  --text: #c8c4b8;
  --text-dim: #7a7870;
  --danger: #c44;
  --warmth: 0;
  --tube-intensity: 0;
  --crt-noise: 0.08;
  --power-dim: 0.45;
}

[data-tone="green"] {
  --phosphor: #33ff66;
  --phosphor-dim: #1a9940;
  --phosphor-glow: rgba(51, 255, 102, 0.45);
}
[data-tone="amber"] {
  --phosphor: #ffb840;
  --phosphor-dim: #b87a18;
  --phosphor-glow: rgba(255, 184, 64, 0.45);
}
[data-tone="cyan"] {
  --phosphor: #40f0ff;
  --phosphor-dim: #1888a0;
  --phosphor-glow: rgba(64, 240, 255, 0.45);
}

[data-filament="on"] {
  --tube-intensity: 1;
  --warmth: 1;
}
[data-filament="off"][data-power="on"] {
  --tube-intensity: 0.45;
  --warmth: 0.35;
}
[data-power="off"] {
  --tube-intensity: 0;
  --warmth: 0;
  --power-dim: 0.38;
}
[data-power="on"] {
  --power-dim: 1;
}
[data-bandwidth="high"] {
  --crt-noise: 0.28;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--metal-0);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  position: relative;
}

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #0e1420 0%, #050608 70%);
}

#nebula {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 70% 40%, rgba(40, 60, 120, 0.25), transparent 70%),
    radial-gradient(ellipse 35% 40% at 25% 60%, rgba(80, 40, 100, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(20, 80, 100, 0.12), transparent 70%);
  animation: nebula-drift 80s ease-in-out infinite alternate;
  opacity: 0.85;
}

@keyframes nebula-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to { transform: translate(3%, 2%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  #nebula { animation: none; }
  .dial-ring.spinning { animation: none !important; }
  .tube-filament { animation: none !important; }
}

/* —— App shell —— */
.app {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 72px;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "console"
    "footer";
  gap: 12px;
  filter: brightness(calc(0.55 + 0.45 * var(--power-dim)))
          saturate(calc(0.6 + 0.4 * var(--power-dim)));
  transition: filter 0.8s ease;
}

.app[data-power="on"] {
  filter: brightness(1) saturate(calc(0.85 + 0.15 * var(--warmth)))
          drop-shadow(0 0 calc(8px * var(--warmth)) rgba(255, 140, 40, 0.12));
}

/* Logo */
.logo-plate {
  grid-area: logo;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(180deg, #2a2e36 0%, #1a1d24 100%);
  border: 1px solid var(--metal-edge);
  border-radius: 3px;
  padding: 8px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(0,0,0,0.3);
  position: relative;
  color: var(--cream);
}
.logo-plate::before,
.logo-plate::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9aa, #445);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
  top: 50%; transform: translateY(-50%);
}
.logo-plate::before { left: 4px; }
.logo-plate::after { right: 4px; }
.logo-icon { width: 28px; height: 28px; color: var(--amber); filter: drop-shadow(0 0 4px var(--amber-glow)); }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; padding: 0 8px; }
.logo-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.logo-sub { font-size: 8px; letter-spacing: 0.2em; color: var(--text-dim); margin-top: 2px; }

/* Tubes */
.tubes {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-180px);
  display: flex;
  gap: 10px;
  z-index: 2;
  pointer-events: none;
}
.tube {
  width: 28px;
  height: 56px;
  background: linear-gradient(90deg, #1a1c20, #2a2e36, #1a1c20);
  border-radius: 4px 4px 2px 2px;
  padding: 4px 5px 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 0 0 1px #3a3d45;
}
.tube-glass {
  height: 100%;
  border-radius: 40% 40% 20% 20% / 20% 20% 40% 40%;
  background: linear-gradient(135deg, rgba(180,200,220,0.25), rgba(40,50,60,0.3) 40%, rgba(20,25,30,0.5));
  border: 1px solid rgba(180,200,220,0.2);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.4),
    0 0 calc(12px * var(--tube-intensity)) rgba(255, 140, 40, calc(0.5 * var(--tube-intensity))),
    0 0 calc(28px * var(--tube-intensity)) rgba(255, 100, 20, calc(0.25 * var(--tube-intensity)));
  transition: box-shadow 1.2s ease;
}
.tube-filament {
  position: absolute;
  left: 50%; top: 30%;
  width: 3px; height: 40%;
  transform: translateX(-50%);
  background: var(--tube-cold);
  border-radius: 1px;
  box-shadow: none;
  transition: background 1s, box-shadow 1s;
}
.app[data-power="on"] .tube-filament {
  background: #ffc070;
  box-shadow:
    0 0 6px rgba(255,180,60, calc(0.9 * var(--tube-intensity))),
    0 0 14px rgba(255,120,20, calc(0.6 * var(--tube-intensity)));
  animation: filament-pulse 2.4s ease-in-out infinite;
}
@keyframes filament-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.tube-plate {
  position: absolute;
  bottom: 8%; left: 20%; right: 20%;
  height: 18%;
  background: linear-gradient(90deg, #4a5058, #8a9098, #4a5058);
  border-radius: 1px;
  opacity: 0.7;
}

/* Porthole removed — kept inert if any leftover markup */
.porthole { display: none !important; }
.porthole-rim {
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, #1a1d24 63%, #2a2e36 70%, #12141a 78%, #3a3d45 82%, #1a1d24 88%),
    linear-gradient(145deg, #3a3e48, #12141a);
  padding: 14px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,255,255,0.08),
    inset 0 -2px 6px rgba(0,0,0,0.6);
  position: relative;
}
.porthole-rim::before,
.porthole-rim::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9aa, #334);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.porthole-rim::before { top: 8%; left: 50%; transform: translateX(-50%); }
.porthole-rim::after { bottom: 8%; left: 50%; transform: translateX(-50%); }
.porthole-glass {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #020408;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}
#porthole-space {
  width: 100%; height: 100%;
  display: block;
}
.porthole-reflection {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

/* Console modules */
.console {
  grid-area: console;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.module {
  background:
    linear-gradient(180deg, #22262e 0%, #161920 40%, #12141a 100%);
  border: 1px solid #3a3e48;
  border-radius: 6px;
  padding: 14px 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -2px 8px rgba(0,0,0,0.4),
    0 4px 16px rgba(0,0,0,0.45);
  position: relative;
  /* rivets */
  background-image:
    radial-gradient(circle at 10px 10px, #6a7078 1.2px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, #6a7078 1.2px, transparent 1.5px),
    radial-gradient(circle at 10px calc(100% - 10px), #6a7078 1.2px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #6a7078 1.2px, transparent 1.5px),
    linear-gradient(180deg, #22262e 0%, #161920 40%, #12141a 100%);
}
.module-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
}

/* VU */
.vu-meter {
  background: #0e1014;
  border: 2px solid #3a3e48;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 0 0 1px #1a1c20;
}
.vu-svg { width: 100%; height: auto; display: block; }
#vu-needle { transition: transform 0.08s linear; }

/* Toggles */
.toggle-row {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin-bottom: 16px;
}
.toggle-row.compact { margin-bottom: 0; flex: 1; }
.toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.toggle-label {
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-dim);
}
.toggle.small .toggle-label { font-size: 7px; }
.toggle-body {
  width: 28px;
  height: 40px;
  background: linear-gradient(90deg, #1a1c20, #2a2e36, #1a1c20);
  border-radius: 3px;
  border: 1px solid #3a3e48;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
}
.toggle.small .toggle-body { width: 22px; height: 32px; }
.toggle-lever {
  position: absolute;
  left: 3px; right: 3px;
  height: 16px;
  top: 20px;
  background: linear-gradient(180deg, #5a6068, #2a2e36);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: top 0.15s ease, background 0.2s;
}
.toggle.small .toggle-lever { height: 12px; top: 16px; }
.toggle[data-on="true"] .toggle-lever {
  top: 4px;
  background: linear-gradient(180deg, #8a9080, #4a6040);
  box-shadow: 0 0 8px rgba(100, 200, 80, 0.35), 0 2px 3px rgba(0,0,0,0.5);
}
.toggle.small[data-on="true"] .toggle-lever { top: 3px; }
#toggle-power[data-on="true"] .toggle-lever {
  background: linear-gradient(180deg, #ffb060, #c05010);
  box-shadow: 0 0 10px var(--amber-glow);
}
.toggle-hint {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 6px;
  color: #555;
  letter-spacing: 0.05em;
}

/* Knobs */
.knob-row {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}
.knob-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.knob {
  width: 64px;
  height: 64px;
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.knob.large { width: 76px; height: 76px; }
.knob:active { cursor: grabbing; }
.knob-marks {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -135deg, transparent 0deg, transparent 270deg, transparent 270deg),
    radial-gradient(circle, transparent 62%, #3a3e48 63%, #3a3e48 64%, transparent 65%);
}
.knob-marks::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -135deg, #6a7078 0deg 1.5deg, transparent 1.5deg 27deg);
  mask: radial-gradient(circle, transparent 68%, #000 69%, #000 78%, transparent 79%);
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 69%, #000 78%, transparent 79%);
  opacity: 0.7;
}
.knob-body {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #4a3a2a, #1c1410 55%, #0a0806);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,200,120,0.08),
    inset 0 -3px 6px rgba(0,0,0,0.6),
    0 0 0 2px #2a2418;
  transform: rotate(-135deg);
  transition: box-shadow 0.2s;
}
.knob:focus-visible .knob-body {
  box-shadow:
    0 4px 10px rgba(0,0,0,0.7),
    0 0 0 2px var(--amber),
    0 0 12px var(--amber-glow);
}
.knob-indicator {
  position: absolute;
  top: 10%; left: 50%;
  width: 3px; height: 28%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #e8dcc0, #8a7050);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(255,200,100,0.4);
}
.knob-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-dim);
}

.right-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Center play dial */
.play-dial {
  position: relative;
  width: min(220px, 70vw);
  aspect-ratio: 1;
  margin: 8px auto 18px;
  display: grid;
  place-items: center;
}
.dial-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 42%, #1a1d24 43%, #2a2e36 48%, #1a1d24 52%, transparent 53%),
    conic-gradient(from 0deg, #3a3e48, #1a1d24, #4a5058, #1a1d24, #3a3e48);
  box-shadow:
    0 0 0 3px #12141a,
    0 6px 20px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(0,0,0,0.5);
}
.dial-ring.spinning {
  animation: dial-spin 12s linear infinite;
}
@keyframes dial-spin {
  to { transform: rotate(360deg); }
}
.dial-ticks {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: repeating-conic-gradient(#6a7078 0deg 0.8deg, transparent 0.8deg 6deg);
  mask: radial-gradient(circle, transparent 78%, #000 79%, #000 92%, transparent 93%);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%, #000 92%, transparent 93%);
  opacity: 0.55;
  pointer-events: none;
}
.play-btn {
  position: relative;
  z-index: 2;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #4a5058;
  background:
    radial-gradient(circle at 40% 35%, #3a4038, #1a1e18 60%, #0e100e);
  color: var(--cream);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(255,255,255,0.08),
    inset 0 -3px 8px rgba(0,0,0,0.5);
  transition: transform 0.1s, box-shadow 0.2s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.play-btn:hover {
  color: var(--amber);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    0 0 16px rgba(255,154,60,0.25),
    inset 0 2px 4px rgba(255,255,255,0.1);
}
.play-btn:active { transform: scale(0.94); }
.app[data-power="on"] .play-btn.playing {
  color: var(--phosphor);
  box-shadow:
    0 0 20px var(--phosphor-glow),
    inset 0 0 12px rgba(51,255,102,0.15);
}
.play-btn svg { width: 36%; height: 36%; fill: currentColor; }
.play-btn .icon-pause { display: none; }
.play-btn.playing .icon-play { display: none; }
.play-btn.playing .icon-pause { display: block; }
.dial-status {
  position: absolute;
  bottom: 6%;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  z-index: 2;
}
.app[data-power="on"] .dial-status { color: var(--phosphor-dim); text-shadow: 0 0 6px var(--phosphor-glow); }

/* Social */
.social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.social-btn {
  width: 64px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-dim);
  background: linear-gradient(180deg, #2a2e36, #14161c);
  border: 1px solid #3a3e48;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 3px 0 #0a0b0e,
    0 4px 8px rgba(0,0,0,0.4);
  transition: transform 0.08s, color 0.2s, box-shadow 0.2s;
  font-size: 8px;
  letter-spacing: 0.06em;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.social-btn svg { width: 18px; height: 18px; fill: currentColor; }
.social-btn:hover { color: var(--cream); }
.social-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    0 1px 0 #0a0b0e;
}

/* CRT screens */
.crt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.crt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crt-bezel {
  width: 100%;
  background: linear-gradient(180deg, #2a2e36, #12141a);
  border: 1px solid #3a3e48;
  border-radius: 4px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px #0a0b0e, 0 2px 6px rgba(0,0,0,0.5);
}
.crt-screen {
  position: relative;
  aspect-ratio: 1.15;
  background: #021008;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
  opacity: 0.15;
  transition: opacity 0.6s, box-shadow 0.8s;
}
.app[data-power="on"] .crt-screen {
  opacity: 1;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.7),
    0 0 12px var(--phosphor-glow);
}
.crt-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0, calc(0.15 + var(--crt-noise))) 2px,
    rgba(0,0,0, calc(0.15 + var(--crt-noise))) 3px
  );
  pointer-events: none;
  z-index: 3;
}
.crt-noise {
  position: absolute; inset: 0;
  opacity: var(--crt-noise);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}
.crt-content {
  position: relative;
  z-index: 1;
  padding: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Courier New", "Lucida Console", monospace;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-glow);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.4s 0.3s;
}
.app[data-power="on"] .crt-content { opacity: 1; }
.crt-boot {
  position: absolute; inset: 0;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-glow);
  white-space: pre-wrap;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}
.crt-boot.active { opacity: 1; }
.crt-header { font-size: 8px; letter-spacing: 0.15em; opacity: 0.7; margin-bottom: 4px; }
.freq-num { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; }
.freq-title {
  font-size: 8px;
  margin: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  max-width: 100%;
}
.wave-canvas { width: 100%; height: 36px; margin-top: auto; image-rendering: pixelated; }
.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  min-height: 60px;
}
.signal-bars i {
  flex: 1;
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor-glow);
  height: 8%;
  border-radius: 1px 1px 0 0;
  transition: height 0.12s ease;
  opacity: 0.85;
}
.signal-db { font-size: 9px; opacity: 0.7; }
.crt-caption {
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  font-weight: 600;
}

/* Mini gauges */
.gauge-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.mini-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0e1014;
  border: 1px solid #3a3e48;
  border-radius: 3px;
  padding: 4px 4px 6px;
}
.gauge-svg { width: 100%; height: auto; }
.gauge-label {
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 700;
  margin-top: 2px;
}
#mod-needle, #out-needle { transition: transform 0.1s linear; }

/* SIG terminal */
.sig-terminal {
  position: fixed;
  bottom: 64px;
  left: 12px;
  right: 12px;
  max-width: 360px;
  max-height: 140px;
  z-index: 20;
  background: #021008;
  border: 1px solid var(--phosphor-dim);
  border-radius: 3px;
  box-shadow: 0 0 20px var(--phosphor-glow), 0 8px 24px rgba(0,0,0,0.6);
  font-family: "Courier New", monospace;
  color: var(--phosphor);
  font-size: 10px;
  overflow: hidden;
}
.sig-terminal[hidden] { display: none; }
.sig-header {
  padding: 4px 8px;
  border-bottom: 1px solid var(--phosphor-dim);
  letter-spacing: 0.1em;
  opacity: 0.8;
  background: rgba(0,40,15,0.5);
}
.sig-log {
  padding: 6px 8px;
  height: 100px;
  overflow-y: auto;
  line-height: 1.45;
  text-shadow: 0 0 4px var(--phosphor-glow);
}
.sig-log div { opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Footer */
.footer-bar {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #1a1d24, #0e1014);
  border: 1px solid #2a2e36;
  border-radius: 3px;
  padding: 8px 12px;
  margin-top: 4px;
}
.footer-id {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.contact-btn {
  appearance: none;
  background: linear-gradient(180deg, #2a2e36, #161920);
  border: 1px solid #4a5058;
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 8px 14px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0b0e, inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.08s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.contact-btn:hover { color: var(--amber); }
.contact-btn:active { transform: translateY(1px); }

.footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Coin-slot / lever — TRANSMIT SUPPORT */
.support-slot {
  appearance: none;
  border: 1px solid #4a5058;
  background: linear-gradient(180deg, #2a2e36 0%, #161920 100%);
  border-radius: 3px;
  padding: 6px 10px 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  box-shadow: 0 2px 0 #0a0b0e, inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.08s, box-shadow 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  touch-action: manipulation;
}
.support-slot:hover {
  border-color: var(--amber-dim, #c47a20);
  color: var(--amber);
}
.support-slot:active { transform: translateY(1px); }
.support-slot.pulsing {
  box-shadow: 0 0 14px rgba(255, 154, 60, 0.45), 0 2px 0 #0a0b0e;
  border-color: var(--amber);
}
.slot-housing {
  position: relative;
  width: 46px;
  height: 32px;
  background: linear-gradient(180deg, #1a1c20, #0a0b0e);
  border: 1px solid #3a3e48;
  border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
  flex-shrink: 0;
}
.slot-mouth {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: #050608;
  border-radius: 1px;
  box-shadow: inset 0 0 3px #000, 0 0 0 1px #2a2e36;
}
.slot-coin {
  position: absolute;
  left: 3px;
  top: -14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #c49020 55%, #8a6010);
  box-shadow: 0 0 6px rgba(255, 180, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  opacity: 0;
  pointer-events: none;
}
.support-slot.pulsing .slot-coin {
  animation: coin-drop 0.7s ease-in forwards;
}
@keyframes coin-drop {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(22px) scale(0.9); }
  100% { opacity: 0; transform: translateY(26px) scale(0.7); }
}
.slot-lever {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 6px;
  height: 22px;
  background: linear-gradient(90deg, #3a3e48, #6a7078, #3a3e48);
  border-radius: 1px;
  transform-origin: bottom center;
  transition: transform 0.15s ease;
}
.support-slot:active .slot-lever,
.support-slot.pulsing .slot-lever {
  transform: rotate(28deg);
}
.lever-knob {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8a9080, #4a5040);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.slot-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: left;
  max-width: 76px;
}

@media (max-width: 599px) {
  .footer-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .footer-id { text-align: center; }
  .footer-actions { justify-content: stretch; }
  .support-slot, .contact-btn {
    flex: 1;
    justify-content: center;
    min-height: 48px;
  }
  .slot-label { max-width: none; font-size: 10px; }
}

/* Support overlay */
.terminal-panel { position: relative; }
.coin-pulse {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #c49020);
  box-shadow: 0 0 12px rgba(255, 180, 40, 0.7);
  opacity: 0;
  pointer-events: none;
}
.overlay.support-open .coin-pulse {
  animation: coin-pulse-pop 0.9s ease-out;
}
@keyframes coin-pulse-pop {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.6); }
}
.support-option {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--phosphor-dim);
  background: rgba(0, 30, 12, 0.35);
}
.support-opt-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  opacity: 0.85;
}
.support-kofi {
  display: block;
  text-align: center;
  text-decoration: none;
}
.ln-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
.ln-address {
  flex: 1;
  display: flex;
  align-items: center;
  background: #010604;
  border: 1px solid var(--phosphor-dim);
  padding: 8px;
  font-size: 11px;
  word-break: break-all;
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor-glow);
}
.ln-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#ln-qr {
  width: 148px;
  height: 148px;
  background: #fff;
  border: 2px solid var(--phosphor-dim);
  image-rendering: pixelated;
  border-radius: 2px;
}
#ln-copy-status { min-height: 1.2em; margin: 0; }


/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.72);
  display: grid;
  place-items: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.overlay[hidden] { display: none; }
.terminal-panel {
  width: min(420px, 100%);
  background: #021008;
  border: 1px solid var(--phosphor);
  box-shadow: 0 0 30px var(--phosphor-glow), 0 20px 40px rgba(0,0,0,0.7);
  padding: 20px;
  font-family: "Courier New", monospace;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-glow);
  border-radius: 2px;
}
.term-title { font-size: 14px; letter-spacing: 0.12em; margin-bottom: 10px; }
.term-line { font-size: 11px; opacity: 0.8; margin-bottom: 14px; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.contact-form input,
.contact-form textarea {
  background: #010604;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: inherit;
  font-size: 12px;
  padding: 8px;
  border-radius: 2px;
  outline: none;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--phosphor);
  box-shadow: 0 0 8px var(--phosphor-glow);
}
.term-actions { display: flex; gap: 8px; margin-top: 8px; }
.term-btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 10px;
  cursor: pointer;
  text-shadow: 0 0 4px var(--phosphor-glow);
}
.term-btn:hover { background: rgba(51,255,102,0.12); }
.term-btn.ghost { border-color: var(--phosphor-dim); opacity: 0.7; }
.term-hint { font-size: 9px; opacity: 0.55; margin-top: 12px; }

/* Hidden players */
#player-host {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Desktop layout */
@media (min-width: 900px) {
  .app {
    max-width: 1180px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "console"
      "footer";
    padding: 20px 24px 80px;
    gap: 16px;
  }
  .logo-plate { margin-top: 8px; }
  .tubes {
    top: 22px;
    left: auto;
    right: auto;
    left: 220px;
    transform: none;
  }
  .console {
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
  .module { min-height: 420px; }
  .sig-terminal {
    left: 24px;
    bottom: 72px;
  }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
  .console {
    grid-template-columns: 1fr 1fr;
  }
  .center-module {
    grid-column: 1 / -1;
    order: -1;
  }
}

/* Mobile touch targets */
@media (max-width: 599px) {
  .knob { width: 72px; height: 72px; }
  .knob.large { width: 84px; height: 84px; }
  .toggle-body { width: 32px; height: 44px; }
  .social-btn { width: 72px; height: 60px; }
  .tubes { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   SPA views + THE OPERATOR dossier + mini-player
   ═══════════════════════════════════════════════════════════ */
.view[hidden] { display: none !important; }
.app[data-view="console"] .view-operator,
.app[data-view="console"] .view-omnations { display: none !important; }
.app[data-view="operator"] .view-console,
.app[data-view="operator"] .view-omnations { display: none !important; }
.app[data-view="omnations"] .view-console,
.app[data-view="omnations"] .view-operator { display: none !important; }
.app[data-view="operator"],
.app[data-view="omnations"] {
  display: block;
  max-width: 920px;
  padding-bottom: 88px;
}
.app[data-view="operator"] .view-operator { display: block; }
.app[data-view="omnations"] .view-omnations { display: block; }

/* Console nav switches (OPERATOR + OMNATIONS) */
.console-nav {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-switch,
.operator-switch {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #2a2e36, #161920);
  border: 1px solid #4a5058;
  border-radius: 3px;
  color: var(--cream);
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0b0e, inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-tap-highlight-color: transparent;
  min-height: 40px;
  touch-action: manipulation;
}
.nav-switch:hover,
.operator-switch:hover { color: var(--amber); border-color: var(--amber-dim); }
.nav-switch:active,
.operator-switch:active { transform: translateY(1px); }
.op-switch-lever {
  width: 14px;
  height: 22px;
  background: linear-gradient(90deg, #3a3e48, #7a8088, #3a3e48);
  border-radius: 2px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.15);
}
.op-switch-lever::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 3px;
  height: 8px;
  background: linear-gradient(180deg, #c0a060, #6a5020);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(255,180,60,0.35);
}
.op-switch-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

@media (max-width: 599px) {
  .console-nav {
    position: static;
    justify-self: end;
    margin: 0 0 4px auto;
  }
  .view-console {
    display: flex;
    flex-direction: column;
  }
}

/* Operator dossier page */
.operator-shell {
  padding: 20px 16px 24px;
  color: var(--cream);
}
.operator-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.return-console {
  appearance: none;
  background: linear-gradient(180deg, #2a2e36, #161920);
  border: 1px solid #4a5058;
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 10px 14px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0b0e;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.return-console:hover { color: var(--amber); }
.dossier-stamp {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--amber-dim);
  border: 1px dashed var(--amber-dim);
  padding: 6px 10px;
  opacity: 0.85;
}
.operator-hero { margin-bottom: 28px; }
.dossier-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor-glow);
  margin-bottom: 10px;
}
.dossier-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 8px;
}
.dossier-role {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0;
}

/* Typed paper card on metal */
.paper-card {
  background:
    linear-gradient(180deg, #f2e6c8 0%, #e4d4b0 100%);
  color: #2a2418;
  border-radius: 2px;
  padding: 18px 20px 20px;
  margin-bottom: 28px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(80,60,30,0.25),
    inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  text-shadow: none;
}
.paper-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 27px,
    rgba(80, 100, 140, 0.08) 27px,
    rgba(80, 100, 140, 0.08) 28px
  );
  pointer-events: none;
}
.paper-header {
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #6a5030;
  margin-bottom: 12px;
  position: relative;
}
.paper-body {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.65;
  position: relative;
  margin: 0 0 10px;
}
.paper-todo {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: #8a4020;
  letter-spacing: 0.06em;
  position: relative;
  margin: 0;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--text-dim);
  margin: 0 0 14px;
  font-weight: 600;
}

/* Film-frame photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (min-width: 700px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
.film-frame {
  background: #12141a;
  border: 1px solid #3a3e48;
  padding: 8px 8px 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 0 1px #0a0b0e;
  position: relative;
}
.film-frame::before,
.film-frame::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #2a2e36 0 8px, transparent 8px 14px);
  opacity: 0.7;
}
.film-frame::before { top: 2px; }
.film-frame::after { bottom: 22px; }
.film-photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border: 1px solid #1a1c20;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s ease;
}
.film-frame:hover .film-photo {
  transform: scale(1.04);
}
.film-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%);
  pointer-events: none;
}
.film-frame:hover .film-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(255,255,255,0.03) 2px 3px
  );
  animation: film-flicker 0.35s steps(2) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes film-flicker {
  0% { opacity: 0.35; }
  50% { opacity: 0.7; }
  100% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .film-frame:hover .film-photo { transform: none; }
  .film-frame:hover .film-photo::before { animation: none; }
}
.film-label {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  font-family: "Courier New", monospace;
}

.works-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border: 1px solid #3a3e48;
  background: linear-gradient(180deg, #1a1d24, #12141a);
}
.works-list li {
  border-bottom: 1px solid #2a2e36;
}
.works-list li:last-child { border-bottom: none; }
.works-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: background 0.15s, color 0.15s;
}
.works-list a:hover {
  background: rgba(255,154,60,0.08);
  color: var(--amber);
}
.works-list .work-tag {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--phosphor-dim);
  text-shadow: 0 0 4px var(--phosphor-glow);
}

.operator-foot {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-align: center;
  padding: 16px 0 8px;
  opacity: 0.7;
}

/* Brass/metal mini-player strip */
.mini-player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, #3a3428 0%, #2a2418 40%, #1a1610 100%);
  border-top: 1px solid #6a5a40;
  box-shadow:
    0 -4px 24px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,220,150,0.15);
  color: #e8dcc0;
}
.app[data-view="console"] .mini-player { display: none; }
.app[data-view="operator"] .mini-player,
.app[data-view="omnations"] .mini-player { display: flex; }
.mini-play {
  appearance: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid #8a7a50;
  background: radial-gradient(circle at 40% 35%, #4a4030, #1a1610);
  color: #e8dcc0;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.mini-play svg { width: 18px; height: 18px; }
.mini-play .mini-icon-pause { display: none; }
.mini-play.playing .mini-icon-play { display: none; }
.mini-play.playing .mini-icon-pause { display: block; }
.mini-play.playing { color: var(--phosphor); box-shadow: 0 0 12px var(--phosphor-glow); }
.mini-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-station {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #8a7a50;
}
.mini-title {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #8a7a50;
  flex-shrink: 0;
}
.mini-vol input[type="range"] {
  width: 72px;
  accent-color: #c4a060;
  cursor: pointer;
}
@media (max-width: 399px) {
  .mini-vol span { display: none; }
  .mini-vol input { width: 56px; }
}

/* Keep player-host always mounted, never display-none via view swaps */
#player-host {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  opacity: 0;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   Space décor — ringed planet + satellite (no porthole)
   ═══════════════════════════════════════════════════════════ */
.space-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ringed-planet {
  position: absolute;
  right: -8vw;
  bottom: -18vh;
  width: min(52vw, 640px);
  aspect-ratio: 1;
  animation: planet-drift 120s linear infinite;
}
.planet-body {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #d8c4a0 0%, #8a6a40 35%, #3a2818 70%, #1a1008 100%);
  box-shadow:
    inset -18px -12px 40px rgba(0,0,0,0.55),
    0 0 60px rgba(180,140,80,0.15);
}
.planet-ring,
.planet-ring-shadow {
  position: absolute;
  left: -5%; right: -5%;
  top: 42%;
  height: 18%;
  border-radius: 50%;
  border: 3px solid rgba(200,170,120,0.45);
  border-top-color: transparent;
  border-left-color: rgba(200,170,120,0.15);
  border-right-color: rgba(200,170,120,0.15);
  transform: rotate(-18deg) scaleY(0.35);
  box-shadow: 0 0 20px rgba(180,140,80,0.2);
}
.planet-ring-shadow {
  top: 48%;
  border-color: rgba(40,30,20,0.35);
  border-top-color: transparent;
  z-index: -1;
}
.distant-nebula {
  position: absolute;
  top: 8%;
  left: -10%;
  width: 55vw;
  height: 40vh;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(60,40,120,0.22), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(30,60,120,0.18), transparent 55%);
  filter: blur(2px);
  animation: nebula-drift 90s ease-in-out infinite alternate;
}
@keyframes planet-drift {
  from { transform: rotate(0deg) translateY(0); }
  to { transform: rotate(8deg) translateY(-12px); }
}

.satellite {
  position: fixed;
  z-index: 2;
  top: 12vh;
  right: 4vw;
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #c8c0b0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  animation: sat-drift 48s linear infinite;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sat-svg { display: block; overflow: visible; }
.sat-light {
  animation: sat-blink 1.6s ease-in-out infinite;
}
.sat-waves {
  position: absolute;
  left: 50%; top: 42%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1px solid rgba(255,100,60,0.5);
  animation: sat-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.sat-label {
  display: block;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.2em;
  margin-top: 2px;
  opacity: 0.7;
  font-family: "Courier New", monospace;
}
@keyframes sat-drift {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  25%  { transform: translate(-18vw, 8vh) rotate(4deg); }
  50%  { transform: translate(-8vw, 18vh) rotate(-2deg); }
  75%  { transform: translate(6vw, 10vh) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}
@keyframes sat-blink {
  0%, 100% { fill: #ff6040; opacity: 0.45; }
  50% { fill: #ffc080; opacity: 1; filter: drop-shadow(0 0 6px #ff8040); }
}
@keyframes sat-ring {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (max-width: 899px) {
  .satellite {
    top: 4px;
    right: auto;
    left: 50%;
    width: 96px;
    margin-left: -48px;
    opacity: 0.85;
    animation: sat-drift-mobile 36s linear infinite;
  }
  .sat-svg { width: 80px; height: 54px; }
  .ringed-planet {
    right: -30vw;
    bottom: -22vh;
    width: min(70vw, 420px);
    opacity: 0.75;
  }
}
@keyframes sat-drift-mobile {
  0%   { transform: translate(-40vw, 0) rotate(-4deg); }
  50%  { transform: translate(40vw, 18px) rotate(6deg); }
  100% { transform: translate(-40vw, 0) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .satellite, .ringed-planet, .distant-nebula { animation: none !important; }
  .sat-light, .sat-waves { animation: none !important; }
}

/* Hide décor on non-console views a bit quieter */
.app[data-view="operator"] ~ .satellite,
.app[data-view="omnations"] ~ .satellite { opacity: 0.35; }
/* satellite is sibling before .app — use body class via JS; fallback: always visible */

.freq-toast {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor-glow);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.op-switch-lever.omni::after {
  background: linear-gradient(180deg, #80c0c0, #206060);
  box-shadow: 0 0 6px rgba(80,200,200,0.4);
}

.cross-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.cross-link {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
}
.cross-link:hover { color: var(--amber); }
.cross-link.active {
  color: var(--cream);
  border-bottom-color: var(--amber);
}

/* OMNATIONS */
.omnations-shell {
  padding: 20px 16px 24px;
  color: var(--cream);
}
.omni-stamp {
  border-color: rgba(255,160,60,0.45) !important;
  color: #e8c080 !important;
}
.omni-hero { margin-bottom: 20px; }
.omni-blurb {
  font-size: 15px;
  line-height: 1.65;
  max-width: 38em;
  color: #d8d0c0;
  margin: 12px 0 8px;
}
.network-map {
  margin: 18px 0 28px;
  padding: 16px 12px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(80,40,20,0.25), transparent 65%),
    linear-gradient(180deg, rgba(26,22,16,0.85), rgba(12,10,8,0.9));
  border: 1px solid #4a4030;
  border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(255,140,40,0.06), 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}
.net-svg { width: 100%; height: auto; display: block; }
.net-nodes text {
  fill: rgba(220,200,160,0.55);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-family: "Courier New", monospace;
}
.net-node {
  fill: #c08040;
  stroke: #ffe0a0;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px rgba(255,160,60,0.6));
  animation: node-pulse 2.8s ease-in-out infinite;
}
.net-node.hub {
  fill: #ffb060;
  stroke: #fff0c0;
  filter: drop-shadow(0 0 12px rgba(255,180,80,0.85));
}
.net-node[data-delay="1"] { animation-delay: 0.4s; }
.net-node[data-delay="2"] { animation-delay: 0.8s; }
.net-node[data-delay="3"] { animation-delay: 1.2s; }
@keyframes node-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.omni-cta-section {
  text-align: center;
  margin: 8px 0 32px;
}
.omni-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #1a1208;
  cursor: pointer;
  border: 1px solid #e8c080;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #ffe0a0 0%, #c09040 45%, #8a6020 100%);
  box-shadow:
    0 0 24px rgba(255,160,60,0.35),
    0 4px 0 #4a3010,
    inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.omni-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 36px rgba(255,180,80,0.55), 0 4px 0 #4a3010, inset 0 1px 0 rgba(255,255,255,0.5);
}
.omni-cta:active { transform: translateY(2px); box-shadow: 0 0 18px rgba(255,160,60,0.3), 0 1px 0 #4a3010; }
.omni-cta-hint {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.omni-toast {
  margin: 12px auto 0;
  max-width: 16em;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--phosphor);
  border: 1px solid rgba(80,200,120,0.35);
  background: rgba(10,20,14,0.85);
  border-radius: 2px;
}

/* Tune-in hint when station silent */
.tune-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #1a1208;
  background: linear-gradient(180deg, #ffe0a0, #c09040);
  border: 1px solid #8a6020;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 20px rgba(255,160,60,0.35);
  pointer-events: none;
  animation: toast-in 0.3s ease;
}
.app[data-power="on"] .tune-hint,
.tune-hint[hidden] { display: none !important; }

#player-host {
  position: fixed !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0);
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .net-node { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOOD BANDS — re-theme station on track change (2.5s ease)
   ═══════════════════════════════════════════════════════════ */
.app, .app * {
  /* inherited vars transition on the app shell */
}
.app {
  transition:
    filter 2.5s ease,
    background-color 2.5s ease;
}
.app,
body {
  --mood-star-speed: 1;
  --mood-needle-jitter: 1;
  --mood-flicker: 0;
  --nebula-a: rgba(40, 60, 120, 0.22);
  --nebula-b: rgba(80, 40, 100, 0.18);
  --band-name: "BAND · DEEP ORBIT";
}
.app,
.app .crt,
.app .module,
.app .mini-player,
.app .omni-cta,
.app .net-node {
  transition:
    color 2.5s ease,
    background 2.5s ease,
    border-color 2.5s ease,
    box-shadow 2.5s ease,
    filter 2.5s ease,
    text-shadow 2.5s ease;
}

/* AUTO band themes (data-mood). Manual TONE (data-tone) still overrides phosphor when data-band-mode="manual" */
.app[data-band-mode="auto"][data-mood="deep"] {
  --phosphor: #7a6cff;
  --phosphor-dim: #3a3480;
  --phosphor-glow: rgba(120, 100, 255, 0.4);
  --amber: #c07040;
  --amber-glow: rgba(180, 100, 50, 0.35);
  --metal-0: #06060c;
  --nebula-a: rgba(30, 20, 80, 0.28);
  --nebula-b: rgba(60, 20, 90, 0.2);
  --mood-star-speed: 0.45;
  --mood-needle-jitter: 0.6;
  --mood-flicker: 0;
  --tube-intensity: calc(var(--tube-intensity, 0.45) * 0.75);
}
.app[data-band-mode="auto"][data-mood="solar"] {
  --phosphor: #ffb040;
  --phosphor-dim: #b87018;
  --phosphor-glow: rgba(255, 176, 64, 0.5);
  --amber: #ff9a3c;
  --amber-glow: rgba(255, 154, 60, 0.65);
  --metal-0: #0c0a08;
  --nebula-a: rgba(120, 70, 20, 0.22);
  --nebula-b: rgba(180, 90, 30, 0.16);
  --mood-star-speed: 1;
  --mood-needle-jitter: 1;
  --mood-flicker: 0;
}
.app[data-band-mode="auto"][data-mood="hyper"] {
  --phosphor: #b0ff20;
  --phosphor-dim: #689a10;
  --phosphor-glow: rgba(176, 255, 32, 0.55);
  --amber: #d0ff40;
  --amber-glow: rgba(200, 255, 60, 0.5);
  --metal-0: #080c08;
  --nebula-a: rgba(40, 120, 20, 0.2);
  --nebula-b: rgba(100, 160, 20, 0.14);
  --mood-star-speed: 2.2;
  --mood-needle-jitter: 1.6;
  --mood-flicker: 0.35;
}
.app[data-band-mode="auto"][data-mood="nebula"] {
  --phosphor: #40f0ff;
  --phosphor-dim: #1888a0;
  --phosphor-glow: rgba(64, 240, 255, 0.5);
  --amber: #ff40c8;
  --amber-glow: rgba(255, 64, 200, 0.45);
  --metal-0: #080610;
  --nebula-a: rgba(0, 180, 200, 0.25);
  --nebula-b: rgba(200, 40, 160, 0.22);
  --mood-star-speed: 1.5;
  --mood-needle-jitter: 1.2;
  --mood-flicker: 0.15;
}

.app[data-band-mode="auto"][data-mood="hyper"] .crt-screen,
.app[data-band-mode="auto"][data-mood="hyper"] .crt {
  animation: hyper-flicker 0.18s steps(2) infinite;
}
@keyframes hyper-flicker {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
  100% { filter: brightness(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .app[data-band-mode="auto"][data-mood="hyper"] .crt-screen,
  .app[data-band-mode="auto"][data-mood="hyper"] .crt { animation: none !important; }
}

.app[data-band-mode="auto"][data-mood="nebula"] .net-node {
  animation-duration: 1.6s;
}
.app[data-band-mode="auto"][data-mood="nebula"] .network-map,
.app[data-band-mode="auto"][data-mood="nebula"] .net-map {
  box-shadow: inset 0 0 40px rgba(255, 64, 200, 0.12), 0 0 24px rgba(64, 240, 255, 0.15);
}

.band-label {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor-glow);
  opacity: 0.9;
}
#nebula, .distant-nebula {
  background:
    radial-gradient(ellipse at 40% 50%, var(--nebula-a), transparent 60%),
    radial-gradient(ellipse at 70% 30%, var(--nebula-b), transparent 55%);
  transition: background 2.5s ease;
}
.ringed-planet .planet-body {
  transition: box-shadow 2.5s ease, background 2.5s ease;
}
.app[data-band-mode="auto"][data-mood="solar"] .ringed-planet .planet-body {
  box-shadow:
    inset -18px -12px 40px rgba(0,0,0,0.45),
    0 0 80px rgba(255, 160, 60, 0.35),
    -20px -10px 60px rgba(255, 200, 80, 0.2);
}

/* SPACE MOTION / BAND TINT — planet + sat follow band; canvas handles stars */
.ringed-planet .planet-body,
.satellite,
.distant-nebula,
#nebula {
  transition: filter 2.5s ease, opacity 2.5s ease, box-shadow 2.5s ease;
}
body[data-mood="deep"] .ringed-planet .planet-body {
  filter: hue-rotate(210deg) saturate(0.75) brightness(0.75);
  box-shadow: inset -18px -12px 40px rgba(0,0,0,0.6), 0 0 50px rgba(80,70,160,0.28);
}
body[data-mood="solar"] .ringed-planet .planet-body {
  filter: hue-rotate(-8deg) saturate(1.25) brightness(1.12);
  box-shadow: inset -18px -12px 40px rgba(0,0,0,0.45), 0 0 90px rgba(255,160,60,0.45), -20px -10px 60px rgba(255,200,80,0.25);
}
body[data-mood="hyper"] .ringed-planet .planet-body {
  filter: hue-rotate(70deg) saturate(1.3) brightness(1.05);
  box-shadow: inset -18px -12px 40px rgba(0,0,0,0.5), 0 0 70px rgba(160,255,40,0.32);
}
body[data-mood="nebula"] .ringed-planet .planet-body {
  filter: hue-rotate(160deg) saturate(1.25) brightness(0.95);
  box-shadow: inset -18px -12px 40px rgba(0,0,0,0.55), 0 0 80px rgba(64,240,255,0.3), 20px 0 60px rgba(255,64,200,0.22);
}
body[data-mood="deep"] .satellite { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)) saturate(0.7) brightness(0.85); }
body[data-mood="solar"] .satellite { filter: drop-shadow(0 0 14px rgba(255,160,60,0.5)) sepia(0.35) saturate(1.2); }
body[data-mood="hyper"] .satellite { filter: drop-shadow(0 0 14px rgba(160,255,40,0.5)) hue-rotate(60deg) saturate(1.3); }
body[data-mood="nebula"] .satellite { filter: drop-shadow(0 0 14px rgba(64,240,255,0.45)) hue-rotate(140deg) saturate(1.25); }

body[data-mood="deep"] .distant-nebula,
body[data-mood="deep"] #nebula { opacity: 0.32; filter: blur(3px) saturate(0.7); animation-duration: 140s; }
body[data-mood="solar"] .distant-nebula,
body[data-mood="solar"] #nebula { opacity: 0.72; filter: blur(2px) sepia(0.4) saturate(1.2); animation-duration: 70s; }
body[data-mood="hyper"] .distant-nebula,
body[data-mood="hyper"] #nebula { opacity: 0.42; filter: blur(2px) hue-rotate(70deg) saturate(1.3); animation-duration: 40s; }
body[data-mood="nebula"] .distant-nebula,
body[data-mood="nebula"] #nebula {
  opacity: 0.92;
  filter: blur(2px) saturate(1.35);
  animation: nebula-swirl 55s ease-in-out infinite alternate;
}
@keyframes nebula-swirl {
  0%   { transform: translate(-2%, -1%) scale(1) rotate(0deg); }
  50%  { transform: translate(3%, 2%) scale(1.06) rotate(3deg); }
  100% { transform: translate(-1%, 1%) scale(1.02) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mood] .distant-nebula,
  body[data-mood] #nebula,
  body[data-mood] .ringed-planet,
  body[data-mood] .satellite { animation: none !important; }
}

.film-photo { position: relative; overflow: hidden; }
.film-photo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .35s ease;
}
.film-photo.loaded .film-photo-img { opacity: 1; }


/* ── Channel selector ─────────────────────────────────────── */
.channel-deck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 10px 10px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, #2a2e36 0%, #1a1d24 100%);
  border: 1px solid #4a4e58;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 4px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.35);
}
.channel-deck-label {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  font-weight: 700;
  text-align: center;
}
.channel-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.channel-btn {
  appearance: none;
  border: 1px solid #5a5040;
  border-radius: 3px;
  min-height: 44px;
  padding: 6px 4px;
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #c8b896;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,220,160,0.12), transparent 55%),
    linear-gradient(180deg, #3a3428 0%, #1e1a14 55%, #141210 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -3px 4px rgba(0,0,0,0.5),
    0 2px 0 #0a0a0a;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.15s, box-shadow 0.15s, transform 0.08s, border-color 0.15s;
}
.channel-btn:hover {
  color: #f0e0c0;
  border-color: #8a7a50;
}
.channel-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #0a0a0a;
}
.channel-btn.is-active {
  color: var(--phosphor, #7f7);
  border-color: var(--phosphor-dim, #4a8);
  text-shadow: 0 0 8px var(--phosphor-glow, rgba(120,255,140,0.55));
  box-shadow:
    inset 0 0 12px var(--phosphor-glow, rgba(120,255,140,0.25)),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 10px var(--phosphor-glow, rgba(120,255,140,0.2)),
    0 2px 0 #0a0a0a;
}
body[data-mood="solar"] .channel-btn.is-active,
.app[data-mood="solar"] .channel-btn.is-active {
  color: #f6c45a;
  border-color: #c9a040;
  text-shadow: 0 0 8px rgba(255,200,80,0.55);
}
body[data-mood="hyper"] .channel-btn.is-active,
.app[data-mood="hyper"] .channel-btn.is-active {
  color: #7ec8ff;
  border-color: #4a90c0;
  text-shadow: 0 0 8px rgba(100,180,255,0.55);
}
body[data-mood="nebula"] .channel-btn.is-active,
.app[data-mood="nebula"] .channel-btn.is-active {
  color: #d89cff;
  border-color: #8a50b0;
  text-shadow: 0 0 8px rgba(200,120,255,0.55);
}
.freq-meta {
  font-size: 8px;
  letter-spacing: 0.12em;
  opacity: 0.9;
  margin-top: 2px;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-glow);
}
.freq-meta[hidden] { display: none !important; }
.signal-bars.beat-pulse i.on-beat {
  filter: brightness(1.35);
  box-shadow: 0 0 10px var(--phosphor-glow);
}
@media (max-width: 640px) {
  .channel-deck { margin: 2px 6px 8px; padding: 6px 6px 8px; }
  .channel-buttons { gap: 4px; }
  .channel-btn { min-height: 48px; font-size: 7px; padding: 5px 2px; }
}


/* ── RX VISION porthole ───────────────────────────────────── */
.vision-porthole {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vision-bezel {
  position: relative;
  background: linear-gradient(160deg, #3a3e48 0%, #1a1c22 40%, #0e1014 100%);
  border: 2px solid #5a5040;
  border-radius: 50% / 46%;
  padding: 10px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.1),
    inset 0 -4px 10px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 0 1px #2a2c30;
}
.vision-screws {
  position: absolute; inset: 6px; pointer-events: none; z-index: 2;
}
.vision-screws i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8a9098, #3a3e48);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 1px 1px #000;
}
.vision-screws i:nth-child(1) { top: 4%; left: 46%; }
.vision-screws i:nth-child(2) { bottom: 4%; left: 46%; }
.vision-screws i:nth-child(3) { top: 46%; left: 3%; }
.vision-screws i:nth-child(4) { top: 46%; right: 3%; }
.vision-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 50% / 46%;
  overflow: hidden;
  background: #02040c;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.85), inset 0 0 8px rgba(80,120,180,0.15);
}
#vision-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: opacity 0.3s ease;
}
.vision-scanlines {
  pointer-events: none;
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.12) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.45;
}
.vision-vignette {
  pointer-events: none;
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%);
}
.vision-caption {
  position: absolute;
  left: 50%; bottom: 10%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: rgba(180, 220, 255, 0.75);
  text-shadow: 0 0 8px rgba(100,180,255,0.5);
  pointer-events: none;
  white-space: nowrap;
}
.vision-off {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #05070c;
  color: #4a5568;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
}
.vision-off[hidden] { display: none !important; }
.vision-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.vision-btn {
  appearance: none;
  min-height: 36px;
  padding: 6px 4px;
  border: 1px solid #5a5040;
  border-radius: 3px;
  background: linear-gradient(180deg, #3a3428, #1a1814);
  color: #c8b896;
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 0 #0a0a0a;
  touch-action: manipulation;
}
.vision-btn:hover { color: #f0e0c0; border-color: #8a7a50; }
.vision-btn:active { transform: translateY(1px); }
.vision-btn.is-on {
  color: var(--phosphor, #7f7);
  border-color: var(--phosphor-dim, #4a8);
  text-shadow: 0 0 8px var(--phosphor-glow, rgba(120,255,140,0.5));
  box-shadow: inset 0 0 10px var(--phosphor-glow, rgba(120,255,140,0.2)), 0 2px 0 #0a0a0a;
}
.vision-level {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: var(--phosphor, #7f7);
  text-shadow: 0 0 6px var(--phosphor-glow, rgba(120,255,140,0.45));
  min-width: 2.5em;
  text-align: center;
  opacity: 0.85;
}
.vision-porthole.is-fullscreen {
  border-radius: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
  justify-content: center;
}
.vision-porthole.is-fullscreen .vision-bezel {
  border-radius: 0;
  max-width: min(96vw, 1200px);
  width: 100%;
  margin: auto;
  padding: 14px;
}
.vision-porthole.is-fullscreen .vision-screen {
  border-radius: 8px;
  aspect-ratio: 16 / 10;
}
@media (max-width: 640px) {
  .vision-bezel { padding: 8px; border-radius: 12px; }
  .vision-screen { border-radius: 10px; aspect-ratio: 16 / 11; }
  .vision-screws { display: none; }
  .vision-btn { min-height: 40px; }
}

/* Hide legacy VU if any leftover */
.vu-meter { display: none !important; }