:root {
  --bg: #131215;
  --surface: #1a181c;
  --surface-2: #221f24;
  --border: #322e35;
  --text: #f3f1f3;
  --text-2: #a39da5;
  --accent: #ff3d94;
  --accent-strong: #ff1f83;
  --warm: #ff8fc0;
  --on-accent: #2b0416;
  /* Feste Rollen statt Einzelwerte (Design-Vereinheitlichung 2026-10-12) */
  --gold: #ffd700;        /* Sieger, Platz 1, Sterne, Krone */
  --sand: #ffd28a;        /* warme Hinweise, Trink-/Schnaps-Akzente, "ausstehend" */
  --bad: #ff8a8a;         /* falsch / Fehler -- Text */
  --bad-strong: #ff5a5a;  /* falsch / Fehler -- Rahmen, Hervorhebung */
  --r-s: 8px;             /* Ecken: klein (Chips im Text, kleine Knoepfe, Eingabefelder) */
  --r-m: 12px;            /* Ecken: mittel (Karten in Listen, Knoepfe) */
  --r-l: 16px;            /* Ecken: gross (Hauptkarten, Overlays) */
  --r-pill: 999px;        /* Pillen (Chips, Badges, runde Knoepfe) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 55% 40% at 15% 12%, rgba(255, 61, 148, 0.09), transparent 60%),
    radial-gradient(ellipse 50% 38% at 88% 82%, rgba(255, 61, 148, 0.06), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: 'Jost', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.25rem;
}

.wrap { width: 100%; max-width: 1000px; }

.eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .05em;
  flex-wrap: wrap;
  text-align: center;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 78px);
  line-height: 1;
  margin: .6rem 0 .5rem;
  text-shadow: 0 0 .5em rgba(255, 61, 148, .3);
}

.logo-inline {
  height: 1.3em;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 .3em rgba(255, 61, 148, .35));
}

.sub { color: var(--text-2); font-size: 14px; margin: 0 0 2rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 1.5rem;
}

label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: .4rem; }

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: .7rem .85rem;
}
textarea { resize: vertical; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
}

button {
  margin-top: 1rem;
  width: 100%;
  border: none;
  border-radius: var(--r-m);
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: .75rem 1.25rem;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 61, 148, .35);
}
button:hover { background: var(--accent-strong); }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* "Zurueck zum Hub" als gut lesbarer Knopf (Minispiel-Endbildschirme, Abnahme 2026-10-09) */
.hub-link-btn {
  display: inline-block; margin-top: .4rem; padding: .75rem 1.4rem; border-radius: var(--r-m);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: 0 0 18px rgba(255, 61, 148, .35); font-variant-numeric: tabular-nums;
}
.hub-link-btn:hover { background: var(--accent-strong); }

/* Gemeinsame Sieger-Einblendung aller Minispiele (minigame-finish.js, passi 2026-10-10) */
.mf-overlay {
  position: fixed; inset: 0; z-index: 480; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(40, 8, 30, .82), rgba(5, 3, 10, .92));
  backdrop-filter: blur(4px); cursor: pointer; animation: mf-fade-in .35s ease-out;
}
.mf-card { position: relative; z-index: 1; text-align: center; padding: 2.4rem 3.2rem; max-width: min(90vw, 760px); animation: mf-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.mf-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: .6rem; }
.mf-name { font-size: clamp(48px, 9vw, 96px); font-weight: 700; line-height: 1.05; color: #fff; text-shadow: 0 0 28px rgba(255, 61, 148, .65); overflow-wrap: anywhere; }
.mf-band { height: 16px; width: min(70vw, 420px); margin: 1.1rem auto 1rem; border-radius: var(--r-pill); box-shadow: 0 0 18px rgba(255, 255, 255, .25); }
.mf-text { margin: 0; font-size: 22px; font-weight: 600; color: var(--text); }
.mf-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mf-confetti span { position: absolute; top: -16px; width: 9px; height: 15px; border-radius: 2px; animation-name: mf-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes mf-fall { to { transform: translate(var(--drift, 0), 110vh) rotate(var(--spin, 540deg)); } }
@keyframes mf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mf-overlay, .mf-card { animation: none; } }

.hidden { display: none !important; }

.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); box-shadow: none; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); background: transparent; }
.btn-row { display: flex; gap: .6rem; margin-top: 1rem; }
.btn-row button { flex: 1; margin-top: 0; }

.status-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 1.25rem;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #55505a; flex: none; }
.dot.live { background: var(--accent); box-shadow: 0 0 6px 1px var(--accent); }

.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.player-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: .55rem .8rem;
  font-size: 14px;
}
.player-list .tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: .1rem .45rem;
}
.player-list .dot { margin-left: auto; }
.player-list li.offline { opacity: .45; }

.hello { font-size: 14px; color: var(--text-2); margin-bottom: 1rem; }
.hello strong { color: var(--text); }
.hello .tag {
  margin-left: .5rem; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: .1rem .5rem;
}
/* "Abmelden" (2026-09-19, passi-Wunsch): loescht nur die lokal gemerkte
   Identitaet (localStorage) -- praktisch v.a. zum Testen mit wechselnden
   Rollen, uebersteht sonst bewusst Browser-Neustarts (siehe STORAGE_ID in
   hub.js). Dezent, damit niemand beim Event aus Versehen drauf klickt. */
.logout-link { color: var(--text-2); text-decoration: underline; font-size: 12.5px; }
.logout-link:hover { color: var(--accent); }

/* "Doch mitspielen?"-Banner (2026-09-20, passi-Wunsch) -- nur fuer echte
   Zuschauer sichtbar (siehe renderBecomePlayerBanner, hub.js). */
.become-player-banner {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2); margin: -.4rem 0 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: .5rem .8rem;
}
.become-player-banner #become-player-btn {
  width: auto; margin: 0; padding: .4rem .8rem; font-size: 13px;
}
.become-player-status { color: var(--accent); font-weight: 600; }

/* Rollen-Wahl beim Beitritt nach Event-Start (siehe join-step-role, hub.js). */
.join-role-hint { font-size: 12px; color: var(--text-2); margin: -.4rem 0 .8rem; }

/* Feste Spaltenzahl statt auto-fill/minmax: teilt den festen 12er-Roster
   immer restlos auf (6/4/3/2 teilen 12 glatt), damit nie eine unvollstaendige
   letzte Zeile entsteht, die -- je nach Browser-Zoom/Windows-Skalierung --
   leicht schmalere Kacheln zeigen kann. */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
}
@media (max-width: 900px) {
  .roster-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .roster-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
}

.roster-tile {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: .6rem .7rem;
  /* Reserviert Platz fuer die optionale zweite Zeile (Ausrichter-Tag,
     "bereits online") -- sonst sind Zeilen mit so einem Tag hoeher als
     Zeilen ohne, weil die Grid-Zeilenhoehe sich am hoechsten Element
     orientiert und Kacheln OHNE Tag entsprechend niedriger blieben. */
  min-height: 56px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}
.roster-tile:hover { border-color: var(--accent); background: #262229; }
.roster-tile:disabled { opacity: .4; cursor: default; }

.roster-name { display: flex; flex-direction: column; min-width: 0; }
.roster-name .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-name .tag { font-size: 11px; color: var(--accent); }
.roster-name .presence { font-size: 11px; color: var(--text-2); }

.join-error {
  margin-top: 1rem;
  color: #ff8fa8;
  font-size: 13px;
}

/* "Wer von KC" (Phase 10.4, Minigame) -- normales Corporate-Design, kein
   eigenes Farbschema wie bei Blobby Volley/Schnabbes noetig. Wahl-Kacheln
   nutzen bewusst dieselben .roster-grid/.roster-tile-Klassen wie die
   allererste Hub-Landingpage (passi-Wunsch: "Spielerübersicht ähnlich wie
   die erste Landing Page des Hubs"). */
/* Bugfix (2026-09-20, passi-Feedback: "Spielbereich, Schrift etc. alles
   etwas groesser, ca. 20%") -- `zoom` statt jede einzelne Regel unten von
   Hand hochzurechnen: skaliert Text, Kacheln, Balken, Abstaende einheitlich
   und (anders als transform:scale) mit korrektem Reflow/Scrolling. Bewusst
   NICHT auf .roster-tile/.roster-grid direkt (die sind mit der Hub-
   Landingpage geteilt, siehe Kommentar oben) -- die Skalierung greift nur
   innerhalb von .wvk-page. */
.wvk-page { zoom: 1.2; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto; padding: 2rem 1.25rem; }
.wvk-title { font-size: clamp(24px, 5vw, 32px); font-weight: 700; margin: 0; text-align: center; }
.wvk-page .card { width: 100%; }
.wvk-intro { text-align: center; line-height: 1.6; margin: 0 0 .5rem; color: var(--text-2); }
.wvk-rules-section { margin: 0 0 1.4rem; text-align: left; }
.wvk-rules-section h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.wvk-rules-section p { margin: 0 0 .6rem; color: var(--text); line-height: 1.6; font-size: 17px; }
.wvk-rules-section p:last-child { margin-bottom: 0; }
.wvk-caption { font-size: 12px; color: var(--text-2); text-align: center; margin: .5rem 0 0; }

.wvk-progress { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); text-align: center; margin: 0 0 .3rem; }
.wvk-heading {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .15em; margin: 0 0 .3rem; text-align: center;
  font-family: 'Jost', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(26px, 5.5vw, 40px); text-transform: uppercase; letter-spacing: .02em;
  text-shadow: 0 0 .5em rgba(255, 61, 148, .3);
}
.wvk-heading .logo-inline { height: 1em; }
.wvk-question { font-size: clamp(20px, 4vw, 28px); text-align: center; margin: 0 0 1.2rem; }
.wvk-tiebreak-hint { font-size: 13px; color: var(--accent); text-align: center; margin: -.6rem 0 1rem; }
.wvk-vote-status { font-size: 13px; color: var(--text-2); text-align: center; margin-top: .8rem; }

.roster-tile.wvk-tile--selected { border-color: var(--accent); background: #2a1f28; box-shadow: 0 0 0 2px var(--accent) inset; }

.wvk-bars { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.wvk-bar-row { display: flex; align-items: center; gap: .6rem; }
.wvk-bar-name { width: 110px; flex: none; font-size: 13px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvk-bar-track { flex: 1; background: var(--surface-2); border-radius: var(--r-s); height: 22px; position: relative; overflow: hidden; }
/* Bugfix/Feature (passi-Wunsch, 2026-09-17): Balken zeigen jetzt die echte
   Rosterfarbe/-Muster der genannten Person (per JS gesetzt, applyBarFill()
   in wervonkc.js) statt einer einheitlichen Akzentfarbe -- die "meistgenannt"-
   Markierung laeuft deshalb bewusst NICHT mehr ueber die Hintergrundfarbe
   (wuerde Muster wie Bulls Giraffe verdecken), sondern ueber einen Rahmen. */
.wvk-bar-fill {
  /* Bugfix (live gefunden, 2026-09-17): <span> ist per default display:
     inline -- width/height wurden dadurch bisher komplett ignoriert (echte
     Groesse blieb 0x0, nur die Track-Flaeche war je sichtbar). display:block
     noetig, damit die inline per JS gesetzte Breite (Stimmen-Anteil)
     ueberhaupt greift. */
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-s);
  transition: width .3s ease;
  background-repeat: repeat;
}
.wvk-bar-fill.wvk-bar-fill--top { box-shadow: 0 0 0 2px var(--sand) inset, 0 0 10px rgba(255, 210, 138, .55); }
.wvk-bar-count { width: 22px; flex: none; font-size: 13px; font-weight: 700; text-align: left; font-variant-numeric: tabular-nums; }

.wvk-round-points, .wvk-standings { margin-top: 1.2rem; text-align: left; }
.wvk-round-points h3, .wvk-standings h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 .5rem; }
.wvk-scorer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wvk-scorer-list li { display: flex; align-items: center; gap: .4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .3rem .7rem; font-size: 12.5px; }
.wvk-scorer-list-empty { font-size: 12.5px; color: var(--text-2); }
.wvk-standings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.wvk-standings-list li { display: flex; align-items: center; justify-content: space-between; gap: .4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); padding: .4rem .7rem; font-size: 13px; }
.wvk-standings-list li.wvk-standings-me { border-color: var(--accent); }
.wvk-standings-list li .wvk-standings-name { display: flex; align-items: center; gap: .4rem; }
.wvk-standings-list li strong { font-variant-numeric: tabular-nums; }

#wvk-phase-finished { text-align: center; }
#wvk-phase-finished h2 { margin: .3rem 0 .6rem; }
#wvk-finish-text { color: var(--text-2); margin: 0 0 1rem; }
#wvk-hub-link { display: inline-block; text-decoration: none; margin-top: 1rem; }

