/**
 * Rangplaketten mit Metall-Stufen — Phase 1b, Schritt 3.
 *
 * ============================================================================
 * LIVE seit 11.08.2026 (Bündel C). Eingehängt in views/leaderboard_public.ejs
 * über `v2PageStyles` — NACH leaderboard.css, sonst wirkungslos.
 *
 * Sie ist rein additiv: Sie hängt an `[data-metall]`, einem Attribut, das die
 * Ansicht mitgibt. Ohne diese Datei ist das Attribut wirkungslos, mit ihr
 * bekommt jede Plakette ihr Material.
 * ============================================================================
 *
 * WAS SIE LÖST
 *
 * Alle 19 Ränge erscheinen heute als optisch identische kleine Pillen mit
 * Mini-Symbol. Der Aufstieg — die eigentliche Geschichte des Produkts, von
 * „Casino Gast" bis „GOD OF MAX WIN" über 1 000 Stunden — ist unsichtbar. Wer
 * die Rangliste überfliegt, sieht neunzehn gleich aussehende Etiketten.
 *
 * DIE SCHWELLE IST NICHT ERFUNDEN
 *
 * Ab „Vollbild Jäger" (125 Std) gibt es die Medaille zum ANFASSEN. Genau dort
 * beginnt hier das Edelmetall. Davor: Stein, Patina, Stahl — Material, aber
 * kein Gold. Der Bildschirm sagt die Wahrheit über den Gegenstand.
 *
 * Die Stufen kommen aus `metallStufe()` in config/constants.js, die Werte aus
 * public/css/tokens.css. Beides genau einmal.
 *
 * DIE RANGFARBE BLEIBT
 *
 * Sie wird nicht ersetzt, sondern zum Punkt links neben dem Namen. Die 19
 * Farben sind die Identität der Ränge und stehen so seit Jahren; das Metall
 * kommt dazu, es tritt nicht an ihre Stelle.
 */

/* Die Token-Quelle. Sie definiert die Metall-Stufen, die Schriften und die
   Bewegungen — ohne sie greift hier nichts. */
@import url('/css/tokens.css');

/* ── Die Plakette ───────────────────────────────────────────────────────── */

.lb-row__reward[data-metall],
.lb-podium-col__reward[data-metall] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 9px;
    border-radius: var(--jt-r-pille);
    border: 1px solid transparent;
    /* Cinzel für Rangnamen: eine römische Inschriftenschrift. Sie liest
       „graviert", nicht „Gaming" — und verbindet den Bildschirm mit dem
       Gegenstand, den es ab Stufe „medaille" wirklich gibt. */
    font-family: var(--jt-schrift-rang);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.045em;
    line-height: 1.25;
    white-space: nowrap;
}

/**
 * Das Rangbild ist ein Wappen, kein Punkt.
 *
 * Hier stand 9×9 mit `border-radius: pille` und `object-fit: cover` — das Bild
 * war zum farbigen Punkt geschrumpft, mit der Begründung, es sei „in der
 * Plakette zu laut". Das war meine Fehleinschätzung: Der Betreiber hat die 19
 * Rangbilder zeichnen lassen, und `cover` auf einem runden Ausschnitt hat von
 * jedem Wappen die Ecken abgeschnitten und die Mitte vergrößert — man sah
 * nicht, WAS da war.
 *
 * Jetzt 20 px, vollständig sichtbar (`contain`), ohne Kreisbeschnitt und ohne
 * den schwarzen Ring, der zur Punkt-Fassung gehörte.
 */
.lb-row__reward[data-metall] img,
.lb-podium-col__reward[data-metall] img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}

/* Der Name erbt die Metallfarbe, statt die Rangfarbe zu tragen.
   `.v2-color-var` setzt heute `color: var(--c)` — auf einer goldenen Plakette
   wäre ein dunkelblauer Rangname unlesbar. */
.lb-row__reward[data-metall] .v2-color-var,
.lb-podium-col__reward[data-metall] .v2-color-var {
    color: inherit;
}

/* ── Die fünf Stufen ────────────────────────────────────────────────────── */

[data-metall="stein"] {
    background: var(--jt-metall-stein);
    border-color: var(--jt-metall-stein-kante);
    color: #e7e7ea;
}

[data-metall="patina"] {
    background: var(--jt-metall-patina);
    border-color: var(--jt-metall-patina-kante);
    color: #e9f0ea;
}

[data-metall="stahl"] {
    background: var(--jt-metall-stahl);
    border-color: var(--jt-metall-stahl-kante);
    color: #f2f6fb;
    box-shadow: var(--jt-metall-stahl-glanz);
}

