/* ============================================================================
   CLASSEMENT GAME HUB — FEUILLE DE STYLE AUTONOME (26/10/2026)
   ----------------------------------------------------------------------------
   Compagnon de leaderboard.php. Ce fichier ne suppose RIEN de style.css hormis
   les variables de :root (couleurs, rayons, easings, --font-sans). Il est
   chargé APRÈS style.css et n'écrase aucun sélecteur de la coque : la largeur
   du conteneur (1180 px) et la nav bureau restent définies dans style.css.

   LANGAGE VISUEL repris de home_tiles.css :
     fond nuit #0b1020 · surfaces #12182c · verre rgba(255,255,255,.055)
     bordure rgba(255,255,255,.10) · accent #6366f1 · rayons 16-24 px
     Inter · courbes cubic-bezier(.23,1,.32,1) · titres à tracking négatif
     sur-titres en capitales espacées (.14em)

   IDENTITÉ PAR JEU : chaque carte de jeu porte une couleur (dégradé radial),
   comme .gh-tile. Deux façons de la fournir, dans cet ordre de priorité :
     1. style="--lb-accent-rgb: 52, 211, 153" sur l'élément (triplet R,G,B)
     2. attribut data-game / data-mode (palette ci-dessous, §2)

   SOMMAIRE
     1. Racine et variables locales
     2. Palette par jeu et par catégorie
     3. En-tête (titre, sous-titre)
     4. KPI
     5. Pastilles de catégorie
     6. Rail des jeux
     7. Panneaux
     8. Podium
     9. Records
    10. Tableau (bureau) et cartes-lignes (mobile)
    11. Historique des parties
    12. États : squelette, vide, chargement, erreur
    13. Modale de fiche joueur
    14. Écran moyen (>= 700 px)
    15. Écran large (>= 1000 px)
    16. Préférences système
   ========================================================================== */

/* ============================================================================
   1. RACINE ET VARIABLES LOCALES
   ========================================================================== */

.lb-page {
    /* Couleur d'identité : triplet, surchargeable par jeu (voir §2) */
    --lb-accent-rgb: 99, 102, 241;
    --lb-accent: rgb(var(--lb-accent-rgb));
    --lb-accent-soft: rgba(var(--lb-accent-rgb), 0.16);
    --lb-accent-line: rgba(var(--lb-accent-rgb), 0.42);

    /* Matières */
    --lb-surface: var(--bg-surface, #12182c);
    --lb-surface-2: var(--bg-elevated, #1a2138);
    --lb-glass: rgba(255, 255, 255, 0.055);
    --lb-glass-strong: rgba(255, 255, 255, 0.085);
    --lb-line: rgba(255, 255, 255, 0.10);
    --lb-line-soft: rgba(255, 255, 255, 0.07);

    /* Textes */
    --lb-text: var(--text-color, #f5f6fa);
    --lb-text-2: var(--text-secondary, rgba(245, 246, 250, 0.72));
    --lb-text-3: var(--text-muted, rgba(245, 246, 250, 0.55));

    /* Mouvement : jamais de transition globale, jamais d'accélération */
    --lb-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --lb-ease-io: cubic-bezier(0.77, 0, 0.175, 1);

    /* Géométrie */
    --lb-radius: 20px;
    --lb-radius-sm: 14px;
    --lb-tap: 40px;
    --lb-gap: 14px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    padding-bottom: 32px;

    color: var(--lb-text);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
}

/* Les nombres restent alignés dans toutes les colonnes chiffrées */
.lb-kpi-value,
.lb-step-value,
.lb-record-value,
.lb-value,
.lb-pos,
.lb-hist-count,
.lb-hist-date,
.lb-game-meta {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Focus visible unique, cohérent avec l'accent courant */
.lb-page a:focus-visible,
.lb-page button:focus-visible,
.lb-page [tabindex]:focus-visible,
.lb-cat:focus-visible,
.lb-game:focus-visible,
.lb-retry:focus-visible,
.lb-modal-close:focus-visible {
    outline: 2px solid rgba(var(--lb-accent-rgb), 0.9);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Champs de recherche éventuels dans l'en-tête ou un panneau */
.lb-page input[type='search'],
.lb-page input[type='text'],
.lb-search {
    min-height: var(--lb-tap);
    padding: 0 14px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--lb-line);
    background: var(--lb-glass);
    color: var(--lb-text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 180ms var(--lb-ease), background 180ms var(--lb-ease);
}

.lb-page input::placeholder {
    color: var(--lb-text-3);
}

.lb-page input[type='search']:focus,
.lb-page input[type='text']:focus {
    border-color: var(--lb-accent-line);
    background: var(--lb-glass-strong);
    outline: none;
}

/* Images d'avatar : le conteneur porte le cadrage, l'image remplit */
.lb-avatar img,
.lb-step-avatar img,
.lb-record-who img,
.lb-hist-winner img,
.lb-game-champion img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ============================================================================
   2. PALETTE PAR JEU ET PAR CATÉGORIE
   ----------------------------------------------------------------------------
   Reprise exacte des accents de index.php (tuiles d'accueil) pour que le
   classement d'un jeu ait la même couleur que sa tuile. L'attribut peut être
   data-game (convention de index.php) ou data-mode (identifiant d'API).
   ========================================================================== */

.lb-page[data-game='yams'],
.lb-page [data-game='yams'],
.lb-page[data-mode='yams'],
.lb-page [data-mode='yams'] {
    --lb-accent-rgb: 99, 102, 241;
}

.lb-page[data-game='yahtzee'],
.lb-page [data-game='yahtzee'],
.lb-page[data-mode='yahtzee'],
.lb-page [data-mode='yahtzee'] {
    --lb-accent-rgb: 139, 92, 246;
}

.lb-page[data-game='president'],
.lb-page [data-game='president'],
.lb-page[data-mode='president'],
.lb-page [data-mode='president'] {
    --lb-accent-rgb: 99, 102, 241;
}

.lb-page[data-game='traitres'],
.lb-page [data-game='traitres'],
.lb-page[data-mode='traitres'],
.lb-page [data-mode='traitres'] {
    --lb-accent-rgb: 34, 211, 238;
}

.lb-page[data-game='palace'],
.lb-page [data-game='palace'],
.lb-page[data-mode='palace'],
.lb-page [data-mode='palace'] {
    --lb-accent-rgb: 168, 85, 247;
}

.lb-page[data-game='shock'],
.lb-page [data-game='shock'],
.lb-page[data-mode='shock'],
.lb-page [data-mode='shock'] {
    --lb-accent-rgb: 245, 158, 11;
}

.lb-page[data-game='papayoo'],
.lb-page [data-game='papayoo'],
.lb-page[data-mode='papayoo'],
.lb-page [data-mode='papayoo'] {
    --lb-accent-rgb: 52, 211, 153;
}

.lb-page[data-game='sixnimmt'],
.lb-page [data-game='sixnimmt'],
.lb-page[data-mode='sixnimmt'],
.lb-page [data-mode='sixnimmt'] {
    --lb-accent-rgb: 239, 68, 68;
}

/* ============================================================================
   3. EN-TÊTE
   ========================================================================== */

.lb-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 20px;
    min-width: 0;
    padding: 6px 2px 4px;
    isolation: isolate;
}

/* Halo discret : rattache l'en-tête à la couleur du jeu sélectionné */
.lb-head::before {
    content: '';
    position: absolute;
    inset: -34px 0 auto 0;
    height: 160px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 100% at 22% 0%,
            rgba(var(--lb-accent-rgb), 0.20) 0%,
            rgba(var(--lb-accent-rgb), 0.05) 48%,
            transparent 78%);
    opacity: 0.9;
}

.lb-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-display, var(--font-sans, 'Inter', sans-serif));
    font-size: clamp(27px, 7.4vw, 38px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    text-wrap: balance;
}

.lb-subtitle {
    flex: 1 1 100%;
    margin: 0;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--lb-text-2);
}

/* Sur-titre facultatif : premier enfant texte court de l'en-tête */
.lb-head > small,
.lb-head > .lb-eyebrow {
    flex: 1 1 100%;
    order: -1;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--lb-accent-rgb));
}

/* ============================================================================
   4. KPI
   ========================================================================== */

.lb-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.lb-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 88px;
    padding: 14px 14px 13px;
    border-radius: 18px;
    overflow: hidden;

    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.012) 52%,
            rgba(0, 0, 0, 0.14) 100%),
        var(--lb-surface);
    border: 1px solid var(--lb-line-soft);
    box-shadow:
        0 16px 34px -26px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Filet d'accent en haut : signe la couleur du jeu sans peser */
