/* ============================================
   WEEBMASTER - Styles CSS
   ============================================ */


[v-cloak] {
    display: none !important;
}

:root {
    /* Dark Theme (défaut) - Style Manga Doré */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-card: #1f1f1f;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --neon-primary: #FFD700;
    --neon-secondary: #FFA500;
    --accent-color: #FF8C00;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #FFA500;
}


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


body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    position: fixed;
    /* Garde ça pour bloquer le scroll */
    width: 100%;
    transition: background 0.3s ease, color 0.3s ease;
}

/* 🆕 PERMETTRE le pull-to-refresh mais bloquer le scroll horizontal */
html,
body {
    overscroll-behavior-x: none;
    /* Bloquer bounce horizontal uniquement */
    overscroll-behavior-y: auto;
    /* 🆕 Autoriser bounce vertical = pull-to-refresh */
}

/* ============================================
   PARTICLES BACKGROUND
   ============================================ */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.main-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ============================================
   HEADER SECTION
   ============================================ */
.header-section {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInDown 0.8s ease;
}

/* Welcome screen épuré */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 3rem;
}

/* Cacher le texte avant l'animation */
.welcome-screen .neon-text,
.welcome-screen .neon-text-alt {
    visibility: hidden;
}

.logo-title {
    font-size: 4.0rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1rem;
}

.neon-text {
    color: var(--neon-primary);
    text-shadow:
        0 0 0.5rem var(--neon-primary),
        0 0 1rem var(--neon-primary),
        0 0 2rem var(--neon-primary);
    animation: neonPulse 2s ease-in-out infinite;
}

.neon-text-alt {
    color: var(--neon-secondary);
    text-shadow:
        0 0 0.5rem var(--neon-secondary),
        0 0 1rem var(--neon-secondary),
        0 0 2rem var(--neon-secondary);
    animation: neonPulse 2s ease-in-out infinite 0.5s;
}

@keyframes neonPulse {

    0%,
    100% {
        text-shadow:
            0 0 0.5rem currentColor,
            0 0 1rem currentColor,
            0 0 2rem currentColor;
    }

    50% {
        text-shadow:
            0 0 1rem currentColor,
            0 0 2rem currentColor,
            0 0 4rem currentColor;
    }
}

.subtitle {
    font-size: 0.96rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    background: rgba(239, 68, 68, 0.2);
    padding: 0.3125rem 0.875rem;
    border-radius: 0.875rem;
    border: 0.0875rem solid #ef4444;
    margin-top: 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    animation: pulse 2s infinite;
}

.pulse-dot {
    width: 0.375rem;
    height: 0.375rem;
    background: #ef4444;
    border-radius: 50%;
    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {

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

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* 🆕 Badge EN LIVE discret en bas (pour non-connectés) */
.live-badge-bottom {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(239, 68, 68, 0.15);
    padding: 0.3rem 0.8125rem;
    border-radius: 0.8125rem;
    border: 0.075rem solid rgba(239, 68, 68, 0.4);
    font-weight: 500;
    font-size: 0.68rem;
    opacity: 0.8;
    z-index: 100;
    animation: subtlePulse 3s infinite;
}

.pulse-dot-small {
    width: 0.4rem;
    height: 0.4rem;
    background: #ef4444;
    border-radius: 50%;
    animation: pulseDot 1.5s infinite;
}

@keyframes subtlePulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.6;
    }
}

/* ============================================
   CONTENT SECTION
   ============================================ */
.content-section {
    max-width: 30rem;
    width: 100%;
    animation: fadeInUp 0.8s ease;
}

.game-section {
    max-width: 62.5rem;
    width: 100%;
    margin-top: -1.25rem;
}

/* ============================================
   CARDS
   ============================================ */
.info-card,
.lobby-card,
.question-card,
.results-card,
.gameover-card {
    background: var(--bg-card);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
    border: 0.05rem solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}


.icon-large {
    font-size: 3.2rem;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {

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

    50% {
        transform: translateY(-0.5rem);
    }
}

.info-card h2,
.lobby-card h2 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.info-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.small-text {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* ============================================
   USER WELCOME
   ============================================ */
.user-welcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem; /* Augmenter */
    text-align: left;
}

.avatar-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.welcome-text {
    color: var(--text-secondary);
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
}

.username {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.separator {
    height: 2px;
    width: 50%; /* Ajouter */
    margin: 0 auto 1.25rem; /* Modifier */
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

/* ============================================
   LOBBY - MODIFIÉ POUR HORIZONTAL
   ============================================ */
.lobby-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0.625rem);
    border: 0.0625rem solid rgba(255, 193, 7, 0.3);
    border-radius: 1.25rem;
    padding: 1.875rem;
    max-width: 40.625rem;
    margin: 0 auto 1rem auto;
}

.lobby-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.lobby-stats {
    display: flex;
    justify-content: center;
    margin: 1.5625rem 0;
}

.stat-box-single {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.25rem 2.5rem;
    border-radius: 1rem;
    border: 0.0625rem solid rgba(255, 193, 7, 0.2);
}

.stat-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9375rem;
}


.stat-icon {
    font-size: 2rem;
    line-height: 1;
}

.stat-icon-img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.stat-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    letter-spacing: 0.0187rem;
}

.stat-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.9375rem 1.5625rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(255, 193, 7, 0.2);
    text-align: center;
    min-width: 7.5rem;
    transition: all 0.3s ease;
}

.stat-box:hover {
    border-color: var(--accent-color);
    transform: translateY(-0.25rem);
}

.stat-label {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.lobby-info {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.lobby-info p {
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary,
.btn-secondary,
.btn-join {
    width: 100%;
    padding: 0.8125rem 1.625rem;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}



.welcome-screen .btn-twitch {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.3s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--neon-primary), var(--accent-color));
    color: #000;
    box-shadow: 0 0.25rem 1rem rgba(255, 193, 7, 0.3);
}

.btn-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.5rem rgba(255, 193, 7, 0.6);
    filter: brightness(1.05);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 0.1rem solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    border-color: var(--accent-color);
    background: var(--bg-card);
}

.btn-primary:disabled,
.btn-join:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

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

    50% {
        transform: translateY(-0.5rem);
    }
}

/* ============================================
   GAME SECTION - NOUVEAU LAYOUT AÉRÉ
   ============================================ */

/* Container principal du jeu avec layout grid */
.game-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: 85vh;
}

/* ========== HUD JOUEUR - Plus compact et discret ========== */




.player-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.5rem;
    background: rgba(31, 31, 31, 0.156);
    backdrop-filter: blur(0.5rem);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    border: 0.05rem solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition:
        border-color 0.8s ease-in-out,
        box-shadow 0.8s ease-in-out;
}


.hud-shield-icon {
    position: absolute;
    right: -3.4375rem;
    /* 🔥 À droite, en dehors du HUD */
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.9375rem rgba(59, 130, 246, 0.8)) drop-shadow(0 0 1.875rem rgba(59, 130, 246, 0.4));
    animation: shieldIconFloat 2s ease-in-out infinite;
    pointer-events: none;
}

/* Animation flottante de l'icône */
@keyframes shieldIconFloat {

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

    50% {
        transform: translateY(-50%) translateY(-0.3125rem);
        /* 🔥 Mouvement ultra discret */
    }
}

/* Animation d'apparition/disparition */
.shield-icon-fade-enter-active {
    animation: shieldIconAppear 0.5s ease-out;
}

.shield-icon-fade-leave-active {
    animation: shieldIconDisappear 0.3s ease-in;
}

@keyframes shieldIconAppear {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.5) rotate(-180deg);
    }

    60% {
        transform: translateY(-50%) scale(1.1) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

@keyframes shieldIconDisappear {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.3) rotate(180deg);
    }
}


.hud-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
}

.hud-label {
    font-size: 0.56rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 500;
}

.hud-value {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lives-display {
    flex-direction: row;
    gap: 0.5rem;
}

.hearts {
    display: flex;
    gap: 0.25rem;
}

.heart {
    font-size: 0.88rem;
    transition: all 0.3s ease;
}

.heart.lost {
    opacity: 0.3;
    filter: grayscale(1);
}

/* ========== QUESTION CARD - Layout aéré et centré ========== */
.question-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    flex: 1;
    align-self: center;
    transform: translateY(-5vh);
}

/* ========== TIMER - Compact en haut à droite ========== */
.question-container-wrapper {
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    padding-top: 0;
}

.timer-circle-container {
    display: none !important;
}

/* 🆕 Barre de timer horizontale ultra-fine */
.timer-bar-container {
    width: 100%;
    height: 0.1875rem;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    border-radius: 0.125rem;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.timer-bar-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.timer-bar-progress {
    height: 100%;
    background: linear-gradient(90deg, #00ff88 0%, #00d46e 100%);
    transition: width 0.1s linear;
    border-radius: 0.125rem;
    box-shadow: 0 0 0.625rem rgba(0, 255, 136, 0.5);
}

.timer-bar-progress.warning {
    background: linear-gradient(90deg, #ff4757 0%, #ff2e43 100%);
    box-shadow: 0 0 0.625rem rgba(255, 71, 87, 0.5);
    animation: pulse-warning 0.5s ease-in-out infinite;
}

@keyframes pulse-warning {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.timer-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 6;
}

.timer-circle-progress {
    fill: none;
    stroke: var(--neon-primary);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s linear, stroke 0.3s ease;
    filter: drop-shadow(0 0 0.4rem var(--neon-primary));
}

.timer-circle-progress.warning {
    stroke: var(--error-color);
    filter: drop-shadow(0 0 0.4rem var(--error-color));
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.timer-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--neon-primary);
    text-shadow: 0 0 0.5rem var(--neon-primary);
}

.timer-circle-progress.warning+.timer-number {
    color: var(--error-color);
    text-shadow: 0 0 0.5rem var(--error-color);
}

/* ========== BADGES - Plus petits et discrets ========== */
.question-badges {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.serie-badge,
.difficulty-badge {
    padding: 0.35rem 0.6875rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.serie-badge {
    background: rgba(255, 215, 0, 0.15);
    color: var(--neon-primary);
    border: 0.05rem solid rgba(255, 215, 0, 0.3);
}

.difficulty-badge {
    border: 0.05rem solid;
}

.diff-veryeasy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
    border-color: rgba(16, 185, 129, 0.3);
}

.diff-easy {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.diff-medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
    border-color: rgba(245, 158, 11, 0.3);
}

.diff-hard {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error-color);
    border-color: rgba(239, 68, 68, 0.3);
}

.diff-veryhard {
    background: rgba(139, 0, 139, 0.15);
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.3);
}

/* ========== QUESTION TEXT - Plus petite et haute ========== */
.question-text {
    font-size: 1.17rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    max-width: 40rem;
    line-height: 1.4;
    margin: 0 0 1.5rem 0;
    padding: 0 1rem;
}

/* ========== RÉPONSES - Bien centrées ========== */
.answers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    /* Plus d'espace pour les bulles */
    width: 100%;
    max-width: 40.625rem;
    margin-top: 1.5rem;
    padding: 0 0.9375rem;
    /* Espace pour les bulles qui débordent */
}

.answers-grid.grid-6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 52rem;
    /* ← Ajuster si nécessaire */
    margin: 0 auto;
    /* ← Force le centrage */
    justify-content: center;
    justify-items: center;
}

.answer-btn {
    background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%);
    border: 0.125rem solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem 1.5rem 1.25rem 1.375rem / 1.375rem 1.25rem 1.5rem 1.125rem;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-family: 'Poppins', sans-serif;
    min-height: 4.5rem;
    min-width: 14rem;
    position: relative;
    overflow: visible;
    box-shadow:
        0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.05);
}

.answer-btn::before {
    content: '';
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%);
    border-radius: 50%;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0.125rem solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* Bulle nuage droite */
.answer-btn::after {
    content: '';
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%);
    border-radius: 50%;
    right: 0.375rem;
    bottom: -0.4rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.answer-btn:hover:not(.disabled) {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(145deg, #333 0%, #252525 100%);
    transform: translateY(-0.25rem) scale(1.02);
    box-shadow:
        0 0.75rem 1.875rem rgba(255, 215, 0, 0.15),
        0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1);
}


.answer-btn:hover:not(.disabled)::before,
.answer-btn:hover:not(.disabled)::after {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(145deg, #333 0%, #252525 100%);
    box-shadow: 0 0.25rem 0.75rem rgba(255, 215, 0, 0.1);
}

.answer-btn.selected {
    border-color: var(--neon-primary);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
    box-shadow:
        0 0 1.5625rem rgba(255, 215, 0, 0.3),
        0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.15);
    animation: cloudPulse 2s ease-in-out infinite;
}


.answer-btn.selected::before,
.answer-btn.selected::after {
    border-color: var(--neon-primary);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
    box-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.3);
}


@keyframes cloudPulse {

    0%,
    100% {
        box-shadow:
            0 0 1.5625rem rgba(255, 215, 0, 0.3),
            0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow:
            0 0 2.1875rem rgba(255, 215, 0, 0.4),
            0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
    }
}

.answer-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

.answer-btn.disabled::before,
.answer-btn.disabled::after {
    opacity: 0.5;
}

.answer-number {
    display: none !important;
}

.answer-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
    text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
}

/* ========== STATUS RÉPONSE ========== */
.answer-status {
    display: none !important;
}

/* ========== ÉLIMINÉ ========== */
.eliminated-notice {
    text-align: center;
    padding: 0.5rem 1rem;
    background: transparent;
    border-radius: 0;
    border: none;
    margin-top: 1rem;
    animation: fadeIn 0.3s ease;
}

.skull-icon {
    display: none;
}

.eliminated-notice h3 {
    display: none;
}

.eliminated-notice p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    opacity: 0.6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   RESULTS SECTION
   ============================================ */
.results-card {
    text-align: center;
    padding: 2rem;
}

.results-header {
    margin-bottom: 1.5rem;
}

.results-header h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.correct-answer-reveal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.6rem;
    border: 0.1rem solid var(--success-color);
}

.answer-badge {
    font-weight: 700;
    color: var(--success-color);
    font-size: 0.96rem;
}

/* Résultat personnel du joueur */
.personal-result {
    margin: 1.5rem 0;
}

.result-success,
.result-fail,
.result-afk {
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.75rem;
    animation: fadeInScale 0.5s ease;
}

.result-success {
    background: rgba(16, 185, 129, 0.1);
    border: 0.1rem solid var(--success-color);
}

.result-fail {
    background: rgba(239, 68, 68, 0.1);
    border: 0.1rem solid var(--error-color);
}

.result-afk {
    background: rgba(245, 158, 11, 0.1);
    border: 0.1rem solid var(--warning-color);
}


.personal-result h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.personal-result p {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* Stats simplifiées */
.simple-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.result-box {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0.75rem;
}

.result-box h4 {
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.chart-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 10rem;
    gap: 0.5rem;
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bar {
    width: 100%;
    min-height: 1rem;
    border-radius: 0.4rem 0.4rem 0 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    transition: all 0.5s ease;
}

.bar.correct {
    background: linear-gradient(180deg, var(--success-color), rgba(16, 185, 129, 0.5));
}

.bar.wrong {
    background: linear-gradient(180deg, var(--error-color), rgba(239, 68, 68, 0.5));
}

.bar.afk {
    background: linear-gradient(180deg, var(--warning-color), rgba(245, 158, 11, 0.5));
}

.bar-value {
    font-weight: 700;
    font-size: 0.96rem;
}

.bar-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.lives-distribution {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.life-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.life-icons {
    width: 5rem;
    font-size: 0.8rem;
}

.life-bar {
    flex: 1;
    height: 1.5rem;
    background: var(--bg-card);
    border-radius: 0.4rem;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-primary), var(--accent-color));
    transition: width 0.5s ease;
}

.life-count {
    min-width: 2rem;
    text-align: right;
    font-weight: 700;
    font-size: 0.88rem;
}

.elimination-banner {
    text-align: center;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 0.6rem;
    border: 0.1rem solid var(--error-color);
    margin-bottom: 1rem;
    font-size: 0.96rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.skull {
    font-size: 1.2rem;
}

.remaining-players {
    text-align: center;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.6rem;
    border: 0.1rem solid var(--success-color);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.trophy {
    font-size: 1.2rem;
}

/* ============================================
   GAME OVER
   ============================================ */
.gameover-card {
    text-align: center;
}

.trophy-icon {
    font-size: 4.0rem;
    margin-bottom: 1rem;
    animation: rotate 3s ease-in-out infinite;
}

@keyframes rotate {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

.winner-section {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 0.1rem solid var(--success-color);
}


.game-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 0;
}


.stat-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent-color);
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.8125rem 1.1875rem;
    background: var(--bg-card);
    border-radius: 0.6rem;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.3);
    z-index: 2000;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    border-left: 0.2rem solid var(--success-color);
}

.toast-error {
    border-left: 0.2rem solid var(--error-color);
}

.toast-info {
    border-left: 0.2rem solid var(--accent-color);
}

/* ============================================
   🆕 RÉSULTATS AMÉLIORÉS (Bug 2 fix)
   ============================================ */
.results-card-improved {
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: fadeInUp 0.5s ease;
}

.personal-result-improved {
    width: 100%;
}

.result-box-improved {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    background: var(--bg-card);
    border: 0.1rem solid;
    animation: fadeInScale 0.4s ease;
}

.result-box-improved.success {
    border-color: var(--success-color);
    background: rgba(16, 185, 129, 0.08);
}

