/*
 * Pubquiz Punktevergabe auf der Leinwand: Schritt S3 mit Chips „+Grund“ und „⏱ +Bonus“ (beim Buzzer „Anteil +n“) an der Rangliste bzw. den Teambalken.
 * Spec: docs/superpowers/specs/2026-10-17-pubquiz-abend-e1-design.md, Abschnitt 3 C und D23; Ablauf und Zeiten in frontend/js/quizStage/pointsAward.js.
 * Animiert wird nur `transform` und `opacity` (Web-Animationen, eine je Chip); reduzierte Bewegung und der Schalter „Avatare und Animationen“ aus zeigen
 * den Endzustand ohne Bewegung (dann entstehen keine Chips mehr im Bild). Maße in --su (wächst mit der Leinwand).
 */

/* Punktzahl mit festem Anker für die Chips: Breite der längeren Zahl (Inline-Stil min-width in ch), Ziffern gleich breit, rechtsbündig. */
.pq-num {
  position: relative;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Die Rangliste (Einzelspiel) bleibt bis zur Punktevergabe verborgen: sie verrät vorher weder Punkte noch Plätze. Der Platz bleibt reserviert. */
.pq-ranking.is-award-wait {
  visibility: hidden;
  opacity: 0;
}

/* Platz für den Zuwachs nach der Punktevergabe: Die Zeile springt beim Einsetzen des Textes nicht (Breite in ch am Element). */
.pq-bar-delta {
  display: inline-block;
  text-align: right;
}

/* Chips rechts neben der Zahl (sie fliegen von rechts an die Zahl heran und gleiten in sie hinein), nebeneinander, über dem reservierten Platz des Zuwachses.
 * Sie liegen über der Zeile und verändern das Layout nicht. */
.pq-chips {
  --pq-chip-accent: #4a5263;
  --pq-chip-accent-ink: #ffffff;
  --pq-chip-line: #16161d;
  position: absolute;
  left: 100%;
  top: 50%;
  translate: 0 -50%;
  margin-left: 0.45em;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Akzentfarbe des Bühnen-Themes: eine Quelle, THEME_ACCENT in phoneAccent.js (pointsAward.js setzt --pq-chip-accent und --pq-chip-accent-ink an den Chips);
 * ohne Theme gelten die neutralen Werte oben (#4a5263 mit weißer Schrift, Kontrast über 7:1). */

/* Comic-Stil der Kulissen: kräftige Pille mit dunkler Kontur (2 px) und einem versetzten Schatten. Der Grundchip ist mit der Teamfarbe (Teams) bzw. der Akzentfarbe
 * des Themes getönt (26 % auf Weiß, dunkle Schrift, Kontrast weit über 4,5:1); Bonus und Anteil tragen die volle Akzentfarbe mit weißer Schrift.
 * Vor dem Start unsichtbar (die Web-Animation blendet ein). */
.pq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  box-sizing: border-box;
  padding: 0.3em 0.7em 0.32em;
  border: max(2px, calc(2 * var(--su, 1px))) solid var(--pq-chip-line, #16161d);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pq-team, var(--pq-chip-accent, #4a5263)) 26%, #ffffff);
  color: var(--pq-chip-line, #16161d);
  font-size: 0.86em;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0.16em 0 rgb(22 22 29 / 0.28);
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: left center;
}
.pq-chip--bonus,
.pq-chip--share {
  background: var(--pq-chip-accent, #4a5263);
  color: var(--pq-chip-accent-ink, #ffffff);
}
.pq-chip__ico {
  font-size: 1.05em;
  line-height: 1;
}