@@ -1,70 +1,65 @@
body {
  margin: 0; padding: 0; overflow: hidden;
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(ellipse at center, #000011, #000022);
  color: #0ff;
  min-height: 100vh;
  transition: background 1.5s;
}
#starfield {
  position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1;
  display: block;
}
#topSection {
  margin-top: 20px; display: flex; flex-direction: column; align-items: center;
  z-index: 10;
}
#phaseTitle {
  font-size: 1.5em; margin-top: 10px; text-shadow: 0 0 10px #0ff;
}
#buttons {
  margin-top: 15px; display: flex; gap: 15px;
}
button {
  background: #0ff; border: none; padding: 10px 20px; border-radius: 8px;
  cursor: pointer; font-family: 'Orbitron'; font-weight: bold; font-size: 1em;
  box-shadow: 0 0 10px #0ff inset;
  transition: 0.2s;
}
button:hover { transform: scale(1.05); box-shadow: 0 0 20px #0ff inset; }
#orbitContainer {
  position: absolute; top:27%; left:50%; transform:translateX(-50%);
  width: 400px; height: 400px;
}
#orbitPath {
  position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width: 320px; height: 320px; border-radius:50%; border:2px dashed rgba(0,255,255,0.4);
}
#moonWrapper {
  position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width: 140px; height: 140px; border-radius:50%; cursor:pointer;
  box-shadow:0 0 20px #0ff inset;
  transition: all 0.3s;
  background: transparent;
  z-index: 2;
}
#moonImg {
  width: 140px; height: 140px; object-fit:cover; border-radius:50%;
}

/* Black Hole Overlay and Nebula background */
#blackHoleOverlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: radial-gradient(circle at center, #000 75%, transparent 100%);
  z-index: 10000;
  pointer-events: none;
  opacity: 0.96;
  display: none;
}

@keyframes blackHoleExpand {
  0%   { transform: scale(0);   opacity: 1; }
  70%  { transform: scale(2.5); opacity: 1; }
  100% { transform: scale(6);   opacity: 0.96; }
}


body.nebula-bg {
  background: radial-gradient(ellipse at center, #2d005e 0%, #0e0030 70%, #020012 100%);
  transition: background 1.5s;
}

/* --- Black Hole Button: Top Right, Small, Pulsing --- */
#blackHoleBtn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10001;
  padding: 6px 10px;
  font-size: 0.8em;
  opacity: 0.7;
  background: #0ff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 6px #0ff inset;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  cursor: pointer;
  animation: pulse 2.5s infinite ease-in-out;
  transition: all 0.3s ease-in-out;
}
#blackHoleBtn:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 12px #0ff inset;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 6px #0ff inset; }
  50% { transform: scale(1.1); box-shadow: 0 0 12px #0ff inset; }
  100% { transform: scale(1); box-shadow: 0 0 6px #0ff inset; }
}