/* ---------- Partymodus: Ansage, Zwischenstand, Schild, Spielauswahl ---------- */

.pm-ansage {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(5, 10, 20, 0.94);
}
.pm-karte {
  width: min(520px, 100%);
  text-align: center;
  background: rgba(10, 22, 40, 0.96);
  box-shadow: var(--kante), var(--schatten);
  padding: 22px 20px;
  animation: pm-rein 380ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pm-rein { from { transform: scale(0.8); opacity: 0; } }
.pm-titel {
  font: 700 clamp(30px, 8vw, 46px) / 1.1 var(--logo);
  color: var(--gold);
  letter-spacing: 0.04em;
  margin: 10px 0 8px;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}
.pm-text { margin: 0 auto 10px; max-width: 42ch; color: var(--text); }
.pm-uhr { font: 600 20px var(--pixel); color: var(--cyan); letter-spacing: 0.1em; margin: 12px 0; }
.pm-karte .tafel-kopf { margin: 14px 0 8px; }

.pm-stand { list-style: none; margin: 0; padding: 0; text-align: left; }
.pm-stand li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px dotted var(--linie);
}
.pm-stand li.du { background: rgba(77, 227, 255, 0.07); }
.pm-stand .rang { width: 2.2em; font: 600 15px var(--pixel); color: var(--leise); }
.pm-stand img { width: 28px; height: 28px; image-rendering: pixelated; }
.pm-stand b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pm-plus { font: 600 15px var(--pixel); color: #57e389; }
.pm-punkte { font: 600 17px var(--pixel); color: var(--gold); min-width: 2.5em; text-align: right; }

.pm-knoepfe { display: grid; gap: 10px; margin-top: 14px; }

.pm-zwischen {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 55;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 24px));
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(10, 22, 40, 0.97);
  box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--gold), var(--schatten);
  padding: 14px 16px 16px;
  animation: pm-hoch 300ms ease-out;
}
@keyframes pm-hoch { from { transform: translate(-50%, 30px); opacity: 0; } }
.pm-zwischen .pm-uhr { text-align: center; margin: 10px 0 4px; }

.pm-schild {
  position: fixed;
  top: 54px;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 3px 10px;
  font: 600 13px var(--pixel);
  letter-spacing: 0.12em;
  color: var(--gold);
  background: rgba(5, 10, 20, 0.85);
  box-shadow: 0 0 0 2px var(--linie);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Während der Playlist schalten die Knöpfe im Zwischenstand weiter, nicht die Spielenden-Knöpfe. */
body.pm-laeuft #revancheKnopf,
body.pm-laeuft #revancheHinweis,
body.pm-laeuft #zurLobbyKnopf,
body.pm-laeuft .tg-aw-knoepfe [data-aktion='start'],
body.pm-laeuft .tg-aw-knoepfe [data-aktion='lobby'],
body.pm-laeuft .tg-aw-knoepfe .hinweis { display: none; }
/* Platz unter dem Ergebnis, damit der Zwischenstand nichts verdeckt. */
body.pm-laeuft #ansichtEnde { padding-bottom: 46vh; }

.pm-auswahl { flex-wrap: wrap; }
.pm-spiele { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; margin-top: 8px; }
.pm-spiele button {
  border: 0;
  padding: 6px 9px;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie);
  font: 14px var(--pixel);
  letter-spacing: 0.06em;
  color: var(--leise);
}
.pm-spiele button small { margin-left: 6px; opacity: 0.7; }
.pm-spiele button[aria-pressed='true'] { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: rgba(255, 209, 102, 0.08); }
.pm-spiele button.passt-nicht { opacity: 0.45; text-decoration: line-through; }
.pm-spiele button:disabled { cursor: default; }