/* 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. */

/* Spielfeld: Innenbereich exakt 400x600 px (entspricht FIELD_WIDTH/FIELD_HEIGHT in game.js) */
.playfield {
  position: relative;
  box-sizing: content-box;
  width: 400px;
  height: 600px;
  overflow: hidden;
  background: linear-gradient(180deg, #05071a 0%, #10142a 100%);
  border: 2px solid var(--theme-border-strong, #7d8b9d);
  border-radius: var(--theme-radius-l, 10px);
}

/* Korb: wird per Skript über transform positioniert */
.basket {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 20px;
  background: var(--theme-accent-base, #bf4512);
  border: 1px solid var(--theme-accent-strong, #9a3412);
  border-radius: 0 0 var(--theme-radius-l, 10px) var(--theme-radius-l, 10px);
  box-sizing: border-box;
}

/* Stern: wird per Skript über transform positioniert */
.star {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  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%);
}

/* Punkteanzeige */
#score-display {
  margin: 0;
  font-size: var(--theme-size-step-2, 1.44rem);
  font-weight: 700;
}

/* Fußzeile: klein und dezent */
footer {
  margin-top: var(--theme-space-m, 1.5rem);
  text-align: center;
  font-size: var(--theme-size-step--2, 0.694rem);
  color: var(--theme-text-muted, #5c6673);
}