/* Classement PUBLIC (shortcode klugle_highscores) : seule page visiteur, à la charte KLUGLE de l'application (klugle-app/src/theme.css) — fond encre, vert fluo, Montserrat / Inter. */
/* Tout est préfixé .kph : le bloc porte son fond et ses couleurs, il ne dépend ni du thème du site ni du canvas qui l'entoure. */
/* Date: 2026-10-13 ; Version: 3.2.1 ; GSt / Claude ; Retour GSt : haut du panneau des aventures aligné sur le haut du panneau du classement. */
/* Date: 2026-10-13 ; Version: 3.2.0 ; GSt / Claude ; Mise en page 16:9 (demande GSt) : grille à trois colonnes, panneau vertical des aventures et logo « sticky » de part et d'autre du tableau, cartes d'explication retirées, hauteurs resserrées, tableau calé sur la hauteur d'écran ; écran étroit : logo en haut, aventures en bandeau collant. */
/* Date: 2026-10-12 ; Version: 3.1.0 ; GSt / Claude ; Retour GSt : ascenseurs en vert fluo (page et tableau) au lieu de ceux du navigateur ; bloc élargi de 1000 à 1200 px. */
/* Date: 2026-10-12 ; Version: 3.0.0 ; GSt / Claude ; Refonte (demande GSt) : charte Klugle de l'app à la place de la charte claire ; en-tête de marque, cartes d'explication, médaillons d'aventure, tableau sombre, légende. Les couleurs du tableau quittent le JavaScript pour des classes d'ici. */
/* Date: 2026-09-25 ; Version: 2.0.1 ; Claude ; Nettoyage d'entete : format canonique, historique anterieur au 2026-09-14 retire (voir Git) */
/* Historique anterieur au 2026-09-14 : voir l'historique Git */

.kph {
    /* Jetons repris de theme.css (charte 2026) */
    --kph-fluo: #C6FF00;
    --kph-encre: #0D0F0E;
    --kph-vert: #009513;
    --kph-on-dark: #F4F6F2;
    --kph-on-dark-soft: rgba(244, 246, 242, 0.62);
    --kph-line: rgba(198, 255, 0, 0.35);
    --kph-font-title: 'Montserrat', system-ui, "Segoe UI", Roboto, sans-serif;
    --kph-font-body: 'Inter', system-ui, "Segoe UI", Roboto, sans-serif;

    width: 100%; margin: 0; box-sizing: border-box; display: flex; justify-content: center;
    padding: 20px 20px 16px;
    /* Fond de page de l'app (--pjvd-page-bg) : encre + halos fluo */
    background:
        radial-gradient(135% 75% at 50% -10%, rgba(198, 255, 0, 0.13) 0%, rgba(198, 255, 0, 0) 55%),
        radial-gradient(120% 80% at 8% 108%, rgba(198, 255, 0, 0.09) 0%, rgba(198, 255, 0, 0) 55%),
        radial-gradient(120% 80% at 100% 100%, rgba(0, 149, 19, 0.10) 0%, rgba(0, 149, 19, 0) 50%),
        var(--kph-encre);
    color: var(--kph-on-dark);
    font-family: var(--kph-font-body);
    line-height: 1.5;
}
.kph *, .kph *::before, .kph *::after { box-sizing: border-box; }
/* Trois colonnes (écran 16:9) : aventures à gauche, titre + tableau au centre, logo à droite. Les deux
   côtés s'étendent sur toute la hauteur de la grille et leur contenu est « sticky » : il reste en vue. */
