body { margin: 0; overflow: hidden; background: black; }

canvas {
  position: fixed;
  top: 0; left: 0;
  z-index: 0;
}

#hud {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  color: #0ff; font-family: monospace; background: rgba(0,0,0,0.5);
  padding: 8px 12px; border-radius: 6px;
  pointer-events: auto;
}
#clock-readout { margin-bottom: 6px; }

#intro-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
  background: rgba(0, 5, 10, 0.9);
  border: 1px solid #0ff3;
  border-radius: 10px;
  padding: 24px 28px;
  color: #cffefe;
  font-family: monospace;
  z-index: 20;
  pointer-events: auto;
}
#intro-panel h1 {
  color: #0ff;
  font-size: 1.3em;
  margin-top: 0;
}
#intro-panel ul {
  padding-left: 20px;
  margin: 12px 0;
}
#intro-panel li {
  margin-bottom: 8px;
  line-height: 1.4;
}
#intro-panel .intro-hint {
  color: #7dd;
  font-size: 0.85em;
  margin-bottom: 0;
}
#intro-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: none;
  color: #0ff;
  font-size: 1.4em;
  cursor: pointer;
  z-index: 21;
}

.galactic-center-label {
  color: #ff6666;
  font-family: monospace;
  font-size: 13px;
  text-shadow: 0 0 4px black;
  white-space: nowrap;
}