.result-box-improved.fail {
    border-color: var(--error-color);
    background: rgba(239, 68, 68, 0.08);
}

.result-box-improved.timeout {
    border-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.08);
}

.result-indicator {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    flex-shrink: 0;
}

.result-box-improved.success .result-indicator {
    background: var(--success-color);
    color: #000;
}

.result-box-improved.fail .result-indicator {
    background: var(--error-color);
    color: #fff;
}

.result-box-improved.timeout .result-indicator {
    background: var(--warning-color);
    color: #000;
}

.result-content {
    flex: 1;
    text-align: left;
}

.result-content h3 {
    font-size: 1.0rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.result-content p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 0;
}

.correct-answer-improved {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: var(--bg-card);
    border-radius: 0.6rem;
    border: 0.1rem solid var(--success-color);
}

.answer-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.answer-value {
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--success-color);
}

.stats-compact {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.stat-compact {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 0.05rem solid var(--error-color);
    border-radius: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.stat-compact.alive {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
}

.stat-text {
    color: var(--text-primary);
}

/* ============================================
   GAME OVER - VERSION MINIMALISTE
   ============================================ */

.gameover-section {
    max-width: 57.5rem;
    margin: 0 auto;
}

.gameover-card-compact {
    background: transparent;
    /* 🔥 Fond transparent */
    border-radius: 0;
    padding: 2rem;
    border: none;
    /* 🔥 Pas de bordure */
    animation: fadeInUp 0.6s ease;
}

/* Layout horizontal */
.gameover-layout {
    display: grid;
    grid-template-columns: 1fr;
    /* Par défaut : 1 colonne (Mode Vie) */
    gap: 1.5rem;
    width: 100%;
}

.gameover-layout:has(.podium-column) {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 48rem) {
    .gameover-layout:has(.podium-column) {
        grid-template-columns: 1fr;
        /* 1 colonne sur mobile même avec podium */
    }
}

/* ========== COLONNE GAUCHE : WINNER ========== */
.winner-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.winner-box {
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(31, 31, 31, 0.4);
    /* 🔥 Fond subtil */
    backdrop-filter: blur(0.625rem);
    border-radius: 1rem;
    border: none;
    /* 🔥 Pas de bordure verte */
}

.trophy-icon {
    margin-bottom: 1rem;
}

.trophy-img {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 1.25rem rgba(255, 215, 0, 0.6));
    animation: float 3s ease-in-out infinite;
}


@keyframes float {

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

    50% {
        transform: translateY(-0.625rem);
    }
}


@keyframes trophyPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 1.25rem rgba(255, 215, 0, 0.6));
    }

    14% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 1.875rem rgba(255, 215, 0, 0.9));
    }

    28% {
        transform: scale(1);
        filter: drop-shadow(0 0 1.25rem rgba(255, 215, 0, 0.6));
    }

    42% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 1.875rem rgba(255, 215, 0, 0.9));
    }

    56% {
        transform: scale(1);
        filter: drop-shadow(0 0 1.25rem rgba(255, 215, 0, 0.6));
    }
}

.winner-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--bg-main);
    padding: 0.375rem 1rem;
    border-radius: 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.0625rem;
    margin-bottom: 0.75rem;
}

.winner-name {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    /* 🔥 Fallback pour navigateurs incompatibles */
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: none;
    /* 🔥 Retirer le text-shadow qui peut causer des conflits */
    filter: drop-shadow(0 0 1.25rem rgba(255, 215, 0, 0.4));
    /* 🔥 Utiliser drop-shadow à la place */
}

.winner-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.winner-stats .points-icon {
    font-size: 1.4rem;
}

.winner-stats .points-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--neon-primary);
    text-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.5);
}

.winner-stats .points-text {
    font-size: 0.9rem;
}

/* Égalité */
.tie-box {
    text-align: center;
    padding: 1.5rem;
    background: rgba(31, 31, 31, 0.4);
    backdrop-filter: blur(0.625rem);
    border-radius: 1rem;
    border: none;
}

.tie-badge {
    font-size: 1.2rem;
    color: var(--warning-color);
    font-weight: 700;
    margin-bottom: 1rem;
}

.tie-winners-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tie-winner-item {
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    border: none;
}

/* Aucun gagnant */
.no-winner-box {
    text-align: center;
    padding: 1.5rem;
    background: rgba(31, 31, 31, 0.4);
    backdrop-filter: blur(0.625rem);
    border-radius: 1rem;
    border: none;
}


.winner-box,
.tie-box,
.no-winner-box {
    background: var(--bg-card);
    border: 0.125rem solid var(--border);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 25rem;
}

.no-winner-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.no-winner-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Stats compactes */
.game-stats-compact {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    background: var(--bg-main);
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--border);
    width: 100%;
    max-width: 25rem;
}

.stat-compact-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-compact-item .stat-number {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent-color);
    line-height: 1;
}

.stat-compact-item .stat-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    /* 🔥 Plus discret */
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.stat-divider-compact {
    width: 0.0625rem;
    background: var(--border);
}

/* ========== COLONNE DROITE : PODIUM ========== */
.podium-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.podium-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.podium-compact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.podium-compact-item:hover {
    transform: translateX(0.25rem);
    border-color: var(--primary);
}

.podium-compact-item.rank-1 {
    border-color: #FFD700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
}

.podium-compact-item.rank-2 {
    border-color: #C0C0C0;
}

.podium-compact-item.rank-3 {
    border-color: #CD7F32;
}

.podium-compact-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
}

.rank-1 .podium-compact-rank {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: var(--bg-main);
}

.rank-2 .podium-compact-rank {
    background: linear-gradient(135deg, #C0C0C0, #808080);
    color: var(--bg-main);
}

.rank-3 .podium-compact-rank {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
    color: white;
}

.podium-compact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.podium-compact-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.podium-compact-points {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Bouton Retour */
.btn-home {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 25rem;
}

/* ========== RESPONSIVE MOBILE ========== */
@media (max-width: 38.375rem) {
    .gameover-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gameover-card-compact {
        padding: 1.25rem;
    }

    .trophy-img {
        width: 3.5rem;
        height: 3.5rem;
    }

    .winner-name {
        font-size: 1.4rem;
    }

    .winner-stats .points-number {
        font-size: 1.6rem;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-1.5rem);
    }

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

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ============================================
   RÉSULTATS - Question avec indicateurs visuels
   ============================================ */

.results-view {
    pointer-events: none;
}

.result-answer {
    position: relative;
    transition: all 0.4s ease;
}

.result-answer.correct {
    border-color: #00ff88 !important;
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 200, 100, 0.1) 100%) !important;
    box-shadow:
        0 0 1.875rem rgba(0, 255, 136, 0.4),
        0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
    animation: correctCloudGlow 1.5s ease-in-out infinite;
}


.result-answer.correct::before,
.result-answer.correct::after {
    border-color: #00ff88 !important;
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 200, 100, 0.1) 100%) !important;
    box-shadow: 0 0 0.9375rem rgba(0, 255, 136, 0.4);
}

@keyframes correctCloudGlow {

    0%,
    100% {
        box-shadow:
            0 0 1.875rem rgba(0, 255, 136, 0.4),
            0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow:
            0 0 2.8125rem rgba(0, 255, 136, 0.6),
            0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
    }
}

/* ========== RÉSULTATS - INCORRECT ========== */
.result-answer.wrong {
    border-color: #ff4757 !important;
    background: linear-gradient(145deg, rgba(255, 71, 87, 0.15) 0%, rgba(200, 50, 60, 0.1) 100%) !important;
    box-shadow:
        0 0 1.5625rem rgba(255, 71, 87, 0.3),
        0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
}

.result-answer.wrong::before,
.result-answer.wrong::after {
    border-color: #ff4757 !important;
    background: linear-gradient(145deg, rgba(255, 71, 87, 0.15) 0%, rgba(200, 50, 60, 0.1) 100%) !important;
    box-shadow: 0 0 0.75rem rgba(255, 71, 87, 0.3);
}

/* ========== RÉSULTATS - NON SÉLECTIONNÉ ========== */
.result-answer.unselected {
    opacity: 0.35;
}

.result-answer.unselected::before,
.result-answer.unselected::after {
    opacity: 0.35;
}

/* ========== ICÔNE RÉSULTAT ========== */
.result-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 0.625rem rgba(0, 255, 136, 0.5);
    animation: popIn 0.3s ease;
    z-index: 2;
}

.result-icon.wrong-icon {
    color: #ff4757;
    text-shadow: 0 0 0.625rem rgba(255, 71, 87, 0.5);
}

@keyframes popIn {
    0% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translateY(-50%) scale(1.2);
    }

    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

.survivors-count {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    width: 100%;
}

/* ============================================
   🆕 ANIMATIONS D'APPARITION DES QUESTIONS
   ============================================ */

.question-card:not(.results-view) .question-badges {
    animation: fadeInUp 0.4s ease-out 0s backwards;
}

.question-card:not(.results-view) .question-text {
    animation: fadeInUp 0.5s ease-out 0.1s backwards;
}

.question-card:not(.results-view) .answers-grid {
    animation: fadeInScale 0.5s ease-out 0.2s backwards;
}

.question-card:not(.results-view) .answer-btn:nth-child(1) {
    animation: cloudFloatIn 0.5s ease-out 0.2s backwards;
}

.question-card:not(.results-view) .answer-btn:nth-child(2) {
    animation: cloudFloatIn 0.5s ease-out 0.3s backwards;
}

.question-card:not(.results-view) .answer-btn:nth-child(3) {
    animation: cloudFloatIn 0.5s ease-out 0.4s backwards;
}

.question-card:not(.results-view) .answer-btn:nth-child(4) {
    animation: cloudFloatIn 0.5s ease-out 0.5s backwards;
}

.question-card:not(.results-view) .answer-btn:nth-child(5) {
    animation: cloudFloatIn 0.5s ease-out 0.6s backwards;
}

.question-card:not(.results-view) .answer-btn:nth-child(6) {
    animation: cloudFloatIn 0.5s ease-out 0.7s backwards;
}


@keyframes cloudFloatIn {
    0% {
        opacity: 0;
        transform: translateY(1.875rem) scale(0.8);
    }

    60% {
        transform: translateY(-0.3125rem) scale(1.02);
    }

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

.timer-bar-container:not(.hidden) {
    animation: fadeInScale 0.3s ease-out 0s backwards;
}

.question-card.results-view .question-badges {
    animation: fadeInUp 0.3s ease-out 0s backwards;
}

.question-card.results-view .question-text {
    animation: fadeInUp 0.3s ease-out 0.05s backwards;
}

.question-card.results-view .answers-grid {
    animation: fadeInScale 0.4s ease-out 0.1s backwards;
}

.question-card.results-view .survivors-count {
    animation: fadeInUp 0.4s ease-out 0.5s backwards;
}

.answer-status {
    animation: fadeInScale 0.4s ease-out 0.7s backwards;
}

.eliminated-notice {
    animation: fadeInScale 0.5s ease-out 0.3s backwards;
}

/* ============================================
   NOTIFICATIONS RÉPONSE JOUEUR - 2 TRAJECTOIRES FLUIDES V3
   ============================================ */
.answer-notification {
    position: fixed;
    left: 9.375rem;
    top: 62%;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(0.5rem);
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
    will-change: transform, opacity;
}

.notif-username {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--neon-primary);
    text-shadow: 0 0 0.375rem rgba(255, 215, 0, 0.3);
}

.notif-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.answer-notification.path1 {
    animation: curvedPath1 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes curvedPath1 {
    0% {
        opacity: 0;
        transform: translate(-0.625rem, 0.625rem) scale(0.85);
    }

    3% {
        opacity: 0.9;
        transform: translate(-0.9375rem, -0.3125rem) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-1.875rem, -13.75rem) scale(0.85);
    }
}

.answer-notification.path2 {
    animation: curvedPath2 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes curvedPath2 {
    0% {
        opacity: 0;
        transform: translate(0.625rem, 0.625rem) scale(0.85);
    }

    3% {
        opacity: 0.9;
        transform: translate(1.25rem, -0.3125rem) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(3.75rem, -12.5rem) scale(0.85);
    }
}

/* ============================================
   LEADERBOARD - FIX COMPLET DESKTOP + MOBILE
   ============================================ */
.leaderboard-container {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    width: 70%;
    max-width: 15rem;
    height: auto;
    max-height: calc(100vh - 2.5rem);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(0.5rem);
    border-radius: 0.75rem;
    padding: 1rem;
    z-index: 500;
    border: none;

    /* DESKTOP - Visible par défaut */
    transform: translateX(0);
    pointer-events: auto;
    opacity: 0.5;

    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        background 0.3s ease;

    animation: fadeInLeft 0.6s ease-out;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-1.875rem);
    }

    100% {
        opacity: 0.5;
        transform: translateX(0);
    }
}

/* Hover sur desktop */
.leaderboard-container:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.5);
}

.leaderboard-container.mobile-open {
    transform: translateX(0);
    pointer-events: auto;
    opacity: 1;
}

.leaderboard-title {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 500;
}

/* 🆕 Wrapper titre + icône redirection */
.leaderboard-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ranking-redirect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.35rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    margin-top: -6px;
    margin-left: 3px;
}

.ranking-redirect-btn svg {
    width: 0.7rem;
    height: 0.7rem;
}

