/* 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);
  --accent-cyan: #00e5ff;
  --accent-amber: #ffb000;
  --accent-magenta: #ff2bd6;
  --cream: #e8dcc0;
  --text: #c8c4b8;
  --text-dim: #a6a298; /* v64: was #7a7870 (≈3.1–3.5:1) → ≥4.7:1 on panels */
  --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: minmax(0, 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: 10px; 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: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
}

.module {
  min-width: 0;
  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: 10px;
  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: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-dim);
}
.toggle.small .toggle-label { font-size: 11px; }
.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: 10px;
  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: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-dim);
}

.right-module { display: flex; flex-direction: column; }
.right-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.flight-rate {
  margin-top: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 108px;
  padding: 12px 10px 10px;
  text-align: center;
  border: 1px solid rgba(255, 176, 0, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 176, 0, 0.1), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 18px rgba(255, 43, 214, 0.12), 0 0 14px rgba(0, 229, 255, 0.12);
}
.flight-rate-title {
  margin: 0;
  font: 700 13px/1.2 "Courier New", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: var(--cream);
}
.flight-rate-sub, .flight-rate-thanks, .mini-flight-thanks, .px-flight-thanks {
  margin: 0;
  min-height: 1.2em;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.flight-rate-thanks:empty, .mini-flight-thanks:empty, .px-flight-thanks:empty { visibility: hidden; }
.flight-rate-thanks:not(:empty), .mini-flight-thanks:not(:empty), .px-flight-thanks:not(:empty) {
  visibility: visible;
  color: var(--accent-cyan);
}
.flight-stars { display: flex; gap: 6px; justify-content: center; }
.flight-stars .aob-star, .flight-stars .flight-star {
  width: 36px;
  height: 36px;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  color: rgba(255, 176, 0, 0.38);
}
.flight-stars .aob-star.is-on, .flight-stars .flight-star.is-on {
  color: var(--accent-amber);
  text-shadow: 0 0 8px var(--accent-amber), 0 0 14px rgba(255, 43, 214, 0.45);
}
.mini-flight { display: none; }
.aob-tip {
  position: fixed;
  z-index: 80;
  max-width: 220px;
  padding: 6px 8px;
  background: #10140f;
  color: var(--cream);
  border: 1px solid var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
  font: 12px/1.3 "Courier New", monospace;
  pointer-events: none;
}
.px-back, .scene-back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 80;
  padding: 8px 12px;
  border: 1px solid var(--accent-cyan, #00e5ff);
  background: rgba(8, 10, 16, 0.92);
  color: var(--cream, #e8dcc0);
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
}
.px-back:focus-visible, .scene-back:focus-visible { outline: 2px solid var(--accent-amber, #ffb000); outline-offset: 3px; }
.px-back[hidden], .px-flight[hidden] { display: none !important; }
.px-flight {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 70;
  width: min(210px, 46vw);
  padding: 8px 8px 6px;
  text-align: center;
  background: rgba(8, 10, 16, 0.9);
  border: 1px solid rgba(255, 176, 0, 0.65);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.18);
}
.px-flight-title {
  margin: 0 0 4px;
  font: 700 9px/1.3 "Courier New", monospace;
  letter-spacing: 0.06em;
  color: var(--cream, #e8dcc0);
}
.px-flight .flight-star, .px-flight .aob-star { width: 22px; height: 22px; font-size: 18px; line-height: 22px; }

/* Center play dial — Art of Bow vinyl */
.play-dial {
  --vinyl-level: 0;
  position: relative;
  width: min(210px, 72vw);
  aspect-ratio: 1;
  margin: 8px auto 18px;
  display: grid;
  place-items: center;
}
.vinyl-bezel {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, #5a6068 0%, #2a2e36 42%, #12141a 72%, #0a0b0e 100%);
  box-shadow:
    0 0 0 2px #0a0b0e,
    0 0 0 4px #3a3e48,
    0 8px 28px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -4px 14px rgba(0,0,0,.55);
  z-index: 0;
}
.vinyl-platter {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  z-index: 1;
  overflow: hidden;
  background: #0b0c10;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 calc(18px + var(--vinyl-level) * 28px) rgba(255,60,200, calc(.18 + var(--vinyl-level) * .35)),
    0 0 calc(36px + var(--vinyl-level) * 40px) rgba(34,211,238, calc(.1 + var(--vinyl-level) * .28));
  transition: box-shadow .25s ease;
}
.vinyl-rotor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
}
.vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      #14161c 0 1px,
      #0c0d12 1px 2.5px,
      #1a1c24 2.5px 3px
    );
  opacity: .95;
  mask: radial-gradient(circle, transparent 33%, #000 34.5%, #000 96%, transparent 97%);
  -webkit-mask: radial-gradient(circle, transparent 33%, #000 34.5%, #000 96%, transparent 97%);
}
.vinyl-grooves::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    transparent 0 8%,
    rgba(255,255,255,.07) 12%,
    transparent 18% 55%,
    rgba(180,200,255,.05) 60%,
    transparent 68% 100%
  );
  mix-blend-mode: soft-light;
  animation: vinyl-sheen-drift 9s linear infinite;
  animation-play-state: paused;
}
.play-dial.is-playing .vinyl-grooves::after { animation-play-state: running; }
.vinyl-label {
  position: absolute;
  inset: 17.5%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.65),
    0 0 18px rgba(255,60,200,.25),
    inset 0 0 12px rgba(0,0,0,.35);
  background: #050508;
}
.vinyl-label picture,
.vinyl-label img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
}
.vinyl-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 38%, transparent 62%, rgba(0,0,0,.25) 100%);
  mix-blend-mode: soft-light;
  opacity: .55;
  z-index: 2;
}
.vinyl-neon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,60,200, calc(.25 + var(--vinyl-level) * .45)),
    inset 0 0 18px rgba(34,211,238, calc(.08 + var(--vinyl-level) * .22));
  animation: vinyl-breathe 3.4s ease-in-out infinite;
}
.play-dial.is-playing .vinyl-neon {
  animation: none;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,60,200, calc(.35 + var(--vinyl-level) * .55)),
    inset 0 0 22px rgba(34,211,238, calc(.12 + var(--vinyl-level) * .3)),
    0 0 calc(12px + var(--vinyl-level) * 20px) rgba(255,60,200, calc(.2 + var(--vinyl-level) * .35));
}
@keyframes vinyl-breathe {
  0%,100% { opacity: .72; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.08); }
}
@keyframes vinyl-sheen-drift {
  to { transform: rotate(360deg); }
}
.vinyl-rotor.is-spinning-css {
  animation: vinyl-spin-css 16s linear infinite;
}
@keyframes vinyl-spin-css { to { transform: rotate(360deg); } }

