/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
}

#stars-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.space {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ── Trail Canvas ────────────────────────────────────────────────────────── */

#trail-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ── Date Calculator Panel ───────────────────────────────────────────────── */

#date-panel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 10, 0, 0.88);
  border: 1px solid #00ff00;
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.5);
  padding: 10px 16px;
  z-index: 9999;
  font-family: 'Courier New', monospace;
  min-width: 360px;
}

#date-panel-title {
  color: #00ff00;
  font-size: 11px;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.6);
  border-bottom: 1px solid rgba(0, 255, 0, 0.2);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

#date-panel-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

#date-input {
  background: rgba(0, 20, 0, 0.9);
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  letter-spacing: 1px;
}

#date-input:focus {
  border-color: #00ff00;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

/* Style the date picker calendar icon */
#date-input::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(90deg);
  cursor: pointer;
}

#date-panel-btns {
  display: flex;
  gap: 6px;
}

#date-panel-btns button {
  background: transparent;
  border: 1px solid rgba(0, 255, 0, 0.5);
  color: #00cc00;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
}

#date-panel-btns button:hover {
  background: rgba(0, 255, 0, 0.12);
  border-color: #00ff00;
  color: #00ff00;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

#date-live-btn {
  border-color: rgba(0, 200, 255, 0.5) !important;
  color: #00ccff !important;
}

#date-live-btn:hover {
  background: rgba(0, 200, 255, 0.12) !important;
  border-color: #00ccff !important;
  color: #00ccff !important;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.3) !important;
}

/* ── Compare Button ─────────────────────────────────────────────────────── */

#compare-btn {
  position: fixed;
  bottom: 20px;
  right: 110px;
  background: rgba(0, 10, 0, 0.88);
  border: 1px solid rgba(0, 255, 0, 0.5);
  color: #00cc00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 8px 14px;
  cursor: pointer;
  z-index: 9998;
  transition: all 0.15s;
}

#compare-btn:hover {
  background: rgba(0, 255, 0, 0.1);
  border-color: #00ff00;
  color: #00ff00;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.3);
}

/* ── Quiz Button ────────────────────────────────────────────────────────── */

#quiz-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 10, 0, 0.88);
  border: 1px solid rgba(0, 255, 0, 0.5);
  color: #00cc00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 8px 14px;
  cursor: pointer;
  z-index: 9998;
  transition: all 0.15s;
}

#quiz-btn:hover {
  background: rgba(0, 255, 0, 0.1);
  border-color: #00ff00;
  color: #00ff00;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.3);
}

/* ── Quiz Overlay ───────────────────────────────────────────────────────── */

#quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10100;
}

/* ── Quiz Modal ─────────────────────────────────────────────────────────── */

#quiz-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10200;
  background: rgba(0, 8, 0, 0.97);
  border: 1px solid #33ff33;
  box-shadow: 0 0 30px rgba(51, 255, 51, 0.25), inset 0 0 40px rgba(51, 255, 51, 0.04);
  padding: 36px 40px 32px;
  width: min(520px, calc(100vw - 32px));
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: 'Courier New', monospace;
  color: #33ff33;
}

.quiz-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: #33ff33;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.quiz-close:hover { opacity: 1; }

.quiz-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(51, 255, 51, 0.5);
  text-transform: uppercase;
  align-self: flex-start;
}

.quiz-progress {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(51, 255, 51, 0.55);
  align-self: flex-end;
  margin-top: -10px;
}

.quiz-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(51, 255, 51, 0.15);
  border-radius: 2px;
}

.quiz-progress-fill {
  height: 100%;
  background: #33ff33;
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 6px rgba(51, 255, 51, 0.6);
}

.quiz-source {
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(51, 255, 51, 0.4);
  align-self: flex-start;
}

.quiz-statement {
  font-size: 16px;
  line-height: 1.55;
  color: #ccffcc;
  text-shadow: 0 0 10px rgba(51, 255, 51, 0.2);
  text-align: left;
  align-self: flex-start;
  min-height: 64px;
}

.quiz-actions {
  display: flex;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}

.quiz-btn {
  flex: 1;
  padding: 12px 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  border: 1px solid rgba(51, 255, 51, 0.4);
  background: rgba(51, 255, 51, 0.05);
  color: #33ff33;
  transition: all 0.15s;
}

.quiz-btn:hover {
  background: rgba(51, 255, 51, 0.12);
  border-color: #33ff33;
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.25);
}

.quiz-btn.quiz-correct {
  background: rgba(51, 255, 51, 0.2);
  border-color: #33ff33;
  box-shadow: 0 0 14px rgba(51, 255, 51, 0.5);
  color: #33ff33;
}

.quiz-btn.quiz-wrong {
  background: rgba(255, 60, 60, 0.15);
  border-color: #ff4444;
  color: #ff6666;
  box-shadow: 0 0 10px rgba(255, 60, 60, 0.3);
}

.quiz-feedback {
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 0;
}
.quiz-feedback.correct { color: #33ff33; }
.quiz-feedback.wrong   { color: #ff6666; }

/* ── Results screen ─────────────────────────────────────────────────────── */

.quiz-score-display {
  font-size: 64px;
  font-family: 'Orbitron', sans-serif;
  color: #33ff33;
  text-shadow: 0 0 24px rgba(51, 255, 51, 0.5);
  line-height: 1;
}

.quiz-score-denom {
  font-size: 28px;
  opacity: 0.5;
}

.quiz-grade {
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(51, 255, 51, 0.7);
}

.quiz-pct {
  font-size: 12px;
  color: rgba(51, 255, 51, 0.45);
  letter-spacing: 1px;
}

.quiz-divider {
  width: 100%;
  height: 1px;
  background: rgba(51, 255, 51, 0.15);
}

.quiz-next-label {
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(51, 255, 51, 0.4);
}

.quiz-countdown {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  color: #33ff33;
  text-shadow: 0 0 16px rgba(51, 255, 51, 0.4);
  letter-spacing: 4px;
}

/* ── Comparison Modal ───────────────────────────────────────────────────── */

#compare-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#compare-container {
  background: rgba(0, 8, 0, 0.97);
  border: 1px solid #00ff00;
  box-shadow: 0 0 40px rgba(0, 255, 0, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', monospace;
  overflow: hidden;
}

#compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.3);
  color: #00ff00;
  font-size: 13px;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
  flex-shrink: 0;
}

#compare-close {
  background: transparent;
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: #00cc00;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 14px;
  transition: all 0.15s;
}

#compare-close:hover {
  background: rgba(255, 0, 0, 0.15);
  border-color: #ff4444;
  color: #ff4444;
}

#compare-columns {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

.compare-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  gap: 12px;
}

.compare-col:first-child {
  border-right: 1px solid rgba(0, 255, 0, 0.15);
}

#compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: rgba(0, 255, 0, 0.4);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: bold;
  flex-shrink: 0;
}

.compare-select {
  background: rgba(0, 20, 0, 0.9);
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 6px 8px;
  outline: none;
  cursor: pointer;
  width: 100%;
  flex-shrink: 0;
}

.compare-select:focus {
  border-color: #00ff00;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

.compare-select option,
.compare-select optgroup {
  background: #001200;
  color: #00cc00;
}

/* Card inside each column */
.compare-card {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

/* Scrollbar for compare-card */
.compare-card::-webkit-scrollbar { width: 4px; }
.compare-card::-webkit-scrollbar-track { background: transparent; }
.compare-card::-webkit-scrollbar-thumb { background: rgba(0, 255, 0, 0.3); border-radius: 2px; }

.compare-empty {
  color: rgba(0, 255, 0, 0.3);
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 40px;
}

/* Size orb */
.compare-orb-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.compare-orb {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 255, 0, 0.8), rgba(0, 100, 0, 0.5) 60%, rgba(0, 30, 0, 0.2));
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 255, 0, 0.15);
}

