:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --accent: #6366f1;
    --accent-bg: #eef0ff;
    --twitch: #9146ff;
    --twitch-bg: #f1e9ff;
    --role-broadcaster: #d91a1a;
    --role-broadcaster-bg: #fde8e8;
    --role-moderator: #008a05;
    --role-moderator-bg: #e2f6e3;
    --role-vip: #c4008f;
    --role-vip-bg: #fbe3f4;
    --role-subscriber: #8040f0;
    --role-subscriber-bg: #efe6ff;
    --border: #e5e7eb;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --hover-bg: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.06);
    --gold: #f5b301;
    --silver: #a8b0bb;
    --bronze: #cd7f32;
    --dot-near: rgba(99, 102, 241, 0.22);   /* points du fond, couche proche */
    --dot-far: rgba(145, 70, 255, 0.14);    /* points du fond, couche lointaine */
    --glow: rgba(99, 102, 241, 0.12);       /* lueur en haut de page */
    --glass: rgba(255, 255, 255, 0.78);     /* cartes « verre dépoli » */
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-shine: rgba(255, 255, 255, 0.7);
    color-scheme: light;
}

/* Mode sombre : réglé par le bouton (data-theme) ou, à défaut, par le système */
:root[data-theme="dark"] {
    --bg: #0b0d12;
    --card: #161a22;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --accent: #818cf8;
    --accent-bg: #272a45;
    --twitch: #a970ff;
    --twitch-bg: #2c2140;
    --role-broadcaster: #ff6b6b;
    --role-broadcaster-bg: #3a1c1c;
    --role-moderator: #4ade5a;
    --role-moderator-bg: #16321c;
    --role-vip: #ff6bd3;
    --role-vip-bg: #3a1934;
    --role-subscriber: #b48cff;
    --role-subscriber-bg: #2c2140;
    --border: #2d323c;
    --danger: #f87171;
    --danger-bg: #3b1d1d;
    --hover-bg: #2d323c;
    --shadow: rgba(0, 0, 0, 0.4);
    --dot-near: rgba(255, 255, 255, 0.09);
    --dot-far: rgba(169, 112, 255, 0.10);
    --glow: rgba(129, 140, 248, 0.14);
    --glass: rgba(22, 26, 34, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shine: rgba(255, 255, 255, 0.04);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b0d12;
        --card: #161a22;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --accent: #818cf8;
        --accent-bg: #272a45;
        --twitch: #a970ff;
        --twitch-bg: #2c2140;
        --role-broadcaster: #ff6b6b;
        --role-broadcaster-bg: #3a1c1c;
        --role-moderator: #4ade5a;
        --role-moderator-bg: #16321c;
        --role-vip: #ff6bd3;
        --role-vip-bg: #3a1934;
        --role-subscriber: #b48cff;
        --role-subscriber-bg: #2c2140;
        --border: #2d323c;
        --danger: #f87171;
        --danger-bg: #3b1d1d;
        --hover-bg: #2d323c;
        --shadow: rgba(0, 0, 0, 0.4);
        --dot-near: rgba(255, 255, 255, 0.09);
        --dot-far: rgba(169, 112, 255, 0.10);
        --glow: rgba(129, 140, 248, 0.14);
        --glass: rgba(22, 26, 34, 0.72);
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-shine: rgba(255, 255, 255, 0.04);
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    /* Lueur douce en haut à gauche, puis la couleur de fond */
    background: radial-gradient(1200px 700px at 15% -10%, var(--glow), transparent 70%) fixed, var(--bg);
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: transparent; /* laisse voir le fond à points */
    color: var(--text);
}

/* Fond : deux couches de petits points qui défilent lentement en biais.
   La couche lointaine (plus petite, plus pâle) va moins vite : effet de
   profondeur. On déplace des calques fixes, ce qui reste léger pour le
   navigateur. Chaque animation avance d'un nombre entier de motifs, pour
   boucler sans à-coup. */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: -200px;
    z-index: -1;
    pointer-events: none;
}

body::before {
    background-image: radial-gradient(var(--dot-near) 1.5px, transparent 2px);
    background-size: 40px 40px;
    animation: dots-near 40s linear infinite;
}

body::after {
    background-image: radial-gradient(var(--dot-far) 1px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    animation: dots-far 60s linear infinite;
}

@keyframes dots-near {
    to { transform: translate(40px, 120px); }
}

@keyframes dots-far {
    to { transform: translate(24px, 48px); }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
    }
}

