/**
 * DIE LEITER — Rangleiter als Auszahlungstabelle (Phase 1b, Schritt 6).
 *
 * ============================================================================
 * LIVE seit 11.08.2026 (Bündel C). Eingehängt in views/leaderboard_public.ejs
 * über `v2PageStyles` — NACH leaderboard.css, sonst wirkungslos.
 * ============================================================================
 *
 * DIE EINE KÜHNHEIT IST DAS MATERIAL
 *
 * Die fünf Metall-Stufen aus Schritt 3 (`--jt-metall-*`) bekommen hier ihren
 * Gegenstand: Jede Zeile trägt das Material ihrer Stufe. Stein, Patina, Stahl,
 * Medaille, Max Win — die Stufe ist erkennbar, bevor man den Namen liest.
 *
 * Dazu zwei Zutaten, die der Betreiber am 11.08.2026 gewünscht hat: Jede Zeile
 * trägt ihre Rangfarbe als Tönung, und verdientes Metall fängt kurz Licht
 * (`jt-lichtfang`, dieselbe Bewegung wie auf den Plaketten in Podest und
 * Liste). Beides bleibt sparsam — die Regel „wenn alles glänzt, heisst Glanz
 * nichts" gilt weiter, deshalb 1,4 s Bewegung auf 8 bis 12 s Ruhe und die
 * Tönung nur im linken Drittel.
 *
 * WAS VERDIENT WERDEN MUSS
 *
 * Nicht erreichte Stufen zeigen ihre Plakette entfärbt. Das Material ist damit
 * kein Schmuck, sondern der Lohn — und die Tabelle zeigt beim ersten Blick,
 * wie weit jemand ist, ohne eine einzige Prozentzahl.
 */

@import url('/css/tokens.css');

.lb-leiter {
    margin-top: var(--jt-a-8);
}

.lb-leiter__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--jt-a-3);
    margin-bottom: var(--jt-a-4);
}

.lb-leiter__unter {
    margin: 0;
    color: var(--jt-text-still);
    font-size: var(--jt-t-s);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lb-leiter__tabelle {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--jt-linie);
    border-radius: var(--jt-r-m);
    /* Eigener Schichtkontext: Die Plaketten legen sich sonst über die
       Kopfzeile der Seite, wenn sie ihren Rand nach aussen zeichnen. */
    isolation: isolate;

    /**
     * EIN FENSTER, KEINE HALBE SEITE.
     *
     * 19 Zeilen à rund 50 px sind über 900 px — auf jedem Gerät mehr als ein
     * Bildschirm, nur um eine Tabelle zu passieren, in der die meisten genau
     * eine Zeile suchen: die eigene.
     *
     * Rund neun Zeilen sind das Maß: genug Kontext nach oben und unten, dass
     * die eigene Stufe in einer Leiter steht statt allein. `min()` deckelt das
     * zusätzlich gegen die Fensterhöhe, damit auf kurzen Bildschirmen nicht
     * doch wieder alles verdeckt wird.
     *
     * Wohin es aufgeht, entscheidet public/js/rangleiter.js. Ohne Skript steht
     * es oben — bei der grössten Stufe, und alles bleibt scrollbar erreichbar.
     */
    max-height: min(52vh, 30rem);
    overflow-y: auto;
    overflow-x: hidden;
    /* Kein sanftes Rollen: Die Startposition wird gesetzt, nicht angefahren. */
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--jt-linie-stark) transparent;

    /**
     * EIGENE FLÄCHE — nicht optional.
     *
     * Ohne sie scheint das Hintergrundfoto der Seite (ein Kronleuchter mit
     * hellen Stellen) durch die Tabelle, und ausgerechnet die noch nicht
     * erreichten Zeilen werden unlesbar. Im ersten Bildschirmfoto war von den
     * Stufen 19 bis 14 kaum etwas zu erkennen.
     *
     * Fast deckend statt ganz: Ein Rest Foto hält die Tabelle im Bild der
     * Seite, statt sie als Fremdkörper daraufzulegen.
     */
    background: color-mix(in srgb, var(--jt-grund-1) 94%, transparent);
    backdrop-filter: blur(6px);
}

/* Für Browser ohne color-mix() (Safari < 16.4) — dort ohne Foto-Rest, aber
   auf jeden Fall lesbar. Steht VOR der modernen Regel wäre falsch: @supports
   not greift sonst nie. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .lb-leiter__tabelle { background: var(--jt-grund-1); }
}

/* Webkit kennt scrollbar-width nicht. Eine sichtbare, aber schmale Leiste ist
   hier Absicht: Sie ist der Hinweis, dass die Tabelle weitergeht. */