.ranking-redirect-btn:hover {
    border-color: rgba(255, 215, 0, 0.5);
    color: var(--gold);
    background: rgba(255, 215, 0, 0.1);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.leaderboard-list::-webkit-scrollbar {
    width: 0.25rem;
}

.leaderboard-list::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 0.625rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
    transition: all 0.3s ease;
    animation: fadeInItem 0.4s ease-out backwards;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item:nth-child(1) {
    animation-delay: 0.1s;
}

.leaderboard-item:nth-child(2) {
    animation-delay: 0.2s;
}

.leaderboard-item:nth-child(3) {
    animation-delay: 0.3s;
}

.leaderboard-item:nth-child(4) {
    animation-delay: 0.4s;
}

.leaderboard-item:nth-child(5) {
    animation-delay: 0.5s;
}

.leaderboard-item:nth-child(6) {
    animation-delay: 0.6s;
}

.leaderboard-item:nth-child(7) {
    animation-delay: 0.7s;
}

.leaderboard-item:nth-child(8) {
    animation-delay: 0.8s;
}

.leaderboard-item:nth-child(9) {
    animation-delay: 0.9s;
}

.leaderboard-item:nth-child(10) {
    animation-delay: 1.0s;
}

@keyframes fadeInItem {
    0% {
        opacity: 0;
        transform: translateX(-0.625rem);
    }

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

.leaderboard-item.rank-1,
.leaderboard-item.rank-2,
.leaderboard-item.rank-3 {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.04);
}


.rank {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 1.25rem;
}

/* Top 3 ranks colorés */
.leaderboard-item.rank-1 .rank,
.leaderboard-item.rank-2 .rank,
.leaderboard-item.rank-3 .rank {
    color: var(--neon-primary);
    font-weight: 700;
}


.player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.player-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.player-title {
    font-size: 0.52rem;
    color: var(--text-secondary);
    opacity: 0.6;
    font-style: normal;
}

.player-winrate {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.leaderboard-item.rank-1 .player-winrate,
.leaderboard-item.rank-2 .player-winrate,
.leaderboard-item.rank-3 .player-winrate {
    color: var(--neon-primary);
}

.leaderboard-toggle-btn {
    display: none;
}

.leaderboard-close-btn {
    display: none;
}

.leaderboard-overlay {
    display: none;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 38.375rem) {

    /* Body - Empêcher scroll */
    body {
        overflow: hidden;
        height: 100vh;
    }

    /* Main container */
    .main-container {
        padding: 0.5rem;
    }

    /* Titre logo */
    .logo-title {
        font-size: 2rem !important;
    }

    .subtitle {
        font-size: 0.8rem;
    }

    /* Cards générales */
    .info-card,
    .lobby-card,
    .question-card,
    .results-card,
    .gameover-card {
        padding: 0.875rem;
        margin-bottom: 0.625rem;
        border-radius: 0.75rem;
        margin-left: 1rem;
        margin-right: 1rem;
        max-width: calc(100% - 2rem);
    }

    /* Lobby spécifique */
    .lobby-card {
        padding: 1.25rem 1rem;
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        max-width: calc(100% - 2.5rem);
    }

    /* Info card spécifique */
    .info-card {
        padding: 1.25rem 1rem;
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        max-width: calc(100% - 2.5rem);
    }

    .lobby-header {
        margin-bottom: 0.75rem;
    }

    .lobby-header h2 {
        font-size: 1.0rem;
        margin-bottom: 0;
    }

    .lobby-stats {
        margin: 1rem 0;
    }

    .stat-box-single {
        padding: 0.75rem 1.5rem;
    }

    .stat-content {
        gap: 0.625rem;
    }

    .stat-number {
        font-size: 2.0rem;
    }

    .stat-icon {
        font-size: 1.8rem;
    }

    .stat-icon-img {
        width: 1.8rem;
        height: 1.8rem;
    }

    .stat-text {
        font-size: 0.9rem;
    }

    /* User welcome */
    .user-welcome {
        gap: 0.625rem;
        margin-bottom: 0.625rem;
    }

    .avatar-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.125rem;
    }

    .username {
        font-size: 0.95rem;
    }

    /* Titres */
    .info-card h2,
    .lobby-card h2 {
        font-size: 1.05rem;
        margin-bottom: 0.5rem;
    }

    .info-card p {
        font-size: 0.8rem;
        margin-bottom: 0.375rem;
    }

    /* Boutons */
    .btn-primary,
    .btn-secondary,
    .btn-twitch,
    .btn-join {
        padding: 0.625rem 1.25rem;
        font-size: 0.78rem;
        gap: 0.375rem;
    }

    /* Bouton déconnexion avec même marge que les cartes */
    .content-section > .btn-secondary {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        width: calc(100% - 2.5rem);
        max-width: calc(100% - 2.5rem);
    }

    /* Réduire le bouton Twitch */
    .btn-twitch {
        max-width: 17.5rem;
        margin: 0 auto;
    }

    /* Separator */
    .separator {
        margin: 0.75rem 0;
    }

    /* Question mobile */
    .question-container-wrapper {
        max-height: 90vh;
        padding-top: 1vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .timer-circle-container {
        width: 3rem;
        height: 3rem;
        top: 0.5rem;
        right: 0.75rem;
    }

    .timer-number {
        font-size: 1.0rem;
    }

    .question-text {
        font-size: 0.9rem;
        padding: 0 0.75rem;
        line-height: 1.3;
    }

    /* 🆕 Badges série et difficulté plus petits sur mobile */
    .serie-badge,
    .difficulty-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
        border-radius: 0.3rem;
        letter-spacing: 0.03rem;
    }

    .question-badges {
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .answers-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 0.625rem;
        /* Réduit de 16px à 10px */
        padding: 0 1rem;
    }

    .answers-grid.grid-6 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        /* Encore plus compact pour 6 réponses */
    }

    .answer-btn {
        padding: 0.75rem 1rem;
        /* Réduit de 14px 20px */
        min-height: 3rem;
        /* Réduit de 58px */
        width: 100%;
        min-width: unset;
        border-radius: 1.25rem 2.5rem 2.1875rem 2.375rem / 2.375rem 2.1875rem 2.5rem 2rem;
    }

    .answers-grid.grid-6 .answer-btn {
        min-height: 4rem;
        width: 100%;
        min-width: unset;
        /* ← NOUVEAU */
        padding: 1rem 1.5rem;
        border-radius: 0.875rem 1.25rem 1rem 1.125rem / 1.125rem 1rem 1.25rem 0.875rem;
        /* ← Moins arrondi */
    }

    .answer-btn::before {
        width: 0.625rem;
        /* ← Réduit de 0.75rem */
        height: 0.625rem;
        left: -0.375rem;
        border-radius: 50%;
    }

    .answer-btn::after {
        width: 0.5rem;
        /* ← Réduit de 0.75rem */
        height: 0.5rem;
        right: 0.5rem;
        bottom: -0.125rem;
        border-radius: 50%;
    }

    .answers-grid.grid-6 .answer-btn::before {
        width: 0.75rem;
        height: 0.75rem;
        left: -0.1875rem;
    }

    .answers-grid.grid-6 .answer-btn::after {
        width: 0.625rem;
        height: 0.625rem;
    }

    .answer-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8rem;
    }

    .answer-text {
        font-size: 0.85rem;
        /* Réduit de 0.9rem */
        line-height: 1.25;
    }

    .answers-grid.grid-6 .answer-text {
        font-size: 0.78rem;
    }

    /* HUD */
    .player-hud {
        flex-wrap: nowrap;
        gap: 0.375rem;
        padding: 0.5rem 0.625rem;
        margin-bottom: 0.75rem;
    }

    .results-view .answers-grid.grid-6~.survivors-count {
        display: none;
    }

    .hud-item {
        flex: 1;
        min-width: 4rem;
    }

    .hud-label {
        font-size: 0.5rem;
    }

    .hud-value {
        font-size: 0.7rem;
    }

    /* Game section */
    .game-section {
        max-width: 100%;
        margin-top: 0;
        padding: 0.5rem;
    }

    /* Results */
    .results-grid {
        grid-template-columns: 1fr;
    }

    .game-stats {
        flex-direction: column;
        gap: 1rem;
    }

    /* Notifications */
    .answer-notification {
        display: none;
    }

    .notif-username {
        font-size: 0.7rem;
    }

    .notif-text {
        font-size: 0.65rem;
    }

    @keyframes curvedPath1 {
        0% {
            opacity: 0;
            transform: translate(-0.5rem, 0.5rem) scale(0.85);
        }

        3% {
            opacity: 0.9;
            transform: translate(-0.75rem, -0.25rem) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(-1.25rem, -9.375rem) scale(0.85);
        }
    }

    @keyframes curvedPath2 {
        0% {
            opacity: 0;
            transform: translate(0.5rem, 0.5rem) scale(0.85);
        }

        3% {
            opacity: 0.9;
            transform: translate(0.9375rem, -0.25rem) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(4.375rem, -8.75rem) scale(0.85);
        }
    }

    /* ============================================
    LEADERBOARD MOBILE - FIX COMPLET
    ============================================ */

    /* 🔥 FIX: Désactiver TOUTES les animations sur mobile */
    .leaderboard-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 18rem;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0 1rem 1rem 0;
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.95);
        padding: 1.25rem 1rem;
        animation: none;
    }

    .leaderboard-container.mobile-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .leaderboard-title {
        font-size: 0.75rem;
        letter-spacing: 0.1rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .leaderboard-list {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }

    .leaderboard-item {
        padding: 0.65rem 0;
        gap: 0.75rem;
        animation: none;
    }

    .rank {
        font-size: 0.65rem;
        min-width: 1.5rem;
    }

    .player-name {
        font-size: 0.8rem;
    }

    .player-title {
        font-size: 0.55rem;
    }

    .player-winrate {
        font-size: 0.75rem;
    }

    .leaderboard-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 1rem;
        left: 1rem;
        width: 2.75rem;
        height: 2.75rem;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 50%;
        color: var(--neon-primary);
        z-index: 499;
        cursor: pointer;
        transition: all 0.3s ease;
    }

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

    .leaderboard-toggle-btn.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .leaderboard-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0.25rem;
        transition: color 0.2s ease;
    }

    .leaderboard-close-btn:hover {
        color: var(--neon-primary);
    }

    .leaderboard-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 498;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .leaderboard-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================
   PROFIL & BADGES SYSTEM
   ============================================ */

/* Bouton Profil (en haut à droite) */
.profile-btn {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 3rem;
    height: 3rem;
    background: rgba(31, 31, 31, 0.8);
    backdrop-filter: blur(0.625rem);
    border: 0.1rem solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 500;
    color: var(--neon-primary);
}

.profile-btn:hover {
    transform: scale(1.1);
    border-color: var(--neon-primary);
    box-shadow: 0 0 1.25rem rgba(255, 215, 0, 0.4);
}

.profile-btn svg {
    filter: drop-shadow(0 0 0.25rem rgba(255, 215, 0, 0.3));
}



.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.0312rem;
}


.section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}


.badge-icon {
    font-size: 1.8rem;
}

.badge-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}


.title-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.title-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.title-requirement {
    font-size: 0.7rem;
    color: var(--text-secondary);
}



.spectator-card {
    text-align: center;
}

.spectator-icon {
    font-size: 3.2rem;
    margin-bottom: 1rem;
}

/* 🆕 Notification de kick discrète */
.kick-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    color: #ff6b6b;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.kick-notification.show {
    opacity: 0.6;
}

/* Mobile: centré en bas */
@media (max-width: 768px) {
    .kick-notification {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
    }
    
    .kick-notification.show {
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   INSTAGRAM BUTTON - Côte à côte en bas à gauche
   ============================================ */
.instagram-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 0.9375rem;
    /* Premier à gauche */
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    animation: slideInLeft 0.8s ease-out;
}

.instagram-btn:hover {
    transform: scale(1.1);
    color: var(--neon-primary);
    filter: drop-shadow(0 0 0.5rem rgba(255, 215, 0, 0.3));
}

.instagram-btn svg {
    transition: all 0.3s ease;
}

/* ============================================
   TIKTOK BUTTON - À côté d'Instagram
   ============================================ */
.tiktok-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 3.75rem;
    /* 24px + 48px (largeur insta) + 8px gap */
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    animation: slideInLeft 0.8s ease-out;
}

.tiktok-btn:hover {
    transform: scale(1.1);
    color: var(--neon-primary);
    filter: drop-shadow(0 0 0.5rem rgba(255, 215, 0, 0.3));
}

.tiktok-btn svg {
    transition: all 0.3s ease;
}

/* Animation slide depuis la gauche */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateY(1.875rem);
    }

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

/* Mobile */
@media (max-width: 38.375rem) {
    .instagram-btn {
        bottom: 1.25rem;
        /* Au lieu de 80px */
        left: 1.25rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .tiktok-btn {
        bottom: 1.25rem;
        /* Au lieu de 80px */
        left: 4.5rem;
        /* 20px + 44px + 8px gap */
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ============================================
   HUD JOUEUR - MODE POINTS
   ============================================ */
.hud-item.points-display {
    flex-direction: column;
    /* 🔥 Comme les autres hud-item */
    gap: 0.2rem;
    /* 🔥 Même gap que les autres */
    align-items: center;
}

.points-counter {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.points-icon {
    font-size: 1rem;
}

.points-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--neon-primary);
    text-shadow: 0 0 0.5rem rgba(255, 215, 0, 0.3);
}

/* ============================================
   ANIMATION +X POINTS
   ============================================ */
.points-animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
}

.points-gained {
    font-size: 2rem;
    font-weight: 900;
    color: var(--success-color);
    text-shadow:
        0 0 0.625rem rgba(16, 185, 129, 0.8),
        0 0 1.25rem rgba(16, 185, 129, 0.5);
    animation: pointsPopUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pointsPopUp {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0);
    }

    20% {
        opacity: 1;
        transform: scale(1.2) translateY(-0.625rem);
    }

    50% {
        transform: scale(1) translateY(-1.25rem);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-3.75rem);
    }
}


.tie-section-improved {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 0.1rem solid var(--warning-color);
}

.tie-label {
    font-size: 0.9rem;
    color: var(--warning-color);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.tie-winners {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tie-winner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-main);
    border-radius: 0.5rem;
    border: 0.0625rem solid rgba(255, 165, 0, 0.3);
}

.tie-winner-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tie-winner-points {
    font-size: 1rem;
    font-weight: 600;
    color: var(--warning-color);
}

/* ============================================
   AUCUN GAGNANT
   ============================================ */
.no-winner-section {
    text-align: center;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 0.1rem solid var(--text-secondary);
}

.no-winner-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.no-winner-text {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 600;
}


/* ============================================
   WINNER STATS - MODE POINTS
   ============================================ */
.winner-points {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.points-icon-large {
    font-size: 2rem;
}

.points-number-large {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--neon-primary);
    text-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.5);
}

.points-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* ============================================
   PODIUM TOP 3
   ============================================ */
.podium-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--border);
}

.podium-title {
    font-size: 1rem;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 600;
}

.podium-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.podium-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 0.5rem;
    border: 0.1rem solid var(--border);
    transition: all 0.3s ease;
}

.podium-item.rank-1 {
    border-color: #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
}

.podium-item.rank-2 {
    border-color: #C0C0C0;
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent);
}

.podium-item.rank-3 {
    border-color: #CD7F32;
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent);
}

.podium-rank {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neon-primary);
    color: var(--bg-main);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.podium-item.rank-1 .podium-rank {
    background: #FFD700;
    box-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.5);
}

.podium-item.rank-2 .podium-rank {
    background: #C0C0C0;
}

.podium-item.rank-3 .podium-rank {
    background: #CD7F32;
}

.podium-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.podium-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.podium-points {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--neon-primary);
}


/* ============================================
   SYSTÈME DE COMBO & BONUS
   ============================================ */

/* ========== JAUGE DE COMBO (PC - Côté droit) ========== */
.combo-gauge-container {
    position: fixed;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    /* 🔥 Réduit de 40px à 32px */
    z-index: 400;
    opacity: 0.9;
}


.combo-gauge {
    width: 100%;
    height: 32rem;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(0.5rem);
    border: 0.125rem double rgba(238, 242, 242, 0.253);
    border-radius: 1.25rem;
    padding: 0.125rem 0.1875rem;
    /* 🔥 Padding horizontal réduit */
    position: relative;
    overflow: visible;
    /* 🔥 Changé de hidden à visible pour voir le label */
}

.combo-gauge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.03));
    pointer-events: none;
}



.combo-bar-wrapper {
    height: 31.5rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* 🔥 AJOUTÉ ici pour garder la barre contenue */
}

.combo-bar-bg {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.9375rem;
    position: relative;
    overflow: visible;
    /* 🔥 CHANGÉ de hidden à visible */
}



/* Barre de progression */
.combo-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,
            rgba(255, 215, 0, 0.4) 0%,
            rgba(255, 215, 0, 0.7) 50%,
            var(--neon-primary) 100%);
    border-radius: 1rem !important;
    /* 🔥 AJOUTÉ - Force l'arrondi en permanence */

    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 0 1.25rem rgba(255, 215, 0, 0.4);
    transform-origin: bottom;
}


/* 🔥 Quand on level-up, on override la transition */
.combo-bar-fill.level-up-complete {
    animation: levelUpCelebration 1.5s ease-out forwards;
    box-shadow:
        0 0 2.5rem rgba(255, 215, 0, 1),
        0 0 5rem rgba(255, 215, 0, 0.8),
        0 0 7.5rem rgba(255, 215, 0, 0.6),
        inset 0 0 2.5rem rgba(255, 255, 255, 0.5);

    /* 🔥 FORCER le border-radius pendant toute l'animation */
    border-radius: 0.9375rem !important;

    /* 🔥 Empêcher TOUTE modification de hauteur */
    overflow: hidden;
}

/* 🔥 REMPLACER @keyframes levelUpCelebration - SANS transform: scaleY() */
@keyframes levelUpCelebration {
    0% {
        filter: brightness(1);
        /* 🔥 PAS de transform scaleY */
    }

    10% {
        filter: brightness(1.5);
    }

    25% {
        filter: brightness(2);
    }

    50% {
        filter: brightness(2.5);
    }

    75% {
        filter: brightness(2);
    }

    100% {
        filter: brightness(1.8);
    }
}



/* 🔥 Wrapper pour l'animation de level-up */
.combo-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: inherit;
    opacity: 0;
    transform: scaleY(1);
    transform-origin: bottom;
    pointer-events: none;
}



/* Particules dorées au level up */
.combo-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    /* 🔥 AJOUTÉ */
    z-index: 10;
    /* 🔥 AJOUTÉ pour être au-dessus */
}

.combo-particles-external {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    overflow: visible;
}

.particle {
    position: absolute;
    width: 0.375rem;
    height: 0.375rem;
    background: radial-gradient(circle, var(--neon-primary), var(--neon-secondary));
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 0.625rem var(--neon-primary),
        0 0 1.25rem var(--neon-primary),
        0 0 1.875rem rgba(255, 215, 0, 0.5);
    animation: particleBurst 1.2s ease-out forwards;
}

@keyframes particleBurst {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translateY(-1.875rem) translateX(var(--drift)) scale(1.2);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-3.75rem) translateX(var(--drift)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-6.25rem) translateX(var(--drift)) scale(0.3);
    }
}

.combo-level-indicator {
    position: absolute;
    bottom: -3.125rem;
    left: 50%;
    transform: translateX(-50%);

    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.3),
            rgba(255, 165, 0, 0.3));
    color: var(--neon-primary);
    padding: 0.375rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.0938rem;
    white-space: nowrap;

    box-shadow:
        0 0 0.9375rem rgba(255, 217, 0, 0.164),
        0 0 1.875rem rgba(255, 215, 0, 0.2),
        inset 0 0 1.25rem rgba(255, 215, 0, 0.1);

    animation: levelIndicatorPulse 2s ease-in-out infinite;

    text-shadow:
        0 0 0.625rem rgba(255, 215, 0, 0.8),
        0 0 1.25rem rgba(255, 215, 0, 0.4),
        0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}


.combo-level-indicator:has-text("MAX") {
    font-size: 0.55rem;
    /* Légèrement plus petit pour "MAX" */
    padding: 0.375rem 1rem;
    /* Un peu plus large */
}

@keyframes levelIndicatorPulse {

    0%,
    100% {
        box-shadow:
            0 0 0.9375rem rgba(255, 215, 0, 0.4),
            0 0 1.875rem rgba(255, 215, 0, 0.2),
            inset 0 0 1.25rem rgba(255, 215, 0, 0.1);
        transform: translateX(-50%) scale(1);
    }

    50% {
        box-shadow:
            0 0 1.25rem rgba(255, 215, 0, 0.6),
            0 0 2.5rem rgba(255, 215, 0, 0.3),
            inset 0 0 1.5625rem rgba(255, 215, 0, 0.15);
        transform: translateX(-50%) scale(1.05);
    }
}



/* Effet de disparition (300ms) - Fade-out élégant */
.combo-bar-fill.level-up-fadeout {
    animation: levelUpFadeOut 0.3s ease-out forwards;

    /* 🔥 GARDER le border-radius */
    border-radius: 0.9375rem !important;

    /* 🔥 Empêcher toute modification de hauteur */
    overflow: hidden;
}

@keyframes levelUpFadeOut {
    0% {
        opacity: 1;
        filter: brightness(1.8);
    }

    100% {
        opacity: 0;
        filter: brightness(0.5);
    }
}



/* Label MAX */
.combo-max-label {
    position: absolute;
    top: -1.875rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    color: var(--bg-main);
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.0625rem;
    box-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.5);
    animation: maxPulse 2s ease-in-out infinite;
}