button {
    font: inherit;
    cursor: pointer;
}

/* Affichage selon le rôle */
body:not(.is-admin) .admin-only { display: none !important; }
body.is-admin .visitor-only { display: none !important; }

/* Barre du haut */
/* Barre du haut : reste visible en faisant défiler, translucide */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px clamp(16px, 3vw, 40px);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, var(--text), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--twitch));
    box-shadow: 0 4px 14px var(--accent-bg);
    color: initial; /* l'emoji garde ses couleurs */
}

.auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

.role {
    font-size: 0.85rem;
    color: var(--muted);
}

body.is-admin .role {
    color: var(--accent);
    font-weight: 600;
}

.btn-light {
    padding: 8px 14px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.btn-light:hover {
    border-color: var(--accent);
}

.theme-btn {
    padding: 8px 10px;
    line-height: 1;
}

/* Page large : jusqu'à 1440 px, avec des marges qui grandissent avec l'écran */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px clamp(16px, 3vw, 40px) 48px;
}

/* Bloc principal : barre d'onglets + contenu de l'onglet.
   Effet « verre dépoli » : on devine les points du fond derrière. */
.board,
.live {
    background: var(--glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: 0 10px 40px var(--shadow), inset 0 1px 0 var(--glass-shine);
}

.board {
    overflow: hidden;
}

/* Niveau 1 : catégories, en boutons segmentés */
.group-bar {
    display: flex;
    gap: 6px;
    padding: 12px 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.group:hover {
    color: var(--text);
}

/* Nom court : seulement sur téléphone */
.group-short {
    display: none;
}

.group[aria-selected="true"] {
    color: var(--accent);
    background: var(--accent-bg);
    border-color: var(--accent);
}

.group[data-group="stats"][aria-selected="true"] {
    color: var(--twitch);
    background: var(--twitch-bg);
    border-color: var(--twitch);
}

.group .count {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--muted);
}

.group:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sur téléphone, les catégories se partagent la largeur (sans compteur) */
@media (max-width: 480px) {
    .group {
        flex: 1;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        font-size: 0.8rem;
    }

    .group .count {
        display: none;
    }

    .group .group-label {
        display: none;
    }

    .group .group-short {
        display: inline;
    }

    /* Barre du haut plus compacte */
    .logo {
        font-size: 1rem;
        gap: 8px;
    }

    .logo-icon {
        width: 30px;
        height: 30px;
    }

    .role {
        display: none;
    }
}

/* « ＋ Nouveau » n'a de sens que dans « Mes classements » */
.board:not([data-group="rankings"]) .new-tab {
    display: none !important;
}

.tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
}

/* Onglets des classements */
.tabs {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none; /* défilement possible, sans barre visible */
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 12px;
    background: none;
    border: none;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s;
}

.tab:hover {
    color: var(--text);
}

/* Soulignement de l'onglet actif */
.tab::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background 0.15s;
}

.tab[aria-selected="true"] {
    color: var(--accent);
}

.tab[aria-selected="true"]::after {
    background: var(--accent);
}

.tab:focus-visible,
.new-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: 8px;
}

.tab .count {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--muted);
}

.tab-auto[aria-selected="true"] {
    color: var(--twitch);
}

.tab-auto[aria-selected="true"]::after {
    background: var(--twitch);
}

/* Nombre de personnes hors classement (admin) */
.tab .pending,
.group .pending {
    margin-left: -4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--twitch-bg);
    color: var(--twitch);
}

.tab[aria-selected="true"] .count {
    background: var(--accent-bg);
    color: var(--accent);
}

