:root {
    --bg-deep: #050505;
    --text-primary: #EAEAEA;
    --text-secondary: #888888;
    --accent: #D4AF37;
    --accent-glow: rgba(212, 175, 55, 0.3);
    --error: #aa3333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Lora', serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- BACKGROUND "DEEP TECH" --- */
.galaxy-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at center, #0b101a 0%, #000000 100%);
    overflow: hidden;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat top center;
    z-index: 0;
    opacity: 0.4;
}

.twinkling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png') repeat top center;
    z-index: 1;
    opacity: 0.3;
    animation: move-twinkle 200s linear infinite;
}

.techno-grid {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    transform: perspective(500px) rotateX(60deg);
    opacity: 0.3;
    animation: grid-move 100s linear infinite;
    pointer-events: none;
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
}

.deep-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 120vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(20, 30, 50, 0.4) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
}

@keyframes move-twinkle {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -10000px 5000px;
    }
}

@keyframes grid-move {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(100px);
    }
}

/* --- SECTIONS --- */
section {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
}

/* --- INTRO --- */
#intro-view {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.intro-content {
    position: relative;
    z-index: 10;
    /* Le texte passe DEVANT le 2 */
    text-align: center;
}

/* LE 2 GÉANT OR MASSIF */
.giant-background-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    /* Ultra Gras */
    font-size: 65vh;
    /* Gigantesque */
    line-height: 1;
    z-index: 0;
    opacity: 0;
    /* Géré par JS */

    /* --- L'EFFET OR SCINTILLANT --- */
    /* 1. On crée un dégradé avec plusieurs tons d'or et de blanc */
    background: linear-gradient(to right,
            #bf953f,
            /* Or foncé */
            #fcf6ba,
            /* Éclat blanc/jaune */
            #b38728,
            /* Or moyen */
            #fbf5b7,
            /* Éclat */
            #aa771c
            /* Or bronze */
        );

    /* 2. On agrandit le background pour pouvoir le faire bouger */
    background-size: 200% auto;

    /* 3. On découpe le background selon la forme du texte */
    background-clip: text;
    -webkit-background-clip: text;

    /* 4. On rend le texte transparent pour voir le background derrière */
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* 5. L'Animation du reflet qui passe */
    animation: shine 3s linear infinite;

    /* Ombre portée dorée pour faire "briller" autour */
    filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.4));
}

/* Animation du scintillement */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* TEXTES */
.intro-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.6em;
    color: var(--accent);
    /* Couleur Or définie dans :root */
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
    opacity: 0;
}

.intro-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    color: #fff;
    /* Blanc pour bien ressortir sur le 2 doré */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 1);
    /* Grosse ombre noire pour la lisibilité */
    margin: 0;
    opacity: 0;
}

/* --- THEMES (Mode Grille Compacte) --- */
.section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    display: block;
    text-align: center;
}

.themes-list {
    display: grid;
    /* Magie : Crée autant de colonnes que possible (min 350px de large) */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    /* Espace entre les cartes */

    width: 95%;
    max-width: 1400px;

    /* On limite la hauteur pour que ça ne sorte jamais de l'écran */
    max-height: 75vh;
    overflow-y: auto;
    /* Ajoute un scroll discret si vraiment trop de thèmes */

    /* Centrage */
    margin: 0 auto;
    padding: 10px;
}

.theme-item {
    width: 100%;
    /* Padding réduit pour gagner de la place */
    padding: 20px 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);

    border-radius: 8px;
    position: relative;
    overflow: hidden;

    /* Mise en page interne : Numéro à gauche, Texte à droite */
    display: flex;
    align-items: center;
    justify-content: flex-start;

    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.5;
    filter: blur(5px) grayscale(100%);
    transform: scale(0.95);
}

.theme-item.revealed {
    opacity: 1;
    filter: blur(0) grayscale(0%);
    transform: scale(1);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    border-color: var(--accent);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Le Numéro (01, 02...) */
.t-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.5;
    margin-right: 20px;
    /* Espace entre numéro et texte */

    /* On retire le positionnement absolute pour qu'il pousse le texte */
    position: static;
    transform: none;
}