.lb-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(var(--lb-accent-rgb), 0.75),
            rgba(var(--lb-accent-rgb), 0));
}

.lb-kpi-value {
    font-size: clamp(23px, 6.4vw, 28px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
}

.lb-kpi-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    line-height: 1.4;
}

/* ============================================================================
   5. PASTILLES DE CATÉGORIE
   ========================================================================== */

.lb-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lb-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--lb-tap);
    padding: 0 15px;
    border-radius: var(--radius-pill, 999px);

    background: var(--lb-glass);
    border: 1px solid var(--lb-line);
    color: var(--lb-text-2);

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background 180ms var(--lb-ease),
        border-color 180ms var(--lb-ease),
        color 180ms var(--lb-ease),
        transform 120ms var(--lb-ease);
}

.lb-cat svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    opacity: 0.8;
}

/* Point d'état : l'actif se lit sans couleur seule ni survol */
.lb-cat::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms var(--lb-ease), transform 160ms var(--lb-ease);
}

.lb-cat.is-active {
    background: var(--lb-accent-soft);
    border-color: var(--lb-accent-line);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.lb-cat.is-active::before {
    opacity: 1;
    transform: scale(1);
    background: rgb(var(--lb-accent-rgb));
    box-shadow: 0 0 8px rgba(var(--lb-accent-rgb), 0.7);
}

.lb-cat:active {
    transform: scale(0.97);
}

/* ============================================================================
   6. RAIL DES JEUX
   ----------------------------------------------------------------------------
   Mobile : bande horizontale à défilement libre avec accroche (scroll-snap).
   Les cartes dépassent volontairement du bord pour signaler qu'on peut faire
   défiler — la dernière carte ne doit pas être rognée par un padding trop sec.
   ========================================================================== */

.lb-games {
    display: flex;
    gap: 10px;
    min-width: 0;
    margin: 0 -2px;
    padding: 4px 2px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.lb-games::-webkit-scrollbar {
    height: 6px;
}

.lb-games::-webkit-scrollbar-track {
    background: transparent;
}

.lb-games::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.lb-game {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 11px;

    width: min(78vw, 268px);
    min-height: 84px;
    padding: 12px 14px;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;

    background:
        radial-gradient(120% 100% at 0% 0%,
            rgba(var(--lb-accent-rgb), 0.16) 0%,
            rgba(var(--lb-accent-rgb), 0.03) 46%,
            transparent 72%),
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.008) 58%,
            rgba(0, 0, 0, 0.12) 100%),
        var(--lb-surface);
    border: 1px solid var(--lb-line-soft);
    box-shadow:
        0 14px 30px -24px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);

    transition:
        transform 200ms var(--lb-ease),
        border-color 200ms var(--lb-ease),
        box-shadow 200ms var(--lb-ease),
        background 200ms var(--lb-ease);
}

.lb-game:active {
    transform: scale(0.988);
    transition-duration: 90ms;
}

/* Le jeu actif se lit par la couleur ET par un liseré plein, pas seulement
   par le survol (téléphone) ni par la seule teinte (daltonisme). */
.lb-game.is-active {
    border-color: var(--lb-accent-line);
    box-shadow:
        0 18px 38px -26px rgba(var(--lb-accent-rgb), 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(var(--lb-accent-rgb), 0.16);
    background:
        radial-gradient(120% 100% at 0% 0%,
            rgba(var(--lb-accent-rgb), 0.30) 0%,
            rgba(var(--lb-accent-rgb), 0.07) 50%,
            transparent 76%),
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.012) 58%,
            rgba(0, 0, 0, 0.10) 100%),
        var(--lb-surface);
}