.compare-name {
  color: #00ff00;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
  text-align: center;
}

.compare-subtitle {
  color: rgba(0, 200, 0, 0.7);
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
  margin-top: -6px;
}

.compare-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(0, 255, 0, 0.15);
  padding-top: 8px;
}

.compare-row {
  display: flex;
  gap: 8px;
  font-size: 10px;
  line-height: 1.5;
}

.compare-label {
  color: rgba(0, 200, 0, 0.55);
  letter-spacing: 1px;
  min-width: 110px;
  flex-shrink: 0;
}

.compare-value {
  color: #00cc00;
  letter-spacing: 0.5px;
  word-break: break-word;
}

.compare-facts-title {
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(0, 255, 0, 0.4);
  border-top: 1px solid rgba(0, 255, 0, 0.15);
  padding-top: 8px;
  margin-top: 4px;
}

.compare-facts {
  margin: 0;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compare-facts li {
  color: rgba(0, 200, 0, 0.7);
  font-size: 10px;
  line-height: 1.5;
}

/* ── Speed HUD ───────────────────────────────────────────────────────────── */

#speed-hud {
  position: fixed;
  top: 15px;
  left: 15px;
  font-family: 'Courier New', monospace;
  color: #00ff00;
  font-size: 16px;
  z-index: 10000;
  pointer-events: none;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  letter-spacing: 2px;
}

#speed-controls {
  position: fixed;
  top: 40px;
  left: 15px;
  z-index: 10000;
  display: flex;
  gap: 5px;
}

#speed-controls button {
  background: transparent;
  border: 1px solid #00ff00;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#speed-controls button:hover {
  background: #00ff00;
  color: #000;
  box-shadow: 0 0 10px #00ff00;
}

/* ── Scene Switcher ──────────────────────────────────────────────────────── */

#scene-switcher {
  position: fixed;
  top: 80px;
  left: 15px;
  z-index: 10000;
  display: flex;
  gap: 5px;
}

#scene-switcher .scene-btn {
  background: transparent;
  border: 1px solid #00ff00;
  color: #00ff00;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#scene-switcher .scene-btn:hover {
  background: rgba(0, 255, 0, 0.2);
  box-shadow: 0 0 10px #00ff00;
}

#scene-switcher .scene-btn.active {
  background: #00ff00;
  color: #000;
  box-shadow: 0 0 15px #00ff00;
}

/* ── Scene Backgrounds ──────────────────────────────────────────────────── */

.bg-nebula {
  background: radial-gradient(ellipse at 20% 80%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(75, 0, 130, 0.2) 0%, transparent 50%),
              radial-gradient(circle at center, #0a0a1a 0%, #000005 100%);
}

.bg-deep {
  background: radial-gradient(circle at 30% 70%, rgba(25, 25, 112, 0.2) 0%, transparent 40%),
              radial-gradient(circle at 70% 30%, rgba(72, 61, 139, 0.15) 0%, transparent 40%),
              radial-gradient(circle at center, #050510 0%, #000000 100%);
}

.bg-stars {
  background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
}

/* ── Command Center ─────────────────────────────────────────────────────── */


/* ── Physics-positioned bodies — all absolute, driven by JS transform ──── */

.sun, .mercury, .venus, .earth, .mars, .jupiter, .saturn,
.uranus, .neptune, .pluto,
.satellite {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  pointer-events: auto !important;
  z-index: 999;
  cursor: pointer;
}

/* ── Sun ─────────────────────────────────────────────────────────────────── */

.sun {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffcc00, #ff8800);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 204, 0, 0.5);
  z-index: 100;
}

/* ── Planets ─────────────────────────────────────────────────────────────── */

.mercury {
  width: 12px;
  height: 12px;
  background: #a5a5a5;
  border-radius: 50%;
}

.venus {
  width: 22px;
  height: 22px;
  background: #e3bb76;
  border-radius: 50%;
}

.earth {
  width: 25px;
  height: 25px;
  background: #2b82c9;
  border-radius: 50%;
}

.mars {
  width: 18px;
  height: 18px;
  background: #e27b58;
  border-radius: 50%;
}

.jupiter {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #d39c7e, #6b4d3c);
  border-radius: 50%;
}

.saturn {
  width: 45px;
  height: 45px;
  background: #c5ab6e;
  border-radius: 50%;
}

.uranus {
  width: 30px;
  height: 30px;
  background: #b3d1d1;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(179, 209, 209, 0.3);
}

.neptune {
  width: 30px;
  height: 30px;
  background: #6081ff;
  border-radius: 50%;
}

.pluto {
  width: 10px;
  height: 10px;
  background: #7f7f7f;
  border-radius: 50%;
  z-index: 1001;
}

/* ── Rings (children of planet divs — move with parent automatically) ──── */

.jupiter-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(80deg);
  pointer-events: none;
}

.saturn-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 20px;
  border: 4px solid rgba(197, 171, 110, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  pointer-events: none;
}

.uranus-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 25px;
  border: 1px solid rgba(179, 209, 209, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  pointer-events: none;
}

.neptune-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 12px;
  border: 1px solid rgba(96, 129, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(80deg);
  pointer-events: none;
}

/* ── Satellites / Moons ──────────────────────────────────────────────────── */

.satellite {
  border-radius: 50%;
}

.moon {
  width: 6px;
  height: 6px;
  background: #ddd;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.phobos {
  width: 3px;
  height: 3px;
  background: #9d8e87;
}

.deimos {
  width: 2px;
  height: 2px;
  background: #9d8e87;
}

.io {
  width: 4px;
  height: 4px;
  background: #f9e231;
}

.europa {
  width: 3.5px;
  height: 3.5px;
  background: #fdf5e6;
}

.ganymede {
  width: 5px;
  height: 5px;
  background: #95877c;
}

.titan {
  width: 6px;
  height: 6px;
  background: #e3bb76;
}

.titania {
  width: 3px;
  height: 3px;
  background: #dcdcdc;
}

.triton {
  width: 4px;
  height: 4px;
  background: #d2f8f8;
}

.charon {
  width: 2px;
  height: 2px;
  background: #a5a5a5;
}

/* ── Asteroid Belt (CSS-only, unchanged) ─────────────────────────────────── */

.asteroid-belt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 470px;
  height: 470px;
  border-radius: 50%;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease;
}

.asteroid-belt:hover {
  filter: brightness(1.3);
}