/* Le Texte (Mathématiques, Cinéma...) */
.t-txt {
    font-family: 'Cormorant Garamond', serif;
    /* Taille responsive : s'adapte à la taille de la case */
    font-size: 1.8rem;
    font-style: italic;
    color: var(--text-primary);
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    text-align: left;
}

/* --- THEME INTRO --- */
#theme-intro-view {
    background: rgba(5, 5, 10, 0.8);
    z-index: 18;
}

.theme-pre-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2rem;
    opacity: 0;
}

.current-theme-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 300;
    font-style: italic;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    opacity: 0;
}

.loading-line {
    width: 0%;
    height: 2px;
    background: var(--accent);
    margin-top: 3rem;
    box-shadow: 0 0 10px var(--accent);
}

/* --- QUIZ --- */
#quiz-view {
    display: none;
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1600px;
    text-align: center;
    opacity: 0;
    height: 80vh;
    flex-direction: column;
    justify-content: center;
}

.meta-info {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4rem;
}

.line {
    width: 2px;
    height: 80px;
    background-color: var(--accent);
    margin: 0 auto 40px auto;
    opacity: 0.6;
}

.question-container {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-text {
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 300;
    line-height: 1.1;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    letter-spacing: -0.02em;
}

#q-theme-label {
    display: block;
    margin-bottom: 15px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.2em;
}

.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 6px;
    background-color: var(--accent);
    width: 0%;
    box-shadow: 0 0 20px var(--accent);
    transition: width 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- SCORES --- */
.scores-container {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    border-radius: 4px;
    transform: translateX(-50px);
    opacity: 0;
}

.score-row.rank-1 {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}

.team-rank {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: var(--text-secondary);
    margin-right: 20px;
    width: 30px;
}

.rank-1 .team-rank {
    color: var(--accent);
}

.team-info-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    flex-grow: 1;
}

.team-score-display {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent);
}

/* --- QR --- */
#qr-view {
    background: rgba(5, 5, 10, 0.9);
    backdrop-filter: blur(15px);
    z-index: 50;
}

.qr-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--accent);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.2);
}

#qrcode-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin: 0 auto;
    /* J'ai retiré la marge du bas inutile */

    /* --- MODIFICATION TAILLE --- */
    width: 65vh;
    /* S'adapte à la hauteur de l'écran */
    height: 65vh;
    max-width: 800px;
    /* Limite pour les écrans ultra larges */
    max-height: 800px;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* AJOUTEZ CECI JUSTE EN DESSOUS POUR QUE L'IMAGE REMPLISSE LA BOÎTE */
#qrcode-container img,
#qrcode-container canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* --- VUE LOGIN (CORRIGÉE) --- */
#login-view {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    opacity: 1;

    justify-content: center;
    align-items: center;

    /* MODIFICATION ICI : On passe à 200 pour être au-dessus de tout (QR, Golden, etc.) */
    z-index: 200 !important;

    background: rgba(5, 5, 10, 0.6);
    backdrop-filter: blur(10px);
}

/* Ajoute aussi ceci pour garantir que le formulaire est cliquable */
.room-entry-container {
    position: relative;
    z-index: 210;
    /* Encore plus haut que le fond */
    pointer-events: auto;
    /* Force la détection de la souris */
}

.room-input {
    position: relative;
    z-index: 220;
    /* L'input au sommet */
    pointer-events: auto !important;
    /* Force absolue du clic */
    cursor: text;
}

/* =========================================
   VUE JOUEURS (LOBBY VIP - PLEIN ÉCRAN)
   ========================================= */

/* On écrase le style précédent de #teams-view */
#teams-view {
    display: none;
    /* Géré par JS */
    z-index: 15;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.vip-lobby-container {
    width: 95%;
    max-width: 1600px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- HEADER DU LOBBY --- */
.lobby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass);
    /* Réutilise ta variable glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 40px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lobby-main-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 700;
    font-style: italic;
    margin: 0;
    background: linear-gradient(to bottom, #fff, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Badge Room Code */
