/* Pubquiz Teamcaptain-Wahl auf Leinwand und Moderation (frontend/js/quizStage/captainStage.js, captainInfo.js).
 * Fortschritt (Schritte apply/vote): Karte je besetztem Team mit Zähler; Infoscreen: alle Teams nebeneinander, Mitglieder als kleine Figuren,
 * darunter groß der Captain mit Krone. Maße in --cs (= --pq-k der Leinwand, 1 % der Höhe einer 16:9-Fläche; in der Moderation 6 px) und in
 * Container-Einheiten, damit 6 Teams × Figuren in 1280×720 bis 1920×1080 ohne Überlauf passen. Die Teamfarbe steht nie allein (Teamname dabei).
 * Animiert wird nur mit transform und opacity (Web-Animationen in captainStage.js/captainInfo.js; hier nur der Endzustand und die Ruhestellung). */

/* Leinwand: Fläche ausnutzen (wie die Auswahl-Karten), nicht der Standardrand der Bühne. */
.quiz-elimination.pq-stage:has(> [data-pq-captain]) {
  justify-content: flex-start;
  align-items: stretch;
  gap: calc(1.6 * var(--pq-k));
  padding: calc(2 * var(--pq-k)) 3vw calc(var(--stage-bar-clear, 0px) + 2 * var(--pq-k));
  box-sizing: border-box;
}
.pq-stage > [data-pq-captain] {
  flex: 1 1 auto;
  min-height: 0;
}

