/* ===== Pubquiz Siegerfolie: Figuren =====
   Haltungen der Papierschnitt-Figur (figures.js, data-pose): trophy (Pokal über dem Kopf, wippt und blitzt, endlos, versetzt über
   --pq-delay), clap (nur die Lage des Schilds); jump und idle ohne eigene Regeln. Springen, Sieger-Bewegungen und Klatschen spielt
   der Abspieler (frontend/js/avatar/emotePlayer.js); reduzierte Bewegung: Standbild in der Haltung.
   Spec: docs/superpowers/specs/2026-10-14-pubquiz-siegerfolie-design.md, Abschnitt 4. Im Körper-SVG gilt: px = Nutzereinheiten. */
.pq-figure[data-pose="trophy"] .pq-figure__person {
  /* Platz für Pokal und Hand über dem Helmrand (Pokal rechts neben dem Helm, Oberkante samt Wippen und Funkeln ca. 1,5 × --pq-k darüber). */
  --pq-head-top: calc(2 * var(--pq-k));
  padding-top: var(--pq-head-top);
}
.pq-figure[data-pose="trophy"] .pq-figure__sign {
  bottom: calc(0.8 * var(--pq-k));
}
.pq-figure[data-pose="trophy"] .pq-figure__arm {
  animation: none;
  transform: none;
}
.pq-figure[data-pose="trophy"] .pq-figure__lift {
  animation: pq-sf-lift 1.1s ease-in-out var(--pq-delay, 0ms) infinite;
}
.pq-figure[data-pose="trophy"] .pq-trophy__cup {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pq-sf-cup 2.2s ease-in-out var(--pq-delay, 0ms) infinite;
}
.pq-figure[data-pose="trophy"] .pq-trophy__glint {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pq-sf-glint 2.2s ease-out var(--pq-delay, 0ms) infinite;
}
@keyframes pq-sf-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes pq-sf-cup {
  0%, 100% { transform: rotate(-4deg); filter: none; }
  50% { transform: rotate(4deg); filter: none; }
  70% { transform: rotate(1deg); filter: brightness(1.35); }
  80% { filter: none; }
}
@keyframes pq-sf-glint {
  0%, 60% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  70% { opacity: 1; transform: scale(1.3) rotate(25deg); }
  85%, 100% { opacity: 0; transform: scale(0.5) rotate(45deg); }
}

/* Genau eine Champagnerflasche (E5): Die Flaschen-Figur (data-prop, celebration.js) hält sie auch zwischen zwei `champagne`-Durchläufen
 * in der rechten Hand; die übrigen Handformen dieser Hand bleiben dann verborgen. */
.pq-figure[data-prop="bottle"] [data-joint="hand-r"] > .pq-hand {
  display: none !important;
}
.pq-figure[data-prop="bottle"] [data-joint="hand-r"] > .pq-hand[data-hand="bottle"] {
  display: inline !important;
}
/* Weitergabe zur linken Nachbarin: Körper gespiegelt, `hand_over` reicht dann nach links (trophyRelay.js). */
.pq-figure[data-relay="give-left"] .pq-figure__body,
.pq-figure[data-relay="give-left"] .pq-figure__armlayer {
  transform: scaleX(-1);
}
/* Requisit auf dem Weg von Hand zu Hand: eigene Ebene über den Einstellungen, bewegt nur per transform. */
.pq-relay-prop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}
.pq-relay-prop .pq-prop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pq-figure[data-pose="clap"] .pq-figure__sign {
  /* Schild unter den klatschenden Händen verankert (Hände vor dem Bauch bei ca. 104 Einheiten = 12,5k, Saum bei 15,4k), es wächst nach
     unten über die Beine: Die Hände bleiben auch bei zwei Zeilen sichtbar. */
  top: calc(14.6 * var(--pq-k));
  bottom: auto;
}
/* Punkte auf dem Schild (Siegerfolie: Einzelspiel und Großaufnahme). */
.pq-figure__score {
  display: block;
  font-size: 0.8em;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pq-figure[data-pose] .pq-figure__person,
  .pq-figure[data-pose] .pq-figure__arm,
  .pq-figure[data-pose] .pq-figure__lift,
  .pq-figure[data-pose] .pq-trophy__cup,
  .pq-figure[data-pose] .pq-trophy__glint {
    animation: none;
  }
}
/* Bewegungen der Figuren (frontend/js/avatar/emotePlayer.js). Grundhaltung: der Oberkörper atmet. Während einer Bewegung
 * (`data-emote`) liegen die Arme als eigene Ebene vor dem Kopf, damit erhobene Arme und Hände nicht hinter dem Kopf verschwinden
 * (der übrige Körper bleibt unter dem Kopf, der Kragen unter dem Kinn); das Schild bleibt darüber lesbar. Effekte (Glitzer, Tränen, Schweiß, Funken) nur mit transform/opacity, höchstens 3 Wechsel je Sekunde. */