.room-badge-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #D4AF37;
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
}

.room-badge-display .lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #D4AF37;
}

.room-badge-display .val {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 5px;
}

/* Compteur Joueurs */
.player-counter-badge {
    text-align: right;
}

#player-count-display {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #D4AF37;
    line-height: 1;
}

.player-counter-badge .lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #aaa;
    display: block;
}


/* --- GRILLE DES JOUEURS --- */
.vip-grid {
    flex: 1;
    /* Prend toute la hauteur restante */
    display: grid;
    /* Grille responsive automatique */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: max-content;
    /* Hauteur s'adapte au contenu */
    gap: 20px;

    padding: 20px;
    overflow-y: auto;
    /* Scrollable si trop de joueurs */

    /* Scrollbar invisible mais fonctionnelle */
    scrollbar-width: thin;
    scrollbar-color: #D4AF37 transparent;
}

/* CARTE VIP INDIVIDUELLE */
.vip-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    position: relative;
    overflow: hidden;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* --- CORRECTION : ON ENLÈVE L'OPACITÉ 0 ET L'ANIMATION CSS --- */
    /* Cela évite que la carte soit invisible si l'anim ne se lance pas */
    opacity: 1;
    transform: scale(1);
    /* animation: popIn ...  <-- ON SUPPRIME CA */
}

/* Effet Hover / Présent */
.vip-card.present {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.3));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}

/* Barre de couleur en bas de carte (sera écrasée par le JS inline, mais fallback ici) */
.vip-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #444;
    transition: background 0.3s;
}

.vip-avatar {
    font-size: 3rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s;
}

.vip-card.present:hover .vip-avatar {
    transform: scale(1.2) rotate(5deg);
}

.vip-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 5px;

    /* Coupe si trop long */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vip-status {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

.vip-card.present .vip-status {
    color: #2ecc71;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- VUE RÈGLES + QR --- */
#rules-view {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 13;
    opacity: 0;
}

.split-layout {
    display: flex;
    width: 90%;
    max-width: 1600px;
    /* Plus large pour accueillir le QR géant */
    justify-content: space-around;
    align-items: center;
}

.rules-content {
    width: 40%;
    text-align: left;
}

.qr-box-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    /* On empile le code et le QR */
    align-items: center;
    justify-content: center;
    gap: 30px;
    /* Espace entre le code et le QR */
}

.rules-code-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--accent);
    /* Bordure Dorée */
    padding: 15px 40px;
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);

    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInCode 0.8s ease-out forwards 0.5s;
}

.rules-code-box .label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.rules-code-box .code {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes fadeInCode {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rules-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    /* Titre plus gros */
    color: var(--accent);
    margin-bottom: 40px;
    font-style: italic;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.rules-list {
    list-style: none;
    padding: 0;
}

.rules-list li {
    font-size: 1.8rem;
    /* Texte plus gros */
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(-20px);
}

.rules-list li span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    /* Puces plus grosses */
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    margin-right: 25px;
    box-shadow: 0 0 15px var(--accent-glow);
}

/* --- VUE FINALE (PODIUM) --- */
#end-view {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    opacity: 0;
    background: radial-gradient(circle at center, #1a0f00 0%, #000000 100%);
    overflow: hidden;
}

/* Projecteurs de lumière */
.spotlight {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200px;
    height: 200vh;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, transparent 80%);
    transform-origin: top center;
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}

.spot-left {
    animation: swing-left 6s ease-in-out infinite alternate;
}

.spot-right {
    animation: swing-right 6s ease-in-out infinite alternate;
}

@keyframes swing-left {
    0% {
        transform: rotate(-20deg) translateX(-200px);
        opacity: 0.5;
    }

    100% {
        transform: rotate(10deg) translateX(-50px);
        opacity: 0.8;
    }
}

@keyframes swing-right {
    0% {
        transform: rotate(20deg) translateX(200px);
        opacity: 0.5;
    }

    100% {
        transform: rotate(-10deg) translateX(50px);
        opacity: 0.8;
    }
}