.new-tab {
    flex-shrink: 0;
    margin: 8px 0;
    padding: 6px 12px;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.new-tab:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.panel {
    padding: 28px 32px;
}

@media (max-width: 480px) {
    .panel {
        padding: 16px;
    }
}

/* En-tête du classement */
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

h1 {
    margin: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.panel-actions {
    display: flex;
    gap: 4px;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.1rem;
    padding: 6px 8px;
    border-radius: 6px;
}

.icon-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.icon-btn.danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.subtitle {
    margin: 6px 0 20px;
    color: var(--muted);
}

/* Barre d'outils du classement : recherche (principale) + ajout (discret) */
.ranking-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.ranking-search {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}

.ranking-search:focus {
    border-color: var(--accent);
}

/* Ajout manuel : petit, sans fond tant qu'on ne s'en sert pas */
.add-form {
    display: flex;
    flex: 0 1 220px;
    min-width: 0;
    border: 1px dashed var(--border);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.add-form:focus-within {
    border-style: solid;
    border-color: var(--accent);
}

.add-form input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: none;
    border: none;
    outline: none;
}

.add-form button {
    padding: 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    border-left: 1px dashed var(--border);
}

.add-form button:hover,
.add-form:focus-within button {
    color: var(--accent);
}

@media (max-width: 480px) {
    .ranking-toolbar { flex-wrap: wrap; }
    .add-form { flex-basis: 100%; }
}

/* Fenêtre de connexion : champs et bouton */
dialog input {
    flex: 1;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
}

dialog input:focus {
    border-color: var(--accent);
}

dialog button[type="submit"] {
    padding: 12px 18px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 10px;
}

dialog button[type="submit"]:hover {
    filter: brightness(1.1);
}

/* Liste du classement */
.ranking {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    user-select: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

/* Survol : la ligne se soulève légèrement */
.item:hover {
    transform: translateY(-1px);
    border-color: var(--glass-border);
    box-shadow: 0 6px 18px var(--shadow);
}

.item.dragging,
.item.editing,
.item.rank-editing {
    transform: none;
}

body.is-admin .item {
    cursor: grab;
}

.item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.rank {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-weight: 700;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
}

/* Admin : la bulle du numéro est cliquable pour changer la place */
body.is-admin #ranking .rank {
    cursor: pointer;
    transition: box-shadow 0.15s;
}

body.is-admin #ranking .rank:hover {
    box-shadow: 0 0 0 2px var(--accent);
}

.rank-input {
    flex-shrink: 0;
    width: 52px;
    height: 34px;
    padding: 0 4px;
    font: inherit;
    font-weight: 700;
    text-align: center;
    color: var(--text);
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 999px;
    outline: none;
    -moz-appearance: textfield;
}

.rank-input::-webkit-outer-spin-button,
.rank-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Podium : places 1, 2, 3 (le streamer, en place 0, n'en fait pas partie) */
#ranking .item[data-place="1"] .rank { background: var(--gold); color: #fff; }
#ranking .item[data-place="2"] .rank { background: var(--silver); color: #fff; }
#ranking .item[data-place="3"] .rank { background: var(--bronze); color: #fff; }

/* Streamer : épinglé en fin de liste, en place 0, à peine mis en avant */
#ranking .item.is-streamer {
    margin-top: 14px;
    border: 1px solid var(--role-broadcaster);
    border-left-width: 4px;
    background: linear-gradient(90deg, var(--role-broadcaster-bg), var(--card) 60%);
}

#ranking .item.is-streamer .rank {
    color: #fff;
    background: var(--role-broadcaster);
    cursor: default;
    box-shadow: none;
}

/* Pas de saisie de place pour le streamer */
body.is-admin #ranking .item.is-streamer .rank,
body.is-admin #ranking .item.is-streamer .rank:hover {
    cursor: default;
    box-shadow: none;
}

#ranking .item.is-streamer .avatar {
    border: 2px solid var(--role-broadcaster);
}

#ranking .item.is-streamer .name {
    font-weight: 600;
}

#ranking .item.is-streamer .name::before {
    content: "👑 ";
}

/* Pseudo sur une seule ligne, coupé avec « … » s'il manque de place
   (le nom complet s'affiche au survol) */
.name {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Téléphone : on allège les lignes pour laisser de la place au pseudo */
@media (max-width: 480px) {
    .item {
        gap: 8px;
        padding: 10px;
    }

    #ranking .handle,
    #ranking .role-badge {
        display: none;
    }

    .item-actions .icon-btn {
        padding: 4px 5px;
    }
}

.handle {
    color: var(--muted);
    font-size: 1.2rem;
}

/* Boutons Modifier / Supprimer d'un élément */
.item-actions {
    display: flex;
    gap: 2px;
}

.item-actions .icon-btn {
    font-size: 1rem;
}

.item.editing .item-actions,
.item.editing .handle {
    display: none;
}

body.is-admin .item.editing {
    cursor: default;
    border-color: var(--accent);
}

.edit-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-size: 1.05rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    outline: none;
}

.empty,
.status {
    text-align: center;
    color: var(--muted);
}

.status {
    font-size: 0.85rem;
    min-height: 1.2em;
}