.lb-leiter__tabelle::-webkit-scrollbar { width: 8px; }
.lb-leiter__tabelle::-webkit-scrollbar-track { background: transparent; }
.lb-leiter__tabelle::-webkit-scrollbar-thumb {
    background: var(--jt-linie-stark);
    border-radius: var(--jt-r-pille);
}

/**
 * Die Zeile.
 *
 * Feste Spalten statt `auto`: Eine Auszahlungstabelle, deren Zahlen nicht
 * untereinander stehen, ist keine Tabelle mehr. Die Schwellenspalte ist so
 * breit wie der längste Wert („1 000 Std."), damit nichts springt.
 */
.lb-leiter__zeile {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem 2.75rem 1fr auto;
    align-items: center;
    gap: var(--jt-a-3);
    padding: var(--jt-a-2) var(--jt-a-4);
    border-bottom: 1px solid var(--jt-linie);
    background: transparent;
}

.lb-leiter__zeile:last-child { border-bottom: 0; }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DIE ZEILE TRÄGT IHRE RANGFARBE (auf Betreiberwunsch)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Die 19 Rangfarben stehen seit Jahren in config/constants.js und waren auf
 * dieser Seite bisher nur ein kleiner Punkt. Jetzt färbt jede Stufe ihre Zeile.
 *
 * WARUM DIE FARBE LINKS AM STÄRKSTEN IST UND NACH RECHTS AUSLÄUFT
 *
 * Unter den 19 Farben sind vier fast weisse (#ffffff bei GOD OF MAX WIN, dazu
 * #e5e4e2, #dcddde, #bdc3c7). Bei kräftiger Tönung stünde heller Text auf
 * hellem Grund.
 *
 * Nachgemessen statt vermutet: Die Zeile ist 1 180 px breit, die Tönung ist bei
 * 684 px verschwunden, der Name beginnt aber schon bei 124 px — sie liegt also
 * sehr wohl unter ihm. (Ein früherer Kommentar behauptete das Gegenteil; das
 * war falsch.) Unkritisch ist es trotzdem, weil die Tönung schwach bleibt:
 * 15 % Weiss über der Tabellenfläche rgb(19,16,23) ergibt rgb(54,52,58) — der
 * Text bleibt bei rund 10 : 1.
 *
 * Wer die 15 % erhöht, muss diese Rechnung neu machen.
 *
 * ERREICHT = VOLLE FARBE, OFFEN = VERBLASST. Damit sagt die Zeile dasselbe wie
 * ihre Plakette (entfärbtes Material), nur eine Ebene lauter.
 */
.lb-leiter__zeile {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rang-farbe, transparent) 15%, transparent) 0%,
        color-mix(in srgb, var(--rang-farbe, transparent) 5%, transparent) 32%,
        transparent 58%);
}

.lb-leiter__zeile:not(.is-erreicht) {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rang-farbe, transparent) 5%, transparent) 0%,
        transparent 44%);
}

/* Ohne color-mix (Safari < 16.4) bleibt die Zeile schlicht — lieber keine
   Tönung als eine falsche. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .lb-leiter__zeile,
    .lb-leiter__zeile:not(.is-erreicht) { background: transparent; }
}

.lb-leiter__nr {
    font-family: var(--jt-schrift-zahl);
    font-size: var(--jt-t-s);
    color: var(--jt-text-still);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/**
 * Die Plakette trägt das Material.
 *
 * `--jt-metall-*` kommt aus der Token-Quelle; welche Stufe gilt, entscheidet
 * `metallStufe()` in config/constants.js — die Schwellen stehen dort und
 * nirgends sonst.
 */
.lb-leiter__plakette {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--jt-r-s);
    border: 1px solid var(--kante, var(--jt-linie));
    background: var(--material, transparent);
    box-shadow: var(--glanz, none);
}

/* 32 statt 26: Das Wappen füllt die Plakette jetzt, statt darin zu schwimmen.
   Bei 2,75 rem (44 px) Kasten bleiben 6 px Luft je Seite — genug, dass der
   Materialrand als Fassung liest und nicht als leerer Rahmen. */
.lb-leiter__plakette img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.lb-leiter__zeile[data-metall="stein"] {
    --material: var(--jt-metall-stein);
    --kante: var(--jt-metall-stein-kante);
    --glanz: var(--jt-metall-stein-glanz);
}
.lb-leiter__zeile[data-metall="patina"] {
    --material: var(--jt-metall-patina);
    --kante: var(--jt-metall-patina-kante);
    --glanz: var(--jt-metall-patina-glanz);
}
.lb-leiter__zeile[data-metall="stahl"] {
    --material: var(--jt-metall-stahl);
    --kante: var(--jt-metall-stahl-kante);
    --glanz: var(--jt-metall-stahl-glanz);
}
.lb-leiter__zeile[data-metall="medaille"] {
    --material: var(--jt-metall-medaille);
    --kante: var(--jt-metall-medaille-kante);
    --glanz: var(--jt-metall-medaille-glanz);
}
.lb-leiter__zeile[data-metall="maxwin"] {
    --material: var(--jt-metall-maxwin);
    --kante: var(--jt-metall-maxwin-kante);
    --glanz: var(--jt-metall-maxwin-glanz);
}