/* Conteneur principal */
.winner-container {
    z-index: 10;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

/* Sous-titre brillant */
.winner-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.8em;
    color: #D4AF37;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    animation: fadeIn 2s ease-out;
}

/* Le Nom du Vainqueur (Effet Or Liquide) */
.winner-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(5rem, 10vw, 9rem);
    line-height: 1;
    font-weight: 700;
    font-style: italic;
    background: linear-gradient(to bottom, #fff5c3 0%, #bf953f 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
    transform: scale(0.8);
    opacity: 0;
    margin: 0;
    position: relative;
}

/* Couronne au-dessus du vainqueur (Unicode) */
.winner-name::before {
    content: '👑';
    font-size: 0.4em;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    filter: drop-shadow(0 0 20px gold);
    animation: float-crown 3s ease-in-out infinite;
}

@keyframes float-crown {

    0%,
    100% {
        transform: translateX(-50%) rotate(-10deg) translateY(0);
    }

    50% {
        transform: translateX(-50%) rotate(-5deg) translateY(-15px);
    }
}

/* --- LE PODIUM 3D --- */
.podium-list {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    margin-top: 20px;
    z-index: 10;
}

.podium-step {
    width: 200px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Les boîtes (marches) */
.step-box {
    background: linear-gradient(to bottom, #2a2a2a, #111);
    border-top: 2px solid #444;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Hauteurs des marches */
.step-1 .step-box {
    height: 250px;
    border-top-color: #D4AF37;
    background: linear-gradient(to bottom, #463808, #1a1200);
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.2);
}

.step-2 .step-box {
    height: 160px;
    border-top-color: #C0C0C0;
    background: linear-gradient(to bottom, #3a3a3a, #111);
}

.step-3 .step-box {
    height: 100px;
    border-top-color: #CD7F32;
    background: linear-gradient(to bottom, #3d2616, #1a0d05);
}

/* Les noms sur le podium */
.step-name {
    margin-bottom: 15px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(20px);
    /* Animé par JS */
}

.step-1 .step-name {
    font-size: 2.5rem;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    margin-bottom: 25px;
}

/* Confettis Container */
#confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* --- TABLEAU D'HONNEUR (Fin de partie) --- */
.honor-container {
    margin-top: 60px;
    width: 85%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.03);
    /* Très léger fond */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    opacity: 0;
    /* Caché au début, animé par JS */
    transform: translateY(20px);
    z-index: 10;

    /* Scroll si trop de monde */
    max-height: 25vh;
    overflow-y: auto;
}

.honor-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
}

.honor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* Grille responsive */
    gap: 10px;
}

.honor-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #aaa;
}

.honor-rank {
    font-weight: bold;
    color: #555;
    margin-right: 10px;
    min-width: 25px;
}

.honor-score {
    color: var(--accent);
    /* Doré */
    font-weight: bold;
}

.wait-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 10, 0.4);
    /* Fond léger */
    backdrop-filter: blur(10px);
    padding: 60px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* --- 1. LE LOADER --- */
.loader-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 40px;
}

.loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.loader-ring::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: spin 4s linear infinite reverse;
}

.loader-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 30px var(--accent-glow);
    animation: pulse-core 2s ease-in-out infinite;
}

/* --- 2. TEXTES --- */
.wait-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.4em;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Conteneur des messages changeants */
.wait-message-container {
    position: relative;
    height: 40px;
    /* Hauteur fixe pour éviter que ça saute */
    width: 100%;
    display: flex;
    justify-content: center;
}

.msg {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-style: italic;
    color: var(--accent);
    opacity: 0;
    /* Animation en boucle pure CSS */
    animation: cycleMessages 15s linear infinite;
}

/* Décalage des messages pour qu'ils apparaissent l'un après l'autre */
.msg:nth-child(1) {
    animation-delay: 0s;
}

.msg:nth-child(2) {
    animation-delay: 3s;
}

.msg:nth-child(3) {
    animation-delay: 6s;
}