.asteroid-belt::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(180, 175, 165, 0.8);
  animation: asteroidDrift 120s linear infinite;
  box-shadow:
    205px 8px 0 1px rgba(160,155,145,0.7),
    -203px 20px 0 2px rgba(150,145,140,0.8),
    50px 199px 0 1px rgba(170,165,155,0.6),
    -60px -196px 0 1px rgba(145,140,135,0.7),
    178px 103px 0 2px rgba(155,150,140,0.8),
    -178px -103px 0 1px rgba(165,160,150,0.6),
    103px -178px 0 1px rgba(150,145,140,0.7),
    -103px 178px 0 2px rgba(160,155,145,0.8),
    145px 145px 0 1px rgba(170,165,155,0.6),
    -145px -145px 0 1px rgba(145,140,135,0.7),
    210px -12px 0 1px rgba(155,150,140,0.8),
    -208px -30px 0 2px rgba(165,160,150,0.6),
    35px 207px 0 1px rgba(150,145,140,0.7),
    -42px -207px 0 1px rgba(160,155,145,0.8),
    182px 105px 0 2px rgba(170,165,155,0.6),
    -182px 105px 0 1px rgba(145,140,135,0.7),
    105px 182px 0 1px rgba(155,150,140,0.8),
    -105px -182px 0 2px rgba(165,160,150,0.6),
    148px -148px 0 1px rgba(150,145,140,0.7),
    -148px 148px 0 1px rgba(160,155,145,0.8),
    215px 15px 0 2px rgba(170,165,155,0.6),
    -213px 25px 0 1px rgba(145,140,135,0.7),
    70px 204px 0 1px rgba(155,150,140,0.8),
    -75px -202px 0 2px rgba(165,160,150,0.6),
    186px -108px 0 1px rgba(150,145,140,0.7),
    -186px -108px 0 1px rgba(160,155,145,0.8),
    108px -186px 0 2px rgba(170,165,155,0.6),
    -108px 186px 0 1px rgba(145,140,135,0.7),
    152px 152px 0 1px rgba(155,150,140,0.8),
    -152px -152px 0 2px rgba(165,160,150,0.6),
    220px -8px 0 1px rgba(150,145,140,0.7),
    -218px -35px 0 1px rgba(160,155,145,0.8),
    25px 219px 0 2px rgba(170,165,155,0.6),
    -30px -219px 0 1px rgba(145,140,135,0.7),
    191px 110px 0 1px rgba(155,150,140,0.8),
    -191px 110px 0 2px rgba(165,160,150,0.6),
    110px -191px 0 1px rgba(150,145,140,0.7),
    -110px 191px 0 1px rgba(160,155,145,0.8),
    156px -156px 0 2px rgba(170,165,155,0.6),
    -156px 156px 0 1px rgba(145,140,135,0.7),
    225px 10px 0 1px rgba(155,150,140,0.8),
    -223px -18px 0 2px rgba(165,160,150,0.6),
    55px 218px 0 1px rgba(150,145,140,0.7),
    -60px -218px 0 1px rgba(160,155,145,0.8),
    195px -113px 0 2px rgba(170,165,155,0.6),
    -195px -113px 0 1px rgba(145,140,135,0.7),
    113px 195px 0 1px rgba(155,150,140,0.8),
    -113px -195px 0 2px rgba(165,160,150,0.6),
    159px 159px 0 1px rgba(150,145,140,0.7),
    -159px -159px 0 1px rgba(160,155,145,0.8),
    230px -5px 0 2px rgba(170,165,155,0.6),
    -228px 22px 0 1px rgba(145,140,135,0.7),
    40px 227px 0 1px rgba(155,150,140,0.8),
    -45px -227px 0 2px rgba(165,160,150,0.6),
    199px 115px 0 1px rgba(150,145,140,0.7),
    -199px -115px 0 1px rgba(160,155,145,0.8),
    115px -199px 0 2px rgba(170,165,155,0.6),
    -115px 199px 0 1px rgba(145,140,135,0.7),
    163px -163px 0 1px rgba(155,150,140,0.8),
    -163px 163px 0 2px rgba(165,160,150,0.6),
    235px 5px 0 1px rgba(150,145,140,0.7),
    -233px -15px 0 1px rgba(160,155,145,0.8),
    15px 234px 0 2px rgba(170,165,155,0.6),
    -20px -234px 0 1px rgba(145,140,135,0.7),
    204px -118px 0 1px rgba(155,150,140,0.8),
    -204px 118px 0 2px rgba(165,160,150,0.6),
    118px 204px 0 1px rgba(150,145,140,0.7),
    -118px -204px 0 1px rgba(160,155,145,0.8),
    166px 166px 0 2px rgba(170,165,155,0.6),
    -166px -166px 0 1px rgba(145,140,135,0.7),
    207px 40px 0 1px rgba(155,150,140,0.8),
    -210px -50px 0 2px rgba(165,160,150,0.6),
    85px 198px 0 1px rgba(150,145,140,0.7),
    -90px -200px 0 1px rgba(160,155,145,0.8),
    175px -120px 0 2px rgba(170,165,155,0.6),
    -175px 120px 0 1px rgba(145,140,135,0.7),
    120px -175px 0 1px rgba(155,150,140,0.8),
    -120px 175px 0 2px rgba(165,160,150,0.6),
    220px 50px 0 1px rgba(150,145,140,0.7),
    -218px -55px 0 1px rgba(160,155,145,0.8),
    200px -80px 0 2px rgba(170,165,155,0.6),
    -200px 80px 0 1px rgba(145,140,135,0.7),
    80px -210px 0 1px rgba(155,150,140,0.8),
    -80px 210px 0 2px rgba(165,160,150,0.6),
    225px -40px 0 1px rgba(150,145,140,0.7),
    -225px 35px 0 1px rgba(160,155,145,0.8),
    190px 95px 0 2px rgba(170,165,155,0.6),
    -190px -95px 0 1px rgba(145,140,135,0.7),
    95px 210px 0 1px rgba(155,150,140,0.8),
    -95px -210px 0 2px rgba(165,160,150,0.6);
}