.lb-game.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: rgb(var(--lb-accent-rgb));
    opacity: 0.85;
}

/* Icône : carré à dégradé radial, comme les vignettes de .gh-tile */
.lb-game-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    overflow: hidden;

    background:
        radial-gradient(130% 130% at 26% 18%,
            rgba(var(--lb-accent-rgb), 0.42) 0%,
            rgba(var(--lb-accent-rgb), 0.10) 58%,
            rgba(255, 255, 255, 0.02) 100%),
        rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 6px 16px -12px rgba(0, 0, 0, 0.9);

    font-size: 20px;
    line-height: 1;
}

.lb-game-icon img,
.lb-game-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lb-game-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    opacity: 0.9;
}

.lb-game-name {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-game-meta {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Champion du jeu : troisième ligne facultative, sous l'icône et le nom */
.lb-game-champion {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--lb-line-soft);

    font-size: 12px;
    font-weight: 600;
    color: var(--lb-text-2);
}

.lb-game-champion img,
.lb-game-champion .lb-avatar {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.lb-game-champion strong,
.lb-game-champion b {
    color: #fff;
    font-weight: 700;
}

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

/* La valeur du champion, si elle est rendue dans la même ligne */
.lb-game-champion .lb-value {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 800;
    color: rgb(var(--lb-accent-rgb));
}

/* ============================================================================
   7. PANNEAUX
   ========================================================================== */

.lb-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 16px 14px 14px;
    border-radius: var(--lb-radius);

    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.008) 56%,
            rgba(0, 0, 0, 0.10) 100%),
        var(--lb-surface);
    border: 1px solid var(--lb-line-soft);
    box-shadow:
        0 22px 48px -34px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lb-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    min-width: 0;
}

.lb-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    min-width: 0;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.3;
}

/* Petit trait d'accent : repère de section, identique aux section-header */
.lb-panel-title::before {
    content: '';
    width: 3px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 2px;
    background: rgb(var(--lb-accent-rgb));
    box-shadow: 0 0 10px rgba(var(--lb-accent-rgb), 0.55);
}

/* Contenu secondaire de l'en-tête de panneau (compteur, tri, lien) */
.lb-panel-head > span,
.lb-panel-head > small,
.lb-panel-head > a,
.lb-panel-head > button {
    font-size: 12px;
    font-weight: 600;
    color: var(--lb-text-3);
    text-decoration: none;
    white-space: nowrap;
}

.lb-panel-head > a,
.lb-panel-head > button {
    display: inline-flex;
    align-items: center;
    min-height: var(--lb-tap);
    padding: 0 4px;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    color: rgb(var(--lb-accent-rgb));
}

/* ============================================================================
   8. PODIUM
   ----------------------------------------------------------------------------
   Mobile : colonne, le vainqueur en premier (order:-1) — l'ordre du DOM peut
   rester 2e, 1er, 3e, l'affichage ne dépend pas de l'ordre de rendu.
   ========================================================================== */

.lb-podium {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lb-step {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 12px;
    min-width: 0;
    min-height: 76px;
    padding: 12px 14px;
    border-radius: 18px;
    overflow: hidden;

    background:
        radial-gradient(120% 120% at 0% 0%,
            rgba(var(--lb-accent-rgb), 0.12) 0%,
            rgba(var(--lb-accent-rgb), 0.02) 50%,
            transparent 74%),
        var(--lb-glass);
    border: 1px solid var(--lb-line-soft);
}

/* Le vainqueur passe en tête même si le DOM suit l'ordre 2e, 1er, 3e */
.lb-step.is-first {
    order: -1;
    padding: 16px 15px;
    background:
        radial-gradient(130% 120% at 8% 0%,
            rgba(251, 191, 36, 0.22) 0%,
            rgba(251, 191, 36, 0.05) 46%,
            transparent 76%),
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.012) 60%,
            rgba(0, 0, 0, 0.12) 100%),
        var(--lb-surface);
    border-color: rgba(251, 191, 36, 0.38);
    box-shadow:
        0 22px 44px -30px rgba(251, 191, 36, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Filet doré en haut de la marche du vainqueur */
.lb-step.is-first::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(251, 191, 36, 0),
            rgba(251, 191, 36, 0.9) 26%,
            rgba(251, 191, 36, 0.9) 74%,
            rgba(251, 191, 36, 0));
}

.lb-step-rank {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lb-line);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lb-text-2);
}

.lb-step.is-first .lb-step-rank {
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    border-color: rgba(251, 191, 36, 0.9);
    color: #2a1c02;
    box-shadow: 0 6px 16px -8px rgba(251, 191, 36, 0.9);
}

.lb-step-avatar {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;

    background: radial-gradient(120% 120% at 30% 20%,
            rgba(var(--lb-accent-rgb), 0.45),
            rgba(255, 255, 255, 0.05));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 8px 18px -12px rgba(0, 0, 0, 0.9);

    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
}

/* Variante quand la marche gagne : anneau doré et cadrage plus grand */
.lb-step.is-first .lb-step-avatar {
    width: 56px;
    height: 56px;
    box-shadow:
        inset 0 0 0 2px rgba(251, 191, 36, 0.85),
        0 10px 24px -14px rgba(251, 191, 36, 0.9);
}

.lb-step-name {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-step.is-first .lb-step-name {
    font-size: 17px;
    letter-spacing: -0.02em;
}

.lb-step-value {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--lb-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-step.is-first .lb-step-value {
    font-size: 15px;
    color: #fcd34d;
}

.lb-step-value small,
.lb-step-value span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lb-text-3);
}

/* Icône éventuelle (couronne SVG) de la marche gagnante */
.lb-step.is-first > svg,
.lb-step.is-first .lb-step-crown {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 18px;
    height: 18px;
    color: #fbbf24;
    opacity: 0.95;
    filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.5));
}