/* Classement : 10 lignes visibles au maximum, on fait défiler pour la suite
   (évite d'étirer la page en longueur) */
#ranking {
    position: relative; /* repère pour faire défiler jusqu'à un élément */
    --row: 68px; /* hauteur d'une ligne + espacement */
    max-height: calc(var(--row) * 10 - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Classement + colonne « Hors classement » côte à côte */
.lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

body.is-admin .lists {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 400px);
    gap: 32px;
}

@media (max-width: 700px) {
    body.is-admin .lists {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Zone de dépôt vide : cadre pointillé avec un texte d'aide */
body.is-admin .dropzone {
    min-height: 64px;
    border-radius: 12px;
    transition: background 0.15s, outline-color 0.15s;
}

body.is-admin .dropzone:empty {
    display: grid;
    place-items: center;
    border: 2px dashed var(--border);
}

body.is-admin .dropzone:empty::before {
    content: attr(data-empty);
    padding: 12px;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.dropzone.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
}

.pool {
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Bouton discret, rouge au survol */
.pool-clear {
    padding: 3px 8px;
    font-size: 0.75rem;
    color: var(--muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    white-space: nowrap;
}

.pool-clear:hover {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger);
}

.pool h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 1rem;
}

.pool-count {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    background: var(--twitch-bg);
    color: var(--twitch);
}

.pool-hint {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: var(--muted);
}

.pool-search {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}

.pool-search:focus {
    border-color: var(--twitch);
}

.pool-no-result {
    margin: 8px 0 0;
    font-size: 0.85rem;
    text-align: center;
    color: var(--muted);
}

/* Personnes en attente : lignes compactes, sans numéro.
   10 lignes visibles au maximum, on fait défiler pour voir la suite. */
.pool-list {
    --row: 53px; /* hauteur d'une ligne + espacement */
    max-height: calc(var(--row) * 10 - 6px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.pool-list .item {
    padding: 8px 10px;
    gap: 8px;
    margin-bottom: 6px;
}

.item[hidden] {
    display: none;
}

/* Recherche active sans aucun résultat : pas de cadre « Personne en attente » */
.pool-list.filtered:not(:has(.item:not([hidden]))) {
    min-height: 0;
}

.pool-list .rank,
.pool-list .edit,
.pool-list .handle {
    display: none;
}

/* Pseudo sur une seule ligne, coupé avec « … » si trop long */
.pool-list .name {
    min-width: 0;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool-list .item-actions .icon-btn {
    padding: 4px 6px;
}

.rank-btn {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-bg);
    border: none;
    border-radius: 6px;
}

.rank-btn:hover {
    filter: brightness(1.1);
}

#ranking .rank-btn {
    display: none;
}

/* --- Tops automatiques (bits, subs offerts) ------------------------------ */

.panel.is-leaderboard .subtitle:not(.leaderboard-only),
.panel.is-leaderboard .panel-actions,
.panel.is-leaderboard .add-form,
.panel.is-leaderboard .pool {
    display: none !important;
}

.leaderboard-only {
    display: none;
}

.panel.is-leaderboard .leaderboard-only {
    display: block;
}

body.is-admin .panel.is-leaderboard .lists {
    grid-template-columns: minmax(0, 1fr);
}

/* Pas de glisser-déposer ni de saisie de place dans un top */
body.is-admin .item.leader {
    cursor: default;
}

body.is-admin #ranking .item.leader .rank {
    cursor: default;
    box-shadow: none;
}

.amount {
    flex-shrink: 0;
    min-width: 90px;
    padding: 4px 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    border-radius: 999px;
    background: var(--twitch-bg);
    color: var(--twitch);
}

/* Stats par catégorie */
.category-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-radius: 8px;
    background: var(--twitch-bg);
}

.category-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-details {
    font-size: 0.8rem;
    color: var(--muted);
}

.live-tag {
    align-self: flex-start;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    color: var(--role-broadcaster);
    background: var(--role-broadcaster-bg);
}

#ranking .item.category-row.is-live {
    border-color: var(--role-broadcaster);
}

/* Comptes bannis */
.banned-row .name {
    text-decoration: line-through;
    text-decoration-color: var(--danger);
}

.banned-date {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.unban-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.unban-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.group[data-group="banned"][aria-selected="true"] {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger);
}

/* Bits et subs offerts dans le chat */
.chat-line.chat-ban {
    color: var(--muted);
    font-style: italic;
}

