/* Nur Color Car Jam: Parkplatz, Haltestelle, Siegbildschirm. */

#brett {
  width: 100%;
  display: block;
  align-self: center;
  border: 7px solid var(--panel-rand);
  border-radius: 20px;
  box-shadow: 0 6px 0 #0000001a;
  /* Asphalt mit Mittelstreifen -- der Halteplatz, auf dem die Busse stehen */
  background:
    /* der Asphalt wird im Canvas gemalt, hier nur der Rahmen */
    #3f4855;
  touch-action: manipulation;
}

#hinweis {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 #00000030;
  min-height: 1.3em;
}
#hinweis.warnung { color: #ffd9a0; }

#jubel,
#aus {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #4a2d1255;
  z-index: 50;
}
#jubel[hidden],
#aus[hidden] { display: none; }
.jubel-karte {
  background: var(--panel);
  border: 5px solid var(--panel-rand);
  border-radius: 24px;
  padding: 22px 32px;
  text-align: center;
  box-shadow: 0 8px 0 #00000026;
  animation: aufpoppen 0.3s cubic-bezier(0.2, 1.4, 0.5, 1);
}
.jubel-gross { margin: 0; font-size: 28px; font-weight: 800; color: var(--gold); }
#jubel-zeile { margin: 6px 0 0; font-weight: 700; }
@keyframes aufpoppen {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .jubel-karte { animation: none; }
}

/* Verloren: dieselbe Karte, nur in Rot und mit einem Knopf */
.jubel-gross.aus { color: #d6413a; }
#aus-zeile { margin: 6px 0 0; font-weight: 700; }
button.gross {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 800;
  color: inherit;
  background: var(--panel-rand);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 4px 0 #00000026;
  cursor: pointer;
}
button.gross:active { transform: translateY(2px); box-shadow: 0 2px 0 #00000026; }