/* =============================================================================
   Sterne-Fänger – Hauptstylesheet
   Spielfeld 480 x 640 px (logisch), skaliert responsiv auf kleineren Bildschirmen
   ============================================================================= */

/* --- Grundlayout ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Dunkler Nachthimmel als Seitenhintergrund */
body {
  margin: 0;
  padding: 0;
  background-color: #0b0e1a;
  color: #e8eaf6;
  font-family: system-ui, sans-serif;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* --- Spielcontainer (#spiel) ----------------------------------------------- */

/* Zentriert das Spiel und stapelt HUD, Canvas und Hinweis vertikal */
#spiel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 0.5rem 0 1rem;
}

/* --- HUD-Kopfzeile (#hud) -------------------------------------------------- */

#hud {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background-color: #131728;
  border-bottom: 1px solid #2a2f52;
  flex-wrap: wrap;
}

/* Einzelner HUD-Eintrag (Label + Wert) */
.hud-eintrag {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}

.hud-label {
  font-size: 0.85rem;
  color: #9098c8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Punktestand und Verpasst-Zaehler: gross und gut lesbar */
#punktestand,
#verpasst {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f0f4ff;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Neustart-Button: mind. 44 x 44 px Tippziel, ausreichend Kontrast */
#neustart {
  margin-left: auto;
  padding: 0.4rem 1rem;
  min-width: 44px;
  min-height: 44px;
  background-color: #3a4080;
  color: #f0f4ff;
  border: 2px solid #5a62b8;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#neustart:hover,
#neustart:focus-visible {
  background-color: #4d55a8;
  border-color: #8890d8;
}

/* Klar sichtbarer Fokusring fuer Tastaturnavigation */
#neustart:focus-visible {
  outline: 3px solid #a0aaff;
  outline-offset: 2px;
}

/* --- Canvas (#spielfeld) --------------------------------------------------- */

/* Responsiv skalieren; Seitenverhaeltnis 480:640 = 3:4 beibehalten */
#spielfeld {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 480 / 640;
  touch-action: none;
  border: 1px solid #2a2f52;
}

/* --- Canvas-Wrapper fuer Overlay-Positionierung ----------------------------- */

#spielfeld-bereich {
  position: relative;
  width: 100%;
  max-width: 480px;
}

/* --- Overlay (#overlay) ---------------------------------------------------- */

/* Halbtransparente Abdeckung ueber dem Canvas */
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 480 / 640;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(11, 14, 26, 0.78);
  text-align: center;
  padding: 1.5rem;
}

/* [hidden]-Attribut: Overlay vollstaendig ausblenden */
#overlay[hidden] {
  display: none;
}

#overlay-text {
  margin: 0;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 600;
  color: #e8eaf6;
  line-height: 1.4;
}

/* Endpunktestand - nur nach Spielende sichtbar */
#endstand {
  margin: 0;
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  color: #c8ccf0;
  line-height: 1.5;
  white-space: pre-line;
}

/* --- Steuerungshinweis (#steuerung-hinweis) -------------------------------- */

#steuerung-hinweis {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #6068a0;
  text-align: center;
  padding: 0 0.5rem;
}

#steuerung-hinweis kbd {
  display: inline-block;
  padding: 0.1em 0.35em;
  border: 1px solid #3a4080;
  border-radius: 3px;
  font-size: 0.85em;
  background-color: #1a1f38;
  color: #a0aaff;
}

/* --- Barrierefreiheit: Bewegung reduzieren --------------------------------- */

/* Alle CSS-Uebergaenge bei prefers-reduced-motion deaktivieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}