.pq-figure__body [data-joint="torso"],
.pq-figure__armlayer [data-armlayer] {
  animation: pq-breathe 3.6s ease-in-out infinite;
}
@keyframes pq-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.012); }
}
/* Schalter „Avatare und Animationen“ aus (Spec 6.3, figures.js setFiguresStill): Grundhaltung ohne Atmen und ohne wippenden Pokal. */
.pq-figures-still .pq-figure__body [data-joint="torso"],
.pq-figures-still .pq-figure__armlayer [data-armlayer],
.pq-figures-still .pq-figure[data-pose] .pq-figure__person,
.pq-figures-still .pq-figure[data-pose] .pq-figure__arm,
.pq-figures-still .pq-figure[data-pose] .pq-figure__lift,
.pq-figures-still .pq-figure[data-pose] .pq-trophy__cup,
.pq-figures-still .pq-figure[data-pose] .pq-trophy__glint {
  animation: none;
}
/* Arme vor dem Kopf: eigene Ebene (emoteLayers.js) deckungsgleich über dem Körper; der Körper selbst bleibt unter dem Kopf. */
.pq-figure__armlayer {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: calc(14.4 * var(--pq-k));
  height: auto;
  margin-inline: auto;
  overflow: visible;
  /* Die leere Fläche der Ebene fängt nichts ab (Kopf und Körper darunter bleiben treffbar); nur die gemalten Arme zählen. */
  pointer-events: none;
}
.pq-figure__armlayer * {
  pointer-events: auto;
}
.pq-figure[data-emote] .pq-figure__sign {
  z-index: 4;
}
/* Laufende Figur (Polonäse, Laola, jede Bewegung; Podest, Teamspalten, Siegerfolie) liegt als Ganzes über den stehenden: Person, Schild (z 2)
 * und Kappe (z 2) der Nachbarn liegen sonst auf gleicher Ebene und die später im DOM stehenden zeichnen über sie. Eigene Ebene je Figur;
 * die Symbolblase (z 5) bleibt darin über allem anderen der Figur, Requisiten der Weitergabe (.pq-relay-prop, z 6, an der Bühne) darüber.
 * Der Pokalträger der Siegerfolie liegt bewusst höher (.pq-cel-row > .pq-figure[data-pose="trophy"], z 4). */
