/* Reihenfolge (A.11.0.0): Namenskarten mit Platznummer; Platz 1–3 in Gold, Silber, Bronze getönt. */

.buehne-reihe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 22px;
}
.reihe-titel {
  margin: 0;
  min-height: 1.3em;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 750;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
}

.reihe-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 460px);
  display: grid;
  gap: 8px;
  transition: opacity .18s;
}
.reihe-liste.viele { width: min(100%, 960px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.reihe-liste.blende { opacity: 0; }
.reihe-liste li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 6px 16px 6px 8px;
  border-radius: 18px;
  background: var(--flaeche);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten-klein);
}
.reihe-platz {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(139, 92, 246, .14);
  color: #5b21b6;
  font-weight: 750;
  font-size: 1.1rem;
}
.reihe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 1.1rem; }

/* vor dem Auslosen: Namen in Eingabereihenfolge, ohne Platz */
.reihe-liste li.offen .reihe-platz { background: none; border: 2px dashed rgba(139, 92, 246, .3); }
.reihe-liste li.offen .reihe-name { color: var(--tusche-weich); }

/* verdeckt (Platz für Platz) */
.reihe-liste li.verdeckt { cursor: pointer; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 2px rgba(139, 92, 246, .22); }
.reihe-liste li.verdeckt .reihe-name { color: rgba(91, 33, 182, .45); letter-spacing: .2em; }
.reihe-liste[data-stand="aufdecken"] li.frei + li.verdeckt,
.reihe-liste[data-stand="aufdecken"] li.verdeckt:first-child { animation: reihe-naechster 1.4s ease-in-out infinite; }
@keyframes reihe-naechster { 50% { box-shadow: inset 0 0 0 2px #ec4899, 0 0 0 6px rgba(236, 72, 153, .15); } }
.reihe-liste li.aufgedeckt { animation: reihe-auf .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes reihe-auf { from { transform: rotateX(90deg) scale(.9); opacity: .2; } }

/* Platz 1–3 */
.reihe-liste li.frei:nth-child(1) { min-height: 64px; box-shadow: inset 0 0 0 2px rgba(245, 158, 11, .5), 0 10px 26px rgba(245, 158, 11, .22); }
.reihe-liste li.frei:nth-child(1) .reihe-platz { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.reihe-liste li.frei:nth-child(1) .reihe-name { font-size: 1.3rem; }
.reihe-liste li.frei:nth-child(2) .reihe-platz { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.reihe-liste li.frei:nth-child(3) .reihe-platz { background: linear-gradient(135deg, #fed7aa, #c2703d); color: #fff; }
.reihe-liste[data-stand="fertig"] li.frei .reihe-platz { animation: reihe-nr .4s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 45ms + .35s); }
@keyframes reihe-nr { from { scale: 0; } }

/* Mischen: jeder Name wackelt in seine eigene Richtung */
.reihe-liste li.mischt { animation: reihe-mischt .22s ease-in-out infinite alternate; }
@keyframes reihe-mischt { to { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); } }

.reihe-leer { display: grid; justify-items: center; gap: 12px; max-width: 26em; text-align: center; color: var(--tusche-weich); font-weight: 550; }
.reihe-leer[hidden] { display: none; }
.reihe-leer p { margin: 0; }
.reihe-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.los-knopf { min-width: min(80vw, 300px); min-height: 60px; font-size: 1.3rem; font-weight: 650; letter-spacing: -.01em; }
.reihe-hinweis { margin: 0; font-weight: 550; color: var(--tusche-weich); text-align: center; }

@media (min-width: 980px) {
  .buehne-reihe { min-height: calc(100dvh - 140px); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reihe-liste li { animation: none !important; }
}

/* Lange Listen (A.14.4.0): der Knopf bleibt unten im Bild stehen, statt unter dem Rand zu verschwinden. */
.reihe-knoepfe { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3; }
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .buehne-reihe { gap: 8px; padding-top: 0; }
  .reihe-titel { font-size: 1.3rem; }
  .reihe-liste, .reihe-liste.viele { width: min(100%, 980px); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
  .reihe-liste li { min-height: 44px; padding-block: 3px; }
  .reihe-liste li.frei:nth-child(1) { min-height: 48px; }
  .reihe-platz { width: 32px; height: 32px; font-size: .95rem; }
  .los-knopf { min-height: 50px; }
}