@keyframes maxPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }
}

/* ============================================
   🆕 NOUVEAU SYSTÈME BONUS - ICÔNE + HOVER MENU
   ============================================ */

.bonus-icon-container {
    position: fixed;
    right: 1.93rem;
    top: calc(50% - 19.5rem);
    /* 🔥 Juste au-dessus de la jauge (qui fait 407px + marge) */
    z-index: 500;
}

.bonus-icon-wrapper {
    position: relative;
    cursor: pointer;
}

/* Icône principale */
.bonus-main-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(31, 31, 31, 0.6);
    backdrop-filter: blur(0.5rem);
    border: 0.125rem solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.bonus-main-icon svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

/* État actif (bonus disponibles) */
.bonus-main-icon.active {
    border-color: rgba(255, 215, 0, 0.4);
}

.bonus-main-icon:not(.active) {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.4;
}

.bonus-main-icon:not(.active) svg {
    fill: rgba(255, 255, 255, 0.2);
}

.bonus-main-icon.active svg {
    fill: var(--neon-primary);
    filter: drop-shadow(0 0 0.375rem rgba(255, 215, 0, 0.4));
}

.bonus-icon-wrapper:hover .bonus-main-icon.active {
    border-color: var(--neon-primary);
    box-shadow: 0 0 1.25rem rgba(255, 215, 0, 0.3);
}

/* Badge compteur */
.bonus-count-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    width: 1.25rem;
    height: 1.25rem;
    background: #ff4757;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 0.125rem solid var(--bg-primary);
    box-shadow: 0 0 0.75rem rgba(255, 71, 87, 0.6);
}


/* Menu des bonus (container des strips) */
.bonus-menu {
    position: absolute;
    right: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.bonus-icon-wrapper:hover .bonus-menu {
    opacity: 1;
    pointer-events: auto;
}

.bonus-menu .bonus-strip {
    animation: bonusMenuSlideIn 0.3s ease-out backwards;
}

.bonus-menu .bonus-strip:nth-child(1) {
    animation-delay: 0s;
}

.bonus-menu .bonus-strip:nth-child(2) {
    animation-delay: 0.05s;
}

.bonus-menu .bonus-strip:nth-child(3) {
    animation-delay: 0.1s;
}



/* Bandelette individuelle */
.bonus-strip {
    padding: 0.5625rem 1rem 0.5625rem 0.75rem;
    /* 🔥 MODIFIÉ: Plus d'espace à gauche pour l'icône */
    border-radius: 0.5rem;
    border-top-left-radius: 0%;
    border-bottom-left-radius: 0%;
    border: none;
    backdrop-filter: blur(0.625rem);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    min-width: 8.75rem;
    /* 🔥 MODIFIÉ: Élargi de 110px à 140px */
    text-align: left;
    /* 🔥 MODIFIÉ: Alignement à gauche */
    position: relative;
    overflow: hidden;
    display: flex;
    /* 🔥 NOUVEAU: Flexbox pour aligner icône + texte */
    align-items: center;
    gap: 0.625rem;
    /* 🔥 NOUVEAU: Espace entre icône et texte */
}

/* 🔥 NOUVEAU: Style de l'icône */
.bonus-icon-img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.25rem rgba(255, 215, 0, 0.3));
    transition: transform 0.3s ease, filter 0.3s ease;
    flex-shrink: 0;
    /* Empêcher le rétrécissement */
}

.bonus-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0) 30%,
            rgba(255, 215, 0, 0.15) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}


.bonus-strip.available::before {
    opacity: 1;
}


.bonus-strip.available:hover::before {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0) 40%,
            rgba(255, 217, 0, 0.047) 100%);
}

.bonus-strip-text {
    font-size: 0.7rem;
    /* 🔥 MODIFIÉ: Légèrement plus grand (0.6 → 0.7) */
    font-weight: 600;
    letter-spacing: 0.0312rem;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    flex: 1;
    /* Prendre l'espace restant */
}

/* 🔥 REFONTE: Compteur individuel par bonus */
.bonus-strip-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #f0c14b;
    background: rgba(240, 193, 75, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    min-width: 1.75rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.bonus-strip.locked .bonus-strip-count {
    color: #555;
    background: rgba(255, 255, 255, 0.05);
}

.bonus-strip.available .bonus-strip-count {
    color: #f0c14b;
    background: rgba(240, 193, 75, 0.2);
}

/* 🔥 État LOCKED (grisé, non débloqué) */
.bonus-strip.locked {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(60, 60, 60, 0.15) 40%,
            rgba(60, 60, 60, 0.3) 100%);
    opacity: 0.4;
    cursor: not-allowed;
}

.bonus-strip.locked .bonus-strip-text {
    color: rgba(255, 255, 255, 0.3);
}

/* 🔥 État AVAILABLE (disponible) */
.bonus-strip.available {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.03) 40%,
            /* 🔥 RÉDUIT de 0.08 à 0.03 */
            rgba(255, 215, 0, 0.08) 100%
            /* 🔥 RÉDUIT de 0.15 à 0.08 */
        );
}

.bonus-strip.available .bonus-strip-text {
    color: rgb(253, 253, 238);
    opacity: 0.7;
    text-shadow: 0 0 0.5rem rgba(255, 215, 0, 0.3);
}

.bonus-strip.available:hover {
    transform: scale(1.08);
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.08) 40%,
            /* 🔥 RÉDUIT de 0.15 à 0.08 */
            rgba(255, 215, 0, 0.15) 100%
            /* 🔥 RÉDUIT de 0.25 à 0.15 */
        );
    /* box-shadow: 0 4px 16px rgba(255, 215, 0, 0.2); */
}


/* 🆕 État DISABLED (pas utilisable en ce moment) */
.bonus-strip.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.bonus-strip.available.disabled {
    background: linear-gradient(90deg,
            rgba(60, 60, 60, 0.2) 0%,
            rgba(60, 60, 60, 0.1) 60%,
            transparent 100%) !important;
}

.bonus-strip.available.disabled::before {
    opacity: 0 !important;
}

.bonus-strip.disabled .bonus-strip-text {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* 🔥 État USED (déjà utilisé) */
.bonus-strip.used {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(40, 40, 40, 0.1) 40%,
            rgba(40, 40, 40, 0.2) 100%);
    opacity: 0.25;
    cursor: not-allowed;
}

.bonus-strip.used .bonus-strip-text {
    color: rgba(231, 21, 21, 0.2);
    text-decoration: line-through;
}

/* 🎨 Couleurs spécifiques par bonus */

/* 
.bonus-strip.available:nth-child(1) {
    background: rgba(37, 40, 3, 0.482); 
    border-color: rgba(255, 237, 34, 0.09);
}

.bonus-strip.available:nth-child(1):hover {
    background: rgba(83, 90, 7, 0.482); 
    border-color: rgba(255, 237, 34, 0.3);
}

.bonus-strip.available:nth-child(2) {
   background: rgba(37, 40, 3, 0.482); 
    border-color: rgba(255, 237, 34, 0.3);
}

.bonus-strip.available:nth-child(2):hover {
    background: rgba(83, 90, 7, 0.482); 
    border-color: rgba(255, 237, 34, 0.3);
}

.bonus-strip.available:nth-child(3) {
    background: rgba(37, 40, 3, 0.482); 
    border-color: rgba(255, 237, 34, 0.3);
}

.bonus-strip.available:nth-child(3):hover {
    background: rgba(83, 90, 7, 0.482); 
    border-color: rgba(255, 237, 34, 0.3);
} */



@keyframes bonusMenuSlideIn {
    0% {
        transform: translateX(1.25rem);
    }

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

@keyframes bonusMenuSlideOut {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(1.25rem);
    }
}

/* Animation échelonnée des bandelettes */
.bonus-strip:nth-child(1) {
    animation-delay: 0s;
}

.bonus-strip:nth-child(2) {
    animation-delay: 0.05s;
}

.bonus-strip:nth-child(3) {
    animation-delay: 0.1s;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 38.375rem) {
    .bonus-icon-container {
        right: 4.75rem;
        /* À gauche du bouton profil */
        top: 1.25rem;
        /* En haut */
    }

    .bonus-main-icon {
        width: 3rem;
        height: 3rem;
    }

    .bonus-main-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }



    .bonus-strip {
        min-width: 7.5rem;
    }
}

/* ========== EFFETS DES BONUS SUR LES RÉPONSES ========== */
.answer-btn.bonus-5050-hidden {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(1);
}


.answer-btn.bonus-5050-hidden::before,
.answer-btn.bonus-5050-hidden::after {
    opacity: 0.2;
    filter: grayscale(1);
}

.answer-btn.bonus-revealed {
    border-color: var(--success-color) !important;
    background: rgba(16, 185, 129, 0.15) !important;
    box-shadow: 0 0 1.25rem rgba(16, 185, 129, 0.3);
    animation: revealPulse 1s ease-in-out infinite;
}

@keyframes revealPulse {

    0%,
    100% {
        box-shadow: 0 0 1.25rem rgba(16, 185, 129, 0.3);
    }

    50% {
        box-shadow: 0 0 1.875rem rgba(16, 185, 129, 0.5);
    }
}

/* ========== RESPONSIVE MOBILE ========== */
@media (max-width: 38.375rem) {

    /* Jauge cachée sur mobile */
    .combo-gauge-container {
        display: none !important;
    }

    /* Box bonus repositionnée */
    .bonus-box-container {
        top: 1.25rem;
        /* 🔥 Même hauteur que desktop */
        right: 4.75rem;
        /* 🔥 À gauche du bouton profil mobile */
    }

    .bonus-trigger-btn {
        width: 3rem;
        height: 3rem;
    }

    .bonus-trigger-btn svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .bonus-notification-badge {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 0.7rem;
        top: -0.3125rem;
        right: -0.3125rem;
    }

    .combo-level-indicator {
        bottom: -2.25rem;
        padding: 0.3125rem 0.75rem;
        font-size: 0.7rem;
    }

    .bonus-modal {
        width: 95%;
        max-width: none;
        padding: 1.25rem;
    }
}


/* 🆕 Indicateur Bouclier */
.shield-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 197, 253, 0.2));
    border: 0.125rem solid rgba(59, 130, 246, 0.5);
    border-radius: 0.5rem;
    font-size: 1.2rem;
    box-shadow:
        0 0 1.25rem rgba(59, 130, 246, 0.6),
        0 0 2.5rem rgba(59, 130, 246, 0.3),
        inset 0 0 1.25rem rgba(59, 130, 246, 0.1);
    animation: shieldPulse 2s ease-in-out infinite;
}

@keyframes shieldPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 1.25rem rgba(59, 130, 246, 0.6),
            0 0 2.5rem rgba(59, 130, 246, 0.3);
    }

    50% {
        transform: scale(1.1);
        box-shadow:
            0 0 1.875rem rgba(59, 130, 246, 0.8),
            0 0 3.75rem rgba(59, 130, 246, 0.5);
    }
}

/* Animation d'apparition du bouclier */
.shield-pulse-enter-active {
    animation: shieldAppear 0.5s ease-out;
}

.shield-pulse-leave-active {
    animation: shieldDisappear 0.3s ease-in;
}

@keyframes shieldAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }

    60% {
        transform: scale(1.2) rotate(10deg);
    }

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

@keyframes shieldDisappear {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) rotate(180deg);
    }
}


/* ============================================
   ANIMATIONS SHIELD - À AJOUTER DANS home.css
   ============================================ */

/* Overlay d'effet Shield (activation) */
.shield-overlay-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center,
            rgba(59, 130, 246, 0.3) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            transparent 70%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.shield-overlay-effect.active {
    opacity: 1;
    animation: shieldPulseOverlay 2s ease-in-out;
}

@keyframes shieldPulseOverlay {

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

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* Vague de protection (quand Shield protège) */
.shield-protection-wave {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    /* 🔥 RÉDUIT de 100px à 80px */
    height: 5rem;
    border: 0.1875rem solid rgba(59, 130, 246, 0.8);
    /* 🔥 RÉDUIT de 4px à 3px */
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    opacity: 1;
    box-shadow:
        0 0 1.875rem rgba(59, 130, 246, 0.6),
        0 0 3.75rem rgba(59, 130, 246, 0.4),
        inset 0 0 1.875rem rgba(59, 130, 246, 0.2);
    will-change: transform, opacity;
    /* 🔥 AJOUTÉ pour fluidité */
}

.shield-protection-wave.expand {
    animation: shieldWaveExpand 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* 🔥 Meilleure courbe */
}

@keyframes shieldWaveExpand {
    0% {
        width: 5rem;
        height: 5rem;
        opacity: 1;
        border-width: 0.1875rem;
    }

    50% {
        opacity: 0.7;
        /* 🔥 AJUSTÉ de 0.6 à 0.7 */
        border-width: 0.375rem;
        /* 🔥 RÉDUIT de 8px à 6px */
    }

    100% {
        width: 120vh;
        /* 🔥 RÉDUIT de 140vh à 120vh */
        height: 120vh;
        opacity: 0;
        border-width: 0.125rem;
    }
}

/* Amélioration de l'indicateur Shield existant */
.shield-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.3));
    border: 0.125rem solid rgba(59, 130, 246, 0.6);
    border-radius: 0.5rem;
    font-size: 1.2rem;
    box-shadow:
        0 0 1.875rem rgba(59, 130, 246, 0.7),
        0 0 3.75rem rgba(59, 130, 246, 0.4),
        inset 0 0 1.875rem rgba(59, 130, 246, 0.2);
    animation: shieldPulseIndicator 1.5s ease-in-out infinite;
}

@keyframes shieldPulseIndicator {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 1.875rem rgba(59, 130, 246, 0.7),
            0 0 3.75rem rgba(59, 130, 246, 0.4);
    }

    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 2.8125rem rgba(59, 130, 246, 0.9),
            0 0 5.625rem rgba(59, 130, 246, 0.6);
    }
}

/* Animation quand Shield est actif sur une réponse */
.answer-btn.shield-active {
    border-color: rgba(59, 130, 246, 0.6) !important;
    background: rgba(59, 130, 246, 0.1) !important;
    box-shadow:
        0 0 1.25rem rgba(59, 130, 246, 0.4),
        inset 0 0 1.25rem rgba(59, 130, 246, 0.1);
    animation: shieldAnswerPulse 2s ease-in-out infinite;
}

@keyframes shieldAnswerPulse {

    0%,
    100% {
        box-shadow:
            0 0 1.25rem rgba(59, 130, 246, 0.4),
            inset 0 0 1.25rem rgba(59, 130, 246, 0.1);
    }

    50% {
        box-shadow:
            0 0 1.875rem rgba(59, 130, 246, 0.6),
            inset 0 0 1.875rem rgba(59, 130, 246, 0.2);
    }
}

/* Particules Shield (optionnel - effet premium) */
.shield-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}

.shield-particle {
    position: absolute;
    width: 0.25rem;
    height: 0.25rem;
    background: radial-gradient(circle,
            rgba(59, 130, 246, 1) 0%,
            rgba(147, 197, 253, 0.5) 50%,
            transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation: shieldParticleFloat 2s ease-out forwards;
}

@keyframes shieldParticleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-30vh) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-60vh) scale(0.3);
    }
}

/* Effet de brillance sur le bouton Shield quand disponible */
.bonus-strip.available:has(.bonus-strip-text:contains("Bouclier")) {
    position: relative;
    overflow: hidden;
}

.bonus-strip.available:has(.bonus-strip-text:contains("Bouclier"))::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(59, 130, 246, 0.3) 50%,
            transparent 70%);
    animation: shieldButtonShine 3s ease-in-out infinite;
}

@keyframes shieldButtonShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Responsive mobile */
@media (max-width: 38.375rem) {
    .shield-overlay-effect {
        background: radial-gradient(circle at center,
                rgba(59, 130, 246, 0.4) 0%,
                rgba(59, 130, 246, 0.15) 25%,
                transparent 60%);
    }

    .shield-protection-wave {
        width: 5rem;
        height: 5rem;
        border-width: 0.1875rem;
    }

    @keyframes shieldWaveExpand {
        0% {
            width: 5rem;
            height: 5rem;
            opacity: 1;
            border-width: 0.1875rem;
        }

        100% {
            width: 120vh;
            height: 120vh;
            opacity: 0;
            border-width: 0.0625rem;
        }
    }
}


/* Overlay d'effet Shield (activation) */
.shield-overlay-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center,
            rgba(59, 130, 246, 0.3) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            transparent 70%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.shield-overlay-effect.active {
    opacity: 1;
    animation: shieldPulseOverlay 2s ease-in-out;
}

@keyframes shieldPulseOverlay {

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

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}


/* 🆕 Pulse sobre du HUD en même temps */
.player-hud.shield-protected {
    animation: shieldHudPulse 3s ease-in-out infinite;
}

@keyframes shieldHudPulse {

    0%,
    100% {
        border-color: rgba(59, 130, 246, 0.35);
        box-shadow:
            0 0 1.125rem rgba(59, 130, 246, 0.25),
            inset 0 0 1.125rem rgba(59, 130, 246, 0.1);
    }

    50% {
        border-color: rgba(59, 130, 246, 0.45);
        box-shadow:
            0 0 1.375rem rgba(59, 130, 246, 0.35),
            inset 0 0 1.375rem rgba(59, 130, 246, 0.13);
    }
}




/* ============================================
   ICÔNE X2 DANS LE HUD
   ============================================ */

