/* Classements des salles verifiees.
 *
 * Tout part des variables de app.css : cette page est une page du site, pas une
 * fenetre posee dessus. La version relayee avait sa propre palette et se lisait
 * comme un autre produit.
 *
 * Le vert de la mention « salle verifiee » est celui de --success, deja utilise
 * ailleurs pour dire « c'est bon ». Il ne concurrence pas le violet de la
 * marque : l'un signale un etat, l'autre porte l'identite.
 */

/* La colonne est large comme le tableau ; c'est la PHRASE qui garde sa laisse
   de lecture. Une accroche qui court sur 1180 px se lit mal. */
.rk-hero .page-lead {
    max-width: 62ch;
}

/* La classe suffit a les designer : ecrite « .rk-hero .rk-tabs », la regle ne
   valait que pour les classements et les onglets des contests collaient a la
   phrase du dessus. */
.rk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 26px;
}

.rk-tabs a {
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
}

.rk-tabs a:hover,
.rk-tabs a:focus-visible {
    border-color: var(--line-strong);
    color: var(--text);
}

.rk-tabs a.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ── Les trois mondes ────────────────────────────────────────────────────── */

/* Ils changent le SENS du classement, pas seulement son contenu : ils se
   posent donc au-dessus des filtres, et se lisent comme des onglets. */
.rk-worlds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.rk-worlds button {
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
}

.rk-worlds button:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.rk-worlds button.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.rk-worlds-note {
    max-width: 78ch;
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* ── Les filtres ─────────────────────────────────────────────────────────── */

.rk-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: flex-end;
    margin-bottom: 26px;
}

.rk-filters label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* « Monde » n'a pas de sous-choix : sa liste de valeurs se cache. L'attribut
   hidden pose display:none, mais la regle ci-dessus le bat - une declaration
   d'auteur l'emporte sur celle du navigateur, et le champ restait visible,
   vide, a cote du perimetre. */
.rk-filters label[hidden] {
    display: none;
}

/* Le champ de recherche et les listes deroulantes appartiennent a la meme
   rangee : ils se ressemblent, sinon l'un a l'air d'un ajout. */
.rk-filters select,
.rk-filters input {
    min-width: 200px;
    max-width: 100%;
    padding: 10px 12px;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: normal;
}

/* Le petit mot sous le champ : il n'apparait que s'il reste des jeux hors de
   la fenetre, ou si la recherche ne trouve rien. */
.rk-hint {
    min-height: 1.1em;
    font-size: 0.72rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

.rk-filters select:focus-visible,
.rk-filters input:focus-visible {
    outline: 2px solid var(--brand-bright);
    outline-offset: 2px;
}

/* ── Le podium ───────────────────────────────────────────────────────────── */

.rk-podium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.rk-place {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* La premiere place se distingue par la couleur de la marque, pas par une
 * taille differente : trois cartes de hauteurs inegales se lisent mal des que
 * la grille passe sur une colonne. */
.rk-place-1 {
    border-color: color-mix(in srgb, var(--brand) 55%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand) 12%, var(--surface)) 0%,
        var(--surface) 60%);
}

.rk-medal {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.rk-place-1 .rk-medal {
    color: var(--brand-bright);
}

.rk-place-game {
    color: var(--text-soft);
    font-size: 0.92rem;
}

.rk-place-score {
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Le joueur ───────────────────────────────────────────────────────────── */

.rk-player {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.rk-avatar {
    /* Les avatars sont dessines pixel par pixel : les lisser les abimerait. */
    image-rendering: pixelated;
    border-radius: 7px;
    flex: none;
}

.rk-honors {
    font-size: 0.85rem;
}

/* ── Le tableau ──────────────────────────────────────────────────────────── */

/* Le tableau defile dans sa propre boite : sans cela, six colonnes poussent la
 * page entiere de cote sur un telephone. */
.rk-table-scroll {
    overflow-x: auto;
}

.rk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.rk-table th,
.rk-table td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.rk-table th {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.rk-table .rk-rank {
    width: 3ch;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.rk-table .rk-system {
    color: var(--text-soft);
}

.rk-table .rk-score,
.rk-table th.rk-score {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ── Bouton « ▷ Replay » (funnel) ────────────────────────────────────────── */
/* N'apparait QUE sur les records dont le replay est public. Pilule discrete a la
 * couleur de la marque : presente sans concurrencer le score. Le clic est pris
 * par le funnel (nelfe-runtime.js) via data-nelfe-replay. */
.rk-replay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    color: var(--brand-bright);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}

.rk-replay:hover {
    background: color-mix(in srgb, var(--brand) 28%, transparent);
    border-color: var(--brand-bright);
}

.rk-replay:active { transform: translateY(1px); }

.rk-replay:focus-visible {
    outline: 2px solid var(--brand-bright);
    outline-offset: 2px;
}

.rk-replay[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* Dans le tableau, le score est aligne a droite : le bouton suit le nombre sur
 * la meme ligne plutot que de creer une colonne. */
.rk-table .rk-score .rk-replay {
    margin-top: 0;
    margin-left: 8px;
    vertical-align: middle;
}

/* Sa propre ligne. Un liseré et un fond a peine teinte suffisent : un
   classement se lit en balayant, et une ligne trop criarde ferait perdre les
   autres. */
.rk-table tr.is-me td {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.rk-table tr.is-me td:first-child {
    box-shadow: inset 3px 0 0 var(--brand-bright);
}

.rk-place.is-me {
    border-color: var(--brand-bright);
}

.rk-state {
    padding: 26px 12px;
    color: var(--muted);
    text-align: center;
    white-space: normal;
}

.rk-badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

/* La couleur dit la garantie. Le vert est reserve a la salle verifiee ; les
   deux autres mondes restent neutres, sinon la pastille verte ne voudrait plus
   rien dire. */
.rk-badge-home,
.rk-badge-stream {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--muted);
}

.rk-where {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.82rem;
}

.rk-tally {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.rk-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
}

/* ── Comment on sait que c'est vrai ──────────────────────────────────────── */

.rk-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.rk-trust article {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.rk-trust h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.rk-trust p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.94rem;
}

.rk-trust p + p {
    margin-top: 12px;
}

.rk-trust a {
    color: var(--brand-bright);
}