/* --- FILE: ./static/css/score_chip.css ---
   Punkteanzeige-Kachel fuer ALLE Controller. Gemeinsam, damit die Animation
   nicht 22-mal kopiert werden muss — dasselbe Prinzip wie roundintro.css.
   Gegenstueck: /static/js/score_chip.js (window.QS_scoreChip).

   Ablauf (siehe score_chip.js):
     show_resolution      Fragebox faerbt sich  (macht jedes Modul selbst)
       2 s
     show_scoring         Box weicht, Kachel klappt auf / klappt um
     apply_scoring_update Punktestand zaehlt, Kachel bleibt stehen
       danach             Kachel klappt zu, Box nimmt die volle Breite zurueck
*/

/* Die Zeile: Player-Box und Kachel nebeneinander, gleich hoch.
   Bei Voller Einsatz gibt es diesen Wrapper schon als .psc__topMetaRow —
   dann wird er benutzt statt eines zweiten. */
.qs-scoreRow {
  /* Bewusst 96vw wie alle Geschwister-Bloecke im Bestand (Frage, Timerbar,
     Antworten) — sonst waere die Meta-Zeile als einzige schmaler. Dass 96vw
     das Polster der .qa-inner ignoriert, ist ein Altbefund und wird hier
     nicht einseitig korrigiert. */
  width: min(600px, 96vw);
  display: flex;
  align-items: stretch;
}

/* Die Player-Box nimmt den Rest der Zeile und gibt nach, wenn die Kachel
   aufklappt. Das `width: auto` hebt das `min(600px, 96vw)` aus dem Modul-CSS
   auf — genauso macht es Voller Einsatz heute schon fuer seine topMetaRow. */
.qs-scoreRow > .psc__metaBox,
.psc__topMetaRow > .psc__metaBox {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* =========================================================
   Die Kachel
   ========================================================= */

.qs-chip {
  /* Ergebnisfarbe; wird pro Runde gesetzt (Neon-Gruen, Neon-Rot oder
     Guete-Farbe) — dasselbe Neon wie die aufgeloeste Spielerkarte. */
  --qs-res: var(--revealOk, #39FF14);

  flex: 0 0 auto;
  position: relative;
  box-sizing: border-box;

  /* zugeklappt: null Pixel — die Player-Box hat die volle Breite */
  width: 0;
  margin-left: 0;
  border: 0 solid transparent;
  opacity: 0;
  overflow: hidden;

  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Nunito", Arial, sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
  /* Bezugsgroesse fuer die Ziffern (score_chip.js fitNum rechnet in em).
     Der Fernseher setzt hier 3.64vw (tv-core.css). */
  font-size: 48px;

  transition:
    width 340ms cubic-bezier(.3, .8, .3, 1),
    margin-left 340ms cubic-bezier(.3, .8, .3, 1),
    border-width 340ms ease,
    opacity 300ms ease;
}

/* Aufgeklappt: quadratisch. Die Kantenlaenge misst score_chip.js aus der
   tatsaechlichen Zeilenhoehe und setzt sie als --qs-chip-size — so bleibt die
   Kachel quadratisch, egal welche Schriftgroessen ein Modul benutzt (das
   Finale z. B. ist deutlich kompakter). Der Wert hier ist nur der Notnagel. */
.qs-chip.is-open {
  width: var(--qs-chip-size, 48px);
  margin-left: 6px;
  border-width: 2px;
  opacity: 1;
}

/* Einsatz gesetzt, Ergebnis noch offen -> weisser Rahmen */
.qs-chip.is-neutral { border-color: rgba(255, 255, 255, 0.95); }

/* Einsatz noch nicht gesetzt (nur Voller Einsatz) */
.qs-chip.is-idle { opacity: 0.25; }

/* Ergebnis */
.qs-chip.is-done {
  border-color: var(--qs-res);
  color: var(--qs-res);
  text-shadow: 0 0 14px var(--qs-res);
}

.qs-chip__num {
  display: inline-block;
  /* Groesse setzt score_chip.js, damit mehrstellige Werte passen */
}

/* =========================================================
   Umklappen — Farbe und Ziffer springen in der Kantenphase (50 % = 141 ms),
   wo die Kachel hochkant steht und der Wechsel unsichtbar bleibt.
   282 ms statt 620 seit der Punkteklang-Fassung: turn.mp3 (0,62 s) ist
   schneller als die alte Drehung, die Kachel zieht nach. FLIP_EDGE_MS in
   score_chip.js ist die Haelfte davon; tests/test_tv_timing.py rechnet nach.
   ========================================================= */

@keyframes qs-flip {
  0%   { transform: perspective(300px) rotateY(0deg); }
  50%  { transform: perspective(300px) rotateY(90deg); }
  100% { transform: perspective(300px) rotateY(0deg); }
}

.qs-chip.is-flipping {
  animation: qs-flip 282ms ease-in-out;
  transition:
    border-color 1ms linear 141ms,
    color 1ms linear 141ms,
    text-shadow 1ms linear 141ms;
}

@media (prefers-reduced-motion: reduce) {
  .qs-chip { transition-duration: 1ms; }
  .qs-chip.is-flipping { animation-duration: 1ms; transition-duration: 1ms; }
}