/* Icône x2 en position absolue */
.hud-x2-icon {
    position: absolute;
    right: -3.125rem;
    /* Même position que le Shield */
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.9375rem rgba(255, 215, 0, 0.8)) drop-shadow(0 0 1.875rem rgba(255, 165, 0, 0.4));
    animation: x2IconFloat 2s ease-in-out infinite;
    pointer-events: none;
}

/* Animation flottante de l'icône (vertical) */
@keyframes x2IconFloat {

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

    50% {
        transform: translateY(-50%) translateY(-0.3125rem);
    }
}

/* Animation d'apparition/disparition */
.x2-icon-fade-enter-active {
    animation: x2IconAppear 0.5s ease-out;
}

.x2-icon-fade-leave-active {
    animation: x2IconDisappear 0.3s ease-in;
}

@keyframes x2IconAppear {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.5) rotate(-180deg);
    }

    60% {
        transform: translateY(-50%) scale(1.1) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

@keyframes x2IconDisappear {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.3) rotate(180deg);
    }
}



/* Pulse doré pour le bonus x2 */
.player-hud.x2-protected {
    animation: x2HudPulse 3s ease-in-out infinite;
}

@keyframes x2HudPulse {
    0% {
        border-color: rgba(255, 215, 0, 0.3);
        box-shadow:
            0 0 0.9375rem rgba(255, 215, 0, 0.2),
            inset 0 0 0.9375rem rgba(255, 215, 0, 0.08);
    }

    50% {
        border-color: rgba(255, 215, 0, 0.5);
        box-shadow:
            0 0 1.5625rem rgba(255, 215, 0, 0.4),
            inset 0 0 1.5625rem rgba(255, 215, 0, 0.12);
    }

    100% {
        border-color: rgba(255, 215, 0, 0.3);
        box-shadow:
            0 0 0.9375rem rgba(255, 215, 0, 0.2),
            inset 0 0 0.9375rem rgba(255, 215, 0, 0.08);
    }
}



/* ============================================
   ÉCRAN DE FIN - PODIUM SIMPLE (SANS FLIP)
   ============================================ */

/* Container principal */
.gameover-flip-container {
    max-width: 56.25rem;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    animation: fadeInContainer 0.8s ease-out;
}

@keyframes fadeInContainer {
    0% {
        opacity: 0;
        transform: translateY(1.875rem);
    }

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

/* ========== HEADER ========== */
.gameover-header-flip {
    text-align: center;
    margin-bottom: 3rem;
}

.gameover-title-flip {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.1875rem;
    animation: titleSlideDown 0.6s ease-out;
}

@keyframes titleSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-1.875rem);
    }

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

/* ========== PODIUM CARDS ========== */
.podium-flip-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    perspective: 93.75rem;
    min-height: 18.75rem;
}

/* Wrapper de carte (gère l'animation d'entrée) */
.flip-card-wrapper {
    opacity: 0;
    animation: cardSlideUp 0.8s ease-out forwards;
}

@keyframes cardSlideUp {
    0% {
        opacity: 0;
        transform: translateY(6.25rem) scale(0.8);
    }

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

/* 🔥 ORDRE D'APPARITION ET POSITIONNEMENT */

/* 3ème - À GAUCHE - Apparaît en PREMIER */
.flip-card-wrapper.rank-3 {
    order: 1;
    animation-delay: 0.5s;
}

/* 2ème - À DROITE - Apparaît en DEUXIÈME */
.flip-card-wrapper.rank-2 {
    order: 3;
    animation-delay: 1s;
}

/* 1er - AU CENTRE - Apparaît en DERNIER (effet dramatique) */
.flip-card-wrapper.rank-1 {
    order: 2;
    animation-delay: 1.5s;
}

/* Surélévation visuelle */
.flip-card-wrapper.rank-1 {
    transform: translateY(-1.25rem);
}

.flip-card-wrapper.rank-2,
.flip-card-wrapper.rank-3 {
    transform: translateY(1.25rem);
}

/* La carte elle-même (simple, pas de flip) */
.flip-card-single {
    width: 11.25rem;
    height: 15rem;
    position: relative;
    cursor: default;
}

/* Face unique */
.flip-card-face {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, rgba(31, 31, 31, 0.95), rgba(50, 50, 50, 0.95));
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.flip-card-single:hover .flip-card-face {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.9375rem 3.125rem rgba(0, 0, 0, 0.5);
}

/* Badge du rang */
.rank-badge {
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
    border: 0.1875rem solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}

/* Nom du joueur */
.player-name-flip {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    word-break: break-word;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

/* Score (points ou vies) - DISCRET */
.player-score-flip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.score-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--neon-primary);
    text-shadow: 0 0 0.625rem rgba(255, 215, 0, 0.3);
}

.score-value.lives-score {
    color: #ef4444;
    text-shadow: 0 0 0.625rem rgba(239, 68, 68, 0.3);
    font-size: 1.2rem;
}

.score-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.0312rem;
}

/* ========== STYLES PAR RANG ========== */

/* 1er - Plus grand, doré, glow */
.flip-card-wrapper.rank-1 .flip-card-single {
    width: 13.125rem;
    height: 17.5rem;
}

.flip-card-wrapper.rank-1 .flip-card-face {
    border-color: #FFD700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(50, 50, 50, 0.95));
    box-shadow:
        0 0 2.5rem rgba(255, 215, 0, 0.5),
        0 0.9375rem 3.125rem rgba(0, 0, 0, 0.5);
}

.flip-card-wrapper.rank-1 .rank-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border-color: #FFD700;
    box-shadow:
        0 0 1.5625rem rgba(255, 215, 0, 0.7),
        0 0.25rem 1rem rgba(0, 0, 0, 0.4);
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
}

.flip-card-wrapper.rank-1 .player-name-flip {
    font-size: 1.3rem;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 2ème - Argenté */
.flip-card-wrapper.rank-2 .flip-card-face {
    border-color: #C0C0C0;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(50, 50, 50, 0.95));
}

.flip-card-wrapper.rank-2 .rank-badge {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #000;
    border-color: #C0C0C0;
    box-shadow:
        0 0 0.9375rem rgba(192, 192, 192, 0.5),
        0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}

/* 3ème - Bronze */
.flip-card-wrapper.rank-3 .flip-card-face {
    border-color: #CD7F32;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(50, 50, 50, 0.95));
}

.flip-card-wrapper.rank-3 .rank-badge {
    background: linear-gradient(135deg, #CD7F32, #B8693C);
    color: #000;
    border-color: #CD7F32;
    box-shadow:
        0 0 0.9375rem rgba(205, 127, 50, 0.5),
        0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}

/* ========== ÉGALITÉ ========== */
.tie-section-flip {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tie-badge-flip {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--warning-color);
    margin-bottom: 1.25rem;
}

.tie-players-flip {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 25rem;
    margin: 0 auto;
}

.tie-player-flip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 165, 0, 0.1);
    border: 0.0625rem solid rgba(255, 165, 0, 0.3);
    border-radius: 0.75rem;
    animation: tiePlayerSlide 0.5s ease-out backwards;
}

.tie-player-flip:nth-child(1) {
    animation-delay: 0.5s;
}

.tie-player-flip:nth-child(2) {
    animation-delay: 0.7s;
}

.tie-player-flip:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes tiePlayerSlide {
    0% {
        opacity: 0;
        transform: translateX(-1.875rem);
    }

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

.tie-player-name {
    font-weight: 600;
    color: var(--text-primary);
}

.tie-player-score {
    font-weight: 700;
    color: var(--warning-color);
}

/* ========== AUCUN GAGNANT (Mode Vie) ========== */
.no-winner-lives {
    text-align: center;
    padding: 3.75rem 2.5rem;
    background: rgba(31, 31, 31, 0.8);
    border-radius: 1.25rem;
    border: 0.125rem solid rgba(239, 68, 68, 0.5);
    animation: cardPopIn 0.8s ease-out;
}

@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        transform: scale(1.05);
    }

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

.skull-icon-big {
    font-size: 5rem;
    margin-bottom: 1.25rem;
    animation: skullShake 1s ease-in-out infinite;
}

@keyframes skullShake {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.no-winner-lives h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--error-color);
}

/* ========== STATS ========== */
.game-stats-flip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    animation: statsSlideUp 0.6s ease-out 2s backwards;
}

@keyframes statsSlideUp {
    0% {
        opacity: 0;
        transform: translateY(1.25rem);
    }

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

.stat-flip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.stat-value-flip {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-color);
}

.stat-label-flip {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
}

.stat-divider-flip {
    width: 0.0625rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
}

/* ========== BOUTON RETOUR ========== */
.btn-home-flip {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    animation: buttonSlideUp 0.6s ease-out 2.3s backwards;
}

@keyframes buttonSlideUp {
    0% {
        opacity: 0;
        transform: translateY(1.25rem);
    }

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

/* ========== CONFETTIS ========== */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    top: -0.625rem;
    border-radius: 0.125rem;
    opacity: 0.9;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ========== RESPONSIVE MOBILE ========== */
@media (max-width: 38.375rem) {
    .gameover-flip-container {
        padding: 1rem 0.75rem;
    }

    .gameover-title-flip {
        font-size: 1.3rem;
        letter-spacing: 0.0938rem;
        margin-bottom: 1.5rem;
    }

    /* 🔥 PODIUM EN LIGNE (côte à côte) sur mobile */
    .podium-flip-cards {
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 0.75rem;
        min-height: auto;
        margin-bottom: 1.5rem;
    }

    /* Réinitialiser l'ordre pour mobile : 3-1-2 (gauche-centre-droite) */
    .flip-card-wrapper.rank-3 {
        order: 1;
        transform: translateY(1.25rem) !important;
    }

    .flip-card-wrapper.rank-1 {
        order: 2;
        transform: translateY(0) !important;
    }

    .flip-card-wrapper.rank-2 {
        order: 3;
        transform: translateY(1.25rem) !important;
    }

    /* 🔥 CARTES PLUS PETITES */
    .flip-card-single {
        width: 6.25rem;
        height: 8.75rem;
    }

    .flip-card-wrapper.rank-1 .flip-card-single {
        width: 6.875rem;
        height: 9.6875rem;
    }

    .flip-card-face {
        padding: 0.75rem 0.5rem;
    }

    /* Badge plus petit */
    .rank-badge {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
        border-width: 0.125rem;
    }

    .flip-card-wrapper.rank-1 .rank-badge {
        width: 2.8125rem;
        height: 2.8125rem;
        font-size: 1.6rem;
    }

    /* Nom plus petit */
    .player-name-flip {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .flip-card-wrapper.rank-1 .player-name-flip {
        font-size: 0.85rem;
    }

    /* Score plus petit */
    .player-score-flip {
        padding-top: 0.5rem;
        gap: 0.125rem;
    }

    .score-value {
        font-size: 1rem;
    }

    .score-value.lives-score {
        font-size: 0.85rem;
    }

    .score-label {
        font-size: 0.55rem;
    }

    /* Stats en dessous */
    .game-stats-flip {
        gap: 1.25rem;
        padding: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .stat-value-flip {
        font-size: 1.3rem;
    }

    .stat-label-flip {
        font-size: 0.65rem;
    }

    .stat-divider-flip {
        height: 2rem;
    }

    /* Bouton */
    .btn-home-flip {
        font-size: 0.85rem;
        padding: 0.75rem 1.25rem;
        max-width: 100%;
    }

    /* Égalité sur mobile */
    .tie-section-flip {
        margin-bottom: 1.5rem;
    }

    .tie-badge-flip {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .tie-players-flip {
        max-width: 100%;
        padding: 0 0.75rem;
    }

    .tie-player-flip {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* Aucun gagnant sur mobile */
    .no-winner-lives {
        padding: 2.5rem 1.25rem;
    }

    .skull-icon-big {
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }

    .no-winner-lives h2 {
        font-size: 1.5rem;
    }
}

/* 🔥 TRÈS PETITS ÉCRANS (<380px) */
@media (max-width: 23.75rem) {
    .gameover-title-flip {
        font-size: 1.1rem;
        letter-spacing: 0.0625rem;
    }

    .podium-flip-cards {
        gap: 0.5rem;
    }

    .flip-card-single {
        width: 5.3125rem;
        height: 7.8125rem;
    }

    .flip-card-wrapper.rank-1 .flip-card-single {
        width: 5.9375rem;
        height: 8.75rem;
    }

    .rank-badge {
        width: 2.1875rem;
        height: 2.1875rem;
        font-size: 1.2rem;
    }

    .flip-card-wrapper.rank-1 .rank-badge {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.4rem;
    }

    .player-name-flip {
        font-size: 0.65rem;
    }

    .flip-card-wrapper.rank-1 .player-name-flip {
        font-size: 0.75rem;
    }

    .score-value {
        font-size: 0.9rem;
    }

    .score-label {
        font-size: 0.5rem;
    }

    .game-stats-flip {
        gap: 1rem;
        padding: 0.75rem;
    }

    .stat-value-flip {
        font-size: 1.1rem;
    }

    .btn-home-flip {
        font-size: 0.8rem;
        padding: 0.6875rem 1.125rem;
    }
}


/* ========================================
   BONUS MOBILE - ICÔNE + JAUGE CIRCULAIRE
   ======================================== */

.bonus-gauge-mobile,
.bonus-arc-menu {
    display: none !important;
}

@media (max-width: 38.375rem) {

    /* 🔥 Cacher le système desktop */
    .combo-gauge-container,
    .bonus-icon-container {
        display: none !important;
    }

    /* 🆕 Icône mobile avec jauge circulaire */
    .bonus-gauge-mobile {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 3.5rem;
        height: 3.5rem;
        z-index: 500;
        cursor: pointer;
        display: block !important;
    }


    .bonus-arc-menu {
        display: block !important;
    }

    /* SVG container */
    .gauge-svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    /* Cercle de fond */
    .gauge-circle-bg {
        fill: none;
        stroke: rgba(255, 255, 255, 0.1);
        stroke-width: 4;
    }

    /* Cercle de progression */
    .gauge-circle-progress {
        fill: none;
        stroke: var(--neon-primary);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: 188;
        transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        filter: drop-shadow(0 0 0.5rem var(--neon-primary));
    }

    /* Icône centrale */
    .gauge-icon-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1.75rem;
        height: 1.75rem;
        background: rgba(31, 31, 31, 0.8);
        backdrop-filter: blur(0.5rem);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.125rem solid rgba(255, 215, 0, 0.3);
        transition: all 0.3s ease;
        box-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.2);
    }

    .gauge-icon-center svg {
        width: 1.125rem;
        height: 1.125rem;
        fill: var(--neon-primary);
        filter: drop-shadow(0 0 0.25rem rgba(255, 215, 0, 0.3));
    }

    /* Badge compteur */
    .gauge-count-badge {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        background: #ff4757;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        border: 0.125rem solid var(--bg-primary);
        box-shadow: 0 0 0.75rem rgba(255, 71, 87, 0.6);
    }

    /* 🆕 Particules autour de la jauge (après bonne réponse) */
    .gauge-particles-mobile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: visible;
    }

    .gauge-particle-mobile {
        position: absolute;
        width: 0.25rem;
        height: 0.25rem;
        background: radial-gradient(circle, var(--neon-primary), var(--neon-secondary));
        border-radius: 50%;
        opacity: 0;
        box-shadow:
            0 0 0.375rem var(--neon-primary),
            0 0 0.75rem var(--neon-primary);
        animation: particleBurstMobile 1s ease-out forwards;
    }

    @keyframes particleBurstMobile {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(0.5);
        }

        50% {
            opacity: 0.8;
            transform: translate(var(--x), var(--y)) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(calc(var(--x) * 2), calc(var(--y) * 2)) scale(0.3);
        }
    }

    /* ========================================
   ARC DE CERCLE - MENU BONUS
   ======================================== */

    .bonus-arc-menu {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 13.75rem;
        height: 13.75rem;
        pointer-events: none;
        z-index: 560;
        /* 🔥 Au-dessus de l'overlay */
    }

    .bonus-arc-item {
        position: absolute;
        width: 2.875rem;
        height: 2.875rem;
        background: rgba(20, 20, 20, 0.98);
        /* 🔥 Plus opaque, pas de blur */
        border: 0.125rem solid rgba(255, 215, 0, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        opacity: 0;
        transform: scale(0);
        visibility: hidden;
        z-index: 600;
        /* 🔥 Au-dessus de tout */
        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.5);
    }

    .bonus-arc-item.show {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto !important;
        /* 🔥 Force le clic */
        visibility: visible;
        cursor: pointer;
    }

    .bonus-arc-item.show.available {
        border-color: rgba(255, 215, 0, 0.7);
        background: rgba(40, 35, 10, 0.98);
        /* 🔥 Fond légèrement doré */
        box-shadow:
            0 0.25rem 1.25rem rgba(0, 0, 0, 0.5),
            0 0 0.9375rem rgba(255, 215, 0, 0.2);
    }

    .bonus-arc-item.show.available:active {
        transform: scale(0.9);
        box-shadow: 0 0 1.5625rem rgba(255, 215, 0, 0.4);
    }

    /* 🔥 Position arc (éventail vers le haut-gauche) */
    .bonus-arc-item:nth-child(2) {
        /* B1 - Gauche (180°) */
        bottom: 2.8125rem;
        right: 6.875rem;
        transition-delay: 0.05s;
    }

    .bonus-arc-item:nth-child(3) {
        /* B2 - Haut-gauche (135°) */
        bottom: 5.9375rem;
        right: 5.75rem;
        transition-delay: 0.1s;
    }

    .bonus-arc-item:nth-child(4) {
        /* B3 - Haut (90°) */
        bottom: 6.875rem;
        right: 2.8125rem;
        transition-delay: 0.15s;
    }

    .bonus-arc-item img {
        width: 1.5rem;
        height: 1.5rem;
        object-fit: contain;
        filter: none;
        /* 🔥 Pas de filtre = netteté */
        image-rendering: -webkit-optimize-contrast;
        /* 🔥 Plus net */
    }

    .bonus-arc-item.available img {
        filter: drop-shadow(0 0 0.375rem rgba(255, 215, 0, 0.4));
    }

    /* États */
    .bonus-arc-item.locked {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
    }

    .bonus-arc-item.available {
        border-color: rgba(255, 215, 0, 0.6);
        background: rgba(255, 215, 0, 0.08);
    }

    .bonus-arc-item.available:active {
        transform: scale(0.9);
    }

    .bonus-arc-item.used {
        opacity: 0.25;
        cursor: not-allowed;
        filter: grayscale(1);
    }

    /* 🆕 Compteur bonus sur arc mobile */
    .bonus-arc-count {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #f0c14b;
        color: #000;
        font-family: 'Orbitron', sans-serif;
        font-size: 0.55rem;
        font-weight: 700;
        padding: 0.1rem 0.25rem;
        border-radius: 4px;
        min-width: 1rem;
        text-align: center;
    }

    .bonus-arc-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        /* 🔥 Plus léger */
        /* 🔥 SUPPRIMÉ: backdrop-filter: blur() */
        z-index: 550;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .bonus-arc-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .bonus-arc-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* 🆕 Icône Shield/x2 au-dessus de l'icône bonus sur mobile */
    .hud-shield-icon,
    .hud-x2-icon {
        position: fixed;
        right: 0;
        left: 7.5rem;
        transform: none;
        width: 1.375rem;
        height: 1.375rem;
        margin: auto;
        top: 57%
    }
}


.click-particle {
    position: fixed;
    background: radial-gradient(circle, var(--neon-primary), var(--neon-secondary));
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    box-shadow:
        0 0 0.25rem var(--neon-primary),
        0 0 0.5rem rgba(255, 215, 0, 0.4);
    animation: clickParticleBurst 0.4s ease-out forwards;
}

@keyframes clickParticleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(0.2);
    }
}

