/* Grundlayout: kein Rand, dunkler Hintergrund, Systemschrift */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #0b0d1a;
  color: #e8eaf6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Spielbereich: feste Breite, horizontal zentriert */
#game {
  width: 640px;
  margin: 0 auto;
}

/* Kopfzeile mit Punktestand und Neustart-Button (immer sichtbar) */
#hud {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

#score {
  font-weight: bold;
}

#restart {
  cursor: pointer;
}

/* Spielfeld: feste Pixelmaße passend zu FIELD_WIDTH und FIELD_HEIGHT in src/logic.js */
#playfield {
  position: relative;
  width: 640px;
  height: 480px;
  overflow: hidden;
  box-sizing: content-box;
  border: 0;
  /* Nachthimmel als Farbverlauf */
  background: linear-gradient(to bottom, #050816 0%, #111a3d 60%, #1c2a5e 100%);
}

/* Korb: Größe und Startposition passend zu BASKET_WIDTH, BASKET_HEIGHT und BASKET_Y */
#basket {
  position: absolute;
  width: 80px;
  height: 20px;
  left: 280px;
  top: 460px;
  background: #c98a4b;
  border-radius: 0 0 12px 12px;
}

/* Stern: wird zur Laufzeit per Skript im Spielfeld erzeugt */
.star {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ffd93b;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Fußzeile */
footer {
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  color: #8f94b8;
}