.msg:nth-child(4) {
    animation-delay: 9s;
}

.msg:nth-child(5) {
    animation-delay: 12s;
}

/* --- ANIMATIONS --- */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-core {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
        box-shadow: 0 0 10px var(--accent-glow);
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        box-shadow: 0 0 40px var(--accent);
    }
}

@keyframes cycleMessages {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    5% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Apparition */
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Reste visible */
    25% {
        opacity: 0;
        transform: translateY(-10px) scale(1.1);
    }

    /* Disparition vers le haut */
    100% {
        opacity: 0;
    }
}

/* --- AUDIO VISUALIZER (Blind Test) --- */
.visualizer-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.5s;
}

.visualizer-container.hidden {
    opacity: 0;
    display: none;
}

/* Le Cœur central */
.sonic-core {
    width: 80px;
    height: 80px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 50px var(--accent), 0 0 100px var(--accent-glow);
    animation: pulse-audio 1.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Les ondes de choc */
.sonic-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: ripple-audio 2s infinite linear;
}

.sonic-ring.delay-1 {
    animation-delay: 1s;
}

/* Une onde sinusoïdale stylisée (optionnelle) */
.sonic-wave {
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    animation: spin-slow 10s linear infinite;
}

/* Quand la musique est en pause/stop, on arrête l'animation */
.paused .sonic-core {
    animation: none;
    transform: scale(0.8);
    opacity: 0.5;
}

.paused .sonic-ring {
    animation: none;
    opacity: 0;
}

@keyframes pulse-audio {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.8;
    }
}

@keyframes ripple-audio {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 5px;
    }

    100% {
        transform: scale(3);
        opacity: 0;
        border-width: 0px;
    }
}

@keyframes spin-slow {
    100% {
        transform: rotate(360deg);
    }
}

/* --- STYLE PAUSE --- */
#pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 10, 0.85);
    /* Fond sombre semi-transparent */
    backdrop-filter: blur(15px);
    /* Effet de flou derrière */
    z-index: 1000;
    /* Par dessus TOUT */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pause-container {
    text-align: center;
    border: 1px solid var(--accent);
    padding: 60px 100px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    animation: float-pause 4s ease-in-out infinite;
}

.pause-icon {
    font-size: 4rem;
    color: var(--accent);
    margin-bottom: 20px;
    text-shadow: 0 0 20px var(--accent-glow);
}

.pause-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 5px;
    color: white;
    margin: 0 0 10px 0;
}

.pause-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-style: italic;
    color: #aaa;
}

.pause-loader {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.pause-loader span {
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: blink 1.5s infinite both;
}

.pause-loader span:nth-child(2) {
    animation-delay: 0.2s;
}

.pause-loader span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes float-pause {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}


/* --- GRILLE PICTIONARY --- */
#live-draw-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 20px;
    /* Un peu plus d'espace entre les cartes */

    width: 95%;
    /* On prend plus de largeur d'écran */
    max-width: 1600px;
    /* On élargit le conteneur max */
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;

    margin: 10px auto 0 auto;
    padding: 15px;
}

/* Style des petites cartes équipes */
.draw-card {
    width: 240px;
    /* <--- TAILLE IDEALE (Ni trop gros, ni trop petit) */

    background: white;
    padding: 10px;
    /* Un peu plus de padding interne */
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /* Ombre plus marquée */

    flex-shrink: 0;

    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform: scale(0);
}

.draw-card p {
    font-size: 1rem;
    color: black;
    /* Texte plus lisible */
    margin-top: 8px;
}

/* Le canvas à l'intérieur de la carte */
.draw-card canvas {
    width: 220px;
    /* <--- ADAPTÉ À LA CARTE */
    height: 220px;
    /* Carré parfait */

    background: #f0f0f0;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}

/* Message Spectateur (pour ceux qui ne jouent pas) */
.spectator-message {
    color: #888;
    font-style: italic;
    font-size: 1.5rem;
    margin-top: 50px;
    animation: fadeIn 1s;
}

/* --- VUE MORT SUBITE (GOLDEN ARENA) --- */
#golden-view {
    display: none;
    /* Géré par JS */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* Au-dessus de tout */
    background: radial-gradient(circle at center, #2a1d00 0%, #000000 90%);
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 1. LE CADRE QUI RESPIRE */
.golden-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 20px solid transparent;
    border-image: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border-image-slice: 1;
    box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.3);
    pointer-events: none;
    animation: border-pulse 4s infinite alternate;
}