/**
 * Noch nicht verdient.
 *
 * Entfärbt statt ausgeblendet: Was kommt, soll sichtbar bleiben — sonst nimmt
 * man der Leiter genau das, wofür sie da ist. Nur das Material fehlt noch.
 *
 * Die Regel steht NACH den Material-Regeln und ist mit `:not(.is-erreicht)`
 * gleich spezifisch wie sie (0,2,0 gegen 0,2,0) — sie gewinnt also durch ihre
 * Position. Wer sie verschiebt, hebt sie auf.
 */
.lb-leiter__zeile:not(.is-erreicht) .lb-leiter__plakette {
    /* 0.55 war zu dunkel: Auf der Fläche verschwanden die oberen sechs Stufen
       fast ganz — im Bildschirmfoto nachgesehen. Entfärbt, aber sichtbar. */
    filter: grayscale(1) brightness(0.85);
    box-shadow: none;
}

.lb-leiter__zeile:not(.is-erreicht) .lb-leiter__name,
.lb-leiter__zeile:not(.is-erreicht) .lb-leiter__schwelle {
    color: var(--jt-text-leise);
}

/**
 * Die Namensspalte trägt Name UND den „Du bist hier"-Anhänger.
 *
 * Flex statt einfachem Text, damit der Name kürzen darf und der Anhänger nie.
 * Umgekehrt wäre es falsch: Ein abgeschnittenes „Du bist hi…" ist schlimmer
 * als ein abgeschnittener Rangname, den die Plakette daneben ohnehin zeigt.
 */
.lb-leiter__name {
    display: flex;
    align-items: center;
    gap: var(--jt-a-2);
    min-width: 0;
    font-family: var(--jt-schrift-rang);
    font-size: var(--jt-t-m);
    letter-spacing: 0.03em;
    color: var(--jt-text);
}

.lb-leiter__name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-leiter__schwelle {
    font-family: var(--jt-schrift-zahl);
    font-size: var(--jt-t-s);
    font-variant-numeric: tabular-nums;
    color: var(--jt-text-leise);
    text-align: right;
    white-space: nowrap;
}

/**
 * Die eigene Zeile.
 *
 * Der einzige Ort in der Tabelle, an dem Gold auf einer Fläche liegt.
 */
.lb-leiter__zeile.is-du {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.14), transparent 65%);
    border-left: 3px solid var(--jt-gold);
    /* Die 3px Rand nehmen der Zeile sonst 3px Breite gegenüber allen anderen. */
    padding-left: calc(var(--jt-a-4) - 3px);
}