/* ============================================
   2K RESOLUTION (2560x1440) - Tailles augmentées
   ============================================ */
@media (min-width: 1921px) {

    /* HUD - Plus grand */
    .player-hud {
        padding: 1rem 2.5rem;
        border-radius: 1.25rem;
    }

    .hud-username {
        font-size: 1.3rem;
    }

    .hud-score {
        font-size: 1.8rem;
    }

    .hud-question-counter {
        font-size: 1.2rem;
    }

    /* Badges série/difficulté */
    .question-badges {
        gap: 1rem;
    }

    .badge {
        font-size: 1rem;
        padding: 0.6rem 1.5rem;
        border-radius: 1.5rem;
    }

    /* Question */
    .question-text {
        font-size: 1.5rem;
    }

    /* Réponses */
    .answers-grid {
        gap: 1.5rem;
    }

    .answer-btn {
        min-width: 16rem;
        min-height: 5rem;
        border-radius: 2.5rem;
        padding: 1rem 2rem;
    }

    .answer-text {
        font-size: 1.25rem;
    }

    /* Coins décoratifs des réponses */
    .answer-btn::before,
    .answer-btn::after {
        width: 1.2rem;
        height: 1.2rem;
    }

    /* Survivors count */
    .survivors-count {
        font-size: 1.15rem;
        margin-top: 1.5rem;
    }

    /* Timer bar */
    .timer-bar-container {
        height: 0.3rem;
        margin-bottom: 2rem;
    }

    /* Combo gauge - Corrigée pour 2K */
    .combo-gauge {
        height: 32rem;
        border-radius: 1rem;
    }



    .combo-gauge-level {
        font-size: 0.85rem;
        width: 2rem;
        height: 2rem;
    }



    .bonus-strip {
        padding: 0.75rem 1.25rem;
        font-size: 1.1rem;
        border-radius: 0.75rem;
    }

    .bonus-strip img {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Shield/x2 icons */
    .hud-shield-icon,
    .hud-x2-icon {
        width: 2.5rem;
        height: 2.5rem;
        right: -4rem;
    }

    /* Game section max-width */
    .game-section {
        max-width: 80rem;
    }


    .bonus-icon-container {
        right: 2rem;
        top: calc(50% - 19.5rem);
    }
}



/* ============================================
   LOGO ANIMATION - EXPLOSION CENTRE
   ============================================ */
.logo-title .letter {
    display: inline-block;
    opacity: 0;
    transform: scale(0) rotate(180deg);
}

.logo-title .letter.animated {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}


.btn-twitch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;

    /* Style Outline Neon */
    background: transparent;
    color: var(--neon-primary);
    border: 2px solid var(--neon-primary);
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.3),
        inset 0 0 15px rgba(255, 215, 0, 0.1);

    /* Pour l'effet Fill */
    position: relative;
    overflow: hidden;
}


.btn-twitch::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(0deg, var(--neon-primary), var(--neon-secondary));
    transition: height 0.4s ease;
    z-index: 1;
}

.btn-twitch:hover::before {
    height: 100%;
}





.btn-twitch:hover {
    color: #000;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

.btn-twitch svg,
.btn-twitch span {
    position: relative;
    z-index: 2;
}

.btn-twitch svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


@media (max-width: 614px) {
    .btn-twitch {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        gap: 0.5rem;
        white-space: nowrap;
    }

    .btn-twitch svg {
        width: 20px;
        height: 20px;
    }
}



/* ============================================
   STREAMERS PANEL - BARRE NEON
   ============================================ */
.streamers-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 500;
}

.streamers-trigger {
    width: 6px;
    height: 120px;
    background: linear-gradient(180deg, var(--neon-primary), var(--neon-secondary));
    border-radius: 0.5rem 0 0 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.streamers-panel:hover .streamers-trigger {
    width: 10px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.streamers-content {
    position: absolute;
    right: 100%;
    background: rgba(12, 12, 12, 0.98);
    border: none;
    border-radius: 0.75rem;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    transition: all 0.3s ease;
    min-width: 180px;
    margin-right: 0.75rem;
}

.streamers-panel:hover .streamers-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.streamers-title {
    font-size: 0.65rem;
    color: var(--neon-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-align: center; /* Centré */
}

.streamers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem; /* Padding autour des streamers */
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.5rem;
}

.streamer-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.streamer-item:hover {
    background: rgba(255, 215, 0, 0.1);
}

.streamer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--twitch-purple, #9146FF);
    transition: all 0.3s ease;
}

.streamer-item:hover .streamer-avatar {
    border-color: var(--neon-primary);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transform: scale(1.1);
}

.streamer-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* ============================================
   RESPONSIVE - Full HD avec scaling 125%
   ============================================ */
@media (max-width: 1600px) {
    .streamers-trigger {
        width: 5px;
        height: 100px;
    }

    .streamers-panel:hover .streamers-trigger {
        width: 8px;
    }

    .streamers-content {
        min-width: 160px;
        padding: 0.85rem;
    }

    .streamers-title {
        font-size: 0.6rem;
    }

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

    .streamer-name {
        font-size: 0.7rem;
    }

    .streamers-list {
        padding: 0.4rem;
        gap: 0.4rem;
    }
}

/* ============================================
   RESPONSIVE - 2K (2560x1440)
   ============================================ */
@media (min-width: 2000px) {
    .streamers-trigger {
        width: 8px;
        height: 150px;
    }

    .streamers-panel:hover .streamers-trigger {
        width: 12px;
    }

    .streamers-content {
        min-width: 220px;
        padding: 1.25rem;
        margin-right: 1rem;
        border-radius: 1rem;
    }

    .streamers-title {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .streamer-avatar {
        width: 44px;
        height: 44px;
        border-width: 3px;
    }

    .streamer-name {
        font-size: 0.9rem;
    }

    .streamers-list {
        padding: 0.65rem;
        gap: 0.6rem;
        border-radius: 0.65rem;
    }

    .streamer-item {
        padding: 0.5rem;
        gap: 0.75rem;
    }
}

/* ============================================
   RESPONSIVE - 4K / 3K
   ============================================ */
@media (min-width: 2800px) {
    .streamers-trigger {
        width: 10px;
        height: 180px;
    }

    .streamers-panel:hover .streamers-trigger {
        width: 14px;
    }

    .streamers-content {
        min-width: 280px;
        padding: 1.5rem;
        margin-right: 1.25rem;
    }

    .streamers-title {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .streamer-avatar {
        width: 56px;
        height: 56px;
        border-width: 3px;
    }

    .streamer-name {
        font-size: 1.1rem;
    }

    .streamers-list {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .streamer-item {
        padding: 0.6rem;
        gap: 1rem;
    }
}




/* ============================================
   RESPONSIVE - Mobile (caché)
   ============================================ */
@media (max-width: 614px) {
    .streamers-panel {
        display: none;
    }
}



/* ============================================
   STREAMER LIVE INDICATOR
   ============================================ */
.streamer-avatar-wrapper {
    position: relative;
}

.streamer-item.is-live .streamer-avatar {
    border-color: #ff0000;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* Badge LIVE */
.live-badge-small {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #ff0000;
    color: #fff;
    font-size: 0.4rem;
    font-weight: 700;
    padding: 0.1rem 0.25rem;
    border-radius: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* Badge +X pour streamers cachés */
.streamer-more .more-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.15);
    border: 2px solid var(--neon-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--neon-primary);
}

.streamer-more:hover .more-badge {
    background: rgba(255, 215, 0, 0.25);
    transform: scale(1.1);
}


/* ============================================
   LOADER KATANA SLASH
   ============================================ */
.katana-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    height: 20px;
    overflow: hidden;
}

.katana-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-primary), var(--neon-secondary), transparent);
    animation: katanaSlash 1.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes katanaSlash {
    0% { 
        transform: translateX(-100%) scaleX(0.5);
        opacity: 0;
    }
    50% { 
        transform: translateX(0) scaleX(1);
        opacity: 1;
    }
    100% { 
        transform: translateX(100%) scaleX(0.5);
        opacity: 0;
    }
}


/* ============================================
   INFO CARD - En préparation
   ============================================ */


.info-card .separator {
    width: 50%;
    margin: 0 auto 1.25rem;
}

.info-card h2 {
    text-align: center;
}

.info-card p {
    text-align: center;
}

.info-card .katana-container {
    justify-content: center;
}


/* ============================================
   INFO CARD - Glassmorphism Premium
   ============================================ */
.info-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(20, 20, 20, 0.95) 50%, rgba(255, 165, 0, 0.05) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
    position: relative;
}

/* Coins décoratifs */
.corner-decoration {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

.corner-tl { 
    top: 10px; 
    left: 10px; 
    border-right: none; 
    border-bottom: none; 
    border-radius: 8px 0 0 0; 
}

.corner-tr { 
    top: 10px; 
    right: 10px; 
    border-left: none; 
    border-bottom: none; 
    border-radius: 0 8px 0 0; 
}

.corner-bl { 
    bottom: 10px; 
    left: 10px; 
    border-right: none; 
    border-top: none; 
    border-radius: 0 0 0 8px; 
}

.corner-br { 
    bottom: 10px; 
    right: 10px; 
    border-left: none; 
    border-top: none; 
    border-radius: 0 0 8px 0; 
}

/* Mobile - Info card margins */
@media (max-width: 38.375rem) {
    .info-card {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        max-width: calc(100% - 3rem);
        padding: 1.25rem 1rem;
    }
    
    .info-card h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .info-card p {
        font-size: 0.75rem;
    }
    
    .user-welcome {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .avatar-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
    
    .welcome-text {
        font-size: 0.65rem;
    }
    
    .username {
        font-size: 0.9rem;
    }
    
    .content-section > .btn-secondary {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        width: calc(100% - 3rem);
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
    
    /* Corner decorations smaller */
    .corner-decoration {
        width: 25px;
        height: 25px;
    }
    
    .lobby-card .corner-decoration {
        width: 25px;
        height: 25px;
    }
}


/* ============================================
   LOBBY CARD - Glassmorphism Premium
   ============================================ */
.lobby-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(20, 20, 20, 0.95) 50%, rgba(255, 165, 0, 0.05) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
    position: relative;
    max-width: 28rem;
    margin: 0 auto 1rem;
}

.lobby-card .corner-decoration {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

.lobby-card .corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.lobby-card .corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.lobby-card .corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.lobby-card .corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.lobby-card h2 {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile - Lobby card margins */
@media (max-width: 38.375rem) {
    .lobby-card {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        max-width: calc(100% - 3rem);
        padding: 1.25rem 1rem;
    }
    
    .lobby-card h2 {
        font-size: 0.85rem;
        margin-bottom: 0.875rem;
        font-weight: 600;
    }
    
    .players-box {
        padding: 0.6rem 1.25rem;
        margin-bottom: 0.875rem;
    }
    
    .players-count {
        font-size: 1.3rem;
    }
    
    .players-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .lobby-card .btn-primary {
        padding: 0.55rem 1rem;
        font-size: 0.75rem;
    }
    
    .lobby-card .corner-decoration {
        width: 22px;
        height: 22px;
    }
    
    .content-section > .btn-secondary {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        width: calc(100% - 3rem);
        padding: 0.55rem 1rem;
        font-size: 0.75rem;
    }
    
    /* Badge EN LIVE */
    .live-badge {
        padding: 0.15rem 0.5rem;
        font-size: 0.55rem;
        gap: 0.2rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .pulse-dot {
        width: 0.25rem;
        height: 0.25rem;
    }
}

/* Box compteur joueurs */
.players-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.players-count {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
}

.players-icon {
    width: 2.2rem;
    object-fit: contain;
}


/* ============================================
   MODAL PROFIL - ULTRA ANIMATED
   ============================================ */

/* Overlay */
.profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    overflow: hidden;
}

.profile-overlay.active {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
}

/* Empêcher le décalage du contenu quand le modal est ouvert */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

/* Modal Container */
.profile-modal {
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(20, 20, 20, 0.98) 50%, rgba(255, 165, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 
        0 0 0 1px rgba(255, 215, 0, 0.1),
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(255, 215, 0, 0.1);
    position: relative;
    transform: scale(0.8) translateY(50px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.profile-overlay.active .profile-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Coins décoratifs animés */
.profile-modal .corner-decoration {
    position: absolute;
    width: 0;
    height: 0;
    border: 2px solid rgba(255, 215, 0, 0.4);
    pointer-events: none;
    z-index: 10;
    transition: width 0.4s ease, height 0.4s ease;
}

.profile-overlay.active .profile-modal .corner-decoration {
    width: 30px;
    height: 30px;
}

.profile-modal .corner-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.profile-modal .corner-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.profile-modal .corner-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.profile-modal .corner-br { bottom: 8px; right: 8px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

/* Scan line effect */
.profile-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-primary), transparent);
    opacity: 0;
    z-index: 20;
    pointer-events: none;
}

/* Header */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.profile-header-glow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.profile-overlay.active .profile-header-glow {
    opacity: 1;
}


.profile-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}


/* Avatar Wrapper */
.profile-avatar-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.profile-overlay.active .profile-avatar-wrapper {
    opacity: 1;
    transform: scale(1);
}

/* Anneau animé autour de l'avatar */
.profile-avatar-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--neon-primary),
        var(--neon-secondary),
        var(--neon-primary)
    );
    animation: profileAvatarRingSpin 4s linear infinite;
    opacity: 0.8;
}

.profile-avatar-ring::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: var(--bg-card);
    border-radius: 50%;
}

@keyframes profileAvatarRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Image Avatar */
.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}

/* Avatar par défaut (icône) */
.profile-avatar-default {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.profile-avatar-default svg {
    width: 28px;
    height: 28px;
    fill: var(--neon-primary);
    opacity: 0.8;
}

.profile-username {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.profile-overlay.active .profile-username {
    opacity: 1;
    transform: translateX(0);
}

.profile-username::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-primary), transparent);
    transition: width 0.5s ease 0.5s;
}

.profile-overlay.active .profile-username::after {
    width: 100%;
}

.profile-close-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: rotate(-90deg);
    position: relative;
    z-index: 1;
}

.profile-overlay.active .profile-close-btn {
    opacity: 1;
    transform: rotate(0deg);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s, background 0.3s ease, border-color 0.3s ease;
}

.profile-close-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    color: var(--neon-primary);
}

/* Tabs */
.profile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    padding: 0 1rem;
    position: relative;
}

.profile-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 0 10px var(--neon-primary);
}

.profile-tab-btn {
    flex: 1;
    padding: 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    opacity: 0;
    transform: translateY(10px);
}

.profile-overlay.active .profile-tab-btn {
    opacity: 1;
    transform: translateY(0);
}

.profile-overlay.active .profile-tab-btn:nth-child(1) { transition-delay: 0.25s; }
.profile-overlay.active .profile-tab-btn:nth-child(2) { transition-delay: 0.30s; }
.profile-overlay.active .profile-tab-btn:nth-child(3) { transition-delay: 0.35s; }

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

.profile-tab-btn.active {
    color: var(--neon-primary);
}

/* Content */
.profile-content {
    padding: 1.5rem;
    position: relative;
    min-height: 250px;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
}