/* "Liederraten" & "Wer bin ich" (Phase 10.4, 2026-09-18) -- gemeinsamer
   Look fuer beide Spiele: gleicher Kopf wie ueberall (.eyebrow + Titel),
   grosser Countdown, dann ein einheitlich gestalteter "Medien"-Rahmen mit
   Glow (Bild ODER Wellen-Animation je nach Spiel), darunter die Eingabe(n)
   OHNE Bestaetigen-Button (passi-Wunsch: was beim Ablauf der 30 Sekunden im
   Feld steht, zaehlt einfach). Bewusst wenig Drumrum um das Medium. */
.gg-page { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto; padding: 2rem 1.25rem; }
.gg-page .card { width: 100%; }
.gg-title { font-size: clamp(24px, 5vw, 32px); font-weight: 700; margin: 0; text-align: center; }
.gg-intro { text-align: center; line-height: 1.6; margin: 0 0 .5rem; color: var(--text-2); }
.gg-rules-section { margin: 0 0 1.4rem; text-align: left; }
.gg-rules-section h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.gg-rules-section p { margin: 0 0 .6rem; color: var(--text); line-height: 1.6; font-size: 17px; }
.gg-rules-section p:last-child { margin-bottom: 0; }
.gg-caption { font-size: 12px; color: var(--text-2); text-align: center; margin: .5rem 0 0; }
.gg-progress { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text); text-align: center; margin: .6rem 0 0; } /* passi 2026-10-12: "Song X/10 groesser" */
.gg-question { font-size: clamp(18px, 3.6vw, 24px); text-align: center; margin: 0 0 1rem; }
.gg-tiebreak-hint { font-size: 13px; color: var(--accent); text-align: center; margin: 0 0 1rem; }

/* Grosser Countdown (passi-Wunsch, 2026-09-18: "deutlich groesser") --
   direkt unter dem Spieletitel, noch vor der Fortschrittsanzeige. Bugfix
   (2026-09-20, passi-Feedback: "Boxen, Text etc nicht mittig") -- als
   Flex-Container OHNE justify-content packten die Kinder (Zahl + "SEK.")
   sich an den linken Rand der (breiteren) Karte, statt zu zentrieren. */