@keyframes border-pulse {
    0% {
        opacity: 0.8;
        box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.1);
    }

    100% {
        opacity: 1;
        box-shadow: inset 0 0 150px rgba(255, 215, 0, 0.6);
    }
}

/* 2. LE TITRE MÉTALLIQUE */
.golden-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 8rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;

    /* Effet Métal */
    background: linear-gradient(to bottom, #cfc09f 22%, #634f2c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #3a2c0f 78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;

    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
    transform: scale(0.9);
    animation: title-pop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.golden-subtitle {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1em;
    color: #D4AF37;
    margin-bottom: 60px;
    font-size: 1.2rem;
    text-transform: uppercase;
}

/* 3. LE DUEL (JOUEUR VS JOUEUR) */
.duel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

.duellist-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    text-transform: uppercase;

    /* Petit effet de tremblement "Tension" */
    animation: tension-shake 3s infinite;
}

.vs-badge {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 4rem;
    color: #000;
    background: linear-gradient(135deg, #D4AF37, #F1C40F);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px #D4AF37;
    font-weight: bold;
    animation: pulse 1s infinite;
}

.golden-instruction {
    margin-top: 80px;
    color: #888;
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    animation: blink 2s infinite;
}

/* 4. POUSSIÈRE D'OR (PARTICULES) */
.gold-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.2;
    mix-blend-mode: overlay;
    animation: dust-float 20s linear infinite;
    pointer-events: none;
}

@keyframes title-pop {
    to {
        transform: scale(1);
    }
}

@keyframes tension-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    95% {
        transform: translateX(-2px);
    }

    97% {
        transform: translateX(2px);
    }
}

@keyframes dust-float {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100px 100px;
    }
}

/* --- AVATARS DANS LES SCORES --- */
.team-avatar-small {
    font-size: 1.8rem;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* Indicateur de couleur sur le côté de la ligne score */
.score-row {
    border-left: 5px solid transparent;
    /* Sera colorié par JS */
}

/* --- AVATARS DANS LE PODIUM --- */
.podium-avatar {
    font-size: 4rem;
    margin-bottom: 10px;
    animation: bounce 2s infinite ease-in-out;
    display: inline-block;
}

.step-1 .podium-avatar {
    font-size: 6rem;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- AVATARS DANS LA GRILLE ÉQUIPES --- */
.team-card-avatar {
    font-size: 3rem;
    margin-bottom: 10px;
    display: block;
}

.qr-link-text {
    margin-top: 20px;
    /* Espace avec le QR code */
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    /* Assez gros pour être lu de loin */
    font-weight: 700;
    /* Gras */
    color: var(--accent);
    /* Couleur Dorée (#D4AF37) */
    letter-spacing: 1px;
    /* Espacement des lettres */
    text-transform: lowercase;
    /* En minuscule pour faire "site web" */

    /* Petit effet lumineux pour le style */
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* --- UI CONNEXION ECRAN GEANT --- */
.room-entry-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 10, 0.6);
    backdrop-filter: blur(15px);
    padding: 60px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.5s ease-out;
}

.room-input {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--accent);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    width: 320px;
    text-transform: uppercase;
    letter-spacing: 15px;
    margin-bottom: 30px;
    outline: none;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    transition: all 0.3s ease;
}

.room-input:focus {
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.02);
}

.room-input.error {
    border-color: var(--error);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);
    animation: shake 0.4s ease-in-out;
}

.btn-gold {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 15px 50px;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-gold:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
    background: #e5c14d;
}