/* Glass play/pause — small spindle below ART OF BOW text */
.play-btn {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 68%;
  width: 38px;
  height: 38px;
  margin: 0;
  transform: translate(-50%, -20%);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.32);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.06) 42%, rgba(12,14,20,.62) 70%, rgba(6,8,12,.78));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f5f0e6;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 3px 12px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 6px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .25s, color .25s, border-color .25s, filter .25s;
  -webkit-tap-highlight-color: transparent;
}
.play-btn:hover,
.play-btn:focus-visible {
  color: #fff;
  border-color: rgba(255,180,240,.6);
  outline: none;
  filter: brightness(1.1);
  transform: translate(-50%, -20%) scale(1.08);
  box-shadow:
    0 3px 14px rgba(0,0,0,.55),
    0 0 20px rgba(255,60,200,.45),
    0 0 36px rgba(34,211,238,.25),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 6px rgba(0,0,0,.3);
}
.play-btn:focus-visible {
  box-shadow:
    0 0 0 2px #0a0b0e,
    0 0 0 4px rgba(167,139,250,.9),
    0 0 24px rgba(255,60,200,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.play-btn:active { transform: translate(-50%, -20%) scale(0.94); }
.app[data-power="on"] .play-btn.playing {
  color: #e8ffe8;
  border-color: rgba(120,255,180,.5);
  box-shadow:
    0 0 14px rgba(51,255,102,.4),
    0 0 26px rgba(255,60,200,.28),
    inset 0 0 10px rgba(51,255,102,.14),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.play-btn svg { width: 48%; height: 48%; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.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: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  z-index: 5;
  pointer-events: none;
}
.app[data-power="on"] .dial-status { color: var(--phosphor-dim); text-shadow: 0 0 6px var(--phosphor-glow); }

@media (prefers-reduced-motion: reduce) {
  .vinyl-grooves::after,
  .vinyl-neon { animation: none !important; }
  .vinyl-rotor { transition: none !important; }
}

/* 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: 11px;
  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: minmax(0, 1fr) minmax(0, 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: 11px;
  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: 10px;
  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: 10px; 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: 11px;
  margin: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  max-width: 100%;
  cursor: pointer;
}
.freq-title.is-open {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.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: 10px; opacity: 0.7; }
.crt-caption {
  font-size: 10px;
  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: 10px;
  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: 11px;
  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;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  background: linear-gradient(180deg, #1a1d24, #0e1014);
  border: 1px solid #2a2e36;
  border-radius: 3px;
  padding: 8px 12px;
  margin-top: 4px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.op-marquee[hidden] { display: none !important; }
.op-marquee {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  overflow: hidden;
  color: #fff6e8;
  background: #16080c;
  border: 1px solid #5a3018;
  box-shadow: inset 0 0 0 7px #1c0c10, 0 0 16px rgba(255, 80, 40, 0.18);
}
.op-marquee::before,
.op-marquee::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 8px;
  pointer-events: none;
  background: radial-gradient(circle, #fff1b0 0 2.5px, #e0a020 3px, #6a3a08 4px, transparent 5px) 0 0 / 16px 8px repeat-x;
  animation: bulb-blink 1.2s steps(2, end) infinite;
}
.op-marquee::before { top: 4px; }
.op-marquee::after { bottom: 4px; animation-delay: 0.6s; }
@keyframes bulb-blink { 50% { opacity: 0.28; } }
.op-kicker {
  position: relative;
  z-index: 1;
  flex: none;
  font: 800 11px/1 "Courier New", monospace;
  letter-spacing: 0.16em;
  color: #ffb060;
}
.op-window {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.op-track {
  display: inline-block;
  white-space: nowrap;
  animation: op-run 42s linear infinite;
}
.op-item {
  display: inline-block;
  margin-right: 56px;
  font: 600 16px/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
  color: #fff8ee;
}
@keyframes op-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .op-marquee::before, .op-marquee::after, .op-track { animation: none; }
}
.crew-strip .dedi-ticker { flex: 1 1 100%; margin: 0; min-width: 0; }
.footer-id {
  font-size: 10px;
  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: 12px;
  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: 11px;
  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-row { flex-direction: column; align-items: stretch; }
  .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: 11px; }
}

/* 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: 11px;
  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: 11px;
  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: 16px;
  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: 11px; opacity: 0.55; margin-top: 12px; }

/* Hidden players.
   Real size, not 1px / clip:0 — iPhone Safari will not start a tiny clipped iframe.
   Kept behind the console (opacity 0, no pointer events). */
#player-host {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 135px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Desktop layout */
@media (min-width: 900px) {
  .app {
    max-width: 1180px;
    grid-template-columns: minmax(0, 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: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 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: minmax(0, 1fr) minmax(0, 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; }
.view-console { min-width: 0; max-width: 100%; }
.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;
}
#btn-shop[hidden],
.shop-link[hidden],
.nav-switch[hidden] { display: none !important; }
.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: 11px;
  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;
  }
  /* Phone: a shorter window so POWER and the tune knobs sit above the fixed bar.
     Width stays the full bezel — height + aspect-ratio together would shrink
     the glass to a left-side thumbnail. The definitive rule is after the
     640px block, which would otherwise put aspect-ratio back. */
  .vision-bezel { padding: 6px; }
  .vision-porthole { gap: 4px; margin-bottom: 6px; }
}

/* 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: 12px;
  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: 10px;
  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: 10px;
  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: 10px;
  letter-spacing: 0.14em;
  color: var(--phosphor-dim);
  text-shadow: 0 0 4px var(--phosphor-glow);
}

.operator-foot {
  font-size: 10px;
  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;
}
body[data-view="console"] .mini-player { display: none; }
@media (max-width: 900px) {
  body[data-view="console"] .mini-player { display: flex; }
  #flight-rate { display: none; }
  .mini-player { flex-wrap: wrap; }
  .mini-flight {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
  }
  .mini-flight-title {
    font: 700 9px/1.2 "Courier New", monospace;
    letter-spacing: 0.06em;
    color: #e8dcc0;
  }
  .mini-flight .aob-star { width: 22px; height: 22px; font-size: 18px; line-height: 22px; }
  .app,
  .app[data-view="operator"],
  .app[data-view="omnations"],
  .app[data-view="onboard"],
  .app[data-view="universes"] { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  .univ-pop { padding-bottom: calc(16px + 84px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  button, a, input, .knob, [tabindex] { scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
body[data-view="operator"] .mini-player,
body[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-sat { display: none; width: 42px; height: 26px; flex: none; }
.mini-sat svg { display: block; width: 100%; height: 100%; }
body.aob-sister .mini-sat { display: block; }
.mini-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-station {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #c4b48a;
}
.mini-title {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mini-title.is-open {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.mini-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #c4b48a;
  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.
   Do not clip to 0: iOS treats that as not visible and refuses playback. */
#player-host {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 135px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════
   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: 10px;
  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: 11px;
  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: 11px;
  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: 10px;
  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;
}
/* stack console above décor / launch ship */
.app { position: relative; z-index: 5; }
.app[data-power="on"] .tune-hint,
.tune-hint[hidden] { display: none !important; }

#player-host {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 240px !important;
  height: 135px !important;
  overflow: hidden !important;
  clip: auto;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0;
}

@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,
.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: 10px;
  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;
  min-width: 0;
  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: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  font-weight: 700;
  text-align: center;
}
.channel-deck-note {
  margin: 1px 0 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: lowercase;
  color: var(--phosphor, #9fd);
  opacity: 0.72;
}
.channel-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 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: 11px;
  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: 10px;
  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);
}
.crew-strip {
  grid-column: 2 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px;
  background: linear-gradient(180deg, #0e1016, #07080c);
  border: 1px solid #2a2e38;
  border-radius: 3px;
  color: #d8ffe8;
}
.crew-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: none; }
.crew-count {
  font: 700 12px/1 "Courier New", monospace;
  letter-spacing: 0.04em;
  color: #d8ffe8;
  white-space: nowrap;
}
.crew-count[hidden] { display: none !important; }
.crew-feed { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crew-strip .onboard-ticker {
  grid-column: auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.crew-invite {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: #c8b8ff;
  font: 12px/1.3 "Courier New", monospace;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}
.crew-invite:hover { color: #f0e0c0; }
.crew-react { display: flex; gap: 4px; flex: none; }
.crew-react-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid #3a3e48;
  background: linear-gradient(180deg, #1a1e26, #0c0e12);
  color: #f0e0c0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.crew-react-btn:hover { border-color: #6a5aa8; }
.crew-react-btn:disabled { opacity: 0.55; cursor: wait; }
.crew-react-btn.is-ack {
  border-color: #c8b8ff;
  box-shadow: 0 0 12px rgba(200, 184, 255, 0.65);
}
.crew-ack {
  flex: none;
  margin: 0;
  font: 11px/1.2 "Courier New", monospace;
  letter-spacing: 0.04em;
  color: #c8b8ff;
  white-space: nowrap;
}
.crew-ack[hidden] { display: none !important; }
@media (max-width: 720px) {
  #btn-other-worlds { grid-column: 1 / -1; grid-row: 2; }
  .crew-strip { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; }
  .crew-feed { flex: 1 1 140px; }
}
@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: 11px; padding: 5px 2px; }
  .crew-react-btn { width: 44px; height: 44px; }
}


/* ── 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;
  width: 100%;
  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 {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  transition: opacity 0.3s ease;
  touch-action: manipulation;
}
.vision-scanlines {
  pointer-events: none;
  z-index: 2;
  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;
  z-index: 2;
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%);
}
.vision-caption {
  position: absolute;
  z-index: 3;
  left: 50%; bottom: 10%;
  transform: translateX(-50%);
  font-size: 10px;
  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-fs-discover {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  max-width: 88%;
  margin: 0;
  padding: 4px 8px;
  border-radius: 99px;
  border: 1px solid rgba(180, 230, 255, 0.35);
  background: rgba(2, 6, 14, 0.62);
  color: rgba(232, 244, 255, 0.92);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.vision-fs-discover.is-fading { opacity: 0; }
.vision-fs-discover[hidden] { display: none; }
.fs-hint-touch { display: none; }
@media (pointer: coarse) {
  .fs-hint-mouse { display: none; }
  .fs-hint-touch { display: inline; }
}
.vision-fs-discover.is-touch .fs-hint-mouse { display: none; }
.vision-fs-discover.is-touch .fs-hint-touch { display: inline; }
.vision-off {
  position: absolute; inset: 0;
  z-index: 4;
  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: 11px;
  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-exit {
  position: absolute;
  z-index: 6;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  appearance: none;
  border: 0;
  background: transparent;
  color: #f4fff8;
  font: 700 15px/1.2 Manrope, ui-sans-serif, system-ui, sans-serif;
  padding: 8px 10px;
  cursor: pointer;
}
.vision-exit[hidden],
.vision-fs-hint[hidden] { display: none !important; }
.vision-fs-hint {
  position: absolute;
  z-index: 6;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  margin: 0;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.14em;
  color: rgba(180, 220, 255, 0.72);
  pointer-events: none;
}
.vision-fs-hint::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #7f7;
  box-shadow: 0 0 6px rgba(120, 255, 140, 0.8);
  vertical-align: middle;
}
html.aob-vision-immersive { overflow: hidden; }
.vision-porthole.is-fullscreen,
.vision-porthole.is-immersive {
  position: fixed;
  inset: 0;
  z-index: 160;
  width: 100%;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.vision-porthole.is-fullscreen .vision-bezel,
.vision-porthole.is-immersive .vision-bezel {
  border-radius: 50%;
  width: min(86vw, 70dvh);
  max-width: 720px;
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
}
.vision-porthole.is-fullscreen .vision-screen,
.vision-porthole.is-immersive .vision-screen {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 50%;
}
@media (max-width: 640px) {
  .vision-bezel {
    padding: 8px;
    border-radius: 50%;
    width: min(100%, 78vw);
    margin-inline: auto;
    aspect-ratio: 1;
    box-sizing: border-box;
  }
  .vision-screen {
    width: 100%;
    height: 100%;
    min-width: 0;
    aspect-ratio: auto;
    border-radius: 50%;
  }
  .vision-screws { display: none; }
  .vision-btn { min-height: 40px; }
}
@media (max-width: 599px) {
  .vision-bezel { width: min(100%, 72vw); }
  .vision-screen {
    width: 100%;
    height: 100%;
    min-width: 0;
    aspect-ratio: auto;
    border-radius: 50%;
  }
}

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

/* ═══ 2026-09-24 · round 3 ═══ */

/* SIG MON removed */
.sig-terminal { display: none !important; }

/* Nav icons */
.nav-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--amber, #e8b060); }
.earth-icon svg { filter: drop-shadow(0 0 5px rgba(90,180,255,0.45)); animation: earth-spin-glow 6s ease-in-out infinite; }
@keyframes earth-spin-glow { 50% { filter: drop-shadow(0 0 9px rgba(90,200,140,0.6)); } }
.lang-badge {
  font: 700 10px/1 "Courier New", monospace; letter-spacing: 0.05em;
  border: 1px solid currentColor; border-radius: 3px; width: 24px; height: 18px;
}
#btn-shop:hover .nav-icon { transform: translateY(-1px) rotate(-6deg); transition: transform .2s; }

/* ── Mars mode on the corner planet ── */
.mars-body {
  position: absolute; inset: 18%; border-radius: 50%; overflow: hidden;
  opacity: 0; transform: scale(0.94);
  transition: opacity 3.5s ease, transform 3.5s ease, box-shadow 1.2s ease;
  box-shadow: inset -26px -18px 50px rgba(0,0,0,0.7), 0 0 70px rgba(255,90,40,0.25);
}
.mars-surface {
  position: absolute; inset: 0; width: 200%;
  background:
    radial-gradient(ellipse 12% 8% at 20% 40%, rgba(90,30,15,0.8), transparent 70%),
    radial-gradient(ellipse 18% 6% at 45% 62%, rgba(110,40,20,0.7), transparent 70%),
    radial-gradient(ellipse 9% 12% at 70% 30%, rgba(80,25,10,0.75), transparent 70%),
    radial-gradient(ellipse 14% 5% at 88% 55%, rgba(120,45,20,0.6), transparent 70%),
    radial-gradient(circle 14px at 35% 25%, rgba(60,20,10,0.8), transparent 80%),
    radial-gradient(circle 10px at 60% 75%, rgba(60,20,10,0.8), transparent 80%),
    linear-gradient(170deg, #e0703a 0%, #c1502a 35%, #a2401f 60%, #d2683a 100%);
  animation: mars-rotate 60s linear infinite;
}
.mars-cap {
  position: absolute; left: 30%; right: 30%; top: -4%; height: 14%;
  border-radius: 50%; background: radial-gradient(ellipse at 50% 80%, rgba(255,245,235,0.85), rgba(255,240,230,0) 70%);
}
.mars-dust {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,210,170,0.35), transparent 45%),
              radial-gradient(circle at 75% 80%, rgba(0,0,0,0.55), transparent 60%);
  animation: mars-dust 14s ease-in-out infinite;
}
@keyframes mars-rotate { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mars-dust { 50% { opacity: 0.7; transform: rotate(8deg) scale(1.03); } }

.ringed-planet .planet-body, .ringed-planet .planet-ring, .ringed-planet .planet-ring-shadow { transition: opacity 3.5s ease, filter 2.5s ease, box-shadow 2.5s ease; }
body.mars-on .ringed-planet .planet-body { opacity: 0; }
body.mars-on .ringed-planet .planet-ring,
body.mars-on .ringed-planet .planet-ring-shadow { opacity: 0.12; }
body.mars-on .mars-body { opacity: 1; transform: scale(1); }
.ringed-planet { transition: translate 1.2s cubic-bezier(.2,.8,.2,1); }
body.mars-on.mars-near .mars-body {
  box-shadow: inset -26px -18px 50px rgba(0,0,0,0.6), 0 0 110px rgba(255,110,50,0.55), 0 0 30px rgba(255,170,90,0.45);
}
body.mars-on.mars-near .mars-surface { animation-duration: 18s; }
.mars-spark {
  position: fixed; z-index: 0; pointer-events: none; width: 5px; height: 5px; border-radius: 50%;
  background: #ffb080; box-shadow: 0 0 8px #ff7040;
  animation: mars-spark 1.6s ease-out forwards;
}
@keyframes mars-spark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

/* ── Sadhguru quote ── */
.cosmic-quote {
  grid-column: 1 / -1;
  text-align: center;
  padding: 34px 16px 18px;
  max-width: 820px;
  margin: 0 auto;
  perspective: 600px;
}
.quote-text {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(236, 228, 210, 0.78);
  text-shadow: 0 0 18px rgba(255, 220, 170, 0.12);
  cursor: default;
}
.quote-text .qw {
  display: inline-block;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1), color 1.2s ease, text-shadow 1.2s ease;
  will-change: transform;
}
.cosmic-quote:hover .quote-text .qw {
  animation: quote-float 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.35s);
  color: rgba(250, 240, 222, 0.95);
  text-shadow: 0 0 22px rgba(255, 220, 170, 0.28);
}
@keyframes quote-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-0.8deg); }
  75% { transform: translateY(4px) rotate(0.8deg); }
}
.quote-by {
  display: block; margin-top: 10px;
  font: 400 11px/1 "Courier New", monospace; letter-spacing: 0.3em;
  color: rgba(200, 190, 170, 0.5); font-style: normal;
}
@media (prefers-reduced-motion: reduce) { .cosmic-quote:hover .quote-text .qw { animation: none; } }
.app[data-view="operator"] .cosmic-quote,
.app[data-view="omnations"] .cosmic-quote { padding-bottom: 90px; }

