/*
 * Pubquiz Punktevergabe auf dem Handy (normal und mobil): große Zahl, Zeitbonus, Teamanteil.
 * Spec: docs/superpowers/specs/2026-10-17-pubquiz-abend-e1-design.md, Abschnitt 3 C.
 * Aufbau: frontend/js/quizStage/pointsPhone.js. Die Zahl steht auf einem Abzeichen in der Farbe des Bühnen-Themes (ohne Theme: Teamfarbe,
 * im Einzelspiel das neutrale Grau) mit Strahlenkranz und dem Symbol des Themes; Farbe und Schrift darauf kommen aus --pq-pts-bg/--pq-pts-ink
 * (dieselben Paletten wie der Akzentstreifen im Rahmen, Kontrast mindestens 4,5:1; Strahlen und Schattierung entfernen die Fläche nur von der Schriftfarbe, scripts/test-pubquiz-points-phone-headless.js rechnet nach).
 * Animiert wird nur `transform` und `opacity` (Web-Animationen aus dem Skript, jede einmal, nie als Dauerschleife); reduzierte Bewegung und der
 * Schalter „Avatare und Animationen“ aus zeigen den Endzustand ohne Bewegung. Das Hochzählen ist ein Textwechsel in höchstens 12 Schritten auf
 * fester Breite (Platz der Endzahl über `data-end`, `tabular-nums`). Teile, die später erscheinen, haben von Anfang an ihren Platz (`.is-pending`
 * nur `opacity: 0`), damit nichts springt.
 */

/* Teile, die erst später erscheinen: Platz bleibt reserviert. */
.pq-pts .is-pending,
.pq-frame .pq-result-standing.is-pending,
.mpq-board .is-pending {
  opacity: 0;
}

.pq-pts {
  /* Breite des Rahmens als Maß für die Schrift der großen Zahl (cqw). */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
  text-align: center;
  --pq-pts-bg: #4a5263;
  --pq-pts-ink: #ffffff;
  --pq-pts-fx: 0 0 0;
  --pq-pts-team: var(--pq-pts-bg);
}

/* ---------- Große Zahl ---------- */
.pq-pts-big {
  margin: 0;
  max-width: 100%;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pq-pts-badge {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.16em 0.5em 0.2em;
  border-radius: 0.55em;
  overflow: hidden;
  isolation: isolate;
  color: var(--pq-pts-ink);
  background: var(--pq-pts-bg);
  /* Schattierung oben, Strahlen dahinter (beides ruht, je höchstens 10 % in Richtung weg von der Schriftfarbe: der Kontrast sinkt nie) */
  background-image: linear-gradient(180deg, rgb(var(--pq-pts-fx) / 0.1), rgb(var(--pq-pts-fx) / 0) 55%);
  box-shadow: 0 0.07em 0 rgb(0 0 0 / 0.22), 0 0.35em 0.7em -0.35em rgb(0 0 0 / 0.5), inset 0 0 0 0.04em rgb(var(--pq-pts-fx) / 0.2);
  font-size: 2.4rem;
}
/* Strahlenkranz hinter der Zahl */
.pq-pts-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgb(var(--pq-pts-fx) / 0.1) 0deg 9deg, rgb(var(--pq-pts-fx) / 0) 9deg 24deg);
  pointer-events: none;
}
.pq-pts-motif {
  position: absolute;
  z-index: -1;
  right: 0.12em;
  bottom: -0.1em;
  width: 0.95em;
  height: 0.95em;
  /* In der Überlagerungsfarbe (von der Schriftfarbe weg), nie in der Schriftfarbe: sonst hellte es die Fläche hinter „Punkte“ auf. */
  opacity: 0.22;
  color: rgb(var(--pq-pts-fx));
}
.pq-pts-motif svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pq-pts-text {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
}
/* Platz der Endzahl: ein unsichtbarer Block mit dem Endtext legt die Breite fest (nichts springt beim Zählen). */
.pq-pts-n,
.pq-pts-unit {
  display: inline-block;
  text-align: center;
}
.pq-pts-n::after,
.pq-pts-unit::after {
  content: attr(data-end);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
/* Team-Zeile (darf umbrechen): sichtbarer Text und unsichtbarer Endtext teilen sich ein Rasterfeld, die Größe ist die des größeren. */
.pq-pts-line {
  display: inline-grid;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.pq-pts-line > span,
.pq-pts-line::after {
  grid-area: 1 / 1;
}
.pq-pts-line::after {
  content: attr(data-end);
  visibility: hidden;
  pointer-events: none;
}
.pq-pts-unit {
  font-size: 0.34em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}
.pq-pts-unit:empty {
  display: none;
}
.pq-pts-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Die Zahl bekommt 2,5-mal die Titelgröße (1,6 rem), aber nie mehr, als in die Breite passt (Zeichen der Endzahl über --pq-pts-ch). */
@container (min-width: 1px) {
  .pq-pts-badge {
    font-size: clamp(1.9rem, calc((100cqw - 4.6rem) / (var(--pq-pts-ch, 4) * 0.62 + 0.9)), 4rem);
  }
}

/* ---------- Zeitbonus und Team ---------- */
.pq-pts-bonus {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0.2em 0.75em 0.22em;
  border-radius: 999px;
  background: rgb(22 22 29 / 0.08);
  color: #16161d;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pq-pts-bonus-icon {
  font-size: 1.05em;
  line-height: 1;
}
.pq-pts-team {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0.28em 0.9em 0.3em;
  border-radius: 999px;
  border: 2px solid var(--pq-pts-team);
  background: rgb(255 255 255 / 0.78);
  color: #16161d;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pq-pts-team .pq-pts-text {
  gap: 0.5em;
  min-width: 0;
}
.pq-pts-team .pq-pts-text::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--pq-pts-team);
}

/* Niedrige Handys (Sichtfläche bis 740 px): enger, damit Figur samt Emote-Leiste die Rangliste nicht unter die Kante schiebt. */
@media (max-height: 740px) {
  .pq-pts {
    gap: 4px;
    margin: 0 0 2px;
  }
  .pq-pts-badge {
    font-size: 2.1rem;
  }
  .pq-pts-bonus {
    font-size: 0.98rem;
  }
  .pq-pts-team {
    font-size: 1.05rem;
  }
}
@media (max-height: 740px) {
  @container (min-width: 1px) {
    .pq-pts-badge {
      font-size: clamp(1.7rem, calc((100cqw - 4.6rem) / (var(--pq-pts-ch, 4) * 0.62 + 0.9)), 3.2rem);
    }
  }
}

/* Kein Wechsel zum Hochkontrast-Look nötig: Schrift und Fläche behalten ihren Kontrast; ohne Bewegung bleibt alles stehen. */
@media (prefers-reduced-motion: reduce) {
  .pq-pts *,
  .mpq-board .is-pending {
    animation: none !important;
    transition: none !important;
  }
}