.pq-figure[data-emote] {
  position: relative;
  z-index: 3;
}
/* Effektkasten (emotePlayer.js FX_SVG, Schaumstrahl): 23 × 23 k, Oberkante 4 k über dem Helm (auch mit Platz darüber, --pq-head-top). */
.pq-figure__fx {
  position: absolute;
  z-index: 5;
  top: calc(var(--pq-head-top, 0px) - 4 * var(--pq-k));
  left: 50%;
  width: calc(23 * var(--pq-k));
  height: calc(23 * var(--pq-k));
  transform: translateX(-50%);
  pointer-events: none;
}
.pq-figure__fx svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pq-fx-star,
.pq-fx-spark {
  transform-box: fill-box;
  transform-origin: center;
}
.pq-fx-star { animation: pq-fx-twinkle 1s ease-in-out infinite both; }
.pq-fx-tear { animation: pq-fx-fall 1s ease-in infinite both; }
.pq-fx-sweat { animation: pq-fx-fall 1.2s ease-in infinite both; }
.pq-fx-spark { animation: pq-fx-burst 1s ease-out infinite both; }
.pq-fx-seg {
  animation: pq-fx-seg 0.5s ease-out 1 both;
}
.pq-fx-puff {
  transform-box: fill-box;
  transform-origin: center;
  animation: pq-fx-puff 0.45s ease-in-out infinite alternate both;
}
@keyframes pq-fx-seg {
  0% { opacity: 0; transform: rotate(var(--a)); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--w)); }
}
@keyframes pq-fx-puff {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.3); }
}
/* Symbolblase bei reduzierter Bewegung: neben dem Kopf, für die Dauer der Bewegung. */
.pq-figure__bubble {
  position: absolute;
  z-index: 5;
  top: calc(var(--pq-head-top, 0px) - 5 * var(--pq-k));
  left: calc(50% + 4 * var(--pq-k));
  padding: 0.12em 0.3em;
  font-size: calc(4.4 * var(--pq-k));
  line-height: 1.1;
  background: #ffffff;
  border: calc(0.4 * var(--pq-k)) solid var(--pq-ink, #16161d);
  border-radius: 1em 1em 1em 0.2em;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pq-figure__body [data-joint="torso"],
  .pq-figure__armlayer [data-armlayer],
  .pq-fx-star,
  .pq-fx-tear,
  .pq-fx-sweat,
  .pq-fx-spark,
  .pq-fx-seg,
  .pq-fx-puff {
    animation: none;
  }
}

/* Eigene Figur im Handy-Ergebnis: ohne Schild und Podest, höchstens 140 px hoch, mittig über dem Titel (Spec 6.2). */
.pq-figure--phone {
  --pq-k: 5.2px;
  position: relative;
  width: auto;
  max-height: 140px;
  margin: 0 auto 6px;
}
.pq-figure--phone .pq-figure__person {
  width: calc(23 * var(--pq-k));
}
@media (prefers-reduced-motion: reduce) {
  .pq-figure--phone .pq-figure__bubble {
    top: calc(var(--pq-head-top, 0px) - 2 * var(--pq-k));
  }
}
/* „Hallo, {Name}!“ (B6, avatar/helloBubble.js): Text statt Symbol, einzeilig knapp über dem Kopf, lange Namen mit Auslassung. */
.pq-figure__bubble--hello,
.pq-figure--phone .pq-figure__bubble--hello {
  top: auto;
  bottom: calc(100% + 2px);
  left: 0;
  max-width: min(62vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #16161d;
}
/* Warteraum (nur Pubquiz mit Animationen, quizElimination.js): Platz über der Figur für die Blase, damit nichts beim Hallo springt oder abgeschnitten wird. */
.qe-avatar-big--hello {
  padding-top: 28px;
}

/* Figur und Emote-Leiste (Handy): nebeneinander statt untereinander, damit der Ergebnisbildschirm nicht um die Leistenhöhe wächst
 * (die Rangliste muss auf einem kleinen Handy ohne Scrollen sichtbar bleiben). Auf ganz schmalen Schirmen bricht die Leiste unter die Figur. */
.pq-figure-emote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 0 auto 2px;
}
.pq-figure-emote > .pq-figure--phone {
  /* Breite der Figur: Platz der Karte (Sichtbreite - 280 px) minus Leiste (185 px) und Abstand; ab 360 px bleiben beide nebeneinander. */
  --pq-k: clamp(3.4px, calc((100vw - 280px) / 23), 3.9px);
  margin: 0;
}
.pq-figure-emote > .pq-emote-bar {
  grid-template-columns: repeat(4, 44px);
  gap: 3px;
  margin: 0;
}
/* Teamspiel: Figur links neben den 8 Knöpfen, Laola und Polonäse in einer eigenen vollen Zeile darunter (Leiste löst sich als Raster auf). */
.pq-figure-emote--team {
  display: grid;
  grid-template-columns: auto repeat(4, 44px);
  gap: 3px;
  justify-content: center;
}
.pq-figure-emote--team > .pq-figure--phone {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
}
.pq-figure-emote--team > .pq-emote-bar {
  display: contents;
}
.pq-figure-emote--team .pq-emote-bar__team[data-emote="laola"] {
  grid-column: 1 / span 2;
}
.pq-figure-emote--team .pq-emote-bar__team[data-emote="polonaise"] {
  grid-column: 3 / span 3;
}

/* Emote-Leiste unter der eigenen Figur (Handy, Spec 6.2/8): 4 x 2 Knöpfe, je mindestens 44 x 44 px; gesperrt abgeblendet. */
.pq-emote-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 8px;
  max-width: 320px;
  margin: 8px auto 12px;
  transition: opacity 0.15s;
}
.pq-emote-bar__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 12px;
  background: var(--surface, rgba(127, 127, 127, 0.12));
  color: inherit;
  cursor: pointer;
}
.pq-emote-bar__btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.pq-emote-bar.is-locked .pq-emote-bar__btn:not(.pq-emote-bar__team) {
  opacity: 0.45;
}
.pq-emote-bar__btn[aria-disabled="true"] {
  cursor: default;
}
/* Teamknöpfe (Laola, Polonäse): je zwei Spalten breit, Beschriftung und darunter der Stand des Quorums. */
.pq-emote-bar__team {
  grid-column: span 2;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 1.05rem;
  font-weight: 600;
}
.pq-emote-bar__sub {
  min-height: 1.1em;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}