/* Ab hier gibt es die Medaille wirklich. */
[data-metall="medaille"] {
    background: var(--jt-metall-medaille);
    border-color: var(--jt-metall-medaille-kante);
    color: var(--jt-auf-gold);
    box-shadow: var(--jt-metall-medaille-glanz);
}

[data-metall="maxwin"] {
    background: var(--jt-metall-maxwin);
    border-color: var(--jt-metall-maxwin-kante);
    color: #14100a;
    box-shadow: var(--jt-metall-maxwin-glanz);
}

/* ── Zahlen ─────────────────────────────────────────────────────────────── */

/**
 * Eine Rangliste ist eine Zahlentabelle. Ziffern gleicher Breite sind dort
 * kein Stilmittel, sondern Lesbarkeit: Ohne sie springen die Spalten von Zeile
 * zu Zeile, weil eine „1" schmaler ist als eine „8".
 *
 * JetBrains Mono ist installiert und wird von der Mod-Suite bereits als
 * Mono-Familie geführt — die Wahl ist im Werkzeug, mit dem das Team täglich
 * arbeitet, längst getroffen. Sie muss nur auf die Ranglisten übertragen werden.
 */
.lb-row__score,
.lb-row__rank,
.lb-podium-col__value,
.lb-me__kpi dd {
    font-family: var(--jt-schrift-zahl);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Bewegung ───────────────────────────────────────────────────────────── */

/**
 * Der Live-Punkt ist die einzige Bewegung, die durchgehend läuft. Deshalb heisst
 * sie etwas: „hier passiert gerade wirklich was".
 *
 * Hier stand: „Die Plaketten bewegen sich NICHT." Das gilt so nicht mehr — der
 * Betreiber wollte sie animiert haben, und der Lichtfang am Ende dieser Datei
 * setzt das um. Der Satz war aber nicht falsch, sondern gemeint gegen
 * PULSIEREN: neunzehn Etiketten, die alle gleichzeitig heller und dunkler
 * werden. Genau das tut der Lichtfang nicht — er zieht einmal kurz durch und
 * lässt dann sehr lange Ruhe, und jede Plakette in ihrem eigenen Takt.
 */
.lb-live-pill.is-live .lb-live-pill__dot {
    --jt-puls: rgba(239, 68, 68, 0.55);
    animation: jt-warten 1.8s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .lb-live-pill.is-live .lb-live-pill__dot { animation: none; }
}

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DER LICHTFANG — die Plakette fängt kurz Licht (auf Betreiberwunsch)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * WAS SIE NICHT IST: ein Pulsieren. Davon gibt es im Bestand 27 Varianten, und
 * genau deshalb bedeutet dort Bewegung nichts mehr. Dies hier ist der Reflex
 * eines Streiflichts auf Metall: Ein schmaler Streifen zieht in 1,4 Sekunden
 * über die Plakette — und dann passiert sehr lange nichts.
 *
 * DAS VERHÄLTNIS IST DIE GESTALTUNG. Rund 1,4 s Bewegung auf 8 bis 12 s
 * Stillstand. Wer hinsieht, erwischt sie; wer die Seite überfliegt, merkt nur,
 * dass die Plaketten aus Metall sind. Kürzt man die Pause, entsteht der
 * 28. Puls.
 *
 * WARUM JEDE IHREN EIGENEN TAKT HAT
 *
 * Ausdrücklich gewünscht — und auch ohne Wunsch richtig: Gleichzeitig
 * blitzende Schilder lesen als Bildschirmfehler, nicht als Licht. CSS kann
 * nicht würfeln, deshalb zwei teilerfremde Zyklen über `nth-child`: fünf
 * Dauern und sieben Verzögerungen ergeben 35 Kombinationen, bevor sich das
 * Muster wiederholt. In einer Liste von 200 Zeilen sieht man keine Ordnung
 * mehr — und es braucht kein Skript und keinen Zufall vom Server, der beim
 * gecachten HTML für alle derselbe wäre.
 */

.lb-row__reward[data-metall],
.lb-podium-col__reward[data-metall] {
    position: relative;
    overflow: hidden;
    /* Vorgaben; die nth-child-Regeln unten verstellen sie. */
    --lichtfang-dauer: 9.4s;
    --lichtfang-verzug: 0s;
}

.lb-row__reward[data-metall]::after,
.lb-podium-col__reward[data-metall]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /**
     * Schmal und schräg: ein Streiflicht, kein Aufleuchten der ganzen Fläche.
     *
     * Die dunklen Flanken sind der Punkt. Eine erste Fassung hatte nur den
     * hellen Kern (0,34 Weiß) — auf Stahl war er zu sehen, auf Gold und Max Win
     * praktisch nicht: Eine helle Bahn auf einer fast weißen Fläche ist keine
     * Bahn. So funktioniert auch echtes Glanzlicht nicht; es wird von einer
     * Abdunklung eingefasst, und erst dieser Kontrast macht es sichtbar.
     */
    background: linear-gradient(102deg,
        transparent 36%,
        rgba(0, 0, 0, 0.17) 44%,
        rgba(255, 255, 255, 0.68) 50%,
        rgba(0, 0, 0, 0.17) 56%,
        transparent 64%);
    /* Nur transform wird bewegt — das laeuft auf der GPU und zwingt den
       Browser nicht zum Neuberechnen des Layouts. Bei rund 200 Zeilen ist das
       der Unterschied zwischen unmerklich und ruckelig. */
    transform: translateX(-160%);
    will-change: transform;
    animation: jt-lichtfang var(--lichtfang-dauer) linear var(--lichtfang-verzug) infinite;
}