/* Écart de la 1re place : lu sans survol, la couleur seule ne suffit pas */
.lb-step.is-first .lb-step-name::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 7px;
    vertical-align: 2px;
    border-radius: 50%;
    background: #fbbf24;
}

/* ============================================================================
   9. RECORDS
   ========================================================================== */

.lb-records {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 9px;
    min-width: 0;
}

.lb-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    padding: 11px 12px 12px;
    border-radius: 14px;

    background: var(--lb-glass);
    border: 1px solid var(--lb-line-soft);
}

.lb-record-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    line-height: 1.35;
    /* Deux lignes maximum : les libellés traduits (FR/PT) sont plus longs
       que l'anglais, on ne coupe pas au milieu d'un mot. */
}

.lb-record-label svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: rgb(var(--lb-accent-rgb));
}

.lb-record-value {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
}

.lb-record-who {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lb-text-2);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-record-who img,
.lb-record-who .lb-avatar {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ============================================================================
   10. TABLEAU (BUREAU) ET CARTES-LIGNES (MOBILE)
   ----------------------------------------------------------------------------
   Le tableau reste un vrai <table> : sémantique et tri par colonne conservés.
   Sous 700 px il disparaît au profit de .lb-row-card, à condition que la page
   rende les deux listes (data-* ou aria-hidden gérés par le JS).
   ========================================================================== */

/* Enveloppe facultative : permet le défilement horizontal sans casser
   l'arrondi du panneau sur les écrans intermédiaires. */
.lb-table-wrap {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

.lb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    color: var(--lb-text);
}

.lb-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    background: rgba(18, 24, 44, 0.96);
    background-clip: padding-box;
    border-bottom: 1px solid var(--lb-line);
    text-align: left;
    vertical-align: bottom;

    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    white-space: nowrap;
}

.lb-table th.is-sortable {
    /* Hauteur de cible tactile : min-height est ignoré sur une cellule de
       tableau, on passe par height (comportement de hauteur minimale). */
    height: var(--lb-tap);
    padding-top: 12px;
    padding-bottom: 10px;
    cursor: pointer;
    user-select: none;
    color: var(--lb-text-2);
    transition: color 160ms var(--lb-ease), background 160ms var(--lb-ease);
}

/* Indicateur de tri : chevron dessiné en CSS, visible en permanence (état
   neutre estompé) — aucune information ne dépend du survol. */
.lb-table th.is-sortable::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    vertical-align: 1px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 1px;
    opacity: 0.32;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 180ms var(--lb-ease), opacity 180ms var(--lb-ease);
}

.lb-table th.is-sorted-asc,
.lb-table th.is-sorted-desc {
    color: rgb(var(--lb-accent-rgb));
}

.lb-table th.is-sorted-asc::after {
    opacity: 1;
    transform: rotate(-135deg) translateY(-1px);
}

.lb-table th.is-sorted-desc::after {
    opacity: 1;
    transform: rotate(45deg) translateY(-1px);
}

.lb-table tbody tr {
    transition: background 160ms var(--lb-ease);
}

.lb-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--lb-line-soft);
    vertical-align: middle;
}

.lb-table tbody tr:last-child td {
    border-bottom: 0;
}

.lb-table tbody tr:active {
    background: rgba(255, 255, 255, 0.045);
}

.lb-table tr.is-me {
    background: rgba(var(--lb-accent-rgb), 0.09);
}

.lb-table tr.is-me td:first-child {
    box-shadow: inset 3px 0 0 rgb(var(--lb-accent-rgb));
}

.lb-table tr.is-me .lb-name {
    color: #fff;
    font-weight: 800;
}

.lb-table tr.is-me .lb-badge {
    background: rgba(var(--lb-accent-rgb), 0.22);
    border-color: rgba(var(--lb-accent-rgb), 0.45);
    color: #fff;
}

/* Position */
.lb-pos {
    width: 42px;
    font-size: 13px;
    font-weight: 800;
    color: var(--lb-text-3);
    text-align: center;
}

.lb-table tbody tr:nth-child(1) .lb-pos {
    color: #fcd34d;
}

.lb-table tbody tr:nth-child(2) .lb-pos {
    color: #cbd5e1;
}

.lb-table tbody tr:nth-child(3) .lb-pos {
    color: #f0a875;
}

/* Joueur */
.lb-player-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.lb-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;

    background: radial-gradient(120% 120% at 30% 20%,
            rgba(var(--lb-accent-rgb), 0.40),
            rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    object-fit: cover;

    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    text-transform: uppercase;
}

.lb-name {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--lb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;

    background: rgba(var(--lb-accent-rgb), 0.14);
    border: 1px solid rgba(var(--lb-accent-rgb), 0.32);
    color: rgb(var(--lb-accent-rgb));

    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lb-badge.is-gold {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.42);
    color: #fcd34d;
}

.lb-badge.is-muted {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--lb-line);
    color: var(--lb-text-3);
}

/* Valeurs numériques : colonnes 3 à 6 alignées à droite, chiffres tabulaires */
.lb-value {
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #fff;
    white-space: nowrap;
}

.lb-table thead th:nth-child(n + 3),
.lb-table tbody td:nth-child(n + 3) {
    text-align: right;
}

.lb-table tbody td.lb-pos,
.lb-table tbody td.lb-player-cell {
    text-align: left;
}

/* Cellules secondaires (parties, victoires, taux) : plus discrètes que la
   valeur principale, qui reste le chiffre du classement. */
.lb-table tbody td:nth-child(3),
.lb-table tbody td:nth-child(4),
.lb-table tbody td:nth-child(5) {
    color: var(--lb-text-2);
    font-weight: 600;
}

/* --- 10a. Variante mobile : liste de cartes ----------------------------- */

.lb-row-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 11px;
    min-width: 0;
    min-height: 62px;
    padding: 12px 13px;
    border-radius: 16px;

    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0.008) 60%,
            rgba(0, 0, 0, 0.10) 100%),
        var(--lb-surface);
    border: 1px solid var(--lb-line-soft);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 170ms var(--lb-ease),
        border-color 170ms var(--lb-ease),
        transform 120ms var(--lb-ease);
}

