/* =======================================================
   Interactive Solar System CSS
   Planets, Moon, Habitable Zone, Starfield
======================================================= */

body {
  margin: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Solar System container */
.solar-system {
  position: relative;
  width: 900px;
  height: 900px;
  z-index: 2;
}

/* Sun */
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3b0, #ff9800, #ff6f00);
  box-shadow:
    0 0 40px #ff9800,
    0 0 80px #ff6f00,
    0 0 140px #ff3d00;
}

/* Habitable Zone */
.habitable-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 120, 0.12) 55%,
    rgba(0, 255, 120, 0.05) 65%,
    rgba(0, 255, 120, 0) 72%
  );
  box-shadow: 0 0 40px rgba(0, 255, 120, 0.25);
  pointer-events: none;
}

/* Orbits */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Planets */
.planet {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Planet Colors and Sizes */
.mercury { width: 10px; height: 10px; background: radial-gradient(circle at 30% 30%, #bbb, #444); }
.venus   { width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #f5d7a1, #a8752c); }
.earth   { width: 20px; height: 20px; background: radial-gradient(circle at 30% 30%, #4fc3f7, #0b3d91); }
.mars    { width: 14px; height: 14px; background: radial-gradient(circle at 30% 30%, #ff8a65, #8e0000); }
.jupiter { width: 40px; height: 40px; background: radial-gradient(circle at 30% 30%, #ffe0b2, #6d4c41); }
.saturn  { width: 36px; height: 36px; background: radial-gradient(circle at 30% 30%, #fff3e0, #a1887f); }
.uranus  { width: 28px; height: 28px; background: radial-gradient(circle at 30% 30%, #b2ebf2, #004d40); }
.neptune { width: 26px; height: 26px; background: radial-gradient(circle at 30% 30%, #90caf9, #0d47a1); }

/* Saturn Rings */
.saturn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(20deg);
}

/* Moons */
.moon-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

.moon {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 30% 30%, #eee, #666);
}

/* Spin Animation */
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Starfield Canvas */
#space {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}