/* ============================================================================
 * tc-konfetti — der Jubel, der bisher nur Mordheim kannte (#131, 10.09.2026)
 * ----------------------------------------------------------------------------
 * ⚠️ ES GAB DAS SCHON, NUR NICHT ALS BAUSTEIN. `createConfetti()` steht seit
 * jeher in js/ui/advancement.js (Mordheim-Aufstieg), und die Regeln dazu
 * lagen in css/admin-styles.css unter einer gleichnamigen Partikel-Klasse.
 * Zwei Dinge waren daran nicht mehr haltbar, sobald ein zweites System
 * jubeln will:
 *
 *   1. Die FUNKTION haengt an einer Mordheim-Datei. `advancement.js` liegt
 *      nicht auf bb-match.html — gemessen, nicht vermutet. Wer dort Konfetti
 *      will, haette sie kopiert; das waere die zweite Fassung gewesen (§11).
 *   2. Die REGELN lagen in `admin-styles.css`. Die liegt zwar zufaellig auf
 *      bb-match.html, aber ein Baustein, dessen Aussehen im Admin-Stilblatt
 *      steht, ist keiner — beim naechsten Aufraeumen dort faellt er weg,
 *      ohne dass jemand den Zusammenhang sieht (§10).
 *
 * Also: eine Komponente, zwei Aufrufer (Mordheim-Aufstieg, BB-Touchdown).
 * §3, Heuristik 2 — ein Pattern auf zwei Seiten ist eine Komponente.
 *
 * BEDIENT WIRD SIE UEBER `TC.konfetti()` in js/tc-ui.js. Von Hand Partikel
 * bauen soll niemand: Die Funktion raeumt sie auch wieder weg, und ein
 * vergessenes `remove()` sammelt sich ueber einen Spielabend.
 * ========================================================================== */

/* ⚠️ EIGENES Z-INDEX-TOKEN, UND ZWAR IM FEIER-BAND UNTER DEM TEXT.
   Die alte Fassung stand auf hart getippten 10 000 — im Band der
   Dashboard-Dialoge (§F in tokens.css), also je nach Seite mal darueber und
   mal darunter.

   Konfetti gehoert ueber den Seiteninhalt und ueber Dialoge (52 000), aber
   UNTER alles, was Text traegt: unter das Level-Up-Fenster (62 000) und unter
   die Toasts (100 000). Der Toast beim Touchdown nennt den Laeufer — ein
   Partikel, der die Zeile kreuzt, kostet genau die Auskunft, die den Moment
   erklaert. Lesbarkeit gewinnt vor Dekor (Heuristik 8). */
:root {
  --tc-konfetti-z: 61000;
}

.tc-konfetti {
  position: fixed;
  top: -24px;
  z-index: var(--tc-konfetti-z);

  /* ⚠️ BEIDES BRAUCHT ES. `pointer-events` haelt den Klick durch — sonst
     faengt ein fallender Partikel den Griff nach dem Knopf darunter ab, und
     zwar unsichtbar. `user-select` verhindert, dass ein Wisch ueber den
     Bildschirm die Emojis markiert; auf dem Tablet passiert genau das. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;

  line-height: 1;
  will-change: transform, opacity;
  animation: tc-konfetti-fall linear forwards;
}

/* ⚠️ DIE SEITLICHE DRIFT IST NICHT DEKOR — ohne sie fallen 25 Zeichen in 25
   senkrechten Linien, und das sieht nach Regen aus, nicht nach Jubel. Sie
   kommt je Partikel als Custom Property vom JS (`--tc-konfetti-drift`), damit
   die Keyframes eine einzige Regel bleiben statt 25 Varianten. */
@keyframes tc-konfetti-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tc-konfetti-drift, 0px), 100vh, 0) rotate(var(--tc-konfetti-spin, 720deg));
    opacity: 0;
  }
}

/* ⚠️ DIE KOMPONENTE TRAEGT IHRE BEWEGUNGSREGEL SELBST (§9), obwohl der
   plattformweite `*`-Block in tokens.css sie ohnehin erwischt. Der Grund ist
   derselbe wie dort beschrieben: Eine Regel, die man pro Datei anmelden muss,
   wird irgendwann vergessen — und eine Komponente, die aus ihrem Stilblatt
   heraus in ein fremdes Projekt wandert, nimmt ihre Regel dann mit.

   ⚠️ HIER IST `none` RICHTIG, anders als beim Spinner (§9). Ein Ladeindikator
   IST die Bewegung; Konfetti ist reine Feier und darf ersatzlos wegfallen.
   Den eigentlichen Verzicht leistet aber `TC.konfetti()` selbst: Es erzeugt
   bei reduzierter Bewegung GAR KEINE Partikel, statt 25 unsichtbare Divs vier
   Sekunden lang im DOM haengen zu lassen. */
@media (prefers-reduced-motion: reduce) {
  .tc-konfetti {
    display: none;
  }
}