.lb-row-card:active {
    transform: scale(0.994);
}

.lb-row-card .lb-pos {
    grid-column: 1;
    grid-row: 1;
    width: 30px;
    text-align: center;
    font-size: 12.5px;
}

.lb-row-card .lb-player-cell {
    grid-column: 2;
    grid-row: 1;
}

.lb-row-card .lb-value {
    grid-column: 3;
    grid-row: 1;
    font-size: 16px;
}

.lb-row-card.is-me {
    background: rgba(var(--lb-accent-rgb), 0.10);
    border-color: rgba(var(--lb-accent-rgb), 0.36);
    box-shadow: inset 3px 0 0 rgb(var(--lb-accent-rgb));
}

/* Les mesures secondaires occupent toute la largeur, sous l'identité */
.lb-row-card > :not(.lb-pos):not(.lb-player-cell):not(.lb-value):not(.lb-badge):not(.lb-avatar),
.lb-row-card .lb-row-stats,
.lb-row-card dl,
.lb-row-card small {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 4px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--lb-line-soft);

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lb-text-3);
}

.lb-row-card dl > div {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
}

.lb-row-card dt {
    margin: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lb-text-3);
}

.lb-row-card dd {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--lb-text-2);
}

/* Si le rendu fournit des libellés de colonne, ils s'affichent en clair :
   aucune information ne dépend de la position ou du survol. */
.lb-row-card [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    line-height: 1.6;
}

/* Sur mobile, le tableau est masqué dès que les cartes sont présentes */
@media (max-width: 699px) {
    .lb-panel:has(.lb-row-card) .lb-table,
    .lb-panel:has(.lb-row-card) .lb-table-wrap {
        display: none;
    }

    /* Repli sans cartes : le tableau se resserre et laisse défiler plutôt
       que de déborder de la page. */
    .lb-table {
        font-size: 12.5px;
    }

    .lb-table thead th,
    .lb-table tbody td {
        padding-left: 6px;
        padding-right: 6px;
    }

    .lb-table tbody tr {
        min-height: 48px;
    }

    .lb-avatar {
        width: 26px;
        height: 26px;
    }

    .lb-name {
        font-size: 12.5px;
    }
}

/* ============================================================================
   11. HISTORIQUE DES PARTIES
   ========================================================================== */

.lb-history {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lb-hist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 10px;
    min-width: 0;
    min-height: 48px;
    padding: 9px 11px;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.032);
    border: 1px solid var(--lb-line-soft);
    color: inherit;
    text-decoration: none;
    transition: background 160ms var(--lb-ease), border-color 160ms var(--lb-ease);
}

.lb-hist-row:active {
    background: rgba(255, 255, 255, 0.06);
}

.lb-hist-date {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-hist-winner {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-hist-winner img,
.lb-hist-winner .lb-avatar {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.lb-hist-winner svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: #fbbf24;
}

.lb-hist-count {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    justify-self: end;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;

    background: var(--lb-glass);
    border: 1px solid var(--lb-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--lb-text-2);
    white-space: nowrap;
}

.lb-hist-count::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(var(--lb-accent-rgb));
    opacity: 0.85;
}

/* ============================================================================
   12. ÉTATS : SQUELETTE, VIDE, CHARGEMENT, ERREUR
   ========================================================================== */

/* Squelette : bloc neutre qui respire, jamais un spinner plein écran. */
.lb-skeleton {
    position: relative;
    display: block;
    min-height: 44px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.lb-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            transparent 20%,
            rgba(255, 255, 255, 0.10) 42%,
            rgba(255, 255, 255, 0.02) 58%,
            transparent 80%);
    transform: translateX(-100%);
    animation: lbShimmer 1.5s var(--lb-ease-io) infinite;
}

/* Variantes de forme, utiles au balisage de chargement du tableau */
.lb-skeleton.is-kpi {
    min-height: 88px;
    border-radius: 18px;
}

.lb-skeleton.is-row {
    min-height: 52px;
    border-radius: 14px;
}

.lb-skeleton.is-line {
    min-height: 14px;
    width: 60%;
    border-radius: 6px;
}

.lb-skeleton.is-avatar {
    width: 40px;
    height: 40px;
    min-height: 0;
    border-radius: 50%;
}

@keyframes lbShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Bloc squelette complet passé en enfant direct du panneau */
.lb-panel > .lb-skeleton:first-child {
    margin-top: 2px;
}

/* Étiquette de chargement textuelle */
.lb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-text-3);
}

.lb-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: rgb(var(--lb-accent-rgb));
    animation: lbSpin 0.9s linear infinite;
}

@keyframes lbSpin {
    to {
        transform: rotate(1turn);
    }
}

/* État vide : une invitation, pas une erreur */
.lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 148px;
    padding: 26px 20px;
    text-align: center;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.022);
    color: var(--lb-text-2);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

.lb-empty strong,
.lb-empty b {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lb-empty svg {
    width: 26px;
    height: 26px;
    color: var(--lb-text-3);
    opacity: 0.75;
}

.lb-empty p {
    margin: 0;
    max-width: 44ch;
}

/* Appel à jouer dans l'état vide */
.lb-empty a,
.lb-empty button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--lb-tap);
    margin-top: 4px;
    padding: 0 18px;
    border-radius: 999px;

    background: var(--lb-accent-soft);
    border: 1px solid var(--lb-accent-line);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 170ms var(--lb-ease), transform 120ms var(--lb-ease);
}

.lb-empty a:active,
.lb-empty button:active {
    transform: scale(0.97);
}

/* Erreur : message explicite, teinte rouge, jamais une page blanche */
.lb-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 150px;
    padding: 26px 20px;
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(239, 68, 68, 0.34);
    background:
        radial-gradient(120% 120% at 50% 0%,
            rgba(239, 68, 68, 0.14) 0%,
            rgba(239, 68, 68, 0.03) 60%,
            transparent 100%),
        rgba(239, 68, 68, 0.05);
    color: #fecaca;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}

.lb-error svg {
    width: 24px;
    height: 24px;
    color: #f87171;
}