/* ── Welcome ── */
.welcome-overlay { z-index: 200; background: rgba(2, 4, 12, 0.78); }
.welcome-panel { text-align: center; position: relative; overflow: hidden; padding-top: 70px; }
.welcome-panel .term-title { font-size: 30px; line-height: 1.35; }
.welcome-line { color: var(--phosphor, #6f6); opacity: 0.85; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.6; margin: 10px 0 18px; }
.welcome-actions { justify-content: center; }
.welcome-play { min-width: 160px; font: 800 16px/1 "Orbitron", "Courier New", monospace; letter-spacing: .18em; padding: 16px 28px; font-weight: 800;
  background: linear-gradient(135deg, rgba(80,255,150,.25), rgba(34,211,238,.2)); border: 1px solid #8dffb0; color: #e8ffe8;
  box-shadow: 0 0 22px rgba(80,255,150,.35); }
.welcome-play:hover, .welcome-play:focus-visible { box-shadow: 0 0 34px rgba(80,255,150,.55); transform: translateY(-1px); }
.welcome-orbit { position: absolute; top: 14px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7fd0ff, #1f6fb8 60%, #0b2e5a); box-shadow: 0 0 20px rgba(90,180,255,.5); }
.welcome-orbit span { position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(160,255,200,.4); animation: welcome-orbit 8s linear infinite; }
.welcome-orbit span::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #e8dcc0; }
@keyframes welcome-orbit { to { transform: rotate(360deg); } }

.launch-ship {
  position: fixed; left: 18%; bottom: -140px; z-index: 4; pointer-events: none;
  transform: translateX(-50%); opacity: 0;
}
/* Below .app so it never covers Snake/Dodge hints; still visible in side sky */
.launch-ship.go { animation: ship-launch 2.4s cubic-bezier(.55,0,.8,.4) forwards; }
.ship-flame {
  position: absolute; left: 50%; top: 84px; width: 16px; height: 46px; margin-left: -8px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(ellipse at 50% 20%, #fff 0%, #ffd070 30%, #ff6030 65%, transparent 75%);
  filter: blur(1px); animation: flame 0.08s linear infinite alternate;
}
@keyframes flame { to { transform: scaleY(1.25) scaleX(0.85); } }
@keyframes ship-launch {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.9); }
  10% { opacity: 1; }
  30% { transform: translate(-50%, -28vh) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% - 8vw), -135vh) scale(0.55); }
}
/* Welcome still shows the ship above the dim overlay briefly */
.welcome-overlay:not([hidden]) ~ .launch-ship.go { z-index: 210; }