/* Ausgegraut (zu kleines Team, Pause oder Sperre der Leiste): Der Knopf bleibt antippbar, sieht aber „gerade nicht möglich“ aus –
 * gestrichelter Rand ohne Fläche und leicht abgeblendete Beschriftung. Die Beschriftung ist Text und bleibt dabei bei mindestens
 * 4,5:1 (Deckkraft 0,7: hell 6,0:1, dunkel 7,2:1; mit 0,55 waren es hell nur 3,6:1); der Hinweis darunter bleibt in voller Schrift. */
.pq-emote-bar__team.is-disabled,
.pq-emote-bar.is-locked .pq-emote-bar__team {
  border-style: dashed;
  border-color: var(--line, #6b7280);
  background: transparent;
}
.pq-emote-bar__team.is-disabled .pq-emote-bar__label,
.pq-emote-bar.is-locked .pq-emote-bar__label {
  opacity: 0.7;
}
/* Statusbereich für Vorlesehilfen: unsichtbar, aber vorhanden. */
.pq-emote-bar__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Endstand-Tafel: ohne Veränderung der letzten Runde (kein „+50“, kein Pfeil). */
.pq-cel-board .pq-delta {
  display: none;
}

/* Musikrunde nach der Auflösung: Die Antwort steht schon in der Songzeile („Interpret – Titel (Jahr)“), „Richtig: 2013“ entfällt.
 * Nutzermeldung 14.10. (iMac 27, Vollbild): Mit Sprechblasen und Figuren blieb der Bühne nur ihre Mindesthöhe, Songzeile und Link
 * wurden abgeschnitten. Die Bühne hat jetzt mindestens die Höhe von Songzeile, Lösungssatz, Trefferzeile und Link. */
.pq-stage--ended:has(> .music-stage) > .pq-correct {
  display: none;
}
.pq-stage--ended:has(> .quiz-elimination-header) > .music-stage[data-mode="reveal"] {
  min-height: calc(24 * var(--pq-k));
}
/* Mit Trefferzeile („13 von 16 richtig“, Freitext) eine Zeile mehr. */
.pq-stage--ended:has(> .quiz-elimination-header) > .music-stage[data-mode="reveal"]:has(.music-reveal__score:not([hidden])) {
  min-height: calc(28 * var(--pq-k));
}