/* ===================================================================
   Sternenfänger – Hauptstylesheet
   Keine externen Schriften, kein Framework, kein Preprozessor
   =================================================================== */

/* --- Farbpalette als Custom Properties ---------------------------- */
:root {
  --farbe-hintergrund:  #0d0d2b;  /* Nachthimmel */
  --farbe-text:         #e8e8ff;  /* helles Blauweiss */
  --farbe-akzent:       #7b8cde;  /* gedämpftes Indigo */
  --farbe-spielfeld:    #11113a;  /* leicht helleres Dunkel für den Spielbereich */
  --farbe-korb:         #c0882a;  /* warmes Goldbraun (Korbgeflecht) */
  --farbe-stern:        #ffe94d;  /* Sterngelb */
  --farbe-overlay-bg:   rgba(0, 0, 10, 0.78);
  --farbe-btn:          #2a3170;
  --farbe-btn-hover:    #3d4899;
  --farbe-btn-fokus:    #7b8cde;
  --radius-spielfeld:   10px;
}

/* --- Reset & Grundlayout ----------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: system-ui, sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  gap: 0.75rem;
}

/* --- Kopfzeile ---------------------------------------------------- */
header h1 {
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--farbe-stern);
  text-shadow: 0 0 12px rgba(255, 233, 77, 0.45);
}

/* --- Statusleiste ------------------------------------------------- */
#status {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Neustart-Schaltfläche */
#restart {
  background-color: var(--farbe-btn);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-akzent);
  border-radius: 6px;
  padding: 0.35rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

#restart:hover {
  background-color: var(--farbe-btn-hover);
}

#restart:focus-visible {
  outline: 2px solid var(--farbe-btn-fokus);
  outline-offset: 3px;
}

/* --- Spielfeld ---------------------------------------------------- */
#playfield {
  position: relative;
  overflow: hidden;
  /* Breite/Höhe werden zusätzlich inline vom Renderer gesetzt */
  width: 480px;
  height: 540px;
  background-color: var(--farbe-spielfeld);
  border-radius: var(--radius-spielfeld);
  border: 1px solid var(--farbe-akzent);
  /* Tastaturfokus sichtbar machen */
  outline: none;
}

#playfield:focus-visible {
  outline: 3px solid var(--farbe-btn-fokus);
  outline-offset: 2px;
}

/* --- Korb --------------------------------------------------------- */
#basket {
  position: absolute;
  bottom: 0;
  left: 0;
  will-change: transform;
  background-color: var(--farbe-korb);
  /* abgerundete Ober-Ecken erzeugen Korbform */
  border-radius: 6px 6px 3px 3px;
  /* Grösse wird inline vom Renderer gesetzt; Fallback: */
  width: 90px;
  height: 24px;
}

/* --- Stern -------------------------------------------------------- */
.stern {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  /* Grösse wird inline gesetzt; Fallback: */
  width: 24px;
  height: 24px;
  background-color: var(--farbe-stern);
  /* Fünfzackiger Stern via clip-path */
  clip-path: polygon(
    50%  0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
     2% 35%,
    39% 35%
  );
}

/* --- Game-Over-Overlay ------------------------------------------- */
#gameover {
  position: absolute;
  inset: 0;
  /* Overlay liegt über dem Spielfeld – JS positioniert es relativ zum Spielfeld
     via inline-style oder das Overlay wird als Kind eingefügt; hier als
     eigenständiges Element direkt nach #playfield zentriert es sich
     über body-flex; für exakte Überlagerung setzt main.js position/size. */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--farbe-overlay-bg);
  border-radius: var(--radius-spielfeld);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.5;
  padding: 1.5rem;
  z-index: 10;
}

/* hidden-Attribut blendet das Overlay vollständig aus */
#gameover[hidden] {
  display: none;
}

#gameover-text {
  color: var(--farbe-text);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}