.asteroid-belt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(170, 165, 155, 0.7);
  animation: asteroidDrift2 90s linear infinite;
  pointer-events: none;
  box-shadow:
    210px 5px 0 1px rgba(180,175,165,0.7),
    -208px 25px 0 1px rgba(170,165,155,0.8),
    55px 203px 0 2px rgba(175,170,160,0.6),
    -65px -207px 0 1px rgba(165,160,150,0.7),
    182px 105px 0 1px rgba(180,175,165,0.8),
    -182px -105px 0 2px rgba(170,165,155,0.6),
    105px -182px 0 1px rgba(175,170,160,0.7),
    -105px 182px 0 1px rgba(165,160,150,0.8),
    148px 148px 0 2px rgba(180,175,165,0.6),
    -148px -148px 0 1px rgba(170,165,155,0.7),
    215px -10px 0 1px rgba(175,170,160,0.8),
    -213px -30px 0 2px rgba(165,160,150,0.6),
    30px 213px 0 1px rgba(180,175,165,0.7),
    -40px -213px 0 1px rgba(170,165,155,0.8),
    186px 108px 0 2px rgba(175,170,160,0.6),
    -186px 108px 0 1px rgba(165,160,150,0.7),
    108px 186px 0 1px rgba(180,175,165,0.8),
    -108px -186px 0 2px rgba(170,165,155,0.6),
    152px -152px 0 1px rgba(175,170,160,0.7),
    -152px 152px 0 1px rgba(165,160,150,0.8),
    220px 15px 0 2px rgba(180,175,165,0.6),
    -218px 35px 0 1px rgba(170,165,155,0.7),
    80px 205px 0 1px rgba(175,170,160,0.8),
    -85px -205px 0 2px rgba(165,160,150,0.6),
    191px -110px 0 1px rgba(180,175,165,0.7),
    -191px -110px 0 1px rgba(170,165,155,0.8),
    110px -191px 0 2px rgba(175,170,160,0.6),
    -110px 191px 0 1px rgba(165,160,150,0.7),
    156px 156px 0 1px rgba(180,175,165,0.8),
    -156px -156px 0 2px rgba(170,165,155,0.6),
    225px -8px 0 1px rgba(175,170,160,0.7),
    -223px -20px 0 1px rgba(165,160,150,0.8),
    20px 224px 0 2px rgba(180,175,165,0.6),
    -25px -224px 0 1px rgba(170,165,155,0.7),
    195px 113px 0 1px rgba(175,170,160,0.8),
    -195px 113px 0 2px rgba(165,160,150,0.6),
    113px -195px 0 1px rgba(180,175,165,0.7),
    -113px 195px 0 1px rgba(170,165,155,0.8),
    160px -160px 0 2px rgba(175,170,160,0.6),
    -160px 160px 0 1px rgba(165,160,150,0.7),
    230px 10px 0 1px rgba(180,175,165,0.8),
    -228px -25px 0 2px rgba(170,165,155,0.6),
    60px 222px 0 1px rgba(175,170,160,0.7),
    -70px -220px 0 1px rgba(165,160,150,0.8),
    199px -115px 0 2px rgba(180,175,165,0.6),
    -199px 115px 0 1px rgba(170,165,155,0.7),
    115px 199px 0 1px rgba(175,170,160,0.8),
    -115px -199px 0 2px rgba(165,160,150,0.6),
    163px 163px 0 1px rgba(180,175,165,0.7),
    -163px -163px 0 1px rgba(170,165,155,0.8),
    235px -5px 0 2px rgba(175,170,160,0.6),
    -233px 15px 0 1px rgba(165,160,150,0.7),
    45px 231px 0 1px rgba(180,175,165,0.8),
    -50px -231px 0 2px rgba(170,165,155,0.6),
    204px 118px 0 1px rgba(175,170,160,0.7),
    -204px -118px 0 1px rgba(165,160,150,0.8),
    118px -204px 0 2px rgba(180,175,165,0.6),
    -118px 204px 0 1px rgba(170,165,155,0.7),
    166px -166px 0 1px rgba(175,170,160,0.8),
    -166px 166px 0 2px rgba(165,160,150,0.6),
    207px 40px 0 1px rgba(180,175,165,0.7),
    -210px -50px 0 1px rgba(170,165,155,0.8),
    130px 175px 0 2px rgba(175,170,160,0.6),
    -135px -170px 0 1px rgba(165,160,150,0.7),
    175px -130px 0 1px rgba(180,175,165,0.8),
    -175px 130px 0 2px rgba(170,165,155,0.6),
    90px -205px 0 1px rgba(175,170,160,0.7),
    -95px 205px 0 1px rgba(165,160,150,0.8),
    220px -55px 0 2px rgba(180,175,165,0.6),
    -222px 45px 0 1px rgba(170,165,155,0.7),
    140px -185px 0 1px rgba(175,170,160,0.8),
    -145px 185px 0 2px rgba(165,160,150,0.6),
    185px 140px 0 1px rgba(180,175,165,0.7),
    -185px -140px 0 1px rgba(170,165,155,0.8),
    225px 50px 0 2px rgba(175,170,160,0.6),
    -225px -45px 0 1px rgba(165,160,150,0.7),
    100px 200px 0 1px rgba(180,175,165,0.8),
    -100px -200px 0 2px rgba(170,165,155,0.6);
}

@keyframes asteroidDrift {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes asteroidDrift2 {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Asteroid belt responsive */
@media (max-width: 1024px) {
  .asteroid-belt::before {
    box-shadow:
      210px 15px 0 2px rgba(140,140,140,0.6),
      -215px 25px 0 2px rgba(130,130,130,0.7),
      85px 200px 0 2px rgba(145,145,145,0.5),
      -95px -205px 0 2px rgba(135,135,135,0.8),
      220px -35px 0 2px rgba(150,150,150,0.6),
      -200px 95px 0 2px rgba(140,140,140,0.7),
      225px 65px 0 2px rgba(130,130,130,0.7),
      -185px 135px 0 2px rgba(140,140,140,0.6),
      230px -55px 0 2px rgba(135,135,135,0.7),
      -225px -75px 0 2px rgba(150,150,150,0.6),
      175px 165px 0 2px rgba(140,140,140,0.6),
      -205px -125px 0 2px rgba(145,145,145,0.5),
      225px 95px 0 2px rgba(130,130,130,0.6),
      -215px -105px 0 2px rgba(155,155,155,0.5),
      135px -220px 0 2px rgba(135,135,135,0.6);
  }
}

@media (max-width: 768px) {
  .asteroid-belt {
    opacity: 0.6;
  }
  .asteroid-belt::before {
    box-shadow:
      210px 15px 0 3px rgba(140,140,140,0.7),
      -215px 25px 0 3px rgba(130,130,130,0.8),
      85px 200px 0 3px rgba(145,145,145,0.6),
      -95px -205px 0 3px rgba(135,135,135,0.9),
      220px -35px 0 3px rgba(150,150,150,0.7),
      -200px 95px 0 3px rgba(140,140,140,0.8),
      225px 65px 0 3px rgba(130,130,130,0.7);
    animation-duration: 180s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asteroid-belt::before {
    animation: none;
  }
}

/* ── Responsive Scaling ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .space { transform: translate(-50%, -50%) scale(0.7); }
}

@media (max-width: 768px) {
  .space { transform: translate(-50%, -50%) scale(0.5); }
  .asteroid-belt { opacity: 0.7; }
}

@media (max-width: 480px) {
  .space { transform: translate(-50%, -50%) scale(0.35); }
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */

#planet-info {
  position: fixed !important;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #00d4ff;
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: scale(0.8);
  font-family: 'Orbitron', sans-serif;
  max-width: 270px;
  width: max-content;
}

#planet-info.show {
  opacity: 1;
  transform: scale(1);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

#modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(5px);
  z-index: 9998;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#planet-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  animation: terminalBoot 0.5s ease;
}

@keyframes terminalBoot {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); filter: blur(10px); }
  50%  { opacity: 0.5; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

.modal-container {
  position: relative;
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  background: #000;
  border: 3px solid #00ff00;
  border-radius: 0;
  padding: 30px;
  box-shadow:
    0 0 20px rgba(0, 255, 0, 0.5),
    0 0 40px rgba(0, 255, 0, 0.3),
    inset 0 0 50px rgba(0, 255, 0, 0.05);
  font-family: 'Courier New', monospace;
  color: #00ff00;
  animation: screenFlicker 0.1s infinite;
}

@keyframes screenFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.98; }
}

.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  opacity: 0.5;
  z-index: 10;
}

.hologram-effect {
  display: none;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #000;
  border: 2px solid #00ff00;
  color: #00ff00;
  font-size: 20px;
  font-family: 'Courier New', monospace;
  width: 35px;
  height: 35px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 20;
}

.close-btn:hover {
  background: #00ff00;
  color: #000;
  box-shadow: 0 0 15px #00ff00;
}

.terminal-container {
  position: relative;
  z-index: 5;
  line-height: 1.8;
}

.terminal-line {
  font-size: 14px;
  color: #00ff00;
  text-shadow:
    0 0 5px rgba(0, 255, 0, 0.8),
    0 0 10px rgba(0, 255, 0, 0.4);
  margin: 2px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
}

.cursor {
  display: inline-block;
  background: #00ff00;
  color: #000;
  animation: cursorBlink 0.7s infinite;
  margin-left: 2px;
}

@keyframes cursorBlink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-line:first-child,
.terminal-line:nth-child(2) {
  color: #00cc00;
  font-weight: bold;
}

