/* Solar System Visualization CSS */

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

body {
  background: #0a0a0a;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.solar-system {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  z-index: 1;
  /* Subtle nebula effect */
  background:
    radial-gradient(ellipse at 30% 70%, rgba(138, 43, 226, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(72, 61, 139, 0.02) 0%, transparent 50%);
}

.sun {
  position: absolute;
  width: 50px;
  height: 50px;
  background: 
    /* Solar granulation and surface activity */
    radial-gradient(circle at 30% 30%, rgba(255, 255, 230, 0.8) 5%, transparent 15%),
    radial-gradient(circle at 70% 20%, rgba(255, 235, 59, 0.6) 8%, transparent 20%),
    radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.7) 6%, transparent 18%),
    radial-gradient(circle at 80% 70%, rgba(255, 235, 59, 0.5) 10%, transparent 25%),
    /* Base solar surface */
    radial-gradient(circle, #fff5e6 0%, #ffeb3b 25%, #ff9800 65%, #ff5722 100%);
  background-size: 
    40% 40%, 35% 35%, 30% 30%, 45% 45%,
    100% 100%;
  border-radius: 50%;
  box-shadow: 
    /* Corona layers */
    0 0 20px #ffeb3b,
    0 0 40px #ff9800,
    0 0 60px #ff5722,
    0 0 80px rgba(255, 87, 34, 0.5),
    /* Surface features */
    inset 0 0 15px rgba(255, 61, 0, 0.6),
    inset 2px -2px 8px rgba(255, 61, 0, 0.8);
  animation: sunGlow 4s ease-in-out infinite alternate, sunRotate 25s linear infinite, sunActivity 8s ease-in-out infinite;
  z-index: 10;
}

.sun::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Solar flares and prominence */
  background: 
    radial-gradient(circle at 90% 50%, rgba(255, 69, 0, 0.4) 20%, transparent 40%),
    radial-gradient(circle at 10% 30%, rgba(255, 140, 0, 0.3) 15%, transparent 35%),
    radial-gradient(circle at 50% 10%, rgba(255, 165, 0, 0.3) 10%, transparent 25%);
  background-size: 60% 40%, 50% 35%, 40% 30%;
  animation: solarFlares 12s ease-in-out infinite;
  top: 0;
  left: 0;
}

@keyframes sunActivity {
  0%, 100% { 
    background-size: 40% 40%, 35% 35%, 30% 30%, 45% 45%, 100% 100%;
  }
  50% { 
    background-size: 45% 45%, 40% 40%, 35% 35%, 50% 50%, 100% 100%;
  }
}

@keyframes solarFlares {
  0%, 100% { 
    background-position: 0px 0px, 2px 1px, -1px 2px;
    opacity: 0.6;
  }
  25% { 
    background-position: 5px 2px, 7px 3px, 3px 0px;
    opacity: 0.8;
  }
  50% { 
    background-position: 10px 0px, 12px 1px, 8px 2px;
    opacity: 1;
  }
  75% { 
    background-position: 5px -2px, 7px -1px, 3px 0px;
    opacity: 0.8;
  }
}

