/* Sternenfänger – Gestaltung (statische Seite, ohne Framework und ohne externe Ressourcen) */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0b0f1a;
  color: #e8ecf5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Layout horizontal zentriert */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  margin: 0 0 8px;
  font-size: 1.8rem;
}

/* Punkteanzeige */
.score-line {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.score-line #score {
  font-weight: bold;
  color: #ffd84d;
}

/* Spielfeld: feste Größe, kein Padding, Rahmen per outline/box-shadow, damit die Größe stabil bleibt */
#playfield {
  position: relative;
  width: 480px;
  height: 600px;
  overflow: hidden;
  box-sizing: content-box;
  padding: 0;
  border: 0;
  margin: 0;
  background: linear-gradient(to bottom, #050816 0%, #0d1535 60%, #1b2350 100%);
  outline: 3px solid #3b4a8c;
  box-shadow: 0 0 24px rgba(80, 110, 255, 0.35);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

/* Korb am unteren Rand, Position wird per Skript gesetzt */
#basket {
  position: absolute;
  width: 80px;
  height: 24px;
  background: linear-gradient(to bottom, #b9792f, #7a4a16);
  border-radius: 0 0 40px 40px / 0 0 24px 24px;
  box-shadow: inset 0 3px 0 #d9a05b;
}

/* Fallender Stern: gelber fünfzackiger Stern per clip-path */
.star {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #ffd84d;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

/* Neustart-Schaltfläche */
button#restart {
  margin-top: 16px;
  padding: 8px 20px;
  font-size: 1rem;
  color: #0b0f1a;
  background: #ffd84d;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button#restart:hover {
  background: #ffe780;
}

button#restart:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

footer {
  margin-top: auto;
  padding: 12px;
  font-size: 0.75rem;
  color: #8892b0;
}