/* The app's own styles (dark-factory #812). The platform's theme.css comes first and offers the --theme-* custom
   properties (light and dark) and the utilities .container .prose .stack .cluster .card; style here, never there. */

/* Überschrift: kleiner Abstand, damit Kopf, Leiste und Spielfeld auf einen Bildschirm passen */
h1 {
  margin: 0;
}

/* Leiste mit Punktestand und Neustart-Knopf */
.game-bar {
  align-items: center;
  gap: 0.75rem;
}

.score-label {
  color: var(--theme-muted, #6b7280);
}

/* Punktestand: feste Ziffernbreite, damit nichts wackelt */
#score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}

/* Neustart-Knopf */
#restart {
  font: inherit;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--theme-border, #9ca3af);
  border-radius: 6px;
  background: var(--theme-surface, #f3f4f6);
  color: var(--theme-text, #111827);
  cursor: pointer;
}

#restart:hover {
  background: var(--theme-accent, #2563eb);
  color: var(--theme-accent-contrast, #ffffff);
}

/* Sichtbarer Fokusrahmen für die Tastaturbedienung */
#restart:focus-visible {
  outline: 3px solid var(--theme-accent, #2563eb);
  outline-offset: 2px;
}

/* Spielfeld: feste Größe (entspricht FIELD_WIDTH/FIELD_HEIGHT in game-config.js) */
#playfield {
  position: relative;
  width: 480px;
  height: 360px;
  overflow: hidden;
  margin: 0;
  box-sizing: content-box;
  border: 2px solid var(--theme-border, #9ca3af);
  background: var(--theme-surface, #1e293b);
}

/* Korb: Unterkante auf der Feldunterkante, horizontal per transform bewegt */
#basket {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 24px;
  box-sizing: border-box;
  background: var(--theme-accent, #2563eb);
  border-radius: 4px 4px 0 0;
}

/* Stern: goldene Sternform, per transform vom Skript positioniert */
.star {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: #f5b800;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}