.terminal-line:nth-child(4) {
  font-size: 24px;
  color: #00ff00;
  text-shadow:
    0 0 10px rgba(0, 255, 0, 1),
    0 0 20px rgba(0, 255, 0, 0.5);
  margin: 10px 0;
}

.terminal-line:nth-child(5) {
  font-style: italic;
  color: #00cc00;
  margin-bottom: 10px;
}

.modal-container::-webkit-scrollbar {
  width: 10px;
}

.modal-container::-webkit-scrollbar-track {
  background: #000;
  border: 1px solid #00ff00;
}

.modal-container::-webkit-scrollbar-thumb {
  background: #00ff00;
  border: 1px solid #000;
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background: #00cc00;
  box-shadow: 0 0 10px #00ff00;
}

.modal-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 15;
}

@keyframes blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Modal responsive */
@media (max-width: 768px) {
  .modal-container {
    width: 95vw;
    max-width: none;
    padding: 20px;
    font-size: 16px;
  }
  .terminal-line {
    font-size: 16px;
    line-height: 1.6;
  }
  .terminal-line:nth-child(4) {
    font-size: 22px;
  }
}

/* ── Scene-Specific Body Styles ─────────────────────────────────────────── */

/* Scene body base — must match solar bodies: top:0; left:0 so JS transform
   translate(cx+x, cy+y) places correctly without double-offset */
.scene-body {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
}

/* Sirius A - Blue-white main sequence star */
.sirius-a {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 30% 30%, #e0f0ff, #aaccff 40%, #7799cc 100%);
  box-shadow:
    0 0 60px rgba(170, 204, 255, 0.8),
    0 0 120px rgba(170, 204, 255, 0.4),
    inset -10px -10px 20px rgba(0, 0, 0, 0.3);
}

/* Sirius B - White dwarf (small, hot, dense) */
.sirius-b {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #f0f0f0 50%, #dddddd 100%);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(255, 255, 255, 0.5),
    0 0 60px rgba(255, 255, 255, 0.3);
}

/* ── Spacecraft Trajectories scene ──────────────────────── */

/* Sun reference point — dim, small */
.spacecraft-sun {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 35% 35%, #fffacc, #ffcc44 50%, #cc9900 100%);
  box-shadow:
    0 0 16px rgba(255, 204, 68, 0.7),
    0 0 40px rgba(255, 204, 68, 0.3);
}

/* Shared spacecraft style — small rectangle, not circular */
.voyager-1,
.voyager-2,
.new-horizons,
.pioneer-10,
.pioneer-11 {
  width: 10px;
  height: 5px;
  border-radius: 2px;
  overflow: visible; /* so ::before trajectory line shows */
}

/* Trajectory line shared rules */
.voyager-1::before,
.voyager-2::before,
.new-horizons::before,
.pioneer-10::before,
.pioneer-11::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  transform-origin: left center;
  pointer-events: none;
  animation: trajectoryPulse 4s ease-in-out infinite;
}

@keyframes trajectoryPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Voyager 1 — blue, upper-right (310, -150), angle 154°, 344px */
.voyager-1 {
  background: #88aaff;
  box-shadow: 0 0 10px rgba(136, 170, 255, 0.9), 0 0 22px rgba(136, 170, 255, 0.5);
}
.voyager-1::before {
  width: 344px;
  background: linear-gradient(to right, rgba(136, 170, 255, 0.7), transparent);
  transform: translateY(-50%) rotate(154deg);
}

/* Voyager 2 — gold, lower-left (-210, 210), angle 315°, 297px */
.voyager-2 {
  background: #ffaa44;
  box-shadow: 0 0 10px rgba(255, 170, 68, 0.9), 0 0 22px rgba(255, 170, 68, 0.5);
}
.voyager-2::before {
  width: 297px;
  background: linear-gradient(to right, rgba(255, 170, 68, 0.7), transparent);
  transform: translateY(-50%) rotate(315deg);
}

/* New Horizons — teal, upper-center (110, -265), angle 113°, 287px */
.new-horizons {
  background: #44ccaa;
  box-shadow: 0 0 10px rgba(68, 204, 170, 0.9), 0 0 22px rgba(68, 204, 170, 0.5);
}
.new-horizons::before {
  width: 287px;
  background: linear-gradient(to right, rgba(68, 204, 170, 0.7), transparent);
  transform: translateY(-50%) rotate(113deg);
}

/* Pioneer 10 — yellow, upper-left (-260, -110), angle 23°, 282px */
.pioneer-10 {
  background: #ffee55;
  box-shadow: 0 0 10px rgba(255, 238, 85, 0.9), 0 0 22px rgba(255, 238, 85, 0.5);
}
.pioneer-10::before {
  width: 282px;
  background: linear-gradient(to right, rgba(255, 238, 85, 0.7), transparent);
  transform: translateY(-50%) rotate(23deg);
}

/* Pioneer 11 — purple, lower-center (-25, 270), angle 275°, 271px */
.pioneer-11 {
  background: #cc88ff;
  box-shadow: 0 0 10px rgba(204, 136, 255, 0.9), 0 0 22px rgba(204, 136, 255, 0.5);
}
.pioneer-11::before {
  width: 271px;
  background: linear-gradient(to right, rgba(204, 136, 255, 0.7), transparent);
  transform: translateY(-50%) rotate(275deg);
}

/* ── Kuiper Belt scene ───────────────────────────────────── */

/* Kuiper Belt ring — sparse icy particles around center */
.kuiper-belt-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  /* Sparse ring of dots at ~195px, scattered ±40px */
  box-shadow:
    191px 0 0 1px rgba(180,200,220,0.35),
    -193px 2px 0 1px rgba(180,200,220,0.25),
    0 195px 0 1px rgba(180,200,220,0.3),
    1px -192px 0 1px rgba(180,200,220,0.25),
    136px 140px 0 1px rgba(180,200,220,0.3),
    -138px -143px 0 1px rgba(180,200,220,0.2),
    -140px 138px 0 1px rgba(180,200,220,0.25),
    143px -135px 0 1px rgba(180,200,220,0.3),
    185px 55px 0 1px rgba(180,200,220,0.2),
    -188px -52px 0 1px rgba(180,200,220,0.25),
    55px 188px 0 1px rgba(180,200,220,0.3),
    -57px -186px 0 1px rgba(180,200,220,0.2),
    175px -85px 0 1px rgba(180,200,220,0.25),
    -177px 83px 0 1px rgba(180,200,220,0.2),
    85px -178px 0 1px rgba(180,200,220,0.3),
    -83px 180px 0 1px rgba(180,200,220,0.25),
    200px 20px 0 1px rgba(180,200,220,0.2),
    -198px -22px 0 1px rgba(180,200,220,0.15),
    22px 199px 0 1px rgba(180,200,220,0.2),
    -24px -200px 0 1px rgba(180,200,220,0.25),
    160px 108px 0 1px rgba(180,200,220,0.2),
    -162px -106px 0 1px rgba(180,200,220,0.15),
    -108px 162px 0 1px rgba(180,200,220,0.2),
    110px -160px 0 1px rgba(180,200,220,0.25);
  pointer-events: none;
  z-index: 1;
}

/* Dim Sun reference in Kuiper Belt scene */
.kuiper-sun {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #fff5cc, #ffcc44 50%, #cc9900 100%);
  box-shadow:
    0 0 15px rgba(255, 204, 68, 0.6),
    0 0 35px rgba(255, 204, 68, 0.3);
}