/* Stein bekommt keinen Reflex: Ein matter Stein, der glaenzt, ist ein
   Widerspruch — und die unteren fuenf Stufen sind die haeufigsten. */
.lb-row__reward[data-metall="stein"]::after,
.lb-podium-col__reward[data-metall="stein"]::after { display: none; }

@keyframes jt-lichtfang {
    0%   { transform: translateX(-160%); }
    /* 14 % von ~9 s sind rund 1,3 s Wanderung … */
    14%  { transform: translateX(160%); }
    /* … und der Rest ist Ruhe. */
    100% { transform: translateX(160%); }
}

/* Fuenf Dauern (Zyklus 5) */
tr:nth-child(5n+1) .lb-row__reward[data-metall] { --lichtfang-dauer: 8.3s; }
tr:nth-child(5n+2) .lb-row__reward[data-metall] { --lichtfang-dauer: 9.7s; }
tr:nth-child(5n+3) .lb-row__reward[data-metall] { --lichtfang-dauer: 11.1s; }
tr:nth-child(5n+4) .lb-row__reward[data-metall] { --lichtfang-dauer: 10.2s; }
tr:nth-child(5n+5) .lb-row__reward[data-metall] { --lichtfang-dauer: 12.4s; }

/* Sieben Verzoegerungen (Zyklus 7) — 5 und 7 sind teilerfremd, das Muster
   wiederholt sich also erst nach 35 Zeilen. */
tr:nth-child(7n+1) .lb-row__reward[data-metall] { --lichtfang-verzug: 0s; }
tr:nth-child(7n+2) .lb-row__reward[data-metall] { --lichtfang-verzug: 1.3s; }
tr:nth-child(7n+3) .lb-row__reward[data-metall] { --lichtfang-verzug: 2.9s; }
tr:nth-child(7n+4) .lb-row__reward[data-metall] { --lichtfang-verzug: 4.1s; }
tr:nth-child(7n+5) .lb-row__reward[data-metall] { --lichtfang-verzug: 5.6s; }
tr:nth-child(7n+6) .lb-row__reward[data-metall] { --lichtfang-verzug: 6.8s; }
tr:nth-child(7n+7) .lb-row__reward[data-metall] { --lichtfang-verzug: 7.9s; }

/* Die drei Podestplaetze einzeln — sie stehen nebeneinander im Bild, dort
   faellt Gleichlauf am staerksten auf. */
.lb-podium-col--1 .lb-podium-col__reward[data-metall] { --lichtfang-dauer: 8.6s; --lichtfang-verzug: 0.4s; }
.lb-podium-col--2 .lb-podium-col__reward[data-metall] { --lichtfang-dauer: 11.3s; --lichtfang-verzug: 3.2s; }
.lb-podium-col--3 .lb-podium-col__reward[data-metall] { --lichtfang-dauer: 9.9s; --lichtfang-verzug: 6.1s; }

/**
 * Wer Bewegung schlecht vertraegt, bekommt Metall ohne Reflex.
 *
 * `display: none` statt `animation: none`: Ohne Animation staende der
 * Lichtstreifen sonst dauerhaft an seiner Startposition ueber der Plakette.
 */
@media (prefers-reduced-motion: reduce) {
    .lb-row__reward[data-metall]::after,
    .lb-podium-col__reward[data-metall]::after { display: none; }
}