.lb-error p {
    margin: 0;
    max-width: 44ch;
}

.lb-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    margin-top: 2px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 170ms var(--lb-ease), border-color 170ms var(--lb-ease), transform 120ms var(--lb-ease);
}

.lb-retry svg {
    width: 15px;
    height: 15px;
    opacity: 0.85;
}

.lb-retry:active {
    transform: scale(0.97);
}

/* ============================================================================
   13. MODALE DE FICHE JOUEUR
   ----------------------------------------------------------------------------
   Peut être rendue et animée par window.SiteDialog : les règles ci-dessous ne
   s'appliquent qu'aux éléments porteurs des classes lb-modal, elles restent
   donc sans effet si la page délègue tout au composant du site.
   ========================================================================== */

.lb-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(6, 9, 18, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    overscroll-behavior: contain;
}

.lb-modal[hidden],
.lb-modal.is-hidden,
.lb-modal[aria-hidden='true']:not(.is-open):not([data-open]) {
    display: none;
}

.lb-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;

    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.012) 52%,
            rgba(0, 0, 0, 0.16) 100%),
        var(--lb-surface);
    border: 1px solid var(--lb-line);
    border-bottom: 0;
    box-shadow:
        0 -24px 60px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    animation: lbSheetIn 240ms var(--lb-ease) both;
}

@keyframes lbSheetIn {
    from {
        transform: translateY(18px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.lb-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lb-tap);
    height: var(--lb-tap);
    flex: 0 0 auto;
    padding: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--lb-line);
    color: var(--lb-text-2);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 160ms var(--lb-ease), border-color 160ms var(--lb-ease), transform 110ms var(--lb-ease);
}

.lb-modal-close svg {
    width: 16px;
    height: 16px;
}

.lb-modal-close:active {
    transform: scale(0.94);
}

.lb-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-right: 48px;
}

.lb-modal-head .lb-avatar,
.lb-modal-head > img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px rgba(var(--lb-accent-rgb), 0.55),
        0 10px 24px -16px rgba(0, 0, 0, 0.9);
}

.lb-modal-head h2,
.lb-modal-head h3,
.lb-modal-head .lb-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #fff;
    overflow-wrap: anywhere;
}

.lb-modal-head p,
.lb-modal-head .lb-subtitle {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lb-text-3);
}

.lb-modal-head .lb-modal-close {
    position: static;
    margin-left: auto;
}

/* Bandeau de statistiques : 2 colonnes sur téléphone, 4 sur large */
.lb-modal-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.lb-modal-stats > * {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 13px;
    background: var(--lb-glass);
    border: 1px solid var(--lb-line-soft);
}

.lb-modal-stats .lb-kpi-value,
.lb-modal-stats dd,
.lb-modal-stats strong,
.lb-modal-stats b {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.15;
}

.lb-modal-stats .lb-kpi-label,
.lb-modal-stats dt,
.lb-modal-stats span,
.lb-modal-stats small {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-text-3);
    line-height: 1.35;
}

.lb-modal-stats dl,
.lb-modal-stats div {
    margin: 0;
}

/* Détail par jeu : lignes compactes, valeurs alignées à droite */
.lb-modal-pergame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--lb-line-soft);
    background: rgba(255, 255, 255, 0.022);
}

.lb-modal-pergame > * {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
    min-height: 46px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--lb-line-soft);
    font-size: 13px;
    color: var(--lb-text-2);
}

.lb-modal-pergame > *:last-child {
    border-bottom: 0;
}

.lb-modal-pergame .lb-value {
    display: inline-block;
    text-align: right;
    font-size: 14px;
}

.lb-modal-pergame .lb-game-icon {
    grid-row: auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 15px;
}

.lb-modal-pergame .lb-name {
    font-size: 13px;
}

.lb-modal-pergame small,
.lb-modal-pergame .lb-game-meta {
    grid-column: 1 / -1;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-text-3);
}

/* Pied de modale : action secondaire éventuelle */
.lb-modal-card > .lb-retry,
.lb-modal-card > button:not(.lb-modal-close) {
    align-self: stretch;
    justify-content: center;
}

/* ============================================================================
   14. ÉCRAN MOYEN (>= 700 px)
   ----------------------------------------------------------------------------
   Le tableau redevient un tableau, le podium une grille de trois marches, le
   rail des jeux une grille fixe (plus de défilement horizontal).
   ========================================================================== */