/* Pluto (Kuiper Belt variant) */
.pluto-kb {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #e0cdb0, #c4a882 50%, #a08860 100%);
  box-shadow: 0 0 8px rgba(196, 168, 130, 0.5);
}

/* Charon (Kuiper Belt variant — slightly blue-grey) */
.charon-kb {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #c0c0cc, #a0a0b0 50%, #808090 100%);
  box-shadow: 0 0 6px rgba(160, 160, 176, 0.4);
}

/* Haumea — bright white, slightly elongated appearance */
.haumea {
  width: 18px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #e8e0cc 50%, #ccbba0 100%);
  box-shadow:
    0 0 10px rgba(232, 224, 204, 0.6),
    0 0 22px rgba(232, 224, 204, 0.3);
}

/* Makemake — reddish-brown methane ice surface */
.makemake {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #ddaa88, #c08060 50%, #9a5c3a 100%);
  box-shadow: 0 0 8px rgba(192, 128, 96, 0.5);
}

/* Eris — bright greyish-white (methane frost) */
.eris {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #f0ece4, #d8d0c8 50%, #b8b0a8 100%);
  box-shadow:
    0 0 10px rgba(216, 208, 200, 0.6),
    0 0 22px rgba(216, 208, 200, 0.3);
}

/* Sedna — deep crimson, most distant */
.sedna {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #ee7755, #cc4422 50%, #992200 100%);
  box-shadow:
    0 0 10px rgba(204, 68, 34, 0.6),
    0 0 22px rgba(204, 68, 34, 0.3);
}

/* ── Red Dwarfs scene ────────────────────────────────────── */

/* Proxima Centauri - nearest star, M5.5 ultra-cool red dwarf */
.proxima-centauri {
  width: 36px;
  height: 36px;
  background: radial-gradient(circle at 30% 30%, #ff8866, #ff4422 45%, #cc2200 100%);
  box-shadow:
    0 0 30px rgba(255, 68, 34, 0.8),
    0 0 70px rgba(255, 68, 34, 0.4),
    inset -4px -4px 10px rgba(0, 0, 0, 0.4);
}

/* Proxima b - rocky, potentially habitable (muted blue-grey) */
.proxima-b {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #99bbcc, #6699aa 50%, #446688 100%);
  box-shadow: 0 0 10px rgba(102, 153, 170, 0.6);
}

/* Proxima c - cold super-Earth (deep blue) */
.proxima-c {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, #8899cc, #5577aa 50%, #334488 100%);
  box-shadow: 0 0 10px rgba(85, 119, 170, 0.5);
}

/* Proxima d - tiny sub-Earth (warm rocky, inner orbit) */
.proxima-d {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, #ddaa88, #cc8855 50%, #aa6633 100%);
  box-shadow: 0 0 6px rgba(204, 136, 85, 0.6);
}

/* Barnard's Star - M4 red dwarf, slightly smaller than Proxima */
.barnard-star {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 30% 30%, #ff7755, #ff3300 45%, #aa1100 100%);
  box-shadow:
    0 0 24px rgba(255, 51, 0, 0.8),
    0 0 55px rgba(255, 51, 0, 0.35),
    inset -4px -4px 8px rgba(0, 0, 0, 0.4);
}

/* Barnard's Star b - cold dark super-Earth candidate */
.barnard-planet {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #889aaa, #557788 50%, #334455 100%);
  box-shadow: 0 0 8px rgba(85, 119, 136, 0.5);
}

/* Wolf 359 - M6 ultra-cool, smallest of the three, deep crimson */
.wolf-359 {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, #ff5533, #cc2200 45%, #881100 100%);
  box-shadow:
    0 0 18px rgba(204, 34, 0, 0.8),
    0 0 42px rgba(204, 34, 0, 0.35),
    inset -3px -3px 8px rgba(0, 0, 0, 0.5);
}

/* ── White Dwarfs scene ───────────────────────────────────── */

/* 40 Eridani A - K-type orange dwarf */
.forty-eridani-a {
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at 30% 30%, #ffddaa, #ffaa66 40%, #cc7733 100%);
  box-shadow:
    0 0 40px rgba(255, 170, 102, 0.7),
    0 0 80px rgba(255, 170, 102, 0.3),
    inset -8px -8px 16px rgba(0, 0, 0, 0.3);
}

/* 40 Eridani B - Hot white dwarf (~16,500°C, blue-white tinge) */
.forty-eridani-b {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #eef4ff 50%, #ccddff 100%);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.95),
    0 0 32px rgba(200, 220, 255, 0.6),
    0 0 56px rgba(200, 220, 255, 0.3);
}

/* Procyon A - F-type yellow-white subgiant */
.procyon-a {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, #fffbe8, #ffeebb 40%, #ddcc88 100%);
  box-shadow:
    0 0 50px rgba(255, 238, 187, 0.7),
    0 0 100px rgba(255, 238, 187, 0.3),
    inset -10px -10px 20px rgba(0, 0, 0, 0.3);
}

/* Procyon B - Cooler white dwarf (~7,740°C, pure white) */
.procyon-b {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #f5f5f5 50%, #e0e0e0 100%);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 28px rgba(255, 255, 255, 0.5),
    0 0 48px rgba(255, 255, 255, 0.2);
}

/* Vela Pulsar - Rotating neutron star with beams */
.vela-pulsar {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 40% 40%, #88ccff, #44aaff 50%, #2288cc 100%);
  box-shadow:
    0 0 30px rgba(68, 170, 255, 0.8),
    0 0 60px rgba(68, 170, 255, 0.4);
  animation: pulse 0.0893s infinite;
}

.vela-pulsar::before,
.vela-pulsar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(68, 170, 255, 0.8), transparent);
  transform-origin: center;
  animation: pulsarBeam 0.0893s infinite;
}

.vela-pulsar::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.vela-pulsar::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    box-shadow: 0 0 30px rgba(68, 170, 255, 0.8), 0 0 60px rgba(68, 170, 255, 0.4);
  }
  50% { 
    opacity: 0.7; 
    box-shadow: 0 0 50px rgba(68, 170, 255, 1), 0 0 100px rgba(68, 170, 255, 0.6);
  }
}

@keyframes pulsarBeam {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Sagittarius A* - Supermassive black hole with accretion disk */
.sagittarius-a {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #000000 30%, #1a0500 50%, #330a00 100%);
  box-shadow:
    0 0 0 2px rgba(255, 100, 0, 0.3),
    0 0 0 10px rgba(255, 100, 0, 0.1),
    inset 0 0 40px rgba(255, 50, 0, 0.2);
}

.sagittarius-a .accretion-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255, 150, 50, 0.1),
    rgba(255, 100, 0, 0.3),
    rgba(255, 80, 0, 0.4),
    rgba(255, 150, 50, 0.1),
    transparent
  );
  animation: diskRotate 20s linear infinite;
  pointer-events: none;
}

@keyframes diskRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* TRAPPIST-1 - Red dwarf star */
.trappist-1 {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #ffaa88, #ff6644 40%, #cc4422 100%);
  box-shadow:
    0 0 40px rgba(255, 100, 68, 0.8),
    0 0 80px rgba(255, 100, 68, 0.4),
    inset -8px -8px 16px rgba(0, 0, 0, 0.3);
  animation: redDwarfGlow 4s ease-in-out infinite;
}

