.scene .stars-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.scene[data-time="night"] .stars-overlay {
  opacity: 1;
}

.scene .star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.8);
  animation: twinkle ease-in-out infinite;
}
.scene .star.small  { width: 2px; height: 2px; }
.scene .star.medium { width: 3px; height: 3px; }
.scene .star.large  { width: 4px; height: 4px; box-shadow: 0 0 10px 2px rgba(255,255,255,0.9); }

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

.scene .shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.9);
  opacity: 0;
  animation: shoot 6s linear infinite;
}
.scene .shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
  transform: translateY(-50%);
}

@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-45deg); }
  5%   { opacity: 1; }
  15%  { opacity: 0; transform: translate(-250px, 250px) rotate(-45deg); }
  100% { opacity: 0; }
}

.scene .shooting-star-1 {
  top: 10%;
  left: 70%;
}

.scene .shooting-star-2 {
  top: 30%;
  left: 40%;
  animation-delay: 3s;
}

.scene .moon {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffdf0, #f4ecd8 60%, #e0d5b8 100%);
  box-shadow:
    0 0 40px 10px rgba(255, 250, 220, 0.5),
    inset -15px -10px 20px rgba(0,0,0,0.25);
}
.scene .moon::before,
.scene .moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
}
.scene .moon::before {
  width: 18px; height: 18px;
  top: 20px; left: 15px;
}
.scene .moon::after {
  width: 10px; height: 10px;
  top: 50px; left: 45px;
}

.scene .planet {
  position: absolute;
  border-radius: 50%;
}
.scene .planet.ringed::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 40%;
  border: 3px solid rgba(255, 220, 180, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}
.scene .planet-1 {
  top: 65%;
  left: 8%;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 35% 35%, #ff9a76, #c9502f 70%, #7a2d17 100%);
  box-shadow: 0 0 25px 5px rgba(255, 130, 80, 0.35);
}
.scene .planet-2 {
  top: 20%;
  left: 15%;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 35% 35%, #a5d8ff, #5b9bd5 70%, #2e5f8a 100%);
  box-shadow: 0 0 15px 3px rgba(120, 180, 255, 0.4);
}
.scene .planet-3 {
  top: 75%;
  right: 15%;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at 35% 35%, #f5e0a3, #d9b45c 70%, #8a6a2f 100%);
  box-shadow: 0 0 20px 4px rgba(240, 210, 130, 0.35);
}