.btn-gold:active {
    transform: scale(0.95);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#feedback-result-view {
    background: radial-gradient(circle at center, #111 0%, #000 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    gap: 60px;
}

/* GRID DES NOTES */
.feedback-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
}

/* CARDS PREMIUM */
.feedback-card {
    flex: 1;
    min-width: 260px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.9));
    border-radius: 25px;
    padding: 50px 20px;

    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);

    box-shadow: 
        0 20px 40px rgba(0,0,0,0.7),
        inset 0 0 20px rgba(255,255,255,0.02);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feedback-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0,0,0,0.9),
        inset 0 0 20px rgba(255,255,255,0.04);
}

/* SCORE */
.fb-score {
    font-family: 'Montserrat', sans-serif;
    font-size: 6.5rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 15px;
    text-shadow: 0 0 40px var(--accent-glow);
}

/* TITRE */
.fb-label {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #eee;
    margin-bottom: 20px;
    opacity: 0.85;
}

/* ÉTOILES */
.fb-stars {
    font-size: 2.5rem;
    color: var(--accent);
    letter-spacing: 6px;
    text-shadow: 0 0 15px var(--accent-glow);
}

/* CONTAINER DU TOTAL */
.fb-total-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ROND DU TOTAL */
.fb-count-box {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent), #ffcc55);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-shadow: 
        0 0 60px var(--accent-glow),
        inset 0 0 30px rgba(255,255,255,0.3);

    animation: pulse 2s ease-in-out infinite;
}

#fb-total-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: #000;
}

.fb-count-box span {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 4px;
    margin-top: 5px;
    color: #111;
}

/* ANIMATION PULSE */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* --- TIERCE / COURSE DE CHEVAUX --- */
#tierce-track {
    width: 95% !important; /* Agrandissement */
    max-width: 1400px !important; /* Plus large */
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace entre les lignes */
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.tierce-lane {
    position: relative;
    width: 100%;
    height: 60px; /* Plus haut */
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.05) 0%, 
        rgba(255,255,255,0.05) 90%, 
        rgba(212, 175, 55, 0.2) 90% /* Ligne d'arrivée dorée */
    );
    border-bottom: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
}

/* Ligne d'arrivée visuelle */
.tierce-lane::after {
    content: '🏁';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Le conteneur qui bouge (Avatar + Feu) */
.racer-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet élastique */
    z-index: 2;
    width: 50px; /* Taille fixe pour le centrage */
    height: 50px;
}

/* L'Avatar du joueur */
.racer-avatar {
    width: 50px;
    height: 50px;
    font-size: 2rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 2;
    position: relative;
}

/* Le Nom du joueur sous l'avatar */
.racer-name {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 2px 4px #000;
}

/* --- EFFET DE FEU (COMBO) --- */
.fire-trail {
    position: absolute;
    top: 50%;
    left: 5px; /* Juste derrière l'avatar */
    transform: translateY(-50%) rotate(90deg); /* Oriente le feu vers l'arrière */
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ff9900 20%, #ff0000 60%, transparent 80%);
    filter: blur(5px);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Animation quand le feu est actif */
.racer-box.on-fire .fire-trail {
    opacity: 0.8;
    animation: burn 0.1s infinite alternate;
}

/* Particules supplémentaires */
.racer-box.on-fire::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 10px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #ffe600 10%, transparent 70%);
    filter: blur(2px);
    animation: sparks 0.2s infinite linear;
    z-index: 0;
}

@keyframes burn {
    0% { transform: translateY(-50%) rotate(90deg) scale(1); }
    100% { transform: translateY(-50%) rotate(90deg) scale(1.2) translateX(5px); }
}

@keyframes sparks {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(-20px, -10px) scale(0.5); }
}

.tierce-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 30px; /* Arrondi pour matcher la piste */
    opacity: 0.3; /* Transparence légère */
    z-index: 1; /* Derrière l'avatar (qui est à 2) */
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* Animation fluide */
    box-shadow: 0 0 15px currentColor; /* Effet néon */
    pointer-events: none; /* Pour ne pas gêner les clics */
}