@media (min-width: 700px) {
    .lb-page {
        gap: 18px;
        font-size: 15px;
    }

    .lb-head {
        padding-bottom: 2px;
    }

    .lb-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .lb-kpi {
        min-height: 96px;
        padding: 16px;
    }

    /* Rail -> grille : 3 colonnes, puis 4 sur très large */
    .lb-games {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .lb-game {
        width: auto;
        min-height: 88px;
    }

    .lb-panel {
        gap: 16px;
        padding: 20px 20px 18px;
        border-radius: 24px;
    }

    .lb-panel-title {
        font-size: 11.5px;
        letter-spacing: 0.16em;
    }

    /* Podium : trois marches côte à côte, vainqueur au centre.
       On reste en flex avec un `order` : quel que soit l'ordre du DOM
       (2-1-3 comme 1-2-3), le vainqueur tombe au milieu et les deux autres
       se placent dans leur ordre d'apparition. */
    .lb-podium {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
    }

    .lb-step {
        flex: 1 1 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        justify-items: center;
        align-content: start;
        text-align: center;
        gap: 4px;
        min-height: 158px;
        padding: 16px 12px;
        order: 0;
    }

    /* Bureau : podium sur une rangée. Le DOM est déjà dans l'ordre 2e, 1er, 3e,
       donc le vainqueur tombe naturellement au centre — `order` doit rester
       neutre. (Auparavant `order: 1` renvoyait la marche gagnante à droite.) */
    .lb-step.is-first {
        order: 0;
    }

    /* Deux marches seulement : il n'y a pas de centre. Le vainqueur passe
       alors en tête, à gauche. */
    .lb-podium:has(> .lb-step:nth-child(2):last-child) .lb-step.is-first {
        order: -1;
    }

    .lb-step .lb-step-rank {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        height: auto;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--lb-text-3);
    }

    .lb-step .lb-step-avatar {
        grid-column: 1;
        grid-row: 2;
        width: 52px;
        height: 52px;
        margin-top: 2px;
    }

    .lb-step .lb-step-name {
        grid-column: 1;
        grid-row: 3;
        max-width: 100%;
        font-size: 14.5px;
    }

    .lb-step .lb-step-value {
        grid-column: 1;
        grid-row: 4;
        font-size: 13px;
    }

    .lb-podium > .lb-step.is-first {
        min-height: 186px;
        border-color: rgba(251, 191, 36, 0.40);
    }

    .lb-podium > .lb-step.is-first .lb-step-avatar {
        width: 70px;
        height: 70px;
    }

    .lb-podium > .lb-step.is-first .lb-step-name {
        font-size: 16.5px;
    }

    .lb-podium > .lb-step.is-first .lb-step-value {
        font-size: 15px;
    }

    .lb-records {
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
        gap: 10px;
    }

    .lb-record {
        padding: 12px 14px 13px;
        border-radius: 16px;
    }

    .lb-record-value {
        font-size: 23px;
    }

    /* Tableau : respire davantage */
    .lb-table {
        font-size: 14px;
    }

    .lb-table thead th {
        padding: 10px 12px;
        font-size: 10px;
    }

    .lb-table tbody td {
        padding: 11px 12px;
    }

    .lb-table tbody tr {
        min-height: 52px;
    }

    .lb-avatar {
        width: 32px;
        height: 32px;
    }

    .lb-name {
        font-size: 14px;
    }

    .lb-pos {
        width: 52px;
        font-size: 13.5px;
    }

    .lb-value {
        font-size: 15px;
    }

    /* Les cartes-lignes cèdent la place au tableau — mais seulement quand un
       tableau est réellement rendu : si la page ne produit que des cartes,
       elles restent visibles plutôt que de laisser un panneau vide. */
    .lb-panel:has(.lb-table) .lb-row-card {
        display: none;
    }

    .lb-hist-row {
        grid-template-columns: minmax(110px, 132px) minmax(0, 1fr) auto;
        grid-template-rows: auto;
        gap: 12px;
        min-height: 46px;
        padding: 8px 12px;
    }

    .lb-hist-date {
        grid-column: 1;
        grid-row: 1;
        font-size: 11px;
    }

    .lb-hist-winner {
        grid-column: 2;
        grid-row: 1;
        font-size: 13.5px;
    }

    .lb-hist-count {
        grid-column: 3;
        grid-row: 1;
    }

    .lb-modal {
        align-items: center;
        padding: 24px;
    }

    .lb-modal-card {
        border-radius: 24px;
        border-bottom: 1px solid var(--lb-line);
        padding: 24px 24px 22px;
        max-height: 86vh;
        animation-name: lbModalIn;
    }

    .lb-modal-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@keyframes lbModalIn {
    from {
        transform: translateY(10px) scale(0.985);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ============================================================================
   15. ÉCRAN LARGE (>= 1000 px)
   ----------------------------------------------------------------------------
   Mise en page large. Le conteneur (1180 px) est géré par style.css : ici on
   ne règle que la composition interne.
   ========================================================================== */

@media (min-width: 1000px) {
    .lb-page {
        gap: 20px;
        padding-bottom: 44px;
    }

    .lb-head {
        align-items: flex-end;
        gap: 8px 24px;
        padding-top: 4px;
    }

    .lb-title {
        font-size: clamp(32px, 3.2vw, 42px);
        letter-spacing: -0.032em;
    }

    .lb-subtitle {
        flex: 0 1 auto;
        align-self: flex-end;
        max-width: 48ch;
        font-size: 14.5px;
        text-align: right;
        color: var(--lb-text-3);
    }

    .lb-kpis {
        gap: 14px;
    }

    .lb-kpi {
        min-height: 104px;
        padding: 18px 18px 16px;
        border-radius: 20px;
    }

    .lb-kpi-value {
        font-size: 30px;
    }

    .lb-kpi-label {
        font-size: 10.5px;
    }

    .lb-cat {
        min-height: 42px;
        padding: 0 18px;
        font-size: 13.5px;
    }

    .lb-games {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .lb-game {
        min-height: 94px;
        padding: 14px 16px;
        border-radius: 20px;
    }

    .lb-game-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 22px;
    }

    .lb-game-name {
        font-size: 15.5px;
    }

    .lb-panel {
        gap: 18px;
        padding: 24px 24px 20px;
    }

    /* Podium large : la marche gagnante domine franchement */
    .lb-podium {
        gap: 14px;
        align-items: end;
    }

    .lb-step {
        min-height: 178px;
        padding: 18px 14px;
        border-radius: 20px;
    }

    .lb-step .lb-step-avatar,
    .lb-step .lb-step-rank ~ .lb-step-avatar {
        width: 60px;
        height: 60px;
    }

    .lb-podium > .lb-step.is-first {
        min-height: 214px;
        padding: 22px 16px;
    }

    .lb-podium > .lb-step.is-first .lb-step-avatar {
        width: 80px;
        height: 80px;
    }

    .lb-podium > .lb-step.is-first .lb-step-name {
        font-size: 18px;
    }

    .lb-podium > .lb-step.is-first .lb-step-value {
        font-size: 17px;
    }

    .lb-records {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 12px;
    }

    .lb-record-value {
        font-size: 25px;
    }

    .lb-table {
        font-size: 14.5px;
    }

    .lb-table thead th {
        padding: 11px 16px;
        font-size: 10.5px;
    }

    .lb-table tbody td {
        padding: 12px 16px;
    }

    .lb-table tbody tr {
        min-height: 56px;
    }

    .lb-avatar {
        width: 34px;
        height: 34px;
        font-size: 12.5px;
    }

    .lb-name {
        font-size: 14.5px;
    }

    .lb-value {
        font-size: 16px;
    }

    .lb-history {
        gap: 8px;
    }

    .lb-hist-row {
        min-height: 50px;
        padding: 10px 16px;
        border-radius: 14px;
    }

    .lb-modal-card {
        padding: 26px 26px 24px;
        gap: 16px;
    }

    .lb-modal-head h2,
    .lb-modal-head h3,
    .lb-modal-head .lb-title {
        font-size: 23px;
    }

    .lb-modal-stats .lb-kpi-value,
    .lb-modal-stats dd,
    .lb-modal-stats strong,
    .lb-modal-stats b {
        font-size: 21px;
    }

    .lb-modal-pergame > * {
        min-height: 50px;
        padding: 10px 16px;
    }
}

/* Très large : le rail peut porter les huit jeux sur deux rangées lisibles */
@media (min-width: 1240px) {
    .lb-games {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .lb-game {
        min-height: 100px;
    }
}

/* ============================================================================
   16. PRÉFÉRENCES SYSTÈME
   ========================================================================== */

/* Transparence réduite : le verre devient une surface pleine, lisible sans
   flou (le flou est la première chose que ce réglage doit supprimer). */
@media (prefers-reduced-transparency: reduce) {
    .lb-page {
        --lb-glass: #1a2138;
        --lb-glass-strong: #222b46;
        --lb-line: rgba(255, 255, 255, 0.16);
        --lb-line-soft: rgba(255, 255, 255, 0.12);
    }

    .lb-kpi,
    .lb-panel,
    .lb-game,
    .lb-step.is-first,
    .lb-row-card,
    .lb-modal-card {
        background: var(--lb-surface);
    }

    .lb-game.is-active {
        background: #182041;
    }

    .lb-cat.is-active {
        background: #242c4a;
    }

    .lb-table thead th {
        background: var(--lb-surface);
    }

    .lb-modal {
        background: rgba(6, 9, 18, 0.94);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Navigateurs sans backdrop-filter : la modale reste lisible sans flou */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .lb-modal {
        background: rgba(6, 9, 18, 0.90);
    }
}

/* Mouvement réduit : plus d'animations décoratives, transitions quasi nulles,
   aucun déplacement au survol. Les changements d'état restent instantanés mais
   visibles (couleur, bordure). */
@media (prefers-reduced-motion: reduce) {
    .lb-page *,
    .lb-page *::before,
    .lb-page *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    .lb-skeleton::after,
    .lb-loading::before {
        animation: none !important;
    }

    .lb-skeleton::after {
        background: rgba(255, 255, 255, 0.05);
        transform: none;
    }

    .lb-loading::before {
        border-top-color: rgba(255, 255, 255, 0.35);
    }

    .lb-cat:active,
    .lb-game:active,
    .lb-row-card:active,
    .lb-retry:active,
    .lb-modal-close:active,
    .lb-empty a:active,
    .lb-empty button:active {
        transform: none;
    }

    .lb-games {
        scroll-behavior: auto;
    }
}

/* Survol : uniquement pointeur fin, jamais sur écran tactile. Aucune
   information n'est portée par ces règles — elles ne font que confirmer. */
@media (hover: hover) and (pointer: fine) {
    .lb-cat:hover {
        background: var(--lb-glass-strong);
        border-color: rgba(255, 255, 255, 0.18);
        color: var(--lb-text);
    }

    .lb-cat.is-active:hover {
        background: rgba(var(--lb-accent-rgb), 0.24);
        border-color: rgba(var(--lb-accent-rgb), 0.55);
        color: #fff;
    }

    .lb-game:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--lb-accent-rgb), 0.36);
        box-shadow:
            0 20px 40px -26px rgba(0, 0, 0, 0.95),
            0 0 0 1px rgba(var(--lb-accent-rgb), 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .lb-game.is-active:hover {
        transform: translateY(-2px);
        border-color: var(--lb-accent-line);
    }

    .lb-table th.is-sortable:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

    .lb-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    .lb-table tr.is-me:hover {
        background: rgba(var(--lb-accent-rgb), 0.14);
    }

    .lb-row-card:hover {
        border-color: rgba(var(--lb-accent-rgb), 0.32);
        background: rgba(255, 255, 255, 0.06);
    }

    .lb-hist-row:hover {
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(255, 255, 255, 0.14);
    }

    .lb-retry:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.32);
    }

    .lb-modal-close:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.26);
        color: #fff;
    }

    .lb-empty a:hover,
    .lb-empty button:hover {
        background: rgba(var(--lb-accent-rgb), 0.26);
    }
}