@keyframes redDwarfGlow {
  0%, 100% { 
    box-shadow: 0 0 40px rgba(255, 100, 68, 0.8), 0 0 80px rgba(255, 100, 68, 0.4);
  }
  50% { 
    box-shadow: 0 0 50px rgba(255, 100, 68, 1), 0 0 100px rgba(255, 100, 68, 0.6);
  }
}

/* TRAPPIST-1b - Hot rocky planet */
.trappist-1b {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #ddaa88, #cc8866 50%, #aa6644 100%);
  box-shadow: 0 0 10px rgba(204, 136, 102, 0.5);
}

/* TRAPPIST-1e - Potentially habitable (greenish) */
.trappist-1e {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle at 30% 30%, #88ccaa, #66aa88 50%, #448866 100%);
  box-shadow: 0 0 10px rgba(102, 170, 136, 0.5);
}

/* TRAPPIST-1c - Hot rocky Venus-like */
.trappist-1c {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #ffbb88, #dd9966 50%, #bb7744 100%);
  box-shadow: 0 0 10px rgba(221, 153, 102, 0.5);
}

/* TRAPPIST-1d - Small dry rocky world */
.trappist-1d {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #ccddaa, #aabb88 50%, #889966 100%);
  box-shadow: 0 0 8px rgba(170, 187, 136, 0.5);
}

/* TRAPPIST-1f - Water world (blue) */
.trappist-1f {
  width: 17px;
  height: 17px;
  background: radial-gradient(circle at 30% 30%, #88aadd, #6688cc 50%, #4466aa 100%);
  box-shadow: 0 0 10px rgba(102, 136, 204, 0.5);
}

/* TRAPPIST-1g - Outer large rocky world (pale blue-green) */
.trappist-1g {
  width: 19px;
  height: 19px;
  background: radial-gradient(circle at 30% 30%, #aaccdd, #88aabb 50%, #668899 100%);
  box-shadow: 0 0 10px rgba(136, 170, 187, 0.5);
}

/* TRAPPIST-1h - Outermost icy world */
.trappist-1h {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #ddeeff, #c0d8ee 50%, #99bbcc 100%);
  box-shadow: 0 0 8px rgba(192, 216, 238, 0.6);
}

/* Scene switcher — vertical stack */
#scene-switcher {
  flex-direction: column;
}

/* Scene label tooltip on hover */
#scene-switcher .scene-btn {
  position: relative;
}

#scene-switcher .scene-btn::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 8, 0, 0.95);
  border: 1px solid #00ff00;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  letter-spacing: 1px;
}

#scene-switcher .scene-btn:hover::after {
  opacity: 1;
}

/* Scene switcher mobile responsive */
@media (max-width: 768px) {
  #scene-switcher {
    top: auto;
    bottom: 180px;
    left: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 80px;
  }

  #scene-switcher .scene-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* ── New Scene Backgrounds ──────────────────────────────────────────────────── */

.bg-blackhole {
  background:
    radial-gradient(ellipse at 25% 40%, rgba(255, 40, 0, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 60%, rgba(255, 80, 0, 0.04) 0%, transparent 40%),
    radial-gradient(circle at center, #050000 0%, #000000 100%);
}

.bg-galaxy {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(80, 0, 160, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 40, 100, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(30, 0, 80, 0.15) 0%, transparent 70%),
    radial-gradient(circle at center, #07000f 0%, #000005 100%);
}

/* ── Black Hole Scene Bodies ────────────────────────────────────────────────── */

/* TON 618 — hypermassive quasar BH */
.scene-body.ton-618 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #000000 20%, #1a0000 55%, #2e0500 100%);
  box-shadow:
    0 0 0 3px rgba(255, 60, 0, 0.45),
    0 0 0 18px rgba(255, 60, 0, 0.12),
    0 0 0 50px rgba(200, 30, 0, 0.04);
}

.scene-body.ton-618 .accretion-disk {
  width: 450px;
  height: 450px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255, 60, 0, 0.08) 8%,
    rgba(255, 100, 0, 0.35) 18%,
    rgba(255, 140, 30, 0.55) 25%,
    rgba(255, 100, 0, 0.35) 32%,
    rgba(255, 60, 0, 0.08) 42%,
    transparent 55%,
    rgba(255, 80, 0, 0.12) 68%,
    rgba(255, 120, 0, 0.30) 78%,
    rgba(255, 80, 0, 0.12) 88%,
    transparent 100%
  );
  animation: diskRotate 12s linear infinite;
}

/* M87* — first photographed BH */
.scene-body.m87-bh {
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, #000000 25%, #120400 58%, #221000 100%);
  box-shadow:
    0 0 0 2px rgba(255, 140, 0, 0.5),
    0 0 0 12px rgba(255, 100, 0, 0.18),
    0 0 0 35px rgba(200, 70, 0, 0.05);
}

.scene-body.m87-bh .accretion-disk {
  width: 320px;
  height: 320px;
  background: conic-gradient(
    from 160deg,
    transparent 0%,
    rgba(255, 140, 30, 0.1) 10%,
    rgba(255, 110, 0, 0.4) 20%,
    rgba(255, 160, 40, 0.6) 28%,
    rgba(255, 110, 0, 0.4) 36%,
    rgba(255, 140, 30, 0.1) 46%,
    transparent 60%,
    rgba(255, 100, 0, 0.15) 75%,
    rgba(255, 120, 20, 0.35) 85%,
    transparent 100%
  );
  animation: diskRotate 22s linear infinite;
}

/* Cygnus X-1 — stellar-mass BH in binary */
.scene-body.cygnus-x1 {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #000000 40%, #0e0100 72%, #1c0400 100%);
  box-shadow:
    0 0 0 1px rgba(255, 100, 0, 0.65),
    0 0 0 6px rgba(255, 80, 0, 0.28),
    0 0 25px rgba(255, 60, 0, 0.35);
}

.scene-body.cygnus-x1 .accretion-disk {
  width: 160px;
  height: 160px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255, 120, 0, 0.25) 12%,
    rgba(255, 180, 0, 0.55) 22%,
    rgba(255, 120, 0, 0.25) 32%,
    transparent 50%,
    rgba(255, 100, 0, 0.20) 68%,
    rgba(255, 160, 0, 0.45) 78%,
    transparent 100%
  );
  animation: diskRotate 6s linear infinite;
}

/* HDE 226868 — blue supergiant companion to Cygnus X-1 */
.scene-body.hde-226868 {
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 35% 35%, #e8f4ff, #99bbee 45%, #5577bb 100%);
  box-shadow:
    0 0 25px rgba(150, 190, 240, 0.85),
    0 0 55px rgba(100, 150, 220, 0.4);
}

/* ── Supergiant Star Bodies ──────────────────────────────────────────────────── */

/* Betelgeuse — red supergiant */
.scene-body.betelgeuse {
  width: 210px;
  height: 210px;
  background: radial-gradient(circle at 38% 35%, #ffaa77, #ff4400 42%, #cc2200 68%, #881100 100%);
  box-shadow:
    0 0 80px rgba(255, 68, 0, 0.9),
    0 0 160px rgba(200, 40, 0, 0.5),
    0 0 280px rgba(150, 20, 0, 0.2);
  animation: supergiiantPulse 9s ease-in-out infinite;
}

/* VY Canis Majoris — extreme red hypergiant */
.scene-body.vy-canis-majoris {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at 42% 40%, #ff8855, #dd2200 38%, #aa1100 62%, #660800 100%);
  box-shadow:
    0 0 100px rgba(200, 30, 0, 0.9),
    0 0 220px rgba(150, 20, 0, 0.5),
    0 0 380px rgba(100, 10, 0, 0.2);
  animation: supergiiantPulse 13s ease-in-out infinite;
}

/* R136a1 — blue Wolf-Rayet supergiant */
.scene-body.r136a1 {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 35% 33%, #ffffff, #bbddff 28%, #6699dd 62%, #334488 100%);
  box-shadow:
    0 0 60px rgba(180, 215, 255, 0.95),
    0 0 130px rgba(130, 175, 255, 0.5),
    0 0 220px rgba(100, 145, 255, 0.2);
  animation: wolfRayetWind 3.5s ease-in-out infinite;
}

@keyframes supergiiantPulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.18); }
}