.kph .klugle-dashboard {
    width: 100%; max-width: 1640px; text-transform: none !important;
    display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; column-gap: 24px;
    /* Le panneau des aventures démarre à la ligne du tableau : son bord haut s'aligne sur celui du panneau du classement. */
    grid-template-areas: ". head logo" "adv board logo" "adv foot logo"; align-content: start;
}
.kph .kph-rail-adv { grid-area: adv; }
.kph .kph-hero { grid-area: head; }
.kph .kph-rail-logo { grid-area: logo; }
.kph #leaderboard-section { grid-area: board; }
.kph .kph-foot { grid-area: foot; }
.kph .kph-rail { position: sticky; top: 20px; align-self: start; }
.kph .kph-rail-adv {
    padding: 14px 10px; max-height: calc(100vh - 40px); overflow-y: auto;
    background: rgba(13, 15, 14, 0.97); border: 1px solid var(--kph-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    scrollbar-color: #C6FF00 #0D0F0E; scrollbar-width: thin;
}

/* Ascenseurs à la charte (fluo sur encre) : celui de la page — html, quand elle porte le bloc — et celui du tableau. */
html:has(.kph), .kph .klugle-table-container { scrollbar-color: #C6FF00 #0D0F0E; scrollbar-width: thin; }
html:has(.kph)::-webkit-scrollbar, .kph .klugle-table-container::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(.kph)::-webkit-scrollbar-track, .kph .klugle-table-container::-webkit-scrollbar-track { background: #0D0F0E; }
html:has(.kph)::-webkit-scrollbar-thumb, .kph .klugle-table-container::-webkit-scrollbar-thumb { background: #C6FF00; border-radius: 6px; border: 2px solid #0D0F0E; }
html:has(.kph)::-webkit-scrollbar-thumb:hover, .kph .klugle-table-container::-webkit-scrollbar-thumb:hover { background: #DFFF9E; }

/* ── En-tête de marque (chiffres de Dashboard.svelte : .brand-logo / .brand-escape) ── */
.kph-hero { text-align: center; margin-bottom: 16px; }
.kph-logo { display: block; margin: 0 auto; width: 120px; max-width: 100%; height: auto; filter: drop-shadow(0 2px 10px rgba(198, 255, 0, 0.20)); }
.kph-escape {
    display: block; margin: 8px auto 0; width: 138px; max-width: 100%; aspect-ratio: 7516 / 1016;
    -webkit-mask: var(--eg) center / contain no-repeat;
            mask: var(--eg) center / contain no-repeat;
    background-color: var(--kph-fluo);
    filter: drop-shadow(0 2px 8px rgba(198, 255, 0, 0.18));
}
.kph .kph-title {
    margin: 0 0 8px; padding: 0;
    font-family: var(--kph-font-title); font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--kph-on-dark);
}
.kph .kph-title i { color: var(--kph-fluo); font-size: 0.8em; margin-right: 0.15em; }
/* Sous-titre : deux lignes au plus sur grand écran (largeur calée sur la longueur du texte). */
.kph .kph-lead { max-width: 860px; margin: 0 auto; font-size: 1rem; line-height: 1.4; color: var(--kph-on-dark-soft); text-wrap: balance; }

/* ── Panneaux (habillage de .catalog-panel de l'app) ── */
.kph .klugle-panel {
    width: 100%; margin: 0 0 12px; padding: 20px;
    background: rgba(13, 15, 14, 0.97); border: 1px solid var(--kph-line); border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.kph .kph-panel-title {
    margin: 0 0 12px; padding: 0; text-align: center;
    font-family: var(--kph-font-title); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kph-fluo);
}

/* ── Médaillons d'aventure (empilés dans le panneau de gauche) ── */
.kph #public-themes-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.kph .kph-empty { margin: 0; font-size: 0.95rem; color: var(--kph-on-dark-soft); font-style: italic; }
.kph .theme-logo-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 12px 8px 10px;
    background: rgba(244, 246, 242, 0.04); border: 2px solid rgba(244, 246, 242, 0.12); border-radius: 12px;
    cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.kph .theme-logo-btn img { width: 84px; height: 84px; object-fit: contain; margin-bottom: 8px; transition: transform 0.2s ease; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); }
.kph .theme-logo-btn span { font-family: var(--kph-font-title); font-weight: 800; font-size: 0.85rem; line-height: 1.2; color: var(--kph-on-dark); text-align: center; }
.kph .theme-logo-btn:hover { border-color: var(--kph-line); background: rgba(198, 255, 0, 0.06); }
.kph .theme-logo-btn.active { border-color: var(--kph-fluo); background: rgba(198, 255, 0, 0.10); box-shadow: 0 0 22px rgba(198, 255, 0, 0.22); }
.kph .theme-logo-btn.active img { transform: scale(1.06); }
.kph .theme-logo-btn.active span { color: var(--kph-fluo); }

/* ── Recherche et choix des tableaux ── */
.kph .kph-tools { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.kph .kph-tool { flex: 1; min-width: 240px; }
.kph .kph-tool > label { display: block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kph-on-dark-soft); }
.kph .kph-tool-boards { text-align: right; }
.kph #public-board-selector { display: inline-flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 200px; text-align: left; }
.kph .kph-board { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 0.85rem; color: var(--kph-on-dark); white-space: nowrap; }
.kph .kph-board small { color: var(--kph-on-dark-soft); font-size: 0.75rem; }
.kph .kph-board input { accent-color: var(--kph-fluo); width: 16px; height: 16px; margin: 0; }
.kph .kph-soft { color: var(--kph-on-dark-soft); font-style: italic; }

.kph #public-search {
    width: 100%; padding: 12px 14px; border-radius: 8px;
    border: 1px solid rgba(244, 246, 242, 0.22) !important; background: rgba(244, 246, 242, 0.06) !important; color: var(--kph-on-dark) !important;
    font-family: var(--kph-font-body); font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kph #public-search:focus { outline: none !important; border-color: var(--kph-fluo) !important; box-shadow: 0 0 0 3px rgba(198, 255, 0, 0.18) !important; }
.kph #public-search::placeholder { color: rgba(244, 246, 242, 0.45) !important; }

/* ── Tableau ── */
/* Hauteur calée sur l'écran : le titre, les outils, la légende et le pied (≈ 420 px) restent visibles sans faire défiler la page. */
.kph .klugle-table-container { max-height: max(260px, calc(100vh - 420px)); overflow: auto; width: 100%; border: 1px solid rgba(244, 246, 242, 0.12); border-radius: 10px; }
.kph .klugle-table.public-table { width: 100%; min-width: 700px; margin: 0; border-collapse: collapse; text-align: left; font-family: var(--kph-font-body); color: var(--kph-on-dark); text-transform: none !important; background: transparent; }
.kph .klugle-table.public-table th {
    padding: 14px 10px; position: sticky; top: 0; z-index: 2;
    background: #171B19; border: 0; border-bottom: 2px solid var(--kph-fluo);
    font-family: var(--kph-font-title); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kph-fluo);
}
/* Taille fixée ici : le thème du site en impose une plus grande aux cellules de tableau. */
.kph .klugle-table.public-table td { font-size: 0.95rem; line-height: 1.4; padding: 11px 10px; border: 0; border-bottom: 1px solid rgba(244, 246, 242, 0.08); vertical-align: middle; background: transparent; }
.kph .klugle-table.public-table tbody tr:hover td { background: rgba(198, 255, 0, 0.06); }
.kph .kph-c { text-align: center; }
.kph .kph-r { text-align: right; }
.kph .klugle-table.public-table td.kph-msg { text-align: center; padding: 30px 10px; color: var(--kph-on-dark-soft); }

.kph .kph-rank { font-weight: 700; color: var(--kph-on-dark-soft); }
.kph .kph-rank-1 { color: #FFD23F; font-size: 1.25rem; }
.kph .kph-rank-2 { color: #C9CED2; font-size: 1.12rem; }
.kph .kph-rank-3 { color: #D08A4E; font-size: 1.02rem; }
.kph .klugle-table.public-table td.kph-team { font-weight: 700; font-size: 1.05rem; color: var(--kph-on-dark); }
.kph .kph-top td { background: rgba(198, 255, 0, 0.035); }
.kph .kph-mono { font-variant-numeric: tabular-nums; color: var(--kph-on-dark-soft); }
.kph .klugle-table.public-table td.kph-score { font-family: var(--kph-font-title); font-weight: 800; font-size: 1rem; color: var(--kph-fluo); white-space: nowrap; }
.kph .kph-st { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.kph .kph-st-success { color: var(--kph-fluo); }
.kph .kph-st-progress { color: #FFB020; }
.kph .kph-st-failed { color: #FF6B5E; }

/* ── Règle, légende, pied ── */
.kph .kph-rule { margin: 14px 0 8px; font-size: 0.88rem; color: var(--kph-on-dark-soft); }
.kph .kph-rule i { color: var(--kph-fluo); margin-right: 4px; }
.kph .kph-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.82rem; color: var(--kph-on-dark-soft); }
.kph .kph-legend li { margin: 0; }
.kph .kph-legend .kph-st, .kph .kph-battle { margin-right: 6px; }
.kph .kph-foot { text-align: center; margin-top: 8px; font-size: 0.8rem; color: var(--kph-on-dark-soft); }
.kph .kph-foot .klugle-ver-badge { font-size: 0.85em !important; margin-left: 8px; }

/* ── Écran étroit (tablette, téléphone) : une colonne ; petit logo en haut, aventures en bandeau horizontal COLLANT ── */
@media (max-width: 1100px) {
    .kph { padding: 16px 12px; }
    .kph .klugle-dashboard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "head" "adv" "board" "foot"; }
    .kph .kph-rail-logo { position: static; margin-bottom: 12px; }
    .kph .kph-logo { width: 84px; }
    .kph .kph-escape { width: 110px; margin-top: 6px; }
    .kph .kph-rail-adv {
        top: 0; z-index: 5; max-height: none; overflow: visible; margin: 0 -12px 12px; padding: 8px 12px;
        background: #0D0F0E; border: 0; border-bottom: 1px solid var(--kph-line); border-radius: 0; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
    }
    .kph .kph-rail-adv .kph-panel-title { display: none; }
    .kph #public-themes-container { flex-direction: row; align-items: stretch; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .kph #public-themes-container::-webkit-scrollbar { display: none; }
    .kph .theme-logo-btn { flex: 0 0 auto; width: auto; min-width: 92px; padding: 8px 10px 6px; }
    .kph .theme-logo-btn img { width: 48px; height: 48px; margin-bottom: 4px; }
    .kph .theme-logo-btn span { font-size: 0.75rem; }
    .kph .klugle-panel { padding: 14px 12px; }
    .kph .klugle-table-container { max-height: none; }
    .kph .kph-tool-boards { text-align: left; }
    .kph #public-board-selector { display: flex; }
}