/* ── Omnations: Earth ── */
.view-omnations .omnations-shell {
  background: linear-gradient(180deg, rgba(6, 22, 30, 0.6), rgba(8, 26, 16, 0.5));
  border-radius: 6px;
}
.omni-earth {
  margin: 0 0 18px; position: relative; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(120, 200, 170, 0.3);
  box-shadow: 0 0 40px rgba(60, 160, 220, 0.18);
}
.omni-earth img { display: block; width: 100%; max-height: 380px; object-fit: cover; object-position: 70% 50%; animation: earth-breathe 30s ease-in-out infinite; }
@keyframes earth-breathe { 50% { transform: scale(1.06); } }
.omni-earth figcaption {
  position: absolute; left: 10px; bottom: 8px;
  font: 400 10px/1.2 "Courier New", monospace; letter-spacing: 0.12em; color: rgba(210, 235, 225, 0.7);
}
.view-omnations .omni-stamp { border-color: rgba(100, 210, 150, 0.5) !important; color: #9fe0b8 !important; }
.view-omnations .dossier-kicker { color: #8fd4b0; }
.view-omnations .net-links { stroke: rgba(110, 210, 160, 0.4); }
.view-omnations .net-node { fill: #3aa0d8; }
.view-omnations .net-node.hub { fill: #5fbf6a; }
.view-omnations .omni-cta { background: linear-gradient(180deg, #2f7a55, #1a4a34) !important; border-color: #6fcf98 !important; color: #eafff2 !important; }
.view-omnations .omni-cta:hover { box-shadow: 0 0 22px rgba(110, 220, 160, 0.45) !important; }

/* ═══ PASSENGERS ON BOARD ═══ */
.app[data-view="onboard"] { display: block; max-width: 920px; padding-bottom: 88px; }
.app[data-view="onboard"] .view-console,
.app[data-view="onboard"] .view-operator,
.app[data-view="onboard"] .view-omnations { display: none !important; }
.app:not([data-view="onboard"]) .view-onboard { display: none !important; }
.app[data-view="onboard"] .view-onboard { display: block; }
body[data-view="onboard"] .mini-player { display: flex; }
.app[data-view="onboard"] .cosmic-quote { padding-bottom: 90px; }
.onboard-shell {
  padding: 20px 16px 24px; color: var(--cream);
  background: linear-gradient(180deg, rgba(14, 10, 32, 0.65), rgba(6, 14, 28, 0.55)); border-radius: 6px;
}
.onboard-stamp { border-color: rgba(170, 140, 255, 0.5) !important; color: #c8b8ff !important; }
.view-onboard .dossier-kicker { color: #b8a8ff; }
.onboard-form {
  display: grid; gap: 14px; margin: 8px 0 26px; padding: 16px;
  border: 1px solid rgba(160, 140, 255, 0.28); border-radius: 6px; background: rgba(4, 6, 18, 0.55);
}
.ob-field { display: grid; gap: 6px; position: relative; }
.ob-nick-help {
  margin: -6px 0 0; font: 12px/1.45 "Courier New", monospace; letter-spacing: 0.01em;
  color: rgba(210, 214, 220, 0.72);
}
#ob-nick::placeholder { font-family: Arial, sans-serif; font-size: 16px; }
.ob-field > span { font: 700 11px/1 "Courier New", monospace; letter-spacing: 0.18em; color: #b8a8ff; }
.ob-field input, .ob-field textarea {
  font: 16px/1.5 "Courier New", monospace; color: #d8ffe8; background: #030a08;
  border: 1px solid rgba(120, 255, 180, 0.3); border-radius: 3px; padding: 9px 10px; resize: vertical;
}
.ob-field input:focus, .ob-field textarea:focus { outline: none; border-color: #7dffb8; box-shadow: 0 0 12px rgba(120, 255, 180, 0.25); }
.ob-count { position: absolute; right: 8px; bottom: 6px; font: 11px "Courier New", monospace; color: rgba(200, 220, 210, 0.5); }
.ob-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-emoji {
  font-size: 22px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(20, 20, 40, 0.7); border: 1px solid rgba(160, 140, 255, 0.25);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ob-emoji:hover { transform: translateY(-2px); }
.ob-emoji[aria-checked="true"] { border-color: #c8b8ff; box-shadow: 0 0 14px rgba(180, 150, 255, 0.55); transform: scale(1.08); }
.ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.view-onboard .ob-send { background: linear-gradient(180deg, #4a3a8a, #2a1f55) !important; border-color: #a898ff !important; color: #f0ecff !important; justify-self: start; }
.view-onboard .ob-send:disabled { opacity: .55; cursor: wait; }
.ob-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ob-log li {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-left: 2px solid rgba(160, 140, 255, 0.45); background: rgba(10, 10, 26, 0.5);
  animation: toast-in .5s ease;
}
.ob-log .ob-e { font-size: 24px; line-height: 1; }
.ob-log .ob-who { font: 700 12px/1.3 "Courier New", monospace; letter-spacing: .08em; color: #c8b8ff; }
.ob-log .ob-when { font-weight: 400; color: rgba(200, 200, 220, 0.45); margin-left: 8px; }
.ob-log .ob-text { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #e8e2d6; word-break: break-word; }
.ob-empty { color: rgba(220, 210, 190, 0.6); font-style: italic; border-left-color: transparent !important; }
.ob-rating { text-align: center; margin: 34px 0 10px; }
.ob-rating-q { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 22px; color: rgba(236, 228, 210, 0.85); margin: 0 0 12px; }
.ob-rating-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ob-rate {
  font: 700 11px/1.2 "Courier New", monospace; letter-spacing: .1em; color: #e8dcc0; cursor: pointer;
  padding: 9px 12px; border-radius: 3px; border: 1px solid #4a5058; background: linear-gradient(180deg, #2a2e36, #161920);
}
.ob-rate:hover { color: var(--amber, #e8b060); border-color: var(--amber-dim, #a07030); }
.ob-rate.is-picked { color: #0a0b0e; background: #c8b8ff; border-color: #c8b8ff; }
.ob-rate .ob-stars { display: block; font-size: 11px; letter-spacing: 2px; margin-bottom: 3px; }
.ob-rating-thanks { margin-top: 12px; color: #b8a8ff; font-family: "Courier New", monospace; font-size: 13px; }

/* ticker on console */
.onboard-ticker {
  grid-column: 1 / -1; appearance: none; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; margin: 0; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #0e1016, #07080c); border: 1px solid #2a2e38; border-radius: 3px;
  color: #d8ffe8; font: 12px/1.3 "Courier New", monospace; overflow: hidden;
}
.onboard-ticker:hover { border-color: #6a5aa8; }
.ticker-tag { flex: none; font-weight: 700; letter-spacing: .15em; color: #c8b8ff; font-size: 11px; border: 1px solid rgba(200,184,255,.45); padding: 3px 6px; border-radius: 2px; }
.ticker-window { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: inline-block; padding-left: 100%; animation: ticker-run var(--ticker-dur, 40s) linear infinite; }
.ticker-track.is-static { padding-left: 0; animation: none; }
.onboard-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { margin-right: 48px; }
.ticker-item b { color: #c8b8ff; font-weight: 700; }
@keyframes ticker-run { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .op-track, .dedi-track {
    animation: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ticker-track { padding-left: 0; }
}
.ob-log li.ob-empty { display: block; grid-template-columns: none; }

/* ── round 4: quote swap, footer ticker, passengers window ── */
.quote-text { transition: opacity .45s ease, transform .45s ease; }
.quote-text.q-swap { opacity: 0; transform: translateY(8px); }
.footer-actions .onboard-ticker { grid-column: auto; width: auto; flex: 1 1 340px; max-width: 520px; min-width: 220px; }
.footer-actions { flex: 1; }
.app.ob-modal .view-onboard {
  display: block !important; position: fixed; inset: 0; z-index: 950; overflow-y: auto;
  background: rgba(4, 5, 10, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 28px 16px 60px; animation: ob-in .35s ease;
}
.app.ob-modal .view-onboard > * { max-width: 860px; margin-left: auto; margin-right: auto; }
@keyframes ob-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#btn-onboard[hidden] { display: none !important; }
.cosmic-quote { padding-top: 16px; padding-bottom: 120px; min-height: 0; }
.app .cosmic-quote .quote-text { font-size: clamp(18px, 2.1vw, 24px); }

/* ORBIT SNAKE */
.snake-box { margin: 14px auto 0; width: 248px; padding: 8px 8px 10px; border-radius: 8px;
  background: #0b0d10; border: 2px solid #2a2e36; box-shadow: inset 0 0 14px rgba(0,0,0,.8), 0 3px 10px rgba(0,0,0,.5);
  cursor: pointer; outline: none; position: relative; z-index: 6; isolation: isolate; overflow: visible; }
.snake-box:focus-visible, .snake-box.playing { border-color: var(--phosphor-dim); box-shadow: inset 0 0 14px rgba(0,0,0,.8), 0 0 12px var(--phosphor-glow); }
#snake-cv { display: block; width: 100%; max-width: 232px; height: auto; aspect-ratio: 200 / 120; margin: 0 auto; border-radius: 4px; image-rendering: pixelated; touch-action: none;
  position: relative; z-index: 0; background: #020604; }
.snake-score { font: 11px/1.6 monospace; letter-spacing: .18em; text-align: center; color: var(--phosphor-dim); text-shadow: 0 0 4px var(--phosphor-glow);
  margin-top: 6px; position: relative; z-index: 1; }

/* ═══ ROUND 5 · compact ship deck, lamps, neon ON AIR, social deck ═══ */
@media (min-width: 900px) {
  .app { max-width: 1020px; gap: 10px; padding-top: 14px; }
  .console { gap: 10px; }
  .module { min-height: 0; }
}
.module { padding: 10px 10px 12px; }
.module-label { margin-bottom: 6px; }

/* vacuum tubes become glowing deck bulbs */
.tube { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #2a2e36, #0e1014); box-shadow: 0 0 0 2px #3a3e48, 0 0 0 4px #15171c, 0 2px 4px rgba(0,0,0,.7); }
.tube-glass { border-radius: 50%; margin: 3px; height: calc(100% - 6px); border: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(90,40,10,.6) 45%, #1a0c06 80%); box-shadow: inset 0 0 4px rgba(0,0,0,.6); }
.tube-plate { display: none; }
.tube-filament { top: 25%; height: 50%; width: 2px; }
.app[data-power="on"] .tube-glass { background: radial-gradient(circle at 35% 30%, #fff6d8, #ffb040 40%, #c04a08 80%);
  box-shadow: 0 0 10px rgba(255,160,50,.9), 0 0 22px rgba(255,110,20,.55); }
.app[data-power="on"] .tube[data-tube="2"] .tube-glass { background: radial-gradient(circle at 35% 30%, #ffe0e0, #ff4a3a 40%, #8a0a06 80%); box-shadow: 0 0 10px rgba(255,60,50,.9), 0 0 22px rgba(255,30,20,.5); animation: bulb-blink 1.8s steps(1) infinite; }
@keyframes bulb-blink { 50% { filter: brightness(.45); } }
@media (min-width: 900px) { .tubes { top: 30px; left: 236px; gap: 8px; } }

/* indicator lamp on each switch */
.toggle .lamp { width: 9px; height: 9px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #6a4030, #2a1410 70%); box-shadow: inset 0 0 2px #000, 0 0 0 1px #3a2a24; transition: background .2s, box-shadow .2s; }
.toggle[data-on="true"] .lamp { background: radial-gradient(circle at 35% 30%, #eaffd8, #58e060 45%, #1a7a20 85%); box-shadow: 0 0 6px #5f5, 0 0 14px rgba(80,255,90,.55); }
#toggle-power[data-on="true"] .lamp { background: radial-gradient(circle at 35% 30%, #fff0d0, #ffa030 45%, #b04808 85%); box-shadow: 0 0 6px #fa3, 0 0 14px rgba(255,150,40,.6); }
#toggle-atten[data-on="true"] .lamp { background: radial-gradient(circle at 35% 30%, #ffe0e0, #ff4040 45%, #900 85%); box-shadow: 0 0 6px #f44, 0 0 14px rgba(255,50,50,.6); }

/* smaller, tighter switches */
.toggle { gap: 3px; padding: 2px; }
.toggle-body { width: 20px; height: 28px; }
.toggle-lever { height: 11px; top: 14px; left: 2px; right: 2px; }
.toggle[data-on="true"] .toggle-lever { top: 2px; }
.toggle.small .toggle-body { width: 18px; height: 26px; }
.toggle.small .toggle-lever { height: 10px; top: 13px; }
.toggle.small[data-on="true"] .toggle-lever { top: 2px; }
.toggle-hint { display: none; }
.toggle-row { justify-content: center; gap: 14px; margin-bottom: 8px; }

/* knobs: smaller, centered, with a ring of LEDs that lights up with the value */
.knob-row { justify-content: center; gap: 22px; }
.knob-wrap { gap: 3px; }
.knob { width: 50px; height: 50px; --kt: .5; }
.knob.large { width: 58px; height: 58px; }
.knob-marks { background: none; }
.knob-marks::before { opacity: 1; mask: none; -webkit-mask: none; inset: -3px;
  background: conic-gradient(from -135deg, var(--phosphor, #3f6) 0deg calc(var(--kt) * 270deg), #2a2e36 calc(var(--kt) * 270deg) 270deg, transparent 270deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 74%, transparent 76%);
  mask: radial-gradient(circle, transparent 64%, #000 66%, #000 74%, transparent 76%);
  filter: drop-shadow(0 0 3px var(--phosphor-glow, rgba(60,255,100,.5))); }
.app:not([data-power="on"]) .knob-marks::before { filter: none; opacity: .35; }
.knob-body { inset: 14%; }
.knob-indicator { top: 8%; height: 30%; width: 3px; left: calc(50% - 1.5px); transform: none !important; }
.knob-label { font-size: 11px; }
@media (max-width: 599px) { .knob { width: 58px; height: 58px; } .knob.large { width: 64px; height: 64px; } .toggle-body { width: 24px; height: 32px; } }

/* center dial sizing + neon ON AIR sign */
.play-dial { margin: 2px auto 34px; }
@media (max-width: 899px) {
  .play-dial { width: min(168px, 58vw); }
  .play-btn { width: 36px; height: 36px; top: 67%; }
}
@media (min-width: 1280px) {
  .play-dial { width: min(220px, 24vw); }
}
@media (min-width: 1440px) {
  .play-dial { width: min(232px, 22vw); }
}
.dial-status { bottom: -28px; font: 700 12px/1 "Courier New", monospace; letter-spacing: .28em; padding: 5px 10px 5px 12px;
  border: 1px solid #3a2020; border-radius: 3px; background: #0c0606; color: #5a2a2a; text-shadow: none; }
.app[data-power="on"] .dial-status { color: #b06a5a; text-shadow: none; }
.app[data-power="on"] .dial-status.is-live { color: #ffe6e0; border-color: #ff3030; background: #1a0404;
  text-shadow: 0 0 4px #ff4040, 0 0 10px #ff2020, 0 0 22px #ff0000;
  box-shadow: 0 0 8px rgba(255,40,40,.7), inset 0 0 8px rgba(255,40,40,.45), 0 0 26px rgba(255,0,0,.35);
  animation: onair-hum 3.2s ease-in-out infinite; }
@keyframes onair-hum { 0%,100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .75; } 50% { opacity: 1; } }
.snake-box { margin-top: 10px; }
.snake-hint, .dodge-hint, .game-keys-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; margin-top: 10px; padding: 8px 6px 4px; text-align: center; min-height: 48px;
  position: relative; z-index: 2;
  background: #0b0d10; /* opaque so launch rocket / décor never show through */
  border-radius: 4px;
}
.snake-hint.is-status, .game-keys-hint.is-status {
  font: 600 11px/1.3 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: .08em; color: var(--phosphor, #33ff66); opacity: .85;
}
.game-keys { display: inline-flex; gap: 6px; align-items: center; }
.game-key {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 5px;
  border: 1px solid rgba(51,255,102,.75);
  background: linear-gradient(180deg, rgba(20,48,28,.75), rgba(0,16,8,.85));
  box-shadow:
    0 0 10px rgba(51,255,102,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.45);
  color: #33ff66;
  font: 700 13px/1 "Courier New", ui-monospace, monospace;
  text-shadow: 0 0 8px rgba(51,255,102,.7);
}
.game-hint-label {
  font: 600 11px/1.35 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: .04em;
  color: rgba(180,255,200,.92);
  opacity: .95;
}
/* Touch devices: hint is removed (status text still uses the element). */
.snake-hint[hidden], .dodge-hint[hidden] { display: none !important; }

/* right module tighter */
.crt-row { gap: 6px; margin-bottom: 6px; }
.crt-screen { aspect-ratio: 1.4; }
.signal-bars { min-height: 34px; }
.gauge-row { gap: 6px; margin-bottom: 4px; }
.mini-gauge { padding: 2px 6px 3px; }
.gauge-svg { max-height: 64px; }
.right-controls { align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.right-controls .toggle-row.compact { flex: 0 0 auto; gap: 10px; margin: 0; }

/* left: smaller porthole */
@media (min-width: 900px) { .vision-porthole { max-width: 300px; margin: 0 auto; } }

/* ── Social deck (bottom, under the Sadhguru quote) ── */
.cosmic-quote { padding-bottom: 14px; }
.social-deck { grid-column: 1 / -1; max-width: 860px; margin: 0 auto 18px; padding: 12px 14px 14px; border-radius: 6px;
  background: linear-gradient(180deg, #1c2028, #0f1116); border: 1px solid #3a3e48;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.45); }
.social-deck-label { text-align: center; font: 700 10px/1 "Courier New", monospace; letter-spacing: .3em; color: var(--text-dim); margin-bottom: 10px; }
.social-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 700px) { .social-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 380px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
.soc-key { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 58px;
  text-decoration: none; color: #9aa0a8; font: 700 11px/1.1 "Courier New", monospace; letter-spacing: .06em; text-align: center;
  background: linear-gradient(180deg, #2a2e36, #14161c); border: 1px solid #3a3e48; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #0a0b0e; transition: color .2s, transform .08s, box-shadow .2s; }
.soc-key svg { width: 18px; height: 18px; fill: currentColor; }
.soc-key:hover { color: var(--cream, #e8dcc0); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #0a0b0e, 0 0 12px var(--phosphor-glow, rgba(60,255,100,.35)); }
.soc-key:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.soc-lamp { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--phosphor, #3f6); box-shadow: 0 0 5px var(--phosphor-glow, #3f6); }
.soc-key.is-soon { opacity: .45; cursor: default; }
.soc-key.is-soon .soc-lamp { background: #5a2a20; box-shadow: none; }
.soc-key em { position: absolute; bottom: 2px; font-style: normal; font-size: 10px; letter-spacing: .2em; color: #c08050; }
.app[data-view="operator"] .social-deck, .app[data-view="omnations"] .social-deck { margin-bottom: 18px; }

/* ── Orbit Dodge (after socials) ── */
.dodge-deck { grid-column: 1 / -1; width: 100%; max-width: 440px; margin: 36px auto 8px; padding: 12px 14px 14px; border-radius: 6px; box-sizing: border-box;
  background: linear-gradient(180deg, #1c2028, #0f1116); border: 1px solid #3a3e48;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.45); }
.dodge-box { position: relative; }
#dodge-cv { display: block; width: 100%; border-radius: 4px; border: 1px solid #2a3a2e; box-shadow: inset 0 0 20px rgba(51,255,102,.08); touch-action: none; }
.dodge-hud { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none;
  font: 700 11px/1 "Courier New", monospace; letter-spacing: .15em; color: var(--phosphor, #3f6); text-shadow: 0 0 6px var(--phosphor-glow); }
.dodge-hint.game-keys-hint { margin: 10px 0 8px; }
/* On-screen arrows: touch only (desktop uses keyboard). Snake reuses the same row. */
.dodge-pad, .snake-pad { display: none; justify-content: center; gap: 8px; }
.dodge-pad.is-touch, .snake-pad.is-touch { display: flex; }
@media (pointer: coarse) {
  .dodge-pad, .snake-pad { display: flex; }
}
.dodge-pad[hidden], .snake-pad[hidden] { display: none !important; }
/* Same 64×42 keys and 8px gap as Orbit Dodge, centered inside the chassis. */
.snake-pad { margin-top: 8px; position: relative; z-index: 2; width: 100%; max-width: 100%; min-width: 0; }
.snake-pad .dodge-btn { flex: 0 1 64px; max-width: 64px; min-width: 0; }
@media (pointer: coarse) {
  .snake-box { width: min(100%, 324px); }
}
.snake-box:has(> .snake-pad.is-touch) { width: min(100%, 324px); }
.dodge-btn { width: 64px; height: 42px; font-size: 16px; color: #9aa0a8; cursor: pointer; touch-action: none; user-select: none;
  background: linear-gradient(180deg, #2a2e36, #14161c); border: 1px solid #3a3e48; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #0a0b0e; }
.dodge-btn:active { transform: translateY(2px); color: var(--phosphor, #3f6); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }

.dodge-rec { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(5,7,10,.72); font: 700 11px/1 "Courier New", monospace; letter-spacing: .2em; color: var(--phosphor, #3f6); }
.dodge-rec[hidden] { display: none; }
.dodge-rec b { color: #ff9a3c; }
#dodge-nick { width: 110px; text-align: center; font: 700 26px/1 "Courier New", monospace; letter-spacing: .35em; padding: 6px 0 6px .35em; text-transform: uppercase;
  color: var(--phosphor, #3f6); background: #05070a; border: 1px solid #2a3a2e; border-radius: 4px; outline: none; caret-color: var(--phosphor, #3f6); }
.dodge-rec-actions { display: flex; gap: 10px; }
.dodge-rec .dodge-btn { width: auto; height: 32px; padding: 0 14px; font: 700 11px/1 "Courier New", monospace; letter-spacing: .2em; }
.dodge-rec .dodge-btn.ghost { opacity: .6; }
.dodge-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 8px;
  font: 700 12px/1.6 "Courier New", monospace; letter-spacing: .12em; color: var(--text-dim); opacity: .85; flex-direction: column; align-items: center; }

/* ═══ ROUND 9 · Gh 29 Sep ═══ */
.volume-wrap { margin-top: 22px; }
.station-plate { margin: 16px auto 4px; padding: 9px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: linear-gradient(180deg, #23262e, #121419); border: 1px solid #3a3f48; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.5); }
.station-plate b { font-size: 11px; letter-spacing: .26em; color: var(--cream); }
.station-plate small { font-size: 10px; letter-spacing: .3em; color: var(--text-dim); }
.logo-onair { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; padding: 4px 10px; font: 800 11px/1 "Orbitron", "Courier New", monospace; letter-spacing: .2em;
  color: #6a3a34; border: 2px solid #4a2622; border-radius: 4px; background: #140605; text-shadow: none; transition: all .4s; }
.logo-onair i { width: 9px; height: 9px; border-radius: 50%; background: #4a1a16; }
.logo-onair.is-ready { color: #c07a6a; border-color: #7a3028; }
.logo-onair.is-live { color: #fff1ec; border-color: #ff3b30; background: #2a0606; text-shadow: 0 0 8px #ff4a3a, 0 0 18px #ff2a1a;
  box-shadow: 0 0 16px rgba(255,50,40,.55), inset 0 0 10px rgba(255,60,40,.35); animation: onair-hum 3.2s ease-in-out infinite; }
.logo-onair.is-live i { background: #ff3b30; box-shadow: 0 0 10px #ff3b30; animation: onair-dot 1.2s ease-in-out infinite; }
@keyframes onair-dot { 50% { opacity: .35; } }
/* Immersive: first + bigger + glowing */
#btn-orbit.nav-orbit { padding-left: 14px; padding-right: 14px; }
@media (min-width: 900px) { .console-nav { gap: 6px; } .logo-plate { padding-right: 10px; } }
#btn-orbit.nav-orbit .op-switch-label { font-size: 12px; letter-spacing: .16em; }
#btn-orbit.nav-orbit .nav-icon { color: #7dd3fc; filter: drop-shadow(0 0 6px #7dd3fc); }
/* Support: warm lit, easy to find */
.support-slot { border-color: #c47a20; box-shadow: 0 0 14px rgba(255,154,60,.35), 0 2px 0 #0a0b0e; color: #ffcf8a; padding: 8px 16px 8px 10px; }
.support-slot .slot-label { font-weight: 700; letter-spacing: .14em; }
/* Welcome: bigger, nicer type */
.welcome-panel { max-width: 560px; padding: 90px 34px 30px; }
.welcome-orbit { width: 58px; height: 58px; margin-left: -29px; top: 18px; }
.welcome-panel .term-title { font: 800 30px/1.3 "Orbitron", "Courier New", monospace; letter-spacing: .06em; color: #8dffb0; text-shadow: 0 0 14px rgba(80,255,150,.45); margin-bottom: 14px; }
.welcome-line { font: 500 16px/1.55 "Courier New", monospace; color: #a8ffc0; opacity: .9; margin: 8px 0 28px; letter-spacing: .02em; }
.welcome-actions .term-btn { font-size: 13px; padding: 12px 18px; }
@media (max-width: 600px) { .welcome-panel .term-title { font-size: 22px; } .welcome-line { font-size: 16px; } .logo-onair { font-size: 11px; padding: 5px 8px; } }
/* Touch me bubble (planet) */
#touch-me { position: fixed; z-index: 9999; pointer-events: none; left: 0; top: 0; padding: 8px 16px 6px; font: 400 24px/1 "Bangers", "Comic Sans MS", cursive; letter-spacing: .06em;
  color: #1a1030; background: #fff7c2; border: 3px solid #1a1030; border-radius: 22px; box-shadow: 4px 4px 0 #1a1030; transform: translate(-50%, -100%) rotate(-6deg) scale(0);
  transform-origin: 30% 120%; transition: transform .18s cubic-bezier(.3,1.6,.5,1); white-space: nowrap; }
#touch-me::after { content: ""; position: absolute; left: 24%; bottom: -14px; border: 8px solid transparent; border-top: 12px solid #1a1030; }
#touch-me::before { content: ""; position: absolute; left: calc(24% + 4px); bottom: -7px; border: 5px solid transparent; border-top: 8px solid #fff7c2; z-index: 1; }
#touch-me.on { transform: translate(-30%, -100%) rotate(-6deg) scale(1); animation: tm-wig 1.1s ease-in-out infinite .2s; }
@keyframes tm-wig { 50% { transform: translate(-30%, -104%) rotate(3deg) scale(1.06); } }
.station-plate { max-width: 100%; box-sizing: border-box; }
@media (max-width: 820px) { .station-plate { padding: 7px 8px; } .station-plate b { font-size: 11px; letter-spacing: .14em; } .station-plate small { font-size: 10px; letter-spacing: .12em; } }
@media (max-width: 599px) { .view-console, .console-nav { max-width: 100%; min-width: 0; } .console-nav { justify-content: center; } #btn-orbit.nav-orbit { flex: 1 1 100%; justify-content: center; } }

/* Contact bigger + easier to read */
#contact-overlay .overlay-panel { width: min(640px, 94vw); max-width: 640px; padding: 26px 30px; }
#contact-overlay .term-title { font-size: 19px; }
#contact-overlay .term-line, #contact-overlay .term-hint { font-size: 14px; line-height: 1.5; }
#contact-overlay .contact-form label > span { font-size: 12px; letter-spacing: .14em; }
#contact-overlay .contact-form input, #contact-overlay .contact-form textarea { font-size: 16px; padding: 11px 12px; }
#contact-overlay .contact-form textarea { min-height: 130px; }

/* v35: remove tubes + center ON AIR */
.tubes, .dial-status { display: none !important; }

.contact-form label > span:first-child::after { content: " *"; color: #ff6b6b; }
.con-req { margin: 0 0 4px; font: 600 12px/1.3 "Courier New", monospace; letter-spacing: .08em; color: #ffb86b; }
.con-err { margin: 2px 0 0; font: 700 13px/1.35 "Courier New", monospace; color: #ff6b6b; }
.contact-form label.is-bad input, .contact-form label.is-bad textarea { border-color: #ff5a5a !important; box-shadow: 0 0 0 1px #ff5a5a, 0 0 10px rgba(255,80,80,.45) !important; }
.contact-form label.is-bad > span:first-child { color: #ff8a8a; }

.aob-dream{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.96);z-index:9999;max-width:min(680px,90vw);padding:22px 30px;text-align:center;font:italic 500 clamp(22px,2.6vw,32px)/1.3 "Cormorant Garamond",Georgia,serif;color:#fff4e0;background:rgba(10,12,30,.72);border:1px solid rgba(240,171,252,.45);border-radius:18px;box-shadow:0 0 40px rgba(165,139,255,.35);backdrop-filter:blur(10px);opacity:0;transition:opacity 1.1s ease,transform 1.1s ease;pointer-events:none}
.aob-dream.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ₿ ⚡ N glyphs in the support window (pb + immersive) */
.aob-supglyph{display:flex;justify-content:center;gap:28px;margin:0 0 12px;perspective:400px}
.aob-supglyph i{font:900 26px 'Orbitron',sans-serif;font-style:normal;color:#fbbf24;text-shadow:0 0 12px #f59e0b,0 0 26px rgba(236,72,153,.6);animation:spinY 4s linear infinite;display:inline-block}
.aob-supglyph i:nth-child(2){animation-delay:-1.3s;color:#fde68a}.aob-supglyph i:nth-child(3){animation-delay:-2.6s;color:#c4b5fd;text-shadow:0 0 12px #a78bfa}
@keyframes spinY{to{transform:rotateY(360deg)}}


/* Art of Bow loop logo */
.aob-loop{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}
.welcome-orbit{width:104px!important;height:104px!important;margin-left:-52px!important;top:16px!important;background:none!important;box-shadow:0 0 28px rgba(255,60,200,.35),0 0 60px rgba(34,211,238,.18)!important;border:none!important}
.welcome-orbit span{inset:-9px}
.welcome-panel{padding-top:138px!important}
.op-face{width:132px;height:132px;margin:0 auto 18px;border-radius:50%;box-shadow:0 0 0 2px rgba(232,220,192,.35),0 0 34px rgba(255,60,200,.35),0 0 70px rgba(34,211,238,.2)}
.aob-disc{position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 12px rgba(255,60,200,.45);animation:aobspin 6s linear infinite;animation-play-state:paused;z-index:3}
.aob-sat{display:none;position:absolute;top:6px;right:6px;width:48px;height:30px;z-index:4;pointer-events:none}
.aob-sat svg{display:block;width:100%;height:100%}
body.aob-sister .aob-disc{visibility:hidden}
body.aob-sister .aob-sat{display:block}
body.aob-sister #flight-rate,
body.aob-sister #mini-flight,
body.aob-sister #px-flight{display:none!important}
body.aob-sister .aob-now-artist,
body.aob-sister .aob-mini-artist{cursor:default;pointer-events:none}
.aob-disc::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#0b0b12;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
body.aob-playing .aob-disc,.orb.playing .aob-disc{animation-play-state:running}
@keyframes aobspin{to{transform:rotate(360deg)}}

/* ── Parallel Universes / Sister stations ── */
.univ-block {
  margin: 18px 0 22px;
  padding: 16px 14px 18px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(167, 139, 250, 0.16), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(103, 232, 249, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(22, 18, 36, 0.92), rgba(10, 12, 20, 0.95));
  box-shadow: inset 0 0 40px rgba(120, 80, 200, 0.08), 0 8px 28px rgba(0, 0, 0, 0.35);
}
.univ-kicker {
  margin: 0 0 4px;
  font: 600 11px Orbitron, sans-serif;
  letter-spacing: 0.2em;
  color: #c4b5fd;
  text-transform: uppercase;
}
.univ-title {
  margin: 0 0 8px;
  font: 800 clamp(18px, 3vw, 26px) Orbitron, sans-serif;
  letter-spacing: 0.08em;
  color: #f3e8ff;
}
.univ-blurb {
  margin: 0 0 12px;
  max-width: 42em;
  font-size: 14px;
  line-height: 1.55;
  color: #d4cce0;
}
.univ-sisters-label {
  margin: 0 0 10px;
  font: 700 11px Orbitron, sans-serif;
  letter-spacing: 0.16em;
  color: #a78bfa;
  text-transform: uppercase;
}
.univ-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .univ-grid { grid-template-columns: 1fr 1fr; }
}
.univ-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 12px 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(8, 10, 18, 0.55);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.univ-card.is-on {
  border-color: rgba(167, 139, 250, 0.75);
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.25);
  background: rgba(40, 24, 70, 0.45);
}
.univ-name {
  margin: 0 0 4px;
  font: 700 14px Orbitron, sans-serif;
  letter-spacing: 0.06em;
  color: #f8f5ff;
}
.univ-loc {
  margin: 0 0 6px;
  font-size: 12px;
  color: #b8aed0;
  letter-spacing: 0.04em;
}
.univ-credit {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #8e84a8;
}
.univ-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.univ-link {
  font: 600 11px Orbitron, sans-serif;
  letter-spacing: 0.08em;
  color: #67e8f9;
  text-decoration: none;
  border-bottom: 1px solid rgba(103, 232, 249, 0.35);
}
.univ-link:hover { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.6); }
.univ-links-plain .univ-link {
  font-size: 11px;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
}
.univ-card.is-compact .univ-links { display: none; }
.univ-card.is-compact .univ-credit { display: none; }

.univ-play {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid rgba(196, 181, 253, 0.55);
  background: transparent;
  color: #e9d5ff;
  font: 700 12px Orbitron, sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
}
.univ-play:hover { background: rgba(167, 139, 250, 0.18); }
.univ-play.is-on {
  background: linear-gradient(135deg, #7c3aed, #0891b2);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.45);
}
.univ-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.univ-back {
  padding: 9px 14px;
  border-radius: 20px;
  border: 1px solid rgba(125, 211, 252, 0.5);
  background: rgba(20, 40, 80, 0.35);
  color: #e0f2fe;
  font: 700 11px Orbitron, sans-serif;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.univ-back:hover { box-shadow: 0 0 16px rgba(125, 211, 252, 0.35); }
.univ-more {
  font: 600 12px Orbitron, sans-serif;
  letter-spacing: 0.06em;
  color: #c4b5fd;
  text-decoration: none;
}
.univ-more:hover { color: #67e8f9; }
.channel-btn.channel-worlds {
  border-style: dashed;
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.55);
}
.channel-btn.channel-worlds:hover,
.channel-btn.channel-worlds.is-active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(8, 145, 178, 0.3));
  color: #f5e9ff;
}

/* Standalone /universes page */
.universes-page {
  min-height: 100vh;
  color: #e8e0f0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.22), transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(8, 145, 178, 0.18), transparent 45%),
    #07080c;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
}
.universes-page .univ-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 18px 48px;
}
.universes-page header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.universes-page .univ-home {
  font: 700 12px Orbitron, sans-serif;
  letter-spacing: 0.12em;
  color: #7dd3fc;
  text-decoration: none;
  border: 1px solid rgba(125, 211, 252, 0.4);
  padding: 8px 14px;
  border-radius: 20px;
}
.universes-page .univ-home:hover { box-shadow: 0 0 16px rgba(125, 211, 252, 0.35); }
.universes-page .univ-brand {
  font: 800 13px Orbitron, sans-serif;
  letter-spacing: 0.16em;
  color: #c4b5fd;
}
.universes-page h1 {
  font: 800 clamp(26px, 5vw, 40px) Orbitron, sans-serif;
  letter-spacing: 0.06em;
  margin: 8px 0 12px;
  color: #f8f5ff;
}
.universes-page .univ-lead {
  max-width: 40em;
  line-height: 1.65;
  color: #c9bfd8;
  margin-bottom: 22px;
}
.universes-page footer {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid rgba(167, 139, 250, 0.25);
  font-size: 12px;
  color: #8e84a8;
  letter-spacing: 0.08em;
}

/* Parallel universes invite (secondary) */
.univ-invite{margin:.85rem 0 .35rem;text-align:center}
.univ-invite-btn{background:transparent;border:none;color:rgba(125,211,252,.85);font:500 13px/1.4 ui-sans-serif,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.univ-invite-btn:hover{color:#fff}


/* Standalone /sadhguruelmaestro page — soft meditative landing */
.sadhguru-page {
  min-height: 100vh;
  position: relative;
  color: #f3eee6;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.14), transparent 55%),
    radial-gradient(ellipse at 20% 90%, rgba(212, 175, 120, 0.12), transparent 50%),
    radial-gradient(ellipse at 85% 10%, rgba(140, 160, 200, 0.1), transparent 45%),
    #0a0b0e;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  overflow-x: hidden;
}
.sadhguru-page .sg-breath {
  position: fixed;
  left: 50%;
  top: 42%;
  width: min(70vw, 420px);
  height: min(70vw, 420px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 35%, transparent 68%);
  pointer-events: none;
  animation: sgBreath 8s ease-in-out infinite;
  z-index: 0;
}
@keyframes sgBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(.78); opacity: .35; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .7; }
}
.sadhguru-page .sg-shell {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 18px 56px;
}
.sadhguru-page header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.sadhguru-page .sg-home {
  font: 700 12px Orbitron, sans-serif;
  letter-spacing: 0.12em;
  color: #e8dfd0;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 8px 14px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.sadhguru-page .sg-home:hover { box-shadow: 0 0 18px rgba(255, 255, 255, 0.2); }
.sadhguru-page .sg-brand {
  font: 800 12px Orbitron, sans-serif;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}
.sadhguru-page .sg-kicker {
  font: 600 11px Orbitron, sans-serif;
  letter-spacing: 0.28em;
  color: rgba(232, 223, 208, 0.7);
  margin: 0 0 10px;
}
.sadhguru-page h1 {
  font: 300 clamp(28px, 5.5vw, 44px)/1.2 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.25);
}
.sadhguru-page .sg-lead {
  max-width: 34em;
  line-height: 1.7;
  color: rgba(243, 238, 230, 0.78);
  margin: 0 0 18px;
  font-size: 1.05rem;
}
.sadhguru-page .sg-soon {
  font: 500 13px Orbitron, sans-serif;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 28px;
}
.sadhguru-page .sg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 40px;
}
.sadhguru-page .sg-cta {
  display: inline-block;
  font: 600 14px Orbitron, sans-serif;
  letter-spacing: 0.1em;
  color: #0a0b0e;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: box-shadow .25s, transform .2s;
}
.sadhguru-page .sg-cta:hover {
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.sadhguru-page .sg-contact {
  font: 500 13px system-ui, sans-serif;
  color: rgba(243, 238, 230, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sadhguru-page .sg-contact:hover { color: #fff; }
.sadhguru-page footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(200, 190, 175, 0.55);
  letter-spacing: 0.08em;
}

/* Immersive view entry (cross-nav pill) — Omnations / Operator / On board */
.cross-link.cross-immersive {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11px; letter-spacing: 0.16em;
  color: #bfe8ff; background: rgba(125,211,252,0.08);
  border: 1px solid rgba(125,211,252,0.45); border-radius: 999px;
  padding: 4px 11px 4px 8px; cursor: pointer;
  box-shadow: 0 0 10px rgba(125,211,252,0.15);
  transition: background .2s, box-shadow .2s, color .2s;
}
.cross-link.cross-immersive svg { color: #7dd3fc; filter: drop-shadow(0 0 4px #7dd3fc); flex: none; }
.cross-link.cross-immersive:hover, .cross-link.cross-immersive:focus-visible {
  color: #fff; background: rgba(125,211,252,0.18); box-shadow: 0 0 16px rgba(125,211,252,0.35); outline: none;
}
/* already immersive (view borrowed into orbit drawer) → hide the entry */
#orbit .cross-link.cross-immersive { display: none !important; }


/* ── Console OTHER WORLDS floating popup ── */
.univ-pop{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:18px;pointer-events:none;opacity:0;transition:opacity .28s ease;
  background:rgba(4,8,16,.45);
}
.univ-pop[hidden]{display:none!important}
.univ-pop.on{opacity:1;pointer-events:auto}
.univ-pop-card{
  width:min(640px,94vw);max-height:min(78vh,720px);display:flex;flex-direction:column;
  border-radius:10px;border:1px solid rgba(167,139,250,.45);
  background:
    radial-gradient(ellipse at 12% 0%,rgba(167,139,250,.18),transparent 55%),
    radial-gradient(ellipse at 90% 100%,rgba(103,232,249,.1),transparent 50%),
    linear-gradient(180deg,#181426,#0a0c14);
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 40px rgba(120,80,200,.08);
  pointer-events:auto;transform:translateY(10px) scale(.98);transition:transform .28s ease;
}
.univ-pop.on .univ-pop-card{transform:none}
.univ-pop:not(.on),.univ-pop:not(.on) *{pointer-events:none!important}
.univ-pop-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px 10px;border-bottom:1px solid rgba(167,139,250,.22);flex:0 0 auto;
}
.univ-pop-title{
  font:700 13px Orbitron,sans-serif;letter-spacing:.14em;color:#e9d5ff;text-transform:uppercase;
}
.univ-pop-btns{display:flex;gap:8px;align-items:center}
.univ-pop-btns button{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(167,139,250,.4);background:rgba(0,0,0,.28);color:#e9d5ff;
  font-size:16px;line-height:1;cursor:pointer;
}
.univ-pop-btns button:hover{border-color:rgba(196,181,253,.75);background:rgba(0,0,0,.45)}
.univ-pop-body{overflow:auto;padding:6px 10px 12px;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
.univ-pop-body .univ-block{margin:8px 0 4px;border:none;background:transparent;box-shadow:none;padding:8px 6px 10px}
.univ-pop-body .univ-title{font-size:clamp(16px,2.6vw,22px)}

.univ-pop-pill{
  position:fixed;right:18px;bottom:22px;z-index:81;
  display:inline-flex;align-items:center;gap:8px;max-width:min(320px,80vw);
  padding:10px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(167,139,250,.5);
  background:linear-gradient(135deg,rgba(40,24,70,.92),rgba(16,28,48,.94));
  color:#f3e8ff;font:600 12px/1.2 "Chakra Petch",system-ui,sans-serif;letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(167,139,250,.25);
  opacity:0;transform:translateY(8px);transition:.28s ease;pointer-events:none;
}
.univ-pop-pill[hidden]{display:none!important}
.univ-pop-pill.on{opacity:1;transform:none;pointer-events:auto}
.univ-pop-pill i{color:#c4b5fd;font-style:normal}
.univ-pop-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.univ-pop-pill.is-live{border-color:rgba(103,232,249,.55);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(103,232,249,.28)}
.univ-pop-pill.is-live i{color:#67e8f9;animation:univPulse 1.6s ease-in-out infinite}
@keyframes univPulse{0%,100%{opacity:.55}50%{opacity:1}}
.univ-pop-pill:hover{border-color:rgba(196,181,253,.8);transform:translateY(-1px)}
@media (max-width:640px){
  .univ-pop{padding:10px;align-items:flex-end}
  .univ-pop-card{max-height:82vh;width:100%}
  .univ-pop-pill{right:12px;bottom:14px;padding:9px 12px;font-size:11px}
}

/* denser sister list when 9 stations */
.univ-pop-body .univ-grid,
.orb-wbody .univ-grid{gap:8px}
.univ-pop-body .univ-card.is-compact,
.orb-wbody .univ-card.is-compact{padding:10px 10px}


/* ── Sister station Earth locator (centered over list; above immersive z-index:90) ── */
.univ-globe{
  position:fixed;z-index:120;width:228px;height:228px;pointer-events:none;
  opacity:0;transform:scale(.92);transition:opacity .35s ease,transform .35s ease;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(125,211,252,.28));
}
.univ-globe[hidden]{display:none!important}
.univ-globe.on{opacity:1;transform:none}
.univ-globe canvas{display:block;width:228px;height:228px;border-radius:50%}
.univ-globe-label{
  position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%);
  max-width:220px;padding:5px 12px;border-radius:999px;text-align:center;
  font:600 12px/1.2 "Chakra Petch",system-ui,sans-serif;letter-spacing:.04em;
  color:#e8f1ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(8,14,28,.82);border:1px solid rgba(125,211,252,.4);
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
/* Dim sibling cards while globe overlays the list */
.univ-grid.univ-globe-dimmed .univ-card{
  opacity:.15;filter:blur(1.4px);
  transition:opacity .45s ease,filter .45s ease;
}
.univ-grid.univ-globe-dimmed .univ-card.univ-globe-focus{
  opacity:.5;filter:none;
}
@media (max-width:700px){
  .univ-globe{width:168px;height:168px}
  .univ-globe canvas{width:168px;height:168px}
  .univ-globe-label{font-size:11px;max-width:170px;padding:3px 8px}
}
@media (prefers-reduced-motion: reduce){
  .univ-globe{transition:opacity .2s ease}
  .univ-grid.univ-globe-dimmed .univ-card{transition:opacity .2s ease,filter .2s ease}
}


/* ── In-app Universes SPA view (keeps audio) ── */
.app[data-view="universes"] { display: block; max-width: 920px; padding-bottom: 88px; }
.app[data-view="universes"] .view-console,
.app[data-view="universes"] .view-operator,
.app[data-view="universes"] .view-omnations,
.app[data-view="universes"] .view-onboard { display: none !important; }
/* dodge / social / quote live OUTSIDE view-console — must hide on this route */
.app[data-view="universes"] .dodge-deck,
.app[data-view="universes"] .station-close,
.app[data-view="universes"] .social-deck:not(.univ-spa-socials),
.app[data-view="universes"] .cosmic-quote,
.app[data-view="universes"] .console-nav { display: none !important; }
.app:not([data-view="universes"]) .view-universes { display: none !important; }
.app[data-view="universes"] .view-universes { display: block; order: -1; }
.app[data-view="universes"] { display: flex; flex-direction: column; }
body[data-view="universes"] .mini-player { display: flex; }
.app[data-view="universes"] .univ-spa-socials { margin: 28px 0 24px; }
.app[data-view="universes"] .univ-block.is-bare .univ-sisters-label { margin-top: 4px; }
.univ-spa-hero { margin: 8px 0 18px; text-align: center; }
.univ-spa-blurb { max-width: 520px; margin: 8px auto 0; opacity: .8; font-size: 14px; line-height: 1.45; }
.univ-immersive-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin:0 auto 16px;padding:14px 28px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(125,211,252,.65);
  background:linear-gradient(135deg,rgba(30,90,200,.55),rgba(124,58,237,.5),rgba(20,140,110,.45));
  color:#e8f7ff;font:800 13px/1 Orbitron,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 28px rgba(125,211,252,.45),0 0 48px rgba(167,139,250,.3),inset 0 0 18px rgba(255,255,255,.08);
  animation:univImmPulse 2.8s ease-in-out infinite;
}
.univ-immersive-cta i{font-style:normal;color:#7dd3fc;filter:drop-shadow(0 0 8px #7dd3fc)}
.univ-immersive-cta:hover{transform:translateY(-1px);border-color:rgba(196,181,253,.85)}
@keyframes univImmPulse{0%,100%{box-shadow:0 0 22px rgba(125,211,252,.4),0 0 40px rgba(167,139,250,.25)}50%{box-shadow:0 0 34px rgba(125,211,252,.65),0 0 60px rgba(240,171,252,.4)}}
#btn-orbit.nav-orbit.is-loading, .cross-immersive.is-loading{opacity:.72;cursor:wait}
#btn-orbit.nav-orbit.is-loading .op-switch-label{letter-spacing:.1em}

/* Standalone /universes now-playing dock */
.univ-nowplaying{
  position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:0 0 18px;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(167,139,250,.45);
  background:linear-gradient(135deg,rgba(40,24,70,.92),rgba(16,28,48,.94));
  box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 22px rgba(167,139,250,.2);
}
.univ-nowplaying .unp-meta{flex:1;min-width:140px}
.univ-nowplaying .unp-kicker{font:700 10px Orbitron,sans-serif;letter-spacing:.14em;color:#c4b5fd;opacity:.85}
.univ-nowplaying .unp-title{font:600 14px/1.3 "Chakra Petch",system-ui,sans-serif;color:#f3e8ff}
.univ-nowplaying .unp-play{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(125,211,252,.5);
  background:rgba(0,0,0,.35);color:#e8f7ff;font-size:16px;cursor:pointer;
}
.univ-nowplaying .unp-vol{display:flex;align-items:center;gap:8px;color:#c4b5fd;font:600 11px Orbitron,sans-serif}
.univ-nowplaying .unp-vol input{width:110px}
.univ-page-immersive{
  display:flex;justify-content:center;margin:0 0 20px;
}


/* ── Universes SPA satellites field ── */
.univ-sat-field{
  position:relative;height:min(56vh,520px);margin:10px 0 16px;border-radius:16px;
  border:1px solid rgba(125,211,252,.16);
  background:radial-gradient(ellipse at 50% 50%,rgba(30,58,138,.2),transparent 62%),linear-gradient(180deg,rgba(8,12,24,.12),rgba(2,4,12,.45));
  overflow:hidden;
}
.univ-sat{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:140px;
  z-index:1;padding:0;
  animation:univ-sat-float var(--d,3s) ease-in-out infinite;animation-delay:var(--delay,0s);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 50%,transparent));
  transition:filter .25s;
}
.univ-sat-svg{width:52px;height:auto;overflow:visible;transition:transform .25s,filter .25s}
.univ-sat-wings{transform-origin:center;animation:univ-sat-yaw var(--spin,9s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.univ-sat-name{
  font:600 12px/1.25 "Chakra Petch",system-ui,sans-serif;letter-spacing:.03em;color:#e8eef8;
  text-align:center;padding:4px 9px;border-radius:10px;max-width:140px;
  white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  background:rgba(2,6,16,.55);border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.univ-sat:hover,.univ-sat:focus-visible{
  z-index:6;outline:none;
  filter:drop-shadow(0 0 18px var(--c)) drop-shadow(0 0 32px color-mix(in srgb,var(--c) 55%,transparent));
}
.univ-sat:hover .univ-sat-svg,.univ-sat:focus-visible .univ-sat-svg{transform:scale(1.16)}
.univ-sat:hover .univ-sat-name,.univ-sat:focus-visible .univ-sat-name{border-color:var(--c);color:#fff}
.univ-sat.is-on .univ-sat-beacon{animation:univ-sat-blink .55s steps(1) infinite}
.univ-sat.is-on .univ-sat-name,.univ-sat.univ-globe-focus .univ-sat-name{
  border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent);color:#fff;
}
.univ-sat.is-on,.univ-sat.univ-globe-focus{
  filter:drop-shadow(0 0 16px var(--c)) drop-shadow(0 0 28px color-mix(in srgb,var(--c) 50%,transparent));
  z-index:4;
}
.univ-grid.univ-globe-dimmed .univ-sat:not(.univ-globe-focus):not(.is-on){opacity:.28;filter:grayscale(.35) brightness(.7)}
@keyframes univ-sat-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
@keyframes univ-sat-yaw{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes univ-sat-blink{50%{opacity:.2}}
.univ-sat-legend-h{margin:4px 0 8px;text-align:center;font:600 10px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.22em;color:var(--text-dim,#8ba3c7);text-transform:uppercase}
.univ-sat-legend{
  display:grid;gap:4px 8px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 0 12px;padding:10px 8px;border-radius:12px;border:1px solid rgba(125,211,252,.16);background:rgba(8,12,22,.72);
}
.univ-sat-leg-item{
  display:flex;align-items:flex-start;gap:7px;min-width:0;text-decoration:none;color:inherit;
  padding:4px 4px;border-radius:8px;cursor:pointer;line-height:1.2;
}
.univ-sat-leg-item:hover,.univ-sat-leg-item:focus-visible{background:rgba(125,211,252,.08);outline:none}
.univ-sat-dot{width:9px;height:9px;border-radius:50%;margin-top:3px;flex:none;background:var(--c);box-shadow:0 0 8px var(--c)}
.univ-sat-leg-text{flex:1;min-width:0}
.univ-sat-leg-text b{display:block;font:600 11px/1.2 "Chakra Petch",system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.univ-sat-leg-text small{display:block;color:var(--text-dim,#8ba3c7);font-size:11px;margin-top:1px}
.univ-sat-leg-ext{flex:none;opacity:.45;font-size:11px;margin-top:2px;color:var(--phosphor,#7dd3fc)}
@media(min-width:900px){.univ-sat-legend{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:520px){
  .univ-sat-field{height:min(62vh,480px)}
  .univ-sat{max-width:104px}
  .univ-sat-svg{width:40px}
  .univ-sat-name{font-size:11px;max-width:100px;padding:3px 6px}
  .univ-sat-legend{grid-template-columns:1fr 1fr;gap:3px 6px;padding:8px 6px}
  .univ-sat-leg-text b{font-size:11px}
}

/* Logo sits above the mini-player (z-index 40) so a click can reach it. The décor itself stays click-through. */
body.univ-aob-logo .space-decor,
body.universes-page .space-decor { z-index: 45; }

/* ── Corner AoB logo: ONLY on #/universes (and body.universes-page) ── */
.aob-corner-logo{
  display:none;
  position:absolute;inset:22%;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:transparent;z-index:3;overflow:visible;pointer-events:auto;
  box-shadow:0 0 22px rgba(255,60,200,.28),0 0 48px rgba(34,211,238,.16);
  animation:aob-logo-float 5.5s ease-in-out infinite;
  transition:box-shadow .3s,transform .3s,filter .3s,opacity .35s;
}
.aob-corner-logo[hidden]{display:none!important}
.aob-corner-halo{
  position:absolute;inset:-8%;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,#ff3cc8,#22d3ee,#a3e635,#fbbf24,#ff3cc8);
  opacity:.35;filter:blur(1px);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 8px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 8px));
  animation:aob-halo-spin 28s linear infinite;
}
.aob-corner-logo picture,.aob-corner-logo img{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;
  /* Keep ART OF BOW text horizontal — never spin the artwork */
}
.ringed-planet.has-aob-logo .planet-body,
.ringed-planet.has-aob-logo .planet-ring,
.ringed-planet.has-aob-logo .planet-ring-shadow{
  opacity:0!important;visibility:hidden!important;pointer-events:none;transition:none!important;
}
.ringed-planet:not(.has-aob-logo) .aob-corner-logo{transition:none!important}
.ringed-planet.has-aob-logo .aob-corner-logo,
body.univ-aob-logo .ringed-planet.has-aob-logo .aob-corner-logo,
body.universes-page .aob-corner-logo{display:block}
/* Smaller / tucked into corner so it clears the satellites box */
.ringed-planet.has-aob-logo,
body.universes-page .ringed-planet{
  right:-7vw;bottom:-10vh;
  width:min(18vw, 168px);
  animation:none;
  z-index:1;
}
@media (min-width:1024px){
  .ringed-planet.has-aob-logo{
    width:min(14vw, 148px);right:-5vw;bottom:-12vh;
  }
}
@media (min-width:1280px){
  .ringed-planet.has-aob-logo{
    width:min(13vw, 168px);right:-3.5vw;bottom:-9vh;
  }
}
@media (min-width:1440px){
  .ringed-planet.has-aob-logo{
    width:min(12vw, 180px);right:-2.5vw;bottom:-7vh;
  }
}
body.planet-hover .aob-corner-logo,
.aob-corner-logo:hover,.aob-corner-logo:focus-visible{
  outline:none;transform:scale(1.06) translateY(-2px);
  box-shadow:0 0 36px rgba(255,60,200,.55),0 0 72px rgba(34,211,238,.35),0 0 0 2px rgba(255,255,255,.22);
  filter:brightness(1.12) saturate(1.08);
}
/* Grey planet hover: hand + brighter glow (no ¡TÓCAME! bubble) */
body.planet-hover .ringed-planet:not(.has-aob-logo) .planet-body{
  filter:brightness(1.18) saturate(1.05);
  box-shadow:
    inset -18px -12px 40px rgba(0,0,0,0.55),
    0 0 48px rgba(220,180,100,0.42),
    0 0 90px rgba(180,140,80,0.28);
}
@keyframes aob-logo-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes aob-logo-glow{
  0%,100%{box-shadow:0 0 22px rgba(255,60,200,.28),0 0 48px rgba(34,211,238,.16)}
  50%{box-shadow:0 0 36px rgba(255,60,200,.48),0 0 70px rgba(34,211,238,.3)}
}
.aob-corner-logo{animation:aob-logo-float 5.5s ease-in-out infinite, aob-logo-glow 3.2s ease-in-out infinite}
@keyframes aob-halo-spin{to{transform:rotate(360deg)}}
@media (max-width:899px){
  .ringed-planet.has-aob-logo,
  body.universes-page .ringed-planet{
    width:min(28vw, 110px);right:-8vw;bottom:-4vh;opacity:.85;
  }
  .aob-corner-logo{inset:14%}
}
@media (max-width:480px){
  .ringed-planet.has-aob-logo .aob-corner-logo,
  body.universes-page .aob-corner-logo{opacity:.55}
  .ringed-planet.has-aob-logo{width:72px;right:-18px;bottom:-10px}
}
@media (prefers-reduced-motion: reduce){
  .aob-corner-logo,.aob-corner-halo{animation:none!important}
  .univ-sat,.univ-sat-wings{animation:none!important}
}
#touch-me{display:none!important}
body.planet-hover,body.planet-hover *{cursor:pointer}
body.mars-on .aob-corner-logo{opacity:0;pointer-events:none}

/* ── v64 Universes satellites on narrow phones: staggered 3-column field (labels collided when absolutely placed). v66: used below 600px (free drift above) ── */
@media (max-width:599px){
  .univ-sat-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px 6px;height:auto;padding:16px 8px 26px}
  .univ-sat{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:none;animation-name:univ-sat-float-m}
  .univ-sat:nth-child(3n+2){margin-top:22px}
  .univ-sat-svg{width:42px}
  .univ-sat-name{font-size:11px;max-width:100%;padding:3px 5px}
  @keyframes univ-sat-float-m{0%,100%{transform:none}50%{transform:translateY(-5px)}}
}

/* ── v64 Operator film frames: 3 real frames, no captions ── */
.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.photo-grid{gap:8px}}
.film-frame.no-label{padding-bottom:14px}
.film-frame.no-label::after{bottom:4px}

/* ── language control: 🌐 ESP | ENG, active pill. Same control in the console nav and Immersive. ── */
.nav-switch.nav-lang{gap:3px;padding:3px 4px;cursor:default}
.nav-switch.nav-lang:hover{color:var(--cream)}
.nav-switch.nav-lang:active{transform:none}
.nav-lang .nav-globe{font-size:13px;line-height:1;padding:0 1px}
.nav-lang .lang-opt{appearance:none;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--cream);
  font-family:inherit;font-weight:700;font-size:11px;line-height:1;letter-spacing:.04em;padding:4px 7px;cursor:pointer;min-height:24px}
.nav-lang .lang-opt:hover{color:var(--amber)}
.nav-lang .lang-opt.on{background:var(--amber,#e0a040);color:#14100a;border-color:var(--amber,#e0a040);box-shadow:0 0 10px rgba(224,160,64,.35)}
.nav-lang .lang-opt:focus-visible{outline:2px solid var(--amber,#e0a040);outline-offset:2px}
/* touch screens: 44px targets in the console nav; the language pills stay a step smaller */
@media (pointer:coarse){.nav-switch{min-height:44px}.nav-lang .lang-opt{min-height:32px}}
/* v64: status captions carry information → functional size (≥11px) */
.band-label, .vision-caption { font-size: 11px !important; }
.band-label { opacity: 1 !important; }
.soc-key em { font-size: 11px; letter-spacing: .14em; }
/* v64: bigger nav text must not collide with the logo plate — tighter tracking/padding, same ≥11px type */
@media (min-width: 600px) {
  .console-nav { gap: 5px; }
  .console-nav .nav-switch { padding: 6px 8px; gap: 6px; }
  .console-nav .op-switch-label { letter-spacing: .08em; }
  #btn-orbit.nav-orbit { padding-left: 10px; padding-right: 10px; }
  #btn-orbit.nav-orbit .op-switch-label { letter-spacing: .1em; }
  .console-nav .nav-switch.nav-lang { padding: 2px 3px; gap: 2px; }
  .nav-lang .lang-opt { padding: 4px 6px; letter-spacing: .02em; }
}
/* v64: tablets (600–1023px) — the nav no longer fits beside the logo plate: put it in flow under the logo */
@media (min-width: 600px) and (max-width: 1023px) {
  .console-nav { position: static; justify-content: center; margin: 0 0 10px; grid-column: 1 / -1; min-width: 0; max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 1023px) {
  .right-controls { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .station-plate b { letter-spacing: .16em; }
  .station-plate small { letter-spacing: .14em; }
  .toggle-label, .knob-label { letter-spacing: .06em; }
}
/* v64: phones — the drifting SAT-1 caption collided with nav labels; the satellite stays, its caption hides */
@media (max-width: 500px) { .satellite .sat-label { display: none; } }

/* ── v65 OTHER WORLDS popup: all 15 sister stations visible at once on desktop ── */
/* root cause of the clipped left edge: 1fr columns grew to the cards' min-content (nowrap pill + long names),
   so the list was ~40px wider than the popup body and could be scrolled sideways. Columns can now shrink. */
.univ-pop-body .univ-grid, .orb-wbody .univ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.univ-card { min-width: 0; }
.univ-card-main { min-width: 0; flex: 1 1 auto; }
.univ-name { overflow-wrap: anywhere; }
.univ-pop-body, .orb-wbody { overflow-x: hidden; }

.univ-pop { padding: 2vh 2vw; }
.univ-pop-card { width: min(1200px, 92vw); max-height: 88vh; }
.univ-pop-head { padding: 8px 12px 7px 16px; }
.univ-pop-btns button { width: 32px; height: 32px; }
.univ-pop-body { padding: 4px 16px 10px; }
.univ-pop-body .univ-block { margin: 0; padding: 6px 0 2px; }
.univ-pop-body .univ-title { display: none !important; } /* the popup header already shows the title */
.univ-pop-body .univ-kicker { display: block; margin: 0 0 6px; }
.univ-pop-body .univ-blurb { display: block; margin: 0 0 10px; max-width: none; font-size: 13px; line-height: 1.45; }
.univ-pop-body .univ-sisters-label { margin: 8px 0 6px; }
@media (min-width: 1100px) { .univ-pop-body .univ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .univ-pop-body .univ-grid, .orb-wbody .univ-grid { grid-template-columns: minmax(0, 1fr); } }
/* compact cards: name (≤2 lines) + city · country, smaller play pill (popup + Immersive panel) */
.univ-pop-body .univ-grid, .orb-wbody .univ-grid { gap: 8px 10px; }
.univ-pop-body .univ-card.is-compact, .orb-wbody .univ-card.is-compact { padding: 9px 10px 9px 14px; align-items: center; gap: 10px; }
.univ-pop-body .univ-name, .orb-wbody .univ-name { font-size: 13px; line-height: 1.25; margin: 0 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.univ-pop-body .univ-loc, .orb-wbody .univ-loc { margin: 0; font-size: 12px; }
.univ-pop-body .univ-play, .orb-wbody .univ-play { padding: 6px 10px; font-size: 11px; letter-spacing: .04em; }
.univ-pop-body .univ-invite { margin: 8px 0 0; }
.univ-pop-body .univ-actions { margin-top: 8px; }
@media (max-width: 640px) {
  .univ-pop { padding: 10px; }
  .univ-pop-card { width: 100%; max-height: 86vh; }
  .univ-pop-body { padding: 4px 12px 10px; }
}

/* ── v66 Universes: free-flying satellites across a full-width, unboxed field; legend = buttons (no external links) ── */
.univ-sat-block{border:0!important;background:none!important;box-shadow:none!important}
.univ-sat-block>.univ-sisters-label{text-align:center}
.univ-sat-field:not(.is-drift){border:0;border-radius:0;background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(30,58,138,.14),transparent 75%)}
.univ-sat-field.is-drift{
  height:clamp(460px,74vh,820px);margin:4px 0 22px;border:0;border-radius:0;
  background:radial-gradient(ellipse 55% 50% at 50% 50%,rgba(30,58,138,.13),transparent 72%);
  overflow:hidden;
}
.univ-sat-field.is-drift .univ-sat{left:0;top:0;transform:none;animation:none;will-change:transform;max-width:150px}
.univ-sat-field.is-drift .univ-sat-name{max-width:150px}
.univ-sat-body{display:flex;flex-direction:column;align-items:center;gap:6px;transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.univ-sat-field .univ-sat{transition:filter .25s,opacity .9s ease .05s}
.univ-sat.is-focus-sat{z-index:8}
.univ-sat.is-focus-sat .univ-sat-body{transform:scale(1.55)}
.univ-sat-field.is-focus .univ-sat:not(.is-focus-sat){opacity:0!important;pointer-events:none;transition:filter .25s,opacity .45s ease}
.univ-sat-legend{max-width:1080px;margin:0 auto 14px;gap:2px 6px;padding:8px}
button.univ-sat-leg-item{appearance:none;-webkit-appearance:none;border:1px solid transparent;background:transparent;font:inherit;color:inherit;text-align:left;width:100%;transition:background .2s,border-color .2s}
.univ-sat-leg-item:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.univ-sat-leg-item:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.univ-sat-leg-item.is-on{border-color:color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent)}
.univ-sat-leg-item.is-on b{color:#fff}
@media (max-width:599px){
  .univ-sat-field.is-focus .univ-sat.is-focus-sat{z-index:8}
  /* the fixed SAT-1 easter egg floated over the phone grid labels; desktop drift steers around it */
  body.univ-aob-logo #sat-1{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion: reduce){
  .univ-sat-body{transition:none}
  .univ-sat-field .univ-sat{transition:filter .25s,opacity .3s ease}
}

/* ── v67 PIXEL mode: Press Start 2P widens nav labels so absolute right-aligned
   .console-nav expands left and covers .logo-plate (ART OF BOW / ON AIR). Put the
   nav in normal document flow under the logo, same idea as the 600–1023 tablet rule. ── */
body.px .view-console {
  display: flex;
  flex-direction: column;
}
body.px .console-nav {
  position: static !important;
  top: auto;
  right: auto;
  justify-content: center;
  margin: 0 0 12px;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  z-index: auto;
}
body.px .logo-plate { position: relative; z-index: 2; align-self: flex-start; }

/* v67 popup intro: no ghosted title under the kicker; block stack instead of inline mash */
.univ-pop-body .univ-title { display: none !important; }
.univ-pop-body .univ-kicker { display: block; margin: 0 0 6px; }
.univ-pop-body .univ-blurb { display: block; margin: 0 0 10px; max-width: none; }
.univ-sisters-label:empty { display: none !important; }

/* v67 popup card fully opaque — no bleed-through of the page logo/nav under the intro */
.univ-pop-card{
  background:
    radial-gradient(ellipse at 12% 0%,rgba(167,139,250,.18),transparent 55%),
    radial-gradient(ellipse at 90% 100%,rgba(103,232,249,.1),transparent 50%),
    linear-gradient(180deg,#181426,#0a0c14) !important;
}

/* Immersive entry glow lives here so the console button keeps its look
   while orbit.css waits until the listener opens that view. */
.nav-orbit{position:relative;border-color:rgba(125,211,252,.6)!important;box-shadow:0 0 18px rgba(125,211,252,.35),inset 0 0 12px rgba(167,139,250,.25);animation:navOrb 3s ease-in-out infinite}
.nav-orbit .op-switch-label{background:linear-gradient(90deg,#7dd3fc,#f0abfc,#a3e635);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
@keyframes navOrb{50%{box-shadow:0 0 30px rgba(240,171,252,.5),inset 0 0 14px rgba(125,211,252,.35)}}
body.orbit-on{overflow:hidden}
body.orbit-on #app,body.orbit-on .tune-hint,body.orbit-on #starfield,body.orbit-on #nebula,body.orbit-on .mini-player,body.orbit-on .yt-fallback{visibility:hidden}
body.orbit-land #app{animation:land 1.3s ease-out}
@keyframes land{0%{filter:brightness(3) blur(6px);transform:scale(1.06)}100%{filter:none;transform:none}}

body[data-view="console"] .mini-vol { display: none; }

.yt-fallback {
  position: fixed;
  z-index: 45;
  left: 12px;
  right: 12px;
  bottom: 16px;
  margin: 0 auto;
  max-width: 640px;
  padding: 12px 14px;
  background: #141820;
  color: #f2ead8;
  border: 1px solid #c4b48a;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.yt-fallback[hidden] { display: none !important; }
@media (max-width: 900px) {
  .yt-fallback { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
body[data-view="operator"] .yt-fallback,
body[data-view="omnations"] .yt-fallback,
body[data-view="onboard"] .yt-fallback,
body[data-view="universes"] .yt-fallback {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

:focus-visible {
  outline: 2px solid #f0d78c;
  outline-offset: 2px;
}
.nav-switch:focus-visible,
.channel-btn:focus-visible,
.vision-btn:focus-visible,
.toggle:focus-visible,
.mini-play:focus-visible,
.term-btn:focus-visible,
.contact-btn:focus-visible,
.support-slot:focus-visible,
.return-console:focus-visible,
.onboard-ticker:focus-visible,
.crew-invite:focus-visible,
.crew-react-btn:focus-visible,
.soc-key:focus-visible,
.omni-cta:focus-visible,
.cross-link:focus-visible,
.welcome-play:focus-visible {
  outline: 2px solid #f0d78c;
  outline-offset: 3px;
}

/* After later view rules: phone player bar must stay clear of the last controls. */
@media (max-width: 900px) {
  .app,
  .app[data-view="operator"],
  .app[data-view="omnations"],
  .app[data-view="onboard"],
  .app[data-view="universes"] {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .play-btn { width: 44px; height: 44px; }
  .mini-play { width: 48px; height: 48px; }
  .vision-btn { min-height: 44px; }
}
/* Desktop nav: RITUALS made the absolute row wide enough that VISTA INMERSIVA
   covered the logo plate. Tighter gap, padding, and tracking keep every button
   on one line to the right of ART OF BOW RADIO. Type stays at least 11px.
   Phones, the 600–1023 in-flow nav, pixel mode, and the immersive dock are unchanged. */
@media (min-width: 1024px) {
  body:not(.px) .console-nav { gap: 3px; flex-wrap: nowrap; }
  body:not(.px) .console-nav .nav-switch { padding: 6px 5px; gap: 4px; }
  body:not(.px) .console-nav .op-switch-label { letter-spacing: .02em; white-space: nowrap; }
  body:not(.px) #btn-orbit.nav-orbit { padding-left: 6px; padding-right: 6px; }
  body:not(.px) #btn-orbit.nav-orbit .op-switch-label { letter-spacing: .02em; font-size: 11px; }
  body:not(.px) .console-nav .nav-icon { width: 18px; height: 18px; }
  body:not(.px) .console-nav .nav-icon svg { width: 18px; height: 18px; }
  body:not(.px) .console-nav .nav-switch.nav-lang { padding: 2px 2px; gap: 2px; }
  body:not(.px) .nav-lang .lang-opt { padding: 3px 6px; letter-spacing: .02em; }
}

/* iOS Safari zooms a focused field under 16px. A low-specificity floor;
   fields with their own size (already >= 16px) keep it. */
@media (max-width: 900px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* Installable app (pwa.js): small pill above the phone player bar, never over the logo or player */
.aob-pwa-pill{position:fixed;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:6px 6px 6px 12px;border-radius:999px;background:rgba(10,11,14,.92);border:1px solid rgba(125,211,252,.45);color:#e8f6ff;font:600 12px/1.3 system-ui,-apple-system,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.aob-pwa-pill[hidden]{display:none}
.aob-pwa-btn{background:none;border:0;color:inherit;font:inherit;padding:4px 2px;cursor:pointer}
.aob-pwa-x{background:rgba(255,255,255,.08);border:0;color:inherit;width:24px;height:24px;border-radius:50%;font:700 14px/1 system-ui;cursor:pointer}
body.orbit-on .aob-pwa-pill{display:none}

/* RX·VISION v2: POWER/FILAMENT and GAIN/COLOR TONE get air — lower, with more space between the rows
   and from VISION/SCENE/FULL. Layout only. */
.left-module .toggle-row { margin-top: clamp(22px, 3.4vh, 40px); margin-bottom: clamp(22px, 3.6vh, 44px); gap: clamp(26px, 4vw, 48px); }
.left-module .knob-row { gap: clamp(30px, 4.5vw, 56px); padding-bottom: clamp(10px, 2vh, 24px); }
.left-module .knob-label { white-space: nowrap; }

/* Idioma en la ventana del operador: discreto, sin brillo */
.op-lang{display:flex;align-items:center;gap:2px;justify-content:flex-start;margin:0 0 10px;font-size:10px;opacity:.6;transition:opacity .2s}
.op-lang:hover,.op-lang:focus-within{opacity:.9}
.op-lang .op-lang-globe{font-size:10px;line-height:1;margin-right:2px;filter:grayscale(1)}
.op-lang .lang-opt{appearance:none;background:transparent;border:1px solid transparent;border-radius:999px;color:inherit;font:inherit;letter-spacing:.08em;padding:2px 7px;cursor:pointer;box-shadow:none}
.op-lang .lang-opt.on{border-color:currentColor;background:transparent;box-shadow:none}
.op-lang .lang-opt:focus-visible{outline:1px solid currentColor;outline-offset:1px}
@media (pointer:coarse){.op-lang .lang-opt{min-height:28px;padding:4px 9px}}

/* Join the signal invite (Omnations + footer) */
.omni-invite { margin: 0 0 10px; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; color: var(--cream); }
.footer-invite { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px; border: 1px solid var(--amber); border-radius: 3px; text-decoration: none; color: var(--cream); background: rgba(255,170,60,0.06); order: -1; margin-right: auto; }
.footer-invite-q { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; letter-spacing: 0; }
.footer-invite-cta { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--amber); }
.footer-invite:hover .footer-invite-q, .footer-invite:focus-visible .footer-invite-q { color: var(--amber); }
.footer-invite:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 640px) { .footer-invite { width: 100%; align-items: center; text-align: center; margin-right: 0; } }

/* Join the signal invite inside the Contact window (web + car mode) */
.con-invite { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 4px; background: rgba(255,170,60,0.06); text-align: center; }
.con-invite-q { margin: 0 0 8px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: var(--cream); }
.con-join { width: 100%; min-height: 48px; }
body.px .con-invite-q { font-family: inherit; font-style: normal; font-size: 14px; }