.profile-content::-webkit-scrollbar {
    width: 4px;
}

.profile-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.profile-content::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 2px;
}

.profile-tab-panel {
    display: none;
    opacity: 0;
}

.profile-tab-panel.active {
    display: block;
}

/* ===== TAB PROFIL ===== */
.profile-title-showcase {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 165, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

.profile-title-showcase::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 215, 0, 0.1), transparent 30%);
    animation: profileRotateBg 8s linear infinite;
}

@keyframes profileRotateBg {
    to { transform: rotate(360deg); }
}

.profile-title-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.profile-title-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--neon-primary);
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    position: relative;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.profile-stat-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-stat-card:hover::before {
    opacity: 1;
}

.profile-stat-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-5px) scale(1);
}

.profile-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--neon-primary);
    margin-bottom: 0.25rem;
    position: relative;
}

.profile-stat-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

/* Ripple effect */
.profile-stat-card .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.3);
    transform: scale(0);
    pointer-events: none;
    animation: profileRipple 0.6s ease-out forwards;
}

@keyframes profileRipple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* ===== TAB BADGES ===== */
.profile-badges-category {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateX(-20px);
}

.profile-badges-category:last-child {
    margin-bottom: 0;
}

.profile-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.profile-category-indicator {
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--neon-primary), var(--neon-secondary));
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.profile-category-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-badges-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
}

.profile-badge-item {
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.profile-badge-item.locked {
    opacity: 0.35 !important;
}

.profile-badge-item.unlocked {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.08);
}

.profile-badge-item:hover {
    transform: scale(1.1) rotate(0deg) !important;
}

.profile-badge-item.unlocked:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.profile-badge-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #5C4A0F, #3D320A);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.profile-badge-item.unlocked .profile-badge-icon {
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    animation: profileBadgePulse 2s ease-in-out infinite;
}

@keyframes profileBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.2); }
}

.profile-lock-symbol {
    font-size: 0.8rem;
    opacity: 0.4;
}

.profile-badge-number {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.profile-badge-item.unlocked .profile-badge-number {
    color: var(--neon-primary);
}

/* Shine effect */
.profile-badge-item.unlocked::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 60%
    );
    animation: profileBadgeShine 3s ease-in-out infinite;
}

@keyframes profileBadgeShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* ===== TAB TITRES ===== */
.profile-titles-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.profile-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.85rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(50px);
}

.profile-title-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--neon-primary), var(--neon-secondary));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.profile-title-row:hover::before {
    transform: scaleY(1);
}

.profile-title-row:hover {
    transform: translateX(8px);
    border-color: rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.03);
}

.profile-title-row.equipped {
    border-color: var(--neon-primary);
    background: rgba(255, 215, 0, 0.1);
}

.profile-title-row.equipped::before {
    transform: scaleY(1);
}

.profile-title-row.locked {
    opacity: 0.4 !important;
    cursor: not-allowed;
}

.profile-title-row.locked:hover {
    transform: translateX(0);
}

.profile-title-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.profile-title-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-title-requirement {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.profile-status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.profile-status-badge.equipped {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.profile-status-badge.equipped .check-icon {
    display: inline-block;
    animation: profileCheckBounce 0.5s ease;
}

@keyframes profileCheckBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.profile-status-badge.locked {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-status-badge.equip {
    background: rgba(255, 215, 0, 0.1);
    color: var(--neon-primary);
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.profile-title-row:hover .profile-status-badge.equip {
    background: rgba(255, 215, 0, 0.2);
}

/* Toast notification */
.profile-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    color: #000;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3);
    opacity: 0;
    z-index: 2000;
    pointer-events: none;
}

.profile-toast.show {
    animation: profileToastIn 0.5s forwards, profileToastOut 0.5s 2s forwards;
}

@keyframes profileToastIn {
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes profileToastOut {
    to { transform: translateX(-50%) translateY(100px); opacity: 0; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .profile-modal {
        width: 95%;
        max-height: 90vh;
        border-radius: 1.25rem;
    }

    .profile-header {
        padding: 1.25rem;
    }

    .profile-username {
        font-size: 1.2rem;
    }

    .profile-content {
        padding: 1.25rem;
    }

    .profile-badges-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.4rem;
    }

    .profile-badge-icon {
        width: 24px;
        height: 24px;
    }

    .profile-badge-number {
        font-size: 0.55rem;
    }

    .profile-stats-grid {
        gap: 0.5rem;
    }

    .profile-stat-value {
        font-size: 1.4rem;
    }

    .profile-stat-label {
        font-size: 0.5rem;
    }

    .profile-title-showcase {
        padding: 1.25rem;
    }

    .profile-title-value {
        font-size: 1.6rem;
    }

    .profile-title-row {
        padding: 0.875rem 1rem;
    }

    .profile-title-name {
        font-size: 0.85rem;
    }
}

@media (max-width: 360px) {
    .profile-badges-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


@media (max-width: 480px) {
    .profile-avatar-wrapper {
        width: 42px;
        height: 42px;
    }
    
    .profile-avatar-default svg {
        width: 22px;
        height: 22px;
    }
    
    .profile-username {
        font-size: 1.15rem;
    }
    
    .profile-user-info {
        gap: 0.75rem;
    }
    
    .profile-header {
        padding: 1.25rem;
    }
}


/* ============================================
   ONGLET AVATAR - STYLES CSS
   À ajouter dans home.css
   ============================================ */

/* ===== AVATAR ACTUEL (preview) ===== */
.profile-current-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: scale(0.8);
}

.profile-avatar-preview {
    position: relative;
    width: 90px;
    height: 90px;
}

.profile-avatar-ring-large {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--neon-primary),
        var(--neon-secondary),
        var(--neon-primary)
    );
    animation: profileAvatarRingSpin 4s linear infinite;
    opacity: 0.9;
}

.profile-avatar-ring-large::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: var(--bg-card);
    border-radius: 50%;
}

.profile-avatar-img-large {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.profile-avatar-default-large {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.profile-avatar-default-large svg {
    width: 45px;
    height: 45px;
    fill: var(--neon-primary);
    opacity: 0.8;
}

.profile-avatar-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== DIVIDER ===== */
.profile-avatar-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.profile-avatar-divider::before,
.profile-avatar-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

.profile-avatar-divider span {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* ===== SECTIONS ===== */
.profile-avatar-section {
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(20px);
}

.profile-avatar-section:last-child {
    margin-bottom: 0;
}

.profile-avatar-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.profile-avatar-section-icon {
    font-size: 1rem;
}

.profile-avatar-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== GRILLE AVATARS ===== */
.profile-avatars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.profile-avatars-grid-single {
    grid-template-columns: repeat(1, 1fr);
    max-width: 80px;
}

.profile-avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    opacity: 0;
    transform: scale(0) rotate(-10deg);
}

.profile-avatar-option:hover {
    transform: scale(1.05) translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.profile-avatar-option.selected {
    border-color: var(--neon-primary);
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.profile-avatar-option.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.profile-avatar-option.locked:hover {
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: none;
}

.profile-avatar-option-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
}

.profile-avatar-option:hover .profile-avatar-option-img {
    border-color: rgba(255, 215, 0, 0.4);
}

.profile-avatar-option.selected .profile-avatar-option-img {
    border-color: var(--neon-primary);
}

.profile-avatar-option-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.profile-avatar-option-name {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-avatar-option.selected .profile-avatar-option-name {
    color: var(--neon-primary);
}

/* ===== BADGE SÉLECTIONNÉ ===== */
.profile-avatar-selected-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    animation: profileAvatarBadgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes profileAvatarBadgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ===== CADENAS ===== */
.profile-avatar-lock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .profile-avatars-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .profile-avatar-option {
        padding: 0.5rem;
    }
    
    .profile-avatar-option-img {
        width: 42px;
        height: 42px;
    }
    
    .profile-avatar-preview {
        width: 75px;
        height: 75px;
    }
    
    .profile-avatar-default-large svg {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 360px) {
    .profile-avatars-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ============================================
   🆕 NOUVEAU PODIUM DESIGN - WINNER SCREEN
   ============================================ */

/* Container principal */
.winner-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(1rem, 3vw, 2rem);
    width: 100%;
    max-width: 56.25rem;
    margin: 0 auto;
}

/* Particules de fond */
.winner-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.winner-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--neon-primary);
    border-radius: 50%;
    opacity: 0;
    animation: winnerFloatUp 12s infinite;
}

.winner-particle.accent {
    background: #6366F1;
}

@keyframes winnerFloatUp {
    0% { opacity: 0; transform: translateY(100vh) scale(1); }
    10% { opacity: 0.7; }
    90% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-10vh) scale(0.5); }
}

/* Explosions de fond */
.bg-explosions {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.bg-explosion {
    position: fixed;
    pointer-events: none;
}

.bg-explosion-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: bgExplodeParticle 1.5s ease-out forwards;
}

@keyframes bgExplodeParticle {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0); }
}

/* Podium */
.winner-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.75rem, 2.5vw, 2.5rem);
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* 🆕 Message aucun gagnant */
.no-winner-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out forwards;
}

.no-winner-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

.no-winner-message h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    color: #ff6b6b;
    margin-bottom: 0.5rem;
}

.no-winner-message p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
}

.podium-place.third { animation: podiumRiseUp 0.6s ease-out 0.3s forwards; }
.podium-place.second { animation: podiumRiseUp 0.6s ease-out 1.3s forwards; }
.podium-place.first { animation: podiumRiseUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards; }