@keyframes wolfRayetWind {
  0%, 100% {
    box-shadow: 0 0 60px rgba(180, 215, 255, 0.95), 0 0 130px rgba(130, 175, 255, 0.5), 0 0 220px rgba(100, 145, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 85px rgba(210, 230, 255, 1), 0 0 180px rgba(170, 205, 255, 0.7), 0 0 300px rgba(150, 180, 255, 0.35);
  }
}

/* ── Neutron Star Bodies ─────────────────────────────────────────────────────── */

/* PSR J0348+0432 — most massive known neutron star */
.scene-body.psr-j0348 {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 40% 38%, #bbddff, #77aaff 48%, #3366cc 100%);
  box-shadow:
    0 0 30px rgba(110, 170, 255, 0.85),
    0 0 65px rgba(80, 140, 255, 0.4);
  animation: pulse 0.0893s infinite;
}

.scene-body.psr-j0348::before,
.scene-body.psr-j0348::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(110, 170, 255, 0.85), transparent);
  transform-origin: center;
  animation: pulsarBeam 0.0893s infinite;
}

.scene-body.psr-j0348::before { transform: translate(-50%, -50%) rotate(30deg); }
.scene-body.psr-j0348::after  { transform: translate(-50%, -50%) rotate(120deg); }

/* PSR J0348 companion white dwarf */
.scene-body.psr-j0348-companion {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 35%, #ffffff, #eeeeff 50%, #ccccee 100%);
  box-shadow:
    0 0 16px rgba(210, 210, 255, 0.9),
    0 0 35px rgba(180, 180, 255, 0.4);
}

/* SGR 1806-20 — magnetar */
.scene-body.magnetar {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 40% 38%, #ffaaff, #cc44ff 48%, #8800cc 100%);
  box-shadow:
    0 0 35px rgba(200, 80, 255, 0.85),
    0 0 70px rgba(160, 40, 255, 0.4);
  animation: magnetarPulse 7.5s ease-in-out infinite;
}

.scene-body.magnetar::before,
.scene-body.magnetar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(200, 80, 255, 0.75), transparent);
  transform-origin: center;
  pointer-events: none;
}

.scene-body.magnetar::before { transform: translate(-50%, -50%) rotate(25deg); }
.scene-body.magnetar::after  { transform: translate(-50%, -50%) rotate(115deg); }

@keyframes magnetarPulse {
  0%, 100% {
    box-shadow: 0 0 35px rgba(200, 80, 255, 0.85), 0 0 70px rgba(160, 40, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 55px rgba(220, 110, 255, 1), 0 0 110px rgba(190, 70, 255, 0.7), 0 0 180px rgba(160, 40, 255, 0.2);
  }
}

/* ── Galaxy Bodies ───────────────────────────────────────────────────────────── */

/* Base: galaxy bodies use ::before for the visual so JS transform doesn't fight CSS */
.scene-body.milky-way,
.scene-body.andromeda,
.scene-body.large-magellanic-cloud,
.scene-body.m87-galaxy {
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
}

/* Milky Way — barred spiral */
.scene-body.milky-way {
  width: 200px;
  height: 200px;
}

.scene-body.milky-way::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffce0 0%, #ffd966 10%, rgba(255, 200, 120, 0.5) 30%, transparent 55%),
    conic-gradient(
      from 15deg,
      transparent 0deg, rgba(255, 220, 150, 0.38) 20deg,
      transparent 45deg, rgba(220, 195, 130, 0.18) 70deg,
      transparent 100deg, rgba(255, 220, 150, 0.38) 140deg,
      transparent 170deg, rgba(220, 195, 130, 0.18) 200deg,
      transparent 230deg, rgba(255, 220, 150, 0.38) 265deg,
      transparent 295deg, rgba(220, 195, 130, 0.18) 330deg,
      transparent 360deg
    );
  box-shadow:
    0 0 50px rgba(255, 220, 160, 0.55),
    0 0 110px rgba(220, 190, 120, 0.22);
  animation: galaxySpin 130s linear infinite;
  pointer-events: none;
}

/* Andromeda — large tilted spiral (slightly cooler blue-white tone) */
.scene-body.andromeda {
  width: 240px;
  height: 240px;
}

.scene-body.andromeda::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f0f4ff 0%, #c8d8ff 12%, rgba(180, 210, 255, 0.45) 30%, transparent 55%),
    conic-gradient(
      from -20deg,
      transparent 0deg, rgba(200, 220, 255, 0.35) 22deg,
      transparent 48deg, rgba(160, 190, 240, 0.18) 76deg,
      transparent 108deg, rgba(200, 220, 255, 0.35) 148deg,
      transparent 178deg, rgba(160, 190, 240, 0.18) 212deg,
      transparent 248deg, rgba(200, 220, 255, 0.35) 280deg,
      transparent 318deg, rgba(160, 190, 240, 0.18) 350deg,
      transparent 360deg
    );
  box-shadow:
    0 0 55px rgba(190, 215, 255, 0.5),
    0 0 120px rgba(160, 195, 255, 0.2);
  animation: galaxySpin 160s linear infinite reverse;
  pointer-events: none;
}

/* Large Magellanic Cloud — irregular galaxy */
.scene-body.large-magellanic-cloud {
  width: 130px;
  height: 130px;
}

.scene-body.large-magellanic-cloud::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40% 60% 55% 45% / 45% 50% 60% 50%;
  background:
    radial-gradient(circle at 40% 45%, #e8f0ff 0%, #b8d0ff 15%, rgba(160, 200, 255, 0.4) 38%, transparent 60%),
    radial-gradient(circle at 65% 55%, rgba(180, 215, 255, 0.3) 0%, transparent 40%);
  box-shadow:
    0 0 35px rgba(180, 215, 255, 0.5),
    0 0 75px rgba(150, 190, 255, 0.2);
  animation: galaxySpin 200s linear infinite;
  pointer-events: none;
}

/* M87 — giant elliptical galaxy */
.scene-body.m87-galaxy {
  width: 170px;
  height: 170px;
}

.scene-body.m87-galaxy::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, #fff8e8 0%, #ffcc88 12%, rgba(240, 200, 140, 0.45) 35%, transparent 58%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(220, 180, 120, 0.25) 0%, transparent 65%);
  box-shadow:
    0 0 55px rgba(240, 200, 140, 0.55),
    0 0 120px rgba(200, 160, 100, 0.22);
  pointer-events: none;
}

/* M87 jet */
.scene-body.m87-galaxy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 180, 80, 0.8), rgba(255, 220, 120, 0.4), transparent);
  transform: translate(-10%, -50%) rotate(-20deg);
  pointer-events: none;
  animation: m87Jet 4s ease-in-out infinite;
}

@keyframes galaxySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes m87Jet {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}