@keyframes sunGlow {
  0% { box-shadow: 0 0 25px #ffeb3b, 0 0 50px #ff9800, 0 0 75px #ff5722, inset 0 0 10px #ff3d00; }
  100% { box-shadow: 0 0 35px #ffeb3b, 0 0 60px #ff9800, 0 0 90px #ff5722, inset 0 0 15px #ff3d00; }
}

@keyframes sunRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.planet {
  position: absolute;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* Planet drag states */
.planet.planet-editable {
  cursor: move !important;
}

.planet.planet-editable:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  z-index: 50;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.planet.planet-dragging {
  transform: scale(1.3) !important;
  box-shadow: 0 0 25px rgba(255, 107, 53, 0.8) !important;
  z-index: 100 !important;
  cursor: grabbing !important;
  border: 2px solid rgba(255, 107, 53, 1) !important;
  opacity: 0.9 !important;
}

/* Drag helper overlay */
.planet.planet-editable::after {
  content: "Drag me!";
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 200;
}

.planet.planet-editable:hover::after {
  opacity: 1;
}

/* Mercury - Based on BepiColombo 2024 imagery */
.mercury-orbit {
  width: 200px;
  height: 200px;
}

.mercury {
  width: 12px;
  height: 12px;
  position: relative;
  background: 
    /* Surface texture with crater variations */
    radial-gradient(circle at 20% 30%, #4a4a4a 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, #3a3a3a 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, #454545 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 70%, #404040 1px, transparent 2px),
    radial-gradient(circle at 15% 70%, #383838 1px, transparent 2px),
    /* Base surface color with realistic lunar-like variations */
    radial-gradient(circle at 30% 10%, #7a7a7a, transparent 40%),
    radial-gradient(circle at 80% 80%, #656565, transparent 35%),
    radial-gradient(circle at 10% 60%, #707070, transparent 30%),
    /* Main surface gradient */
    radial-gradient(circle, #6b6b6b 0%, #5a5a5a 25%, #4a4a4a 60%, #3a3a3a 100%);
  background-size: 
    8px 8px, 6px 6px, 10px 10px, 5px 5px, 7px 7px,
    15px 15px, 12px 12px, 18px 18px,
    100% 100%;
  box-shadow: 
    /* Harsh sunlight effect */
    0 0 8px rgba(180, 180, 180, 0.3),
    /* Surface detail enhancement */
    inset 2px -2px 4px rgba(0, 0, 0, 0.8),
    inset -1px 1px 2px rgba(120, 120, 120, 0.3);
  animation: mercuryRotate 15s linear infinite;
  top: 60px;
  left: 75px;
}

.mercury::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Icy crater deposits in permanent shadow (subtle) */
  background: 
    radial-gradient(circle at 25% 75%, rgba(200, 220, 255, 0.15) 1px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgba(200, 220, 255, 0.1) 0.5px, transparent 1px);
  background-size: 12px 12px, 8px 8px;
  top: 0;
  left: 0;
}

.mercury:hover {
  transform: scale(1.8);
  box-shadow: 
    0 0 15px rgba(180, 180, 180, 0.6),
    inset 2px -2px 6px rgba(0, 0, 0, 0.9),
    inset -2px 2px 4px rgba(140, 140, 140, 0.4);
  z-index: 50;
}

@keyframes mercuryRotate {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 1px -1px, 0px 0px, 5px 2px, -2px 1px, 0px 0px; }
  100% { background-position: 8px 0px, 10px 1px, 7px 2px, 11px 0px, 9px -1px, 15px 0px, 20px 2px, 10px 1px, 0px 0px; }
}

/* Venus - Thick sulfuric acid atmosphere based on Parker Solar Probe 2024 data */
.venus-orbit {
  width: 280px;
  height: 280px;
}

.venus {
  width: 18px;
  height: 18px;
  position: relative;
  background: 
    /* Swirling atmospheric patterns */
    conic-gradient(from 45deg at 30% 70%, 
      rgba(255, 248, 220, 0.3), 
      rgba(245, 222, 179, 0.4), 
      rgba(218, 165, 32, 0.5), 
      rgba(255, 248, 220, 0.3)),
    radial-gradient(ellipse at 20% 30%, rgba(245, 222, 179, 0.6) 20%, transparent 40%),
    radial-gradient(ellipse at 80% 20%, rgba(218, 165, 32, 0.4) 15%, transparent 35%),
    radial-gradient(ellipse at 60% 80%, rgba(240, 230, 140, 0.5) 25%, transparent 50%),
    /* Base atmospheric glow */
    radial-gradient(circle, #fff8dc 0%, #f5deb3 20%, #daa520 60%, #b8860b 85%, #8b6f0b 100%);
  background-size: 
    100% 100%, 
    40% 60%, 30% 50%, 50% 40%,
    100% 100%;
  box-shadow: 
    /* Atmospheric glow */
    0 0 20px rgba(245, 222, 179, 0.9),
    0 0 35px rgba(218, 165, 32, 0.6),
    /* Surface hints through atmosphere */
    inset 0 0 8px rgba(184, 134, 11, 0.4),
    inset 2px -2px 6px rgba(139, 111, 11, 0.6);
  animation: venusAtmosphere 25s linear infinite, venusGlow 8s ease-in-out infinite alternate;
  top: -20px;
  left: 200px;
}

.venus::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Surface volcanic features visible through atmosphere */
  background: 
    radial-gradient(circle at 40% 60%, rgba(218, 165, 32, 0.3) 15%, transparent 25%),
    radial-gradient(circle at 70% 30%, rgba(205, 155, 29, 0.25) 10%, transparent 20%),
    /* Sulfuric acid cloud swirls */
    conic-gradient(from 90deg at 50% 50%, 
      transparent 40%, 
      rgba(255, 248, 220, 0.2) 45%, 
      transparent 55%);
  background-size: 80% 80%, 60% 60%, 100% 100%;
  animation: venusCloudSwirl 20s linear infinite;
  top: 0;
  left: 0;
}

.venus:hover {
  transform: scale(1.6);
  box-shadow: 
    0 0 30px rgba(245, 222, 179, 1),
    0 0 50px rgba(218, 165, 32, 0.8),
    inset 0 0 12px rgba(184, 134, 11, 0.6),
    inset 3px -3px 8px rgba(139, 111, 11, 0.8);
  z-index: 50;
}

@keyframes venusAtmosphere {
  0% { background-position: 0deg, 0px 0px, 2px 1px, -1px 2px, 0px 0px; }
  100% { background-position: 360deg, 20px 15px, 18px 12px, 15px 18px, 0px 0px; }
}

@keyframes venusCloudSwirl {
  0% { transform: rotate(0deg); background-position: 0px 0px, 2px 1px, 0deg; }
  100% { transform: rotate(360deg); background-position: 15px 12px, 18px 15px, 360deg; }
}

@keyframes venusGlow {
  0% { 
    box-shadow: 
      0 0 20px rgba(245, 222, 179, 0.9),
      0 0 35px rgba(218, 165, 32, 0.6),
      inset 0 0 8px rgba(184, 134, 11, 0.4),
      inset 2px -2px 6px rgba(139, 111, 11, 0.6);
  }
  100% { 
    box-shadow: 
      0 0 30px rgba(245, 222, 179, 1),
      0 0 45px rgba(218, 165, 32, 0.8),
      inset 0 0 12px rgba(184, 134, 11, 0.6),
      inset 3px -3px 8px rgba(139, 111, 11, 0.8);
  }
}

/* Earth - Photorealistic Blue Marble with NASA-accurate continental details */
.earth-orbit {
  width: 360px;
  height: 360px;
}

.earth {
  width: 20px;
  height: 20px;
  position: relative;
  background: 
    /* Africa and Middle East - Sahara Desert visible */
    radial-gradient(ellipse at 32% 35%, #cd853f 8%, transparent 15%),
    radial-gradient(ellipse at 30% 40%, #228b22 12%, transparent 20%),
    radial-gradient(ellipse at 35% 30%, #daa520 6%, transparent 12%),
    /* Asia - varied terrain */
    radial-gradient(ellipse at 45% 25%, #2e8b57 10%, transparent 18%),
    radial-gradient(ellipse at 55% 30%, #8b7355 8%, transparent 15%),
    /* Americas - distinct continental shapes */
    radial-gradient(ellipse at 15% 35%, #228b22 14%, transparent 22%),
    radial-gradient(ellipse at 10% 50%, #654321 6%, transparent 12%),
    radial-gradient(ellipse at 18% 60%, #32cd32 10%, transparent 18%),
    /* Australia and Pacific Islands */
    radial-gradient(ellipse at 70% 60%, #8fbc8f 6%, transparent 12%),
    /* Antarctica - South Pole ice cap */
    radial-gradient(circle at 50% 92%, #f0f8ff 15%, rgba(240, 248, 255, 0.5) 20%, transparent 25%),
    /* Arctic - North Pole ice features */
    radial-gradient(circle at 50% 8%, #f0f8ff 12%, rgba(240, 248, 255, 0.3) 18%, transparent 22%),
    /* Mountain ranges - subtle elevation shading */
    radial-gradient(ellipse at 20% 40%, rgba(139, 115, 85, 0.4) 8%, transparent 15%),
    radial-gradient(ellipse at 45% 35%, rgba(139, 115, 85, 0.3) 6%, transparent 12%),
    /* Deep ocean trenches and variations */
    radial-gradient(circle at 25% 25%, #004080 35%, transparent 50%),
    radial-gradient(circle at 75% 75%, #1e5090 30%, transparent 45%),
    /* Shallow coastal waters - blue-green tints */
    radial-gradient(circle at 30% 35%, #40a0d0 20%, transparent 35%),
    radial-gradient(circle at 70% 40%, #60c0ff 18%, transparent 30%),
    /* Chlorophyll ocean variations */
    radial-gradient(circle at 15% 60%, rgba(64, 224, 208, 0.3) 25%, transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(72, 209, 204, 0.2) 20%, transparent 35%),
    /* Base ocean with realistic depth gradients */
    radial-gradient(circle, #60c0ff 0%, #4682b4 15%, #1e90ff 35%, #0066cc 60%, #004080 85%, #003366 100%);
  background-size: 
    18% 20%, 20% 25%, 12% 15%,
    16% 18%, 14% 16%,
    22% 30%, 10% 12%, 18% 22%,
    12% 14%,
    30% 25%, 25% 20%,
    15% 18%, 12% 15%,
    50% 45%, 45% 40%,
    35% 30%, 30% 25%,
    40% 35%, 35% 30%,
    100% 100%;
  box-shadow: 
    /* Atmospheric glow - blue atmospheric edge */
    0 0 25px rgba(135, 206, 235, 0.9),
    0 0 45px rgba(30, 144, 255, 0.6),
    0 0 65px rgba(0, 102, 204, 0.3),
    /* Realistic lighting and curvature */
    inset 3px -3px 12px rgba(0, 64, 128, 0.7),
    inset -2px 2px 8px rgba(173, 216, 230, 0.4);
  animation: earthRotate 60s linear infinite;
  top: 120px;
  left: 120px;
}

.earth::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Dynamic cloud formations - hurricanes, weather fronts, and cumulus patterns */
  background: 
    /* Swirling hurricane systems */
    conic-gradient(from 45deg at 25% 40%, 
      rgba(255, 255, 255, 0.7) 0deg, 
      rgba(255, 255, 255, 0.3) 60deg, 
      rgba(255, 255, 255, 0.8) 120deg, 
      rgba(255, 255, 255, 0.2) 180deg, 
      rgba(255, 255, 255, 0.6) 240deg, 
      rgba(255, 255, 255, 0.4) 300deg, 
      rgba(255, 255, 255, 0.7) 360deg),
    conic-gradient(from 120deg at 70% 60%, 
      rgba(255, 255, 255, 0.5) 0deg, 
      rgba(255, 255, 255, 0.2) 80deg, 
      rgba(255, 255, 255, 0.7) 160deg, 
      rgba(255, 255, 255, 0.3) 240deg, 
      rgba(255, 255, 255, 0.5) 320deg, 
      rgba(255, 255, 255, 0.5) 360deg),
    /* Weather fronts - linear cloud formations */
    linear-gradient(35deg, 
      transparent 20%, 
      rgba(255, 255, 255, 0.6) 25%, 
      rgba(255, 255, 255, 0.4) 30%, 
      transparent 35%),
    linear-gradient(-25deg, 
      transparent 45%, 
      rgba(255, 255, 255, 0.5) 50%, 
      rgba(255, 255, 255, 0.3) 55%, 
      transparent 60%),
    /* Cumulus clouds over continents */
    radial-gradient(ellipse at 30% 35%, rgba(255, 255, 255, 0.8) 12%, transparent 20%),
    radial-gradient(ellipse at 45% 25%, rgba(255, 255, 255, 0.6) 8%, transparent 15%),
    radial-gradient(ellipse at 15% 55%, rgba(255, 255, 255, 0.7) 10%, transparent 18%),
    /* Stratocumulus layers over oceans */
    radial-gradient(ellipse at 75% 35%, rgba(255, 255, 255, 0.4) 25%, transparent 40%),
    radial-gradient(ellipse at 85% 70%, rgba(255, 255, 255, 0.3) 20%, transparent 35%),
    /* Polar cloud systems */
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.6) 15%, transparent 25%),
    radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.5) 12%, transparent 20%);
  background-size: 
    30% 25%, 25% 20%,
    80% 15%, 70% 12%,
    18% 15%, 12% 10%, 15% 12%,
    35% 30%, 30% 25%,
    35% 20%, 30% 18%;
  animation: earthClouds 60s linear infinite;
  top: 0;
  left: 0;
}

.earth::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: 
    /* Atmospheric edge glow - thin blue atmosphere */
    radial-gradient(circle, 
      transparent 85%, 
      rgba(135, 206, 235, 0.8) 90%, 
      rgba(30, 144, 255, 0.6) 95%, 
      rgba(0, 102, 204, 0.3) 100%);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  top: -1px;
  left: -1px;
  pointer-events: none;
  animation: atmosphereGlow 8s ease-in-out infinite alternate;
}

/* Aurora effects - subtle green/pink glows near polar regions */
.earth .aurora {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    /* Northern aurora */
    radial-gradient(ellipse at 50% 12%, 
      rgba(0, 255, 127, 0.3) 8%, 
      rgba(255, 20, 147, 0.2) 12%, 
      transparent 18%),
    /* Southern aurora */
    radial-gradient(ellipse at 50% 88%, 
      rgba(0, 255, 127, 0.2) 6%, 
      rgba(255, 20, 147, 0.15) 10%, 
      transparent 15%);
  background-size: 60% 25%, 55% 20%;
  animation: auroraFlicker 12s ease-in-out infinite alternate;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Terminator line - day/night transition with atmospheric scattering */
.earth .terminator {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    /* Gradual day/night transition */
    linear-gradient(45deg, 
      transparent 35%, 
      rgba(0, 0, 0, 0.1) 40%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.6) 60%, 
      rgba(0, 0, 0, 0.8) 70%);
  animation: terminatorMove 60s linear infinite;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Sun glint effects - bright reflective spots on water */
.earth .sun-glint {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    /* Primary sun glint */
    radial-gradient(circle at 65% 35%, 
      rgba(255, 255, 255, 0.8) 2%, 
      rgba(255, 255, 255, 0.4) 4%, 
      transparent 8%),
    /* Secondary glints */
    radial-gradient(circle at 25% 60%, 
      rgba(255, 255, 255, 0.6) 1.5%, 
      rgba(255, 255, 255, 0.2) 3%, 
      transparent 6%),
    radial-gradient(circle at 80% 70%, 
      rgba(255, 255, 255, 0.5) 1%, 
      rgba(255, 255, 255, 0.15) 2.5%, 
      transparent 5%);
  background-size: 25% 25%, 20% 20%, 15% 15%;
  animation: sunGlintShimmer 8s ease-in-out infinite;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Moon as separate element */
.earth .moon {
  position: absolute;
  width: 3px;
  height: 3px;
  background: 
    /* Lunar maria (dark spots) - Mare Tranquillitatis, Mare Serenitatis */
    radial-gradient(circle at 35% 45%, #707070 15%, transparent 25%),
    radial-gradient(circle at 65% 30%, #808080 12%, transparent 20%),
    radial-gradient(circle at 45% 70%, #757575 8%, transparent 15%),
    /* Tycho crater - bright ray system */
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.3) 8%, transparent 15%),
    /* Base lunar highlands */
    radial-gradient(circle, #e8e8e8 0%, #d4d4d4 30%, #c0c0c0 70%, #a8a8a8 100%);
  background-size: 50% 50%, 40% 40%, 30% 30%, 20% 20%, 100% 100%;
  border-radius: 50%;
  top: -5px;
  left: 16px;
  box-shadow: 
    0 0 5px rgba(232, 232, 232, 0.6),
    inset 0.5px -0.5px 1.5px rgba(0, 0, 0, 0.4),
    inset -0.25px 0.25px 0.5px rgba(255, 255, 255, 0.3);
  animation: moonOrbit 60s linear infinite;
}

.earth:hover {
  transform: scale(1.8);
  box-shadow: 
    /* Enhanced atmospheric glow on hover */
    0 0 35px rgba(135, 206, 235, 1),
    0 0 60px rgba(30, 144, 255, 0.9),
    0 0 85px rgba(0, 102, 204, 0.5),
    /* More visible geographic features */
    inset 4px -4px 15px rgba(0, 64, 128, 0.8),
    inset -3px 3px 10px rgba(173, 216, 230, 0.6);
  z-index: 50;
  filter: brightness(1.1) contrast(1.05) saturate(1.1);
}

.earth:hover::after {
  box-shadow: 
    0 0 20px rgba(135, 206, 235, 0.9),
    0 0 35px rgba(30, 144, 255, 0.7);
}

@keyframes earthRotate {
  0% { 
    background-position: 
      0px 0px, 2px 1px, -1px 2px,
      3px 0px, 1px -1px,
      0px 0px, 2px 1px, -1px 2px,
      3px 0px,
      0px 0px, 0px 0px,
      2px 1px, -1px 2px,
      0px 0px, 0px 0px,
      0px 0px, 0px 0px,
      0px 0px, 0px 0px,
      0px 0px;
  }
  100% { 
    background-position: 
      18px 0px, 20px 1px, 17px 2px,
      21px 0px, 19px -1px,
      22px 0px, 24px 1px, 21px 2px,
      25px 0px,
      0px 0px, 0px 0px,
      20px 1px, 18px 2px,
      50px 0px, 45px 0px,
      35px 0px, 30px 0px,
      40px 0px, 35px 0px,
      0px 0px;
  }
}

@keyframes earthClouds {
  0% { 
    background-position: 
      0deg, 0deg,
      0px 0px, 0px 0px,
      0px 0px, 2px 1px, -1px 2px,
      0px 0px, 0px 0px,
      0px 0px, 0px 0px;
  }
  100% { 
    background-position: 
      360deg, -360deg,
      80px 0px, 70px 0px,
      40px 0px, 42px 1px, 39px 2px,
      35px 0px, 30px 0px,
      35px 0px, 30px 0px;
  }
}

@keyframes atmosphereGlow {
  0% { 
    opacity: 0.6;
    transform: scale(1);
  }
  100% { 
    opacity: 0.9;
    transform: scale(1.05);
  }
}

@keyframes auroraFlicker {
  0% { 
    opacity: 0.3;
    background-size: 60% 25%, 55% 20%;
  }
  25% { 
    opacity: 0.6;
    background-size: 65% 28%, 60% 22%;
  }
  50% { 
    opacity: 0.4;
    background-size: 58% 23%, 53% 18%;
  }
  75% { 
    opacity: 0.7;
    background-size: 62% 26%, 57% 21%;
  }
  100% { 
    opacity: 0.5;
    background-size: 60% 25%, 55% 20%;
  }
}

@keyframes sunGlintShimmer {
  0% { 
    opacity: 0.6;
    background-position: 65% 35%, 25% 60%, 80% 70%;
  }
  25% { 
    opacity: 0.9;
    background-position: 67% 33%, 27% 58%, 82% 68%;
  }
  50% { 
    opacity: 0.7;
    background-position: 63% 37%, 23% 62%, 78% 72%;
  }
  75% { 
    opacity: 1;
    background-position: 69% 31%, 29% 56%, 84% 66%;
  }
  100% { 
    opacity: 0.6;
    background-position: 65% 35%, 25% 60%, 80% 70%;
  }
}

@keyframes terminatorMove {
  0% { 
    background: linear-gradient(45deg, 
      transparent 35%, 
      rgba(0, 0, 0, 0.1) 40%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.6) 60%, 
      rgba(0, 0, 0, 0.8) 70%);
  }
  25% { 
    background: linear-gradient(135deg, 
      transparent 35%, 
      rgba(0, 0, 0, 0.1) 40%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.6) 60%, 
      rgba(0, 0, 0, 0.8) 70%);
  }
  50% { 
    background: linear-gradient(225deg, 
      transparent 35%, 
      rgba(0, 0, 0, 0.1) 40%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.6) 60%, 
      rgba(0, 0, 0, 0.8) 70%);
  }
  75% { 
    background: linear-gradient(315deg, 
      transparent 35%, 
      rgba(0, 0, 0, 0.1) 40%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.6) 60%, 
      rgba(0, 0, 0, 0.8) 70%);
  }
  100% { 
    background: linear-gradient(45deg, 
      transparent 35%, 
      rgba(0, 0, 0, 0.1) 40%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.6) 60%, 
      rgba(0, 0, 0, 0.8) 70%);
  }
}

@keyframes moonOrbit {
  0% { transform: rotate(0deg) translateX(12px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(12px) rotate(-360deg); }
}

/* Mars - Dust storms, varied terrain, and seasonal variations */
.mars-orbit {
  width: 480px;
  height: 480px;
}

.mars {
  width: 16px;
  height: 16px;
  position: relative;
  background: 
    /* Dust storm patterns */
    conic-gradient(from 30deg at 70% 40%, 
      rgba(205, 133, 63, 0.8), 
      rgba(160, 82, 45, 0.9), 
      rgba(139, 69, 19, 0.7), 
      rgba(205, 133, 63, 0.8)),
    /* Valles Marineris canyon system */
    linear-gradient(45deg, 
      transparent 30%, 
      rgba(139, 69, 19, 0.8) 35%, 
      rgba(128, 0, 0, 0.9) 40%, 
      rgba(139, 69, 19, 0.8) 45%, 
      transparent 50%),
    /* Polar ice cap */
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.7) 8%, transparent 15%),
    radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.5) 6%, transparent 12%),
    /* Surface color variations */
    radial-gradient(ellipse at 20% 30%, #b8860b 20%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, #a0522d 25%, transparent 45%),
    radial-gradient(ellipse at 40% 80%, #8b4513 15%, transparent 35%),
    /* Base surface */
    radial-gradient(circle, #cd853f 0%, #a0522d 30%, #8b4513 60%, #800000 100%);
  background-size: 
    100% 100%,
    80% 20%,
    30% 25%, 25% 20%,
    35% 40%, 40% 35%, 30% 30%,
    100% 100%;
  box-shadow: 
    /* Martian glow */
    0 0 15px rgba(205, 133, 63, 0.7),
    0 0 25px rgba(160, 82, 45, 0.5),
    /* Surface features */
    inset 2px -2px 6px rgba(128, 0, 0, 0.7),
    inset -1px 1px 3px rgba(218, 165, 32, 0.3);
  animation: marsDustStorm 40s linear infinite, marsRotate 24s linear infinite;
  top: 180px;
  left: 340px;
}

.mars::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Atmospheric dust and seasonal changes */
  background: 
    radial-gradient(ellipse at 60% 20%, rgba(205, 133, 63, 0.4) 25%, transparent 45%),
    radial-gradient(ellipse at 30% 70%, rgba(160, 82, 45, 0.3) 20%, transparent 35%),
    /* Olympus Mons (subtle volcanic feature) */
    radial-gradient(circle at 25% 60%, rgba(139, 69, 19, 0.6) 8%, transparent 15%);
  background-size: 50% 40%, 45% 35%, 20% 20%;
  animation: marsAtmosphere 35s linear infinite;
  top: 0;
  left: 0;
}

.mars:hover {
  transform: scale(1.7);
  box-shadow: 
    0 0 20px rgba(205, 133, 63, 0.9),
    0 0 35px rgba(160, 82, 45, 0.7),
    inset 3px -3px 8px rgba(128, 0, 0, 0.9),
    inset -2px 2px 4px rgba(218, 165, 32, 0.5);
  z-index: 50;
}

@keyframes marsDustStorm {
  0% { background-position: 0deg, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 2px 1px, -1px 2px, 0px 0px; }
  100% { background-position: 360deg, 0px 0px, 0px 0px, 0px 0px, 35px 0px, 42px 1px, 38px 2px, 0px 0px; }
}

@keyframes marsRotate {
  0% { background-position: 0deg, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 2px 1px, -1px 2px, 0px 0px; }
  100% { background-position: 0deg, 80px 0px, 0px 0px, 0px 0px, 35px 0px, 42px 1px, 38px 2px, 0px 0px; }
}

@keyframes marsAtmosphere {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px; }
  100% { background-position: 50px 20px, 47px 21px, 19px 18px; }
}

/* Jupiter - Enhanced NASA-accurate atmospheric bands with 6-8 bands and limb darkening */
.jupiter-orbit {
  width: 640px;
  height: 640px;
}

.jupiter {
  width: 22px;
  height: 22px;
  position: relative;
  will-change: transform;
  background: 
    /* Great Red Spot - Enhanced 6x8 pixel elliptical storm */
    radial-gradient(ellipse 6px 8px at 70% 60%, #cc4125 30%, #a0522d 45%, rgba(160, 82, 45, 0.6) 65%, transparent 85%),
    /* Additional smaller storm systems */
    radial-gradient(circle at 30% 30%, rgba(139, 69, 19, 0.8) 12%, transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(160, 82, 45, 0.7) 10%, transparent 20%),
    radial-gradient(circle at 40% 85%, rgba(218, 165, 32, 0.6) 8%, transparent 16%),
    radial-gradient(circle at 15% 70%, rgba(93, 63, 211, 0.5) 6%, transparent 12%),
    /* Enhanced 6-8 atmospheric bands with NASA colors */
    repeating-linear-gradient(0deg,
      #f4a460 0%, #f4a460 12.5%,      /* Sandy brown zone */
      #d2b48c 12.5%, #d2b48c 25%,     /* Tan belt */
      #cd853f 25%, #cd853f 37.5%,     /* Peru zone */
      #8b4513 37.5%, #8b4513 50%,     /* Saddle brown belt */
      #5d3fd3 50%, #5d3fd3 62.5%,     /* Purple-blue zone */
      #a0522d 62.5%, #a0522d 75%,     /* Sienna belt */
      #daa520 75%, #daa520 87.5%,     /* Goldenrod zone */
      #654321 87.5%, #654321 100%),    /* Dark brown belt */
    /* Limb darkening for 3D spherical appearance */
    radial-gradient(ellipse 110% 110% at 30% 30%, 
      rgba(244, 164, 96, 0.9) 0%, 
      rgba(218, 165, 32, 0.8) 30%, 
      rgba(139, 69, 19, 0.6) 70%, 
      rgba(101, 67, 33, 0.9) 100%);
  background-size: 
    6px 8px,
    3px 3px, 2.5px 2.5px, 2px 2px, 1.5px 1.5px,
    100% 100%,
    100% 100%;
  box-shadow: 
    /* Enhanced Jupiter's glow */
    0 0 25px rgba(244, 164, 96, 0.8),
    0 0 40px rgba(218, 165, 32, 0.6),
    /* Limb darkening shadow */
    inset 3px -3px 10px rgba(101, 67, 33, 0.7),
    inset -2px 2px 6px rgba(244, 164, 96, 0.4);
  animation: jupiterRotate 50s linear infinite, jupiterStorms 80s linear infinite;
  top: -80px;
  left: 450px;
}

.jupiter::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Ammonia and water cloud layers */
  background: 
    /* High-altitude clouds */
    radial-gradient(ellipse at 25% 20%, rgba(255, 248, 220, 0.3) 20%, transparent 35%),
    radial-gradient(ellipse at 75% 30%, rgba(245, 222, 179, 0.25) 15%, transparent 30%),
    radial-gradient(ellipse at 40% 80%, rgba(255, 235, 205, 0.2) 25%, transparent 40%),
    /* Wind flow patterns */
    conic-gradient(from 0deg at 50% 50%, 
      transparent 20%, 
      rgba(244, 164, 96, 0.1) 25%, 
      transparent 30%,
      rgba(218, 165, 32, 0.1) 55%,
      transparent 60%);
  background-size: 40% 30%, 35% 25%, 45% 35%, 100% 100%;
  animation: jupiterClouds 45s linear infinite;
  top: 0;
  left: 0;
}

.jupiter::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Great Red Spot detail layer */
  background: 
    radial-gradient(ellipse at 70% 60%, 
      rgba(255, 69, 0, 0.7) 4%, 
      rgba(204, 65, 37, 0.8) 8%, 
      rgba(160, 82, 45, 0.6) 12%, 
      transparent 18%);
  background-size: 100% 100%;
  animation: greatRedSpotRotate 100s linear infinite;
  top: 0;
  left: 0;
}

.jupiter:hover {
  transform: scale(1.5);
  box-shadow: 
    0 0 35px rgba(244, 164, 96, 1),
    0 0 55px rgba(218, 165, 32, 0.8),
    inset 3px -3px 12px rgba(101, 67, 33, 0.8),
    inset -2px 2px 6px rgba(244, 164, 96, 0.5);
  z-index: 50;
}

@keyframes jupiterRotate {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 1px 1px, 0px 0px, 0px 0px; }
  100% { background-position: 6px 0px, 29px 1px, 25px 2px, 24px 0px, 2px 1px, 0px 100px, 0px 0px; }
}

@keyframes jupiterStorms {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 0px 0px, 0px 0px; }
  100% { background-position: 0px 0px, 27px 1px, 23px 2px, 21px 0px, 0px 0px, 0px 0px; }
}

@keyframes jupiterClouds {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 0deg; }
  100% { background-position: 40px 15px, 37px 16px, 44px 18px, 360deg; }
}

@keyframes greatRedSpotRotate {
  0% { background-position: 0px 0px; }
  50% { background-position: -2px 1px; }
  100% { background-position: 0px 0px; }
}

/* Jupiter's Galilean Moons System */
.jupiter-moon-io {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Volcanic surface with sulfur deposits */
    radial-gradient(circle, #ff4500 0%, #ffa500 40%, #ff6347 70%, #dc143c 100%),
    /* Lava flows */
    radial-gradient(circle at 30% 20%, rgba(255, 165, 0, 0.8) 20%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 69, 0, 0.7) 15%, transparent 35%);
  background-size: 100% 100%, 60% 40%, 40% 30%;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(255, 69, 0, 0.8);
  animation: ioOrbit 8s linear infinite;
  transform-origin: 18px 0px;
  top: -1px;
  left: 17px;
}

.jupiter-moon-europa {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Icy surface */
    radial-gradient(circle, #e6e6fa 0%, #b0c4de 50%, #87ceeb 100%),
    /* Ice crack patterns */
    linear-gradient(45deg, transparent 40%, rgba(176, 196, 222, 0.6) 45%, transparent 50%),
    linear-gradient(-45deg, transparent 35%, rgba(135, 206, 235, 0.5) 40%, transparent 45%);
  background-size: 100% 100%, 80% 20%, 60% 25%;
  border-radius: 50%;
  box-shadow: 0 0 1.5px rgba(230, 230, 250, 0.8);
  animation: europaOrbit 16s linear infinite;
  transform-origin: 28px 0px;
  top: -1px;
  left: 27px;
}

.jupiter-moon-ganymede {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Rocky and icy terrain blend */
    radial-gradient(circle, #708090 0%, #add8e6 30%, #708090 60%, #2f4f4f 100%),
    /* Terrain features */
    radial-gradient(circle at 25% 30%, rgba(173, 216, 230, 0.6) 25%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(112, 128, 144, 0.7) 20%, transparent 40%);
  background-size: 100% 100%, 40% 35%, 35% 30%;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(112, 128, 144, 0.7);
  animation: ganymedeOrbit 32s linear infinite;
  transform-origin: 45px 0px;
  top: -1px;
  left: 44px;
}

.jupiter-moon-callisto {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Dark, heavily cratered surface */
    radial-gradient(circle, #2f4f4f 0%, #1c1c1c 40%, #2f4f4f 70%, #000000 100%),
    /* Impact craters */
    radial-gradient(circle at 30% 25%, rgba(105, 105, 105, 0.6) 15%, transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(128, 128, 128, 0.5) 12%, transparent 25%),
    radial-gradient(circle at 20% 80%, rgba(169, 169, 169, 0.4) 10%, transparent 20%);
  background-size: 100% 100%, 25% 20%, 20% 18%, 18% 15%;
  border-radius: 50%;
  box-shadow: 0 0 1.5px rgba(47, 79, 79, 0.6);
  animation: callistoOrbit 75s linear infinite;
  transform-origin: 79px 0px;
  top: -1px;
  left: 78px;
}

/* Orbital animations for Jupiter's moons */
@keyframes ioOrbit {
  0% { transform: rotate(0deg) translateX(18px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(18px) rotate(-360deg); }
}

@keyframes europaOrbit {
  0% { transform: rotate(0deg) translateX(28px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
}

@keyframes ganymedeOrbit {
  0% { transform: rotate(0deg) translateX(45px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(45px) rotate(-360deg); }
}

@keyframes callistoOrbit {
  0% { transform: rotate(0deg) translateX(79px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(79px) rotate(-360deg); }
}

/* Saturn - Photorealistic NASA-accurate atmospheric bands and ring system */
.saturn-orbit {
  width: 800px;
  height: 800px;
}

.saturn {
  width: 14px;
  height: 14px;
  position: relative;
  will-change: transform;
  transform: translateZ(0);
  background: 
    /* Complex atmospheric turbulence patterns */
    conic-gradient(from 45deg at 25% 35%, 
      rgba(139, 69, 19, 0.6) 0deg,
      rgba(160, 82, 45, 0.7) 60deg,
      rgba(205, 133, 63, 0.5) 120deg,
      rgba(139, 69, 19, 0.8) 180deg,
      rgba(74, 55, 41, 0.9) 240deg,
      rgba(160, 82, 45, 0.6) 300deg,
      rgba(139, 69, 19, 0.6) 360deg),
    conic-gradient(from 120deg at 70% 60%, 
      rgba(93, 63, 211, 0.4) 0deg,
      rgba(74, 55, 41, 0.6) 80deg,
      rgba(139, 69, 19, 0.5) 160deg,
      rgba(93, 63, 211, 0.3) 240deg,
      rgba(160, 82, 45, 0.4) 320deg,
      rgba(93, 63, 211, 0.4) 360deg),
    /* Subtle atmospheric swirling patterns */
    radial-gradient(ellipse at 20% 30%, rgba(205, 133, 63, 0.8) 15%, transparent 35%),
    radial-gradient(ellipse at 75% 40%, rgba(139, 69, 19, 0.7) 12%, transparent 28%),
    radial-gradient(ellipse at 40% 70%, rgba(74, 55, 41, 0.6) 18%, transparent 32%),
    radial-gradient(ellipse at 85% 20%, rgba(160, 82, 45, 0.5) 10%, transparent 25%),
    /* Horizontal atmospheric bands with realistic color transitions */
    repeating-linear-gradient(0deg,
      #8b4513 0%, #8b4513 6%,
      #a0522d 6%, #a0522d 12%,
      #cd853f 12%, #cd853f 18%,
      #5d3fd3 18%, #5d3fd3 22%,
      #4a3729 22%, #4a3729 28%,
      #8b4513 28%, #8b4513 34%,
      #a0522d 34%, #a0522d 40%,
      #d2b48c 40%, #d2b48c 46%,
      #5d3fd3 46%, #5d3fd3 50%,
      #cd853f 50%, #cd853f 56%,
      #a0522d 56%, #a0522d 62%,
      #8b4513 62%, #8b4513 68%,
      #4a3729 68%, #4a3729 74%,
      #5d3fd3 74%, #5d3fd3 78%,
      #a0522d 78%, #a0522d 84%,
      #cd853f 84%, #cd853f 90%,
      #8b4513 90%, #8b4513 96%,
      #4a3729 96%, #4a3729 100%),
    /* Secondary band layer for depth */
    repeating-linear-gradient(0deg,
      rgba(93, 63, 211, 0.3) 0%, rgba(93, 63, 211, 0.3) 8%,
      rgba(139, 69, 19, 0.4) 8%, rgba(139, 69, 19, 0.4) 16%,
      rgba(74, 55, 41, 0.5) 16%, rgba(74, 55, 41, 0.5) 24%,
      rgba(205, 133, 63, 0.3) 24%, rgba(205, 133, 63, 0.3) 32%,
      rgba(93, 63, 211, 0.4) 32%, rgba(93, 63, 211, 0.4) 40%,
      rgba(160, 82, 45, 0.3) 40%, rgba(160, 82, 45, 0.3) 48%,
      rgba(139, 69, 19, 0.5) 48%, rgba(139, 69, 19, 0.5) 56%,
      rgba(74, 55, 41, 0.4) 56%, rgba(74, 55, 41, 0.4) 64%,
      rgba(205, 133, 63, 0.3) 64%, rgba(205, 133, 63, 0.3) 72%,
      rgba(93, 63, 211, 0.3) 72%, rgba(93, 63, 211, 0.3) 80%,
      rgba(160, 82, 45, 0.4) 80%, rgba(160, 82, 45, 0.4) 88%,
      rgba(139, 69, 19, 0.3) 88%, rgba(139, 69, 19, 0.3) 96%,
      rgba(74, 55, 41, 0.5) 96%, rgba(74, 55, 41, 0.5) 100%),
    /* Base atmospheric composition */
    radial-gradient(circle, #5d3fd3 0%, #8b4513 15%, #a0522d 30%, #cd853f 50%, #4a3729 70%, #2f2318 85%, #1a1611 100%);
  background-size: 
    100% 80%, 100% 75%,
    35% 40%, 30% 35%, 40% 45%, 25% 30%,
    100% 100%,
    100% 100%,
    100% 100%;
  box-shadow: 
    /* Ethereal atmospheric glow */
    0 0 25px rgba(93, 63, 211, 0.6),
    0 0 40px rgba(139, 69, 19, 0.5),
    0 0 60px rgba(74, 55, 41, 0.3),
    /* Atmospheric depth and curvature */
    inset 3px -3px 12px rgba(47, 35, 24, 0.8),
    inset -2px 2px 8px rgba(205, 133, 63, 0.4),
    inset 0 0 15px rgba(93, 63, 211, 0.3);
  animation: saturnSpin 75s linear infinite;
  top: 240px;
  left: 280px;
}

.saturn::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  will-change: transform;
  backface-visibility: hidden;
  /* Complex A Ring with Cassini Division and particle variations */
  background: 
    /* Cassini Division - dark gap */
    radial-gradient(circle at center, 
      transparent 0%, transparent 68%,
      rgba(40, 40, 40, 0.27) 70%, rgba(40, 40, 40, 0.27) 74%,
      transparent 76%, transparent 100%),
    /* A Ring outer section with particle clumps */
    radial-gradient(circle at center,
      transparent 0%, transparent 76%,
      rgba(220, 215, 210, 0.27) 78%, rgba(190, 185, 180, 0.24) 82%,
      rgba(210, 205, 200, 0.27) 86%, rgba(180, 175, 170, 0.21) 90%,
      rgba(200, 195, 190, 0.24) 94%, rgba(160, 155, 150, 0.18) 98%,
      transparent 100%),
    /* A Ring inner section with fine structure */
    radial-gradient(circle at center,
      transparent 0%, transparent 60%,
      rgba(235, 230, 225, 0.285) 62%, rgba(210, 205, 200, 0.27) 64%,
      rgba(225, 220, 215, 0.27) 66%, rgba(200, 195, 190, 0.24) 68%,
      transparent 70%, transparent 100%),
    /* Ring particle shimmer effect */
    conic-gradient(from 0deg,
      rgba(255, 250, 245, 0.09) 0deg, rgba(230, 225, 220, 0.15) 30deg,
      rgba(240, 235, 230, 0.12) 60deg, rgba(220, 215, 210, 0.18) 90deg,
      rgba(250, 245, 240, 0.09) 120deg, rgba(210, 205, 200, 0.15) 150deg,
      rgba(235, 230, 225, 0.12) 180deg, rgba(225, 220, 215, 0.18) 210deg,
      rgba(245, 240, 235, 0.09) 240deg, rgba(215, 210, 205, 0.15) 270deg,
      rgba(240, 235, 230, 0.12) 300deg, rgba(200, 195, 190, 0.18) 330deg,
      rgba(255, 250, 245, 0.09) 360deg);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-30deg);
  animation: saturnRingRotate 80s linear infinite;
  filter: drop-shadow(0 0 3px rgba(200, 195, 190, 0.6));
}

.saturn::after {
  content: '';
  position: absolute;
  width: 29px;
  height: 29px;
  will-change: transform;
  backface-visibility: hidden;
  /* B Ring and outer ring system with complex translucent structure */
  background: 
    /* Outer E Ring - very faint and diffuse */
    radial-gradient(circle at center,
      transparent 0%, transparent 88%,
      rgba(200, 210, 220, 0.045) 90%, rgba(180, 190, 200, 0.03) 95%,
      rgba(160, 170, 180, 0.024) 98%, transparent 100%),
    /* F Ring - narrow and eccentric */
    radial-gradient(circle at center,
      transparent 0%, transparent 84%,
      rgba(240, 235, 230, 0.21) 85%, rgba(220, 215, 210, 0.18) 86%,
      transparent 87%, transparent 100%),
    /* B Ring - dense and bright with complex structure */
    radial-gradient(circle at center,
      transparent 0%, transparent 45%,
      rgba(245, 240, 235, 0.285) 47%, rgba(225, 220, 215, 0.27) 50%,
      rgba(235, 230, 225, 0.27) 53%, rgba(215, 210, 205, 0.255) 56%,
      rgba(230, 225, 220, 0.27) 59%, rgba(200, 195, 190, 0.24) 62%,
      transparent 64%, transparent 100%),
    /* Ring spoke phenomena */
    conic-gradient(from 120deg,
      transparent 0deg, transparent 60deg,
      rgba(255, 255, 255, 0.06) 65deg, rgba(255, 255, 255, 0.03) 75deg,
      transparent 80deg, transparent 140deg,
      rgba(255, 255, 255, 0.045) 145deg, rgba(255, 255, 255, 0.024) 155deg,
      transparent 160deg, transparent 220deg,
      rgba(255, 255, 255, 0.03) 225deg, rgba(255, 255, 255, 0.015) 235deg,
      transparent 240deg, transparent 300deg,
      rgba(255, 255, 255, 0.036) 305deg, rgba(255, 255, 255, 0.018) 315deg,
      transparent 320deg, transparent 360deg),
    /* Ring transparency variations */
    repeating-conic-gradient(from 0deg,
      rgba(240, 235, 230, 0.09) 0deg, rgba(240, 235, 230, 0.09) 15deg,
      rgba(220, 215, 210, 0.12) 15deg, rgba(220, 215, 210, 0.12) 25deg,
      rgba(200, 195, 190, 0.09) 25deg, rgba(200, 195, 190, 0.09) 35deg,
      rgba(230, 225, 220, 0.105) 35deg, rgba(230, 225, 220, 0.105) 45deg);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-30deg);
  animation: saturnRingRotate 85s linear infinite;
  filter: drop-shadow(0 0 5px rgba(220, 215, 210, 0.4));
}

.saturn:hover {
  transform: scale(1.6);
  box-shadow: 
    /* Enhanced ethereal glow */
    0 0 35px rgba(93, 63, 211, 0.8),
    0 0 55px rgba(139, 69, 19, 0.7),
    0 0 75px rgba(74, 55, 41, 0.5),
    /* Enhanced atmospheric depth */
    inset 4px -4px 15px rgba(47, 35, 24, 0.9),
    inset -3px 3px 10px rgba(205, 133, 63, 0.6),
    inset 0 0 20px rgba(93, 63, 211, 0.5);
  z-index: 50;
  filter: brightness(1.1) contrast(1.05) saturate(1.1);
}

.saturn:hover::before {
  box-shadow: 
    0 0 20px rgba(240, 235, 230, 0.9),
    0 0 15px rgba(220, 215, 210, 0.7);
  filter: drop-shadow(0 0 8px rgba(200, 195, 190, 0.8)) brightness(1.1);
}

.saturn:hover::after {
  box-shadow: 
    0 0 25px rgba(230, 225, 220, 0.8),
    0 0 18px rgba(200, 195, 190, 0.6);
  filter: drop-shadow(0 0 10px rgba(220, 215, 210, 0.6)) brightness(1.1);
}

/* Saturn ring shadows cast on planet surface */
.saturn .ring-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    /* Primary ring shadow bands */
    linear-gradient(0deg,
      transparent 0%, transparent 25%,
      rgba(47, 35, 24, 0.4) 28%, rgba(47, 35, 24, 0.6) 32%,
      transparent 35%, transparent 45%,
      rgba(47, 35, 24, 0.5) 47%, rgba(47, 35, 24, 0.7) 52%,
      transparent 55%, transparent 65%,
      rgba(47, 35, 24, 0.3) 67%, rgba(47, 35, 24, 0.5) 72%,
      transparent 75%, transparent 100%),
    /* Secondary shadow layer for depth */
    linear-gradient(0deg,
      transparent 0%, transparent 20%,
      rgba(26, 22, 17, 0.3) 22%, rgba(26, 22, 17, 0.4) 28%,
      transparent 32%, transparent 42%,
      rgba(26, 22, 17, 0.4) 44%, rgba(26, 22, 17, 0.5) 50%,
      transparent 54%, transparent 68%,
      rgba(26, 22, 17, 0.2) 70%, rgba(26, 22, 17, 0.3) 75%,
      transparent 78%, transparent 100%);
  background-size: 100% 100%, 100% 100%;
  animation: ringShadowMove 29s linear infinite;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

@keyframes saturnRotate {
  0% { 
    background-position: 
      0deg, 0deg,
      0px 0px, 2px 1px, -1px 2px, 3px 0px,
      0px 0px,
      0px 0px,
      0px 0px;
  }
  100% { 
    background-position: 
      360deg, -360deg,
      35px 0px, 37px 1px, 34px 2px, 38px 0px,
      0px 100px,
      0px 100px,
      0px 0px;
  }
}

@keyframes saturnAtmosphere {
  0% { 
    background-position: 
      0deg, 0deg,
      0px 0px, 2px 1px, -1px 2px, 3px 0px,
      0px 0px,
      0px 0px,
      0px 0px;
  }
  25% {
    background-position: 
      90deg, -90deg,
      8px 2px, 10px 3px, 6px 4px, 12px 1px,
      0px 25px,
      0px 25px,
      0px 0px;
  }
  50% {
    background-position: 
      180deg, -180deg,
      18px 0px, 20px 1px, 16px 2px, 22px 0px,
      0px 50px,
      0px 50px,
      0px 0px;
  }
  75% {
    background-position: 
      270deg, -270deg,
      26px -2px, 28px -1px, 24px 0px, 30px -1px,
      0px 75px,
      0px 75px,
      0px 0px;
  }
  100% { 
    background-position: 
      360deg, -360deg,
      35px 0px, 37px 1px, 34px 2px, 38px 0px,
      0px 100px,
      0px 100px,
      0px 0px;
  }
}

@keyframes saturnTurbulence {
  0% {
    background-size: 
      100% 80%, 100% 75%,
      35% 40%, 30% 35%, 40% 45%, 25% 30%,
      100% 100%,
      100% 100%,
      100% 100%;
  }
  25% {
    background-size: 
      105% 82%, 98% 77%,
      38% 42%, 33% 37%, 43% 47%, 28% 32%,
      100% 100%,
      100% 100%,
      100% 100%;
  }
  50% {
    background-size: 
      98% 78%, 102% 73%,
      32% 38%, 27% 33%, 37% 43%, 22% 28%,
      100% 100%,
      100% 100%,
      100% 100%;
  }
  75% {
    background-size: 
      102% 81%, 96% 76%,
      37% 41%, 32% 36%, 42% 46%, 27% 31%,
      100% 100%,
      100% 100%,
      100% 100%;
  }
  100% {
    background-size: 
      100% 80%, 100% 75%,
      35% 40%, 30% 35%, 40% 45%, 25% 30%,
      100% 100%,
      100% 100%,
      100% 100%;
  }
}

@keyframes saturnRingRotate {
  0% { transform: translate(-50%, -50%) rotateX(-30deg) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(-30deg) rotate(360deg); }
}

@keyframes ringShimmer {
  0% {
    background-position: 0deg, 0px 0px, 0px 0px, 0deg;
    opacity: 0.9;
  }
  25% {
    background-position: 0deg, 0px 0px, 0px 0px, 90deg;
    opacity: 1;
  }
  50% {
    background-position: 0deg, 0px 0px, 0px 0px, 180deg;
    opacity: 0.95;
  }
  75% {
    background-position: 0deg, 0px 0px, 0px 0px, 270deg;
    opacity: 1;
  }
  100% {
    background-position: 0deg, 0px 0px, 0px 0px, 360deg;
    opacity: 0.9;
  }
}

@keyframes ringSpokes {
  0% {
    background-position: 0deg, 0deg, 0deg, 0deg, 0deg;
  }
  25% {
    background-position: 0deg, 0deg, 0deg, 30deg, 0deg;
  }
  50% {
    background-position: 0deg, 0deg, 0deg, 60deg, 0deg;
  }
  75% {
    background-position: 0deg, 0deg, 0deg, 90deg, 0deg;
  }
  100% {
    background-position: 0deg, 0deg, 0deg, 120deg, 0deg;
  }
}

@keyframes ringShadowMove {
  0% {
    background-position: 0deg 0px, 0deg 0px;
    opacity: 0.8;
  }
  25% {
    background-position: 0deg 2px, 0deg 1px;
    opacity: 0.9;
  }
  50% {
    background-position: 0deg 0px, 0deg 0px;
    opacity: 0.85;
  }
  75% {
    background-position: 0deg -2px, 0deg -1px;
    opacity: 0.9;
  }
  100% {
    background-position: 0deg 0px, 0deg 0px;
    opacity: 0.8;
  }
}

/* Saturn spin animation - slow 75-second rotation */
@keyframes saturnSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Saturn's Major Moons */
/* Titan - Largest moon with orange haze atmosphere */
.saturn-moon-titan {
  position: absolute;
  width: 2px;
  height: 2px;
  will-change: transform;
  background: radial-gradient(circle at 30% 30%, #ff8c00 0%, #ff6347 40%, #8b4513 70%, #654321 100%);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 140, 0, 0.5), inset 1px -1px 2px rgba(139, 69, 19, 0.7);
  animation: titanOrbit 120s linear infinite;
  transform-origin: 12px 0px;
  top: -1px;
  left: 11px;
}

/* Rhea - Second largest, heavily cratered */
.saturn-moon-rhea {
  position: absolute;
  width: 2px;
  height: 2px;
  will-change: transform;
  background: radial-gradient(circle at 25% 25%, #f5f5dc 0%, #ddd 50%, #bbb 100%);
  border-radius: 50%;
  box-shadow: inset 1px -1px 2px rgba(0, 0, 0, 0.3);
  animation: rheaOrbit 96s linear infinite;
  transform-origin: 10px 0px;
  top: -1px;
  left: 9px;
}

/* Iapetus - Contrasting black and white hemispheres */
.saturn-moon-iapetus {
  position: absolute;
  width: 2px;
  height: 2px;
  will-change: transform;
  background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 50%, #f0f0f0 50%, #f0f0f0 100%);
  border-radius: 50%;
  box-shadow: inset 1px -1px 1px rgba(0, 0, 0, 0.4);
  animation: iapetusOrbit 160s linear infinite;
  transform-origin: 15px 0px;
  top: -1px;
  left: 14px;
}

/* Dione - Ice composition with bright trailing hemisphere */
.saturn-moon-dione {
  position: absolute;
  width: 1px;
  height: 1px;
  will-change: transform;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e6e6e6 60%, #cccccc 100%);
  border-radius: 50%;
  box-shadow: inset 0.5px -0.5px 1px rgba(0, 0, 0, 0.2);
  animation: dioneOrbit 72s linear infinite;
  transform-origin: 8px 0px;
  top: -0.5px;
  left: 7.5px;
}

/* Tethys - Very bright, low density */
.saturn-moon-tethys {
  position: absolute;
  width: 1px;
  height: 1px;
  will-change: transform;
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #f8f8ff 70%, #e0e0e0 100%);
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8), inset 0.5px -0.5px 1px rgba(0, 0, 0, 0.15);
  animation: tethysOrbit 68s linear infinite;
  transform-origin: 8px 0px;
  top: -0.5px;
  left: 7.5px;
}

/* Enceladus - Bright icy surface with geysers */
.saturn-moon-enceladus {
  position: absolute;
  width: 1px;
  height: 1px;
  will-change: transform;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f0f8ff 80%, #e6f3ff 100%);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 255, 255, 1), inset 0.5px -0.5px 0.5px rgba(173, 216, 230, 0.3);
  animation: enceladusOrbit 58s linear infinite;
  transform-origin: 7px 0px;
  top: -0.5px;
  left: 6.5px;
}

/* Mimas - Small, heavily cratered with large Herschel crater */
.saturn-moon-mimas {
  position: absolute;
  width: 1px;
  height: 1px;
  will-change: transform;
  background: radial-gradient(circle at 60% 40%, #333 0%, #333 20%, #ddd 25%, #bbb 100%);
  border-radius: 50%;
  box-shadow: inset 0.5px -0.5px 0.5px rgba(0, 0, 0, 0.4);
  animation: mimasOrbit 48s linear infinite;
  transform-origin: 7px 0px;
  top: -0.5px;
  left: 6.5px;
}

/* Moon orbital animations */
@keyframes titanOrbit {
  0% { transform: rotate(0deg) translateX(12px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(12px) rotate(-360deg); }
}

@keyframes rheaOrbit {
  0% { transform: rotate(0deg) translateX(10px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

@keyframes iapetusOrbit {
  0% { transform: rotate(0deg) translateX(15px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(15px) rotate(-360deg); }
}

@keyframes dioneOrbit {
  0% { transform: rotate(0deg) translateX(8px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}

@keyframes tethysOrbit {
  0% { transform: rotate(0deg) translateX(8px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}

@keyframes enceladusOrbit {
  0% { transform: rotate(0deg) translateX(7px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(7px) rotate(-360deg); }
}

@keyframes mimasOrbit {
  0% { transform: rotate(0deg) translateX(7px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(7px) rotate(-360deg); }
}

/* Uranus - Blue-green methane atmosphere with seasonal polar cap based on 2024 Webb observations */
.uranus-orbit {
  width: 960px;
  height: 960px;
}

.uranus {
  width: 14px;
  height: 14px;
  position: relative;
  will-change: transform;
  /* Unique tilted appearance - 98-degree axial tilt */
  transform: rotate(98deg);
  background: 
    /* Seasonal polar cap - more prominent due to extreme tilt */
    radial-gradient(circle at 50% 15%, rgba(220, 255, 255, 0.9) 25%, rgba(176, 224, 230, 0.6) 40%, transparent 50%),
    /* Bright atmospheric features */
    radial-gradient(circle at 70% 40%, rgba(176, 224, 230, 0.7) 10%, transparent 20%),
    radial-gradient(circle at 30% 70%, rgba(79, 208, 227, 0.6) 8%, transparent 16%),
    radial-gradient(circle at 85% 25%, rgba(70, 130, 180, 0.5) 6%, transparent 14%),
    /* Methane atmospheric layers */
    repeating-linear-gradient(0deg,
      #b0e0e6 0%, #b0e0e6 16%,       /* Powder blue */
      #4fd0e3 16%, #4fd0e3 32%,      /* Turquoise */
      #20b2aa 32%, #20b2aa 48%,      /* Light sea green */
      #4682b4 48%, #4682b4 64%,      /* Steel blue */
      #40e0d0 64%, #40e0d0 80%,      /* Turquoise */
      #b0e0e6 80%, #b0e0e6 100%),     /* Powder blue */
    /* Base methane atmosphere with enhanced gradient */
    radial-gradient(circle, #b0e0e6 0%, #4fd0e3 20%, #20b2aa 45%, #4682b4 70%, #40e0d0 100%);
  background-size: 
    50% 35%,
    25% 20%, 20% 18%, 18% 15%,
    100% 100%,
    100% 100%;
  box-shadow: 
    /* Enhanced ice giant glow */
    0 0 18px rgba(176, 224, 230, 0.8),
    0 0 30px rgba(79, 208, 227, 0.6),
    /* Atmospheric depth with limb darkening */
    inset 3px -3px 8px rgba(32, 178, 170, 0.7),
    inset -2px 2px 5px rgba(224, 255, 255, 0.4);
  animation: uranusRotate 17s linear infinite, uranusAtmosphere 45s linear infinite;
  top: 320px;
  left: 620px;
}

.uranus::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Methane ice crystal clouds */
  background: 
    radial-gradient(ellipse at 25% 30%, rgba(224, 255, 255, 0.4) 15%, transparent 25%),
    radial-gradient(ellipse at 75% 20%, rgba(176, 224, 230, 0.3) 12%, transparent 22%),
    radial-gradient(ellipse at 40% 80%, rgba(79, 208, 227, 0.3) 18%, transparent 30%);
  background-size: 35% 25%, 30% 20%, 40% 30%;
  animation: uranusClouds 35s linear infinite;
  top: 0;
  left: 0;
}

.uranus:hover {
  transform: scale(1.8);
  box-shadow: 
    0 0 20px rgba(176, 224, 230, 0.9),
    0 0 35px rgba(64, 224, 208, 0.7),
    inset 3px -3px 7px rgba(32, 178, 170, 0.8),
    inset -2px 2px 4px rgba(224, 255, 255, 0.5);
  z-index: 50;
}

@keyframes uranusRotate {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 0px 0px, 0px 0px; }
  100% { background-position: 0px 0px, 27px 1px, 23px 2px, 0px 100px, 0px 0px; }
}

@keyframes uranusAtmosphere {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 0px 0px, 0px 0px; }
  100% { background-position: 50px 0px, 22px 1px, 18px 2px, 0px 100px, 0px 0px; }
}

@keyframes uranusClouds {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px; }
  100% { background-position: 35px 12px, 32px 13px, 38px 15px; }
}

/* Uranus's Classical Moons System */
.uranus-moon-miranda {
  position: absolute;
  will-change: transform;
  width: 1px;
  height: 1px;
  background: 
    /* Patchwork surface with varied terrain */
    radial-gradient(circle, #708090 0%, #f5f5f5 30%, #708090 60%, #2f4f4f 100%),
    /* Terrain patches - dramatic geological features */
    radial-gradient(circle at 25% 25%, rgba(245, 245, 245, 0.8) 30%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(112, 128, 144, 0.7) 25%, transparent 45%);
  background-size: 100% 100%, 50% 40%, 40% 35%;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(112, 128, 144, 0.6);
  animation: mirandaOrbit 6s linear infinite;
  transform-origin: 13px 0px;
  top: -0.5px;
  left: 12.5px;
}

.uranus-moon-ariel {
  position: absolute;
  will-change: transform;
  width: 1px;
  height: 1px;
  background: 
    /* Icy surface with canyon systems */
    radial-gradient(circle, #e6e6fa 0%, #b0c4de 40%, #e6e6fa 80%, #d3d3d3 100%),
    /* Valley and canyon features */
    linear-gradient(45deg, transparent 45%, rgba(176, 196, 222, 0.6) 50%, transparent 55%),
    linear-gradient(-45deg, transparent 40%, rgba(176, 196, 222, 0.5) 45%, transparent 50%);
  background-size: 100% 100%, 80% 15%, 70% 20%;
  border-radius: 50%;
  box-shadow: 0 0 1.2px rgba(230, 230, 250, 0.7);
  animation: arielOrbit 11s linear infinite;
  transform-origin: 19px 0px;
  top: -0.5px;
  left: 18.5px;
}

.uranus-moon-umbriel {
  position: absolute;
  will-change: transform;
  width: 1px;
  height: 1px;
  background: 
    /* Dark surface with bright crater rim */
    radial-gradient(circle, #696969 0%, #2f2f2f 60%, #696969 100%),
    /* Wunda crater - bright feature */
    radial-gradient(circle at 30% 30%, rgba(211, 211, 211, 0.8) 20%, transparent 40%),
    /* Other crater features */
    radial-gradient(circle at 70% 70%, rgba(105, 105, 105, 0.6) 15%, transparent 30%);
  background-size: 100% 100%, 30% 25%, 25% 20%;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(105, 105, 105, 0.5);
  animation: umbrielOrbit 18s linear infinite;
  transform-origin: 26px 0px;
  top: -0.5px;
  left: 25.5px;
}

.uranus-moon-titania {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Mixed terrain - largest Uranian moon */
    radial-gradient(circle, #7b68ee 0%, #9370db 30%, #8a2be2 60%, #4b0082 100%),
    /* Geological features */
    radial-gradient(circle at 30% 40%, rgba(147, 112, 219, 0.6) 20%, transparent 40%),
    radial-gradient(circle at 70% 20%, rgba(123, 104, 238, 0.5) 15%, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(138, 43, 226, 0.4) 18%, transparent 38%);
  background-size: 100% 100%, 35% 30%, 30% 25%, 40% 35%;
  border-radius: 50%;
  box-shadow: 0 0 1.6px rgba(123, 104, 238, 0.7);
  animation: titaniaOrbit 39s linear infinite;
  transform-origin: 34px 0px;
  top: -1px;
  left: 33px;
}

.uranus-moon-oberon {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Heavily cratered ancient surface */
    radial-gradient(circle, #556b2f 0%, #6b8e23 30%, #8fbc8f 60%, #2e8b57 100%),
    /* Impact crater features */
    radial-gradient(circle at 35% 25%, rgba(222, 184, 135, 0.6) 18%, transparent 35%),
    radial-gradient(circle at 65% 70%, rgba(143, 188, 143, 0.5) 15%, transparent 30%),
    radial-gradient(circle at 20% 75%, rgba(85, 107, 47, 0.7) 12%, transparent 25%);
  background-size: 100% 100%, 30% 25%, 25% 20%, 20% 18%;
  border-radius: 50%;
  box-shadow: 0 0 1.5px rgba(85, 107, 47, 0.6);
  animation: oberonOrbit 60s linear infinite;
  transform-origin: 47px 0px;
  top: -1px;
  left: 46px;
}

/* Orbital animations for Uranus's moons */
@keyframes mirandaOrbit {
  0% { transform: rotate(0deg) translateX(13px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(13px) rotate(-360deg); }
}

@keyframes arielOrbit {
  0% { transform: rotate(0deg) translateX(19px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(19px) rotate(-360deg); }
}

@keyframes umbrielOrbit {
  0% { transform: rotate(0deg) translateX(26px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(26px) rotate(-360deg); }
}

@keyframes titaniaOrbit {
  0% { transform: rotate(0deg) translateX(34px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(34px) rotate(-360deg); }
}

@keyframes oberonOrbit {
  0% { transform: rotate(0deg) translateX(47px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(47px) rotate(-360deg); }
}

/* Neptune - Enhanced deep blue methane atmosphere with Great Dark Spot */
.neptune-orbit {
  width: 1120px;
  height: 1120px;
}

.neptune {
  width: 13px;
  height: 13px;
  position: relative;
  will-change: transform;
  background: 
    /* Great Dark Spot - major storm system */
    radial-gradient(ellipse at 35% 40%, rgba(0, 0, 139, 0.95) 20%, rgba(25, 25, 112, 0.8) 35%, transparent 50%),
    /* Secondary storm systems */
    radial-gradient(circle at 70% 70%, rgba(25, 25, 112, 0.8) 12%, transparent 25%),
    radial-gradient(circle at 15% 75%, rgba(0, 0, 128, 0.7) 8%, transparent 18%),
    /* Methane cloud features - bright streaks */
    radial-gradient(circle at 20% 20%, rgba(135, 206, 235, 0.6) 10%, transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(176, 196, 222, 0.5) 8%, transparent 16%),
    radial-gradient(circle at 60% 85%, rgba(176, 196, 222, 0.4) 6%, transparent 14%),
    /* Enhanced atmospheric bands */
    repeating-linear-gradient(0deg,
      #4169e1 0%, #4169e1 14%,       /* Royal blue */
      #000080 14%, #000080 28%,      /* Navy blue */
      #1e90ff 28%, #1e90ff 42%,      /* Dodger blue */
      #4682b4 42%, #4682b4 56%,      /* Steel blue */
      #87ceeb 56%, #87ceeb 70%,      /* Sky blue */
      #b0c4de 70%, #b0c4de 84%,      /* Light steel blue */
      #4169e1 84%, #4169e1 100%),     /* Royal blue */
    /* Deep methane atmosphere gradient */
    radial-gradient(circle, #4169e1 0%, #000080 30%, #1e90ff 60%, #000080 85%, #000000 100%);
  background-size: 
    35% 25%, 20% 18%, 15% 12%,
    18% 15%, 16% 12%, 14% 10%,
    100% 100%,
    100% 100%;
  box-shadow: 
    /* Enhanced Neptune's blue glow */
    0 0 15px rgba(65, 105, 225, 0.8),
    0 0 25px rgba(135, 206, 235, 0.6),
    /* Atmospheric depth with limb darkening */
    inset 3px -3px 8px rgba(0, 0, 128, 0.8),
    inset -2px 2px 4px rgba(135, 206, 235, 0.4);
  animation: neptuneRotate 16s linear infinite, neptuneStorms 70s linear infinite;
  top: 60px;
  left: 800px;
}

.neptune::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* High-altitude methane clouds and wind streaks */
  background: 
    radial-gradient(ellipse at 30% 25%, rgba(135, 206, 235, 0.4) 18%, transparent 30%),
    radial-gradient(ellipse at 75% 40%, rgba(176, 196, 222, 0.3) 12%, transparent 25%),
    linear-gradient(45deg, 
      transparent 40%, 
      rgba(135, 206, 235, 0.2) 45%, 
      transparent 50%);
  background-size: 40% 30%, 30% 25%, 100% 20%;
  animation: neptuneClouds 40s linear infinite;
  top: 0;
  left: 0;
}

.neptune:hover {
  transform: scale(1.8);
  box-shadow: 
    0 0 18px rgba(135, 206, 235, 0.9),
    0 0 30px rgba(65, 105, 225, 0.7),
    inset 3px -3px 7px rgba(0, 0, 128, 0.9),
    inset -2px 2px 4px rgba(135, 206, 235, 0.5);
  z-index: 50;
}

@keyframes neptuneRotate {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 0px 0px, 0px 0px; }
  100% { background-position: 0px 0px, 27px 1px, 23px 2px, 21px 0px, 0px 100px, 0px 0px; }
}

@keyframes neptuneStorms {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 0px 0px, 0px 0px; }
  25% { background-position: 5px 2px, 0px 3px, 2px 0px, 6px 1px, 0px 25px, 0px 0px; }
  50% { background-position: 2px -1px, 4px 1px, -2px 3px, 2px -1px, 0px 50px, 0px 0px; }
  75% { background-position: -3px 1px, 1px -2px, 4px 2px, -1px 4px, 0px 75px, 0px 0px; }
  100% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 0px 100px, 0px 0px; }
}

@keyframes neptuneClouds {
  0% { background-position: 0px 0px, 2px 1px, 0px 0px; }
  100% { background-position: 40px 15px, 32px 13px, 100px 0px; }
}

/* Neptune's Moon System */
.neptune-moon-triton {
  position: absolute;
  will-change: transform;
  width: 2px;
  height: 2px;
  background: 
    /* Nitrogen ice surface */
    radial-gradient(circle, #f0f8ff 0%, #e6e6fa 30%, #b0c4de 70%, #4169e1 100%),
    /* Nitrogen geysers and streaks */
    radial-gradient(circle at 25% 35%, rgba(65, 105, 225, 0.6) 20%, transparent 40%),
    radial-gradient(circle at 75% 20%, rgba(176, 196, 222, 0.5) 15%, transparent 35%),
    linear-gradient(135deg, transparent 45%, rgba(65, 105, 225, 0.4) 50%, transparent 55%);
  background-size: 100% 100%, 40% 35%, 30% 25%, 80% 15%;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(65, 105, 225, 0.7);
  animation: tritonOrbit 26s linear infinite reverse; /* Retrograde orbit */
  transform-origin: 22px 0px;
  top: -1px;
  left: 21px;
}

.neptune-moon-proteus {
  position: absolute;
  will-change: transform;
  width: 1px;
  height: 1px;
  background: 
    /* Dark, heavily cratered surface */
    radial-gradient(circle, #2f4f4f 0%, #1c1c1c 50%, #2f4f4f 100%),
    /* Impact features */
    radial-gradient(circle at 30% 30%, rgba(105, 105, 105, 0.5) 20%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(128, 128, 128, 0.4) 15%, transparent 30%);
  background-size: 100% 100%, 35% 30%, 25% 20%;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(47, 79, 79, 0.6);
  animation: proteusOrbit 5s linear infinite;
  transform-origin: 38px 0px;
  top: -0.5px;
  left: 37.5px;
}

/* Orbital animations for Neptune's moons */
@keyframes tritonOrbit {
  0% { transform: rotate(0deg) translateX(22px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(22px) rotate(-360deg); }
}

@keyframes proteusOrbit {
  0% { transform: rotate(0deg) translateX(38px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(38px) rotate(-360deg); }
}

/* Ceres - Dark cratered surface with bright salt deposits in Occator Crater */
.ceres-orbit {
  width: 560px;
  height: 560px;
}

.ceres {
  width: 8px;
  height: 8px;
  position: relative;
  background: 
    /* Bright salt deposits (Occator Crater) */
    radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.9) 8%, transparent 15%),
    radial-gradient(circle at 30% 70%, rgba(240, 240, 240, 0.7) 5%, transparent 10%),
    radial-gradient(circle at 80% 20%, rgba(230, 230, 230, 0.6) 4%, transparent 8%),
    /* Impact craters */
    radial-gradient(circle at 20% 30%, rgba(28, 28, 28, 0.9) 6%, transparent 12%),
    radial-gradient(circle at 70% 80%, rgba(47, 79, 79, 0.8) 5%, transparent 10%),
    radial-gradient(circle at 45% 15%, rgba(28, 28, 28, 0.7) 4%, transparent 8%),
    /* Surface texture variations */
    radial-gradient(circle at 85% 60%, rgba(105, 105, 105, 0.6) 15%, transparent 25%),
    radial-gradient(circle at 15% 80%, rgba(47, 79, 79, 0.5) 12%, transparent 20%),
    /* Base dark surface */
    radial-gradient(circle, #696969 0%, #2f4f4f 30%, #1c1c1c 70%, #000000 100%);
  background-size: 
    20% 20%, 15% 15%, 12% 12%,
    18% 18%, 16% 16%, 12% 12%,
    30% 25%, 25% 20%,
    100% 100%;
  box-shadow: 
    /* Subtle glow from bright spots */
    0 0 6px rgba(105, 105, 105, 0.5),
    0 0 3px rgba(255, 255, 255, 0.2),
    /* Surface depth */
    inset 1px -1px 3px rgba(0, 0, 0, 0.8),
    inset -0.5px 0.5px 1px rgba(105, 105, 105, 0.3);
  animation: ceresRotate 9s linear infinite;
  top: 100px;
  left: 380px;
}

.ceres::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Water ice deposits and subsurface activity */
  background: 
    radial-gradient(circle at 60% 40%, rgba(200, 220, 255, 0.4) 6%, transparent 12%),
    radial-gradient(circle at 30% 70%, rgba(220, 230, 255, 0.3) 4%, transparent 8%);
  background-size: 25% 25%, 20% 20%;
  animation: ceresIce 15s ease-in-out infinite alternate;
  top: 0;
  left: 0;
}

.ceres:hover {
  transform: scale(2.2);
  box-shadow: 
    0 0 10px rgba(105, 105, 105, 0.7),
    0 0 6px rgba(255, 255, 255, 0.4),
    inset 2px -2px 4px rgba(0, 0, 0, 0.9),
    inset -1px 1px 2px rgba(105, 105, 105, 0.5);
  z-index: 50;
}

@keyframes ceresRotate {
  0% { background-position: 0px 0px, 2px 1px, -1px 2px, 3px 0px, 1px -1px, 2px 1px, 0px 0px, 1px 2px, 0px 0px; }
  100% { background-position: 20px 0px, 17px 1px, 14px 2px, 21px 0px, 19px -1px, 20px 1px, 30px 0px, 26px 2px, 0px 0px; }
}

@keyframes ceresIce {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Vesta - Rough grooved texture with complex hummocky terrain and evidence of water flow */
.vesta-orbit {
  width: 580px;
  height: 580px;
}

.vesta {
  width: 7px;
  height: 7px;
  position: relative;
  background: 
    /* Groove patterns and troughs */
    repeating-linear-gradient(45deg,
      transparent 0%, transparent 20%,
      rgba(47, 79, 79, 0.7) 25%, rgba(47, 79, 79, 0.7) 30%,
      transparent 35%, transparent 55%),
    repeating-linear-gradient(-45deg,
      transparent 0%, transparent 30%,
      rgba(105, 105, 105, 0.6) 35%, rgba(105, 105, 105, 0.6) 40%,
      transparent 45%, transparent 65%),
    /* Water flow gully features */
    linear-gradient(30deg,
      transparent 40%,
      rgba(169, 169, 169, 0.5) 45%,
      rgba(211, 211, 211, 0.6) 50%,
      rgba(169, 169, 169, 0.5) 55%,
      transparent 60%),
    /* Impact craters and hummocky terrain */
    radial-gradient(circle at 25% 25%, rgba(47, 79, 79, 0.8) 15%, transparent 25%),
    radial-gradient(circle at 75% 70%, rgba(105, 105, 105, 0.7) 12%, transparent 20%),
    radial-gradient(circle at 60% 40%, rgba(47, 79, 79, 0.6) 8%, transparent 15%),
    /* Surface color variations */
    radial-gradient(circle at 30% 80%, rgba(211, 211, 211, 0.8) 20%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(169, 169, 169, 0.7) 15%, transparent 30%),
    /* Base rocky surface */
    radial-gradient(circle, #d3d3d3 0%, #a9a9a9 25%, #696969 60%, #2f4f4f 100%);
  background-size: 
    100% 20%, 100% 25%,
    80% 30%,
    30% 30%, 25% 25%, 20% 20%,
    40% 35%, 35% 30%,
    100% 100%;
  box-shadow: 
    /* Rocky surface glow */
    0 0 5px rgba(211, 211, 211, 0.6),
    /* Complex surface depth */
    inset 1px -1px 2px rgba(47, 79, 79, 0.8),
    inset -0.5px 0.5px 1px rgba(211, 211, 211, 0.4);
  animation: vestaRotate 5s linear infinite;
  top: 50px;
  left: 410px;
}

.vesta::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Surface roughness and additional groove detail */
  background: 
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0%, transparent 30%,
      rgba(105, 105, 105, 0.3) 35%, rgba(105, 105, 105, 0.3) 40%,
      transparent 45%, transparent 75%);
  background-size: 60% 60%;
  animation: vestaGrooves 12s linear infinite;
  top: 0;
  left: 0;
}

.vesta:hover {
  transform: scale(2.5);
  box-shadow: 
    0 0 8px rgba(211, 211, 211, 0.8),
    inset 2px -2px 3px rgba(47, 79, 79, 0.9),
    inset -1px 1px 2px rgba(211, 211, 211, 0.6);
  z-index: 50;
}

@keyframes vestaRotate {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px, 2px 1px, -1px 2px, 3px 0px, 0px 0px, 1px 2px, 0px 0px; }
  100% { background-position: 20px 0px, -20px 0px, 24px 0px, 17px 1px, 14px 2px, 21px 0px, 40px 0px, 36px 2px, 0px 0px; }
}

@keyframes vestaGrooves {
  0% { background-position: 0px 0px; }
  100% { background-position: 60px 0px; }
}

/* Travel Track Path */
.travel-track {
  position: absolute;
  stroke: rgba(0, 255, 255, 0.6);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 5, 5;
  animation: trackGlow 3s ease-in-out infinite alternate;
}

/* Interactive Control Points */
.control-point {
  position: absolute;
  width: 16px;
  height: 16px;
  cursor: move;
  z-index: 100;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  pointer-events: auto;
  /* Debug border - remove this line if not needed */
  border: 1px solid rgba(255, 0, 0, 0.2);
}

.control-point::before {
  content: '';
  position: absolute;
  width: 2.4px;
  height: 2.4px;
  background: rgba(255, 255, 0, 0.8);
  border: 0.4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}

.control-point:hover::before {
  background: rgba(255, 255, 0, 1);
  transform: translate(-50%, -50%) scale(2);
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.8);
}

.control-point.dragging::before {
  background: rgba(255, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(2.5);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
}

/* Control Panel - Zoom Invariant */
.track-controls {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-family: monospace;
  z-index: 200;
  /* Zoom-invariant properties */
  transform: scale(1);
  transform-origin: bottom left;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  font-size: 12px;
}

/* Planet Control Panel - Zoom Invariant */
.planet-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-family: monospace;
  z-index: 200;
  /* Zoom-invariant properties */
  transform: scale(1);
  transform-origin: bottom right;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  font-size: 12px;
}

.planet-controls h3 {
  margin-bottom: 8px;
  color: #ff6b35;
  font-size: 13px;
  text-align: center;
}

.track-controls h3 {
  margin-bottom: 8px;
  color: #00ffff;
  font-size: 13px;
  text-align: center;
}

.track-controls button,
.planet-controls button {
  background: rgba(0, 255, 255, 0.8);
  color: black;
  border: none;
  padding: 8px 12px;
  margin: 3px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
  font-size: 11px;
  white-space: nowrap;
  min-height: 32px;
}

.track-controls button:hover,
.planet-controls button:hover {
  background: rgba(0, 255, 255, 1);
  transform: scale(1.05);
}

.track-controls button:active,
.planet-controls button:active {
  transform: scale(0.95);
}

.planet-controls button {
  background: rgba(255, 107, 53, 0.8);
  color: white;
}

.planet-controls button:hover {
  background: rgba(255, 107, 53, 1);
}

.track-controls .status,
.planet-controls .status {
  margin-top: 8px;
  padding: 4px;
  border-radius: 3px;
  font-size: 10px;
  text-align: center;
  min-height: 20px;
}

.track-controls .status.success,
.planet-controls .status.success {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
}

.track-controls .status.error,
.planet-controls .status.error {
  background: rgba(255, 0, 0, 0.2);
  color: #ff6666;
}

@keyframes trackGlow {
  0% { stroke: rgba(0, 255, 255, 0.4); }
  100% { stroke: rgba(0, 255, 255, 0.8); }
}

/* Browser Zoom Compensation */
@media screen and (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
  .track-controls, .planet-controls {
    transform: scale(0.8);
  }
}

@media screen and (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx) {
  .track-controls, .planet-controls {
    transform: scale(0.67);
  }
}

@media screen and (min-resolution: 2dppx) and (max-resolution: 2.99dppx) {
  .track-controls, .planet-controls {
    transform: scale(0.5);
  }
}

@media screen and (min-resolution: 3dppx) {
  .track-controls, .planet-controls {
    transform: scale(0.33);
  }
}

/* Alternative approach using zoom detection via viewport units */
.track-controls, .planet-controls {
  /* Force consistent sizing regardless of browser zoom */
  font-size: max(10px, min(12px, 1vw));
}

.track-controls button, .planet-controls button {
  font-size: max(9px, min(11px, 0.8vw));
}

.track-controls h3, .planet-controls h3 {
  font-size: max(11px, min(13px, 1vw));
}

/* Traveling Rock */
.traveling-rock {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff6b35, #ff3d00);
  border-radius: 50%;
  box-shadow: 
    0 0 15px rgba(255, 107, 53, 0.8),
    0 0 30px rgba(255, 61, 0, 0.6),
    0 0 45px rgba(255, 61, 0, 0.4);
  animation: rockTravel 90s linear infinite;
  z-index: 20;
}

.traveling-rock::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.8), transparent);
  top: 3px;
  left: -15px;
  border-radius: 50%;
  animation: thruster 0.1s ease-in-out infinite alternate;
}

@keyframes thruster {
  0% { opacity: 0.6; transform: scaleX(0.8); }
  100% { opacity: 1; transform: scaleX(1.2); }
}

@keyframes rockTravel {
  0% { 
    left: 900px; 
    top: 480px;
    transform: rotate(0deg);
  }
  12.5% { 
    left: 1060px; 
    top: 480px;
    transform: rotate(45deg);
  }
  25% { 
    left: 1060px; 
    top: 360px;
    transform: rotate(90deg);
  }
  37.5% { 
    left: 1080px; 
    top: 300px;
    transform: rotate(135deg);
  }
  50% { 
    left: 1090px; 
    top: 140px;
    transform: rotate(270deg);
  }
  62.5% { 
    left: 840px; 
    top: 380px;
    transform: rotate(360deg);
  }
  75% { 
    left: 1100px; 
    top: 380px;
    transform: rotate(450deg);
  }
  87.5% { 
    left: 1200px; 
    top: 40px;
    transform: rotate(540deg);
  }
  100% { 
    left: 900px; 
    top: 480px;
    transform: rotate(720deg);
  }
}

/* Waypoint Markers */
.waypoint {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 0, 0.8);
  border-radius: 50%;
  animation: wayPointPulse 2s ease-in-out infinite;
  z-index: 15;
}

@keyframes wayPointPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.8);
  }
  50% { 
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(255, 255, 0, 1);
  }
}

.waypoint-earth {
  left: 897px;
  top: 477px;
}

.waypoint-mars {
  left: 1057px;
  top: 477px;
}

.waypoint-ceres {
  left: 1057px;
  top: 357px;
}

.waypoint-vesta {
  left: 1077px;
  top: 297px;
}

.waypoint-jupiter {
  left: 1087px;
  top: 137px;
}

.waypoint-saturn {
  left: 837px;
  top: 377px;
}

.waypoint-uranus {
  left: 1097px;
  top: 377px;
}

.waypoint-neptune {
  left: 1197px;
  top: 37px;
}

/* Asteroid Belt */
.asteroid-belt {
  position: absolute;
  width: 560px;
  height: 560px;
  border: 1px dashed rgba(139, 69, 19, 0.3);
  border-radius: 50%;
}

.asteroid {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8b4513;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(139, 69, 19, 0.8);
}

.asteroid:nth-child(1) { top: 10%; left: 20%; }
.asteroid:nth-child(2) { top: 30%; left: 70%; }
.asteroid:nth-child(3) { top: 60%; left: 40%; }
.asteroid:nth-child(4) { top: 80%; left: 10%; }
.asteroid:nth-child(5) { top: 45%; left: 85%; }

/* Enhanced Stars Background */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.star:nth-child(3n) {
  animation-duration: 4s;
  background: #ffffcc;
}

.star:nth-child(5n) {
  animation-duration: 2.5s;
  background: #ccddff;
}

.star:nth-child(7n) {
  animation-duration: 3.5s;
  width: 1.5px;
  height: 1.5px;
  background: #ffffff;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Enhanced space environment */
body {
  background: 
    radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 30%, #0f0f23 70%, #0a0a0a 100%),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(100, 149, 237, 0.03) 0%, transparent 50%);
}

/* Enhanced Planet Labels */
.planet-label {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  text-shadow: 
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7);
  font-weight: bold;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.planet:hover .planet-label {
  opacity: 1;
  transform: translateX(-50%) scale(1.1);
  color: rgba(255, 255, 255, 1);
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7);
}

/* Global planet hover enhancement */
.planet {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.planet:hover {
  filter: brightness(1.1) contrast(1.05);
}

/* Performance optimizations */
.planet,
.planet::before,
.planet::after {
  will-change: transform, background-position;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Ensure smooth animations across all planets */
@media (prefers-reduced-motion: no-preference) {
  .planet {
    animation-timing-function: linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planet,
  .planet::before,
  .planet::after {
    animation: none !important;
  }
}

/* Enhanced Traveling Rocket */
.traveling-rocket {
  position: absolute;
  width: 20px;
  height: 20px;
  animation: rocketTravel 90s linear infinite;
  z-index: 20;
  transform-origin: center center;
}

.rocket-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.rocket-image {
  position: absolute;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(100, 255, 218, 0.6)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  transform-origin: center center;
  mix-blend-mode: normal;
  z-index: 2;
}

/* Fallback rocket shape if image doesn't load */
.rocket-container.fallback-rocket::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(0deg, 
    #64FFDA 0%, 
    #ffffff 15%, 
    #64FFDA 30%, 
    #8892B0 50%, 
    #64FFDA 70%, 
    #ffffff 85%, 
    #64FFDA 100%);
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  box-shadow: 
    0 0 8px rgba(100, 255, 218, 0.6),
    0 0 4px rgba(255, 255, 255, 0.4),
    inset 0 0 4px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* Flame Trail Effects */
.flame-trail {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.flame {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flameFlicker 0.15s ease-in-out infinite alternate;
  transform-origin: center top;
}

.flame-1 {
  width: 4px;
  height: 12px;
  background: linear-gradient(0deg, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 140, 0, 0.9) 30%,
    rgba(255, 69, 0, 0.8) 70%,
    transparent 100%);
  left: -2px;
  bottom: 0;
  animation-delay: 0s;
}

.flame-2 {
  width: 6px;
  height: 8px;
  background: linear-gradient(0deg, 
    rgba(255, 200, 0, 0.8) 0%,
    rgba(255, 69, 0, 0.7) 60%,
    transparent 100%);
  left: -3px;
  bottom: 0;
  animation-delay: 0.05s;
}

.flame-3 {
  width: 3px;
  height: 6px;
  background: linear-gradient(0deg, 
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 140, 0, 0.6) 50%,
    transparent 100%);
  left: -1.5px;
  bottom: 0;
  animation-delay: 0.1s;
}

@keyframes flameFlicker {
  0% { 
    opacity: 0.8;
    transform: scaleY(1) scaleX(0.9);
  }
  100% { 
    opacity: 1;
    transform: scaleY(1.2) scaleX(1.1);
  }
}

@keyframes rocketTravel {
  0% { 
    left: 900px; 
    top: 480px;
    transform: rotate(0deg);
  }
  12.5% { 
    left: 1060px; 
    top: 480px;
    transform: rotate(45deg);
  }
  25% { 
    left: 1060px; 
    top: 360px;
    transform: rotate(90deg);
  }
  37.5% { 
    left: 1080px; 
    top: 300px;
    transform: rotate(135deg);
  }
  50% { 
    left: 1090px; 
    top: 140px;
    transform: rotate(270deg);
  }
  62.5% { 
    left: 840px; 
    top: 380px;
    transform: rotate(360deg);
  }
  75% { 
    left: 700px; 
    top: 500px;
    transform: rotate(450deg);
  }
  87.5% { 
    left: 800px; 
    top: 520px;
    transform: rotate(495deg);
  }
  100% { 
    left: 900px; 
    top: 480px;
    transform: rotate(720deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .solar-system {
    transform: scale(0.6);
  }
}

@media (max-width: 480px) {
  .solar-system {
    transform: scale(0.4);
  }
}