.lb-leiter__hier {
    flex: 0 0 auto;
    padding: 1px var(--jt-a-2);
    border-radius: var(--jt-r-pille);
    background: var(--jt-gold);
    color: var(--jt-auf-gold);
    font-size: var(--jt-t-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lb-leiter__fuss {
    margin: var(--jt-a-3) 0 0;
    color: var(--jt-text-leise);
    font-size: var(--jt-t-s);
}

.lb-leiter__fuss b { color: var(--jt-text); }

/**
 * Handy.
 *
 * Gemessen auf 375 px: Mit fünf Spalten bleiben dem Namen 96 px, und
 * „Walzen Flüsterer" wird zu „Walzen Flü…". Die Nummernspalte fällt deshalb
 * weg — sie ist die einzige Spalte, deren Information auch aus der Reihenfolge
 * hervorgeht.
 */
@media (max-width: 560px) {
    .lb-leiter__zeile {
        grid-template-columns: 2.5rem 1fr auto;
        gap: var(--jt-a-2);
        padding-inline: var(--jt-a-3);
    }
    .lb-leiter__nr { display: none; }
    .lb-leiter__plakette { width: 2.5rem; height: 2.5rem; }
    .lb-leiter__plakette img { width: 26px; height: 26px; }
    .lb-leiter__name { font-size: var(--jt-t-s); }
    .lb-leiter__zeile.is-du { padding-left: calc(var(--jt-a-3) - 3px); }

    /* Gemessen auf 375 px: „Vollbild Jäger" fehlten 10 px, der Name kürzte auf
       „Vollbild Jä…" — ausgerechnet in der eigenen Zeile. Enger gesetzt und mit
       halbem Innenabstand gibt der Anhänger rund 15 px zurück.

       Für die längsten Rangnamen („Walzen Flüsterer") reicht auch das auf 375 px
       nicht. Das bleibt so: Ein abgeschnittenes „Du bist hi…" wäre schlimmer als
       ein gekürzter Name, den die Plakette daneben ohnehin zeigt. */
    .lb-leiter__hier {
        padding-inline: var(--jt-a-1);
        letter-spacing: 0;
    }
}

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DER LICHTFANG — auch hier, aber nur auf verdientem Metall
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Dieselbe Bewegung wie auf den Plaketten in Podest und Liste
 * (`jt-lichtfang`, definiert in pages/rangplaketten.css). Bewusst KEINE zweite
 * Idee: Es ist dasselbe Material, also fängt es dasselbe Licht. Eine eigene
 * Bewegung für dieselbe Sache wäre der Anfang des nächsten Namensraums.
 *
 * NUR AUF ERREICHTEN STUFEN. Was noch nicht verdient ist, zeigt sein Material
 * entfärbt — ein Glanzlicht auf einer grauen Plakette wäre ein Versprechen
 * ohne Deckung. Und Stein bleibt matt, wie in der Liste.
 *
 * Der Takt kommt aus der Zeilennummer: 19 Zeilen untereinander, alle im Bild,
 * da fällt Gleichlauf sofort auf. Fünf Dauern und sieben Verzögerungen ergeben
 * 35 Kombinationen — für 19 Zeilen reicht das für lauter verschiedene Takte.
 */
.lb-leiter__zeile.is-erreicht .lb-leiter__plakette {
    position: relative;
    overflow: hidden;
    --lichtfang-dauer: 9.4s;
    --lichtfang-verzug: 0s;
}

.lb-leiter__zeile.is-erreicht .lb-leiter__plakette::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(102deg,
        transparent 30%,
        rgba(0, 0, 0, 0.14) 42%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(0, 0, 0, 0.14) 58%,
        transparent 70%);
    transform: translateX(-160%);
    will-change: transform;
    animation: jt-lichtfang var(--lichtfang-dauer) linear var(--lichtfang-verzug) infinite;
}

/* Matter Stein glaenzt nicht. */
.lb-leiter__zeile[data-metall="stein"] .lb-leiter__plakette::after { display: none; }

.lb-leiter__zeile:nth-child(5n+1) { --lichtfang-dauer: 8.3s; }
.lb-leiter__zeile:nth-child(5n+2) { --lichtfang-dauer: 9.7s; }
.lb-leiter__zeile:nth-child(5n+3) { --lichtfang-dauer: 11.1s; }
.lb-leiter__zeile:nth-child(5n+4) { --lichtfang-dauer: 10.2s; }
.lb-leiter__zeile:nth-child(5n+5) { --lichtfang-dauer: 12.4s; }

.lb-leiter__zeile:nth-child(7n+1) { --lichtfang-verzug: 0.6s; }
.lb-leiter__zeile:nth-child(7n+2) { --lichtfang-verzug: 2.1s; }
.lb-leiter__zeile:nth-child(7n+3) { --lichtfang-verzug: 3.4s; }
.lb-leiter__zeile:nth-child(7n+4) { --lichtfang-verzug: 4.8s; }
.lb-leiter__zeile:nth-child(7n+5) { --lichtfang-verzug: 6.2s; }
.lb-leiter__zeile:nth-child(7n+6) { --lichtfang-verzug: 7.5s; }
.lb-leiter__zeile:nth-child(7n+7) { --lichtfang-verzug: 8.9s; }

/* `display: none`, nicht `animation: none` — sonst stuende der Lichtstreifen
   dauerhaft an seiner Startposition auf der Plakette. */
@media (prefers-reduced-motion: reduce) {
    .lb-leiter__zeile.is-erreicht .lb-leiter__plakette::after { display: none; }
    .lb-leiter__auf { transition: none; }
}

/* A3 (25.08.2026): Die Leiter steht zugeklappt in einem <details> — die
   Startseite wird kürzer, die Leiter bleibt einen Klick entfernt. Der
   Browser-Pfeil fällt weg; den Auf/Zu-Hinweis trägt der eigene Chevron,
   der sich am offenen Zustand dreht. */
.lb-leiter__details > summary {
    list-style: none;
    cursor: pointer;
}

.lb-leiter__details > summary::-webkit-details-marker { display: none; }

.lb-leiter__auf {
    display: inline-flex;
    margin-left: var(--jt-a-2);
    color: var(--jt-text-leise);
    transition: transform 0.2s ease;
}

.lb-leiter__details[open] .lb-leiter__auf { transform: rotate(180deg); }