/*
 * Pubquiz Team-Show auf der Leinwand (frontend/js/quizStage/lineup.js).
 * Maße in Container-Einheiten: Die Show passt in jede Bühnenfläche (1280×720 bis 1920×1080, bis 120 Personen, alle in ihrer Teamspalte)
 * ohne Überlauf. Raster und Darstellung (ganze Figuren oder nur Köpfe) wählt lineup.js (`lineupLayout`) und setzt --pq-slotcols/-rows.
 * Farben aus den Theme-Tokens (hell/dunkel über data-theme); Teamfarbe steht nie allein (immer Form und Name dazu).
 */

.pq-lineup {
  container-type: size;
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  row-gap: 1.2cqh;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
  color: var(--ink, #1a1d23);
  --pq-ink-on-team: #fff;
}
/* Eine Spalte: das Band eines Teams (.pq-lineup-spot) liegt über Titel und Untertitel, statt eine zweite Spalte zu öffnen. */
.pq-lineup > * {
  grid-column: 1;
}

.pq-lineup-title {
  grid-row: 1;
  margin: 0;
  min-height: 1.15em;
  text-align: center;
  font-size: clamp(22px, 7cqh, 84px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.pq-lineup-sub {
  grid-row: 2;
  margin: 0;
  text-align: center;
  font-size: clamp(14px, 4cqh, 44px);
  font-weight: 700;
  color: var(--muted, #3d4450);
  font-variant-numeric: tabular-nums;
}
.pq-lineup-sub:empty {
  display: none;
}

/* ---- Bühne: oben die Teamspalten, unten das Feld (Losverfahren); danach Spalten über die ganze Höhe ---- */
.pq-lineup-stage {
  grid-row: 3;
  container-type: size;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 44% 56%;
  transition: grid-template-rows 600ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
/* Teamspiel: ab dem Ende des Losverfahrens Spalten über die ganze Höhe (die Figuren ziehen beim Auftritt ihres Teams ein; das Maß der
 * Plätze steht damit schon vor der ersten Polonäse fest). */
.pq-lineup[data-phase="fly"]:not(.pq-lineup--solo) .pq-lineup-stage,
.pq-lineup[data-phase="team"] .pq-lineup-stage,
.pq-lineup[data-phase="final"] .pq-lineup-stage {
  grid-template-rows: 100% 0%;
}
.pq-lineup.pq-lineup--solo[data-phase] .pq-lineup-stage {
  grid-template-rows: 0% 100%;
}

.pq-lineup-cols {
  --rowh: 44cqh;
  display: grid;
  grid-template-columns: repeat(var(--pq-teams, 1), minmax(0, 1fr));
  gap: clamp(6px, 1.2cqw, 24px);
  min-height: 0;
  padding: 0.6cqh 0;
}
.pq-lineup[data-phase="fly"] .pq-lineup-cols,
.pq-lineup[data-phase="team"] .pq-lineup-cols,
.pq-lineup[data-phase="final"] .pq-lineup-cols {
  --rowh: 100cqh;
}

.pq-lineup-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqh;
  min-width: 0;
  min-height: 0;
  padding: 1cqh 0.6cqw;
  border-radius: clamp(8px, 1.4cqh, 18px);
  border-top: clamp(4px, 0.9cqh, 10px) solid var(--pq-team, currentColor);
  background: color-mix(in srgb, var(--pq-team, currentColor) 9%, var(--bg-elev, #fff));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink, #000) 8%, transparent);
  overflow: hidden;
}

.pq-lineup-colhead {
  display: flex;
  align-items: center;
  gap: 0.5em;
  max-width: 100%;
  font-size: clamp(13px, 3.6cqh, 40px);
  font-weight: 800;
  line-height: 1.15;
}
.pq-lineup-colhead .pq-team-shape {
  color: var(--pq-team, currentColor);
  font-size: 1.1em;
}
.pq-lineup-colname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pq-lineup-colcount {
  flex: none;
  min-width: 1.6em;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  background: var(--pq-team, currentColor);
  color: var(--pq-ink-on-team);
  font-size: 0.8em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Helle Teamfarben: dunkle Schrift (wie .pq-team-tile). */
.pq-lineup .pq-team--green,
.pq-lineup .pq-team--yellow,
.pq-lineup .pq-team--orange {
  --pq-ink-on-team: #1a1a1a;
}

.pq-lineup-slots {
  /* Raster aus lineup.js (nach dem vollsten Team, gleich für alle Spalten); Formel wie `lineupLayout`. Im Losverfahren (Spalten im oberen
   * Streifen) warten die Figuren unsichtbar, die Spalte schneidet ab. */
  --slotcols: var(--pq-slotcols, 2);
  --slotrows: var(--pq-slotrows, 6);
  --size: min(calc((100cqw / var(--pq-teams, 1) - 3cqw) / (var(--slotcols) * 0.93 + 0.1)), calc((var(--rowh) - 13cqh) / (var(--slotrows) * 1.06)), calc((var(--rowh) - 13cqh) * 0.45));
  display: grid;
  grid-template-columns: repeat(var(--slotcols), calc(var(--size) * 0.85));
  grid-auto-rows: var(--size);
  column-gap: calc(var(--size) * 0.08);
  row-gap: calc(var(--size) * 0.06);
  /* Die ganze Spalte nutzen: übriger Platz gleichmäßig zwischen und um die Reihen und Spalten. */
  flex: 1 1 auto;
  justify-content: space-evenly;
  align-content: space-evenly;
  min-height: 0;
  width: 100%;
}
.pq-lineup--heads .pq-lineup-slots {
  /* Nur Köpfe: Das Raster füllt die Spalte; Kopf höchstens 78 % der Zellbreite und 70 % der Zellhöhe, darunter das Namensschild. */
  --cellw: calc((100cqw / var(--pq-teams, 1) - 3cqw) / var(--slotcols));
  --cellh: calc((var(--rowh) - 13cqh) / var(--slotrows));
  --size: min(calc(var(--cellw) * 0.78), calc(var(--cellh) * 0.7), 24cqh);
  grid-template-columns: repeat(var(--slotcols), var(--cellw));
  grid-auto-rows: var(--cellh);
  gap: 0;
}
.pq-lineup-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--size) * 0.04);
  min-width: 0;
}
.pq-lineup-head .pq-lineup-face {
  transition: none;
}
/* Namensschild wie bei den Figuren: dunkle Schrift auf hellem Karton (figures.js SIGN). */
.pq-lineup-tag {
  box-sizing: border-box;
  max-width: 96%;
  padding: 0.05em 0.4em;
  border-radius: 0.3em;
  background: #fff8e6;
  color: #16161d;
  box-shadow: 0 0 0 max(1px, calc(var(--size) * 0.02)) color-mix(in srgb, var(--pq-team, #16161d) 70%, #16161d);
  font-size: max(11px, min(calc(var(--size) * 0.25), calc(var(--cellw) * 0.17)));
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Figuren in der Teamspalte (quizStage/figures.js): eine Figur je Platz, ohne Podest ---- */
.pq-lineup-slots > .pq-figure {
  --pq-k: calc(var(--size) / 24);
  width: calc(var(--size) * 0.85);
  height: var(--size);
  justify-content: flex-start;
}
.pq-lineup-slots .pq-figure__pedestal {
  display: none;
}
/* Wartet auf den Auftritt des Teams (Platz bleibt frei, damit sich die Spalte nicht verschiebt). */
.pq-lineup-fig.is-waiting {
  visibility: hidden;
}
/* Laufende Figuren (Polonäse) liegen über den stehenden: allgemeine Regel .pq-figure[data-emote] in components-pubquiz-figures.css. */

/* ---- Feld ---- */
.pq-lineup-field {
  --fieldh: 56cqh;
  --size: min(calc(min(96cqw / var(--cols, 1), var(--fieldh) / var(--rows, 1)) * 0.82), 16cqh);
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--size));
  grid-auto-rows: var(--size);
  gap: calc(var(--size) * 0.12);
  place-content: center;
  min-height: 0;
  overflow: visible;
  border-radius: 50% / 40%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ink, #000) 7%, transparent), transparent 70%);
}
.pq-lineup[data-phase="team"] .pq-lineup-field,
.pq-lineup[data-phase="final"] .pq-lineup-field {
  visibility: hidden;
}
/* Teamspiel, nach dem Losverfahren: Die Köpfe verlassen das Feld über dem unteren Teil der Spalten (eigene Ebene, die Spalten haben schon
 * ihre volle Höhe). */
.pq-lineup[data-phase="fly"]:not(.pq-lineup--solo) .pq-lineup-field {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  z-index: 2;
}
.pq-lineup--solo .pq-lineup-field {
  --fieldh: 100cqh;
  --size: calc(min(96cqw / var(--cols, 1), var(--fieldh) / var(--rows, 1)) * 0.82);
  visibility: visible !important;
  background: none;
}
.pq-lineup--solo .pq-lineup-field:has(.pq-lineup-name) {
  --size: calc(min(96cqw / var(--cols, 1), var(--fieldh) / var(--rows, 1)) * 0.66);
  grid-auto-rows: calc(var(--size) * 1.32);
}
.pq-lineup-fieldmore {
  grid-row: 4;
  margin: 0;
  text-align: center;
}

.pq-lineup-cell {
  display: block;
  width: var(--size);
  height: var(--size);
}

/* ---- Avatar ---- */
.pq-lineup-ava {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  width: var(--size, 64px);
  min-width: 0;
  will-change: transform;
}
.pq-lineup-face {
  display: block;
  width: var(--size, 64px);
  height: var(--size, 64px);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-soft, #e8ecf0);
  box-shadow: 0 0 0 max(2px, calc(var(--size, 64px) * 0.05)) var(--pq-team, var(--line, #9aa3b0));
  transition: width 500ms ease, height 500ms ease;
}
.pq-lineup-face img,
.pq-lineup-comic,
.pq-lineup-comic svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pq-lineup-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(11px, calc(var(--size, 64px) * 0.2), 30px);
  font-weight: 700;
  line-height: 1.2;
}
.pq-lineup-ava.is-waiting {
  opacity: 0;
}
/* Teamspiel: der Kopf verlässt nach dem Losverfahren das Feld. */
.pq-lineup-ava.is-gone {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 320ms ease-in, transform 320ms ease-in;
}

/* Losverfahren: Die Avatare wirbeln durcheinander. */
.pq-lineup.is-shuffling .pq-lineup-field .pq-lineup-ava {
  animation: pq-lineup-jiggle 460ms ease-in-out var(--jd, 0ms) infinite alternate;
}
@keyframes pq-lineup-jiggle {
  from {
    transform: translate(calc(var(--jx, 0px) * -0.5), calc(var(--jy, 0px) * -0.5)) rotate(-7deg);
  }
  to {
    transform: translate(var(--jx, 0px), var(--jy, 0px)) rotate(7deg) scale(1.06);
  }
}

/* ---- Vorstellung je Team: Band an der Stelle des Titels, die Spalten (Polonäse) bleiben sichtbar ---- */
.pq-lineup-spot {
  grid-row: 1 / span 2;
  grid-column: 1;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 0;
}
.pq-lineup-spot[hidden] {
  display: none;
}
.pq-lineup-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6cqh 1.6cqw;
  max-width: 96cqw;
  text-align: center;
}
.pq-lineup-kicker {
  font-size: clamp(12px, 3cqh, 32px);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted, #3d4450);
}
.pq-lineup-spotname {
  margin: 0;
  max-width: 70cqw;
  padding: 0.04em 0.5em 0.08em;
  border-radius: 0.35em;
  background: var(--pq-team, currentColor);
  color: var(--pq-ink-on-team);
  font-size: clamp(22px, 6.4cqh, 80px);
  font-weight: 900;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0.8cqh 2cqh color-mix(in srgb, var(--pq-team, #000) 40%, transparent);
}
.pq-lineup-spotcount {
  margin: 0;
  font-size: clamp(13px, 3.4cqh, 36px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pq-lineup-spot .pq-lineup-more {
  margin: 0;
}

.pq-lineup-spot.is-live {
  animation: pq-lineup-flash 700ms ease-out both;
}
.pq-lineup-spot.is-live .pq-lineup-spotshape {
  animation: pq-lineup-spin 700ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.pq-lineup-spot.is-live .pq-lineup-spotname {
  animation: pq-lineup-slam 620ms cubic-bezier(0.2, 1.5, 0.4, 1) 80ms both;
}
@keyframes pq-lineup-flash {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pq-lineup-spin {
  from {
    transform: scale(0.2) rotate(-200deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes pq-lineup-slam {
  from {
    transform: scale(2.4);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---- Konfetti in Teamfarbe (DOM, kein Canvas) ---- */
.pq-lineup-confetti {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.pq-confetti {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: 1cqw;
  height: 1.5cqw;
  border-radius: 2px;
  background: var(--c, #888);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #000) 12%, transparent);
  animation: pq-lineup-fall var(--fall, 1800ms) cubic-bezier(0.25, 0.6, 0.45, 1) var(--delay, 0ms) both;
}
.pq-confetti--strip {
  width: 0.45cqw;
  height: 2.4cqw;
}
.pq-confetti--glyph {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--c, #888);
  font-size: clamp(14px, 4cqh, 44px);
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink, #000) 30%, transparent);
}
@keyframes pq-lineup-fall {
  0% {
    transform: translate(0, -8cqh) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift, 0px), 108cqh) rotate(var(--spin, 360deg));
    opacity: 0.85;
  }
}

/* ---- Schlussbild ---- */
.pq-lineup[data-phase="final"] .pq-lineup-title {
  font-size: clamp(26px, 9cqh, 110px);
}
.pq-lineup.is-ready-live .pq-lineup-title {
  animation: pq-lineup-ready 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes pq-lineup-ready {
  from {
    transform: translateY(-3cqh) scale(0.7);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.pq-lineup-more {
  font-size: clamp(12px, 3cqh, 32px);
  font-weight: 700;
  color: var(--muted, #3d4450);
}
.pq-lineup-more[hidden] {
  display: none;
}

/* ---- Handy: „Du spielst im Team …“ nach dem Anmeldeschluss (kurze Animation, keine Musik) ---- */
.pq-lineup-phone {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 24px auto 0;
  padding: 24px 18px;
  max-width: 28rem;
  text-align: center;
  border-radius: 20px;
  background: var(--bg-elev, #fff);
  border: 3px solid var(--pq-team, var(--line, #d9dde3));
}
.pq-lineup-phone-title {
  margin: 0;
  font-size: clamp(22px, 6.5vw, 32px);
  font-weight: 900;
  line-height: 1.2;
}
.pq-lineup-phone-shape {
  display: inline-block;
  color: var(--pq-team, currentColor);
}
.pq-lineup-phone-ava {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--pq-team, var(--line, #d9dde3));
}
.pq-lineup-phone-ava img,
.pq-lineup-phone-ava svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pq-lineup-phone.is-live {
  animation: pq-phone-pop 520ms cubic-bezier(0.3, 0.7, 0.3, 1.25) both;
}
.pq-lineup-phone.is-live .pq-lineup-phone-shape {
  animation: pq-phone-spin 900ms 200ms cubic-bezier(0.3, 0.7, 0.3, 1.2) both;
}
@keyframes pq-phone-pop {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pq-phone-spin {
  from {
    transform: rotate(-200deg) scale(0.2);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pq-lineup *,
  .pq-lineup *::before,
  .pq-lineup *::after,
  .pq-lineup,
  .pq-lineup::before,
  .pq-lineup::after,
  .pq-lineup-phone,
  .pq-lineup-phone * {
    animation: none !important;
    transition: none !important;
  }
  .pq-lineup-confetti {
    display: none;
  }
}