/* ============================================================================
   GARDE-FOUS D'AFFICHAGE (ajout coordinateur, 26/10/2026)
   ========================================================================== */

/* `display: grid` sur .lb-panel écrase l'attribut `hidden` (et gagne contre
   lui : même spécificité, mais `hidden` vient de la feuille du navigateur).
   Le JS crée et détruit les panneaux, mais `hidden` reste utilisé sur la
   modale et peut l'être ailleurs : on rétablit le comportement natif. */
.lb-panel[hidden],
.lb-modal[hidden],
.lb-page [hidden] {
    display: none;
}

/* ============================================================================
   DENSITÉ MOBILE (ajout coordinateur, 26/10/2026)
   ----------------------------------------------------------------------------
   Sur un téléphone de 390×844, les quatre cartes de KPI occupaient 186 px et
   repoussaient le podium sous la ligne de flottaison. On resserre les cartes
   pour rendre le classement visible plus tôt, sans réduire la taille du texte
   sous le seuil de confort (valeur 22 px, libellé 9 px en capitales).
   ========================================================================== */
@media (max-width: 699px) {
    .lb-kpis {
        gap: 8px;
    }

    .lb-kpi {
        min-height: 66px;
        padding: 9px 12px 8px;
        gap: 1px;
        border-radius: 14px;
    }

    .lb-kpi-value {
        font-size: 22px;
        line-height: 1.05;
    }

    .lb-kpi-label {
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    /* Le rail des jeux reste compact : il sert à choisir, pas à lire. */
    .lb-games {
        gap: 8px;
    }
}