.chat-line.chat-bits,
.chat-line.chat-gift {
    padding: 4px 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 6px;
    background: var(--twitch-bg);
}

.sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- Flèches de progression ---------------------------------------------- */

.trend {
    flex-shrink: 0;
    min-width: 34px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: help;
}

.trend[data-trend="up"]   { color: var(--role-moderator); }
.trend[data-trend="down"] { color: var(--danger); }
.trend[data-trend="same"] { color: var(--muted); }

.trend[data-trend="new"] {
    padding: 1px 4px;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
    border-radius: 4px;
    color: var(--accent);
    background: var(--accent-bg);
}

.trend-info {
    margin: -12px 0 16px;
    font-size: 0.8rem;
    color: var(--muted);
}

.trend-info[hidden] {
    display: none;
}

/* --- Photos de profil ---------------------------------------------------- */

.avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--hover-bg) center / cover no-repeat;
    border: 1px solid var(--border);
}

/* Ajout manuel : initiales sur une couleur tirée du nom */
.avatar-initials {
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--hue) 55% 35%);
    background: hsl(var(--hue) 55% 88%);
}

:root[data-theme="dark"] .avatar-initials {
    color: hsl(var(--hue) 60% 75%);
    background: hsl(var(--hue) 35% 22%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .avatar-initials {
        color: hsl(var(--hue) 60% 75%);
        background: hsl(var(--hue) 35% 22%);
    }
}

.pool-list .avatar {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
}

.chat-line .avatar {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
}

/* --- Rôles Twitch : une couleur par rôle -------------------------------- */

[data-role="broadcaster"] { --role: var(--role-broadcaster); --role-bg: var(--role-broadcaster-bg); }
[data-role="moderator"]   { --role: var(--role-moderator);   --role-bg: var(--role-moderator-bg); }
[data-role="vip"]         { --role: var(--role-vip);         --role-bg: var(--role-vip-bg); }
[data-role="subscriber"]  { --role: var(--role-subscriber);  --role-bg: var(--role-subscriber-bg); }
[data-role="viewer"]      { --role: var(--muted);            --role-bg: var(--hover-bg); }

.role-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--role-bg);
    color: var(--role);
    cursor: help;
}

/* Liseré de couleur à gauche de chaque compte Twitch */
.item[data-role] {
    border-left: 4px solid var(--role);
}

.item.editing .role-badge,
.pool-list .role-badge {
    display: none;
}

/* Pseudo coloré dans le chat */
.role-name {
    color: var(--role);
}

.chat-line .role-badge {
    margin-right: 6px;
    vertical-align: 1px;
}

.role-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.role-legend .role-badge {
    cursor: default;
}

/* Élément qui vient d'arriver depuis le chat */
.item.just-added {
    animation: arrive 1.2s ease-out;
}

@keyframes arrive {
    from {
        border-color: var(--twitch);
        background: var(--twitch-bg);
        transform: translateY(-6px);
    }
}

/* Panneau Live Twitch (simulation) */
.live {
    margin-top: 28px;
    padding: 24px clamp(16px, 2.5vw, 32px);
}

.live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.live h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15rem;
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--muted);
}

.live-dot.on {
    background: #eb0400;
    animation: pulse 1.4s infinite;
}

@keyframes pulse {
    50% { opacity: 0.35; }
}

.sim-tag {
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: var(--twitch-bg);
    color: var(--twitch);
}

.live-toggle {
    padding: 8px 14px;
    font-weight: 600;
    color: #fff;
    background: var(--twitch);
    border: none;
    border-radius: 8px;
}

.live-toggle.on {
    background: var(--hover-bg);
    color: var(--text);
}

.live-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.live-hint {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--muted);
}

.live-hint strong {
    color: var(--text);
}

/* Source du chat : vrai Twitch ou simulation */
.live[data-source="twitch"] .sim-only,
.live[data-source="sim"] .twitch-only {
    display: none !important;
}

.source-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.source-switch {
    display: inline-flex;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.source-btn {
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 8px;
}

.source-btn[aria-checked="true"] {
    color: #fff;
    background: var(--twitch);
}

.source-btn[data-source="sim"][aria-checked="true"] {
    background: var(--muted);
}

.source-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.twitch-status {
    font-size: 0.85rem;
    color: var(--muted);
}

.twitch-status::before {
    content: "●";
    margin-right: 6px;
}

.twitch-status[data-state="on"]   { color: var(--role-moderator); }
.twitch-status[data-state="wait"] { color: var(--gold); }

.live-category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--muted);
}

