/* === RESET & LAYOUT === */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: radial-gradient(circle at center, #000 80%, #111);
  overflow: hidden;
  position: relative;
  cursor: crosshair;
  font-family: 'VT323', monospace;
}

/* === STARS === */
#stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 4px white;
}

/* === MOONS === */
.moon {
  position: absolute;
  width: 64px;
  height: 64px;
  z-index: 1;
  pointer-events: none;
}

/* === UI BAR === */
#ui-bar {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* === MOON COUNTER === */
#moon-counter {
	font-family: monospace;
  font-size: 21px;
  color: #00ff66;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border: 1px solid #00ff66;
  text-shadow: 0 0 5px #00ff66;
  letter-spacing: 2px;
  user-select: none;
}

/* === COUNTER FLASH EFFECT === */
@keyframes flashCounter {
  0%, 100% {
    background-color: rgba(0, 0, 0, 0.6);
    color: #00ff66;
    border-color: #00ff66;
    text-shadow: 0 0 5px #00ff66;
  }
  50% {
    background-color: #00ff66;
    color: black;
    border-color: black;
    text-shadow: 0 0 20px #00ff66;
  }
}

.flash {
  animation: flashCounter 0.4s ease-in-out 2;
}

/* === RESET BUTTON === */
#reset-button {
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #00ff66;
  border: 1px solid #00ff66;
  padding: 6px 12px;
  text-shadow: 0 0 5px #00ff66;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#reset-button:hover {
  background-color: #00ff66;
  color: black;
  border-color: black;
  text-shadow: 0 0 10px black;
}