/* Moderation: keine Leinwand-Einheit, feste kleine Einheit (Zeitbalken, Karten). */
.quiz-elimination:not(.pq-stage) [data-pq-captain] {
  --pq-k: 6px;
}
[data-pq-captain] {
  --cs: var(--pq-k, 6px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---------------------------- Fortschritt ---------------------------- */
.pq-capprog {
  display: flex;
  flex-direction: column;
  gap: calc(2.4 * var(--cs));
  text-align: center;
}
.pq-capprog__title {
  margin: 0;
  font-size: calc(6 * var(--cs));
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pq-capprog__time {
  width: 100%;
}
.pq-capprog__time[hidden] {
  display: none;
}
.pq-capprog__cards {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(26 * var(--cs)), 1fr));
  grid-auto-rows: minmax(0, calc(40 * var(--cs)));
  align-content: center;
  gap: calc(1.6 * var(--cs));
}
.pq-capprog__card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(1.2 * var(--cs));
  min-width: 0;
  padding: calc(1.6 * var(--cs)) calc(1.4 * var(--cs));
  border: calc(0.4 * var(--cs)) solid color-mix(in srgb, currentColor 25%, transparent);
  border-top: calc(1.6 * var(--cs)) solid var(--pq-team, currentColor);
  border-radius: calc(1.4 * var(--cs));
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-sizing: border-box;
}
.pq-capprog__team {
  margin: 0;
  max-width: 100%;
  font-size: calc(3.6 * var(--cs));
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.pq-capprog__count {
  margin: 0;
  font-size: calc(3.4 * var(--cs));
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
/* Die Zahl steht groß über dem Wort („2“ / „Stimmen“). */
.pq-capprog__num {
  display: block;
  font-size: calc(10 * var(--cs));
  font-weight: 900;
  line-height: 1;
}
.pq-capprog__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(0.7 * var(--cs));
  min-height: calc(2 * var(--cs));
}
.pq-capprog__dot {
  width: calc(1.8 * var(--cs));
  height: calc(1.8 * var(--cs));
  border: calc(0.3 * var(--cs)) solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0.45;
}
.pq-capprog__dot.is-on {
  background: var(--pq-team, currentColor);
  opacity: 1;
}

/* ---------------------------- Infoscreen ---------------------------- */
.pq-capinfo-host {
  display: flex;
}
.pq-capinfo {
  container-type: size;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(1.6 * var(--cs));
  overflow: hidden;
}
/* Moderation (keine feste Höhe): eigene Höhe für die Container-Maße. */
.quiz-elimination:not(.pq-stage) .pq-capinfo {
  height: min(70vh, 42rem);
}
.pq-capinfo__title {
  margin: 0;
  font-size: calc(5.6 * var(--cs));
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.pq-capinfo__teams {
  display: grid;
  grid-template-columns: repeat(var(--pq-n, 1), minmax(0, 1fr));
  gap: calc(1.2 * var(--cs));
  min-height: 0;
}
.pq-capinfo__team {
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: stretch;
  gap: calc(1.2 * var(--cs));
  padding: 0 calc(0.8 * var(--cs));
  border-radius: calc(1.2 * var(--cs));
  background: color-mix(in srgb, var(--pq-team, currentColor) 9%, transparent);
}
.pq-capinfo__tag {
  margin: 0;
  padding: calc(0.8 * var(--cs)) calc(0.4 * var(--cs)) calc(0.6 * var(--cs));
  border-bottom: calc(1 * var(--cs)) solid var(--pq-team, currentColor);
  font-size: calc(3.6 * var(--cs));
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Größen aus der Spalte (Container): Captain groß, Mitglieder höchstens 58 % davon. */
.pq-capinfo__members,
.pq-capinfo__chief {
  --chief: min(86cqw, 36cqh);
  --small: min(calc((100cqw - 2 * var(--cs)) / 3.2), calc(30cqh / var(--pq-rows, 1) / 1.08), calc(var(--chief) * 0.5));
}
.pq-capinfo__members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: calc(var(--small) * 0.08) calc(var(--small) * 0.1);
  min-height: calc(var(--small) * var(--pq-rows, 1) * 1.16);
}
.pq-capinfo__members > .pq-figure {
  --pq-k: calc(var(--small) / 24);
  width: var(--small);
  height: var(--small);
  justify-content: flex-start;
}
.pq-capinfo__more {
  align-self: center;
  font-size: calc(2.6 * var(--cs));
  font-weight: 800;
}
.pq-capinfo__chief {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(0.6 * var(--cs));
  padding-top: calc(var(--chief) / 24 * 5);
  padding-bottom: calc(1 * var(--cs));
  min-width: 0;
}
.pq-capinfo__chief > .pq-figure {
  --pq-k: calc(var(--chief) / 24);
  width: var(--chief);
  height: var(--chief);
  justify-content: flex-start;
}
/* Name und Schild: der Spitzname steht als Text darunter (lesbar aus der Ferne), nicht auf dem Schild; kein Podest. */
.pq-capinfo .pq-figure__sign,
.pq-capinfo .pq-figure__pedestal {
  display: none;
}
.pq-capinfo__name {
  display: grid;
  align-content: center;
  margin: 0;
  max-width: 100%;
  min-height: 2.2em;
  font-size: calc(4 * var(--cs));
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.pq-capinfo__name > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pq-capinfo__how {
  margin: 0;
  max-width: 100%;
  min-height: 2.3em;
  font-size: max(24px, calc(3 * var(--cs)));
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--muted, #3d4450);
  text-wrap: balance;
}

/* Die Krone des Captains kommt hier über die Einblendung des Infoscreens (Web-Animation), nicht über die Standard-Einblendung. */
.pq-capinfo .pq-figure__person > .pq-crown {
  animation: none;
}
/* Endzustand ohne Bewegung: schon gezeigt (Neuladen), Escape, reduzierte Bewegung, Schalter „Avatare und Animationen“ aus. */
.pq-capinfo.is-still .pq-figure__body [data-joint="torso"],
.pq-capinfo.is-still .pq-figure__armlayer [data-armlayer] {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .pq-capinfo .pq-figure__body [data-joint="torso"],
  .pq-capinfo .pq-figure__armlayer [data-armlayer] {
    animation: none;
  }
}