.live-category select:disabled {
    opacity: 1;
    color: var(--text);
    cursor: default;
    appearance: none;
    -webkit-appearance: none;
}

/* Bot du chat */
.bot-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.bot-status {
    font-size: 0.9rem;
    color: var(--muted);
}

.bot-status[data-state="on"] {
    color: var(--role-moderator);
}

.bot-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    text-decoration: none;
}

.bot-btn[hidden] {
    display: none;
}

/* Réponse du bot sous la commande, dans le chat du panneau */
.chat-line.chat-bot {
    margin-left: 24px;
    color: var(--role-moderator);
    font-style: italic;
}

/* Mode Twitch : état du suivi automatique du live */
.auto-live {
    margin: 0 0 12px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    color: var(--twitch);
    background: var(--twitch-bg);
}

.auto-live[hidden] {
    display: none;
}

.auto-live[data-live="1"] {
    color: var(--role-broadcaster);
    background: var(--role-broadcaster-bg);
}

.live-toggle[hidden] {
    display: none;
}

.category-source {
    font-size: 0.85rem;
    color: var(--muted);
}

.category-source[data-state="auto"]  { color: var(--twitch); }
.category-source[data-state="error"] { color: var(--danger); }

.live-category select {
    padding: 6px 10px;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Barre de synchro : comptes en file + bouton manuel */
.sync-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sync-info {
    font-size: 0.9rem;
    color: var(--muted);
}

.sync-bar .btn-light {
    padding: 6px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.sync-bar .btn-light:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat {
    height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.92rem;
}

.chat-line {
    margin: 0 0 6px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-empty {
    margin: 0;
    color: var(--muted);
}

.chat-added {
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--twitch-bg);
    color: var(--twitch);
}

.chat-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.chat-form input {
    min-width: 0;
    padding: 8px 10px;
    font: inherit;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}

.chat-form input:focus {
    border-color: var(--twitch);
}

#chat-role {
    padding: 8px 6px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

#chat-user { flex: 1; }
#chat-text { flex: 2; }

.chat-form button {
    padding: 8px 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--hover-bg);
    border: none;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .live { padding: 16px; }
    .chat-form { flex-wrap: wrap; }
    #chat-user, #chat-text { flex-basis: 100%; }
}

/* --- Easter egg : « Pris la main dans le sac ! » ------------------------ */

.caught {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(120, 0, 0, 0.85);
    animation: alarm 0.8s steps(1) infinite;
}

.caught[hidden] {
    display: none;
}

@keyframes alarm {
    50% { background: rgba(10, 10, 60, 0.85); }
}

.caught-box {
    max-width: 640px;
    padding: 32px 28px;
    text-align: center;
    color: #fff;
}

.caught-siren {
    font-size: 5rem;
    line-height: 1;
    animation: siren 0.4s ease-in-out infinite alternate;
}

@keyframes siren {
    from { transform: rotate(-15deg) scale(1); }
    to { transform: rotate(15deg) scale(1.15); }
}

.caught h2 {
    margin: 16px 0;
    font-size: clamp(2.2rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 0 #000, 0 0 30px #ff2d2d;
    animation: shake 0.35s linear infinite;
}

@keyframes shake {
    25% { transform: translate(-4px, 2px) rotate(-1deg); }
    50% { transform: translate(3px, -2px) rotate(1deg); }
    75% { transform: translate(-2px, -3px) rotate(0deg); }
}

.caught p {
    margin: 8px 0;
    font-size: 1.2rem;
}

.caught-small {
    opacity: 0.85;
    font-size: 1rem !important;
}

.caught button {
    margin-top: 20px;
    padding: 12px 22px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #b00000;
    background: #fff;
    border: none;
    border-radius: 999px;
}

/* Sans animations si l'utilisateur les a désactivées */
@media (prefers-reduced-motion: reduce) {
    .caught,
    .caught-siren,
    .caught h2 {
        animation: none;
    }
}

/* Fenêtre de connexion */
dialog {
    width: min(360px, calc(100% - 32px));
    padding: 24px;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

dialog h2 {
    margin: 0 0 12px;
}

dialog label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--muted);
}

dialog label[hidden] {
    display: none;
}

.hint {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--muted);
}

.error {
    min-height: 1.2em;
    margin: 0 0 8px;
    color: var(--danger);
    font-size: 0.9rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}