@keyframes podiumRiseUp {
    0% { opacity: 0; transform: translateY(50px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Médailles */
.podium-medal {
    width: clamp(2.5rem, 4vw, 3.5rem);
    height: clamp(2.5rem, 4vw, 3.5rem);
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    opacity: 0;
    animation: medalAppear 0.5s ease-out forwards;
}

.podium-place.third .podium-medal { animation-delay: 0.3s; }
.podium-place.second .podium-medal { animation-delay: 1.3s; }
.podium-place.first .podium-medal { 
    width: clamp(3rem, 5vw, 4rem);
    height: clamp(3rem, 5vw, 4rem);
    filter: drop-shadow(0 4px 15px rgba(240, 200, 80, 0.4));
    animation-delay: 3.6s;
}

@keyframes medalAppear {
    0% { opacity: 0; transform: scale(0.5) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Cartes */
.podium-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    padding: clamp(1.25rem, 2vw, 2.25rem) clamp(1rem, 2vw, 2.25rem);
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
    position: relative;
    min-width: clamp(6.5rem, 15vw, 12.5rem);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.podium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s;
}

.podium-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.1);
}

.podium-card:hover::before {
    opacity: 1;
}

/* Premier place spécial */
.podium-place.first .podium-card {
    min-width: clamp(8rem, 18vw, 15rem);
    padding: clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.75rem);
    background: linear-gradient(135deg, rgba(240, 200, 80, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(240, 200, 80, 0.2);
    box-shadow: 
        0 25px 50px -12px rgba(240, 200, 80, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.podium-place.first .podium-card::before {
    background: radial-gradient(circle at 50% 0%, rgba(240, 200, 80, 0.1) 0%, transparent 60%);
}

.podium-place.first .podium-card:hover {
    box-shadow: 
        0 30px 60px -12px rgba(240, 200, 80, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.podium-place.second .podium-card {
    border-color: rgba(156, 163, 175, 0.15);
}

.podium-place.second .podium-card::before {
    background: radial-gradient(circle at 50% 0%, rgba(156, 163, 175, 0.08) 0%, transparent 60%);
}

.podium-place.third .podium-card {
    border-color: rgba(184, 115, 51, 0.15);
}

.podium-place.third .podium-card::before {
    background: radial-gradient(circle at 50% 0%, rgba(184, 115, 51, 0.08) 0%, transparent 60%);
}

/* Light burst effect */
.podium-light-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(240, 200, 80, 0.4) 30%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: podiumBurstExpand 0.8s ease-out 3.2s forwards;
}

@keyframes podiumBurstExpand {
    0% { width: 0; height: 0; opacity: 1; }
    50% { opacity: 0.8; }
    100% { width: 400px; height: 400px; opacity: 0; }
}

/* Particle burst container */
.podium-particle-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 10;
}

.winner-burst-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: winnerBurstAnim 0.8s ease-out forwards;
}

@keyframes winnerBurstAnim {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

/* Winner content (revealed after burst) */
.podium-winner-content {
    opacity: 0;
    animation: winnerContentReveal 0.5s ease-out 3.6s forwards;
}

@keyframes winnerContentReveal {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* Couronne */
.podium-crown {
    width: clamp(2rem, 3.5vw, 2.875rem);
    height: clamp(2rem, 3.5vw, 2.875rem);
    margin: 0 auto clamp(0.5rem, 1vw, 1rem);
    opacity: 0;
    animation: crownRevealAnim 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.8s forwards;
    filter: drop-shadow(0 0 15px rgba(240, 200, 80, 0.5));
}

.podium-crown svg {
    width: 100%;
    height: 100%;
}

@keyframes crownRevealAnim {
    0% { opacity: 0; transform: scale(0.5) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Nom du joueur */
.podium-player-name {
    font-size: clamp(0.85rem, 1.2vw, 1.2rem);
    font-weight: 600;
    margin-bottom: clamp(0.75rem, 1vw, 1.25rem);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.podium-place.first .podium-player-name {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, #FFD700 0%, #fff 50%, #F0C850 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShineAnim 4s ease-in-out infinite;
}

@keyframes textShineAnim {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

/* Stats Grid */
.podium-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.4rem, 0.8vw, 0.85rem);
}

.podium-stats.single-stat {
    grid-template-columns: 1fr;
}

.podium-stats.single-stat .podium-stat {
    padding: clamp(0.5rem, 1vw, 1rem) clamp(0.5rem, 1vw, 1rem);
}

.podium-stat {
    text-align: center;
    padding: clamp(0.4rem, 0.8vw, 0.85rem) clamp(0.25rem, 0.5vw, 0.6rem);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
}

.podium-stat-val {
    font-size: clamp(0.9rem, 1.1vw, 1.2rem);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.podium-place.first .podium-stat-val {
    color: var(--neon-primary);
    font-size: clamp(1rem, 1.3vw, 1.35rem);
}

.podium-stat-val svg {
    width: clamp(0.875rem, 1.1vw, 1.125rem);
    height: clamp(0.875rem, 1.1vw, 1.125rem);
    opacity: 0.7;
}

.podium-place.first .podium-stat-val svg {
    width: clamp(1rem, 1.2vw, 1.25rem);
    height: clamp(1rem, 1.2vw, 1.25rem);
}

.podium-stat-label {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #444);
    margin-top: 0.25rem;
}

/* Podium Step */
.podium-step {
    width: 100%;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    overflow: hidden;
}

.podium-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.podium-place.first .podium-step {
    height: clamp(3.5rem, 6vw, 5.3rem);
    background: linear-gradient(180deg, rgba(240, 200, 80, 0.12) 0%, rgba(240, 200, 80, 0.02) 100%);
}

.podium-place.first .podium-step::before {
    background: linear-gradient(90deg, transparent, var(--neon-primary), transparent);
}

.podium-place.second .podium-step {
    height: clamp(2.2rem, 4vw, 3.4rem);
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.08) 0%, rgba(156, 163, 175, 0.01) 100%);
}

.podium-place.second .podium-step::before {
    background: linear-gradient(90deg, transparent, #9CA3AF, transparent);
}

.podium-place.third .podium-step {
    height: clamp(1.4rem, 2.5vw, 2.2rem);
    background: linear-gradient(180deg, rgba(184, 115, 51, 0.08) 0%, rgba(184, 115, 51, 0.01) 100%);
}

.podium-place.third .podium-step::before {
    background: linear-gradient(90deg, transparent, #B87333, transparent);
}

/* Your Rank Section */
.your-rank-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(0.875rem, 1.5vw, 1.25rem) clamp(1.25rem, 2vw, 2rem);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    opacity: 0;
    animation: fadeInAnim 0.5s ease-out 3.9s forwards;
    max-width: 25rem;
    margin-left: auto;
    margin-right: auto;
}

@keyframes fadeInAnim {
    to { opacity: 1; }
}

.your-rank-position {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.your-rank-number {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary);
}

.your-rank-suffix {
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    color: var(--text-muted, #444);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.your-rank-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

.your-rank-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.your-rank-name {
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 600;
    color: var(--text-primary);
}

.your-rank-stats {
    font-size: clamp(0.65rem, 0.85vw, 0.75rem);
    color: var(--text-muted, #444);
    display: flex;
    gap: 0.75rem;
}

.your-rank-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.your-rank-stats svg {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

/* Bouton Retour */
.btn-winner-back {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    font-weight: 500;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeInAnim 0.5s ease-out 4.2s forwards;
    position: relative;
}

.btn-winner-back::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-primary), transparent);
    transition: transform 0.3s ease;
}

.btn-winner-back:hover {
    color: var(--neon-primary);
}

.btn-winner-back:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* ============================================
   RESPONSIVE - WINNER PODIUM
   ============================================ */

@media (max-width: 750px) {
    .winner-podium { gap: 1rem; }
    .podium-card { 
        min-width: 9rem; 
        padding: 1.5rem 1.25rem;
    }
    .podium-place.first .podium-card { 
        min-width: 11rem; 
        padding: 1.75rem 1.5rem; 
    }
    .podium-player-name { font-size: 0.95rem; }
    .podium-place.first .podium-player-name { font-size: 1.1rem; }
    .podium-medal { width: 2.75rem; height: 2.75rem; }
    .podium-place.first .podium-medal { width: 3.25rem; height: 3.25rem; }
    .podium-crown { width: 2.125rem; height: 2.125rem; }
    .podium-stat-val { font-size: 1rem; }
    .podium-place.first .podium-stat-val { font-size: 1.1rem; }
    .podium-place.first .podium-step { height: 4.375rem; }
    .podium-place.second .podium-step { height: 2.8rem; }
    .podium-place.third .podium-step { height: 1.75rem; }
}

@media (max-width: 600px) {
    .winner-container { padding: 1.5rem 1rem; }
    .winner-podium { gap: 0.5rem; margin-bottom: 2rem; }
    .podium-card { 
        min-width: 6.5rem; 
        padding: 1.25rem 0.75rem;
        border-radius: 1rem;
    }
    .podium-place.first .podium-card { 
        min-width: 8rem; 
        padding: 1.5rem 1rem; 
    }
    .podium-player-name { font-size: 0.75rem; }
    .podium-place.first .podium-player-name { font-size: 0.9rem; }
    .podium-medal { width: 2.375rem; height: 2.375rem; margin-bottom: 0.75rem; }
    .podium-place.first .podium-medal { width: 2.875rem; height: 2.875rem; }
    .podium-crown { width: 1.75rem; height: 1.75rem; margin-bottom: 0.5rem; }
    .podium-stats { gap: 0.4rem; }
    .podium-stat { padding: 0.5rem 0.25rem; border-radius: 0.5rem; }
    .podium-stat-val { font-size: 0.85rem; gap: 0.2rem; }
    .podium-stat-val svg { width: 0.75rem; height: 0.75rem; }
    .podium-place.first .podium-stat-val { font-size: 0.95rem; }
    .podium-place.first .podium-stat-val svg { width: 0.875rem; height: 0.875rem; }
    .podium-stat-label { font-size: 0.55rem; }
    .podium-place.first .podium-step { height: 3.125rem; }
    .podium-place.second .podium-step { height: 2rem; }
    .podium-place.third .podium-step { height: 1.25rem; }
    .your-rank-section { padding: 1rem 1.25rem; gap: 1rem; margin-bottom: 2rem; }
    .your-rank-number { font-size: 1.25rem; }
    .your-rank-name { font-size: 0.85rem; }
    .your-rank-stats { font-size: 0.7rem; }
    .btn-winner-back { font-size: 0.85rem; padding: 0.6rem 1.5rem; }
}

@media (max-width: 400px) {
    .winner-podium { gap: 0.35rem; }
    .podium-card { min-width: 5.5rem; padding: 1rem 0.5rem; }
    .podium-place.first .podium-card { min-width: 6.875rem; padding: 1.25rem 0.75rem; }
    .podium-player-name { font-size: 0.65rem; }
    .podium-place.first .podium-player-name { font-size: 0.8rem; }
    .podium-medal { width: 2rem; height: 2rem; }
    .podium-place.first .podium-medal { width: 2.5rem; height: 2.5rem; }
    .podium-crown { width: 1.5rem; height: 1.5rem; }
    .podium-stat { padding: 0.4rem 0.2rem; }
    .podium-stat-val { font-size: 0.75rem; }
    .podium-place.first .podium-stat-val { font-size: 0.85rem; }
    .podium-stat-label { font-size: 0.5rem; }
    .podium-place.first .podium-step { height: 2.5rem; }
    .podium-place.second .podium-step { height: 1.625rem; }
    .podium-place.third .podium-step { height: 1rem; }
    .your-rank-section { flex-direction: column; gap: 0.5rem; padding: 1rem; }
    .your-rank-divider { width: 50px; height: 1px; }
    .your-rank-info { align-items: center; }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
    .winner-container { padding: 1rem; }
    .winner-podium { margin-bottom: 1.5rem; }
    .podium-medal { width: 2.25rem; height: 2.25rem; margin-bottom: 0.5rem; }
    .podium-place.first .podium-medal { width: 2.75rem; height: 2.75rem; }
    .podium-card { padding: 1rem 0.75rem; }
    .podium-place.first .podium-card { padding: 1.25rem 1rem; }
    .podium-crown { width: 1.625rem; height: 1.625rem; margin-bottom: 0.4rem; }
    .podium-player-name { font-size: 0.8rem; margin-bottom: 0.75rem; }
    .podium-place.first .podium-player-name { font-size: 0.95rem; }
    .podium-stats { gap: 0.4rem; }
    .podium-stat { padding: 0.4rem 0.25rem; }
    .podium-stat-val { font-size: 0.85rem; }
    .podium-place.first .podium-step { height: 2.5rem; }
    .podium-place.second .podium-step { height: 1.75rem; }
    .podium-place.third .podium-step { height: 1.125rem; }
    .your-rank-section { padding: 0.75rem 1rem; margin-bottom: 1rem; }
}

/* High resolution screens (2K, 4K) */
@media (min-width: 1920px) {
    .winner-container { max-width: 70rem; }
    .winner-podium { gap: 3.5rem; }
    .podium-card { 
        min-width: 15rem;
        padding: 2.75rem;
        border-radius: 1.75rem;
    }
    .podium-place.first .podium-card {
        min-width: 18rem;
        padding: 3.25rem;
    }
    .podium-medal { width: 4.5rem; height: 4.5rem; }
    .podium-place.first .podium-medal { width: 5.5rem; height: 5.5rem; }
    .podium-crown { width: 3.5rem; height: 3.5rem; }
    .podium-player-name { font-size: 1.5rem; }
    .podium-place.first .podium-player-name { font-size: 1.875rem; }
    .podium-stat-val { font-size: 1.5rem; }
    .podium-place.first .podium-stat-val { font-size: 1.75rem; }
    .podium-stat-label { font-size: 0.875rem; }
    .podium-place.first .podium-step { height: 7rem; }
    .podium-place.second .podium-step { height: 4.5rem; }
    .podium-place.third .podium-step { height: 2.8rem; }
    .your-rank-section { max-width: 32rem; padding: 1.75rem 2.5rem; }
    .your-rank-number { font-size: 2rem; }
    .your-rank-name { font-size: 1.25rem; }
    .your-rank-stats { font-size: 1rem; }
    .btn-winner-back { font-size: 1.1rem; padding: 1rem 3rem; }
}

@media (min-width: 2560px) {
    .winner-container { max-width: 90rem; }
    .winner-podium { gap: 5rem; }
    .podium-card { 
        min-width: 20rem;
        padding: 3.5rem;
        border-radius: 2rem;
    }
    .podium-place.first .podium-card {
        min-width: 24rem;
        padding: 4rem;
    }
    .podium-medal { width: 6rem; height: 6rem; }
    .podium-place.first .podium-medal { width: 7rem; height: 7rem; }
    .podium-crown { width: 4.5rem; height: 4.5rem; }
    .podium-player-name { font-size: 1.875rem; }
    .podium-place.first .podium-player-name { font-size: 2.25rem; }
    .podium-stat-val { font-size: 1.875rem; }
    .podium-place.first .podium-stat-val { font-size: 2.125rem; }
    .podium-stat-label { font-size: 1rem; }
    .podium-place.first .podium-step { height: 9rem; }
    .podium-place.second .podium-step { height: 6rem; }
    .podium-place.third .podium-step { height: 3.75rem; }
}


/* ============================================
   🆕 SYSTÈME DE DÉFIS - Bandelettes à gauche
   ============================================ */

.challenges-container {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 100;
    max-width: 320px;
}

.challenge-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, 
        rgba(20, 20, 30, 0.95) 0%, 
        rgba(15, 15, 22, 0.9) 100%);
    border-left: 3px solid #f0c14b;
    border-radius: 0 6px 6px 0;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    min-width: 300px;
    
    /* 🆕 Animation d'apparition */
    animation: slideInFromLeft 0.5s ease-out forwards;
    opacity: 0;
}

/* Délai progressif pour chaque bandelette */
.challenge-strip:nth-child(1) {
    animation-delay: 0.1s;
}

.challenge-strip:nth-child(2) {
    animation-delay: 0.25s;
}

.challenge-strip:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    70% {
        transform: translateX(5%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* État complété */
.challenge-strip.completed {
    border-left-color: #48bb78;
    opacity: 0.35;
    filter: saturate(0.4);
    animation: challengeComplete 0.8s ease forwards;
}

@keyframes challengeComplete {
    0% { 
        box-shadow: 0 0 20px rgba(72, 187, 120, 0.6);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 30px rgba(72, 187, 120, 0.8);
        opacity: 0.8;
    }
    100% { 
        box-shadow: none;
        opacity: 0.35;
    }
}

/* Icône du défi */
.challenge-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.challenge-icon svg {
    width: 100%;
    height: 100%;
    fill: #f0c14b;
    opacity: 0.9;
}

.challenge-strip.completed .challenge-icon svg {
    fill: #48bb78;
}

/* Contenu du défi */
.challenge-content {
    flex: 1;
    min-width: 0;
}

.challenge-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.challenge-strip.completed .challenge-title {
    color: #a0aec0;
}

.challenge-desc {
    font-size: 0.68rem;
    color: #888;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Barre de progression */
.challenge-progress-bar {
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    margin-top: 0.3rem;
    overflow: hidden;
}

.challenge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f0c14b, transparent);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Récompense */
.challenge-reward {
    flex-shrink: 0;
}

.reward-text {
    font-size: 0.55rem;
    color: #888;
    background: rgba(240, 193, 75, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.reward-text::before {
    content: '+';
    color: #f0c14b;
    margin-right: 0.15rem;
}

.challenge-strip.completed .reward-text {
    background: rgba(72, 187, 120, 0.1);
    color: #48bb78;
}

.challenge-strip.completed .reward-text::before {
    content: '✓';
    color: #48bb78;
}

/* Checkbox */
.challenge-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    margin-top: 2px;
}

.challenge-checkbox svg {
    width: 14px;
    height: 14px;
    fill: #48bb78;
}

.challenge-strip.completed .challenge-checkbox {
    border-color: #48bb78;
    background: rgba(72, 187, 120, 0.2);
}


/* ============================================
   RESPONSIVE - Défis selon résolution
   ============================================ */

/* Petits écrans desktop (1366x768, laptops avec scaling) */
@media (max-width: 1440px) {
    .challenges-container {
        left: 0.75rem;
        gap: 1.5rem;
        max-width: 260px;
    }
    
    .challenge-strip {
        min-width: 240px;
        padding: 0.6rem 0.8rem;
        gap: 0.5rem;
    }
    
    .challenge-icon {
        width: 16px;
        height: 16px;
    }
    
    .challenge-title {
        font-size: 0.7rem;
    }
    
    .challenge-desc {
        font-size: 0.6rem;
    }
    
    .reward-text {
        font-size: 0.55rem;
        padding: 0.1rem 0.35rem;
    }
    
    .challenge-checkbox {
        width: 16px;
        height: 16px;
    }
}

/* Full HD (1920x1080) - Taille réduite */
@media (min-width: 1441px) and (max-width: 2048px) {
    .challenges-container {
        left: 1rem;
        gap: 2rem;
        max-width: 320px;
    }
    
    .challenge-strip {
        min-width: 300px;
        padding: 0.75rem 1rem;
    }
    
    .challenge-title {
        font-size: 0.8rem;
    }
    
    .challenge-desc {
        font-size: 0.68rem;
    }
}

/* 2K / QHD (2560x1440) */
@media (min-width: 2049px) and (max-width: 3000px) {
    .challenges-container {
        left: 1.5rem;
        gap: 2.5rem;
        max-width: 320px;
    }
    
    .challenge-strip {
        min-width: 300px;
        padding: 0.8rem 1rem;
        border-left-width: 4px;
    }
    
    .challenge-icon {
        width: 20px;
        height: 20px;
    }
    
    .challenge-title {
        font-size: 0.8rem;
    }
    
    .challenge-desc {
        font-size: 0.7rem;
    }
    
    .reward-text {
        font-size: 0.6rem;
        padding: 0.15rem 0.45rem;
    }
    
    .challenge-checkbox {
        width: 20px;
        height: 20px;
    }
    
    .challenge-progress-bar {
        height: 3px;
    }
}

/* 4K (3840x2160) */
@media (min-width: 3001px) {
    .challenges-container {
        left: 2rem;
        gap: 3rem;
        max-width: 380px;
    }
    
    .challenge-strip {
        min-width: 360px;
        padding: 0.9rem 1.1rem;
        border-left-width: 4px;
        border-radius: 0 8px 8px 0;
    }
    
    .challenge-icon {
        width: 24px;
        height: 24px;
    }
    
    .challenge-title {
        font-size: 0.9rem;
    }
    
    .challenge-desc {
        font-size: 0.75rem;
    }
    
    .reward-text {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
    
    .challenge-checkbox {
        width: 24px;
        height: 24px;
    }
    
    .challenge-progress-bar {
        height: 3px;
        margin-top: 0.4rem;
    }
}

/* Masquer sur mobile et tablette */
@media (max-width: 1024px) {
    .challenges-container {
        display: none;
    }
}


/* ============================================
   🆕 DÉFIS MOBILE - Icône + Modal
   ============================================ */

/* Icône défis en bas gauche (visible uniquement sur mobile) */
.challenges-mobile-icon {
    display: none;
}

@media (max-width: 1024px) {
    .challenges-mobile-icon {
        display: flex;
        position: fixed;
        bottom: 2rem;
        left: 2rem;
        width: 2.5rem;
        height: 2.5rem;
        background: rgba(20, 20, 30, 0.9);
        border: 2px solid rgba(240, 193, 75, 0.4);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        z-index: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .challenges-mobile-icon:active {
        transform: scale(0.95);
    }

    .challenges-mobile-icon svg {
        width: 1rem;
        height: 1rem;
        fill: #f0c14b;
    }

    .challenges-mobile-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #3b82f6;
        color: #fff;
        font-family: 'Orbitron', sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Overlay modal */
    .challenges-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 1rem;
    }

    /* Modal */
    .challenges-mobile-modal {
        background: linear-gradient(145deg, #1a1a24, #12121a);
        border: 1px solid rgba(240, 193, 75, 0.2);
        border-radius: 16px;
        width: 100%;
        max-width: 340px;
        max-height: 80vh;
        overflow: hidden;
    }

    .challenges-mobile-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0.75rem 1rem;
    }

    .challenges-mobile-close {
        background: none;
        border: none;
        color: #888;
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0.25rem;
        line-height: 1;
    }

    .challenges-mobile-close:active {
        color: #fff;
    }

    /* Liste des défis */
    .challenges-mobile-list {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .challenge-mobile-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        background: rgba(255, 255, 255, 0.03);
        border-left: 3px solid #f0c14b;
        border-radius: 0 8px 8px 0;
        transition: all 0.3s ease;
    }

    .challenge-mobile-item.completed {
        border-left-color: #48bb78;
        opacity: 0.5;
    }

    .challenge-mobile-left {
        flex: 1;
        min-width: 0;
    }

    .challenge-mobile-name {
        font-family: 'Orbitron', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0.2rem;
    }

    .challenge-mobile-item.completed .challenge-mobile-name {
        color: #a0aec0;
    }

    .challenge-mobile-desc {
        font-size: 0.7rem;
        color: #888;
    }

    .challenge-mobile-progress-bar {
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        margin-top: 0.5rem;
        overflow: hidden;
    }

    .challenge-mobile-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #f0c14b, rgba(240, 193, 75, 0.3));
        border-radius: 2px;
        transition: width 0.3s ease;
    }

    .challenge-mobile-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.35rem;
        margin-left: 0.75rem;
    }

    .challenge-mobile-reward {
        font-size: 0.6rem;
        color: #888;
        background: rgba(240, 193, 75, 0.1);
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
    }

    .challenge-mobile-item.completed .challenge-mobile-reward {
        background: rgba(72, 187, 120, 0.1);
        color: #48bb78;
    }

    .challenge-mobile-check {
        width: 1.25rem;
        height: 1.25rem;
        background: rgba(72, 187, 120, 0.2);
        border: 1px solid #48bb78;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #48bb78;
        font-size: 0.75rem;
        font-weight: 700;
    }

    /* Animation d'apparition */
    .challenges-modal-enter-active,
    .challenges-modal-leave-active {
        transition: opacity 0.25s ease;
    }

    .challenges-modal-enter-active .challenges-mobile-modal,
    .challenges-modal-leave-active .challenges-mobile-modal {
        transition: transform 0.25s ease;
    }

    .challenges-modal-enter-from,
    .challenges-modal-leave-to {
        opacity: 0;
    }

    .challenges-modal-enter-from .challenges-mobile-modal,
    .challenges-modal-leave-to .challenges-mobile-modal {
        transform: scale(0.9);
    }
}

/* ============================================
   LOBBY TIPS (PC uniquement)
   ============================================ */

.lobby-tips-container {
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
}

.lobby-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    animation: tipFadeInOut 7s ease forwards;
}

.tip-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tip-text {
    text-align: center;
    line-height: 1.4;
}

@keyframes tipFadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    12% { opacity: 1; transform: translateY(0); }
    88% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-5px); }
}

/* Ajustements mobile */
@media (max-width: 768px) {
    .lobby-tips-container {
        bottom: 1.5rem;
        width: 95%;
        padding: 0 0.5rem;
    }

    .lobby-tip {
        font-size: 0.75rem;
        padding: 0.5rem 0.8rem;
    }

    .tip-icon {
        font-size: 0.8rem;
    }
}