.gg-countdown { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: 0; }
.gg-countdown-num { font-size: 68px; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.gg-countdown-unit { font-size: 15px; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; }
/* Label ueber den zwei getrennten Liederraten-Countdowns (Nachtrag 2026-09-19). */
.gg-countdown-label { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .5rem; } /* vorher -.3rem: ueberlappte mit dem Ring */

/* Zwei Countdowns nebeneinander (Nachtrag 2026-09-19, passi-Feedback: beide
   sollen von Anfang an sichtbar sein, statt nacheinander ein-/auszublenden).
   Nur innerhalb dieser Zeile verkleinert -- der einzelne grosse Countdown
   anderswo (Wer bin ich, Ordnen, Wer von KC) bleibt unveraendert. */
.gg-countdown-row { display: flex; justify-content: center; gap: 2.2rem; margin-bottom: .3rem; }
.gg-countdown-col { display: flex; flex-direction: column; align-items: center; transition: opacity .25s; flex: 0 0 11rem; } /* gleich breite Spalten: Mitte zwischen den Ringen = Seitenmitte, "Song X / 10" steht genau darunter (passi 2026-10-13) */
.gg-countdown-row .gg-countdown-num { font-size: 40px; }
.gg-countdown-col--waiting { opacity: .4; }
.gg-countdown-col--waiting .gg-countdown-num { color: var(--text-2); }

/* "Neuer Song"-Uebergangskarte (Nachtrag 2026-09-19, vergroessert 2026-09-25
   nach passi-Feedback "groessere Schrift, Box groesser" -- Schriftgroessen
   hier bewusst per Nachfahren-Selektor ueberschrieben statt .gg-intro selbst
   zu aendern, das auch von anderen gg-Seiten (Wer bin ich, Ordnen, ...)
   genutzt wird). */
.gg-transition-card { text-align: center; padding: 2.5rem 1.5rem; }
.gg-transition-card .gg-intro { font-size: clamp(24px, 5vw, 32px); font-weight: 700; color: var(--text); margin: 0 0 .6rem; }
.gg-transition-length { font-size: 20px; color: var(--text-2); margin: .3rem 0 0; }
/* Countdown 5 -> 1 in der Einblendung vor jedem Song (passi 2026-10-12) */
.gg-transition-count { font-size: clamp(72px, 14vw, 120px); font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; margin: .4rem 0 .2rem; text-shadow: 0 0 28px rgba(255, 61, 148, .45); }
.gg-transition-count.is-tick { animation: gg-count-tick .45s ease-out; }
@keyframes gg-count-tick { 0% { transform: scale(1.25); opacity: .55; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gg-transition-count.is-tick { animation: none; } }
.gg-rules-sub { font-size: 16px; font-weight: 700; color: var(--accent); margin: .9rem 0 .25rem; }
/* Stechregeln in der Zwischenmeldung + Zeit-Entscheid auf dem Endbildschirm (passi 2026-10-12) */
.gg-tiebreak-rules { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: .8rem 1rem; margin: 1rem 0; }
.gg-tiebreak-rules h3 { font-size: 15px; margin: 0 0 .4rem; }
.gg-tiebreak-rules ul, .gg-time-tiebreak ul { margin: 0; padding-left: 1.2rem; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.gg-tiebreak-rules li + li, .gg-time-tiebreak li + li { margin-top: .3rem; }
.gg-time-tiebreak { background: var(--surface-2); border: 1px solid rgba(255, 61, 148, .45); border-radius: var(--r-m); padding: .8rem 1rem; margin: 0 0 1rem; }
.gg-time-tiebreak p { margin: 0 0 .5rem; font-size: 14px; }
.gg-time-tiebreak li.is-winner { color: var(--text); }
.gg-time-tiebreak .swatch { width: 11px; height: 11px; vertical-align: -1px; }

@keyframes ggGlow {
  0%, 100% { box-shadow: 0 0 36px 4px rgba(255,61,148,.22), 0 0 0 1px rgba(255,143,192,.5) inset; }
  50% { box-shadow: 0 0 52px 10px rgba(255,61,148,.38), 0 0 0 1px rgba(255,143,192,.7) inset; }
}
.gg-media {
  /* Bugfix (2026-09-20, passi-Feedback: "Boxen, Text etc nicht mittig") --
     margin:auto fehlte, das max-width:420px-Rahmen klebte deshalb am
     linken statt am zentrierten Rand der (breiteren) Karte. */
  width: 100%; max-width: 420px; margin: 0 auto; border-radius: 22px; border: 2px solid var(--warm);
  background: linear-gradient(160deg, #241f28, #1a161c);
  animation: ggGlow 3.4s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* "Wer bin ich": grosses, deutliches Bild (passi-Wunsch), nicht viel
   Schnickschnack drumrum -- nur der Glow-Rahmen. Bugfix (2026-09-20, passi-
   Wunsch: "Bilder vollstaendig darstellen, Format nicht aendern"):
   object-fit von cover auf contain -- cover schnitt Bilder an, die nicht
   exakt ins feste 4:5-Seitenverhaeltnis passten (z.B. Querformat-Fotos). */
.gg-media--image { aspect-ratio: 4 / 5; }
.gg-media-photo { width: 100%; height: 100%; object-fit: contain; display: block; }
.gg-media-placeholder { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-2); }
.gg-media-placeholder svg { display: block; }
/* Kleines Foto in der Recap-Sequenz (Nachtrag 2026-09-19) -- schlichter
   als .gg-media (kein Glow, keine Animation), nur zur Wiedererkennung. */
.gg-recap-photo { width: 100%; max-width: 260px; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--r-l); border: 2px solid var(--border); margin: 0 auto 1rem; display: block; }
.gg-media-placeholder span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* "Liederraten": Equalizer-Wellen -- bewegen sich NUR, waehrend der Song
   tatsaechlich abgespielt wird (passi-Wunsch, 2026-09-18), sonst stehen sie
   still (an die echten play/pause/ended-Events des <audio> gekoppelt, siehe
   liederraten.js), nicht einfach ein Dauer-Loop. */
.gg-media--audio { height: 200px; align-items: flex-end; padding: 0 0 30px; gap: 8px; }
.gg-bar { width: 11px; height: 20%; border-radius: var(--r-s); background: linear-gradient(180deg, var(--warm), var(--accent)); transform-origin: bottom; transition: height .25s ease; }
@keyframes ggBar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.gg-media--audio.is-playing .gg-bar { animation: ggBar 1.1s ease-in-out infinite; }

/* Bugfix (2026-09-20), siehe .gg-media oben: gleiches Problem, gleicher Fix. */
.gg-fields { width: 100%; max-width: 420px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 8px; }
.gg-fields input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: .75rem .95rem; color: var(--text); font-family: inherit; font-size: 15px; }
.gg-fields input:focus { outline: none; border-color: var(--accent); }
.gg-answer-hint { margin: 0; text-align: center; font-size: 12px; color: var(--text-2); }

/* Auswertung: Loesung + wer diese Runde was richtig hatte -- gruen/rot/grau
   je Feld, "ausstehend" fuer noch nicht von Passi geprueftes. */
.gg-solution { text-align: center; font-size: 15px; margin: 0 0 1rem; }
.gg-solution strong { color: var(--text); }
.gg-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.gg-result-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); padding: .4rem .7rem; font-size: 13px; }
.gg-result-row.gg-result-row--me { border-color: var(--accent); }
.gg-result-name { display: flex; align-items: center; gap: .4rem; }
.gg-result-badges { display: flex; gap: .3rem; }
.gg-badge { font-size: 11px; font-weight: 600; padding: .15rem .5rem; border-radius: var(--r-pill); }
.gg-badge--correct { background: rgba(76, 201, 120, .18); color: #6fe39a; }
.gg-badge--wrong { background: rgba(255, 90, 90, .14); color: #ff8f8f; }
.gg-badge--pending { background: rgba(255, 210, 138, .14); color: var(--sand); }

/* "Pay/Drink to Win" (Phase 10.4, 2026-09-19) -- verdecktes Bieter-Spiel in
   zwei Runden. Nutzt .gg-page/.gg-title/.gg-intro/.gg-rules-section/
   .gg-caption sowie .ord-countdown (siehe oben) -- hier nur die neuen,
   spielspezifischen Bausteine (Gebots-Eingabe, Betrags-/Identitaets-Reveal). */
.pw-floor-hint { text-align: center; font-size: 13px; color: var(--warm); margin: 0 0 .8rem; }
.pw-bid-form { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pw-bid-fields { display: flex; align-items: flex-end; justify-content: center; gap: .9rem; flex-wrap: wrap; }
.pw-bid-field { display: flex; flex-direction: column; gap: .35rem; }
.pw-bid-field label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); text-align: center; }
.pw-bid-field input {
  width: 110px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: .75rem .5rem; color: var(--text); font-family: inherit;
  font-size: 26px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.pw-bid-field input:focus { outline: none; border-color: var(--accent); }
.pw-bid-op { font-size: 30px; font-weight: 700; color: var(--text-2); padding-bottom: .8rem; }
.pw-bid-total { display: flex; align-items: baseline; gap: .3rem; padding-bottom: .8rem; }
.pw-bid-total-num { font-size: 34px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pw-bid-total-unit { font-size: 15px; color: var(--text-2); }
.pw-bid-form button { width: auto; padding: .8rem 2rem; }
.pw-bid-check { text-align: center; background: var(--surface-2); border: 1px solid var(--warm); border-radius: var(--r-m); padding: .8rem 1rem; }
.pw-bid-check p { margin: 0 0 .7rem; color: var(--warm); font-weight: 600; }
.pw-bid-check-btns { display: flex; gap: .7rem; justify-content: center; }
.pw-bid-error { text-align: center; font-size: 14px; color: var(--warm); margin: 0; }
.pw-bid-confirmed { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin: .4rem 0 .8rem; }
.pw-bid-confirmed p { margin: 0; text-align: center; font-size: 16px; }
.pw-bid-confirmed button { width: auto; padding: .6rem 1.4rem; }

/* Dramatische Betrags-/Identitaets-Reveals (Runde-1-Reveal, Betrags- UND
   getrennter Identitaets-Reveal nach Runde 2/Stechen) -- gleiche grosse,
   zentrierte Zahl wie die Countdown-Optik, nur einmalig statt tickend. */
.pw-amount-big { font-size: clamp(48px, 10vw, 76px); font-weight: 700; color: var(--accent); text-align: center; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.pw-amount-breakdown { text-align: center; font-size: 16px; color: var(--text-2); margin: 0 0 .8rem; }
.pw-identity-big { font-size: clamp(32px, 7vw, 48px); font-weight: 700; color: var(--text); text-align: center; margin: .5rem 0 .6rem; }
.pw-identity-band { height: 16px; width: min(70%, 360px); margin: 0 auto 1rem; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: 0 0 18px rgba(255, 255, 255, .2); }
.pw-amount-breakdown { transition: opacity .5s ease, transform .5s ease; }
.pw-amount-breakdown.is-pending { opacity: 0; transform: translateY(6px); }
.pw-finish-payment { text-align: center; font-size: 15px; color: var(--warm); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: .8rem 1rem; margin: 0 0 1rem; }

/* Betrags-Hochzaehlen + Sieger-Namenswalze (2026-09-20, passi-Wunsch) --
   kurzer Bounce beim Landen der Zahl, Konfetti beim Landen des Namens
   (gleiche Technik wie bei Blobby Volley, siehe blobbyvolley.css, hier
   bewusst dupliziert statt geteilt -- eigenstaendige Seite ohne gemeinsames
   JS-Modul dafuer). Konfetti-Layer ist "fixed" statt an die Karte gebunden,
   fuellt dadurch den ganzen Bildschirm statt nur die kleine Karten-Flaeche.*/
.pw-amount-big.is-landed { animation: pw-amount-land .4s ease-out; }
@keyframes pw-amount-land {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.pw-identity-card { position: relative; overflow: hidden; }
.pw-confetti-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.pw-confetti-piece {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 15px;
  opacity: .95;
  animation-name: pw-confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes pw-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(var(--fall-y, 640px)) rotate(var(--spin, 540deg)); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-amount-big.is-landed { animation: none; }
  .pw-confetti-piece { display: none; }
}

/* "Ordnen" (Phase 10.4, 2026-09-18) -- Timeline-Einsortier-Spiel mit Leben,
   komplett automatisch getaktet. Eigener, breiterer Seitenrahmen (.ord-page
   statt .gg-page/.wvk-page) -- Board + Leben-Uebersicht brauchen mehr Platz
   als die schmalen 640px der anderen Minispiel-Seiten. */
.ord-page { max-width: 980px; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto; padding: 2rem 1.25rem; }
.ord-page .card { width: 100%; }
.ord-title { font-size: clamp(22px, 4.5vw, 30px); font-weight: 700; margin: 0; text-align: center; }
.ord-intro { text-align: center; line-height: 1.6; margin: 0 0 .5rem; color: var(--text-2); }
.ord-rules-section { margin: 0 0 1.4rem; text-align: left; }
.ord-rules-section h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.ord-rules-section p { margin: 0 0 .6rem; color: var(--text); line-height: 1.6; font-size: 17px; }
.ord-rules-section p:last-child { margin-bottom: 0; }
.ord-caption { font-size: 12px; color: var(--text-2); text-align: center; margin: .5rem 0 0; }

/* ---- Kriterium-Reveal: Box hat von Anfang an ihre Endgroesse (passi-
   Wunsch), Datumszeile ist immer im DOM und blendet nur per Opacity ein,
   damit die Box waehrend des Tippens nicht nachtraeglich waechst. Tipptempo
   in ordnen.js (52ms/Zeichen, "halbes Tempo, dramatisch"). ---- */
@keyframes ordRevealPulse {
  0%, 100% { box-shadow: 0 0 50px 8px rgba(255,61,148,.28), 0 0 0 1px rgba(255,143,192,.5) inset; }
  50% { box-shadow: 0 0 80px 16px rgba(255,61,148,.48), 0 0 0 1px rgba(255,143,192,.8) inset; }
}
@keyframes ordBlink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ord-criterion-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-height: 480px; text-align: center; }
.ord-criterion-eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.ord-criterion-box {
  width: 100%; max-width: 620px; height: 280px; box-sizing: border-box; border: 2px solid var(--warm); border-radius: 24px;
  padding: 44px 48px; background: rgba(26,24,28,.6); display: flex; flex-direction: column; justify-content: center;
  animation: ordRevealPulse 2.8s ease-in-out infinite;
}
.ord-criterion-text { font-size: clamp(20px, 3.2vw, 28px); font-weight: 700; line-height: 1.35; margin: 0; }
.ord-criterion-cursor { animation: ordBlink .8s step-end infinite; color: var(--accent); }
.ord-criterion-date { font-size: 14px; color: var(--text-2); margin: 18px 0 0; letter-spacing: .04em; transition: opacity .4s ease; }
.ord-criterion-note { font-size: 16px; color: var(--sand); margin: 8px 0 0; transition: opacity .5s ease; } /* passi 2026-10-13: "nicht alle Spiele NUR auf Steam" */

/* ---- Countdown (gleicher Look wie bei den Guess-Games) ---- */
.ord-countdown { display: flex; align-items: baseline; gap: .4rem; }
.ord-countdown-num { font-size: 46px; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.ord-countdown-unit { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; }
.ord-progress { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin: 2px 0 0; }

/* ---- Leben-Streifen: fuer ALLE staendig sichtbar (passi-Wunsch) ---- */
/* Nachtrag (2026-09-30, passi-Wunsch "in Gruppen nach Leben sortieren"):
   3 Zeilen statt einer flachen Liste -- 2 Leben / 1 Leben / raus, jede mit
   eigenem Label links. */
.ord-lives-strip { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ord-lives-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ord-lives-group-label { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.ord-life-chip { display: flex; align-items: center; gap: .3rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .25rem .6rem; font-size: 11.5px; }
.ord-life-chip.is-eliminated { opacity: .4; text-decoration: line-through; }
.ord-life-chip.is-me { border-color: var(--accent); }

/* ---- Hauptbereich: Sortier-Legende, Board, aktuelle Karte ----
   Bugfix (2026-09-19, passi-Feedback: "neben den Karten entsteht ein
   Scrollbalken, wenn man auf die Pfeile klicken will"): .ord-board hatte
   eine feste max-height + eigenen Scrollbereich -- bei einer vollen Liste
   (~25 Spiele) reichten 480px bei weitem nicht, der Scrollbalken war
   praktisch IMMER aktiv und verschob/verdeckte die Klick-Pfeile. Jetzt
   waechst das Board natuerlich mit (normales Seiten-Scrollen statt
   verschachteltem Mini-Scrollbereich), die Legende daneben (align-items:
   stretch statt flex-start) waechst automatisch mit, bleibt visuell
   durchgaengig. min-height nur noch als Untergrenze fuer die ersten paar
   Karten, damit die Legende am Anfang nicht winzig wirkt. */
.ord-main { width: 100%; display: flex; gap: 18px; align-items: stretch; }
.ord-legend { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; min-height: 420px; }
.ord-legend-top, .ord-legend-bottom { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.ord-legend-top { color: var(--warm); }
.ord-legend-bottom { color: var(--text-2); }
.ord-legend-label { writing-mode: vertical-rl; text-orientation: mixed; }
.ord-legend-line { flex: 1; width: 1px; background: linear-gradient(var(--warm), var(--border)); margin: 6px 0; }

.ord-board { flex: 1; max-width: 540px; display: flex; flex-direction: column; justify-content: center; } /* Startkarte mittig, Reihe waechst nach oben + unten (passi 2026-10-13) */
.ord-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); padding: .5rem .8rem; font-size: 13px; font-weight: 500; }
.ord-card.is-new { animation: ordCardIn .5s ease; border-color: var(--warm); }
@keyframes ordCardIn { 0% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 1; transform: translateX(0); } }

/* Einsortier-"Geist" (passi-Wunsch, 2026-09-18): frei positioniertes Element,
   das sichtbar von der "Aktuelle Karte"-Box zur richtigen Board-Zeile
   wandert -- FLIP-Technik, siehe runCardInsertAnimation() in ordnen.js.
   Startet im Look der grossen Glow-Karte, .ord-card-ghost--moving transitiert
   Position/Groesse UND Optik gleichzeitig zur flachen Board-Zeile. */
.ord-card-ghost {
  position: fixed; z-index: 50; box-sizing: border-box; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px;
  border-radius: var(--r-l); border: 2px solid var(--warm);
  background: linear-gradient(160deg, #241f28, #1a161c);
  box-shadow: 0 0 30px 3px rgba(255,61,148,.35);
  font-family: 'Jost', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--text);
}
.ord-card-ghost--moving {
  transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1),
    width .6s cubic-bezier(.4,0,.2,1), height .6s cubic-bezier(.4,0,.2,1),
    border-radius .6s ease, background .6s ease, box-shadow .6s ease, font-size .6s ease, justify-content .6s ease;
  justify-content: flex-start; padding-left: .8rem;
  border-radius: var(--r-s); border-color: var(--border);
  background: var(--surface-2); box-shadow: none;
  font-size: 13px; font-weight: 500;
}

.ord-gap-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 18px; } /* ueber den Karten, sonst verdecken sie die 22 px hohen Pfeilspitzen (passi 2026-10-14) */
.ord-gap-line { flex: 1; height: 1px; background: var(--border); transition: background .15s ease, box-shadow .15s ease, height .15s ease; }
.ord-gap-line.is-selected { height: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(255,61,148,.85); }
.ord-gap-arrow {
  width: 18px; height: 22px; flex: none; cursor: pointer; border: none; padding: 0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: #4a444d;
  transition: background .15s ease, filter .15s ease;
}
.ord-gap-arrow:hover:not(:disabled) { background: var(--accent); filter: drop-shadow(0 0 6px rgba(255,61,148,.8)); }
.ord-gap-arrow.is-selected { background: var(--accent); filter: drop-shadow(0 0 9px rgba(255,61,148,.95)); outline: 2px solid var(--warm); outline-offset: 2px; }
.ord-gap-arrow:disabled { cursor: default; opacity: .5; }

.ord-current { width: 190px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-top: 20px; }
.ord-current-label { font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .1em; }
@keyframes ordGlow {
  0%, 100% { box-shadow: 0 0 30px 3px rgba(255,61,148,.25), 0 0 0 1px rgba(255,143,192,.55) inset; }
  50% { box-shadow: 0 0 44px 8px rgba(255,61,148,.42), 0 0 0 1px rgba(255,143,192,.75) inset; }
}
.ord-current-card {
  width: 170px; height: 96px; border-radius: var(--r-l); border: 2px solid var(--warm);
  background: linear-gradient(160deg, #241f28, #1a161c); display: flex; align-items: center; justify-content: center;
  animation: ordGlow 2.6s ease-in-out infinite; text-align: center; padding: 0 12px; box-sizing: border-box;
}
.ord-current-card span { font-size: 15px; font-weight: 600; }

.ord-retry-hint { text-align: center; font-size: 13px; color: var(--accent); margin: .6rem 0 0; }

/* Eliminations-Meldung (passi-Wunsch, 2026-09-18): kurze Meldung beim
   Reveal, sobald jemand rausfliegt -- alle anderen sehen "X ist raus", die
   betroffene Person selbst ihre eigene Nachricht (hervorgehoben). */
/* Bugfix (2026-09-19, passi-Feedback "viel zu klein, soll als grosses
   Overlay kommen"): vorher eine kleine Zeile mitten im normalen Seitenfluss,
   leicht zu uebersehen -- jetzt ein vollflaechiges Overlay wie
   .reveal-overlay/.adhoc-vote-overlay, bleibt so lange sichtbar wie die
   'reveal'-Phase selbst (steuert weiterhin dasselbe JS/dieselbe hidden-Klasse). */
.ord-elimination-notice {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: none; pointer-events: none; /* passi 2026-10-13: kein dunkler Schleier mehr, Spielfeld bleibt sichtbar */
  padding: 1.25rem;
}
.ord-elimination-notice.hidden { display: none !important; }
.ord-elimination-line {
  text-align: center; font-size: clamp(20px, 4.5vw, 30px); font-weight: 600; color: var(--text);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-l);
  padding: 1.1rem 1.6rem; margin: 0; max-width: 560px; text-wrap: balance;
  box-shadow: 0 0 0 100vmax rgba(10, 9, 11, .28), 0 18px 50px rgba(0, 0, 0, .7);
  animation: ordFadeIn .5s cubic-bezier(.2,.8,.3,1);
}
.ord-elimination-line--me { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 46px rgba(255, 61, 148, .55); }
.ord-spectator-note { text-align: center; font-size: 12.5px; color: var(--text-2); margin-top: 6px; }


#join-step-password input, #join-step-audio button:not(.btn-ghost) { margin-bottom: .5rem; }
#join-step-audio .sub { margin-bottom: 1.2rem; }

.hub-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.hub-topline .hello { margin: 0; }
.hub-topline .status-line { margin: 0; }

.announcement-banner {
  display: flex; align-items: center; gap: .9rem;
  background: rgba(255, 61, 148, .16);
  border: 2px solid var(--accent);
  border-radius: var(--r-l);
  padding: 1.1rem 1.4rem;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 1.3rem;
  box-shadow: 0 0 30px rgba(255, 61, 148, .3);
}
.announcement-banner::before { content: "📣"; flex: none; font-size: 30px; }
.announcement-banner.flash { animation: announcement-flash 1.6s ease-out; }
@keyframes announcement-flash {
  0%, 30% { box-shadow: 0 0 55px rgba(255, 61, 148, .8); border-color: #fff; }
  100% { box-shadow: 0 0 30px rgba(255, 61, 148, .3); border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .announcement-banner.flash { animation: none; } }

/* Nachtrag (2026-09-24): reine Handlungsaufforderung statt Karte mit
   Unterinhalt -- das ganze Element ist jetzt selbst der Link, die
   Uebersicht sitzt im eigenen Tab (#panel-tippspiel). */
.tippspiel-widget {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.3rem; padding: .8rem 1.1rem;
  font-family: 'Jost', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--on-accent); background: var(--accent);
  text-decoration: none; text-align: center;
  box-shadow: 0 0 24px rgba(255, 61, 148, .3);
}
.tippspiel-widget:hover { filter: brightness(1.06); }

.hint-text { font-size: 12px; color: var(--text-2); margin: .3rem 0 0; }

/* Geselligkeit: Getraenke-Buchung, Gimmicks */
.gimmick-btn {
  flex: 1; min-width: 120px; width: auto; margin-top: 0;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; font-weight: 600; padding: .55rem .7rem; box-shadow: none;
}
.gimmick-btn:hover { border-color: var(--accent); }
.gimmick-btn:disabled { opacity: .4; cursor: default; }
.gimmick-btn--wide { flex: 1 1 100%; }
.gimmick-btn--sm { font-size: 12px; padding: .45rem .6rem; min-width: 0; }
.gimmick-btn--ghost { background: transparent; }

/* Ecken-Kaesten: Wer-ist-da (oben links) & Trink-Log (oben rechts) --
   immer sichtbar, sobald man im Hub ist, unabhaengig vom aktiven Tab. */
.roster-corner, .ticker {
  position: fixed; top: 1rem; z-index: 30;
  width: 230px; max-width: calc(100vw - 2rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: .6rem .7rem; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.roster-corner { left: 1rem; }
/* Kompakte Zeilen + hoehenabhaengige Begrenzung (2026-10-05, passi: "Scrollbalken vermeiden"): bis zu 12 Personen passen ohne
   Scrollbalken, er erscheint nur noch bei wirklich niedrigen Fenstern. */
.roster-corner .player-list { gap: .25rem; max-height: min(440px, calc(100vh - 7rem)); overflow-y: auto; }
.roster-corner .player-list li { padding: .3rem .6rem; font-size: 13.5px; }
.ticker { right: 1rem; }
.ticker-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: .4rem; }
.ticker-actions { display: flex; gap: .4rem; margin-bottom: .5rem; }
.ticker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 140px; overflow-y: auto; }
.ticker-list li { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.ticker-list li strong { color: var(--text); font-weight: 500; }
.ticker-footer { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.toast-picker { display: flex; gap: .35rem; }
.toast-picker select { flex: 1; min-width: 0; font-size: 12px; padding: .45rem .5rem; }
.toast-picker button { flex: none; width: auto; }
/* Platz fuer die beiden festen Ecken-Kaesten (2026-10-05, passi: "ueberlappen auf Laptops"): ab 1500 px passt der 1000-px-Inhalt
   zwischen sie. Dazwischen wird die mittlere Spalte schmaler (Kasten 230 px + 1 rem Rand + Luft pro Seite), darunter (< 1100 px)
   liegen die Kaesten ueber dem Inhalt statt daneben. */
@media (min-width: 1101px) and (max-width: 1499px) {
  .wrap { max-width: calc(100vw - 560px); }
}
@media (max-width: 1100px) {
  .roster-corner, .ticker { position: static; width: auto; margin-bottom: 1rem; }
  .roster-corner .player-list { max-height: none; }
}

/* "Welcher Stand laeuft?" (2026-09-24, passi-Wunsch) -- bewusst unauffaellig
   (kleine, gedaempfte Schrift), aber immer sichtbar, auch vor dem Login.
   Niedrigerer z-index als roster-corner/ticker (30) und toast-popup (60) --
   rein informativ, muss nichts ueberlagern. */
.build-info {
  position: fixed; left: 50%; bottom: .5rem; transform: translateX(-50%);
  z-index: 20; font-size: 10.5px; color: var(--text-2); opacity: .6;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: .25rem .7rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Persoenliche Anstoss-Benachrichtigung mit Annehmen/Ablehnen */
.toast-popup {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 60; background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--r-m); padding: .8rem 1.1rem; box-shadow: 0 0 24px rgba(255,61,148,.4);
  font-size: 14px; text-align: center; max-width: 90vw;
  animation: toast-in .3s ease-out;
}
.toast-popup-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.toast-popup-actions .gimmick-btn { margin-top: 0; }
@keyframes toast-in { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast-popup { animation: none; } }

/* Schnapsrunde-Overlay -- deutlich groesser/verrueckter (2026-09-17, passi-
   Feedback: "deutlich groesser, verrueckter und laenger, ueber den
   kompletten Bildschirm, viele verrueckte Farben die einen hypnotisieren,
   ueberall passieren viele verrueckte sinnlose Dinge, 10 Sekunden wie der
   Soundeffekt") -- hypnotisch zyklierender Farbverlauf als Hintergrund der
   ganzen (bereits vollflaechigen, siehe .reveal-overlay) Overlay-Flaeche,
   Chaos-Emoji-Schicht ueberall verteilt, Karte selbst puls/wackelt mit
   durchlaufendem Regenbogen-Rahmen+Text. */
#schnapsround-overlay {
  overflow: hidden;
  animation: schnaps-bg-cycle 2.4s linear infinite;
}
@keyframes schnaps-bg-cycle {
  0% { background: radial-gradient(circle at 30% 30%, #ff3d94, #7a1fff 45%, #0a090b 92%); }
  25% { background: radial-gradient(circle at 70% 30%, #2de6c8, #ff8a5c 45%, #0a090b 92%); }
  50% { background: radial-gradient(circle at 30% 70%, var(--sand), #ff3d94 45%, #0a090b 92%); }
  75% { background: radial-gradient(circle at 70% 70%, #7a1fff, #2de6c8 45%, #0a090b 92%); }
  100% { background: radial-gradient(circle at 30% 30%, #ff3d94, #7a1fff 45%, #0a090b 92%); }
}
.schnapsround-chaos-layer { position: absolute; inset: 0; pointer-events: none; }
.schnapsround-chaos-item {
  position: absolute;
  line-height: 1;
  animation-name: schnaps-chaos-spin;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5));
}
@keyframes schnaps-chaos-spin {
  0% { transform: translate(0, 0) rotate(0deg) scale(.8); opacity: .5; }
  50% { transform: translate(var(--dx, 20px), var(--dy, -20px)) rotate(var(--rot, 360deg)) scale(1.3); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(.8); opacity: .5; }
}
.schnapsround-card {
  width: min(560px, 92vw); border-radius: var(--r-l); padding: 2.4rem 2rem;
  background: rgba(10, 9, 11, .55); backdrop-filter: blur(3px);
  border: 3px solid #ff3d94;
  box-shadow: 0 0 80px rgba(255, 61, 148, .7);
  text-align: center; position: relative; overflow: visible; z-index: 1;
  animation: schnaps-card-shake .35s ease-in-out infinite, schnaps-border-cycle 2.4s linear infinite;
}
@keyframes schnaps-card-shake {
  0%, 100% { transform: rotate(-1.2deg) scale(1); }
  50% { transform: rotate(1.2deg) scale(1.03); }
}
@keyframes schnaps-border-cycle {
  0% { border-color: #ff3d94; }
  25% { border-color: #2de6c8; }
  50% { border-color: var(--sand); }
  75% { border-color: #7a1fff; }
  100% { border-color: #ff3d94; }
}
.schnapsround-card .big {
  /* Bugfix (live gefunden, 2026-09-17: "Text passt nicht zum Feld drumherum,
     steht drüber") -- bei clamp(30px,6vw,52px) wurde die Zeile auf breiten
     Bildschirmen breiter als die Karte und lief oben/seitlich über den Rand
     hinaus (overflow:visible verdeckte das nicht). Kleinerer Max-Wert +
     explizites Umbrechen erlaubt, damit die Zeile bei Bedarf zweizeilig
     bleibt statt überzulaufen. */
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 800;
  margin-bottom: .6rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  animation: schnaps-text-rainbow 1.8s linear infinite;
}
@keyframes schnaps-text-rainbow {
  0% { color: #ff3d94; }
  20% { color: var(--sand); }
  40% { color: #2de6c8; }
  60% { color: #7a1fff; }
  80% { color: #ff8a5c; }
  100% { color: #ff3d94; }
}
.schnapsround-card .who { color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 0 12px rgba(255, 255, 255, .6); }
.schnapsround-message { margin-top: .6rem; color: #ffe3c2; font-style: italic; font-size: 15px; text-shadow: 0 0 8px rgba(0, 0, 0, .5); }

/* Gemeinsames Pause-Overlay auf allen Minispiel-Seiten (2026-09-26), siehe
   public/js/gimmicksPause.js -- nutzt die bestehende .reveal-overlay als
   Aussenrahmen (fixed, gedimmt, zentriert). */
.gp-card {
  width: min(360px, 86vw); border-radius: var(--r-l); padding: 1.6rem 1.4rem; text-align: center;
  background: var(--surface, #1c1a1f); border: 1px solid var(--border, rgba(255,255,255,.12));
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.gp-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin: 0 0 .5rem; }
.gp-count { font-size: 56px; font-weight: 700; color: var(--accent); line-height: 1; }
.gp-hint { font-size: 12.5px; color: var(--text-2); margin: .8rem 0 0; }
.gp-overlay {
  position: fixed; inset: 0; z-index: 490;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 11, .88);
  backdrop-filter: blur(3px);
  padding: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  #schnapsround-overlay, .schnapsround-card, .schnapsround-card .big, .schnapsround-chaos-item { animation: none !important; }
}

/* Bundesliga-Live-Widget: Styles stecken seit 2026-10-04 in public/js/bundesliga-widget.js
   (laeuft auf allen Seiten, auch ohne style.css, z.B. Schnabbes). */

.tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: .9rem;
}
.tab-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.tab-btn:hover { color: var(--text); border-color: var(--accent); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.tab-panel.hidden { display: none !important; }

.standings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }

.standing-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: .6rem .85rem;
  cursor: pointer;
}
.standing-row.leader { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 61, 148, .18); }

.standing-rank {
  width: 1.8em;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-size: 14px;
}
.standing-row.leader .standing-rank { color: var(--accent); font-weight: 600; }

.standing-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.standing-points {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
}

.standing-detail {
  flex-basis: 100%;
  margin: .4rem 0 0;
  padding: .5rem .7rem .1rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.standing-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-2);
}
.standing-detail-row span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.standing-detail-row--ghost { color: var(--accent); }
.standing-detail-row--ghost span:last-child { color: var(--accent); }

.standing-provisional-hint {
  flex: none;
  white-space: nowrap;
  font-size: 11px;
  color: var(--accent);
  opacity: .8;
}

.standings-empty { color: var(--text-2); font-size: 13px; margin: .5rem 0 0; }

.game-detail {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: .8rem .9rem .9rem;
  margin: 0 0 1.1rem;
}
.game-detail-title {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: .6rem;
}
.game-detail-title span { flex: 1; min-width: 0; }
.game-detail-close {
  flex: none; margin-left: auto; width: auto; margin-top: 0; box-shadow: none;
  background: transparent; border: none; color: var(--text-2);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.game-detail-close:hover { color: var(--text); }
.game-detail .standings-list { gap: .35rem; }
.game-detail .standing-row { background: var(--surface); cursor: default; }
.game-detail-wins-chart { margin-bottom: .5rem; }
.game-detail-hint { font-size: 11.5px; color: var(--text-2); margin: 0 0 .8rem; }

/* Programm-Tab: Kachel-Uebersicht, gruppiert in drei Oberkategorien
   (Umbau 2026-09-17, passi-Feedback: "Oberkategorie bereits gespielt/gerade
   live/noch offen, darunter jeweils Haupt-/Minispiele") -- groupLabel() je
   Oberkategorie, sectionLabel() darunter fuer die Haupt-/Minispiele-
   Unterteilung. */
.programm-group-label {
  margin: 0 0 .6rem;
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.programm-group-label:not(:first-child) { margin-top: 2rem; }

.programm-section-label { margin: 0 0 .5rem; }
.programm-section-label:not(:first-child) { margin-top: 1.4rem; }

.programm-grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
}

.programm-live-wrap { display: flex; flex-direction: column; gap: .7rem; }

.programm-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}

.programm-tile--locked {
  color: var(--text-2);
  font-size: 20px;
  opacity: .6;
}

.programm-tile--live,
.programm-tile--done {
  align-items: flex-end;
  justify-content: flex-start;
}
.programm-tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19, 18, 21, 0) 35%, rgba(19, 18, 21, .92) 100%);
}
.programm-tile-body { position: relative; z-index: 1; padding: .55rem .65rem; width: 100%; }
.programm-tile-name { font-weight: 600; font-size: 13.5px; color: #fff; line-height: 1.25; }
.programm-tile-winner {
  display: flex; align-items: center; gap: .3rem;
  font-size: 11.5px; color: var(--accent); margin-top: .25rem;
}
.programm-tile-winner .swatch { width: 10px; height: 10px; flex: none; }
/* Bugfix (2026-09-30, passi-Feedback "Zeilenumbruch bei Gewinnerverkuendigung
   just dance"): das Namens-Span war ein Flex-Item ohne min-width -- Flex-
   Items schrumpfen per Default nicht unter ihre intrinsische Breite,
   dadurch quetschte sich laengerer Text (z.B. "ju5t d4nc3") an den linken
   Rand der schmalen Minispiel-Kachel statt normal umzubrechen. */
.programm-tile-winner-name { min-width: 0; overflow-wrap: break-word; }

.programm-tile--live {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(255, 61, 148, .4);
}
.programm-tile-badge {
  position: absolute; top: .45rem; right: .45rem; z-index: 1;
  background: var(--accent); color: var(--on-accent);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .18rem .5rem; border-radius: var(--r-pill);
}
.programm-tile-play {
  position: relative; z-index: 1; margin: 0 .65rem .55rem;
  width: auto; margin-top: 0; box-shadow: none;
  font-size: 12px; padding: .4rem .7rem;
}

.programm-grid-row--mini { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
/* 4:3 wie die Minispiel-Titelbilder, damit nichts abgeschnitten wird (2026-10-04) */
.programm-tile--mini { aspect-ratio: 4 / 3; }
.programm-tile--mini .programm-tile-body { padding: .4rem .45rem; }
.programm-tile--mini .programm-tile-name { font-size: 11px; }
.programm-tile--mini .programm-tile-winner { font-size: 9.5px; }
.programm-tile--mini .programm-tile-winner .swatch { width: 8px; height: 8px; }

/* Featured-Overrides muessen NACH den Basis-Regeln oben stehen, sonst
   gewinnt bei gleicher Spezifitaet die spaetere Basis-Regel (z.B. aspect-ratio). */
.programm-tile--featured {
  aspect-ratio: auto;
  min-height: 160px;
  align-items: flex-end;
}
.programm-tile--featured .programm-tile-name { font-size: 20px; }
.programm-tile--featured .programm-tile-winner { font-size: 13px; }
.programm-tile--featured .programm-tile-body { padding: 1rem 1.1rem; }
.programm-tile--featured .programm-tile-badge { top: .7rem; right: .7rem; font-size: 11px; padding: .25rem .65rem; }
.programm-tile--featured .programm-tile-play {
  margin: 0 1.1rem 1rem;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 18px rgba(255, 61, 148, .35);
  font-size: 13px; padding: .5rem .9rem; font-weight: 600;
}

/* Collage der Minispiel-Titelbilder ("Minispiele als Gesamt", 2026-10-04) */
.programm-collage { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 2px; background: #000; }
.programm-collage span { background-size: cover; background-position: center; }
/* Aus der Wertung gestrichene Spiele (2026-10-04): sichtbar, aber ausgegraut */
.programm-tile--voided { filter: grayscale(.85); opacity: .78; border-style: dashed; }
.programm-tile-voided { margin-top: .25rem; font-size: 11.5px; font-weight: 600; color: var(--bad); }
/* Klickbare (gespielte) Kacheln -> Info-Fenster */
.programm-tile--clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.programm-tile--clickable:hover, .programm-tile--clickable:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); border-color: var(--accent); outline: none; }

.game-info-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(8, 7, 10, .72); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.game-info-overlay.hidden { display: none; }
.game-info-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 1.1rem 1.3rem 1.3rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: game-info-in .2s ease both; }
@keyframes game-info-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.game-info-close { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(19, 18, 21, .75); border: 1px solid var(--border); color: var(--text); box-shadow: none; font-size: 15px; }
.game-info-close:hover { background: var(--accent); color: var(--on-accent); }
.game-info-image { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background-color: var(--surface-2); background-size: cover; background-position: center; margin-bottom: .9rem; }
.game-info-title { margin: 0 0 .2rem; font-size: 22px; text-wrap: balance; }
.game-info-time { margin: 0 0 .9rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.game-info-subtitle { margin: 1rem 0 .45rem; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.game-info-winner { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 18px; font-weight: 600; }
.game-info-winner .swatch { width: 14px; height: 14px; }
.game-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.game-info-list li { display: flex; align-items: center; gap: .5rem; padding: .4rem .65rem; border-radius: 9px; background: var(--surface-2); font-size: 14px; }
.game-info-list:not(.game-info-list--minis) li:first-child { border: 1px solid rgba(255, 215, 0, .45); }
.game-info-place { width: 1.6rem; color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.game-info-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.game-info-value { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.game-info-note { margin: 0 0 .45rem; font-size: 12.5px; color: var(--text-2); }
.game-info-rating { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--text-2); }
.game-info-stars { display: inline-flex; gap: .1rem; font-size: 24px; line-height: 1; }
.game-info-star { color: #3d3943; }
.game-info-star.is-full { color: var(--gold); }
.game-info-star.is-half { background: linear-gradient(90deg, var(--gold) 50%, #3d3943 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-info-rating-label { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .game-info-card, .programm-tile--clickable { animation: none; transition: none; } }

.reveal-test-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}
.reveal-test-btn:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* Enthuellungs-Animation */
.reveal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 11, .82);
  backdrop-filter: blur(2px);
}
.reveal-card {
  width: min(320px, 80vw);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 2px solid var(--border);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  text-align: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.reveal-card.landed {
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(255, 61, 148, .55);
  animation: reveal-pulse .5s ease-out;
}
@keyframes reveal-pulse {
  0% { transform: scale(.92); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.reveal-spark {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px 2px var(--accent);
  animation: reveal-burst .7s ease-out forwards;
}
@keyframes reveal-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(.3); opacity: 0; }
}

/* Minispiel-Enthuellung: einzelner Spannungs-Flip statt Kartenstapel
   (Ankuendigungs-Umbau Runde 2, 2026-09-16, passi-Feedback "waere ein
   Spoiler" -- ein Stapel mit den Namen/Bildern aller noch nicht
   angekuendigten Minispiele haette diese vorzeitig verraten). Die Karte
   zeigt bis zum finalen Flip NUR die KC-gebrandete Rueckseite, niemals
   echte Kandidaten. Abgestimmter Entwurf:
   https://claude.ai/artifact/PgtrvfLK78QRPWWybf2V29 */
.flip-outer {
  position: relative;
  /* Deutlich vergroessert (2026-09-16, passi-Feedback: "ueber den gesamten
     Bildschirm") -- width in vh mitbegrenzt, damit die 4:3-Karte bei
     4:3-Aspect nie hoeher als der Viewport wird (Rechnung: 0.75 * 122vh
     ≈ 91.5vh). Vorher min(300px, 74vw). */
  width: min(90vw, 122vh);
  aspect-ratio: 4 / 3;
  perspective: 2200px;
}
.flip-card {
  position: relative; width: 100%; height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  /* Nachtrag (2026-09-20, passi-Feedback: "wieder der Bug" -- Schrift nach
     dem Flip verkehrt herum): will-change zwingt den Browser, die Karte auf
     eine eigene GPU-Compositing-Ebene zu heben, BEVOR die 3D-Drehung
     anfaengt (statt erst mittendrin neu zu kompositieren) -- gaengige
     Ursache fuer genau dieses Flackern/kurzzeitige Falschanzeigen bei
     verschachtelten preserve-3d/backface-visibility-Elementen auf manchen
     Chromium/GPU-Kombinationen unter Windows. */
  will-change: transform;
}
.card-face {
  position: absolute; inset: 0;
  border-radius: var(--r-l);
  /* Bugfix (2026-09-18, live gefunden: bei manchen Spieler/Browsern
     blitzte nach dem Flip kurz die gespiegelte Rueckseite ("?"/"Nächstes
     Minispiel") durch) -- auf bestimmten Chromium/GPU-Kombinationen unter
     Windows greift backface-visibility ohne den -webkit-Praefix nicht
     zuverlaessig, obwohl der unpraefixte Name laut Spezifikation reichen
     sollte. Beide Schreibweisen setzen behebt das (bekannter, browserweiter
     Flip-Card-Stolperstein, kein Einzelfall dieses Projekts).             */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Nachtrag (2026-09-20), siehe .flip-card oben: jede Kartenseite bekommt
     ihre eigene Compositing-Ebene, damit der Browser Vorder-/Rueckseite
     nicht in letzter Sekunde neu zusammensetzen muss (will-change statt
     einem zusaetzlichen transform-Wert, der den echten rotateY()-Wert der
     .card-face.front-Regel weiter unten nicht ueberschreiben darf). */
  will-change: transform;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; padding: clamp(1rem, 3vw, 3rem); text-align: center;
  border: 2px solid var(--border);
}
.card-face.back {
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 61, 148, .16), transparent 70%), var(--surface-2);
  overflow: hidden;
}
.card-face.back .logo-wash {
  position: absolute; inset: 0; margin: auto; width: 62%; height: 62%;
  background-image: url('/img/logo-original.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .1; transform: rotate(-8deg);
}
.card-face.back .back-mark { font-family: 'Jost', sans-serif; font-size: clamp(34px, 7vw, 100px); font-weight: 700; color: var(--accent); z-index: 1; }
.card-face.back .back-label { font-size: clamp(11.5px, 1.8vw, 24px); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); z-index: 1; }
.card-face.front { transform: rotateY(180deg); background: var(--surface-2); }
.front-icon {
  width: 52%; aspect-ratio: 4 / 3; border-radius: var(--r-m);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: clamp(34px, 6vw, 90px); overflow: hidden;
}
.front-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Minispiel-Titelbilder (2026-10-03, passi-Feedback "abgeschnitten"): komplett zeigen statt auf 4:3 zuschneiden. */
.front-icon img[src*="Minigame_"] { object-fit: contain; }
.front-name { font-family: 'Jost', sans-serif; font-weight: 700; font-size: clamp(19px, 3.6vw, 56px); color: var(--text); text-wrap: balance; }
.flip-card.is-flipped .card-face.front { border-color: var(--accent); box-shadow: 0 0 46px rgba(255, 61, 148, .55); }
.flip-outer.pulse .card-face.front { animation: land-pulse .48s ease-out; }
@keyframes land-pulse {
  0% { transform: rotateY(180deg) scale(.9); }
  58% { transform: rotateY(180deg) scale(1.05); }
  100% { transform: rotateY(180deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card { transition: none !important; }
  .flip-outer.pulse .card-face.front { animation: none; }
}
.reveal-video {
  width: min(1440px, 96vw);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-l);
  border: 2px solid var(--accent);
  box-shadow: 0 0 40px rgba(255, 61, 148, .45);
  background: #000;
  object-fit: cover;
}
.reveal-video-unmute {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: auto; margin-top: 0; font-size: 13px; padding: .6rem 1rem;
}

/* "Bereit?"-Handshake vorm Enthuellen -- eigene Karte in derselben
   Overlay-Optik wie Reveal/Schnapsrunde. */
.ready-check-card {
  width: min(380px, 88vw);
  border-radius: var(--r-l);
  background: var(--surface-2);
  border: 2px solid var(--accent);
  box-shadow: 0 0 40px rgba(255, 61, 148, .35);
  padding: 1.8rem 1.5rem;
  text-align: center;
}
.ready-check-title { font-size: 21px; font-weight: 700; margin-bottom: 1.2rem; }
.ready-check-btn { font-size: 16px; padding: .9rem 1.4rem; }
.ready-check-status { font-size: 13px; color: var(--text-2); margin: .9rem 0 0; }
.ready-check-progress { font-size: 12.5px; color: var(--text-2); margin: 1rem 0 .6rem; font-variant-numeric: tabular-nums; }
.ready-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.ready-check-list li {
  font-size: 11px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: .2rem .55rem; color: var(--text-2);
}
.ready-check-list li.confirmed { border-color: var(--accent); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .reveal-card.landed { animation: none; }
  .reveal-spark { display: none; }
}

.chart-wrap { position: relative; }
.standings-chart { width: 100%; overflow-x: auto; }
.standings-chart svg { display: block; }

.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-baseline { stroke: #3a3640; stroke-width: 1; }
.chart-axis-label { font-family: 'Jost', sans-serif; font-size: 10px; fill: var(--text-2); }
.chart-name-label { font-family: 'Jost', sans-serif; font-size: 10.5px; fill: var(--text-2); }
/* Spielstand im Hub groesser (passi 2026-10-08) -- Werte in viewBox-Einheiten, auf breiten Feldern waechst alles mit */
.chart-svg--standings .chart-axis-label { font-size: 13px; }
.chart-svg--standings .chart-name-label { font-size: 15px; font-weight: 600; fill: var(--text); }
#panel-standings .chart-legend-item { font-size: 14px; }
#panel-standings .chart-legend-swatch { width: 13px; height: 13px; }

.chart-hit { fill: transparent; cursor: pointer; outline: none; }
.chart-hover-wash { fill: transparent; }
.chart-hover-wash.active { fill: rgba(255, 255, 255, .04); }

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: .55rem .7rem;
  min-width: 160px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  z-index: 5;
}
.chart-tooltip-title { font-weight: 600; margin-bottom: .35rem; color: var(--text); }
.chart-tooltip-row { display: flex; align-items: center; gap: .4rem; padding: .12rem 0; color: var(--text-2); }
.chart-tooltip-key { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.chart-tooltip-key--ghost {
  background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 4px);
  opacity: .7;
  border: 1px dashed var(--accent);
}
.chart-tooltip-label { flex: 1; }
.chart-tooltip-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tooltip-total {
  display: flex; justify-content: space-between; gap: .6rem;
  margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text);
}
.chart-tooltip-total strong { font-variant-numeric: tabular-nums; }

.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .75rem 0 1.1rem; }
.chart-legend-item {
  display: inline-flex; align-items: center; gap: .4rem;
  width: auto; margin-top: 0; box-shadow: none;
  font-family: inherit; font-size: 12px; font-weight: 400; color: var(--text-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  padding: .25rem .6rem .25rem .5rem;
  cursor: pointer;
}
.chart-legend-item:hover { border-color: var(--border); color: var(--text); }
.chart-legend-item.active { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
.chart-legend--static { margin: 0 0 .6rem; }
.chart-legend-item--static { cursor: default; }
.chart-legend-item--static:hover { border-color: transparent; color: var(--text-2); }
.chart-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.chart-legend-swatch--ghost {
  background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 4px);
  opacity: .7;
  border: 1px dashed var(--accent);
}

/* Statistik-Tab: Getrunken & Zeit, je ein Feld mit Kreisdiagramm */
.stat-field + .stat-field { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.stat-field-title { font-size: 28px; font-weight: 700; margin: 0 0 1rem; }
.stat-totals { display: flex; gap: 1rem; margin-bottom: 1rem; }
.stat-total { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: .8rem 1rem; text-align: center; }
.stat-total-num { display: block; font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-total-label { font-size: 12px; color: var(--text-2); }
.stat-runtime { font-size: 20px; font-weight: 600; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.stat-pie-chart { width: 100%; max-width: 480px; margin: 0 auto; }
.stat-pie-chart svg { display: block; }

/* Minispiele-Aufschlüsselung unter dem "Zeit"-Kreisdiagramm (2026-09-18,
   passi-Wunsch): Minispiele zaehlen im Haupt-Diagramm nur noch als EIN
   Segment, dieses zweite Diagramm zeigt, wie sich das auf die einzelnen
   Minispiele verteilt. Nachtrag (2026-09-18, passi-Feedback: die zwei
   Diagramme wirkten beim schnellen Scrollen wie EIN einziges statt zwei
   getrennte) -- eigener, klar abgesetzter Kasten (Hintergrund + Rahmen wie
   .stat-total) statt nur einer duennen Trennlinie mit kleinem Label. */
.stat-subfield { margin-top: 1.6rem; padding: 1.2rem 1rem 1.4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); }
.stat-subfield-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 1rem; }
.stat-footnote { font-size: 11.5px; color: var(--text-2); opacity: .75; margin: .8rem 0 0; }

.pie-slice { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; outline: none; transition: filter .12s ease; }
.pie-slice:hover, .pie-slice.hover, .pie-slice:focus-visible { filter: brightness(1.2); }
.pie-label {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  fill: var(--text); stroke: #000; stroke-width: 3px; stroke-linejoin: round;
  paint-order: stroke fill; pointer-events: none; user-select: none;
}

/* Beliebtheitsstatistik-Bewertungsoverlay (Phase 1.9, 2026-09-17) */
.rating-card {
  width: min(360px, 88vw); border-radius: var(--r-l); padding: 1.8rem 1.6rem;
  background: var(--surface-2); border: 2px solid var(--accent);
  box-shadow: 0 0 40px rgba(255, 61, 148, .4);
  text-align: center;
}
.rating-card h2 { margin: .3rem 0 1.2rem; font-family: 'Jost', sans-serif; }
.rating-stars { display: flex; justify-content: center; gap: .3rem; margin-bottom: 1rem; }
.rating-star {
  font-size: 34px; line-height: 1; background: none; border: none; cursor: pointer;
  color: var(--border); transition: color .1s ease, transform .1s ease;
  padding: .1rem;
}
.rating-star:hover, .rating-star:focus-visible, .rating-star.rating-star--active { color: var(--sand); transform: scale(1.12); }
.rating-zero {
  background: none; border: none; color: var(--text-2); font-size: 12.5px;
  text-decoration: underline; cursor: pointer; padding: .3rem;
}
.rating-zero:hover { color: var(--text); }

/* Beliebtheitsstatistik-Balkendiagramm (Phase 1.9, 2026-09-17) */
.rating-bar-label { font-family: 'Jost', sans-serif; font-size: 12px; fill: var(--text-2); }
.rating-bar-value { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; fill: var(--text); font-variant-numeric: tabular-nums; }
.rating-bar-track { fill: var(--surface-2); }
.rating-bar-fill { fill: var(--accent); transition: filter .12s ease; }
.rating-bar-fill.hover { filter: brightness(1.2); }

.sparks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.spark {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 2px var(--accent);
  opacity: 0;
  animation: spark-drift linear infinite;
}
@keyframes spark-drift {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8% { opacity: .85; }
  100% { transform: translateY(-100vh) translateX(var(--drift, 20px)) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; opacity: .3; }
}

.wrap { position: relative; z-index: 1; }

/* Ad-hoc-Abstimmung (Phase 12) -- ueberlagert wortwoertlich ALLES (auch das
   Reveal-/Schnapsrunde-Overlay), daher der hoechste z-index der Seite. Wird
   per JS (adhocvote.js) selbst ins DOM eingehaengt, nicht Teil der HTML. */
.adhoc-vote-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 11, .88);
  backdrop-filter: blur(3px);
  padding: 1.25rem;
}
.adhoc-vote-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--r-l);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 0 50px rgba(255, 61, 148, .35);
}
.adhoc-vote-question { font-size: clamp(20px, 4.5vw, 28px); font-weight: 700; margin: .5rem 0 1.3rem; text-wrap: balance; }
.adhoc-vote-buttons { display: flex; gap: .8rem; justify-content: center; }
.adhoc-vote-btn { width: auto; flex: 1; padding: 1rem; font-size: 18px; font-weight: 600; }
.adhoc-vote-btn--nein { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--border); }
.adhoc-vote-btn--nein:hover { border-color: var(--accent); background: var(--surface-2); }
.adhoc-vote-progress { color: var(--text-2); font-size: 13px; margin: 1rem 0 0; }
.adhoc-vote-spectator-note { color: var(--text-2); font-size: 13px; margin: 1rem 0 0; }
.adhoc-vote-connection-hint { color: #ffb86c; font-size: 13px; font-weight: 600; margin: .6rem 0 0; }
.adhoc-vote-result-bars { display: flex; flex-direction: column; gap: .7rem; }
.adhoc-vote-result-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: .8rem 1.1rem;
}
.adhoc-vote-result-label { font-size: 16px; font-weight: 600; }
.adhoc-vote-result-num { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Finale-Rewind-Spiegeldiagramm (2026-10-03): Achsen-/Werte-Beschriftung */
.rw-axis-label { font-family: 'Jost', sans-serif; font-size: 12px; fill: var(--text-2); }
.rw-band { transition: transform .7s cubic-bezier(.3, .7, .2, 1); } /* Platztausch im Rewind (passi 2026-10-07) */
@media (prefers-reduced-motion: reduce) { .rw-band { transition: none; } }
.rw-axis-title { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 700; }
.rw-axis-title--points { fill: #ff8cc4; }
.rw-axis-title--drinks { fill: var(--sand); }
.rw-value-label { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; fill: var(--text); }
.rw-value-label--drinks { fill: var(--sand); }
.rw-name-label { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; fill: var(--text); }

/* ---- Minispiel-Enthuellung "Strich-Logo-Reveal" (passi 2026-10-12, public/js/minigame-draw-reveal.js) ----
   Hub: laeuft im #reveal-overlay (Klasse reveal-overlay--draw = rein schwarzer Grund), Vorschau: /reveal-preview.html */
.dr-overlay { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-root { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; width: 100%; padding: 0 16px; }
/* Vorspann "Naechstes Minispiel:" (passi 2026-10-13), mittig ueber der noch leeren Buehne */
.dr-intro { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; letter-spacing: .04em; color: #fff; opacity: 0; text-shadow: 0 0 6px #fff, 0 0 18px #ff5fae, 0 0 42px #ff3d94, 0 0 80px rgba(255, 61, 148, .6); }
/* Seit 2026-10-12 (passi: "koernig und laggy") nur noch Ebenen, die verschoben/vergroessert/ausgeblendet werden --
   keine Filter oder Masken mehr, die sich waehrend der Animation aendern. Masse: Rand 15 % rund ums Bild (PAD im JS),
   Wisch-Fenster 160 % breit (130 % Bild + 30 % weiche Kante). */
.dr-stage { position: relative; width: min(72vw, 760px); aspect-ratio: 4 / 3; max-height: 62vh; isolation: isolate; }
.dr-halo { position: absolute; inset: -12%; background: radial-gradient(closest-side, rgba(255, 61, 148, .3), rgba(255, 61, 148, .1) 55%, transparent 76%); opacity: 0; pointer-events: none; will-change: opacity; }
.dr-wipe {
  position: absolute; left: -15%; top: -15%; width: 160%; height: 130%; overflow: hidden; pointer-events: none;
  transform: translateX(-100%);
  -webkit-mask-image: linear-gradient(90deg, #000 81.25%, transparent); mask-image: linear-gradient(90deg, #000 81.25%, transparent);
}
.dr-color { position: absolute; left: 0; top: 0; width: 81.25%; height: 100%; opacity: .35; transform: translateX(123.077%); }
.dr-color > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Farbiges Bild als Vektorgrafik in der Buehnenflaeche (gestochen scharf). Mit Canvas-Schein (.has-glow) nur noch die
   guenstigen Farbfilter; Rueckfall ohne Canvas-Filter: Schein per CSS-Filter (steht still, wird nicht animiert). */
.dr-color > svg, .dr-color > img { position: absolute; left: 11.538%; top: 11.538%; width: 76.923%; height: 76.923%; object-fit: contain; filter: saturate(1.4) brightness(1.18) drop-shadow(0 0 6px rgba(255, 61, 148, .95)) drop-shadow(0 0 22px rgba(255, 61, 148, .7)); }
.dr-color.has-glow > svg { filter: saturate(1.4) brightness(1.18); }
.dr-wipe.is-shown, .dr-color.is-shown { transform: none; opacity: 1; }
.dr-wipe.is-shown { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.dr-halo.is-shown { opacity: .9; }
.dr-stage > .dr-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: filter; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px #ff3d94) drop-shadow(0 0 14px rgba(255, 61, 148, .85)); }
.dr-flash { position: absolute; inset: -15%; background: radial-gradient(closest-side, rgba(255, 238, 248, .85), rgba(255, 61, 148, .45) 45%, transparent 76%); mix-blend-mode: screen; mix-blend-mode: plus-lighter; opacity: 0; pointer-events: none; will-change: opacity; }
/* Name: scharfe Schrift + darueber eine eigene Leucht-Ebene, deren Deckkraft "atmet" (statt wechselnder Schatten) */
.dr-name { display: grid; justify-items: center; font-size: clamp(32px, 5vw, 60px); font-weight: 700; letter-spacing: .03em; text-align: center; opacity: 0; }
.dr-name > span { grid-area: 1 / 1; }
/* passi 2026-10-12 ("Schrift sah qualitativ schlecht aus"): die Buchstaben selbst ohne Schatten (gestochen scharfe
   Kanten), das gesamte Leuchten liegt als eigene Ebene DAHINTER -- vorher verwischte ein weisser Schein direkt die Kanten */
.dr-name-text { color: #fff; position: relative; z-index: 1; } /* ueber der Leucht-Ebene (die wegen ihrer Deckkraft sonst obenauf gezeichnet wuerde) */
.dr-name-glow { color: transparent; text-shadow: 0 0 4px rgba(255, 255, 255, .85), 0 0 12px #ff5fae, 0 0 28px #ff3d94, 0 0 60px rgba(255, 61, 148, .85), 0 0 95px rgba(255, 61, 148, .45); opacity: .85; will-change: opacity; }
.dr-name.is-shown { opacity: 1; }
.reveal-overlay.reveal-overlay--draw { background: #000; backdrop-filter: none; z-index: 60; }

/* ---- KC-Zeichen als Bereit-Anzeige (passi 2026-10-12, js/kc-sign.js): "aus" bis "Bereit", dann flackert es an ---- */
.kc-sign { display: block; height: auto; margin: 0 auto; transition: filter .4s ease, opacity .4s ease; }
.kc-sign.is-off { filter: grayscale(1) brightness(.32) contrast(1.1); opacity: .8; animation: none; } /* animation:none -- sonst ueberschreibt ein Logo-Puls (z.B. .wl-logo) das "Aus" */
.kc-sign.is-on { filter: drop-shadow(0 0 14px rgba(255, 61, 148, .75)) drop-shadow(0 0 34px rgba(255, 61, 148, .45)); animation: kc-sign-glow 3.2s ease-in-out infinite; }
.kc-sign.is-on.is-flicker { animation: kc-sign-flicker .85s linear 1; }
@keyframes kc-sign-flicker {
  0% { opacity: .35; filter: grayscale(1) brightness(.35); }
  8% { opacity: 1; filter: none; }
  16% { opacity: .4; filter: grayscale(1) brightness(.4); }
  28% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 61, 148, .7)); }
  36% { opacity: .55; filter: grayscale(.6) brightness(.6); }
  48%, 100% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 61, 148, .75)) drop-shadow(0 0 34px rgba(255, 61, 148, .45)); }
}
@keyframes kc-sign-glow { 50% { filter: drop-shadow(0 0 20px rgba(255, 61, 148, .95)) drop-shadow(0 0 46px rgba(255, 61, 148, .55)); } }
.ready-check-card .kc-sign { width: min(150px, 40vw); margin-bottom: .8rem; }
.gg-ready-sign, .gr-ready-sign { width: min(130px, 36vw); margin: .4rem auto 1rem; }
@media (prefers-reduced-motion: reduce) { .kc-sign.is-on, .kc-sign.is-on.is-flicker { animation: none; } }

/* ---- Einheitlicher Countdown "Neon-Ring" (passi 2026-10-12, js/kc-countdown.js) ----
   Ring = Gesamtdauer dieses Countdowns. Kurz (<= 5 s): von Anfang an pink. Laenger: weiss, letzte 3 s pink + Puls. */
.kc-ring { position: relative; display: grid !important; place-items: center; aspect-ratio: 1 / 1; margin-left: auto; margin-right: auto; --kc-ring: 132px; width: var(--kc-ring); }
/* Bugfix (passi 2026-10-14): das display:grid !important oben hat .hidden ueberstimmt -- ausgeblendete Ringe blieben mit
   der letzten Zahl stehen (z.B. Ordnen-Aufloesung). Unsichtbar statt weg, damit das Layout darunter nicht springt. */
.kc-ring.hidden { visibility: hidden; }
.kc-ring--s { --kc-ring: 96px; }
.kc-ring--m { --kc-ring: 132px; }
.kc-ring--l { --kc-ring: 190px; }
.kc-ring--xl { --kc-ring: min(300px, 70vw); }
.kc-ring > .kc-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.kc-ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 5; }
.kc-ring-bar { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 61, 148, .9)) drop-shadow(0 0 10px rgba(255, 61, 148, .45)); transition: stroke-dashoffset .3s linear, stroke .3s; }
.kc-ring > :not(svg) { grid-area: 1 / 1; }
.kc-ring .gg-countdown-num, .kc-ring .ord-countdown-num, .kc-ring .kc-ring-num, .kc-ring .lp-timer-display, .kc-ring .gp-count, .kc-ring .gg-transition-count {
  position: relative; z-index: 1; margin: 0; color: #fff; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  font-size: calc(var(--kc-ring) * .38); letter-spacing: 0; text-shadow: none; transition: color .3s, text-shadow .3s;
}
.kc-ring.is-clock .lp-timer-display, .kc-ring.is-clock .kc-ring-num { font-size: calc(var(--kc-ring) * .24); }
.kc-ring .gg-countdown-unit, .kc-ring .ord-countdown-unit, .kc-ring .kc-ring-unit {
  position: absolute; left: 0; right: 0; bottom: 19%; text-align: center; z-index: 1;
  font-size: calc(var(--kc-ring) * .085 + 3px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.kc-ring-tick { animation: kc-ring-tick .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes kc-ring-tick { from { transform: scale(1.18); opacity: .4; filter: blur(3px); } to { transform: scale(1); opacity: 1; filter: blur(0); } }
.kc-ring.is-short :is(.gg-countdown-num, .ord-countdown-num, .kc-ring-num, .gp-count, .gg-transition-count),
.kc-ring.is-final :is(.gg-countdown-num, .ord-countdown-num, .kc-ring-num, .lp-timer-display, .gp-count),
.kc-ring.is-done :is(.gg-countdown-num, .ord-countdown-num, .kc-ring-num, .lp-timer-display) { color: var(--accent); text-shadow: 0 0 18px rgba(255, 61, 148, .8); }
.kc-ring.is-short .kc-ring-bar, .kc-ring.is-final .kc-ring-bar { stroke: #ff7ab8; }
.kc-ring.is-final { animation: kc-ring-pulse 1s ease-in-out infinite; }
@keyframes kc-ring-pulse { 50% { transform: scale(1.06); } }
.kc-ring.is-paused { opacity: .5; }
.kc-ring.is-done .kc-ring-bar { stroke: transparent; }
@media (prefers-reduced-motion: reduce) { .kc-ring.is-final, .kc-ring-tick { animation: none; } .kc-ring-bar { transition: none; } }

/* ---- Knoepfe: einheitliches Verhalten (Design-Etappe 2, passi 2026-10-12) ----
   Hauptknopf  = pink mit Schein (button, .hub-link-btn, .tp-btn, .gr-btn, .bv-btn, .rd-btn, .agl-btn)
   Nebenknopf  = transparent mit Rahmen (.btn-ghost, .tp-btn-secondary, .agl-btn-secondary, .admin-btn-secondary)
   Kachelknopf = Flaeche mit Rahmen (.gimmick-btn: Bier/Schnaps/Toast ...)
   Sonderknoepfe (Sterne, Schliessen-Kreuz, Reiter, Spiel-Steuerung) behalten ihr Aussehen, bekommen nur das Eindruecken. */
:where(button, .hub-link-btn, .tp-btn, .gr-btn, .bv-btn, .rd-btn, .agl-btn, .btn-ghost, .gimmick-btn, .tab-btn) {
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}
:where(button:not(.btn-ghost, .gimmick-btn, .tab-btn, .rating-star, .rating-zero, .game-info-close, .tp-btn-secondary, .agl-btn-secondary, .admin-btn-secondary, .fin-credits-crown, .ghost-icon-btn, .gg-correction-field *), .hub-link-btn, .tp-btn, .gr-btn, .bv-btn, .rd-btn, .agl-btn:not(.agl-btn-secondary)):hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 24px rgba(255, 61, 148, .65), 0 0 46px rgba(255, 61, 148, .25);
}
:where(.btn-ghost, .tp-btn-secondary, .agl-btn-secondary, .admin-btn-secondary, .gimmick-btn):hover:not(:disabled) {
  border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 61, 148, .28);
}
:where(button, .hub-link-btn, .tp-btn, .gr-btn, .bv-btn, .rd-btn, .agl-btn):active:not(:disabled) { transform: translateY(1px) scale(.97); }
:where(button, .hub-link-btn, .tp-btn, .gr-btn, .bv-btn, .rd-btn, .agl-btn):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
:where(button, .tp-btn, .gr-btn, .bv-btn, .rd-btn):disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }
@media (prefers-reduced-motion: reduce) { :where(button, .hub-link-btn, .tp-btn, .gr-btn, .bv-btn, .rd-btn, .agl-btn):active { transform: none; } }

/* ---- Regelseiten der Minispiele, Mischform (Design-Etappe 3, passi 2026-10-12) ----
   Karte bleibt, Inhalt wie auf den Maingame-Regelseiten: Einleitung groesser, Abschlusszeile als Hinweiskarte (⏳). */
.card:has(> .gg-rules-section) > .gg-intro,
.card:has(> .ord-rules-section) > .ord-intro,
.card:has(> .wvk-rules-section) > .wvk-intro { font-size: 18px; color: var(--text); margin: 0 0 1.4rem; line-height: 1.6; }
.card:has(> .gg-rules-section) > .gg-caption:last-child,
.card:has(> .ord-rules-section) > .ord-caption:last-child,
.card:has(> .wvk-rules-section) > .wvk-caption:last-child {
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-m);
  padding: 1rem 1.2rem; font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 1.4rem 0 0; text-align: center;
}
.card:has(> .gg-rules-section) > .gg-caption:last-child::before,
.card:has(> .ord-rules-section) > .ord-caption:last-child::before,
.card:has(> .wvk-rules-section) > .wvk-caption:last-child::before { content: '⏳ '; }

/* ---- Regelseiten der Echtzeit-Minispiele (Blobby Volley, Rudern, Turmflucht; passi 2026-10-12) ----
   Gleicher Aufbau wie Liederraten & Co. (.gg-intro / .gg-rules-section / .gg-rules-sub / .gg-caption),
   dazu Tasten-Symbole fuer die Steuerung. */
.card.mg-rules { width: 100%; max-width: 680px; color: var(--text); }
.card:has(> .gg-rules-section) > .gg-intro.mg-story { font-size: 16px; font-style: italic; color: var(--text-2); margin-bottom: .8rem; }
.kc-keys { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .7rem; }
.kc-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 .55rem;
  background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 3px;
  border-radius: var(--r-s); font-weight: 700; font-size: 15px; color: var(--text);
}
.kc-key--wide { min-width: 96px; }
.kc-key-label { color: var(--text-2); font-size: 14px; margin-right: .3rem; }
.kc-keys-sep { width: 1px; height: 22px; background: var(--border); margin: 0 .3rem; }


/* Admin: Test-Reset (passi 2026-10-12) */
.admin-reset-box { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.admin-reset-box input { min-width: 12rem; }
.admin-danger-btn:not(:disabled) { border-color: var(--bad-strong); color: var(--bad); }

/* ---- Ordnen-Ueberarbeitung (passi 2026-10-13) ---------------------------------------------------------------- */
/* Weicher Uebergang Kriterium -> Spiel */
.ord-fade-out { animation: ordFadeOut .6s ease forwards; }
.ord-fade-in { animation: ordFadeIn .9s cubic-bezier(.2,.8,.3,1); }
@keyframes ordFadeOut { to { opacity: 0; transform: scale(.98); } }
@keyframes ordFadeIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

/* Rueckmeldung nach der Aufloesung: Leucht-Rand ums Spielfeld + kurze Zeile */
#ord-phase-round { transition: border-color .35s ease, box-shadow .35s ease; }
#ord-phase-round.ord-glow-good { border-color: #3ddc84; box-shadow: 0 0 0 1px #3ddc84, 0 0 38px rgba(61, 220, 132, .45), inset 0 0 40px rgba(61, 220, 132, .12); }
#ord-phase-round.ord-glow-bad { border-color: var(--bad-strong); box-shadow: 0 0 0 1px var(--bad-strong), 0 0 38px rgba(255, 90, 90, .45), inset 0 0 40px rgba(255, 90, 90, .12); }
.ord-feedback-line { min-height: 1.6em; margin: .35rem 0 0; font-size: 18px; font-weight: 700; text-align: center; }
.ord-feedback-line.is-good { color: #3ddc84; text-shadow: 0 0 14px rgba(61, 220, 132, .6); }
.ord-feedback-line.is-bad { color: var(--bad-strong); text-shadow: 0 0 14px rgba(255, 90, 90, .6); }

/* Kartenstapel: darunter liegende Karten leicht versetzt, oberste aufgedeckt */
.ord-stack { position: relative; width: 170px; height: 96px; margin: 14px 0 10px; }
.ord-stack > .ord-current-card { position: absolute; inset: 0; z-index: 4; transition: opacity .25s ease; }
.ord-stack.is-drawn > .ord-current-card { opacity: 0; }
.ord-stack-under {
  position: absolute; inset: 0; border-radius: var(--r-l); border: 1px solid #4a3f52;
  background: repeating-linear-gradient(45deg, #221c27 0 8px, #1d1822 8px 16px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.ord-stack-under--1 { transform: translate(5px, 6px) rotate(2deg); z-index: 3; }
.ord-stack-under--2 { transform: translate(10px, 12px) rotate(4deg); z-index: 2; }
.ord-stack-under--3 { transform: translate(15px, 18px) rotate(6deg); z-index: 1; }
.ord-stack[data-depth="0"] .ord-stack-under { display: none; }
.ord-stack[data-depth="1"] .ord-stack-under--2, .ord-stack[data-depth="1"] .ord-stack-under--3,
.ord-stack[data-depth="2"] .ord-stack-under--3 { display: none; }
.ord-stack-count { font-size: 12px; color: var(--text-2); margin-top: 18px; }

/* Abschluss + Endbildschirm: Rangliste in zwei Spalten */
.ord-finale-winner { text-align: center; font-size: clamp(24px, 3.2vw, 30px); font-weight: 700; margin: 0; color: var(--gold); text-shadow: 0 0 22px rgba(255, 215, 0, .35); }
.ord-finale-caption { text-align: center; font-size: 15px; color: var(--text-2); margin: .2rem 0 .8rem; }
.ord-page:has(#ord-phase-finale:not(.hidden)), .ord-page:has(#ord-phase-finished:not(.hidden)) { max-width: 1280px; }
.ord-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* fest gleich breit, lange Namen mit ... (passi 2026-10-14) */ column-gap: 16px; row-gap: 3px; }
.ord-rank-row {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: .17rem .65rem; cursor: default; transition: border-color .15s ease, background .15s ease;
  display: flex; align-items: center; gap: .55rem;
}
.ord-rank-row.is-played { border-color: rgba(255, 61, 148, .75); box-shadow: inset 4px 0 0 var(--accent), 0 0 12px rgba(255, 61, 148, .25); background: #2a1f2c; }
.ord-rank-row.is-late { opacity: .72; }
.ord-rank-row:hover { border-color: var(--accent); background: #26202a; opacity: 1; }
.ord-rank-top { display: contents; }
.ord-rank-no { width: 1.6em; flex: none; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ord-rank-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-rank-hours { flex: none; font-size: 14px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ord-rank-bar { order: 3; flex: none; width: 120px; display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: rgba(255, 255, 255, .06); }
.ord-rank-hours { order: 4; min-width: 6.6em; text-align: right; }
.ord-rank-bar > span { display: block; height: 100%; background-size: 18px 18px; }
.ord-rank-tip {
  position: fixed; z-index: 500; pointer-events: none; min-width: 220px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-m);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); padding: .6rem .75rem; font-size: 14px;
}
.ord-rank-tip-head { font-weight: 700; margin-bottom: .4rem; color: var(--text); }
.ord-rank-tip-row { display: flex; align-items: center; gap: .45rem; padding: .12rem 0; color: var(--text); }
.ord-rank-tip-row .swatch { width: 14px; height: 14px; }
.ord-rank-tip-val { margin-left: auto; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Ordnen Runde 3 (passi 2026-10-13) */
/* Wer wo getippt hat (passi 2026-10-14): eigene Spalte links neben dem Spielfeld, immer eine waagerechte Reihe,
   buendig zur Karte hin -- falsche auf Hoehe ihrer Luecke, richtige auf Hoehe der neuen Karte */
.ord-card { position: relative; }
.ord-gap-pickers, .ord-card-pickers { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: row-reverse; flex-wrap: nowrap; gap: 3px; z-index: 2; pointer-events: none; }
.ord-gap-pickers .swatch, .ord-card-pickers .swatch { width: 13px; height: 13px; flex: none; box-shadow: 0 0 0 2px var(--surface); }
/* eigene falsche Stelle bei einer wiederholten Karte */
.ord-gap-line.is-wrong { height: 2px; background: var(--bad-strong); box-shadow: 0 0 8px rgba(255, 90, 90, .85); }
.ord-gap-arrow.is-wrong { background: var(--bad-strong); filter: drop-shadow(0 0 8px rgba(255, 90, 90, .9)); }
/* Namen aller aktiven Spieler leuchten mit */
.ord-life-chip.is-flash-good { border-color: #3ddc84; box-shadow: 0 0 0 1px #3ddc84, 0 0 14px rgba(61, 220, 132, .6); }
.ord-life-chip.is-flash-bad { border-color: var(--bad-strong); box-shadow: 0 0 0 1px var(--bad-strong), 0 0 14px rgba(255, 90, 90, .6); }
/* Countdown bis zur Sieger-Einblendung */
.ord-finale-countdown { text-align: center; font-size: 15px; color: var(--text-2); margin: -.4rem 0 .8rem; min-height: 1.4em; }
.ord-finale-countdown b { color: var(--gold); font-size: 18px; font-variant-numeric: tabular-nums; }

/* Ordnen v4 (passi 2026-10-13): Cover + Stunden auf den Karten, groesser */
.ord-card { display: flex; align-items: center; gap: .7rem; padding: .3rem .7rem .3rem .3rem; min-height: 50px; font-size: 15px; font-weight: 600; }
.ord-card-img { width: 92px; height: 43px; flex: none; object-fit: cover; border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.ord-card-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-card-hours { flex: none; font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ord-card.is-new .ord-card-hours { color: var(--gold); text-shadow: 0 0 12px rgba(255, 215, 0, .45); }
/* Stapel mit Cover: groessere Karte */
.ord-current { width: 260px; }
.ord-stack { width: 240px; height: 158px; perspective: 900px; }
.ord-current-card { width: 240px; height: 158px; flex-direction: column; justify-content: flex-start; padding: 0; overflow: hidden; gap: 0; }
.ord-current-img { display: block; width: 100%; height: 112px; object-fit: cover; }
.ord-current-img[hidden] { display: none; }
.ord-current-card span { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: 16px; line-height: 1.2; text-align: center; }
.ord-current-card:has(.ord-current-img[hidden]) span { font-size: 18px; }
.ord-card-ghost { background-size: cover; background-position: center; }
/* wer schon getippt hat */
.ord-life-chip.has-picked { border-color: var(--accent); background: rgba(255, 61, 148, .14); }
.ord-life-chip.has-picked::after { content: '✓'; font-weight: 700; color: var(--accent); margin-left: .15rem; }
/* Rangliste: kleines Cover */
.ord-rank-img { width: 38px; height: 18px; flex: none; object-fit: cover; border-radius: 3px; }
.ord-rank-row { padding-top: .12rem; padding-bottom: .12rem; }

/* Ordnen v6 (passi 2026-10-14): "mehr/weniger Std." an der Seite deutlich groesser und heller */
.ord-legend { width: 56px; }
.ord-legend-top, .ord-legend-bottom { font-size: 14px; font-weight: 700; letter-spacing: .08em; gap: 4px; }
.ord-legend-top { color: var(--warm); text-shadow: 0 0 10px rgba(255, 143, 192, .35); }
.ord-legend-bottom { color: var(--text); opacity: .8; }
.ord-legend-line { width: 2px; }
/* Admin: Uebersicht richtige Reihenfolge / Zieh-Reihenfolge */
.ordadm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ordadm-col h3 { font-size: 14px; margin: 0 0 .4rem; color: var(--text); }
.ordadm-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ordadm-list li { display: flex; gap: .5rem; align-items: baseline; padding: .18rem .4rem; border-radius: var(--r-s); }
.ordadm-list li:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.ordadm-no { width: 2.2em; flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.ordadm-name { flex: 1; min-width: 0; }
.ordadm-hours { flex: none; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ordadm-list li.is-drawn { opacity: .55; }
.ordadm-list li.is-drawn .ordadm-name::after { content: ' ✓'; color: #3ddc84; }
.ordadm-list li.is-current { background: rgba(255, 61, 148, .18); outline: 1px solid var(--accent); opacity: 1; }
.ordadm-list li.is-current .ordadm-name::after { content: ' ← jetzt dran'; color: var(--accent); font-weight: 700; }
.ordadm-sep { margin: .5rem 0 .25rem; font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }

/* ---- Ordnen Runde 7 (passi 2026-10-14) ----
   Platz links fuer die Tipp-Punkte (8 Punkte nebeneinander) und rechts fuer die Pfeile neben den Karten */
.ord-page:has(#ord-phase-round:not(.hidden)) { max-width: 1160px; }
.ord-board { margin-left: 112px; margin-right: 46px; }
/* Pfeile rechts NEBEN den Karten statt auf deren Kante, groesser */
.ord-gap-arrow { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: 26px; height: 32px; margin: 0; }
/* Ausgeschiedene und Passi: keine Pfeile, keine Linien -- die Zeile bleibt nur als Abstand (und fuer die Tipp-Punkte) */
.ord-gap-row.is-spectator { height: 10px; }
/* Proberunde: Personen-Karten mit Farbpunkt/Muster statt Cover */
.ord-card-swatch.swatch { width: 34px; height: 34px; flex: none; margin: 0 .25rem 0 .2rem; box-shadow: 0 0 0 2px var(--surface), 0 2px 8px rgba(0, 0, 0, .45); }
.ord-current-swatch { display: flex; align-items: center; justify-content: center; height: 112px; }
.ord-current-swatch[hidden] { display: none; }
.ord-current-swatch .swatch { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--surface), 0 0 22px rgba(255, 61, 148, .35); }
.ord-probe-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 420px; text-align: center; }
.ord-probe-title { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; margin: 0; color: var(--text); text-shadow: 0 0 22px rgba(255, 61, 148, .35); }
.ord-probe-sub { font-size: 17px; color: var(--text-2); margin: 0; }
.ord-probe-ack-btn { width: auto; font-size: 18px; padding: .75rem 2rem; margin-top: .6rem; }
.ord-probe-ack-note { font-size: 15px; color: var(--text-2); margin: .6rem 0 0; }
.ord-probe-acks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin-top: .4rem; }

/* Ordnen: Wiederholung gross einblenden (passi 2026-10-15) */
.ord-retry-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; background: rgba(10, 9, 11, .78); backdrop-filter: blur(3px); text-align: center; pointer-events: none; animation: ordRetryIn .3s ease; }
.ord-retry-overlay p { margin: 0; font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; color: var(--text); text-shadow: 0 0 24px rgba(255, 61, 148, .5); }
.ord-retry-overlay .ord-retry-overlay-sub { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; color: var(--accent); }
@keyframes ordRetryIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.ord-retry-overlay .ord-retry-overlay-nopick { margin-top: .6rem; font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--bad-strong); text-shadow: none; }

/* Ordnen: Abstand zwischen Leben-Anzeige und Spielfeld, damit der obere Pfeil die Namen nicht ueberlappt (passi 2026-10-15) */
.ord-main { margin-top: 18px; }

/* Pay or Drink to Win: Gebot nach Ablauf der Zeit bestaetigen (passi 2026-10-15) */
.pw-confirm-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 9, 11, .75); backdrop-filter: blur(3px); }
.pw-confirm-card { max-width: 460px; width: 100%; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-l); padding: 24px; text-align: center; box-shadow: 0 0 40px rgba(255, 61, 148, .3); }
.pw-confirm-card h2 { margin: 0 0 8px; }
.pw-confirm-card p { margin: 0 0 16px; color: var(--text-2); }
.pw-confirm-actions { display: flex; flex-direction: column; gap: 8px; }
.pw-confirm-actions button { margin-top: 0; }
.pw-confirm-actions .pw-confirm-no { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }

/* Hub, Tippspiel-Tab: Tipps je Spiel (passi 2026-10-15) */
.tipp-detail-wrap { overflow-x: auto; }
.tipp-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tipp-detail-table th { text-align: left; font-weight: 600; color: var(--text-2); font-size: 11.5px; padding: .3rem .45rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tipp-detail-table td { padding: .35rem .45rem; border-bottom: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; color: var(--text-2); }
.tipp-detail-table td.is-hit { color: #3ddc84; font-weight: 700; background: rgba(61, 220, 132, .1); }
.tipp-detail-who { display: flex; align-items: center; gap: .4rem; color: var(--text) !important; font-weight: 600; }
.tipp-detail-pts { text-align: right; font-variant-numeric: tabular-nums; color: var(--text) !important; font-weight: 700; }

/* Wer von KC? Liveseite (passi 2026-10-15): Titel kleiner, Frage groesser, Spielerfelder umbrechend im Kasten */
.wvk-page .wvk-heading { font-size: clamp(16px, 2.4vw, 22px); letter-spacing: .08em; margin-bottom: .2rem; }
.wvk-page .wvk-question { font-size: clamp(26px, 4.6vw, 38px); line-height: 1.2; text-wrap: balance; }
.wvk-page .wvk-tiebreak-hint { margin: .8rem 0 1rem; font-size: 14px; }
#wvk-vote-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
#wvk-vote-grid > * { flex: 0 1 calc((100% - 2.4rem) / 5); min-width: 0; }
#wvk-vote-grid > * span { min-width: 0; overflow-wrap: anywhere; } /* lange Namen brechen um statt abgeschnitten zu werden */
.wvk-tb-intro { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; padding: 2.4rem 1rem; }
.wvk-tb-title { margin: 0; font-size: clamp(32px, 5vw, 46px); color: var(--accent); text-shadow: 0 0 24px rgba(255, 61, 148, .45); }
.wvk-tb-who { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); }
.wvk-tb-rule { margin: 0; font-size: 17px; color: var(--text-2); max-width: 32ch; }
.wvk-tb-next { margin: .6rem 0 0; font-size: 14px; color: var(--text-2); }

/* Wer von KC? Auswertung mit offenen Stimmen (passi 2026-10-15): Farbpunkte der Abstimmenden fliegen in die Balken */
.wvk-bar-track { overflow: visible; }
.wvk-bar-fill.is-bump { animation: wvk-bar-bump .28s ease-out; }
@keyframes wvk-bar-bump { 0% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
.wvk-vote-dot {
  position: absolute; top: 50%; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(10, 8, 12, .7), 0 0 0 3.5px rgba(255, 255, 255, .75);
  background-size: 14px 14px;
  transition: transform .45s cubic-bezier(.3, .7, .25, 1), opacity .2s ease;
}
.wvk-vote-dot.is-waiting { opacity: 0; }
.wvk-vote-dot.is-flying { z-index: 5; }
.wvk-reveal--pending .wvk-round-points,
.wvk-reveal--pending .wvk-standings { opacity: 0; }
.wvk-round-points, .wvk-standings { transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .wvk-vote-dot { transition: none; } }