/* ============================================
   MARMOTTE WORLD - DESIGN MODERNE V3
   ============================================ */

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Classe utilitaire hidden */
.hidden {
    display: none !important;
}

:root {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-light: #a78bfa;
    --secondary: #f59e0b;
    --accent: #06b6d4;
    --success: #10b981;
    --danger: #ef4444;
    --bg-dark: #0c0a1d;
    --bg-medium: #1a1633;
    --bg-light: #2d2654;
    --text: #f8fafc;
    --text-muted: #a5b4fc;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --radius: 20px;
    --radius-sm: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
    min-height: 100vh;
}

/* === BOUTON MUSIQUE DANS HEADER === */
.music-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.music-toggle-btn:hover {
    background: rgba(139, 92, 246, 0.5);
    border-color: var(--primary);
    transform: scale(1.1);
}

.music-toggle-btn .music-icon {
    font-size: 1.5rem;
}

.music-toggle-btn.music-on {
    background: rgba(139, 92, 246, 0.3);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

/* Cacher toutes les barres de défilement */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* === ARRIERE-PLAN MODERNE ANIME === */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: linear-gradient(135deg,
        #0c0a1d 0%,
        #1a1040 25%,
        #0f1729 50%,
        #1a0a2e 75%,
        #0c0a1d 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Désactiver l'animation par défaut quand un thème est appliqué */
.bg-gradient[class*="theme-"] {
    animation: none;
    background-size: 100% 100%;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Orbes lumineux flottants */
.bg-orbs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
    top: -20%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
    top: 50%;
    right: -15%;
    animation-delay: -5s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
    bottom: -10%;
    left: 30%;
    animation-delay: -10s;
}

.orb-4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #ec4899 0%, transparent 70%);
    top: 20%;
    right: 20%;
    animation-delay: -15s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -30px) scale(1.1); }
    50% { transform: translate(-30px, 50px) scale(0.95); }
    75% { transform: translate(-50px, -20px) scale(1.05); }
}

/* Grille de fond subtile */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -8;
    background-image:
        linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* Etoiles scintillantes */
.bg-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -7;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* === NEIGE === */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Flocons classiques (non utilisés maintenant) */
.snowflake {
    position: absolute;
    color: white;
    animation: snowfall linear infinite;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Flocons OPTIMISES pour performances */
.snowflake-light {
    position: absolute;
    color: white;
    animation: snowfallLight linear infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes snowfallLight {
    0% { transform: translateY(-20px); }
    100% { transform: translateY(100vh); }
}

/* === ECRANS === */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    background: var(--bg-dark);
}

.screen::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.screen.active {
    opacity: 1;
    visibility: visible;
}

/* =====================================================
   ECRAN D'ACCUEIL - THEME ALPIN ELEGANT
   ===================================================== */

/* === SCENE DE MONTAGNE ACCUEIL === */
.welcome-mountain-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* Ciel nocturne */
.welcome-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        #0a0a1a 0%,
        #0d1b2a 30%,
        #1b3a5f 60%,
        #2d5a7b 100%
    );
}

/* Aurore boréale accueil */
.welcome-aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 211, 238, 0.08) 20%,
        rgba(16, 185, 129, 0.12) 40%,
        rgba(139, 92, 246, 0.08) 60%,
        transparent 100%
    );
    animation: welcomeAurora 10s ease-in-out infinite;
}

@keyframes welcomeAurora {
    0%, 100% {
        transform: scaleX(1) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: scaleX(1.1) translateY(-20px);
        opacity: 1;
    }
}

/* Étoiles de fond accueil */
.welcome-stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-image:
        radial-gradient(2px 2px at 10% 10%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 20% 25%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 35% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 45% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 65% 5%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 75% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 85% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 30% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 50% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 70% 38%, rgba(255,255,255,0.6), transparent);
    animation: starsShimmer 5s ease-in-out infinite;
}

@keyframes starsShimmer {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Lune */
.welcome-moon {
    position: absolute;
    top: 8%;
    right: 12%;
    width: 80px;
    height: 80px;
}

.moon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle,
        rgba(255, 250, 220, 0.3) 0%,
        rgba(255, 250, 220, 0.1) 40%,
        transparent 70%
    );
    animation: moonGlow 4s ease-in-out infinite;
}

@keyframes moonGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.moon-surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%,
        #fffde8 0%,
        #f5f0d0 50%,
        #e8e0b8 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 30px rgba(255, 250, 220, 0.5),
        inset -10px -10px 20px rgba(0,0,0,0.1);
}

/* Montagnes accueil */
.welcome-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.w-mountain {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.w-mountain-far {
    height: 55%;
    background: linear-gradient(180deg, #1a3550 0%, #0d2035 100%);
    clip-path: polygon(
        0% 100%,
        0% 55%,
        12% 25%,
        22% 45%,
        35% 15%,
        48% 40%,
        58% 10%,
        72% 35%,
        82% 20%,
        92% 45%,
        100% 30%,
        100% 100%
    );
}

.w-mountain-far::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.4) 0%,
        rgba(255,255,255,0.1) 15%,
        transparent 30%
    );
    clip-path: inherit;
}

.w-mountain-mid {
    height: 42%;
    background: linear-gradient(180deg, #2a4a6a 0%, #1a3550 100%);
    clip-path: polygon(
        0% 100%,
        0% 45%,
        8% 30%,
        18% 50%,
        30% 20%,
        42% 45%,
        52% 15%,
        65% 40%,
        75% 25%,
        88% 50%,
        100% 35%,
        100% 100%
    );
}

.w-mountain-mid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.5) 0%,
        rgba(255,255,255,0.15) 12%,
        transparent 25%
    );
    clip-path: inherit;
}

.w-mountain-near {
    height: 30%;
    background: linear-gradient(180deg, #3d6080 0%, #2a4a6a 100%);
    clip-path: polygon(
        0% 100%,
        0% 35%,
        15% 20%,
        25% 40%,
        40% 10%,
        55% 35%,
        70% 15%,
        85% 40%,
        100% 25%,
        100% 100%
    );
}

.w-mountain-near::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.6) 0%,
        rgba(255,255,255,0.2) 10%,
        transparent 20%
    );
    clip-path: inherit;
}

/* Forêt de sapins accueil */
.welcome-forest {
    position: absolute;
    bottom: 12%;
    left: 0;
    width: 100%;
    height: 20%;
    pointer-events: none;
}

.w-tree {
    position: absolute;
    bottom: 0;
    width: 40px;
    background: linear-gradient(180deg, #1a4030 0%, #0d2818 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.w-tree::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 35%;
    background: rgba(255, 255, 255, 0.5);
    clip-path: polygon(50% 0%, 10% 100%, 90% 100%);
}

/* Sol enneigé accueil */
.welcome-snow-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(180deg,
        #c8e0f0 0%,
        #e8f4fc 30%,
        #f0f8ff 60%,
        #ffffff 100%
    );
    border-radius: 100% 100% 0 0 / 80px 80px 0 0;
}

.welcome-snow-ground::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 40px;
    background:
        radial-gradient(ellipse 100px 40px at 15% 100%, rgba(255,255,255,0.95) 0%, transparent 70%),
        radial-gradient(ellipse 150px 50px at 40% 100%, rgba(255,255,255,0.9) 0%, transparent 70%),
        radial-gradient(ellipse 120px 45px at 70% 100%, rgba(255,255,255,0.92) 0%, transparent 70%),
        radial-gradient(ellipse 80px 35px at 90% 100%, rgba(255,255,255,0.95) 0%, transparent 70%);
}

/* Flocons accueil */
.welcome-snowfall {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* === CONTENU PRINCIPAL ACCUEIL === */
.welcome-content-alpine {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    max-width: 700px;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === MASCOTTE ACCUEIL === */
.welcome-mascot {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.mascot-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(34, 211, 238, 0.2) 0%,
        rgba(139, 92, 246, 0.1) 50%,
        transparent 70%
    );
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.mascot-container {
    position: relative;
    display: inline-block;
}

.mascot-emoji-large {
    font-size: 8rem;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    animation: mascotFloat 3s ease-in-out infinite;
}

@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Bonnet de la marmotte */
.mascot-winter-hat {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.hat-body {
    width: 70px;
    height: 35px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 35px 35px 0 0;
    position: relative;
}

.hat-body::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: -10px;
    width: 90px;
    height: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
    border-radius: 5px;
}

.hat-pompom {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e8e8e8 100%);
    border-radius: 50%;
    animation: pompomBounce 2s ease-in-out infinite;
}

@keyframes pompomBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* Écharpe accueil */
.mascot-scarf-welcome {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 12px;
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 50%, #e74c3c 100%);
    border-radius: 6px;
}

.mascot-scarf-welcome::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    width: 25px;
    height: 35px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 0 0 8px 8px;
    transform: rotate(15deg);
    animation: scarfWave 2s ease-in-out infinite;
}

/* Souffle de la marmotte */
.mascot-breath {
    position: absolute;
    top: 40%;
    right: -30px;
    display: flex;
    gap: 5px;
}

.mascot-breath span {
    font-size: 0.8rem;
    opacity: 0;
    animation: breathAnimation 4s ease-in-out infinite;
}

.mascot-breath span:nth-child(1) { animation-delay: 0s; }
.mascot-breath span:nth-child(2) { animation-delay: 0.2s; }
.mascot-breath span:nth-child(3) { animation-delay: 0.4s; }

@keyframes breathAnimation {
    0%, 100% {
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }
    15% {
        opacity: 0.8;
        transform: translateX(15px) scale(1);
    }
    30% {
        opacity: 0;
        transform: translateX(40px) scale(1.3);
    }
}

/* === TITRE ACCUEIL === */
.welcome-title-section {
    margin-bottom: 1.5rem;
}

.welcome-subtitle-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.snowflake-deco {
    animation: snowflakeRotate 6s linear infinite;
}

@keyframes snowflakeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.welcome-main-title {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin: 0;
}

.title-word {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(180deg,
        #ffffff 0%,
        #a8d8ea 40%,
        #72c4d4 70%,
        #4aa8c7 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: titleShine 3s ease-in-out infinite;
}

.title-word:nth-child(1) { animation-delay: 0s; }
.title-word:nth-child(2) { animation-delay: 0.5s; }

@keyframes titleShine {
    0%, 100% {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    }
    50% {
        filter: drop-shadow(0 4px 20px rgba(34, 211, 238, 0.5));
    }
}

.welcome-tagline {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-top: 0.5rem;
    font-style: italic;
}

/* === DESCRIPTION === */
.welcome-description {
    margin-bottom: 2rem;
}

.welcome-description p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* === FEATURES ACCUEIL === */
.welcome-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.welcome-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.feature-icon-wrap {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.welcome-feature:hover .feature-icon-wrap {
    transform: translateY(-5px) scale(1.1);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.2);
}

.feature-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* === BOUTON DEMARRAGE === */
.welcome-start-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg,
        #22d3ee 0%,
        #0891b2 50%,
        #0e7490 100%
    );
    color: white;
    border: none;
    padding: 1.2rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    overflow: hidden;
    box-shadow:
        0 8px 25px rgba(34, 211, 238, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin-bottom: 1.5rem;
}

.welcome-start-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 15px 40px rgba(34, 211, 238, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.welcome-start-btn:active {
    transform: translateY(-2px) scale(1.02);
}

.btn-snow-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.4) 100%
    );
    border-radius: 60px 60px 0 0;
}

.btn-icon-start {
    font-size: 1.5rem;
}

.btn-text-start {
    position: relative;
    z-index: 1;
}

.btn-arrow-start {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.welcome-start-btn:hover .btn-arrow-start {
    transform: translateX(8px);
}

/* === HINT CLAVIER === */
.welcome-hint {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

.welcome-hint kbd {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* === MARMOTTE QUI FAIT COUCOU === */
.welcome-marmotte-wave {
    position: fixed;
    bottom: 20px;
    right: 30px;
    font-size: 3rem;
    animation: marmotteWave 4s ease-in-out infinite;
    z-index: 100;
}

.welcome-marmotte-wave span {
    display: block;
    transform-origin: bottom center;
}

@keyframes marmotteWave {
    0%, 100% { transform: translateY(30px) rotate(0deg); }
    10%, 90% { transform: translateY(0) rotate(0deg); }
    20%, 80% { transform: translateY(0) rotate(-10deg); }
    30%, 50%, 70% { transform: translateY(0) rotate(10deg); }
    40%, 60% { transform: translateY(0) rotate(-10deg); }
}

.wave-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    animation: bubbleAppear 4s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.wave-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
}

@keyframes bubbleAppear {
    0%, 5%, 95%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    15%, 85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* === ANCIEN WRAPPER (pour compatibilité) === */
.welcome-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* EFFETS COSMIQUES TITANESQUES */
.cosmic-vortex {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, 
        transparent 0%, 
        rgba(139, 92, 246, 0.1) 20%, 
        rgba(245, 158, 11, 0.1) 40%, 
        rgba(236, 72, 153, 0.1) 60%, 
        rgba(6, 182, 212, 0.1) 80%, 
        transparent 100%);
    animation: vortexSpin 20s linear infinite;
    pointer-events: none;
}

@keyframes vortexSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.lightning-rays {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: conic-gradient(from 0deg at 50% 50%, 
        transparent 0deg, 
        rgba(255, 255, 255, 0.1) 10deg, 
        transparent 20deg, 
        transparent 40deg, 
        rgba(255, 215, 0, 0.1) 50deg, 
        transparent 60deg);
    animation: lightningFlash 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lightningFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.aurora-borealis {
    position: absolute;
    top: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(34, 211, 238, 0.1) 30%, 
        rgba(139, 92, 246, 0.1) 60%, 
        rgba(245, 158, 11, 0.1) 100%);
    animation: auroraWave 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraWave {
    0%, 100% { transform: translateY(-20px); opacity: 0.3; }
    50% { transform: translateY(20px); opacity: 0.8; }
}

.welcome-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, 
        transparent 0%, 
        transparent 30%, 
        rgba(139, 92, 246, 0.2) 60%, 
        rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}

/* PARTICULES MAGIQUES */
.magic-particles {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

.magic-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #fff 0%, transparent 70%);
    border-radius: 50%;
    animation: particleFloat 10s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { 
        transform: translateY(0) translateX(0); 
        opacity: 0; 
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    50% { 
        transform: translateY(-100px) translateX(50px); 
    }
}

/* CONSTELLATION DE MARMOTTES */
.constellation-marmottes {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

.constellation-star {
    position: absolute;
    font-size: 2rem;
    animation: twinkleDivine 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

@keyframes twinkleDivine {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
    }
    50% { 
        opacity: 1; 
        transform: scale(1.3); 
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1));
    }
}

.welcome-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
    animation: fadeInUpDivine 1.5s ease;
}

@keyframes fadeInUpDivine {
    from { 
        opacity: 0; 
        transform: translateY(60px) scale(0.8); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* MASCOTTE TITANESQUE */
.mascot-titanesque {
    position: relative;
    display: inline-block;
    margin-bottom: 3rem;
}

.mascot-shadow-gigantic {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: shadowBounceDivine 3s ease-in-out infinite;
    filter: blur(15px);
}

@keyframes shadowBounceDivine {
    0%, 100% { 
        transform: translateX(-50%) scale(1); 
        opacity: 0.5; 
    }
    50% { 
        transform: translateX(-50%) scale(0.7); 
        opacity: 0.2; 
    }
}

.mascot-body-divine {
    position: relative;
    z-index: 2;
}

.mascot-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.3) 0%, 
        rgba(139, 92, 246, 0.2) 40%, 
        transparent 70%);
    border-radius: 50%;
    animation: auraPulse 2s ease-in-out infinite;
}

@keyframes auraPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.5; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0.8; 
    }
}

.mascot-emoji-titan {
    font-size: 12rem;
    display: block;
    animation: bounceDivine 3s ease-in-out infinite;
    filter: drop-shadow(0 20px 50px rgba(139, 92, 246, 0.6));
    position: relative;
    z-index: 3;
}

@keyframes bounceDivine {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-15px) scale(1.05); }
    50% { transform: translateY(-30px) scale(1.1); }
    75% { transform: translateY(-15px) scale(1.05); }
}

.mascot-crown {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    animation: crownFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    z-index: 4;
}

@keyframes crownFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

.mascot-greeting-epic {
    position: absolute;
    top: 20px;
    right: -80px;
    background: linear-gradient(135deg, #ffd700, #ff6b6b, #8b5cf6);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 30px;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.6);
    animation: waveEpic 2.5s ease-in-out infinite;
    white-space: nowrap;
    z-index: 5;
}

.mascot-greeting-epic::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border: 12px solid transparent;
    border-right-color: #ffd700;
}

@keyframes waveEpic {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

.greeting-sparkles {
    position: absolute;
    top: -10px; right: -10px;
    font-size: 1.2rem;
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* TITRE MONUMENTAL */
.title-monumental {
    margin-bottom: 2rem;
    position: relative;
}

.title-precursor {
    margin-bottom: 1rem;
    position: relative;
}

.precursor-text {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffd700;
    letter-spacing: 6px;
    text-transform: uppercase;
    animation: precursorGlow 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

@keyframes precursorGlow {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); 
    }
    50% { 
        text-shadow: 0 0 40px rgba(255, 215, 0, 1); 
    }
}

.precursor-lightning {
    position: absolute;
    top: 50%; left: 50%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    transform: translate(-50%, -50%);
    animation: lightningStrike 4s ease-in-out infinite;
}

@keyframes lightningStrike {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.main-title-titanesque {
    margin-bottom: 1rem;
}

.title-line-epic-1 {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(34, 211, 238, 0.6);
    animation: epicPulse 3s ease-in-out infinite;
}

@keyframes epicPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.title-line-epic-2 {
    display: block;
    font-size: 5rem;
    font-weight: 900;
    background: linear-gradient(135deg, 
        #ffd700 0%, 
        #ff6b6b 20%, 
        #8b5cf6 40%, 
        #22d3ee 60%, 
        #10b981 80%, 
        #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 8px 30px rgba(255, 215, 0, 0.5));
    animation: titleGlowDivine 4s ease-in-out infinite;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite, titleGlowDivine 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes titleGlowDivine {
    0%, 100% { 
        filter: drop-shadow(0 8px 30px rgba(255, 215, 0, 0.5)); 
    }
    50% { 
        filter: drop-shadow(0 8px 50px rgba(255, 215, 0, 0.8)); 
    }
}

.title-line-epic-3 {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 25px rgba(245, 158, 11, 0.6);
    animation: epicGlow 3.5s ease-in-out infinite;
}

@keyframes epicGlow {
    0%, 100% { 
        text-shadow: 0 0 25px rgba(245, 158, 11, 0.6); 
    }
    50% { 
        text-shadow: 0 0 50px rgba(245, 158, 11, 1); 
    }
}

.title-thunder {
    margin-top: 1rem;
    font-size: 2rem;
    color: #ffd700;
    animation: thunderFlash 2s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

@keyframes thunderFlash {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* MESSAGE DIVIN */
.divine-message {
    position: relative;
    margin-bottom: 3rem;
}

.message-scroll {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.2), 
        rgba(245, 158, 11, 0.2));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 30px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.message-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 215, 0, 0.2) 50%, 
        transparent 70%);
    animation: messageShimmer 3s ease-in-out infinite;
}

@keyframes messageShimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.subtitle-epic {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.6;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

/* CARACTERISTIQUES DIVINES */
.divine-features {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.feature-titanesque {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.3), 
        rgba(245, 158, 11, 0.3));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 215, 0, 0.4);
    padding: 1.2rem 2rem;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.feature-titanesque:hover {
    transform: translateY(-10px) scale(1.1);
    border-color: #ffd700;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.4);
}

.feature-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.3) 0%, 
        transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-titanesque:hover .feature-orb {
    opacity: 1;
}

.feature-icon-divine {
    font-size: 2rem;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.feature-text-epic {
    font-weight: 800;
    font-size: 1.1rem;
    color: #f8fafc;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.feature-sparkles {
    position: absolute;
    top: -5px; right: -5px;
    font-size: 1rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

/* BOUTON TITANESQUE */
.button-divine-container {
    position: relative;
    margin-bottom: 3rem;
}

.button-pedestal {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 20px;
    background: linear-gradient(90deg, 
        rgba(139, 92, 246, 0.5), 
        rgba(245, 158, 11, 0.5), 
        rgba(139, 92, 246, 0.5));
    border-radius: 50%;
    filter: blur(10px);
    animation: pedestalGlow 2s ease-in-out infinite;
}

@keyframes pedestalGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.btn-start-titanesque {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, 
        #ffd700 0%, 
        #ff6b6b 25%, 
        #8b5cf6 50%, 
        #22d3ee 75%, 
        #10b981 100%);
    color: white;
    border: none;
    padding: 1.8rem 3.5rem;
    font-size: 1.5rem;
    font-weight: 900;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 15px 50px rgba(255, 215, 0, 0.5);
    background-size: 200% 200%;
    animation: buttonGradient 3s ease infinite;
}

@keyframes buttonGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.button-aura {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-start-titanesque:hover .button-aura {
    opacity: 1;
}

.btn-start-titanesque:hover {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 25px 80px rgba(255, 215, 0, 0.7);
}

.btn-text-divine {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.btn-arrow-divine {
    font-size: 2rem;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.btn-start-titanesque:hover .btn-arrow-divine { 
    transform: translateX(10px) scale(1.2); 
}

.button-lightning {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: buttonLightning 4s ease-in-out infinite;
}

@keyframes buttonLightning {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.8; }
}

.button-echo {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    animation: echoPulse 2s ease-in-out infinite;
}

@keyframes echoPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* INDICES DIVINS */
.divine-hints {
    position: relative;
}

.hint-epic {
    font-size: 1rem;
    color: #a5b4fc;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hint-epic kbd {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.3), 
        rgba(245, 158, 11, 0.3));
    border: 1px solid rgba(255, 215, 0, 0.4);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.hint-sparkles {
    font-size: 1.2rem;
    animation: sparkle 2s ease-in-out infinite;
}

/* =====================================================
   MENU PRINCIPAL - THEME MONTAGNE / NEIGE / MARMOTTE
   ===================================================== */

/* === SCENE DE MONTAGNE === */
.mountain-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Aurore boréale */
.menu-aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(34, 211, 238, 0.1) 20%,
        rgba(139, 92, 246, 0.15) 40%,
        rgba(16, 185, 129, 0.1) 60%,
        transparent 100%
    );
    animation: auroraMove 8s ease-in-out infinite;
}

@keyframes auroraMove {
    0%, 100% {
        transform: translateX(-5%) scaleY(1);
        opacity: 0.5;
    }
    50% {
        transform: translateX(5%) scaleY(1.2);
        opacity: 0.8;
    }
}

/* Étoiles du menu */
.menu-stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 160px 20px, white, transparent),
        radial-gradient(2px 2px at 200px 60px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 250px 90px, white, transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255,255,255,0.7), transparent);
    background-size: 350px 100px;
    animation: starsTwinkle 4s ease-in-out infinite;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Montagnes */
.mountains-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mountain {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.mountain-back {
    height: 45%;
    background: linear-gradient(180deg, #1e3a5f 0%, #0f2744 100%);
    clip-path: polygon(
        0% 100%,
        0% 60%,
        15% 30%,
        25% 50%,
        35% 20%,
        50% 45%,
        60% 15%,
        75% 40%,
        85% 25%,
        100% 55%,
        100% 100%
    );
}

.mountain-mid {
    height: 35%;
    background: linear-gradient(180deg, #2d4a6f 0%, #1a3350 100%);
    clip-path: polygon(
        0% 100%,
        0% 50%,
        10% 35%,
        20% 55%,
        35% 25%,
        45% 45%,
        55% 20%,
        70% 50%,
        80% 30%,
        90% 45%,
        100% 35%,
        100% 100%
    );
}

.mountain-front {
    height: 25%;
    background: linear-gradient(180deg, #3d5a80 0%, #293d52 100%);
    clip-path: polygon(
        0% 100%,
        0% 40%,
        20% 25%,
        30% 45%,
        50% 15%,
        65% 40%,
        80% 20%,
        100% 50%,
        100% 100%
    );
}

/* Sommets enneigés */
.mountain-back::before,
.mountain-mid::before,
.mountain-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, transparent 100%);
    clip-path: inherit;
}

/* Forêt de sapins */
.forest-layer {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%;
    height: 15%;
    pointer-events: none;
}

.pine-tree {
    position: absolute;
    bottom: 0;
    width: 30px;
    background: linear-gradient(180deg, #1a4d2e 0%, #0d331a 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pine-tree::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: rgba(255, 255, 255, 0.6);
    clip-path: polygon(50% 0%, 20% 100%, 80% 100%);
}

/* Sol enneigé */
.snow-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background: linear-gradient(180deg, #e8f4f8 0%, #d1e8ef 50%, #b8dce6 100%);
    border-radius: 100% 100% 0 0 / 50px 50px 0 0;
}

.snow-drifts {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5%;
    background:
        radial-gradient(ellipse 80px 30px at 10% 100%, rgba(255,255,255,0.9) 0%, transparent 70%),
        radial-gradient(ellipse 120px 40px at 30% 100%, rgba(255,255,255,0.8) 0%, transparent 70%),
        radial-gradient(ellipse 100px 35px at 60% 100%, rgba(255,255,255,0.85) 0%, transparent 70%),
        radial-gradient(ellipse 90px 30px at 85% 100%, rgba(255,255,255,0.9) 0%, transparent 70%);
}

/* Flocons du menu */
.menu-snowfall {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* === WRAPPER DU MENU === */
.menu-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* === HEADER ALPIN === */
.alpine-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Cadre chalet */
.chalet-frame {
    position: relative;
}

.chalet-roof {
    position: relative;
    height: 25px;
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    width: calc(100% + 40px);
    margin-left: -20px;
}

.roof-snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 100%);
    clip-path: polygon(15% 100%, 50% 20%, 85% 100%);
}

.icicles {
    position: absolute;
    bottom: -15px;
    left: 10%;
    width: 80%;
    display: flex;
    justify-content: space-around;
}

.icicle {
    width: 8px;
    height: 20px;
    background: linear-gradient(180deg, rgba(200, 230, 255, 0.9) 0%, rgba(150, 200, 255, 0.6) 100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    animation: icicleGrow 3s ease-in-out infinite;
}

.icicle:nth-child(2) { height: 25px; animation-delay: 0.5s; }
.icicle:nth-child(3) { height: 18px; animation-delay: 1s; }
.icicle:nth-child(4) { height: 22px; animation-delay: 1.5s; }
.icicle:nth-child(5) { height: 16px; animation-delay: 2s; }

@keyframes icicleGrow {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.1); }
}

.chalet-body {
    background: linear-gradient(180deg,
        rgba(139, 90, 43, 0.95) 0%,
        rgba(101, 67, 33, 0.95) 100%
    );
    border: 3px solid rgba(80, 50, 20, 0.8);
    border-top: none;
    border-radius: 0 0 15px 15px;
    padding: 1rem 1.5rem;
    box-shadow:
        inset 0 5px 15px rgba(0,0,0,0.2),
        0 10px 30px rgba(0,0,0,0.3);
}

/* Section logo alpine */
.logo-section-alpine {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marmotte-mascot {
    position: relative;
    font-size: 3.5rem;
    animation: mascotBounce 2s ease-in-out infinite;
}

.mascot-body {
    display: block;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}

.mascot-scarf {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 8px;
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 50%, #e74c3c 100%);
    border-radius: 3px;
    animation: scarfWave 1.5s ease-in-out infinite;
}

.breath-cloud {
    position: absolute;
    top: 30%;
    right: -20px;
    font-size: 1rem;
    opacity: 0;
    animation: breathe 3s ease-in-out infinite;
}

@keyframes mascotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes scarfWave {
    0%, 100% { transform: translateX(-50%) rotate(-5deg); }
    50% { transform: translateX(-50%) rotate(5deg); }
}

@keyframes breathe {
    0%, 100% { opacity: 0; transform: translateX(0) scale(0.5); }
    20% { opacity: 0.8; transform: translateX(10px) scale(1); }
    40% { opacity: 0; transform: translateX(30px) scale(1.2); }
}

/* Texte du logo */
.logo-text-alpine h1 {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0;
}

.letter-snow {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff 0%, #a8d8ea 50%, #72b5d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: letterFloat 3s ease-in-out infinite;
}

.letter-snow:nth-child(1) { animation-delay: 0s; }
.letter-snow:nth-child(2) { animation-delay: 0.1s; }
.letter-snow:nth-child(3) { animation-delay: 0.2s; }
.letter-snow:nth-child(4) { animation-delay: 0.3s; }
.letter-snow:nth-child(5) { animation-delay: 0.4s; }
.letter-snow:nth-child(6) { animation-delay: 0.5s; }
.letter-snow:nth-child(7) { animation-delay: 0.6s; }
.letter-snow:nth-child(8) { animation-delay: 0.7s; }
.letter-snow:nth-child(10) { animation-delay: 0.8s; }
.letter-snow:nth-child(11) { animation-delay: 0.9s; }
.letter-snow:nth-child(12) { animation-delay: 1s; }
.letter-snow:nth-child(13) { animation-delay: 1.1s; }
.letter-snow:nth-child(14) { animation-delay: 1.2s; }

.letter-space {
    width: 0.3em;
}

@keyframes letterFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.tagline-alpine {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffeaa7;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

.snowflake-icon {
    animation: snowflakeSpin 4s linear infinite;
}

@keyframes snowflakeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Info joueur alpine */
.player-info-alpine {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.player-card-alpine {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(200, 230, 255, 0.1) 100%
    );
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.player-avatar-alpine {
    position: relative;
    font-size: 1.8rem;
}

.avatar-emoji {
    display: block;
}

.avatar-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px solid rgba(34, 211, 238, 0.6);
    border-radius: 50%;
    animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

.player-details {
    display: flex;
    flex-direction: column;
}

.player-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.player-name-alpine {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

/* Badge cristaux */
.crystals-badge-alpine {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.2) 0%,
        rgba(139, 92, 246, 0.2) 100%
    );
    backdrop-filter: blur(15px);
    border: 2px solid rgba(34, 211, 238, 0.4);
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    overflow: hidden;
}


.crystal-glow {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: crystalGlow 2s ease-in-out infinite;
}

@keyframes crystalGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.crystal-icon {
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    animation: crystalBounce 1.5s ease-in-out infinite;
}

@keyframes crystalBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-5deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

.crystal-info {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.crystal-label {
    font-size: 0.7rem;
    color: rgba(34, 211, 238, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.crystal-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #22d3ee;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

/* === BOUTONS HEADER JOUEURS & AVIS === */
.header-btn-joueurs,
.header-btn-avis {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.header-btn-joueurs {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}

.header-btn-joueurs:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(22, 163, 74, 0.4));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.6);
}

.header-btn-avis {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.2));
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.4);
}

.header-btn-avis:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(124, 58, 237, 0.4));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
}

.joueurs-icon,
.avis-icon {
    font-size: 1.1rem;
}

.joueurs-text,
.avis-text {
    font-weight: 600;
}

/* Responsive boutons header */
@media (max-width: 768px) {
    .header-btn-joueurs,
    .header-btn-avis {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }

    .joueurs-text,
    .avis-text {
        display: none;
    }

    .joueurs-icon,
    .avis-icon {
        font-size: 1.2rem;
    }
}

/* === EN-TÊTE DE SECTION === */
.section-header-alpine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.decoration-left,
.decoration-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deco-snowflake {
    font-size: 1.2rem;
    animation: snowflakeSpin 6s linear infinite;
}

.deco-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    border-radius: 3px;
}

.section-title-alpine {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.title-icon {
    font-size: 1.3rem;
}

/* === ONGLETS DES JEUX === */
.games-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.games-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.games-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text);
}

.games-tab.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.games-tab .tab-icon {
    font-size: 1.2rem;
}

.games-tab .tab-text {
    font-weight: 700;
}

.games-tab .tab-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.games-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.3);
}

.games-tab .tab-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Contenu des onglets */
.games-tabs-content {
    position: relative;
}

.games-tab-panel {
    display: none;
    animation: fadeInTab 0.4s ease;
}

.games-tab-panel.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === SOUS-CATEGORIES AUTRES JEUX === */
.autres-jeux-categories {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    transform: translateY(-2px);
}

.category-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--primary-light);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.category-btn .cat-icon {
    font-size: 1.1rem;
}

.category-btn .cat-name {
    font-size: 0.85rem;
}

/* Contenu des catégories */
.category-content {
    display: none;
    animation: fadeInTab 0.3s ease;
}

.category-content.active {
    display: block;
}

/* Responsive sous-catégories */
@media (max-width: 600px) {
    .autres-jeux-categories {
        flex-wrap: wrap;
        border-radius: 15px;
        padding: 0.5rem;
    }

    .category-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .category-btn .cat-name {
        display: none;
    }

    .category-btn .cat-icon {
        font-size: 1.3rem;
    }
}

/* === JEUX A VENIR === */
.game-card-alpine.coming-soon {
    cursor: default;
    opacity: 0.85;
}

.game-card-alpine.coming-soon:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.coming-soon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.coming-soon-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    animation: float-badge 3s ease-in-out infinite;
}

@keyframes float-badge {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}

.card-ribbon.coming {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

/* Message informatif */
.coming-soon-info {
    text-align: center;
    padding: 2rem;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.coming-soon-info .info-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.coming-soon-info p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0.3rem 0;
}

.coming-soon-info .info-sub {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* === GRILLE DES JEUX ALPINE === */
.games-grid-alpine {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Carte de jeu alpine */
.game-card-alpine {
    position: relative;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(200, 230, 255, 0.08) 50%,
        rgba(139, 92, 246, 0.1) 100%
    );
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 280px;
}

/* Liens externes (jeux dans une autre page) */
a.game-card-alpine.game-link-external {
    display: block;
    text-decoration: none;
    color: inherit;
}

.game-card-alpine:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(34, 211, 238, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Neige sur la carte */
.card-snow-cap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    border-radius: 20px 20px 0 0;
}

.card-snow-cap::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 15px;
    background:
        radial-gradient(ellipse 20px 10px at 20% 0%, rgba(255,255,255,0.8) 0%, transparent 70%),
        radial-gradient(ellipse 30px 12px at 50% 0%, rgba(255,255,255,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 25px 10px at 80% 0%, rgba(255,255,255,0.75) 0%, transparent 70%);
}

/* Lueur de la carte */
.card-glow-alpine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(34, 211, 238, 0.15) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s;
}

.game-card-alpine:hover .card-glow-alpine {
    opacity: 1;
}

/* Contenu de la carte */
.card-content-alpine {
    position: relative;
    z-index: 2;
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.card-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.icon-bg-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.2) 0%,
        rgba(139, 92, 246, 0.2) 100%
    );
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.card-icon-alpine {
    position: relative;
    z-index: 1;
    font-size: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s;
    line-height: 1;
}

.game-card-alpine:hover .card-icon-alpine {
    transform: scale(1.15) rotate(-5deg);
}

.card-title-alpine {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.card-desc-alpine {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.card-stats-alpine {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.stat-icon-alpine {
    font-size: 1rem;
}

/* Ruban de la carte */
.card-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: linear-gradient(135deg, #3d5a80 0%, #293d52 100%);
    color: #ffffff;
    padding: 0.4rem 3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.card-ribbon.new {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.card-ribbon.featured {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.card-ribbon.multi {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Style pour les cartes multi */
.game-card-multi .card-glow-alpine {
    background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.15), transparent 60%);
}

.game-card-multi:hover .card-glow-alpine {
    background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.25), transparent 60%);
}

/* Carte de jeu large (Quiz) */
.game-card-alpine.game-card-large {
    grid-column: span 2;
    min-height: 320px;
}

.game-card-large .card-icon-alpine {
    font-size: 4.5rem;
}

.game-card-large .icon-bg-circle {
    width: 100px;
    height: 100px;
}

.game-card-large .icon-bg-circle.large {
    width: 110px;
    height: 110px;
}

.game-card-large .card-title-alpine {
    font-size: 1.6rem;
}

.game-card-large .card-desc-alpine {
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto 1rem;
}

.game-card-large .card-stats-alpine {
    gap: 2rem;
}

@media (max-width: 768px) {
    .game-card-alpine.game-card-large {
        grid-column: span 1;
        min-height: 280px;
    }
}

/* Bordure givrée */
.card-frost-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 30%,
        transparent 70%,
        rgba(255, 255, 255, 0.05) 100%
    );
}

/* === FOOTER DU MENU === */
.menu-footer-alpine {
    margin-top: auto;
    padding-top: 1rem;
}

.wooden-sign-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Bouton en bois */
.wooden-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(180deg,
        #8B6914 0%,
        #6B4F12 30%,
        #5A4210 70%,
        #4A3608 100%
    );
    border: 3px solid #3d2a06;
    border-radius: 12px;
    padding: 0.9rem 1.5rem;
    color: #ffeaa7;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 6px 0 #3d2a06,
        0 8px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.wooden-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 9px 0 #3d2a06,
        0 12px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

.wooden-btn:active {
    transform: translateY(3px);
    box-shadow:
        0 3px 0 #3d2a06,
        0 5px 10px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.btn-wood-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        rgba(0, 0, 0, 0.03) 2px,
        transparent 4px
    );
    pointer-events: none;
}

.btn-icon-alpine {
    font-size: 1.3rem;
    position: relative;
    z-index: 1;
}

.btn-text-alpine {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.btn-snow-top {
    position: absolute;
    top: -2px;
    left: 5%;
    width: 90%;
    height: 6px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 100%
    );
    border-radius: 3px 3px 0 0;
}

/* === MARMOTTES DÉCORATIVES === */
.decorative-marmottes {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 100;
}

.deco-marmotte {
    position: absolute;
    bottom: 0;
    font-size: 2.5rem;
    animation: marmottePeek 4s ease-in-out infinite;
}

.deco-marmotte.marmotte-left {
    left: 30px;
    animation-delay: 0s;
}

.deco-marmotte.marmotte-right {
    right: 30px;
    animation-delay: 2s;
}

@keyframes marmottePeek {
    0%, 100% {
        transform: translateY(60%);
    }
    20%, 80% {
        transform: translateY(0);
    }
}

.marmotte-speech {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 0.4rem 0.8rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    animation: speechBubble 4s ease-in-out infinite;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.marmotte-speech::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
}

.marmotte-left .marmotte-speech {
    animation-delay: 0s;
}

.marmotte-right .marmotte-speech {
    animation-delay: 2s;
}

@keyframes speechBubble {
    0%, 15%, 85%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    25%, 75% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* === Anciens styles conservés pour compatibilité === */
.menu-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 0.9rem 1.5rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-secondary:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary-light);
    transform: translateY(-3px);
}

/* === BOUTONS === */
.btn-back {
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    z-index: 1000;
    pointer-events: auto;
}

.btn-back:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary-light);
}

.btn-icon {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary-light);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.btn-play {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    margin-top: 1.5rem;
}

.btn-play:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-danger:hover { transform: scale(1.05); }

.btn-logout {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-logout:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
}

.setting-email {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem !important;
    margin-top: 0.5rem;
}

/* === DIFFICULTE === */
.difficulty-wrapper, .achievements-wrapper, .scores-wrapper, .settings-wrapper {
    width: 100%;
    max-width: 1100px;
    padding: 2rem;
    padding-top: 5rem;
    text-align: center;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.difficulty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.difficulty-card {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.difficulty-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3);
}

/* Carte Extrême - style spécial */
.difficulty-card.extreme {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2));
    border-color: #ef4444;
}

.difficulty-card.extreme:hover {
    border-color: #f97316;
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.4);
}

.difficulty-card.extreme .diff-label {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: white;
}

.diff-icon { font-size: 3rem; margin-bottom: 1rem; }

.difficulty-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.diff-info { margin-bottom: 1rem; }

.diff-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.9rem;
}

.diff-row:last-child { border-bottom: none; }
.diff-row span { color: var(--text-muted); }
.diff-row strong { color: var(--text); }

.diff-label {
    display: inline-block;
    background: var(--glass);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* === JEU HEADER === */
.game-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    max-width: 1600px;
    margin: 0 auto;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.game-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.game-logo { font-size: 2rem; }

.game-name {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.game-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
}

.stat.highlight {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

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

/* === JEU MEMORY - CARTES GRANDES === */
.memory-board {
    flex: 1;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    align-content: center;
    justify-content: center;
}

/* Grilles adaptatives - PLUS GRANDES */
.memory-board.grid-3 {
    grid-template-columns: repeat(3, minmax(140px, 200px));
}
.memory-board.grid-4 {
    grid-template-columns: repeat(4, minmax(120px, 180px));
}
.memory-board.grid-5 {
    grid-template-columns: repeat(5, minmax(100px, 160px));
}
.memory-board.grid-6 {
    grid-template-columns: repeat(6, minmax(90px, 140px));
}

.memory-card {
    aspect-ratio: 3/4;
    perspective: 1000px;
    cursor: pointer;
    max-height: 220px;
}

.memory-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.memory-card.flipped .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card-front, .memory-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--glass-border);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.memory-card-front {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.4);
}

.memory-card-back {
    background: white;
    transform: rotateY(180deg);
    padding: 0.5rem;
}

.memory-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-sm) - 6px);
}

.memory-card.matched .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card.matched .memory-card-back {
    border-color: var(--success);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
}

/* Animation de retournement stylée après erreur */
.memory-card.flip-back .memory-card-inner {
    animation: flipBackAnimation 0.8s ease-in-out forwards;
}

@keyframes flipBackAnimation {
    0% { transform: rotateY(180deg) scale(1); }
    20% { transform: rotateY(220deg) scale(1.08); }
    50% { transform: rotateY(90deg) scale(1.05); }
    100% { transform: rotateY(0deg) scale(1); }
}

.memory-card:hover:not(.flipped):not(.matched) {
    transform: translateY(-5px);
}

.progress-bar {
    height: 8px;
    background: var(--glass);
    border-radius: 50px;
    overflow: hidden;
    margin-top: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #34d399);
    width: 0%;
    transition: width 0.4s ease;
}

/* === JEUX ARENES - PLUS GRANDES === */
.clicker-arena, .runner-arena, .catch-arena {
    flex: 1;
    position: relative;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 500px;
}

.game-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(12, 10, 29, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.game-overlay.hidden { display: none; }

.overlay-content {
    text-align: center;
    padding: 2rem;
}

.overlay-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 1rem;
}

.overlay-content h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.overlay-content p {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* Ancien styles clicker supprimes - voir section titan pour les nouveaux styles */

.clicker-feedback-fail {
    color: #ef4444;
}

@keyframes feedbackFloat {
    0% { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateX(-50%) translateY(-10px) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-50px) scale(1); opacity: 0; }
}

/* Flash lumineux sur l'arène - Succès (multicolore/arc-en-ciel) */
.clicker-arena.arena-flash-success {
    animation: arenaFlashSuccess 0.4s ease-out;
}

@keyframes arenaFlashSuccess {
    0% {
        box-shadow: inset 0 0 100px rgba(16, 185, 129, 0.8),
                    0 0 50px rgba(16, 185, 129, 0.5);
    }
    25% {
        box-shadow: inset 0 0 100px rgba(139, 92, 246, 0.8),
                    0 0 50px rgba(139, 92, 246, 0.5);
    }
    50% {
        box-shadow: inset 0 0 80px rgba(6, 182, 212, 0.7),
                    0 0 40px rgba(6, 182, 212, 0.4);
    }
    75% {
        box-shadow: inset 0 0 60px rgba(234, 179, 8, 0.6),
                    0 0 30px rgba(234, 179, 8, 0.3);
    }
    100% {
        box-shadow: none;
    }
}

/* Flash lumineux sur l'arène - Échec (rouge) */
.clicker-arena.arena-flash-fail {
    animation: arenaFlashFail 0.4s ease-out;
}

@keyframes arenaFlashFail {
    0% {
        box-shadow: inset 0 0 100px rgba(239, 68, 68, 0.8),
                    0 0 50px rgba(239, 68, 68, 0.5);
        background-color: rgba(239, 68, 68, 0.15);
    }
    50% {
        box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.5),
                    0 0 30px rgba(239, 68, 68, 0.3);
        background-color: rgba(239, 68, 68, 0.08);
    }
    100% {
        box-shadow: none;
        background-color: transparent;
    }
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.mini-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background: var(--glass);
    border-radius: var(--radius);
    margin-top: 1rem;
}

.mini-stat { text-align: center; }

.mini-stat .label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.mini-stat .value {
    font-size: 1.5rem;
    font-weight: 800;
}

/* === RUNNER === */
.runner-arena {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}

.runner-sky {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 65%;
    background: linear-gradient(180deg, #0f0a1a 0%, #1e1b4b 100%);
}

.runner-ground {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, #581c87 0%, #3b0764 100%);
}

.runner-player {
    position: absolute;
    bottom: 80px;
    left: 100px;
    font-size: 3.5rem;
    z-index: 10;
    transition: bottom 0.1s;
}

.runner-player.jumping { animation: jump 0.5s ease; }

@keyframes jump {
    0%, 100% { bottom: 80px; }
    50% { bottom: 220px; }
}

.runner-obstacle {
    position: absolute;
    bottom: 80px;
    font-size: 2.5rem;
    animation: moveLeft 2.5s linear;
}

@keyframes moveLeft {
    0% { right: -50px; }
    100% { right: 110%; }
}

/* === QUIZ === */
.quiz-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem;
}

.quiz-card {
    width: 100%;
    max-width: 700px;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2rem;
}

.quiz-timer-bar {
    height: 6px;
    background: var(--glass);
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.quiz-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    width: 100%;
    transition: width 0.1s linear;
}

.quiz-number {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.quiz-question {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.quiz-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.quiz-answer {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.quiz-answer:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary);
}

.quiz-answer.correct {
    background: rgba(16, 185, 129, 0.3);
    border-color: var(--success);
}

.quiz-answer.wrong {
    background: rgba(239, 68, 68, 0.3);
    border-color: var(--danger);
}

.quiz-answer:disabled { cursor: not-allowed; }

/* === CATCH === */
.catch-arena {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    position: relative !important;
    overflow: visible !important;
    min-height: 300px;
}

/* Conteneur des items qui tombent */
.catch-items,
#catch-items {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none;
    z-index: 20 !important;
}

.catch-basket {
    position: absolute !important;
    bottom: 60px !important;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 100 !important;
}

/* Afficher le panier seulement quand le jeu est en cours */
.catch-arena.game-active .catch-basket {
    display: flex !important;
}

.catch-basket .basket {
    font-size: 3.5rem !important;
    line-height: 1;
}

.catch-basket .basket-marmotte {
    font-size: 1.8rem !important;
    margin-top: -0.8rem;
}

/* Zone tactile étendue pour mobile */
.catch-arena {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#screen-catch {
    touch-action: none;
}

.catch-basket .basket { font-size: 4rem; }
.catch-basket .basket-marmotte { font-size: 2rem; margin-top: -1.2rem; }

/* === NOUVEAUX ITEMS CATCH (version simplifiee) === */
.catch-item {
    position: absolute !important;
    font-size: 2.5rem !important;
    pointer-events: none;
    z-index: 50 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.catch-nut {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.catch-star {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9));
    animation: starPulse 0.6s ease-in-out infinite alternate;
}

.catch-skull {
    filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.8));
    animation: skullShake 0.4s ease-in-out infinite;
}

@keyframes starPulse {
    0% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)); }
    100% { transform: translateX(-50%) scale(1.15); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)); }
}

@keyframes skullShake {
    0%, 100% { transform: translateX(-50%) rotate(-8deg); }
    50% { transform: translateX(-50%) rotate(8deg); }
}

/* Popup de combo Catch */
.catch-combo-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 200;
    pointer-events: none;
    animation: comboPopup 0.8s ease-out forwards;
}

@keyframes comboPopup {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}

/* Ancien style falling-item pour retro-compatibilite */
.falling-item {
    position: absolute;
    font-size: 2.5rem;
    animation: fall linear forwards;
    pointer-events: none;
}

/* Items avec rebond - animés en JS, pas d'animation CSS */
.falling-item-bounce {
    animation: none !important;
    transition: none;
}

/* Étoiles qui rebondissent */
.bouncy-star {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    animation: starGlow 0.5s ease-in-out infinite alternate !important;
}

@keyframes starGlow {
    from { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)); transform: scale(1); }
    to { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)); transform: scale(1.1); }
}

/* Crânes qui rebondissent vite */
.bouncy-skull {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8));
    animation: skullPulse 0.3s ease-in-out infinite alternate !important;
}

@keyframes skullPulse {
    from { filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)); transform: scale(1) rotate(-5deg); }
    to { filter: drop-shadow(0 0 25px rgba(255, 0, 0, 1)); transform: scale(1.15) rotate(5deg); }
}

/* Effet de rebond sur les murs */
.bounce-effect {
    animation: bounceWall 0.2s ease-out !important;
}

@keyframes bounceWall {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Animation de chute classique (pour rétro-compatibilité) */
@keyframes fall {
    0% { top: -50px; opacity: 1; }
    95% { opacity: 1; }
    100% { top: calc(100% + 50px); opacity: 0; }
}

/* Item attrapé (noisette) */
.item-caught {
    animation: itemCaught 0.2s ease-out forwards !important;
}

@keyframes itemCaught {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(0); opacity: 0; }
}

/* Item mauvais attrapé (étoile/tête de mort) */
.item-bad-caught {
    animation: itemBadCaught 0.3s ease-out forwards !important;
}

@keyframes itemBadCaught {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.8) rotate(180deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* Item qui disparaît en bas */
.item-fade-out {
    animation: itemFadeOut 0.2s ease-out forwards !important;
}

@keyframes itemFadeOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* Effet flash rouge quand on perd une vie */
.catch-hit {
    animation: catchHit 0.4s ease-out;
}

@keyframes catchHit {
    0% {
        background-color: rgba(255, 0, 0, 0.5);
        box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.4);
    }
    50% {
        background-color: rgba(255, 0, 0, 0.3);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Style pour les vies */
#catch-lives {
    font-size: 1.2rem;
    letter-spacing: 2px;
    transition: transform 0.1s;
    display: flex;
    gap: 4px;
}

/* Cœur plein (vie restante) */
.heart-full {
    filter: none;
    opacity: 1;
}

/* Cœur vide (vie perdue) - grisé */
.heart-empty {
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.5;
}

/* Animation shake pour les vies */
.lives-shake {
    animation: livesShake 0.5s ease-out;
}

@keyframes livesShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Gros cœur brisé au centre */
.lost-heart-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    z-index: 100;
    pointer-events: none;
    animation: lostHeartAnim 0.8s ease-out forwards;
    text-shadow: 0 0 30px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.5);
}

@keyframes lostHeartAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* === QUIZ LIVES ANIMATION === */

/* Conteneur des vies Quiz */
#quiz-lives {
    display: flex;
    gap: 4px;
    font-size: 1.2rem;
}

.quiz-heart {
    transition: transform 0.3s, filter 0.3s, opacity 0.3s;
}

.quiz-heart.full {
    filter: none;
    opacity: 1;
}

.quiz-heart.empty {
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.5;
}

/* Flash rouge sur la carte Quiz */
.quiz-hit {
    animation: quizHit 0.4s ease-out;
}

@keyframes quizHit {
    0% {
        box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.5), 0 0 30px rgba(255, 0, 0, 0.3);
        border-color: rgba(255, 0, 0, 0.8) !important;
    }
    50% {
        box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.3);
    }
    100% {
        box-shadow: none;
        border-color: rgba(139, 92, 246, 0.3);
    }
}

/* Gros cœur brisé Quiz */
.quiz-lost-heart-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    z-index: 100;
    pointer-events: none;
    animation: quizLostHeartAnim 0.8s ease-out forwards;
    text-shadow: 0 0 30px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.5);
}

@keyframes quizLostHeartAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(-15deg);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5) translateY(-30px);
    }
}

/* === SUCCES === */
.achievements-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

.ach-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: 25px;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.ach-filter-btn:hover {
    border-color: var(--primary);
    background: rgba(139, 92, 246, 0.1);
}

.ach-filter-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.ach-filter-icon {
    font-size: 1.1rem;
}

.ach-filter-name {
    font-weight: 600;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    text-align: left;
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.achievements-grid::-webkit-scrollbar {
    width: 8px;
}

.achievements-grid::-webkit-scrollbar-track {
    background: var(--glass);
    border-radius: 4px;
}

.achievements-grid::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: var(--transition);
}

.achievement-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-light);
}

.achievement-card.unlocked {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.achievement-card.locked { opacity: 0.5; }

.achievement-icon { font-size: 2.5rem; }

.achievement-info h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.achievement-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* === SCORES PRO === */

/* Wrapper */
.scores-pro-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

/* Header */
.scores-pro-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.scores-pro-title-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.scores-pro-icon {
    position: relative;
}

.scores-trophy {
    font-size: 3rem;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5));
}

.scores-trophy-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.scores-pro-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.scores-pro-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
}

/* Onglets categories */
.scores-pro-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.scores-pro-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.scores-pro-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    transform: translateY(-2px);
}

.scores-pro-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-light);
    color: white;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.scores-tab-icon {
    font-size: 1.2rem;
}

.scores-tab-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.scores-pro-tab.active .scores-tab-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* Chips de jeux */
.scores-pro-games {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
}

.scores-pro-games.hidden {
    display: none;
}

.scores-game-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.scores-game-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.scores-game-chip.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}

/* Contenu des scores */
.scores-pro-content {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    padding: 1rem;
}

/* Responsive */
@media (max-width: 600px) {
    .scores-pro-wrapper {
        padding: 0.5rem;
    }

    .scores-pro-title-section {
        flex-direction: column;
        gap: 0.5rem;
    }

    .scores-trophy {
        font-size: 2.5rem;
    }

    .scores-pro-title {
        font-size: 1.4rem;
    }

    .scores-pro-tabs {
        gap: 0.5rem;
    }

    .scores-pro-tab {
        padding: 0.6rem 1rem;
    }

    .scores-tab-text {
        display: none;
    }

    .scores-game-chip .chip-name {
        display: none;
    }

    .scores-game-chip {
        padding: 0.5rem 0.7rem;
    }
}

/* Anciens styles pour compatibilite */
.scores-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    font-size: 0.95rem;
}

.tab:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary-light);
}

.tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-color: transparent;
}

.scores-list {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-height: 450px;
    overflow-y: auto;
}

.scores-list::-webkit-scrollbar { width: 8px; }
.scores-list::-webkit-scrollbar-track { background: var(--glass); border-radius: 4px; }
.scores-list::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

.score-row {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.2s;
}

.score-row:hover { background: rgba(139, 92, 246, 0.1); }
.score-row:last-child { border-bottom: none; }

.score-rank {
    width: 50px;
    font-size: 1.5rem;
    font-weight: 900;
}

.score-rank.gold { color: #22c55e; }
.score-rank.silver { color: #94a3b8; }
.score-rank.bronze { color: #f97316; }

.score-info { flex: 1; }

.score-name { font-weight: 700; font-size: 1.1rem; }
.score-date { font-size: 0.8rem; color: var(--text-muted); }
.score-value { font-size: 1.3rem; font-weight: 800; color: var(--success); }

.scores-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem;
    font-size: 1rem;
}

.scores-empty-msg {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
    font-size: 0.95rem;
    font-style: italic;
}

/* === OPTIONS === */
.settings-list {
    max-width: 550px;
    margin: 0 auto 2rem;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.5rem;
    margin-bottom: 1rem;
}

.setting-item.danger { border-color: rgba(239, 68, 68, 0.3); }

.setting-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.setting-icon { font-size: 1.5rem; }
.setting-name { font-weight: 600; font-size: 1rem; }

.setting-item input[type="text"] {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    width: 150px;
}

.setting-item input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

.toggle {
    position: relative;
    width: 52px;
    height: 28px;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--glass);
    border-radius: 28px;
    transition: var(--transition);
    border: 1px solid var(--glass-border);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
}

.toggle input:checked + .toggle-slider {
    background: var(--primary);
    border-color: var(--primary);
}
.toggle input:checked + .toggle-slider::before { transform: translateX(24px); }

/* === MODALS === */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.active { opacity: 1; visibility: visible; }

.modal-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(12, 10, 29, 0.85);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: var(--bg-medium);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    max-width: 450px;
    width: 90%;
    text-align: center;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: bounce 1s ease infinite;
}

.modal-title {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.modal-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.modal-stats {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.modal-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--glass);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.modal-stat-icon {
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    background: var(--glass);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-stat-info { text-align: left; }
.modal-stat-label { font-size: 0.8rem; color: var(--text-muted); }
.modal-stat-value { font-size: 1.3rem; font-weight: 800; }

.modal-coins {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #22d3ee;
    animation: glow 2s ease infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.3); }
    50% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.5); }
}

.coins-icon { font-size: 1.5rem; }

.modal-actions {
    display: flex;
    gap: 1rem;
}

.modal-actions button { flex: 1; }

/* === TOAST === */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 1rem;
    background: var(--bg-medium);
    border: 2px solid var(--success);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    z-index: 20000;
    max-width: 350px;
}

.toast.show {
    display: flex;
}

.toast-icon { font-size: 2rem; }
.toast-title { display: block; font-size: 0.8rem; color: var(--success); font-weight: 600; }
.toast-message { font-weight: 700; font-size: 1rem; }

/* =====================================================
   BOUTIQUE - SHOP
   ===================================================== */
.shop-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    padding-top: 5rem;
    margin: 0 auto;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.shop-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.shop-icon {
    font-size: 3rem;
    animation: shopBounce 2s ease-in-out infinite;
}

@keyframes shopBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(-5deg); }
    75% { transform: translateY(-5px) rotate(5deg); }
}

.shop-header h2 {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shop-balance {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(139, 92, 246, 0.2));
    border: 2px solid rgba(34, 211, 238, 0.4);
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
}

.balance-icon {
    font-size: 1.8rem;
    animation: crystalSpin 3s ease-in-out infinite;
}

@keyframes crystalSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.1); }
}

.balance-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #22d3ee;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.balance-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Categories boutique */
.shop-categories {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Solde mobile caché sur desktop */
.shop-balance-mobile {
    display: none;
}

.shop-cat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-cat:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.shop-cat.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
}

.shop-cat span {
    font-size: 1.2rem;
}

/* Grille boutique */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.shop-item {
    position: relative;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-item:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3);
}

.shop-item.owned {
    border-color: var(--success);
}

.shop-item.equipped {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.shop-item-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.8rem;
}

.shop-item-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.shop-item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #22d3ee;
}

.shop-item-price.owned {
    color: var(--success);
}

.shop-item-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
}

.shop-item-badge.equipped {
    background: linear-gradient(135deg, #fbbf24, #d97706);
}

/* Équipement actuel */
.shop-equipped {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.shop-equipped h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--text-muted);
}

.equipped-items {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

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

.equipped-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equipped-value {
    font-size: 2rem;
    font-weight: 700;
}

/* =====================================================
   CENTRE DES SCORES MEGA
   ===================================================== */
.scores-mega-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 1.5rem;
    padding-top: 5rem;
    margin: 0 auto;
}

.scores-mega-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    padding: 2rem;
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.8), rgba(20, 15, 40, 0.9));
    border-radius: 24px;
    border: 2px solid rgba(251, 191, 36, 0.3);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.scores-mega-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(251, 191, 36, 0.1), transparent, rgba(251, 191, 36, 0.1), transparent);
    animation: scoreHeaderRotate 10s linear infinite;
    pointer-events: none;
}

@keyframes scoreHeaderRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scores-mega-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 1;
    animation: trophyShine 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.6));
}

@keyframes trophyShine {
    0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 30px rgba(251, 191, 36, 0.6)); }
    50% { transform: scale(1.15) rotate(8deg); filter: brightness(1.3) drop-shadow(0 0 50px rgba(251, 191, 36, 0.9)); }
}

.scores-mega-header h2 {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #22c55e, #16a34a, #22c55e, #8b5cf6);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    animation: scoreGradientMove 4s ease-in-out infinite;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.3);
}

@keyframes scoreGradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.scores-mega-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    letter-spacing: 0.5px;
}

/* Bouton Actualiser les scores */
.btn-refresh-scores {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(16, 185, 129, 0.3));
    border: 2px solid rgba(52, 211, 153, 0.5);
    border-radius: 12px;
    color: #34d399;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
}

.btn-refresh-scores:hover {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.3), rgba(16, 185, 129, 0.4));
    border-color: rgba(52, 211, 153, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(52, 211, 153, 0.3);
}

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

.btn-refresh-scores .refresh-icon {
    font-size: 1.2rem;
    transition: transform 0.5s ease;
}

.btn-refresh-scores:hover .refresh-icon {
    transform: rotate(180deg);
}

.btn-refresh-scores.loading .refresh-icon {
    animation: spinRefresh 1s linear infinite;
}

@keyframes spinRefresh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Notice Mode Visiteur */
.visitor-scores-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    margin-bottom: 1rem;
    animation: noticeGlow 3s ease-in-out infinite;
}

.visitor-scores-notice .notice-icon {
    font-size: 1.5rem;
}

.visitor-scores-notice .notice-text {
    color: #fbbf24;
    font-size: 0.9rem;
    font-weight: 500;
}

@keyframes noticeGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
}

/* Chaos Scores Badge */
.chaos-scores-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.3));
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.chaos-badge-icon {
    font-size: 4rem;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
    animation: chaosBadgePulse 2s ease-in-out infinite;
}

@keyframes chaosBadgePulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.chaos-badge-title {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chaos-badge-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.chaos-global-stats {
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.chaos-scores-note {
    text-align: center;
    padding: 1.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    margin-top: 1.5rem;
}

.chaos-scores-note p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Secret Tab Style */
.game-tab.secret-tab {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.3));
    border-color: rgba(139, 92, 246, 0.5);
}

.game-tab.secret-tab:hover,
.game-tab.secret-tab.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.5));
    border-color: rgba(139, 92, 246, 0.8);
}

/* Onglets categories Scores */
.scores-category-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.scores-category-tabs .category-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(30, 20, 50, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    color: #e2e8f0 !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.scores-category-tabs .category-tab:hover {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.25) !important;
}

.scores-category-tabs .category-tab.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
}

.scores-category-tabs .category-tab span {
    font-size: 1.2rem;
}

/* Sélecteur de jeu */
.scores-game-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.scores-game-selector.hidden {
    display: none !important;
}

.game-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(145deg, rgba(30, 25, 50, 0.9), rgba(20, 15, 40, 0.95));
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 100px;
    position: relative;
    overflow: hidden;
}

.game-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.game-tab:hover::before {
    left: 100%;
}

.game-tab:hover {
    border-color: var(--primary);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.25);
}

.game-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary), #4f46e5);
    background-size: 200% 200%;
    border-color: transparent;
    box-shadow:
        0 10px 35px rgba(139, 92, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: activeTabPulse 3s ease-in-out infinite;
}

@keyframes activeTabPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.tab-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.game-tab:hover .tab-icon {
    transform: scale(1.15);
}

.game-tab.active .tab-icon {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

.tab-name {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Onglets difficulté */
.scores-difficulty-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.diff-tab {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.diff-tab:hover {
    border-color: var(--primary);
}

.diff-tab.active {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    border-color: transparent;
}

/* Stats globales */
.game-global-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.global-stat {
    background: linear-gradient(145deg, rgba(30, 25, 50, 0.9), rgba(20, 15, 40, 0.95));
    border: 2px solid rgba(34, 211, 238, 0.2);
    border-radius: 20px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.global-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6, #22d3ee);
    background-size: 200% 100%;
    animation: statBorderGlow 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.global-stat:hover::before {
    opacity: 1;
}

@keyframes statBorderGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.global-stat:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow:
        0 15px 40px rgba(34, 211, 238, 0.25),
        0 0 0 1px rgba(34, 211, 238, 0.1);
}

.gs-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.global-stat:hover .gs-icon {
    transform: scale(1.2) rotate(5deg);
}

.gs-value {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

.gs-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Podium */
.scores-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, rgba(30, 25, 50, 0.5), transparent);
    border-radius: 24px;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.podium-place:hover {
    transform: translateY(-5px);
}

.podium-crown {
    font-size: 2.5rem;
    animation: crownBounce 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

.podium-avatar {
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, rgba(40, 35, 60, 0.9), rgba(25, 20, 45, 0.95));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

.first .podium-avatar {
    width: 100px;
    height: 100px;
    font-size: 3.5rem;
    border: 4px solid #22c55e;
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.5),
        0 0 80px rgba(34, 197, 94, 0.2),
        inset 0 0 20px rgba(34, 197, 94, 0.1);
    animation: firstPlaceGlow 2s ease-in-out infinite;
}

@keyframes firstPlaceGlow {
    0%, 100% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.5), 0 0 80px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 60px rgba(34, 197, 94, 0.7), 0 0 100px rgba(34, 197, 94, 0.3); }
}

.second .podium-avatar {
    border: 3px solid #c0c0c0;
    box-shadow: 0 0 25px rgba(192, 192, 192, 0.4);
}

.third .podium-avatar {
    border: 3px solid #cd7c32;
    box-shadow: 0 0 25px rgba(205, 124, 50, 0.4);
}

.podium-name {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.first .podium-name {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.podium-score {
    font-size: 1.3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem;
}

.podium-stand {
    width: 90px;
    background: linear-gradient(135deg, var(--glass), rgba(255,255,255,0.1));
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-muted);
    position: relative;
    overflow: hidden;
}

.podium-stand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

.first .podium-stand {
    height: 110px;
    width: 100px;
    background: linear-gradient(145deg, #22c55e, #16a34a, #15803d);
    color: white;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.second .podium-stand {
    height: 80px;
    background: linear-gradient(145deg, #e2e8f0, #94a3b8, #64748b);
    color: white;
    box-shadow: 0 8px 25px rgba(148, 163, 184, 0.4);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.third .podium-stand {
    height: 55px;
    background: linear-gradient(145deg, #d97706, #cd7c32, #a05a20);
    color: white;
    box-shadow: 0 6px 20px rgba(205, 124, 50, 0.4);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Liste complète des scores */
.scores-full-list {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.list-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(139, 92, 246, 0.1);
    border-bottom: 2px solid var(--glass-border);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.list-body {
    max-height: 300px;
    overflow-y: auto;
}

.score-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px;
    gap: 1rem;
    padding: 1rem 1.5rem;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.2s ease;
}

.score-row:hover {
    background: rgba(139, 92, 246, 0.05);
}

.score-row:last-child {
    border-bottom: none;
}

.score-rank {
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
}

.score-rank.gold { color: #22c55e; }
.score-rank.silver { color: #94a3b8; }
.score-rank.bronze { color: #f97316; }

.score-player {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.score-avatar {
    font-size: 1.5rem;
}

.score-name {
    font-weight: 700;
}

.score-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #22d3ee;
    text-align: right;
}

.score-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: right;
}

/* Scores content visibility */
.scores-content.hidden {
    display: none;
}

/* Badge Mode Infini pour Quiz et Simon */
.infinite-mode-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 1rem auto;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    text-align: center;
    animation: infinitePulse 2s ease-in-out infinite;
}

@keyframes infinitePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(139, 92, 246, 0.7);
    }
}

/* Animation points flottants Marmotte Clicker */
@keyframes clickerPointsFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -60px) scale(1.3);
    }
}

.clicker-points-popup {
    pointer-events: none;
    z-index: 9999;
    font-weight: 800;
    font-size: 1.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.clicker-points-popup.success {
    color: #22c55e;
}

.clicker-points-popup.miss {
    color: #ef4444;
}

/* Liste simple pour autres jeux */
.scores-simple-list {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
    max-height: 250px;
    overflow-y: auto;
}

.simple-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.simple-score-row:last-child {
    border-bottom: none;
}

.simple-rank {
    font-size: 1.2rem;
    font-weight: 800;
    width: 40px;
}

.simple-info {
    flex: 1;
    margin-left: 1rem;
}

.simple-name {
    font-weight: 700;
}

.simple-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.simple-score {
    font-size: 1.2rem;
    font-weight: 800;
    color: #22d3ee;
}

.scores-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.scores-empty-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* =====================================================
   NOUVEAUX JEUX - PUZZLE, SIMON, SLALOM, FLOCON
   ===================================================== */

/* === PUZZLE ALPIN === */
.puzzle-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.puzzle-select {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.puzzle-size-btn {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.6rem 1.2rem;
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.puzzle-size-btn:hover,
.puzzle-size-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

.puzzle-board {
    display: grid;
    gap: 4px;
    background: var(--glass);
    border: 3px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 8px;
    max-width: 400px;
    max-height: 400px;
    aspect-ratio: 1;
}

.puzzle-piece {
    background: linear-gradient(135deg, #3d5a80, #293d52);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.puzzle-piece:hover:not(.empty) {
    transform: scale(1.05);
    border-color: var(--primary);
}

.puzzle-piece.empty {
    background: transparent;
    border: 2px dashed rgba(255,255,255,0.2);
    cursor: default;
}

.puzzle-piece.correct {
    background: linear-gradient(135deg, var(--success), #059669);
}

/* === SIMON MARMOTTE === */
.simon-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Wrapper pour centrer tout le jeu Simon */
.simon-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.simon-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    position: relative;
    justify-content: center;
    justify-items: center;
    max-width: 420px;
    margin: 0 auto;
}

/* Mode 9 boutons (3x3) - Mode infini */
.simon-board.mode-9 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    max-width: 400px;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.simon-board.mode-9 .simon-btn {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    font-size: 2.5rem;
    border-width: 4px;
    border-radius: 16px;
}

.simon-btn {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.simon-btn[data-color="green"] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.simon-btn[data-color="red"] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.simon-btn[data-color="yellow"] {
    background: linear-gradient(135deg, #eab308, #ca8a04);
}

.simon-btn[data-color="blue"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.simon-btn[data-color="purple"] {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.simon-btn[data-color="orange"] {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.simon-btn[data-color="pink"] {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.simon-btn[data-color="cyan"] {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.simon-btn[data-color="lime"] {
    background: linear-gradient(135deg, #84cc16, #65a30d);
}

.simon-btn:hover {
    transform: scale(1.05);
}

.simon-btn.active {
    transform: scale(1.1);
    filter: brightness(2) saturate(1.5);
    box-shadow:
        0 0 30px currentColor,
        0 0 60px currentColor,
        0 0 100px currentColor,
        inset 0 0 30px rgba(255,255,255,0.7);
    border-color: #fff;
    border-width: 6px;
}

/* Voyant lumineux intégré au bouton Simon */
.simon-btn::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.15s ease;
}

.simon-btn.active::before {
    background: #fff;
    box-shadow: 0 0 15px #fff, 0 0 30px #fff, 0 0 45px currentColor;
    border-color: #fff;
}

.simon-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Zone marmotte centrée sous la progression */
.simon-mascot-zone {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.simon-mascot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem 3rem;
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.95), rgba(49, 46, 129, 0.9));
    border: 3px solid var(--accent);
    border-radius: 25px;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.4), inset 0 0 20px rgba(139, 92, 246, 0.1);
}

.simon-marmotte {
    font-size: 5rem;
    animation: marmotteBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.5));
}

@keyframes marmotteBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

.simon-marmotte.thinking {
    animation: marmotteThink 0.3s ease-in-out infinite;
}

@keyframes marmotteThink {
    0%, 100% { transform: rotate(-8deg) scale(1.1); }
    50% { transform: rotate(8deg) scale(1.1); }
}

.simon-status {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Ancien simon-center au cas où */
.simon-center {
    display: none;
}

/* === SKI SLALOM === */
.slalom-arena {
    flex: 1;
    position: relative;
    background: linear-gradient(180deg, #87CEEB 0%, #E0F4FF 30%, #FFFFFF 100%);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 450px;
}

.slalom-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slalom-gates-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slalom-gate {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100px;
    animation: gateDown 2s linear forwards;
}

@keyframes gateDown {
    from { top: -50px; }
    to { top: 100%; }
}

.slalom-pole {
    width: 8px;
    height: 60px;
    border-radius: 4px;
}

.slalom-pole.left {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

.slalom-pole.right {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.slalom-skier {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    transition: left 0.1s ease;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
    z-index: 10;
}

.slalom-gate.passed .slalom-pole {
    opacity: 0.3;
}

.slalom-gate.missed .slalom-pole {
    background: #666 !important;
}

/* === RESPONSIVE MEMORY BOARD === */
@media (max-width: 1024px) {
    .memory-board.grid-3 { grid-template-columns: repeat(3, minmax(120px, 170px)); }
    .memory-board.grid-4 { grid-template-columns: repeat(4, minmax(100px, 150px)); }
    .memory-board.grid-5 { grid-template-columns: repeat(5, minmax(85px, 130px)); }
    .memory-board.grid-6 { grid-template-columns: repeat(6, minmax(75px, 115px)); }
}

@media (max-width: 768px) {
    .memory-board.grid-3 { grid-template-columns: repeat(3, minmax(90px, 130px)); }
    .memory-board.grid-4 { grid-template-columns: repeat(4, minmax(75px, 110px)); }
    .memory-board.grid-5 { grid-template-columns: repeat(5, minmax(60px, 90px)); }
    .memory-board.grid-6 { grid-template-columns: repeat(6, minmax(55px, 80px)); }
    .memory-card { max-height: 160px; }
    .quiz-answers { grid-template-columns: 1fr; }
}


/* =====================================================
   STYLES TITANESQUES POUR LES JEUX
   ===================================================== */

/* === TITAN GAME WRAPPER === */
.titan-game {
    background: linear-gradient(180deg, #0c0a1d 0%, #1a1040 30%, #0f1729 70%, #1a0a2e 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.titan-game::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* === TITAN HEADER === */
.titan-header {
    background: rgba(12, 10, 29, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-titan {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(139, 92, 246, 0.5);
    color: white;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-titan:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(139, 92, 246, 0.3));
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}

.titan-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.titan-logo {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.8));
    animation: titanPulse 2s ease-in-out infinite;
}

.titan-name {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6, #6d28d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}

@keyframes titanPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(139, 92, 246, 1)); }
}

/* === TITAN STATS === */
.titan-stats {
    display: flex;
    gap: 1.5rem;
}

.titan-stat {
    background: rgba(30, 27, 75, 0.6);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 15px;
    padding: 0.8rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    transition: all 0.3s ease;
}

.titan-stat.highlight {
    border-color: rgba(6, 182, 212, 0.5);
    background: rgba(6, 182, 212, 0.1);
}

.titan-stat.glow {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.titan-value {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === TITAN CONTAINER === */
.titan-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

/* === TITAN OVERLAY === */
.titan-overlay {
    background: radial-gradient(ellipse at center, rgba(12, 10, 29, 0.95) 0%, rgba(12, 10, 29, 0.98) 100%);
}

.titan-content {
    position: relative;
    max-width: 500px;
}

.overlay-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.titan-icon {
    font-size: 6rem;
    margin-bottom: 1.5rem;
    display: block;
}

.titan-icon.pulse {
    animation: titanIconPulse 2s ease-in-out infinite;
}

@keyframes titanIconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.titan-title {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    text-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
}

.titan-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.titan-rules {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.titan-rules .rule {
    background: rgba(30, 27, 75, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.titan-rules .rule span {
    font-size: 1.2rem;
}

.titan-hint {
    color: rgba(251, 191, 36, 0.8);
    font-style: italic;
    margin-bottom: 2rem;
}

.titan-play {
    position: relative;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: none;
    color: white;
    padding: 1.2rem 3rem;
    font-size: 1.3rem;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.titan-play::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: titanShine 2s infinite;
}

@keyframes titanShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.titan-play:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.5);
}

/* === TITAN SIMON BOARD === */
.titan-board {
    width: 100%;
    max-width: 420px;
    position: relative;
}

.titan-btn {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    border: 4px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.titan-btn .btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
}

.titan-btn .btn-inner span:first-child {
    font-size: 3rem;
}

.titan-btn .btn-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.titan-btn .btn-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.titan-btn.active .btn-glow-effect,
.titan-btn:active .btn-glow-effect {
    width: 200%;
    height: 200%;
    opacity: 0;
}

.titan-btn[data-color="green"] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.titan-btn[data-color="red"] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

.titan-btn[data-color="yellow"] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
}

.titan-btn[data-color="blue"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.titan-btn.active,
.titan-btn:active {
    transform: scale(0.95);
    filter: brightness(1.5);
    box-shadow: 0 0 50px currentColor;
}

/* === TITAN CENTER === */
.titan-center {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border: 4px solid rgba(139, 92, 246, 0.5);
    position: relative;
}

.center-ring {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 3px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.titan-marmotte {
    font-size: 4rem;
    animation: marmotteBounce 1s ease-in-out infinite;
}

@keyframes marmotteBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.titan-status {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* === SIMON PROGRESS === */
.simon-progress {
    width: 100%;
    max-width: 300px;
    margin-top: 1.5rem;
}

.progress-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-align: center;
}

.progress-bar {
    height: 10px;
    background: rgba(30, 27, 75, 0.6);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* === TITAN FOOTER === */
.titan-footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem;
    background: rgba(12, 10, 29, 0.8);
    border-top: 2px solid rgba(139, 92, 246, 0.2);
}

.titan-stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.mini-icon {
    font-size: 1.5rem;
}

.mini-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mini-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
}

/* === TITAN DIFFICULTY SECTION === */
.titan-difficulty-section {
    margin: 2rem 0;
    width: 100%;
}

.difficulty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    text-align: center;
}

.titan-difficulties {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    max-width: 500px;
    margin: 0 auto;
}

.titan-diff-btn {
    background: rgba(30, 27, 75, 0.6);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 15px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--text);
}

.titan-diff-btn:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
    transform: translateY(-3px);
}

.titan-diff-btn.selected {
    border-color: rgba(139, 92, 246, 0.8);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.diff-icon {
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.diff-name {
    font-size: 1rem;
    font-weight: 800;
    color: white;
}

.diff-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* === TITAN GAME MODES === */
.titan-game-modes {
    margin: 1.5rem 0;
    width: 100%;
}

.titan-modes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.titan-mode-btn {
    background: rgba(30, 27, 75, 0.6);
    border: 2px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
}

.titan-mode-btn:hover {
    border-color: rgba(6, 182, 212, 0.5);
    background: rgba(6, 182, 212, 0.1);
}

.titan-mode-btn.selected {
    border-color: rgba(6, 182, 212, 0.8);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.1));
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

.mode-icon {
    font-size: 1.3rem;
}

.mode-name {
    font-size: 0.9rem;
    font-weight: 700;
}

/* === TITAN CATEGORIES === */
.titan-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.cat-tag {
    background: rgba(30, 27, 75, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* === TITAN INFINITE BADGE === */
.titan-infinite-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 20px;
    padding: 0.8rem 1.5rem;
    margin: 1rem 0;
}

.titan-infinite-badge .infinite-icon {
    font-size: 1.5rem;
    animation: infinitePulse 2s ease-in-out infinite;
}

.titan-infinite-badge .infinite-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes infinitePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.titan-info-text {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: #fbbf24;
    font-style: italic;
    text-align: center;
}

/* === TITAN POWERUPS === */
.titan-powerups {
    margin: 1.5rem 0;
    width: 100%;
}

.powerup-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.powerup-item {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(34, 197, 94, 0.9);
}

.powerup-item.bad {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.9);
}

/* === TITAN FLOCON TYPES === */
.titan-flocon-types {
    margin: 1.5rem 0;
}

.flocon-type-list {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.flocon-type {
    font-size: 2rem;
    background: rgba(30, 27, 75, 0.6);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.flocon-type:hover {
    transform: scale(1.2);
    border-color: rgba(139, 92, 246, 0.5);
}

/* === TITAN QUIZ CARD === */
.titan-quiz-card {
    background: rgba(30, 27, 75, 0.8);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 25px;
    padding: 2rem;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.titan-timer-bar {
    height: 8px;
    background: rgba(30, 27, 75, 0.6);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.titan-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #84cc16, #fbbf24, #ef4444);
    border-radius: 10px;
    transition: width 0.1s linear;
}

.quiz-category {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(139, 92, 246, 0.8);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.titan-quiz-number {
    text-align: center;
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.titan-quiz-question {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    color: white;
    line-height: 1.4;
}

.titan-quiz-answers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.titan-quiz-answers .quiz-answer {
    background: rgba(30, 27, 75, 0.6);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 15px;
    padding: 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.titan-quiz-answers .quiz-answer:hover {
    border-color: rgba(139, 92, 246, 0.7);
    background: rgba(139, 92, 246, 0.2);
    transform: translateY(-3px);
}

.titan-quiz-answers .quiz-answer.correct {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.titan-quiz-answers .quiz-answer.wrong {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.8);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* === TITAN ARENA === */
.titan-arena {
    flex: 1;
    position: relative;
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
}

/* ============================================
   MARMOTTE CLICKER - NOUVEAU DESIGN
   ============================================ */

.clicker-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    position: relative;
}

.clicker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.clicker-back-btn {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.clicker-back-btn:hover {
    background: rgba(139, 92, 246, 0.4);
}

.clicker-stats {
    display: flex;
    gap: 1.5rem;
}

.clicker-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.clicker-stat .stat-icon {
    font-size: 1.2rem;
}

.clicker-stat .stat-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
}

.clicker-stat.highlight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(245, 158, 11, 0.5);
}

/* Zone de jeu principale */
.clicker-game-zone {
    flex: 1;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    overflow: hidden;
    min-height: 400px;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Avertissement clicker */
.clicker-warning {
    color: #fbbf24 !important;
    font-size: 0.85rem !important;
    background: rgba(251, 191, 36, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

/* === NOUVELLE MARMOTTE CLICKER (version simplifiee) === */
.clicker-marmotte {
    position: absolute !important;
    font-size: 3rem !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
    z-index: 10;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

/* Ancien style marmotte-target pour retro-compatibilite */
.marmotte-target {
    position: absolute;
    width: 60px;
    height: 60px;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    animation: marmotteAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.1s ease;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
}

.marmotte-target:hover {
    transform: scale(1.15);
}

.marmotte-target:active {
    transform: scale(0.9);
}

.marmotte-target.hit {
    animation: marmotteHit 0.25s ease-out forwards;
    pointer-events: none;
}

.marmotte-target.missed {
    animation: marmotteMissed 0.3s ease-in forwards;
    pointer-events: none;
}

@keyframes marmotteAppear {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes marmotteHit {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(15deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(0) rotate(30deg);
        opacity: 0;
    }
}

@keyframes marmotteMissed {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.3) translateY(80px);
        opacity: 0;
    }
}

/* Points qui s'affichent */
.clicker-points {
    position: absolute;
    font-size: 1.6rem;
    font-weight: bold;
    pointer-events: none;
    animation: pointsUp 1s ease-out forwards;
    z-index: 200;
}

.clicker-points-success {
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.9), 0 0 40px rgba(16, 185, 129, 0.5);
}

.clicker-points-fail {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.9), 0 0 40px rgba(239, 68, 68, 0.5);
    font-size: 1.3rem;
}

/* Particules */
.clicker-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 150;
    animation: particleExplode 0.6s ease-out forwards;
}

@keyframes particleExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* Flash écran succès/échec */
.clicker-game-zone.flash-success {
    animation: screenFlashSuccess 0.3s ease-out;
}

.clicker-game-zone.flash-fail {
    animation: screenFlashFail 0.3s ease-out;
}

@keyframes screenFlashSuccess {
    0% {
        box-shadow: inset 0 0 100px rgba(16, 185, 129, 0.6);
    }
    100% {
        box-shadow: inset 0 0 0 transparent;
    }
}

@keyframes screenFlashFail {
    0% {
        box-shadow: inset 0 0 100px rgba(239, 68, 68, 0.5);
        background-color: rgba(239, 68, 68, 0.1);
    }
    100% {
        box-shadow: inset 0 0 0 transparent;
        background-color: transparent;
    }
}

@keyframes pointsUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1.2);
        opacity: 0;
    }
}

/* Bouton Retour dans les overlays */
.btn-back-overlay {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.btn-back-overlay:hover {
    background: rgba(139, 92, 246, 0.5);
    transform: scale(1.05);
}

/* Overlay de démarrage */
.clicker-start-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 30, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.clicker-start-content {
    text-align: center;
    padding: 2rem;
    max-width: 500px;
}

.clicker-start-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.clicker-start-content h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #a78bfa, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.clicker-start-content p {
    color: #a5b4fc;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.clicker-difficulty-picker h3 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.clicker-diff-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.clicker-diff-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.clicker-diff-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
}

.clicker-diff-btn.selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.3));
    border-color: #a78bfa;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.clicker-diff-btn span:first-child {
    font-size: 1.8rem;
}

.clicker-diff-btn span:last-child {
    font-size: 0.9rem;
    font-weight: 600;
}

.clicker-play-btn {
    padding: 1rem 3rem;
    font-size: 1.3rem;
    font-weight: bold;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 25px rgba(139, 92, 246, 0.5);
}

.clicker-play-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 35px rgba(139, 92, 246, 0.6);
}

/* Footer */
.clicker-footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #a5b4fc;
    font-size: 0.95rem;
}

.clicker-footer strong {
    color: #f59e0b;
}

/* Responsive */
@media (max-width: 600px) {
    .clicker-header {
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.8rem;
    }

    .clicker-stats {
        gap: 0.8rem;
    }

    .clicker-stat {
        padding: 0.4rem 0.8rem;
    }

    .clicker-diff-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .clicker-diff-btn {
        padding: 0.7rem;
    }

    .marmotte-target {
        width: 50px;
        height: 50px;
        font-size: 2.5rem;
    }
}

/* ============================================
   FLOCON MATCH - NOUVEAU DESIGN
   ============================================ */

.flocon-game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    position: relative;
}

.flocon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(99, 102, 241, 0.3);
}

.flocon-back-btn {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.flocon-back-btn:hover {
    background: rgba(99, 102, 241, 0.4);
}

.flocon-stats {
    display: flex;
    gap: 1.5rem;
}

.flocon-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

.flocon-stat.highlight {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.3));
    border: 1px solid rgba(168, 85, 247, 0.5);
}

/* Zone de jeu */
.flocon-game-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
}

/* Plateau de jeu */
.flocon-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    background: rgba(30, 27, 75, 0.8);
    border: 3px solid rgba(99, 102, 241, 0.4);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                inset 0 0 30px rgba(99, 102, 241, 0.1);
    max-width: 450px;
    width: 100%;
    aspect-ratio: 1;
}

/* Cellule de flocon */
.flocon-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.flocon-cell:hover {
    background: rgba(99, 102, 241, 0.3);
    transform: scale(1.05);
}

.flocon-cell.selected {
    background: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    transform: scale(1.1);
    animation: floconPulse 0.5s ease-in-out infinite;
}

.flocon-cell.swapping {
    animation: floconSwap 0.2s ease-in-out;
}

.flocon-cell.matched {
    animation: floconMatch 0.35s ease-out forwards;
    pointer-events: none;
}

.flocon-cell.no-match,
.flocon-cell.shake {
    animation: floconShake 0.3s ease-in-out;
}

.flocon-cell.swap-anim {
    animation: floconSwapAnim 0.15s ease-in-out;
}

.flocon-cell.fall-in {
    animation: floconFallIn 0.25s ease-out;
}

@keyframes floconShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes floconSwapAnim {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes floconFallIn {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes floconPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.8); }
}

@keyframes floconSwap {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes floconMatch {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.4) rotate(5deg);
    }
    100% {
        transform: scale(0) rotate(15deg);
        opacity: 0;
    }
}

@keyframes floconNoMatch {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Particules flocon */
.flocon-particle {
    position: absolute;
    font-size: 1rem;
    pointer-events: none;
    z-index: 100;
    animation: floconParticleExplode 0.6s ease-out forwards;
}

@keyframes floconParticleExplode {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(cos(var(--angle)) * var(--dist)),
            calc(sin(var(--angle)) * var(--dist))
        ) scale(0) rotate(180deg);
        opacity: 0;
    }
}

/* Particules sparkle */
.flocon-sparkle {
    position: absolute;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 100;
    animation: floconSparkle 0.5s ease-out forwards;
}

@keyframes floconSparkle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

/* Texte cascade */
.flocon-cascade-text,
.flocon-cascade {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.5);
    pointer-events: none;
    z-index: 200;
    animation: cascadeTextPop 0.8s ease-out forwards;
}

@keyframes cascadeTextPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translateY(-30px);
        opacity: 0;
    }
}

/* Overlay de démarrage */
.flocon-start-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.flocon-start-content {
    text-align: center;
    padding: 2rem;
    max-width: 500px;
}

.flocon-start-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: floconSpin 3s linear infinite;
}

@keyframes floconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.flocon-start-content h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #93c5fd, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.flocon-start-content p {
    color: #a5b4fc;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.flocon-difficulty-picker h3 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.flocon-diff-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.flocon-diff-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.flocon-diff-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

.flocon-diff-btn.selected {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.3));
    border-color: #a78bfa;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.flocon-diff-btn span:first-child {
    font-size: 1.8rem;
}

.flocon-diff-btn span:last-child {
    font-size: 0.9rem;
    font-weight: 600;
}

.flocon-preview {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.flocon-play-btn {
    padding: 1rem 3rem;
    font-size: 1.3rem;
    font-weight: bold;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 25px rgba(99, 102, 241, 0.5);
}

.flocon-play-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 35px rgba(99, 102, 241, 0.6);
}

/* Footer */
.flocon-footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #a5b4fc;
    font-size: 0.95rem;
}

.flocon-footer strong {
    color: #fbbf24;
}

/* Responsive */
@media (max-width: 600px) {
    .flocon-header {
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.8rem;
    }

    .flocon-stats {
        gap: 0.8rem;
    }

    .flocon-stat {
        padding: 0.4rem 0.8rem;
        font-size: 1rem;
    }

    .flocon-board {
        max-width: 350px;
        gap: 3px;
        padding: 8px;
    }

    .flocon-cell {
        font-size: 1.5rem;
        border-radius: 6px;
    }

    .flocon-diff-buttons {
        gap: 0.5rem;
    }

    .flocon-diff-btn {
        padding: 0.7rem;
    }

    .flocon-preview {
        font-size: 1.4rem;
    }
}

/* === TITAN BASKET === */
.titan-basket {
    transform: scale(1.2);
}

/* =====================================================
   PAC-MARMOTTE STYLES
   ===================================================== */

.pacman-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 650px;
    padding: 1rem;
}

.pacman-game-area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

#pacman-canvas {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a2a 100%);
    border: 4px solid #8b5cf6;
    border-radius: 16px;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    height: auto;
}

.pacman-legend {
    margin: 1.5rem 0;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.8rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    font-size: 0.9rem;
    color: #a5b4fc;
}

.legend-item span:first-child {
    font-size: 1.3rem;
}

/* Pacman pause/gameover overlay */
.pacman-pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 16px;
}

.pacman-pause-text {
    font-size: 2rem;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    margin-bottom: 1rem;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .pacman-container {
        min-height: 500px;
        padding: 0.5rem;
    }

    #pacman-canvas {
        border-width: 3px;
        border-radius: 12px;
    }

    .legend-items {
        gap: 0.5rem;
    }

    .legend-item {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* =====================================================
   PODIUM STYLES - TITANESQUE
   ===================================================== */

.scores-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, transparent 100%);
    border-radius: 20px;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.podium-place:hover {
    transform: translateY(-5px);
}

.podium-crown {
    font-size: 2rem;
    animation: crownBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.podium-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    border: 3px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.podium-place.first .podium-avatar {
    width: 90px;
    height: 90px;
    font-size: 2.5rem;
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.podium-place.second .podium-avatar {
    border-color: rgba(192, 192, 192, 0.8);
}

.podium-place.third .podium-avatar {
    border-color: rgba(205, 127, 50, 0.8);
}

.podium-name {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.3rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-score {
    font-size: 1.2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.podium-stand {
    width: 100%;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px 10px 0 0;
    margin-top: 0.5rem;
}

.podium-place.first .podium-stand {
    height: 120px;
    background: linear-gradient(180deg, #fbbf24, #b45309);
    box-shadow: 0 -5px 30px rgba(251, 191, 36, 0.3);
}

.podium-place.second .podium-stand {
    height: 90px;
    background: linear-gradient(180deg, #94a3b8, #475569);
}

.podium-place.third .podium-stand {
    height: 60px;
    background: linear-gradient(180deg, #cd7f32, #8b4513);
}

/* Liste des scores */
.scores-full-list {
    background: rgba(30, 27, 75, 0.5);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.list-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.2);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.list-body {
    max-height: 300px;
    overflow-y: auto;
}

.score-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    transition: all 0.2s ease;
    align-items: center;
}

.score-row:hover {
    background: rgba(139, 92, 246, 0.1);
}

.score-row.highlight {
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid #fbbf24;
}

.score-row.top-1 { background: rgba(251, 191, 36, 0.15); }
.score-row.top-2 { background: rgba(192, 192, 192, 0.1); }
.score-row.top-3 { background: rgba(205, 127, 50, 0.1); }

.score-rank {
    font-weight: 800;
    font-size: 1.1rem;
}

.score-rank.gold { color: #fbbf24; }
.score-rank.silver { color: #94a3b8; }
.score-rank.bronze { color: #cd7f32; }

.score-player {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.player-avatar-small {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.player-name {
    font-weight: 600;
    color: white;
}

.player-name.is-you {
    color: #fbbf24;
}

.player-name.is-you::after {
    content: ' (Toi)';
    font-size: 0.8rem;
    color: rgba(251, 191, 36, 0.7);
}

.score-value {
    font-weight: 700;
    color: #a78bfa;
}

.score-date {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Thèmes styles - Sélecteurs spécifiques pour override */
.bg-gradient.theme-rainbow {
    background: linear-gradient(135deg,
        #ff0000 0%, #ff7f00 14%, #ffff00 28%,
        #00ff00 42%, #0000ff 57%, #4b0082 71%, #9400d3 85%, #ff0000 100%) !important;
    background-size: 400% 400% !important;
    animation: rainbowMove 8s ease infinite !important;
}

@keyframes rainbowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-gradient.theme-sunset {
    background: linear-gradient(180deg,
        #1a0a2e 0%, #4a1942 30%,
        #c2410c 60%, #fbbf24 80%,
        #fef3c7 100%) !important;
}

.bg-gradient.theme-ocean {
    background: linear-gradient(180deg,
        #0c4a6e 0%, #0369a1 30%,
        #0ea5e9 60%, #38bdf8 80%,
        #bae6fd 100%) !important;
}

.bg-gradient.theme-forest {
    background: linear-gradient(180deg,
        #052e16 0%, #14532d 30%,
        #166534 60%, #22c55e 80%,
        #86efac 100%) !important;
}

.bg-gradient.theme-ice {
    background: linear-gradient(180deg,
        #e0f2fe 0%, #bae6fd 20%,
        #7dd3fc 40%, #38bdf8 60%,
        #0ea5e9 80%, #0369a1 100%) !important;
}

.bg-gradient.theme-winter {
    background: linear-gradient(180deg,
        #f0f9ff 0%, #e0f2fe 15%,
        #bae6fd 30%, #7dd3fc 50%,
        #38bdf8 70%, #0284c7 100%) !important;
}

.bg-gradient.theme-aurora {
    background: linear-gradient(180deg,
        #0f172a 0%, #1e1b4b 15%,
        #4c1d95 30%, #6d28d9 45%,
        #10b981 60%, #34d399 75%,
        #06b6d4 90%, #0891b2 100%) !important;
    animation: auroraWave 8s ease-in-out infinite !important;
}

@keyframes auroraWave {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(20deg) brightness(1.1); }
}

.bg-gradient.theme-space {
    background: linear-gradient(180deg,
        #000000 0%, #0a0a1a 20%,
        #1a1a3e 40%, #2d1b69 60%,
        #0f0f2d 80%, #000000 100%) !important;
}

.bg-gradient.theme-night {
    background: linear-gradient(180deg,
        #0a0a1a 0%, #0d1033 20%,
        #1a1a4e 40%, #0f0f2d 60%,
        #050510 100%) !important;
}

.bg-gradient.theme-spring {
    background: linear-gradient(180deg,
        #fce7f3 0%, #fbcfe8 20%,
        #a7f3d0 40%, #6ee7b7 60%,
        #34d399 80%, #10b981 100%) !important;
}

.bg-gradient.theme-summer {
    background: linear-gradient(180deg,
        #fef3c7 0%, #fde68a 20%,
        #fcd34d 40%, #f59e0b 60%,
        #d97706 80%, #92400e 100%) !important;
}

.bg-gradient.theme-autumn {
    background: linear-gradient(180deg,
        #fef2f2 0%, #fecaca 15%,
        #f97316 35%, #ea580c 50%,
        #9a3412 70%, #431407 100%) !important;
}

.bg-gradient.theme-storm {
    background: linear-gradient(180deg,
        #1f2937 0%, #374151 20%,
        #4b5563 40%, #6b7280 50%,
        #374151 70%, #1f2937 100%) !important;
    animation: stormFlash 5s ease-in-out infinite !important;
}

@keyframes stormFlash {
    0%, 90%, 100% { filter: brightness(1); }
    92% { filter: brightness(1.8); }
    94% { filter: brightness(1); }
    96% { filter: brightness(1.5); }
}

.bg-gradient.theme-desert {
    background: linear-gradient(180deg,
        #fef3c7 0%, #fde68a 20%,
        #d97706 40%, #b45309 60%,
        #92400e 80%, #78350f 100%) !important;
}

.bg-gradient.theme-neon {
    background: linear-gradient(135deg,
        #0f0f1a 0%, #1a0a2e 20%,
        #3b0764 40%, #581c87 60%,
        #7c3aed 80%, #a855f7 100%) !important;
    animation: neonPulse 3s ease-in-out infinite !important;
}

@keyframes neonPulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.3); }
}

.bg-gradient.theme-retro {
    background: linear-gradient(180deg,
        #1e1b4b 0%, #312e81 20%,
        #4f46e5 40%, #818cf8 60%,
        #c4b5fd 80%, #ede9fe 100%) !important;
}

/* Theme Golden - Age d'Or */
.bg-gradient.theme-golden {
    background: linear-gradient(135deg,
        #fbbf24 0%, #f59e0b 20%,
        #d97706 40%, #b45309 60%,
        #92400e 80%, #78350f 100%) !important;
    animation: goldenShimmer 8s ease-in-out infinite;
}

@keyframes goldenShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* Theme Crystal - Cristal */
.bg-gradient.theme-crystal {
    background: linear-gradient(135deg,
        #f0f9ff 0%, #e0f2fe 10%,
        #bae6fd 25%, #7dd3fc 40%,
        #38bdf8 55%, #0ea5e9 70%,
        #0284c7 85%, #0369a1 100%) !important;
    animation: crystalShine 6s ease-in-out infinite;
}

@keyframes crystalShine {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    25% {
        filter: brightness(1.3) saturate(1.2);
    }
    50% {
        filter: brightness(1.1) saturate(1.1);
    }
    75% {
        filter: brightness(1.4) saturate(1.3);
    }
}

/* Theme Fire - Inferno */
.bg-gradient.theme-fire {
    background: linear-gradient(180deg,
        #fef08a 0%, #fde047 10%,
        #facc15 20%, #f59e0b 35%,
        #f97316 50%, #ea580c 65%,
        #dc2626 80%, #991b1b 90%,
        #450a0a 100%) !important;
    animation: fireFlicker 3s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% {
        filter: brightness(1) contrast(1);
    }
    25% {
        filter: brightness(1.15) contrast(1.05);
    }
    50% {
        filter: brightness(0.95) contrast(1.1);
    }
    75% {
        filter: brightness(1.1) contrast(1);
    }
}

/* Theme Ice Eternal - Glace Éternelle */
.theme-ice-eternal {
    background: linear-gradient(180deg,
        #f0fdff 0%, #e0f7fa 10%,
        #b2ebf2 25%, #80deea 40%,
        #4dd0e1 55%, #26c6da 70%,
        #00acc1 85%, #00838f 100%) !important;
    animation: iceFrost 10s ease-in-out infinite;
}

@keyframes iceFrost {
    0%, 100% {
        filter: brightness(1) hue-rotate(0deg);
    }
    50% {
        filter: brightness(1.1) hue-rotate(15deg);
    }
}

/* Responsive scores */
@media (max-width: 768px) {
    .scores-podium {
        gap: 0.5rem;
        padding: 1rem;
    }

    .podium-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .podium-place.first .podium-avatar {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .podium-stand {
        min-width: 70px;
    }

    .list-header {
        grid-template-columns: 40px 1fr 70px 70px;
        font-size: 0.7rem;
        padding: 0.8rem;
    }

    .score-row {
        grid-template-columns: 40px 1fr 70px 70px;
        padding: 0.6rem 0.8rem;
    }

    .player-avatar-small {
        display: none;
    }
}

/* ============================================
   PROFIL - MODAL & EDIT
   ============================================ */

/* Carte joueur cliquable */
.player-card-alpine.clickable {
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.player-card-alpine.clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.player-card-alpine.clickable .edit-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--secondary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition);
}

.player-card-alpine.clickable:hover .edit-badge {
    opacity: 1;
    transform: scale(1);
}

/* Modal profil */
.modal-profile-content {
    max-width: 500px;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: auto;
}

.modal-close:hover {
    background: var(--danger);
    color: white;
}

.profile-section {
    margin: 1.5rem 0;
    text-align: left;
}

.profile-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-input-group {
    display: flex;
    gap: 0.5rem;
}

.profile-input-group input {
    flex: 1;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.profile-input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.btn-small {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    transition: var(--transition);
}

.btn-save-name {
    background: var(--success);
    color: white;
}

.btn-save-name:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

.profile-current-avatar {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    font-size: 3rem;
    text-align: center;
}

.profile-current-title {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-align: center;
}

.profile-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    font-style: italic;
}

.profile-stats-mini {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.profile-stat {
    flex: 1;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-align: center;
}

.profile-stat .ps-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.3rem;
}

.profile-stat .ps-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--secondary);
    display: block;
}

.profile-stat .ps-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.profile-logout-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
}

.btn-logout-profile {
    width: 100%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-logout-profile:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
}

/* ============================================
   BOUTIQUE - REVENTE
   ============================================ */

.shop-item-owned {
    position: relative;
}

.shop-item-owned .sell-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--danger);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition);
    z-index: 10;
}

.shop-item-owned:hover .sell-btn {
    opacity: 1;
    transform: scale(1);
}

.shop-item-owned .sell-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.sell-price {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 0.3rem;
}

/* Modal confirmation vente */
.sell-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.sell-confirm-modal.active {
    opacity: 1;
    visibility: visible;
}

.sell-confirm-content {
    background: var(--bg-medium);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 350px;
    text-align: center;
}

.sell-confirm-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.sell-confirm-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.sell-confirm-text {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.sell-confirm-price {
    background: var(--glass);
    padding: 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--success);
    margin-bottom: 1rem;
}

.sell-confirm-actions {
    display: flex;
    gap: 1rem;
}

.sell-confirm-actions button {
    flex: 1;
    padding: 0.8rem;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.btn-cancel-sell {
    background: var(--glass);
    color: var(--text);
    border: 1px solid var(--glass-border) !important;
}

.btn-confirm-sell {
    background: var(--danger);
    color: white;
}

.btn-confirm-sell:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* ============================================
   FOOTER ACCUEIL - CREDITS
   ============================================ */

.welcome-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    margin-top: 0.8rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.welcome-footer strong {
    color: white;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-footer .footer-year {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

/* Compteur de visiteurs temps réel */
.visitor-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 0.6rem 1.2rem;
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 25px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
}

.visitor-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.visitor-icon {
    font-size: 0.8rem;
}

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

.visitor-value {
    color: #10b981;
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 20px;
    text-align: center;
}

.visitor-value.pulse {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.visitor-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
}

/* =====================================================
   CORRECTIONS RESPONSIVE COMPLETES - V2
   ===================================================== */

/* === FIX BASE - TOUS LES ECRANS === */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.screen {
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Conteneurs principaux - fix overflow */
.menu-wrapper,
.shop-wrapper,
.scores-mega-wrapper,
.achievements-wrapper,
.settings-wrapper,
.difficulty-wrapper {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.menu-wrapper::-webkit-scrollbar,
.shop-wrapper::-webkit-scrollbar,
.scores-mega-wrapper::-webkit-scrollbar,
.achievements-wrapper::-webkit-scrollbar,
.settings-wrapper::-webkit-scrollbar,
.difficulty-wrapper::-webkit-scrollbar {
    display: none;
}

/* Fix pour les écrans qui doivent scroller */
#screen-menu,
#screen-shop,
#screen-achievements,
#screen-scores,
#screen-settings,
#screen-difficulty {
    align-items: center;
    justify-content: flex-start;
    padding-top: 1rem;
}

/* Fix game wrapper pour ne pas dépasser */
.game-wrapper,
.titan-game {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.game-wrapper::-webkit-scrollbar,
.titan-game::-webkit-scrollbar {
    display: none;
}

/* === MODALS - FIX MOBILE === */
.modal-content {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem;
}

/* =====================================================
   CARTES DE JEUX - GRILLE PARFAITE AUTO-ADAPTATIVE
   ===================================================== */

/* === BASE - Structure flexbox des cartes === */
.game-card-alpine {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-content-alpine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    padding: 1.8rem 1.2rem;
}

/* === PC - 3 COLONNES (1025px+) === */
@media (min-width: 1025px) {
    .games-grid-alpine {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .game-card-alpine {
        min-height: 260px;
        aspect-ratio: auto;
    }

    /* Carte Quiz - même taille que les autres, pas de span */
    .game-card-alpine.game-card-large {
        grid-column: span 1;
        min-height: 260px;
    }

    .game-card-large .card-content-alpine {
        flex-direction: column;
        justify-content: center;
        gap: 0.8rem;
        text-align: center;
    }

    .game-card-large .card-icon-wrapper {
        margin-bottom: 0.5rem;
    }

    .card-icon-alpine {
        font-size: 3rem;
    }

    .icon-bg-circle {
        width: 75px;
        height: 75px;
    }

    .card-title-alpine {
        font-size: 1.25rem;
        margin-bottom: 0.3rem;
    }

    .card-desc-alpine {
        font-size: 0.85rem;
        max-width: 250px;
        margin: 0 auto;
        line-height: 1.4;
    }

    .card-stats-alpine {
        margin-top: auto;
        padding-top: 0.5rem;
    }
}

/* === TABLETTES - 2 COLONNES (601px - 1024px) === */
@media (max-width: 1024px) and (min-width: 601px) {
    .games-grid-alpine {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .game-card-alpine {
        min-height: 240px;
    }

    .game-card-alpine.game-card-large {
        grid-column: span 2;
        min-height: 200px;
    }

    .card-content-alpine {
        padding: 1.5rem 1rem;
    }

    .card-icon-alpine {
        font-size: 2.8rem;
    }

    .icon-bg-circle {
        width: 70px;
        height: 70px;
    }

    .card-title-alpine {
        font-size: 1.15rem;
        margin-bottom: 0.4rem;
    }

    .card-desc-alpine {
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
    }

    .card-stats-alpine {
        gap: 1rem;
    }

    .stat-item {
        font-size: 0.8rem;
    }

    .card-desc-alpine {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-stats-alpine {
        display: none;
    }
}

/* === MOBILES - 2 COLONNES (600px et moins) === */
@media (max-width: 600px) {
    /* Menu wrapper */
    .menu-wrapper {
        padding: 0.8rem;
    }

    /* Header Alpine compact */
    .alpine-header {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.6rem;
    }

    .chalet-frame {
        width: 100%;
    }

    .chalet-roof {
        display: none;
    }

    .chalet-body {
        border-radius: var(--radius);
        padding: 0.6rem 0.8rem;
    }

    .logo-text-alpine h1 {
        font-size: 1.15rem;
    }

    .tagline-alpine {
        font-size: 0.7rem;
    }

    .marmotte-mascot {
        display: none;
    }

    .player-info-alpine {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .player-card-alpine {
        padding: 0.4rem 0.6rem;
    }

    .player-avatar-alpine {
        width: 32px;
        height: 32px;
    }

    .player-name-alpine {
        font-size: 0.85rem;
    }

    .player-label {
        display: none;
    }

    .crystals-badge-alpine {
        padding: 0.4rem 0.6rem;
    }

    .crystal-label {
        display: none;
    }

    /* Section titre compact */
    .section-header-alpine {
        margin: 0.5rem 0;
    }

    .section-title-alpine {
        font-size: 0.95rem;
    }

    .deco-line {
        width: 15px;
    }

    .deco-snowflake {
        font-size: 0.7rem;
    }

    /* === ONGLETS DES JEUX - MOBILE === */
    .games-tabs {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .games-tab {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    .games-tab .tab-text {
        display: none;
    }

    .games-tab .tab-icon {
        font-size: 1.1rem;
    }

    .games-tab .tab-count,
    .games-tab .tab-badge {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }

    .coming-soon-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }

    .coming-soon-info {
        padding: 1rem;
    }

    .coming-soon-info .info-icon {
        font-size: 1.8rem;
    }

    .coming-soon-info p {
        font-size: 0.85rem;
    }

    /* === CARTES DE JEUX - 2 COLONNES COMPACTES === */
    .games-grid-alpine {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    /* TOUTES les cartes ont la meme taille sur mobile */
    .game-card-alpine {
        min-height: 135px;
        height: 135px;
        width: 100%;
        grid-column: span 1 !important; /* Force 1 colonne pour toutes */
    }

    /* Quiz Alpin - meme taille que les autres sur mobile */
    .game-card-alpine.game-card-large {
        grid-column: span 1 !important;
        min-height: 135px;
        height: 135px;
    }

    .card-content-alpine {
        padding: 0.6rem 0.4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%;
        width: 100%;
    }

    .card-icon-wrapper {
        margin-bottom: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon-alpine {
        font-size: 1.8rem;
        line-height: 1;
    }

    .icon-bg-circle {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Cercle large pour Quiz - meme taille sur mobile */
    .icon-bg-circle.large {
        width: 45px;
        height: 45px;
    }

    .card-title-alpine {
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: white;
        text-align: center;
    }

    .card-desc-alpine {
        display: none;
    }

    .card-stats-alpine {
        display: none;
    }

    .card-ribbon {
        display: none;
    }

    /* Masquer les decorations qui prennent de la place */
    .card-snow-cap {
        display: none;
    }

    .card-frost-border {
        display: none;
    }

    /* Boutons footer */
    .menu-footer-alpine {
        padding: 0.5rem 0;
    }

    .wooden-sign-container {
        gap: 0.5rem;
        justify-content: center;
    }

    .wooden-btn {
        padding: 0.6rem 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 45px;
    }

    .btn-text-alpine {
        display: none;
    }

    .btn-icon-alpine {
        font-size: 1.3rem;
    }

    .btn-snow-top {
        display: none;
    }

    /* Scores tabs */
    .game-tab {
        padding: 0.5rem 0.6rem;
        min-width: auto;
    }

    .tab-name {
        display: none;
    }

    .tab-icon {
        font-size: 1.2rem;
    }

    /* Shop compact */
    .shop-wrapper {
        padding: 0.6rem;
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .shop-item {
        padding: 0.6rem 0.4rem;
    }

    .shop-cat span {
        display: none;
    }

    /* Achievements compact */
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .achievement-card {
        padding: 0.5rem;
    }

    .achievement-desc {
        display: none;
    }

    /* Difficulty compact */
    .difficulty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .diff-info {
        display: none;
    }

    /* Titan header compact */
    .titan-header {
        padding: 0.5rem;
    }

    .titan-name {
        font-size: 1rem;
    }

    .titan-logo {
        font-size: 1.4rem;
    }

    .btn-titan {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .titan-stats {
        width: 100%;
        justify-content: center;
        gap: 0.3rem;
    }

    .titan-stat {
        min-width: 50px;
        padding: 0.35rem 0.4rem;
    }

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

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

    .titan-footer {
        padding: 0.4rem;
        gap: 0.3rem;
    }

    .titan-stat-mini {
        padding: 0.3rem 0.4rem;
        min-width: 45px;
    }

    /* Titan content compact */
    .titan-content {
        padding: 0.8rem;
    }

    .titan-title {
        font-size: 1.3rem;
    }

    .titan-difficulties {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Modal compact */
    .modal-content {
        padding: 1rem;
        margin: 0.5rem;
    }

    .modal-icon {
        font-size: 3rem;
    }

    .modal-title {
        font-size: 1.3rem;
    }

    .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Accueil compact */
    .title-word {
        font-size: 1.8rem;
    }

    .mascot-emoji-large {
        font-size: 3.5rem;
    }

    .mascot-glow-ring {
        width: 85px;
        height: 85px;
    }

    .welcome-features {
        gap: 0.6rem;
    }

    .feature-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .feature-label {
        font-size: 0.65rem;
    }

    .welcome-start-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }

    .welcome-hint {
        display: none;
    }

    /* Memory compact */
    .memory-board.grid-3 {
        grid-template-columns: repeat(3, minmax(70px, 95px));
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(55px, 75px));
    }

    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(42px, 58px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(35px, 50px));
    }

    /* Simon compact */
    .simon-btn {
        width: 55px;
        height: 55px;
    }

    /* Flocon compact */
    .flocon-cell {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    /* Catch/Clicker compact */
    .catch-arena,
    .clicker-arena {
        min-height: 280px;
    }

    .podium-score {
        font-size: 0.95rem;
    }

    .podium-stand {
        min-width: 60px;
        font-size: 1.3rem;
    }

    .podium-place.first .podium-stand {
        height: 80px;
    }

    .podium-place.second .podium-stand {
        height: 60px;
    }

    .podium-place.third .podium-stand {
        height: 40px;
    }

    /* Achievements */
    .achievements-wrapper {
        padding: 1rem;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .achievement-card {
        padding: 0.8rem;
    }

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

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

    .achievement-desc {
        font-size: 0.7rem;
    }

    /* Settings */
    .settings-wrapper {
        padding: 1rem;
    }

    .setting-item {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }

    /* Difficulté memory */
    .difficulty-wrapper {
        padding: 1rem;
    }

    .difficulty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .difficulty-card {
        padding: 1rem;
    }

    .diff-icon {
        font-size: 2rem;
    }

    /* Memory board */
    .memory-board {
        gap: 0.4rem;
        padding: 0.5rem;
    }

    .memory-card {
        border-radius: 8px;
    }

    .card-front, .card-back {
        border-radius: 8px;
    }

    /* Accueil */
    .welcome-content-alpine {
        padding: 1rem;
    }

    .mascot-emoji-large {
        font-size: 4rem;
    }

    .mascot-glow-ring {
        width: 100px;
        height: 100px;
    }

    .title-word {
        font-size: 2rem;
    }

    .welcome-tagline {
        font-size: 0.9rem;
    }

    .welcome-description p {
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }

    .welcome-features {
        gap: 0.8rem;
    }

    .feature-icon-wrap {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .feature-label {
        font-size: 0.75rem;
    }

    .welcome-start-btn {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }

    .welcome-hint {
        font-size: 0.75rem;
    }

    .welcome-footer {
        font-size: 0.75rem;
    }

    /* Btn back */
    .btn-back {
        top: 0.5rem;
        left: 0.5rem;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    /* Modal */
    .modal-content {
        padding: 1.5rem 1rem;
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-icon {
        font-size: 3.5rem;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .modal-subtitle {
        font-size: 0.9rem;
    }

    .modal-stats {
        gap: 0.5rem;
    }

    .modal-stat {
        padding: 0.7rem;
        gap: 0.7rem;
    }

    .modal-stat-icon {
        font-size: 1.5rem;
    }

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

    .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-actions button {
        width: 100%;
    }

    /* Clicker area */
    .clicker-arena,
    .catch-arena {
        min-height: 350px;
    }

    /* Simon board */
    .simon-board {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .simon-btn {
        width: 70px;
        height: 70px;
    }

    .simon-btn span {
        font-size: 1.8rem;
    }

    /* Flocon board */
    .flocon-board {
        gap: 3px;
    }

    .flocon-cell {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    /* Catch basket */
    .catch-basket {
        width: 70px;
        height: 55px;
    }

    .catch-basket .basket {
        font-size: 2.5rem;
    }

    .catch-basket .basket-marmotte {
        font-size: 1rem;
    }
}

/* === RESPONSIVE 480px - PETITS MOBILES === */
@media (max-width: 480px) {
    /* Menu */
    .menu-wrapper {
        padding: 0.4rem;
    }

    /* === CARTES DE JEUX - TRES COMPACT === */
    .games-grid-alpine {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
        width: 100%;
    }

    .game-card-alpine {
        min-height: 125px;
        height: 125px;
        grid-column: span 1 !important;
    }

    .game-card-alpine.game-card-large {
        min-height: 125px;
        height: 125px;
        grid-column: span 1 !important;
    }

    .card-content-alpine {
        padding: 0.5rem 0.35rem;
    }

    .card-icon-wrapper {
        margin-bottom: 0.35rem;
    }

    .card-icon-alpine {
        font-size: 1.6rem;
    }

    .icon-bg-circle {
        width: 40px;
        height: 40px;
    }

    .icon-bg-circle.large {
        width: 40px;
        height: 40px;
    }

    .card-title-alpine {
        font-size: 0.7rem;
        line-height: 1.2;
        font-weight: 700;
    }

    /* Player info */
    .player-card-alpine {
        padding: 0.4rem 0.6rem;
    }

    .player-avatar-alpine {
        width: 35px;
        height: 35px;
    }

    .avatar-emoji {
        font-size: 1.2rem;
    }

    .player-name-alpine {
        font-size: 0.85rem;
    }

    .player-label {
        display: none;
    }

    .crystals-badge-alpine {
        padding: 0.4rem 0.8rem;
    }

    .crystal-icon {
        font-size: 1.2rem;
    }

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

    .crystal-label {
        display: none;
    }

    /* Scores tabs */
    .game-tab {
        padding: 0.5rem 0.7rem;
        min-width: auto;
    }

    .tab-name {
        display: none;
    }

    .tab-icon {
        font-size: 1.3rem;
    }

    /* Global stats scores */
    .game-global-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .gs-icon {
        font-size: 1.3rem;
    }

    .gs-value {
        font-size: 1.1rem;
    }

    .gs-label {
        font-size: 0.65rem;
    }

    /* Shop */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .shop-item {
        padding: 0.8rem 0.5rem;
    }

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

    /* Titan difficulties */
    .titan-difficulties {
        grid-template-columns: 1fr 1fr;
    }

    /* Quiz */
    .quiz-category {
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
    }

    /* Achievements */
    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .achievement-card {
        padding: 0.6rem;
    }

    .achievement-icon {
        font-size: 1.5rem;
    }

    .achievement-name {
        font-size: 0.7rem;
    }

    .achievement-desc {
        display: none;
    }

    /* Memory grids plus petites */
    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(45px, 65px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(40px, 55px));
    }

    /* Simon */
    .simon-btn {
        width: 60px;
        height: 60px;
    }

    .simon-btn span {
        font-size: 1.5rem;
    }

    /* Flocon */
    .flocon-cell {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }

    /* Scores tabs */
    .game-tab {
        padding: 0.5rem 0.6rem;
        min-width: auto;
    }

    .tab-name {
        display: none;
    }

    .tab-icon {
        font-size: 1.2rem;
    }

    /* Accueil */
    .title-word {
        font-size: 1.8rem;
    }

    .mascot-emoji-large {
        font-size: 3.5rem;
    }

    .mascot-glow-ring {
        width: 85px;
        height: 85px;
    }

    .welcome-features {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .feature-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .feature-label {
        font-size: 0.65rem;
    }

    .welcome-start-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }

    .welcome-hint {
        display: none;
    }

    /* Titan games */
    .titan-header {
        padding: 0.5rem;
    }

    .titan-name {
        font-size: 1rem;
    }

    .titan-logo {
        font-size: 1.4rem;
    }

    .btn-titan {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .titan-stat {
        min-width: 50px;
        padding: 0.35rem 0.4rem;
    }

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

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

    /* Titan content */
    .titan-content {
        padding: 0.8rem;
    }

    .titan-title {
        font-size: 1.3rem;
    }

    .titan-desc {
        font-size: 0.75rem;
    }

    .overlay-icon.titan-icon {
        font-size: 2.5rem;
    }

    .titan-difficulties {
        grid-template-columns: repeat(2, 1fr);
    }

    .titan-diff-btn {
        padding: 0.5rem;
    }

    .diff-name {
        font-size: 0.7rem;
    }

    .diff-desc {
        font-size: 0.55rem;
    }

    /* Shop compact */
    .shop-wrapper {
        padding: 0.6rem;
    }

    .shop-header h2 {
        font-size: 1.2rem;
    }

    .shop-balance {
        padding: 0.4rem 0.8rem;
    }

    .balance-value {
        font-size: 1.1rem;
    }

    .shop-cat {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    .shop-cat span {
        display: none;
    }

    .shop-grid {
        gap: 0.5rem;
    }

    .shop-item {
        padding: 0.6rem 0.4rem;
    }

    .item-icon {
        font-size: 1.6rem;
    }

    .item-name {
        font-size: 0.7rem;
    }

    /* Scores compact */
    .scores-mega-wrapper {
        padding: 0.6rem;
    }

    .scores-mega-header h2 {
        font-size: 1.2rem;
    }

    .scores-mega-icon {
        font-size: 2rem;
    }

    .podium-avatar {
        width: 40px;
        height: 40px;
    }

    .podium-place.first .podium-avatar {
        width: 55px;
        height: 55px;
    }

    .podium-stand {
        min-width: 55px;
    }

    /* Memory grids compact */
    .memory-board.grid-3 {
        grid-template-columns: repeat(3, minmax(70px, 95px));
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(55px, 75px));
    }

    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(42px, 58px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(35px, 50px));
    }

    .memory-card {
        max-height: 90px;
    }

    .card-content {
        font-size: 1.6rem;
    }

    /* Difficulty compact */
    .difficulty-grid {
        gap: 0.5rem;
    }

    .difficulty-card {
        padding: 0.7rem;
    }

    .diff-icon {
        font-size: 1.6rem;
    }

    .difficulty-card h3 {
        font-size: 0.9rem;
    }

    .diff-info {
        display: none;
    }

    /* Modal compact */
    .modal-content {
        padding: 0.8rem;
    }

    .modal-icon {
        font-size: 2.8rem;
    }

    .modal-title {
        font-size: 1.2rem;
    }

    .modal-stat {
        padding: 0.5rem;
    }

    /* Simon compact */
    .simon-board {
        gap: 8px;
    }

    .simon-btn {
        width: 70px;
        height: 70px;
        border-width: 3px;
    }

    .simon-btn span {
        font-size: 1.8rem;
    }

    .simon-board.mode-6 .simon-btn {
        width: 65px;
        height: 65px;
    }

    .simon-board.mode-8 .simon-btn {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    /* Flocon compact */
    .flocon-board {
        gap: 2px;
    }

    .flocon-cell {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    /* Catch compact */
    .catch-arena {
        min-height: 280px;
    }

    .catch-basket {
        width: 55px;
        height: 42px;
    }

    /* Clicker compact */
    .clicker-arena {
        min-height: 280px;
    }

    .clicker-marmotte {
        width: 45px;
        height: 45px;
    }

    /* Achievements compact */
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .achievement-card {
        padding: 0.5rem;
    }

    .achievement-icon {
        font-size: 1.4rem;
    }

    .achievement-name {
        font-size: 0.65rem;
    }
}

/* === RESPONSIVE 360px - TRES PETITS MOBILES === */
@media (max-width: 360px) {
    /* GARDER 2 colonnes meme sur petit ecran */
    .games-grid-alpine {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem;
    }

    .game-card-alpine {
        min-height: 110px;
        height: 110px;
        grid-column: span 1 !important;
    }

    .game-card-alpine.game-card-large {
        min-height: 110px;
        height: 110px;
        grid-column: span 1 !important;
    }

    .card-content-alpine {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.4rem 0.25rem;
    }

    .card-icon-alpine {
        font-size: 1.4rem;
    }

    .icon-bg-circle,
    .icon-bg-circle.large {
        width: 35px;
        height: 35px;
    }

    .card-title-alpine {
        font-size: 0.6rem;
    }

    .card-icon-wrapper {
        margin-bottom: 0.25rem;
        flex-shrink: 0;
    }

    /* Titan difficultés en 1 colonne */
    .titan-difficulties {
        grid-template-columns: 1fr;
    }

    /* Memory grids */
    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(38px, 55px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(32px, 48px));
    }

    .card-content {
        font-size: 1.5rem;
    }

    /* Simon 4 boutons max visibles */
    .simon-btn {
        width: 50px;
        height: 50px;
    }

    .simon-btn span {
        font-size: 1.2rem;
    }

    /* Flocon */
    .flocon-cell {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}

/* === FIX ORIENTATION PAYSAGE MOBILE === */
@media (max-height: 500px) and (orientation: landscape) {
    .screen {
        align-items: flex-start;
    }

    .menu-wrapper,
    .welcome-content-alpine {
        padding-top: 0.5rem;
    }

    /* Cacher éléments décoratifs */
    .welcome-mountain-scene,
    .mountain-scene,
    .welcome-snowfall,
    .menu-snowfall {
        display: none;
    }

    .mascot-emoji-large {
        font-size: 2.5rem;
    }

    .mascot-glow-ring {
        display: none;
    }

    .title-word {
        font-size: 1.5rem;
    }

    .welcome-features {
        display: none;
    }

    .welcome-description {
        display: none;
    }

    /* Games header compact */
    .titan-header {
        padding: 0.4rem;
    }

    .titan-stat {
        padding: 0.3rem 0.4rem;
    }

    /* Jeux arenas */
    .clicker-arena,
    .catch-arena,
    .simon-container,
    .flocon-container {
        min-height: auto;
        max-height: 70vh;
    }

    .titan-footer {
        padding: 0.3rem;
    }

    .titan-stat-mini {
        padding: 0.2rem 0.4rem;
    }

    /* Modal en landscape */
    .modal-content {
        max-height: 95vh;
        padding: 1rem;
    }

    .modal-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .modal-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-stat {
        flex: 1 1 45%;
        padding: 0.5rem;
    }
}

/* === FIX iOS SAFE AREAS === */
@supports (padding-top: env(safe-area-inset-top)) {
    .screen {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .modal-content {
        margin-bottom: env(safe-area-inset-bottom);
    }

    .titan-footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
}

/* === SCROLLBAR INVISIBLE - GLISSER AVEC SOURIS/DOIGT === */
.menu-wrapper,
.shop-wrapper,
.scores-mega-wrapper,
.achievements-wrapper,
.settings-wrapper,
.difficulty-wrapper,
.titan-content,
.modal-content,
.list-body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.menu-wrapper::-webkit-scrollbar,
.shop-wrapper::-webkit-scrollbar,
.scores-mega-wrapper::-webkit-scrollbar,
.achievements-wrapper::-webkit-scrollbar,
.settings-wrapper::-webkit-scrollbar,
.difficulty-wrapper::-webkit-scrollbar,
.titan-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.list-body::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
    width: 0;
    height: 0;
}

/* === CROSS-BROWSER FIXES === */
/* Fix Safari flexbox */
.game-card-alpine,
.titan-stat,
.modal-stat,
.shop-item {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* Fix pour text-fill-color sur Firefox */
@supports not (-webkit-text-fill-color: transparent) {
    .titan-name,
    .modal-title,
    .game-name,
    .shop-header h2,
    .scores-mega-header h2,
    .podium-score {
        color: #fbbf24;
        background: none;
    }
}

/* Fix backdrop-filter pour Firefox */
@supports not (backdrop-filter: blur(10px)) {
    .game-header,
    .titan-header,
    .modal-backdrop,
    .player-card-alpine,
    .crystals-badge-alpine {
        background-color: rgba(12, 10, 29, 0.95);
    }
}

/* Touch action pour éviter le zoom sur double-tap */
button,
.game-card-alpine,
.difficulty-card,
.shop-item,
.achievement-card,
.simon-btn,
.flocon-cell,
.memory-card,
.quiz-answer,
.titan-quiz-answer {
    touch-action: manipulation;
}

/* Prevent text selection on game elements */
.simon-btn,
.flocon-cell,
.memory-card,
.clicker-marmotte,
.catch-basket {
    -webkit-user-select: none;
    user-select: none;
}

/* Podium et liste affichés normalement */

/* Onglets de difficulté pour Memory */
.scores-difficulty-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.diff-tab {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
}

.diff-tab:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary);
}

.diff-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Améliorer l'affichage des stats personnelles */
.game-global-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    max-width: 500px;
    margin: 0 auto;
}

.global-stat {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.gs-icon {
    font-size: 2rem;
}

.gs-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--secondary);
}

/* ========== CLASSEMENT TOP 100 - PRO ========== */

/* Wrapper principal */
.lb-pro-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

/* Header avec trophee */
.lb-pro-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.lb-pro-title-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.lb-pro-icon {
    position: relative;
}

.lb-trophy {
    font-size: 3rem;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    animation: trophyFloat 3s ease-in-out infinite;
}

@keyframes trophyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.lb-trophy-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.lb-pro-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.lb-pro-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
}

/* Onglets categories */
.lb-pro-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lb-pro-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.lb-pro-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    transform: translateY(-2px);
}

.lb-pro-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-light);
    color: white;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.lb-tab-icon {
    font-size: 1.2rem;
}

.lb-tab-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.lb-pro-tab.active .lb-tab-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* Chips de jeux */
.lb-pro-games {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
}

.lb-pro-games.hidden {
    display: none;
}

.lb-game-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lb-game-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.lb-game-chip.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}

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

/* Boutons de difficulte */
.lb-pro-difficulty {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.lb-diff-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lb-diff-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.lb-diff-btn.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary);
    color: var(--primary-light);
}

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

/* Mon rang */
.lb-pro-myrank {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 15px;
    margin-bottom: 1.5rem;
}

.myrank-left, .myrank-right {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.myrank-label, .myrank-score-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.myrank-position {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-light);
}

.myrank-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary);
    text-align: right;
}

/* Podium Top 3 */
.lb-pro-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 15px 15px 0 0;
    position: relative;
    min-width: 100px;
}

.podium-item.gold {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
    order: 2;
    padding-top: 0.5rem;
}

.podium-item.silver {
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.2), rgba(192, 192, 192, 0.05));
    order: 1;
}

.podium-item.bronze {
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.05));
    order: 3;
}

.podium-crown {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    animation: crownBounce 2s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-5deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

.podium-rank {
    position: absolute;
    top: -10px;
    right: -5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.podium-item.gold .podium-rank {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a2e;
}

.podium-item.silver .podium-rank {
    background: linear-gradient(135deg, #E8E8E8, #B0B0B0);
    color: #1a1a2e;
}

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

.podium-avatar {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.podium-item.gold .podium-avatar {
    font-size: 2.5rem;
}

.podium-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-score {
    font-size: 1rem;
    font-weight: 800;
    color: var(--secondary);
}

.podium-item.gold .podium-score {
    font-size: 1.2rem;
}

.podium-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 15px 15px;
}

.podium-item.gold .podium-bar {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    height: 6px;
}

.podium-item.silver .podium-bar {
    background: linear-gradient(90deg, #E8E8E8, #B0B0B0);
}

.podium-item.bronze .podium-bar {
    background: linear-gradient(90deg, #CD7F32, #8B4513);
}

/* Liste du classement */
.lb-pro-list-container {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
}

.lb-pro-list-header {
    display: grid;
    grid-template-columns: 50px 1fr 100px;
    padding: 0.75rem 1rem;
    background: rgba(139, 92, 246, 0.15);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lb-pro-list {
    max-height: 400px;
    overflow-y: auto;
}

.lb-pro-list::-webkit-scrollbar {
    width: 6px;
}

.lb-pro-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.lb-pro-list::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

.lb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--text-muted);
}

.lb-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.lb-pro-row {
    display: grid;
    grid-template-columns: 50px 1fr 100px;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    align-items: center;
}

.lb-pro-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.lb-pro-row.is-me {
    background: rgba(139, 92, 246, 0.1);
    border-left: 3px solid var(--primary);
}

.lb-pro-rank {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-muted);
}

.lb-pro-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lb-pro-avatar {
    font-size: 1.3rem;
}

.lb-pro-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.lb-pro-score {
    font-weight: 700;
    color: var(--secondary);
    font-size: 1rem;
    text-align: right;
}

/* Responsive */
@media (max-width: 600px) {
    .lb-pro-wrapper {
        padding: 0.5rem;
    }

    .lb-pro-title-section {
        flex-direction: column;
        gap: 0.5rem;
    }

    .lb-trophy {
        font-size: 2.5rem;
    }

    .lb-pro-title {
        font-size: 1.4rem;
    }

    .lb-pro-tabs {
        gap: 0.5rem;
    }

    .lb-pro-tab {
        padding: 0.6rem 1rem;
    }

    .lb-tab-text {
        display: none;
    }

    .lb-game-chip .chip-name {
        display: none;
    }

    .lb-game-chip {
        padding: 0.5rem 0.7rem;
    }

    .chip-icon {
        font-size: 1.2rem;
    }

    .lb-diff-btn .diff-name {
        display: none;
    }

    .lb-pro-myrank {
        padding: 0.75rem 1rem;
    }

    .myrank-position {
        font-size: 1.4rem;
    }

    .myrank-score {
        font-size: 1.2rem;
    }

    .podium-item {
        min-width: 80px;
        padding: 0.75rem 0.5rem;
    }

    .podium-name {
        font-size: 0.75rem;
        max-width: 70px;
    }

    .lb-pro-list-header,
    .lb-pro-row {
        grid-template-columns: 40px 1fr 80px;
        padding: 0.6rem 0.75rem;
    }

    .lb-pro-name {
        font-size: 0.85rem;
    }
}

/* Ancien styles pour compatibilite */
.leaderboard-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    padding-top: 5rem;
    text-align: center;
}

.leaderboard-wrapper .section-title {
    text-align: center;
    margin-bottom: 0.5rem;
}

.leaderboard-wrapper .section-subtitle {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    opacity: 0.9;
}

/* Onglets principaux Leaderboard */
.leaderboard-main-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.leaderboard-main-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.leaderboard-main-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.leaderboard-main-tab.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--primary-light);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.leaderboard-main-tab .tab-icon {
    font-size: 1.2rem;
}

@media (max-width: 600px) {
    .leaderboard-main-tabs {
        gap: 0.5rem;
    }

    .leaderboard-main-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .leaderboard-main-tab .tab-text {
        display: none;
    }

    .leaderboard-main-tab .tab-icon {
        font-size: 1.5rem;
    }
}

.leaderboard-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.filter-group select {
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--glass-border);
    background: var(--bg-medium);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    min-width: 180px;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.btn-refresh {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    border: 2px solid var(--glass-border);
    background: var(--glass);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-refresh:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: rotate(180deg);
}

.my-rank-box {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 1rem 1.5rem;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.my-rank-label {
    font-size: 1rem;
    opacity: 0.9;
}

.my-rank-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--secondary);
}

.leaderboard-container {
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: 15px;
    overflow: hidden;
}

.leaderboard-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.2);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leaderboard-list {
    max-height: 500px;
    overflow-y: auto;
}

.leaderboard-loading {
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.leaderboard-empty {
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}

.leaderboard-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.lb-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.2s ease;
    align-items: center;
}

.lb-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lb-row.is-me {
    background: rgba(139, 92, 246, 0.15);
    border-left: 3px solid var(--primary);
}

.lb-row.top-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), transparent);
}

.lb-row.top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), transparent);
}

.lb-row.top-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), transparent);
}

.lb-rank {
    font-weight: 800;
    font-size: 1.1rem;
}

.lb-rank.gold { color: #FFD700; }
.lb-rank.silver { color: #C0C0C0; }
.lb-rank.bronze { color: #CD7F32; }

.lb-player {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.lb-avatar {
    font-size: 1.5rem;
}

.lb-player-info {
    display: flex;
    flex-direction: column;
}

.lb-player-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.lb-flag {
    font-size: 1.1rem;
}

.lb-player-title {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.lb-score {
    font-weight: 700;
    color: var(--secondary);
    font-size: 1.1rem;
}

.lb-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ========== SELECTEUR DE PAYS ========== */
.profile-country-selector {
    position: relative;
}

.country-current {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: var(--glass);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    color: var(--text);
}

.country-current:hover {
    border-color: var(--primary);
}

.country-flag {
    font-size: 1.5rem;
}

.country-name {
    flex: 1;
    text-align: left;
    font-weight: 600;
}

.country-arrow {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.country-current.open .country-arrow {
    transform: rotate(180deg);
}

.country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-medium);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    margin-top: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.country-dropdown.show {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.country-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.country-option:hover {
    background: rgba(139, 92, 246, 0.2);
}

.country-option.selected {
    background: rgba(139, 92, 246, 0.3);
}

.country-option-flag {
    font-size: 1.3rem;
}

.country-option-name {
    font-weight: 500;
}

/* ========== RESPONSIVE CLASSEMENT ========== */
@media (max-width: 768px) {
    .leaderboard-wrapper .section-title {
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
    }

    .leaderboard-wrapper .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
    }

    .leaderboard-header,
    .lb-row {
        grid-template-columns: 45px 1fr 70px;
    }

    .lb-col-date,
    .lb-date {
        display: none;
    }

    .leaderboard-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group select {
        width: 100%;
        min-width: unset;
    }

    .btn-refresh {
        align-self: center;
    }

    .lb-avatar {
        font-size: 1.2rem;
    }

    .lb-player-name {
        font-size: 0.9rem;
    }

    .lb-player-title {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .leaderboard-wrapper {
        padding: 0.5rem;
    }

    .leaderboard-wrapper .section-title {
        font-size: 1.5rem;
    }

    .leaderboard-wrapper .section-subtitle {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .leaderboard-header,
    .lb-row {
        grid-template-columns: 40px 1fr 60px;
        padding: 0.6rem 0.8rem;
    }

    .lb-rank {
        font-size: 0.95rem;
    }

    .lb-avatar {
        display: none;
    }

    .lb-score {
        font-size: 0.95rem;
    }
}

/* Animation entrée classement */
.lb-row {
    animation: slideInRow 0.3s ease forwards;
    animation-fill-mode: forwards;
}

@keyframes slideInRow {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Délai d'animation pour chaque rang */
.lb-row:nth-child(1) { animation-delay: 0s; opacity: 0; }
.lb-row:nth-child(2) { animation-delay: 0.03s; opacity: 0; }
.lb-row:nth-child(3) { animation-delay: 0.06s; opacity: 0; }
.lb-row:nth-child(4) { animation-delay: 0.09s; opacity: 0; }
.lb-row:nth-child(5) { animation-delay: 0.12s; opacity: 0; }
.lb-row:nth-child(6) { animation-delay: 0.15s; opacity: 0; }
.lb-row:nth-child(7) { animation-delay: 0.18s; opacity: 0; }
.lb-row:nth-child(8) { animation-delay: 0.21s; opacity: 0; }
.lb-row:nth-child(9) { animation-delay: 0.24s; opacity: 0; }
.lb-row:nth-child(10) { animation-delay: 0.27s; opacity: 0; }

/* Médaille pour top 3 */
.lb-rank.gold::before { content: '🥇 '; }
.lb-rank.silver::before { content: '🥈 '; }
.lb-rank.bronze::before { content: '🥉 '; }

/* Erreur input pseudo */
.input-error {
    border-color: var(--danger) !important;
    animation: shakeInput 0.5s ease;
}

@keyframes shakeInput {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Highlight joueur actuel dans classement */
.lb-row.is-me {
    background: rgba(139, 92, 246, 0.2) !important;
    border-left: 4px solid var(--primary);
    box-shadow: inset 0 0 15px rgba(139, 92, 246, 0.3);
}

/* ========================================================================== */
/* ================ NOUVEAU CLASSEMENT MONDIAL - DESIGN PRO ================= */
/* ========================================================================== */

/* Container principal */
.lb-world-container {
    max-width: 950px;
    margin: 0 auto;
    padding: 1.5rem;
    padding-top: 70px;
}

/* ========== HEADER STYLE NAVIGATEUR ========== */
.lb-browser-header {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.98) 0%, rgba(20, 20, 35, 0.99) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

/* Barre superieure du navigateur */
.lb-browser-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(60, 60, 80, 0.9) 0%, rgba(40, 40, 60, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lb-browser-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.lb-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.lb-dot.red {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border: 1px solid #d64545;
}

.lb-dot.yellow {
    background: linear-gradient(135deg, #ffd93d 0%, #f5c800 100%);
    border: 1px solid #d4a800;
}

.lb-dot.green {
    background: linear-gradient(135deg, #6bcb77 0%, #4caf50 100%);
    border: 1px solid #3d9141;
}

.lb-browser-title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.lb-title-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.lb-title-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lb-browser-actions {
    flex-shrink: 0;
}

.lb-refresh-btn-mini {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-refresh-btn-mini:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
}

.lb-refresh-btn-mini:active {
    transform: rotate(360deg) scale(0.95);
}

/* Onglets du navigateur */
.lb-browser-tabs {
    display: flex;
    background: rgba(25, 25, 40, 0.95);
    padding: 0;
}

.lb-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.lb-tab::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.lb-tab:last-child::after {
    display: none;
}

.lb-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.lb-tab.active {
    background: rgba(139, 92, 246, 0.15);
    color: white;
    border-bottom-color: var(--secondary);
}

.lb-tab-icon {
    font-size: 1.2rem;
}

.lb-tab-text {
    font-weight: 600;
}

.lb-tab-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.lb-tab.active .lb-tab-badge {
    background: var(--secondary);
    color: white;
}

/* ========== ANCIEN HEADER (conserve pour compatibilite) ========== */
.lb-world-header {
    display: none;
}

/* ========== SWITCHER CATEGORIES (cache car remplace par tabs) ========== */
.lb-category-switcher {
    display: none;
}

/* ========== ANCIEN SWITCHER (conserve le code mais cache) ========== */
.lb-category-switcher-old {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.lb-category-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lb-category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lb-category-btn:hover {
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lb-category-btn:hover::before {
    opacity: 1;
}

.lb-category-btn.active {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.25) 0%, rgba(100, 60, 200, 0.15) 100%);
    border: 3px solid var(--primary);
    box-shadow:
        0 8px 32px rgba(139, 92, 246, 0.35),
        0 0 0 1px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lb-category-btn.active::before {
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.lb-category-btn.active[data-category="autres"] {
    background: linear-gradient(145deg, rgba(255, 165, 0, 0.2) 0%, rgba(200, 100, 0, 0.1) 100%);
    border-color: #FFA500;
    box-shadow:
        0 8px 32px rgba(255, 165, 0, 0.3),
        0 0 0 1px rgba(255, 165, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lb-category-btn.active[data-category="autres"]::before {
    background: linear-gradient(90deg, transparent, #FFA500, transparent);
}

.lb-cat-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.lb-cat-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1;
}

.lb-cat-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.5px;
}

.lb-cat-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.lb-cat-badge {
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, var(--primary) 0%, #6B21A8 100%);
    border-radius: 25px;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lb-cat-badge.retro {
    background: linear-gradient(135deg, #FFA500 0%, #E65100 100%);
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
}

/* ========== SECTIONS JEUX ========== */
.lb-games-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(145deg, rgba(25, 25, 45, 0.95) 0%, rgba(15, 15, 30, 0.98) 100%);
    border: 2px solid rgba(139, 92, 246, 0.25);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lb-games-section.hidden {
    display: none;
}

#leaderboard-games-autres {
    border-color: rgba(255, 165, 0, 0.25);
}

.lb-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.lb-section-header.retro {
    border-bottom-color: rgba(255, 165, 0, 0.3);
}

.lb-section-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.lb-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.5px;
}

/* Grille des jeux */
.lb-games-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.lb-game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 0.6rem;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.8) 0%, rgba(25, 25, 40, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: inherit;
    position: relative;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.lb-game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 14px 14px 0 0;
    transition: all 0.3s ease;
}

.lb-game-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.lb-game-card:hover::after {
    opacity: 1;
}

.lb-game-card:hover {
    background: linear-gradient(145deg, rgba(50, 50, 75, 0.95) 0%, rgba(35, 35, 55, 0.98) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lb-game-card.active {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.35) 0%, rgba(100, 60, 200, 0.25) 100%);
    border: 2px solid var(--primary);
    box-shadow:
        0 8px 25px rgba(139, 92, 246, 0.5),
        0 0 0 2px rgba(139, 92, 246, 0.2),
        0 0 40px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: activeCardPulse 2s ease-in-out infinite;
}

@keyframes activeCardPulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5), 0 0 0 2px rgba(139, 92, 246, 0.2), 0 0 40px rgba(139, 92, 246, 0.2); }
    50% { box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6), 0 0 0 3px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.3); }
}

.lb-game-card.active::before {
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.lb-game-card.retro.active {
    background: linear-gradient(145deg, rgba(255, 165, 0, 0.3) 0%, rgba(200, 100, 0, 0.2) 100%);
    border-color: #FFA500;
    box-shadow:
        0 6px 20px rgba(255, 165, 0, 0.4),
        0 0 0 1px rgba(255, 165, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lb-game-card.retro.active::before {
    background: linear-gradient(90deg, transparent, #FFA500, transparent);
}

.lb-game-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.lb-game-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.lb-game-players {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ========== BARRE DE CONTROLES ========== */
.lb-controls-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg, rgba(25, 25, 45, 0.95) 0%, rgba(15, 15, 30, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lb-difficulty-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lb-control-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lb-difficulty-pills {
    display: flex;
    gap: 0.5rem;
}

.lb-diff-pill {
    padding: 0.6rem 1.1rem;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.8) 0%, rgba(25, 25, 40, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lb-diff-pill:hover {
    background: linear-gradient(145deg, rgba(50, 50, 75, 0.9) 0%, rgba(35, 35, 55, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    transform: translateY(-2px);
}

.lb-diff-pill.active {
    background: linear-gradient(135deg, var(--primary) 0%, #6B21A8 100%);
    border: 2px solid var(--primary-light);
    color: white;
    box-shadow:
        0 4px 15px rgba(139, 92, 246, 0.5),
        0 0 0 1px rgba(139, 92, 246, 0.3);
}

.lb-diff-select-mobile {
    display: none;
    padding: 0.7rem 1rem;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.8) 0%, rgba(25, 25, 40, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
}

.lb-refresh-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.8) 0%, rgba(25, 25, 40, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lb-refresh-btn:hover {
    background: linear-gradient(145deg, rgba(50, 50, 75, 0.9) 0%, rgba(35, 35, 55, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.lb-refresh-btn:active .lb-refresh-icon {
    animation: spinOnce 0.5s ease;
}

.lb-refresh-icon {
    font-size: 1.1rem;
}

@keyframes spinOnce {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== CARTE MON CLASSEMENT ========== */
.lb-my-rank-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.2) 0%, rgba(100, 60, 200, 0.1) 100%);
    border: 3px solid var(--primary);
    border-radius: 18px;
    margin-bottom: 1.5rem;
    box-shadow:
        0 8px 32px rgba(139, 92, 246, 0.35),
        0 0 0 1px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.lb-my-rank-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
}

.lb-my-rank-card::after {
    content: '⭐';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    opacity: 0.1;
}

.lb-myrank-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.lb-myrank-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

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

.lb-myrank-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lb-myrank-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}

.lb-myrank-right {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    position: relative;
    z-index: 1;
}

.lb-myrank-position {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
    white-space: nowrap;
}

.lb-myrank-suffix {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ========== LISTE CLASSEMENT ========== */
.lb-list-container {
    background: linear-gradient(145deg, rgba(25, 25, 45, 0.95) 0%, rgba(15, 15, 30, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lb-list-header {
    display: grid;
    grid-template-columns: 70px 1fr 110px 80px 50px;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.6) 0%, rgba(25, 25, 40, 0.7) 100%);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.lb-list {
    max-height: none;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(255, 255, 255, 0.05);
}

.lb-list::-webkit-scrollbar {
    width: 10px;
}

.lb-list::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.lb-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    border-radius: 10px;
    border: 2px solid rgba(20, 20, 35, 0.8);
    box-shadow:
        inset 0 0 6px rgba(255, 255, 255, 0.2),
        0 0 8px rgba(139, 92, 246, 0.4);
}

.lb-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #A78BFA 0%, #8B5CF6 50%, #7C3AED 100%);
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(139, 92, 246, 0.6);
}

.lb-list::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #C4B5FD 0%, #A78BFA 50%, #8B5CF6 100%);
}

/* Loading state */
.lb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.lb-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: lbSpin 0.8s linear infinite;
}

@keyframes lbSpin {
    to { transform: rotate(360deg); }
}

/* Lignes du classement */
.lb-list-row {
    display: grid;
    grid-template-columns: 70px 1fr 110px 80px 50px;
    padding: 1.1rem 1.5rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.lb-list-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: all 0.3s ease;
    border-radius: 0 4px 4px 0;
}

.lb-list-row::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lb-list-row:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.lb-list-row:hover::before {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.lb-list-row:hover::after {
    opacity: 1;
}

.lb-list-row:last-child {
    border-bottom: none;
}

.lb-list-row.is-me {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border-left: 4px solid var(--primary);
    border-radius: 0 8px 8px 0;
}

.lb-list-row.is-me::before {
    background: linear-gradient(180deg, var(--primary), #22d3ee);
    width: 5px;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

/* Top 3 special styles */
.lb-list-row.top-1 {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, transparent 100%);
}

.lb-list-row.top-1::before {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    opacity: 1;
}

.lb-list-row.top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.12) 0%, transparent 100%);
}

.lb-list-row.top-2::before {
    background: linear-gradient(180deg, #e2e8f0, #94a3b8);
    opacity: 1;
}

.lb-list-row.top-3 {
    background: linear-gradient(90deg, rgba(205, 124, 50, 0.12) 0%, transparent 100%);
}

.lb-list-row.top-3::before {
    background: linear-gradient(180deg, #cd7c32, #a05a20);
    opacity: 1;
}

.lb-row-rank {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-muted);
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-align: center;
    width: fit-content;
}

.lb-row-player {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.lb-row-avatar {
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.8) 0%, rgba(25, 25, 40, 0.9) 100%);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.lb-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lb-row-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.lb-row-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.lb-row-score {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--secondary);
    padding: 0.35rem 0.75rem;
    background: rgba(167, 139, 250, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.lb-row-country {
    font-size: 1.5rem;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Bouton voir profil */
.lb-row-profile-btn {
    background: rgba(139, 92, 246, 0.2);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.lb-row-profile-btn:hover {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.6);
    opacity: 1;
    transform: scale(1.1);
}

.lb-list-row:hover .lb-row-profile-btn {
    opacity: 1;
}

/* ========== STATS GLOBALES ========== */
.lb-global-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.lb-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(145deg, rgba(25, 25, 45, 0.95) 0%, rgba(15, 15, 30, 0.98) 100%);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lb-stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(139, 92, 246, 0.15);
}

.lb-stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
    background-size: 200% 100%;
    animation: statBarGlow 3s linear infinite;
}

@keyframes statBarGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.lb-stat-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease;
}

.lb-stat-item:hover .lb-stat-icon {
    transform: scale(1.15) rotate(5deg);
}

.lb-stat-value {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--secondary) 0%, #A78BFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lb-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========== RESPONSIVE NOUVEAU CLASSEMENT ========== */
@media (max-width: 768px) {
    .lb-world-container {
        padding: 1rem;
        padding-top: 60px;
    }

    /* Style navigateur responsive */
    .lb-browser-header {
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .lb-browser-bar {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .lb-browser-dots {
        gap: 4px;
    }

    .lb-dot {
        width: 10px;
        height: 10px;
    }

    .lb-title-icon {
        font-size: 1.1rem;
    }

    .lb-title-text {
        font-size: 0.95rem;
    }

    .lb-refresh-btn-mini {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .lb-browser-tabs {
        flex-direction: row;
    }

    .lb-tab {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
        gap: 0.35rem;
    }

    .lb-tab-icon {
        font-size: 1rem;
    }

    .lb-tab-text {
        font-size: 0.8rem;
    }

    .lb-tab-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.35rem;
    }

    /* Ancien header cache */
    .lb-world-header {
        display: none;
    }

    .lb-category-switcher {
        display: none;
    }

    .lb-games-section {
        padding: 1rem;
    }

    .lb-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }

    .lb-game-card {
        padding: 0.8rem 0.4rem;
    }

    .lb-controls-bar {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .lb-difficulty-pills {
        display: none;
    }

    .lb-diff-select-mobile {
        display: block;
    }

    .lb-difficulty-selector {
        width: 100%;
        justify-content: space-between;
    }

    .lb-refresh-btn {
        width: 100%;
        justify-content: center;
    }

    .lb-my-rank-card {
        padding: 1rem 1.25rem;
    }

    .lb-my-rank-card::after {
        font-size: 3rem;
        right: 10px;
    }

    .lb-myrank-icon {
        font-size: 2rem;
    }

    .lb-myrank-position {
        font-size: 2rem;
    }

    .lb-podium {
        gap: 0.5rem;
        padding: 1.5rem 1rem 0.75rem;
    }

    .lb-podium::after {
        font-size: 0.75rem;
        top: 10px;
    }

    .lb-podium-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.8rem;
    }

    .lb-podium-place.first .lb-podium-avatar {
        width: 55px;
        height: 55px;
        font-size: 2.2rem;
    }

    .lb-podium-place.first .lb-podium-stand {
        width: 80px;
        height: 80px;
    }

    .lb-podium-place.second .lb-podium-stand {
        width: 70px;
        height: 60px;
    }

    .lb-podium-place.third .lb-podium-stand {
        width: 70px;
        height: 50px;
    }

    .lb-podium-rank {
        font-size: 1.8rem;
    }

    .lb-podium-place.first .lb-podium-rank {
        font-size: 2.2rem;
    }

    .lb-podium-name {
        font-size: 0.8rem;
        max-width: 70px;
    }

    .lb-list-header {
        grid-template-columns: 50px 1fr 80px;
        padding: 0.9rem 1rem;
        font-size: 0.7rem;
    }

    .lb-col-country {
        display: none;
    }

    .lb-list-row {
        grid-template-columns: 50px 1fr 80px;
        padding: 0.85rem 1rem;
    }

    .lb-row-country {
        display: none;
    }

    .lb-row-avatar {
        font-size: 1.4rem;
        width: 35px;
        height: 35px;
    }

    .lb-row-name {
        font-size: 0.9rem;
    }

    .lb-row-title {
        display: none;
    }

    .lb-row-score {
        font-size: 0.95rem;
        padding: 0.25rem 0.5rem;
    }

    .lb-global-stats {
        gap: 0.75rem;
    }

    .lb-stat-item {
        padding: 1rem 0.75rem;
    }

    .lb-stat-value {
        font-size: 1.4rem;
    }

    .lb-stat-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .lb-world-container {
        padding: 0.75rem;
        padding-top: 55px;
    }

    /* Style navigateur pour mobile */
    .lb-browser-header {
        border-radius: 10px;
        margin-bottom: 0.75rem;
    }

    .lb-browser-bar {
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
    }

    .lb-browser-dots {
        gap: 3px;
    }

    .lb-dot {
        width: 8px;
        height: 8px;
    }

    .lb-title-icon {
        font-size: 1rem;
    }

    .lb-title-text {
        font-size: 0.85rem;
    }

    .lb-refresh-btn-mini {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        border-radius: 6px;
    }

    .lb-tab {
        padding: 0.6rem 0.3rem;
        gap: 0.25rem;
    }

    .lb-tab-icon {
        font-size: 0.9rem;
    }

    .lb-tab-text {
        font-size: 0.7rem;
    }

    .lb-tab-badge {
        font-size: 0.6rem;
        padding: 0.08rem 0.3rem;
    }

    /* Ancien header cache */
    .lb-world-header {
        display: none;
    }

    .lb-category-switcher {
        display: none;
    }

    .lb-games-section {
        padding: 0.9rem;
        border-radius: 14px;
    }

    .lb-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .lb-game-card {
        padding: 0.7rem 0.3rem;
        border-radius: 10px;
    }

    .lb-game-icon {
        font-size: 1.6rem;
    }

    .lb-game-name {
        font-size: 0.7rem;
    }

    .lb-controls-bar {
        padding: 0.9rem;
        border-radius: 12px;
    }

    .lb-my-rank-card {
        padding: 0.9rem 1rem;
        border-radius: 14px;
    }

    .lb-my-rank-card::after {
        font-size: 2.5rem;
    }

    .lb-myrank-icon {
        font-size: 1.8rem;
    }

    .lb-myrank-name {
        font-size: 1rem;
    }

    .lb-myrank-position {
        font-size: 1.4rem;
    }

    .lb-list-container {
        border-radius: 14px;
    }

    .lb-list-header {
        grid-template-columns: 45px 1fr 70px;
        padding: 0.8rem 0.9rem;
    }

    .lb-list-row {
        grid-template-columns: 45px 1fr 70px;
        padding: 0.75rem 0.9rem;
    }

    .lb-row-rank {
        font-size: 0.95rem;
        padding: 0.2rem 0.4rem;
    }

    .lb-row-avatar {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }

    .lb-row-name {
        font-size: 0.85rem;
    }

    .lb-row-score {
        font-size: 0.85rem;
        padding: 0.2rem 0.4rem;
    }

    .lb-list {
        max-height: none;
    }

    .lb-global-stats {
        gap: 0.5rem;
    }

    .lb-stat-item {
        padding: 0.9rem 0.5rem;
        border-radius: 12px;
    }

    .lb-stat-icon {
        font-size: 1.5rem;
    }

    .lb-stat-value {
        font-size: 1.2rem;
    }

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

/* ============================================================= */
/* === OPTIMISATIONS MOBILES AVANCEES - IPHONE & TOUS MOBILES === */
/* ============================================================= */

/* === VARIABLES CSS POUR MOBILE === */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --vh: 1vh;
}

/* === TOUCH SCROLLING FLUIDE SUR TOUTES LES PAGES === */
.screen {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.menu-wrapper,
.shop-wrapper,
.scores-mega-wrapper,
.achievements-wrapper,
.settings-wrapper,
.difficulty-wrapper,
.leaderboard-wrapper,
.titan-content,
.welcome-content-alpine,
.modal-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-y: auto;
    overflow-x: hidden;
}

/* === ANIMATION MEMORY - GRAND PUIS PETIT AU RETOURNEMENT === */
@keyframes memoryCardPop {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes memoryCardFlipMobile {
    0% {
        transform: scale(1) rotateY(0deg);
    }
    25% {
        transform: scale(1.2) rotateY(45deg);
    }
    50% {
        transform: scale(1.25) rotateY(90deg);
    }
    75% {
        transform: scale(1.15) rotateY(135deg);
    }
    100% {
        transform: scale(1) rotateY(180deg);
    }
}

@keyframes memoryCardMatch {
    0% {
        transform: scale(1) rotateY(180deg);
    }
    25% {
        transform: scale(1.2) rotateY(180deg);
    }
    50% {
        transform: scale(1.15) rotateY(180deg);
    }
    75% {
        transform: scale(1.1) rotateY(180deg);
    }
    100% {
        transform: scale(1) rotateY(180deg);
    }
}

/* Appliquer sur mobile seulement */
@media (max-width: 768px) and (pointer: coarse) {
    /* Animation tap sur carte memory */
    .memory-card:active:not(.flipped):not(.matched) {
        animation: memoryCardPop 0.3s ease forwards;
    }

    /* Animation flip mobile avec scale */
    .memory-card.flipped .memory-card-inner {
        animation: memoryCardFlipMobile 0.6s ease forwards;
    }

    /* Animation match avec bounce */
    .memory-card.matched .memory-card-inner {
        animation: memoryCardMatch 0.5s ease forwards;
    }

    /* Transition plus fluide */
    .memory-card-inner {
        transition: none;
    }
}

/* === IPHONE 12 PRO ET MOBILES SIMILAIRES (390px) === */
@media (max-width: 414px) and (min-width: 375px) {
    /* Optimisations iPhone 12/13/14 Pro */
    :root {
        --mobile-padding: 0.75rem;
        --mobile-gap: 0.6rem;
    }

    /* Container principal */
    .screen {
        padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
    }

    /* Menu avec safe area */
    .menu-wrapper {
        padding: var(--mobile-padding);
        padding-top: calc(var(--mobile-padding) + var(--safe-area-top));
        padding-bottom: calc(var(--mobile-padding) + var(--safe-area-bottom) + 60px);
    }

    /* Header Alpine optimise */
    .alpine-header {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .chalet-body {
        padding: 0.5rem 0.7rem;
    }

    .logo-text-alpine h1 {
        font-size: 1.1rem;
    }

    /* Info joueur */
    .player-info-alpine {
        gap: 0.4rem;
    }

    .player-avatar-alpine {
        width: 30px;
        height: 30px;
    }

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

    .crystals-badge-alpine {
        padding: 0.35rem 0.5rem;
    }

    .crystal-value {
        font-size: 0.95rem;
    }

    /* === CARTES DE JEUX - 2 COLONNES CENTREES === */
    .games-grid-alpine {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mobile-gap);
        padding: 0;
        width: 100%;
    }

    /* Toutes les cartes identiques sur iPhone */
    .game-card-alpine {
        width: 100%;
        min-height: 130px;
        height: 130px;
        grid-column: span 1 !important;
    }

    .game-card-alpine.game-card-large {
        grid-column: span 1 !important;
        min-height: 130px;
        height: 130px;
    }

    /* Contenu carte centre */
    .card-content-alpine {
        padding: 0.6rem 0.4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%;
    }

    .card-icon-wrapper {
        margin-bottom: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-bg-circle {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-bg-circle.large {
        width: 42px;
        height: 42px;
    }

    .card-icon-alpine {
        font-size: 1.6rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-title-alpine {
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        margin: 0;
    }

    /* Masquer decorations sur iPhone */
    .card-snow-cap,
    .card-frost-border,
    .card-desc-alpine,
    .card-stats-alpine,
    .card-ribbon {
        display: none;
    }

    /* Section titre compact */
    .section-header-alpine {
        margin: 0.4rem 0;
    }

    .section-title-alpine {
        font-size: 0.9rem;
    }

    .deco-line {
        width: 12px;
    }

    /* Footer boutons */
    .menu-footer-alpine {
        padding: 0.4rem 0;
        padding-bottom: calc(0.4rem + var(--safe-area-bottom));
    }

    .wooden-btn {
        padding: 0.5rem 0.7rem;
        min-width: 42px;
    }

    .btn-icon-alpine {
        font-size: 1.2rem;
    }

    /* Memory board iPhone */
    .memory-board {
        gap: 0.35rem;
        padding: 0.4rem;
    }

    .memory-board.grid-3 {
        grid-template-columns: repeat(3, minmax(75px, 100px));
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(60px, 80px));
    }

    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(48px, 65px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(40px, 55px));
    }

    /* Titan header compact */
    .titan-header {
        padding: 0.45rem;
        gap: 0.4rem;
    }

    .titan-name {
        font-size: 0.95rem;
    }

    .titan-logo {
        font-size: 1.3rem;
    }

    .btn-titan {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .titan-stats {
        gap: 0.25rem;
    }

    .titan-stat {
        min-width: 45px;
        padding: 0.3rem 0.35rem;
    }

    .stat-label {
        font-size: 0.45rem;
    }

    .titan-value {
        font-size: 0.85rem;
    }

    /* Shop compact */
    .shop-wrapper {
        padding: 0.5rem;
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .shop-item {
        padding: 0.55rem 0.4rem;
    }

    .item-icon {
        font-size: 1.5rem;
    }

    .item-name {
        font-size: 0.65rem;
    }

    /* Achievements compact */
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
    }

    .achievement-card {
        padding: 0.55rem;
    }

    .achievement-icon {
        font-size: 1.4rem;
    }

    .achievement-name {
        font-size: 0.7rem;
    }

    /* Difficulte compact */
    .difficulty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .difficulty-card {
        padding: 0.65rem;
    }

    .diff-icon {
        font-size: 1.5rem;
    }

    .difficulty-card h3 {
        font-size: 0.85rem;
    }

    /* Simon compact */
    .simon-board {
        gap: 6px;
    }

    .simon-btn {
        width: 65px;
        height: 65px;
    }

    .simon-btn span {
        font-size: 1.6rem;
    }

    /* Flocon compact */
    .flocon-board {
        gap: 2px;
    }

    .flocon-cell {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    /* Catch compact */
    .catch-arena {
        min-height: 300px;
    }

    .catch-basket {
        width: 60px;
        height: 48px;
    }

    /* Modal compact iPhone */
    .modal-content {
        padding: 1rem 0.8rem;
        margin: 0.4rem;
        max-width: calc(100vw - 0.8rem);
    }

    .modal-icon {
        font-size: 3rem;
    }

    .modal-title {
        font-size: 1.3rem;
    }

    .modal-stats {
        gap: 0.4rem;
    }

    .modal-stat {
        padding: 0.55rem;
    }

    .modal-actions {
        gap: 0.4rem;
    }
}

/* === PETITS IPHONES ET ANDROID (320px - 375px) === */
@media (max-width: 375px) {
    .games-grid-alpine {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
        width: 100%;
    }

    .game-card-alpine {
        min-height: 115px;
        height: 115px;
        grid-column: span 1 !important;
    }

    .game-card-alpine.game-card-large {
        min-height: 115px;
        height: 115px;
        grid-column: span 1 !important;
    }

    .card-content-alpine {
        padding: 0.45rem 0.3rem;
    }

    .icon-bg-circle,
    .icon-bg-circle.large {
        width: 36px;
        height: 36px;
    }

    .card-icon-alpine {
        font-size: 1.4rem;
    }

    .card-title-alpine {
        font-size: 0.65rem;
    }

    /* Memory plus compact */
    .memory-board.grid-3 {
        grid-template-columns: repeat(3, minmax(65px, 90px));
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(52px, 72px));
    }

    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(40px, 58px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(35px, 48px));
    }

    /* Simon ultra compact */
    .simon-btn {
        width: 55px;
        height: 55px;
    }

    .simon-btn span {
        font-size: 1.4rem;
    }

    /* Flocon ultra compact */
    .flocon-cell {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}

/* === GESTION NOTCH ET DYNAMIC ISLAND (iPhone 14 Pro+) === */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 414px) {
        .screen {
            padding-top: env(safe-area-inset-top);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .titan-header {
            padding-top: calc(0.5rem + env(safe-area-inset-top));
        }

        .menu-wrapper {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }

        .modal-content {
            margin-bottom: env(safe-area-inset-bottom);
        }

        .titan-footer {
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        }

        /* Welcome avec safe area */
        .welcome-content-alpine {
            padding-top: calc(1rem + env(safe-area-inset-top));
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* === ORIENTATION PORTRAIT MOBILE OPTIMISE === */
@media (max-width: 500px) and (orientation: portrait) {
    /* S'assurer que tout est scrollable */
    .screen {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        overflow-y: auto;
    }

    /* Pages de jeu scrollable */
    .titan-content {
        max-height: none;
        overflow-y: auto;
        padding-bottom: 80px;
    }

    /* Quiz scrollable */
    .quiz-container {
        overflow-y: auto;
        max-height: none;
    }

    /* Scores scrollable */
    .scores-mega-wrapper {
        max-height: none;
        overflow-y: auto;
    }

    /* Shop scrollable */
    .shop-wrapper {
        max-height: none;
        overflow-y: auto;
    }

    /* Achievements scrollable */
    .achievements-wrapper {
        max-height: none;
        overflow-y: auto;
    }

    /* Leaderboard scrollable */
    .leaderboard-wrapper {
        max-height: none;
        overflow-y: auto;
    }
}

/* === TACTILE - TAILLES MINIMALES POUR DOIGTS === */
@media (pointer: coarse) {
    /* Taille minimale 44px pour tous les elements cliquables (Apple HIG) */
    button,
    .game-card-alpine,
    .difficulty-card,
    .shop-item,
    .achievement-card,
    .simon-btn,
    .flocon-cell,
    .memory-card,
    .quiz-answer,
    .titan-quiz-answer,
    .wooden-btn,
    .game-tab,
    .diff-tab,
    .shop-cat,
    .btn-back,
    .btn-titan {
        min-height: 44px;
        min-width: 44px;
    }

    /* Espacement suffisant entre elements */
    .games-grid-alpine {
        gap: 0.6rem;
    }

    .difficulty-grid {
        gap: 0.6rem;
    }

    .shop-grid {
        gap: 0.6rem;
    }

    /* Zone de tap plus grande sur cartes */
    .game-card-alpine {
        padding: 0.3rem;
    }

    /* Boutons plus faciles a toucher */
    .wooden-btn {
        min-height: 48px;
    }

    /* Feedback visuel au touch */
    .game-card-alpine:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

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

    .difficulty-card:active {
        transform: scale(0.97);
    }

    .shop-item:active {
        transform: scale(0.97);
    }

    /* Memory card feedback */
    .memory-card:active:not(.flipped):not(.matched) {
        transform: scale(1.05);
        z-index: 10;
    }
}

/* === ANIMATION ENTREE CARTES DE JEUX MOBILE === */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    .game-card-alpine {
        animation: cardSlideIn 0.4s ease forwards;
    }

    .game-card-alpine:nth-child(1) { animation-delay: 0s; }
    .game-card-alpine:nth-child(2) { animation-delay: 0.05s; }
    .game-card-alpine:nth-child(3) { animation-delay: 0.1s; }
    .game-card-alpine:nth-child(4) { animation-delay: 0.15s; }
    .game-card-alpine:nth-child(5) { animation-delay: 0.2s; }
    .game-card-alpine:nth-child(6) { animation-delay: 0.25s; }
}

/* === ACCUEIL MOBILE OPTIMISE === */
@media (max-width: 414px) {
    .welcome-content-alpine {
        padding: 1rem 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    .mascot-container {
        margin-bottom: 1rem;
    }

    .mascot-emoji-large {
        font-size: 3.5rem;
    }

    .mascot-glow-ring {
        width: 90px;
        height: 90px;
    }

    .title-word {
        font-size: 1.9rem;
    }

    .welcome-tagline {
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
    }

    .welcome-description {
        margin-bottom: 1rem;
    }

    .welcome-description p {
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }

    .welcome-features {
        gap: 0.7rem;
        margin-bottom: 1.2rem;
    }

    .feature-item {
        flex: 0 0 auto;
    }

    .feature-icon-wrap {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .feature-label {
        font-size: 0.7rem;
    }

    .welcome-start-btn {
        padding: 0.85rem 1.3rem;
        font-size: 0.9rem;
    }

    .welcome-hint {
        font-size: 0.7rem;
        margin-top: 0.6rem;
    }

    .welcome-footer {
        font-size: 0.7rem;
        margin-top: 1rem;
    }
}

/* === PERFORMANCE MOBILE - REDUIRE ANIMATIONS === */
@media (prefers-reduced-motion: reduce) {
    .memory-card-inner,
    .game-card-alpine,
    .difficulty-card,
    .shop-item,
    .achievement-card {
        animation: none !important;
        transition: none !important;
    }

    .memory-card.flipped .memory-card-inner {
        transform: rotateY(180deg);
    }
}

/* === FIX OVERFLOW MOBILE === */
@media (max-width: 600px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .screen {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* === HIGH CONTRAST POUR ACCESSIBILITE === */
@media (prefers-contrast: high) {
    .card-title-alpine {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }

    .game-card-alpine {
        border-width: 2px;
    }

    .titan-stat {
        border-width: 2px;
    }
}

/* === UTILISATION DE LA VARIABLE --vh (definie par JS) === */
.screen {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

.welcome-content-alpine {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Classes JS pour appareils specifiques */
html.touch-device .game-card-alpine:hover {
    transform: none;
}

html.touch-device .memory-card:hover:not(.flipped):not(.matched) {
    transform: none;
}

html.ios-device .screen {
    min-height: -webkit-fill-available;
}

html.iphone-notch .titan-header {
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
}

html.iphone-notch .menu-wrapper {
    padding-top: calc(0.8rem + env(safe-area-inset-top, 0px));
}

html.iphone-notch .welcome-content-alpine {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

/* Classes taille ecran */
html.screen-xs .games-grid-alpine {
    gap: 0.4rem;
}

html.screen-xs .game-card-alpine {
    min-height: 125px;
}

html.screen-sm .games-grid-alpine {
    gap: 0.5rem;
}

html.screen-sm .game-card-alpine {
    min-height: 140px;
}

/* ============================================================= */
/* === OPTIMISATIONS MOBILES MINI-JEUX === */
/* ============================================================= */

/* === ECRAN SELECTION DIFFICULTE MOBILE === */
@media (max-width: 600px) {
    .difficulty-wrapper {
        padding: 1rem 0.6rem;
        padding-top: calc(3rem + env(safe-area-inset-top, 0px));
    }

    .section-title {
        font-size: 1.4rem;
        margin-bottom: 0.3rem;
    }

    .section-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    /* Grille 2x2 pour les difficultés */
    .difficulty-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0;
    }

    .difficulty-card {
        padding: 0.8rem 0.5rem;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .diff-icon {
        font-size: 1.6rem;
        margin-bottom: 0.3rem;
    }

    .difficulty-card h3 {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }

    .diff-info {
        display: none;
    }

    .diff-label {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }

    /* Bouton retour */
    .btn-back {
        top: 0.5rem;
        left: 0.5rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        z-index: 100;
    }
}

/* === TITAN HEADER MOBILE (tous les jeux) === */
@media (max-width: 600px) {
    .titan-header {
        padding: 0.5rem 0.4rem;
        gap: 0.4rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .titan-header .btn-titan {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .titan-info {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    .titan-logo {
        font-size: 1.2rem;
    }

    .titan-name {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Stats en ligne compacte */
    .titan-stats {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        order: 3;
    }

    .titan-stat {
        min-width: 55px;
        padding: 0.25rem 0.35rem;
        flex: 1;
        max-width: 80px;
    }

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

    .stat-label {
        font-size: 0.45rem;
        display: block;
    }

    .titan-value {
        font-size: 0.8rem;
    }
}

/* === TITAN OVERLAY/CONTENT MOBILE (écran de démarrage) === */
@media (max-width: 600px) {
    .titan-overlay,
    .game-overlay {
        padding: 0.5rem;
    }

    .titan-content,
    .overlay-content {
        padding: 0.8rem;
        max-width: 100%;
        width: 100%;
    }

    .titan-icon,
    .overlay-icon {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .titan-title {
        font-size: 1.3rem;
        margin-bottom: 0.4rem;
    }

    .titan-desc {
        font-size: 0.75rem;
        margin-bottom: 0.8rem;
        line-height: 1.3;
    }

    /* Section difficulté dans overlay */
    .titan-difficulty-section {
        margin-bottom: 0.8rem;
    }

    .difficulty-title {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    /* Grille difficultés 2x2 dans overlay */
    .titan-difficulties {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
        max-width: 100%;
    }

    .titan-diff-btn {
        padding: 0.5rem 0.3rem;
        min-height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
    }

    .titan-diff-btn .diff-icon {
        font-size: 1.3rem;
    }

    .titan-diff-btn .diff-name {
        font-size: 0.7rem;
        font-weight: 700;
    }

    .titan-diff-btn .diff-desc {
        font-size: 0.5rem;
        opacity: 0.8;
        text-align: center;
        line-height: 1.2;
    }

    /* Modes de jeu */
    .titan-game-modes {
        margin-bottom: 0.6rem;
    }

    .titan-modes {
        display: flex;
        gap: 0.3rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .titan-mode-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.65rem;
    }

    .titan-mode-btn .mode-icon {
        font-size: 1rem;
    }

    .titan-mode-btn .mode-name {
        font-size: 0.6rem;
    }

    /* Categories et règles */
    .titan-categories,
    .titan-rules,
    .titan-powerups,
    .titan-flocon-types {
        margin-bottom: 0.6rem;
    }

    .cat-tag {
        font-size: 0.55rem;
        padding: 0.2rem 0.4rem;
    }

    .rule {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .powerup-list {
        gap: 0.3rem;
    }

    .powerup-item {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }

    .flocon-type-list {
        gap: 0.3rem;
    }

    .flocon-type {
        font-size: 1.2rem;
    }

    /* Hint */
    .titan-hint,
    .hint {
        font-size: 0.65rem;
        margin-bottom: 0.6rem;
    }

    .titan-hint kbd,
    .hint kbd {
        padding: 0.15rem 0.3rem;
        font-size: 0.6rem;
    }

    /* Bouton play */
    .titan-play,
    .btn-play {
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }
}

/* === TITAN FOOTER MOBILE === */
@media (max-width: 600px) {
    .titan-footer {
        padding: 0.4rem 0.3rem;
        gap: 0.3rem;
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }

    .titan-stat-mini {
        min-width: 60px;
        padding: 0.25rem 0.35rem;
        flex: 1;
        max-width: 85px;
    }

    .mini-icon {
        font-size: 0.9rem;
    }

    .mini-label {
        font-size: 0.45rem;
    }

    .mini-value {
        font-size: 0.75rem;
    }
}

/* === GAME WRAPPER MOBILE === */
@media (max-width: 600px) {
    .game-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .titan-game {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

/* === JEU MEMORY MOBILE === */
@media (max-width: 600px) {
    .memory-board {
        gap: 0.3rem;
        padding: 0.4rem;
        flex: 1;
        display: grid;
        align-content: center;
    }

    .memory-board.grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .memory-board.grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .memory-card {
        aspect-ratio: 3/4;
        max-height: none;
        border-radius: 6px;
    }

    .memory-card-front,
    .memory-card-back {
        border-radius: 6px;
        border-width: 2px;
    }

    .memory-card-front {
        font-size: 1.2rem;
    }

    .progress-bar {
        margin: 0.5rem;
        height: 6px;
    }

    /* Header Memory simplifié */
    .game-header {
        padding: 0.4rem 0.5rem;
        gap: 0.4rem;
    }

    .game-header .btn-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .game-info .game-logo {
        font-size: 1.1rem;
    }

    .game-info .game-name {
        font-size: 0.8rem;
    }

    .game-stats {
        gap: 0.3rem;
    }

    .game-stats .stat {
        padding: 0.2rem 0.4rem;
    }

    .game-stats .stat-icon {
        font-size: 0.8rem;
    }

    .game-stats .stat-value {
        font-size: 0.75rem;
    }
}

/* === JEU CLICKER MOBILE === */
@media (max-width: 600px) {
    .clicker-arena {
        flex: 1;
        min-height: 250px;
        position: relative;
    }

    .clicker-game-area {
        width: 100%;
        height: 100%;
    }

    .clicker-marmotte {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }

    /* Animation clic mobile */
    .clicker-marmotte:active {
        transform: scale(0.85);
    }
}

/* === JEU QUIZ MOBILE === */
@media (max-width: 600px) {
    .quiz-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0.4rem;
    }

    .quiz-card,
    .titan-quiz-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0.8rem;
        margin: 0;
    }

    .quiz-timer-bar,
    .titan-timer-bar {
        height: 4px;
        margin-bottom: 0.5rem;
    }

    .quiz-category {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        margin-bottom: 0.4rem;
    }

    .quiz-number,
    .titan-quiz-number {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
    }

    .quiz-question,
    .titan-quiz-question {
        font-size: 1rem;
        margin-bottom: 0.8rem;
        line-height: 1.3;
        flex: 0;
    }

    .quiz-answers,
    .titan-quiz-answers {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        flex: 1;
        justify-content: center;
    }

    .quiz-answer,
    .titan-quiz-answer {
        padding: 0.7rem 0.8rem;
        font-size: 0.8rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* === JEU CATCH MOBILE === */
@media (max-width: 600px) {
    .catch-arena {
        flex: 1;
        min-height: 280px;
        position: relative;
        touch-action: none;
    }

    .catch-basket,
    .titan-basket {
        width: 60px;
        height: 50px;
        bottom: 10px;
    }

    .catch-basket .basket {
        font-size: 2.2rem;
    }

    .catch-basket .basket-marmotte {
        font-size: 0.9rem;
    }

    /* Items qui tombent */
    .catch-item {
        font-size: 1.5rem;
    }
}

/* === JEU SIMON MOBILE === */
@media (max-width: 600px) {
    .simon-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.3rem;
    }

    .simon-game-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .simon-board,
    .titan-board {
        display: grid !important;
        grid-template-columns: repeat(2, auto) !important;
        gap: 2px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-content: center !important;
    }

    /* Mode 6 boutons */
    .simon-board.mode-6 {
        grid-template-columns: repeat(3, auto) !important;
        gap: 2px !important;
    }

    /* Mode 8 boutons */
    .simon-board.mode-8 {
        grid-template-columns: repeat(4, auto) !important;
        gap: 2px !important;
    }

    .simon-btn,
    .titan-btn {
        width: 90px !important;
        height: 90px !important;
        border-width: 2px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .simon-btn span {
        font-size: 2rem;
    }

    .simon-board.mode-6 .simon-btn {
        width: 80px !important;
        height: 80px !important;
    }

    .simon-board.mode-6 .simon-btn span {
        font-size: 1.8rem;
    }

    .simon-board.mode-8 .simon-btn {
        width: 68px !important;
        height: 68px !important;
    }

    .simon-board.mode-8 .simon-btn span {
        font-size: 1.5rem;
    }

    /* Voyant plus petit sur mobile */
    .simon-btn::before {
        top: 4px;
        right: 4px;
        width: 8px;
        height: 8px;
        border-width: 1px;
    }

    /* Progress bar */
    .simon-progress {
        width: 100%;
        max-width: 250px;
    }

    .simon-progress .progress-label {
        font-size: 0.65rem;
    }

    .simon-progress .progress-bar {
        height: 6px;
    }

    /* Mascotte */
    .simon-mascot-zone {
        margin-top: 0.5rem;
    }

    .simon-marmotte {
        font-size: 2rem;
    }

    .simon-status {
        font-size: 0.75rem;
    }
}

/* === JEU FLOCON MATCH MOBILE === */
@media (max-width: 600px) {
    .flocon-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0.4rem;
    }

    .flocon-board,
    .titan-flocon-board {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 2px;
        padding: 0.3rem;
        align-content: center;
    }

    .flocon-cell {
        width: 100%;
        aspect-ratio: 1;
        font-size: 1.1rem;
        border-radius: 4px;
    }

    /* Animation swap mobile */
    .flocon-cell:active {
        transform: scale(0.9);
    }

    .flocon-cell.selected {
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
    }
}

/* === PETITS MOBILES (480px et moins) === */
@media (max-width: 480px) {
    /* Difficulty */
    .difficulty-wrapper {
        padding: 0.8rem 0.4rem;
        padding-top: calc(2.5rem + env(safe-area-inset-top, 0px));
    }

    .difficulty-card {
        padding: 0.6rem 0.4rem;
        min-height: 85px;
    }

    .diff-icon {
        font-size: 1.4rem;
    }

    .difficulty-card h3 {
        font-size: 0.75rem;
    }

    /* Titan header */
    .titan-header {
        padding: 0.4rem 0.3rem;
    }

    .titan-name {
        font-size: 0.75rem;
    }

    .titan-stat {
        min-width: 50px;
        padding: 0.2rem 0.3rem;
    }

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

    /* Overlay */
    .titan-icon {
        font-size: 2rem;
    }

    .titan-title {
        font-size: 1.1rem;
    }

    .titan-desc {
        font-size: 0.7rem;
    }

    .titan-diff-btn {
        padding: 0.4rem 0.25rem;
        min-height: 60px;
    }

    .titan-diff-btn .diff-icon {
        font-size: 1.1rem;
    }

    .titan-diff-btn .diff-name {
        font-size: 0.6rem;
    }

    .titan-diff-btn .diff-desc {
        font-size: 0.45rem;
    }

    /* Footer */
    .titan-stat-mini {
        min-width: 50px;
        padding: 0.2rem 0.25rem;
    }

    .mini-value {
        font-size: 0.65rem;
    }

    /* Memory */
    .memory-board {
        gap: 0.2rem;
    }

    /* Simon */
    .simon-btn {
        width: 60px;
        height: 60px;
    }

    .simon-btn span {
        font-size: 1.4rem;
    }

    /* Flocon */
    .flocon-cell {
        font-size: 0.95rem;
    }

    /* Quiz */
    .quiz-question {
        font-size: 0.9rem;
    }

    .quiz-answer {
        padding: 0.6rem;
        font-size: 0.75rem;
    }
}

/* === TRES PETITS MOBILES (375px et moins) === */
@media (max-width: 375px) {
    .titan-header {
        padding: 0.35rem 0.25rem;
    }

    .titan-name {
        font-size: 0.7rem;
    }

    .titan-logo {
        font-size: 1rem;
    }

    .titan-stat {
        min-width: 45px;
    }

    .titan-difficulties {
        gap: 0.3rem;
    }

    .titan-diff-btn {
        min-height: 55px;
        padding: 0.35rem 0.2rem;
    }

    .simon-btn {
        width: 55px;
        height: 55px;
    }

    .flocon-cell {
        font-size: 0.85rem;
    }
}

/* === IPHONE 12 PRO SPECIFIQUE (390px) === */
@media (max-width: 414px) and (min-width: 375px) {
    /* Safe area pour jeux */
    .titan-header {
        padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    }

    .titan-footer {
        padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }

    /* Difficultés optimisées */
    .titan-difficulties {
        gap: 0.35rem;
    }

    .titan-diff-btn {
        min-height: 65px;
    }

    /* Simon optimisé */
    .simon-btn {
        width: 65px;
        height: 65px;
    }

    /* Memory optimisé */
    .memory-board.grid-3 {
        grid-template-columns: repeat(3, minmax(80px, 110px));
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(65px, 85px));
    }

    .memory-board.grid-5 {
        grid-template-columns: repeat(5, minmax(52px, 70px));
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(45px, 58px));
    }
}

/* === ORIENTATION PAYSAGE JEUX === */
@media (max-height: 500px) and (orientation: landscape) {
    .titan-header {
        padding: 0.3rem 0.4rem;
    }

    .titan-stats {
        flex-wrap: nowrap;
    }

    .titan-overlay .titan-content {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 90vw;
        justify-content: center;
        gap: 0.5rem;
    }

    .titan-difficulty-section {
        width: 45%;
    }

    .titan-icon {
        font-size: 1.5rem;
    }

    .titan-title {
        font-size: 1rem;
    }

    .titan-footer {
        padding: 0.3rem;
    }

    /* Memory en paysage */
    .memory-board {
        max-height: 60vh;
    }

    /* Simon en paysage */
    .simon-btn {
        width: 50px;
        height: 50px;
    }

    /* Flocon en paysage */
    .flocon-board {
        max-height: 55vh;
    }
}

/* === TOUCH FEEDBACK POUR TOUS LES JEUX === */
@media (pointer: coarse) {
    .titan-diff-btn:active {
        transform: scale(0.95);
        opacity: 0.9;
    }

    .difficulty-card:active {
        transform: scale(0.97);
    }

    .simon-btn:active {
        transform: scale(0.9);
    }

    .flocon-cell:active {
        transform: scale(0.85);
    }

    .quiz-answer:active,
    .titan-quiz-answer:active {
        transform: scale(0.98);
    }

    .titan-play:active,
    .btn-play:active {
        transform: scale(0.95);
    }

    /* Taille minimale tactile */
    .titan-diff-btn,
    .difficulty-card,
    .simon-btn,
    .flocon-cell,
    .quiz-answer {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================= */
/* === MEMORY TITAN STYLES === */
/* ============================================================= */

/* Container Memory Titan */
.memory-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Preview des activités */
.titan-memory-preview {
    margin-bottom: 1rem;
}

.memory-preview-list {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.preview-item {
    font-size: 1.8rem;
    background: rgba(139, 92, 246, 0.2);
    padding: 0.5rem;
    border-radius: 10px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    transition: transform 0.3s ease;
}

.preview-item:hover {
    transform: scale(1.1);
}

/* Progress bar Memory */
.memory-progress-bar {
    margin: 0.5rem 1rem;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.memory-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* === MOBILE MEMORY TITAN === */
@media (max-width: 600px) {
    .memory-container {
        padding: 0.3rem;
    }

    .titan-memory-preview {
        margin-bottom: 0.6rem;
    }

    .memory-preview-list {
        gap: 0.4rem;
    }

    .preview-item {
        font-size: 1.3rem;
        padding: 0.3rem;
        border-radius: 6px;
    }

    .memory-progress-bar {
        margin: 0.3rem 0.5rem;
        height: 5px;
    }
}

@media (max-width: 480px) {
    .preview-item {
        font-size: 1.1rem;
        padding: 0.25rem;
    }

    .memory-preview-list {
        gap: 0.3rem;
    }
}

@media (max-width: 375px) {
    .preview-item {
        font-size: 1rem;
        padding: 0.2rem;
    }
}

/* ============================================================= */
/* === CORRECTIONS OVERLAYS FLOCON & CATCH MOBILE === */
/* ============================================================= */

/* === OVERLAY SCROLLABLE SUR MOBILE === */
@media (max-width: 600px) {
    .titan-overlay,
    .game-overlay {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem;
    }

    .titan-content,
    .overlay-content {
        max-height: none;
        overflow: visible;
    }

    /* Réduire les espacements */
    .titan-difficulty-section {
        margin-bottom: 0.5rem;
    }

    .difficulty-title {
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
    }

    /* === FLOCON - TYPES DE FLOCONS COMPACT === */
    .titan-flocon-types {
        margin-bottom: 0.4rem;
    }

    .titan-flocon-types .difficulty-title {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }

    .flocon-type-list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.25rem;
        overflow-x: auto;
        padding: 0.2rem 0;
    }

    .flocon-type {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* === CATCH - POWERUPS COMPACT === */
    .titan-powerups {
        margin-bottom: 0.4rem;
    }

    .titan-powerups .difficulty-title {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }

    .powerup-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.2rem;
    }

    .powerup-item {
        font-size: 0.55rem;
        padding: 0.2rem 0.3rem;
        white-space: nowrap;
    }

    .powerup-item span {
        font-size: 0.8rem;
    }

    /* Hint plus compact */
    .titan-hint,
    .hint {
        font-size: 0.6rem;
        margin-bottom: 0.4rem;
        margin-top: 0.2rem;
    }

    /* Bouton play plus compact */
    .titan-play,
    .btn-play {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
        margin-top: 0.3rem;
    }
}

/* === 480px - ENCORE PLUS COMPACT === */
@media (max-width: 480px) {
    .titan-icon,
    .overlay-icon {
        font-size: 2rem;
        margin-bottom: 0.3rem;
    }

    .titan-title {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .titan-desc {
        font-size: 0.65rem;
        margin-bottom: 0.5rem;
        line-height: 1.25;
    }

    /* Difficultés très compactes */
    .titan-diff-btn {
        padding: 0.35rem 0.2rem;
        min-height: 55px;
    }

    .titan-diff-btn .diff-icon {
        font-size: 1rem;
    }

    .titan-diff-btn .diff-name {
        font-size: 0.55rem;
    }

    .titan-diff-btn .diff-desc {
        font-size: 0.4rem;
        line-height: 1.1;
    }

    /* Flocon types */
    .flocon-type {
        font-size: 0.95rem;
    }

    /* Powerups */
    .powerup-item {
        font-size: 0.5rem;
        padding: 0.15rem 0.25rem;
    }

    .powerup-item span {
        font-size: 0.7rem;
    }

    /* Bouton */
    .titan-play {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }

    /* Footer */
    .titan-footer {
        padding: 0.3rem 0.2rem;
        gap: 0.2rem;
    }

    .titan-stat-mini {
        min-width: 50px;
        padding: 0.2rem 0.2rem;
    }

    .mini-icon {
        font-size: 0.8rem;
    }

    .mini-label {
        font-size: 0.4rem;
    }

    .mini-value {
        font-size: 0.6rem;
    }
}

/* === 375px - ULTRA COMPACT === */
@media (max-width: 375px) {
    .titan-icon {
        font-size: 1.8rem;
        margin-bottom: 0.2rem;
    }

    .titan-title {
        font-size: 1rem;
    }

    .titan-desc {
        font-size: 0.6rem;
        margin-bottom: 0.4rem;
    }

    .titan-difficulty-section {
        margin-bottom: 0.4rem;
    }

    .titan-difficulties {
        gap: 0.25rem;
    }

    .titan-diff-btn {
        min-height: 50px;
        padding: 0.3rem 0.15rem;
    }

    .titan-diff-btn .diff-icon {
        font-size: 0.9rem;
    }

    .titan-diff-btn .diff-name {
        font-size: 0.5rem;
    }

    .titan-diff-btn .diff-desc {
        font-size: 0.35rem;
    }

    /* Masquer les sections optionnelles sur très petit écran */
    .titan-flocon-types,
    .titan-powerups,
    .titan-categories,
    .titan-rules {
        display: none;
    }

    .titan-hint {
        font-size: 0.55rem;
        margin: 0.3rem 0;
    }

    .titan-play {
        padding: 0.5rem 0.7rem;
        font-size: 0.7rem;
    }

    /* Footer ultra compact */
    .titan-stat-mini {
        min-width: 45px;
        padding: 0.15rem;
    }

    .mini-label {
        font-size: 0.35rem;
    }

    .mini-value {
        font-size: 0.55rem;
    }
}

/* === IPHONE 12 PRO (390px) - OPTIMISE === */
@media (max-width: 414px) and (min-width: 376px) {
    .titan-flocon-types,
    .titan-powerups {
        margin-bottom: 0.35rem;
    }

    .flocon-type-list {
        gap: 0.2rem;
    }

    .flocon-type {
        font-size: 1rem;
    }

    .powerup-list {
        gap: 0.15rem;
    }

    .powerup-item {
        font-size: 0.5rem;
    }

    .titan-hint {
        margin: 0.25rem 0 0.35rem 0;
    }
}

/* ============================================================= */
/* === MEMORY - CARTE AGRANDIE AU RETOURNEMENT (MOBILE) === */
/* ============================================================= */

/* Overlay pour assombrir le fond */
.memory-zoom-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.memory-zoom-overlay.active {
    display: flex;
    opacity: 1;
}

/* Carte zoomée au centre */
.memory-zoom-card {
    width: 200px;
    height: 280px;
    perspective: 1000px;
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.memory-zoom-overlay.active .memory-zoom-card {
    transform: scale(1);
    opacity: 1;
}

.memory-zoom-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-zoom-card.flipped .memory-zoom-card-inner {
    transform: rotateY(180deg);
}

.memory-zoom-card-front,
.memory-zoom-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.3);
}

.memory-zoom-card-front {
    background: linear-gradient(145deg, #2d2654, #1a1633);
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
}

.memory-zoom-card-back {
    background: linear-gradient(145deg, #1e1b4b, #312e81);
    transform: rotateY(180deg);
    padding: 15px;
}

.memory-zoom-card-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

/* Nom de l'activité sous la carte */
.memory-zoom-name {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}

.memory-zoom-overlay.active .memory-zoom-name {
    opacity: 1;
}

/* Indicateur "Touche pour fermer" */
.memory-zoom-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-align: center;
}

/* Animation de brillance sur la carte */
@keyframes cardShine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.memory-zoom-card-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: cardShine 2s ease-in-out infinite;
    border-radius: 12px;
    pointer-events: none;
}

/* === RESPONSIVE ZOOM CARD === */
@media (max-width: 480px) {
    .memory-zoom-card {
        width: 180px;
        height: 250px;
    }

    .memory-zoom-card-front {
        font-size: 3.5rem;
    }

    .memory-zoom-name {
        font-size: 1rem;
        bottom: -45px;
    }
}

@media (max-width: 375px) {
    .memory-zoom-card {
        width: 160px;
        height: 220px;
    }

    .memory-zoom-card-front {
        font-size: 3rem;
    }

    .memory-zoom-name {
        font-size: 0.9rem;
        bottom: -40px;
    }

    .memory-zoom-hint {
        font-size: 0.7rem;
        bottom: 20px;
    }
}

/* =====================================================
   STYLES PAC-MAN GAME
   ===================================================== */

/* === PAC-MAN GAME WRAPPER === */
.pacman-game {
    background: linear-gradient(180deg, #0a0a1a 0%, #1a1040 30%, #0f1729 70%, #0a0a1a 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pacman-game::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(0, 51, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* === PAC-MAN HEADER === */
.pacman-header {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 3px solid rgba(255, 255, 0, 0.4);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.pacman-header.hidden {
    display: none;
}

.btn-pacman {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.3), rgba(255, 200, 0, 0.1));
    border: 2px solid rgba(255, 255, 0, 0.5);
    color: #ffff00;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-pacman:hover {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.5), rgba(255, 200, 0, 0.3));
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.5);
}

.pacman-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pacman-logo {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.8));
    animation: pacmanPulse 2s ease-in-out infinite;
}

.pacman-name {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffff00, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 255, 0, 0.5);
}

@keyframes pacmanPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(255, 255, 0, 1)); }
}

/* === PAC-MAN ARENA === */
.pacman-arena {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: calc(100vh - 80px);
}

/* === PAC-MAN OVERLAY === */
.pacman-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 30, 0.95) 0%, rgba(0, 0, 20, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pacman-content {
    position: relative;
    max-width: 500px;
    text-align: center;
    padding: 2rem;
}

.pacman-icon {
    font-size: 6rem;
    margin-bottom: 1.5rem;
    display: block;
}

.pacman-icon.pulse {
    animation: pacmanIconPulse 2s ease-in-out infinite;
}

@keyframes pacmanIconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.pacman-title {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffff00, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: 0 0 40px rgba(255, 255, 0, 0.5);
}

.pacman-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* === PAC-MAN GHOSTS DISPLAY === */
.pacman-ghosts-display {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ghost-icon {
    font-size: 2.5rem;
    animation: ghostFloat 2s ease-in-out infinite;
}

.ghost-icon:nth-child(1) { animation-delay: 0s; }
.ghost-icon:nth-child(2) { animation-delay: 0.2s; }
.ghost-icon:nth-child(3) { animation-delay: 0.4s; }
.ghost-icon:nth-child(4) { animation-delay: 0.6s; }

@keyframes ghostFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* === PAC-MAN CONTROLS INFO === */
.pacman-controls-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.control-hint {
    background: rgba(30, 27, 75, 0.6);
    border: 1px solid rgba(255, 255, 0, 0.3);
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.control-key {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffff00;
    font-family: monospace;
}

.control-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* === PAC-MAN PLAY BUTTON === */
.pacman-play {
    position: relative;
    background: linear-gradient(135deg, #ffff00, #ffd700);
    border: none;
    color: #000;
    padding: 1.2rem 3rem;
    font-size: 1.3rem;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pacman-play::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: pacmanShine 2s infinite;
}

@keyframes pacmanShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.pacman-play:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(255, 255, 0, 0.5);
}

/* === PAC-MAN IFRAME === */
.pacman-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.pacman-iframe.hidden {
    display: none;
}

/* === PAC-MAN RESPONSIVE === */
@media (max-width: 768px) {
    .pacman-header {
        padding: 0.8rem 1rem;
    }

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

    .pacman-logo {
        font-size: 2rem;
    }

    .pacman-title {
        font-size: 2.2rem;
    }

    .pacman-desc {
        font-size: 1rem;
    }

    .pacman-controls-info {
        gap: 1rem;
    }

    .control-hint {
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 480px) {
    .pacman-header {
        padding: 0.6rem 0.8rem;
    }

    .pacman-name {
        font-size: 1.2rem;
    }

    .pacman-logo {
        font-size: 1.8rem;
    }

    .pacman-title {
        font-size: 1.8rem;
    }

    .pacman-icon {
        font-size: 4rem;
    }

    .pacman-desc {
        font-size: 0.9rem;
    }

    .pacman-play {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

/* === EXTERNAL GAME OVERLAY (jeux arcade/puzzle) === */
.external-game-overlay,
.arcade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999;
    display: none;
    flex-direction: column;
}

.external-game-overlay.active,
.arcade-overlay.active {
    display: flex;
}

.external-close-btn,
.arcade-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.external-close-btn:hover,
.arcade-close-btn:hover {
    background: rgba(239, 68, 68, 0.8);
    border-color: #ef4444;
    transform: scale(1.1);
}

#external-game-iframe,
#arcade-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* === JEUX ARCADE & PUZZLE - CANVAS & GRILLES === */
.game-canvas {
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    background: #1a1a2e;
    max-width: 100%;
}

.pong-arena, .invaders-arena, .breakout-arena, .flappy-arena {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    position: relative;
    flex: 1;
}

.game2048-arena, .taquin-arena, .sudoku-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    position: relative;
    flex: 1;
}

/* Overlays des jeux arcade/puzzle - s'assurer qu'ils couvrent bien l'arena */
.pong-arena .game-overlay,
.invaders-arena .game-overlay,
.breakout-arena .game-overlay,
.flappy-arena .game-overlay,
.game2048-arena .game-overlay,
.taquin-arena .game-overlay,
.sudoku-arena .game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.game2048-grid, .taquin-grid {
    margin: 0 auto;
}

.sudoku-grid {
    margin: 0 auto;
    max-width: 320px;
}

.sudoku-numpad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 15px;
    padding: 10px;
}

.sudoku-num {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(145deg, #a855f7, #7c3aed);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
}

.sudoku-num:hover {
    transform: scale(1.1);
}

.sudoku-num:active {
    transform: scale(0.95);
}

.sudoku-erase {
    background: linear-gradient(145deg, #ef4444, #dc2626);
}

@media (max-width: 480px) {
    .sudoku-num {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ============================================================= */
/* ============ FIX RESPONSIVE GLOBAL - TOUS MOBILES =========== */
/* ============================================================= */

/* === FIX ECRAN LEADERBOARD - SCROLL COMPLET === */
#screen-leaderboard {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

#screen-leaderboard .lb-world-container {
    width: 100%;
    min-height: 100%;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px));
}

/* Bouton retour leaderboard fixe en haut */
#screen-leaderboard .btn-back {
    position: fixed;
    top: env(safe-area-inset-top, 10px);
    left: env(safe-area-inset-left, 10px);
    z-index: 100;
    background: rgba(20, 20, 35, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    padding: 0.6rem 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* === FIX POUR TOUS LES ECRANS AVEC CONTENU LONG === */
#screen-scores,
#screen-achievements,
#screen-settings,
#screen-shop {
    align-items: center !important;
    justify-content: flex-start !important;
}

/* === RESPONSIVE 768px - TABLETTES === */
@media (max-width: 768px) {
    #screen-leaderboard .lb-world-container {
        padding: 0.75rem;
        padding-top: 65px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px));
    }

    #screen-leaderboard .btn-back {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* === RESPONSIVE 600px - GRANDS MOBILES === */
@media (max-width: 600px) {
    #screen-leaderboard .lb-world-container {
        padding: 0.5rem;
        padding-top: 60px;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 20px));
    }

    /* Header navigateur plus compact */
    .lb-browser-header {
        border-radius: 10px;
        margin-bottom: 0.6rem;
    }

    .lb-browser-bar {
        padding: 0.35rem 0.5rem;
    }

    .lb-dot {
        width: 8px;
        height: 8px;
    }

    .lb-title-text {
        font-size: 0.8rem;
    }

    /* Onglets plus petits */
    .lb-tab {
        padding: 0.5rem 0.25rem;
        gap: 0.2rem;
    }

    .lb-tab-icon {
        font-size: 0.85rem;
    }

    .lb-tab-text {
        font-size: 0.65rem;
    }

    .lb-tab-badge {
        display: none;
    }

    /* Section jeux plus compacte */
    .lb-games-section {
        padding: 0.6rem;
        margin-bottom: 0.6rem;
        border-radius: 10px;
    }

    .lb-section-header {
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.5rem;
    }

    .lb-section-icon {
        font-size: 1rem;
    }

    .lb-section-title {
        font-size: 0.8rem;
    }

    .lb-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .lb-game-card {
        padding: 0.5rem 0.25rem;
        border-radius: 8px;
        min-height: auto;
    }

    .lb-game-icon {
        font-size: 1.4rem;
    }

    .lb-game-name {
        font-size: 0.6rem;
    }

    .lb-game-players {
        display: none;
    }

    /* Contrôles */
    .lb-controls-bar {
        padding: 0.6rem;
        margin-bottom: 0.6rem;
        border-radius: 10px;
    }

    .lb-diff-select-mobile {
        width: 100%;
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    /* Carte mon classement */
    .lb-my-rank-card {
        padding: 0.6rem 0.8rem;
        margin-bottom: 0.6rem;
        border-radius: 12px;
    }

    .lb-myrank-icon {
        font-size: 1.5rem;
    }

    .lb-myrank-label {
        font-size: 0.65rem;
    }

    .lb-myrank-name {
        font-size: 0.85rem;
    }

    .lb-myrank-position {
        font-size: 1.3rem;
    }

    .lb-my-rank-card::after {
        font-size: 2rem;
        opacity: 0.05;
    }

    /* Liste classement */
    .lb-list-container {
        border-radius: 10px;
    }

    .lb-list-header {
        padding: 0.5rem 0.6rem;
        font-size: 0.6rem;
        grid-template-columns: 40px 1fr 60px;
    }

    .lb-col-country,
    .lb-col-date {
        display: none;
    }

    .lb-list {
        max-height: none;
    }

    .lb-list-row {
        padding: 0.5rem 0.6rem;
        grid-template-columns: 40px 1fr 60px;
    }

    .lb-row-rank {
        font-size: 0.8rem;
        padding: 0.15rem 0.3rem;
    }

    .lb-row-player {
        gap: 0.5rem;
    }

    .lb-row-avatar {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .lb-row-name {
        font-size: 0.8rem;
    }

    .lb-row-title,
    .lb-row-country {
        display: none;
    }

    .lb-row-score {
        font-size: 0.75rem;
        padding: 0.15rem 0.35rem;
    }

    /* Stats globales */
    .lb-global-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
        margin-bottom: 0.8rem;
    }

    .lb-stat-item {
        padding: 0.5rem 0.3rem;
        border-radius: 8px;
    }

    .lb-stat-icon {
        font-size: 1.2rem;
    }

    .lb-stat-value {
        font-size: 1rem;
    }

    .lb-stat-label {
        font-size: 0.55rem;
    }
}

/* === RESPONSIVE 480px - MOBILES STANDARDS === */
@media (max-width: 480px) {
    #screen-leaderboard .lb-world-container {
        padding: 0.4rem;
        padding-top: 55px;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 20px));
    }

    #screen-leaderboard .btn-back {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .lb-browser-header {
        margin-bottom: 0.5rem;
    }

    .lb-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
    }

    .lb-game-card {
        padding: 0.4rem 0.2rem;
    }

    .lb-game-icon {
        font-size: 1.2rem;
    }

    .lb-game-name {
        font-size: 0.55rem;
    }

    .lb-list {
        max-height: none;
    }
}

/* === RESPONSIVE 400px - PETITS MOBILES === */
@media (max-width: 400px) {
    #screen-leaderboard .lb-world-container {
        padding: 0.35rem;
        padding-top: 50px;
    }

    .lb-browser-bar {
        padding: 0.3rem 0.4rem;
    }

    .lb-title-icon {
        font-size: 0.9rem;
    }

    .lb-title-text {
        font-size: 0.75rem;
    }

    .lb-refresh-btn-mini {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .lb-tab {
        padding: 0.4rem 0.2rem;
    }

    .lb-tab-icon {
        font-size: 0.8rem;
    }

    .lb-tab-text {
        font-size: 0.6rem;
    }

    .lb-games-section {
        padding: 0.5rem;
    }

    .lb-game-icon {
        font-size: 1.1rem;
    }

    .lb-game-name {
        font-size: 0.5rem;
    }

    .lb-my-rank-card {
        padding: 0.5rem 0.6rem;
    }

    .lb-myrank-icon {
        font-size: 1.3rem;
    }

    .lb-myrank-position {
        font-size: 1.2rem;
    }

    .lb-list-header,
    .lb-list-row {
        grid-template-columns: 35px 1fr 55px;
        padding: 0.4rem 0.5rem;
    }

    .lb-row-avatar {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }

    .lb-row-name {
        font-size: 0.75rem;
    }

    .lb-row-score {
        font-size: 0.7rem;
    }

    .lb-list {
        max-height: none;
    }
}

/* === RESPONSIVE 360px - TRÈS PETITS MOBILES === */
@media (max-width: 360px) {
    #screen-leaderboard .lb-world-container {
        padding: 0.3rem;
        padding-top: 48px;
    }

    #screen-leaderboard .btn-back {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
    }

    .lb-browser-header {
        border-radius: 8px;
    }

    .lb-browser-bar {
        padding: 0.25rem 0.35rem;
    }

    .lb-dot {
        width: 6px;
        height: 6px;
    }

    .lb-title-text {
        font-size: 0.7rem;
    }

    .lb-tab-text {
        font-size: 0.55rem;
    }

    .lb-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
    }

    .lb-game-card {
        padding: 0.35rem 0.15rem;
        border-radius: 6px;
    }

    .lb-game-icon {
        font-size: 1rem;
    }

    .lb-game-name {
        font-size: 0.45rem;
    }

    .lb-stat-item {
        padding: 0.4rem 0.2rem;
    }

    .lb-stat-icon {
        font-size: 1rem;
    }

    .lb-stat-value {
        font-size: 0.9rem;
    }

    .lb-stat-label {
        font-size: 0.5rem;
    }
}

/* === FIX HAUTEUR VIEWPORT MOBILE === */
@supports (height: 100dvh) {
    .screen {
        height: 100dvh;
        min-height: 100dvh;
    }
}

/* === FIX ORIENTATION PAYSAGE MOBILE === */
@media (max-height: 500px) and (orientation: landscape) {
    #screen-leaderboard .lb-world-container {
        padding-top: 45px;
    }

    .lb-browser-header {
        margin-bottom: 0.4rem;
    }

    .lb-browser-bar {
        padding: 0.25rem 0.4rem;
    }

    .lb-tab {
        padding: 0.35rem 0.2rem;
    }

    .lb-games-section {
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }

    .lb-games-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.3rem;
    }

    .lb-game-card {
        padding: 0.3rem 0.15rem;
    }

    .lb-game-icon {
        font-size: 1rem;
    }

    .lb-game-name {
        font-size: 0.5rem;
    }

    .lb-my-rank-card {
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.4rem;
    }

    .lb-list {
        max-height: none;
    }
}

/* === FIX SAFE AREAS iOS === */
@supports (padding: env(safe-area-inset-top)) {
    #screen-leaderboard .btn-back {
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
    }

    #screen-leaderboard .lb-world-container {
        padding-left: max(0.4rem, env(safe-area-inset-left));
        padding-right: max(0.4rem, env(safe-area-inset-right));
    }
}

/* ============================================================= */
/* ============ BADGE MODE INFINI - ECRAN SCORES =============== */
/* ============================================================= */

.scores-mode-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2));
    border: 2px solid var(--primary);
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.scores-mode-badge .mode-icon {
    font-size: 1.3rem;
}

.scores-mode-badge .mode-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 480px) {
    .scores-mode-badge {
        padding: 0.5rem 1rem;
        gap: 0.4rem;
    }

    .scores-mode-badge .mode-icon {
        font-size: 1.1rem;
    }

    .scores-mode-badge .mode-text {
        font-size: 0.85rem;
    }
}

/* ============================================================= */
/* ============ CATCH LEVEL UP EFFECT ========================== */
/* ============================================================= */

.catch-level-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.5);
    animation: levelUpAnim 1.5s ease-out forwards;
    z-index: 100;
    pointer-events: none;
}

@keyframes levelUpAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -70%) scale(0.8);
    }
}

/* ============================================================= */
/* ============ SCORES MODE INFINI - QUIZ & SIMON ============== */
/* ============================================================= */

.scores-infinite-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.infinite-badge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.2));
    border: 2px solid var(--primary);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.infinite-badge-large .infinite-icon {
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.infinite-badge-large .infinite-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.infinite-badge-large .infinite-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Record Card - Compact */
.scores-record-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.1));
    border: 2px solid rgba(245, 158, 11, 0.5);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.scores-record-card .record-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.scores-record-card .record-crown {
    font-size: 1.2rem;
}

.scores-record-card .record-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scores-record-card .record-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.scores-record-card .record-score {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scores-record-card .record-value {
    font-size: 2rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5);
    line-height: 1;
}

.scores-record-card .record-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scores-record-card .record-details {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.scores-record-card .record-detail {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}

.scores-record-card .detail-icon {
    font-size: 0.9rem;
}

.scores-record-card .detail-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.scores-record-card .detail-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .infinite-badge-large {
        padding: 0.8rem 1.5rem;
    }

    .infinite-badge-large .infinite-icon {
        font-size: 1.5rem;
    }

    .infinite-badge-large .infinite-title {
        font-size: 1rem;
    }

    .scores-record-card {
        padding: 1rem;
    }

    .scores-record-card .record-value {
        font-size: 2.5rem;
    }

    .scores-record-card .record-details {
        gap: 1rem;
    }

    .scores-record-card .record-detail {
        padding: 0.5rem 0.8rem;
    }

    .scores-record-card .detail-value {
        font-size: 1.1rem;
    }
}

/* ===== LIEN TOP 100 MONDIAL ===== */
.scores-top100-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    margin: 0.8rem 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    color: #a78bfa;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.scores-top100-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2));
    border-color: rgba(139, 92, 246, 0.6);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.scores-top100-link .top100-icon {
    font-size: 1.2rem;
}

.scores-top100-link .top100-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.scores-top100-link:hover .top100-arrow {
    transform: translateX(3px);
}

/* ============================================================= */
/* ============ SIMON 3x3 - RESPONSIVE ========================= */
/* ============================================================= */

@media (max-width: 480px) {
    .simon-board.mode-9 {
        max-width: 340px;
        gap: 10px;
        padding: 12px;
    }

    .simon-board.mode-9 .simon-btn {
        font-size: 2rem;
        border-radius: 14px;
        border-width: 3px;
    }
}

@media (max-width: 400px) {
    .simon-board.mode-9 {
        max-width: 300px;
        gap: 8px;
        padding: 10px;
    }

    .simon-board.mode-9 .simon-btn {
        font-size: 1.8rem;
        border-radius: 12px;
    }
}

@media (max-width: 360px) {
    .simon-board.mode-9 {
        max-width: 270px;
        gap: 6px;
        padding: 8px;
    }

    .simon-board.mode-9 .simon-btn {
        font-size: 1.6rem;
        border-radius: 10px;
        border-width: 2px;
    }
}

/* ============================================================= */
/* ============ QUIZ CYCLE MESSAGE ============================= */
/* ============================================================= */

.quiz-cycle-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2));
    border-radius: var(--radius);
    border: 2px solid rgba(139, 92, 246, 0.4);
    animation: cycleMessageAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 350px;
}

@keyframes cycleMessageAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.quiz-cycle-message .cycle-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: cycleIconBounce 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
}

@keyframes cycleIconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}

.quiz-cycle-message h3 {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a78bfa, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: none;
}

.quiz-cycle-message p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.quiz-cycle-message p strong {
    color: var(--secondary);
    font-weight: 700;
}

.quiz-cycle-message .cycle-stats {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
    justify-content: center;
}

.quiz-cycle-message .cycle-stat {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 100px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quiz-cycle-message .cycle-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.quiz-cycle-message .cycle-stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.quiz-cycle-message .cycle-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-light);
}

.quiz-cycle-message .cycle-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quiz-cycle-message .cycle-info {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(16, 185, 129, 0.3);
    margin: 1rem 0;
    font-size: 0.95rem;
    color: #6ee7b7;
}

.quiz-cycle-message .cycle-info strong {
    color: #34d399;
}

.quiz-cycle-message .cycle-continue-btn {
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quiz-cycle-message .cycle-continue-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg, var(--primary-light), var(--accent));
}

.quiz-cycle-message .cycle-continue-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Responsive pour le message de cycle */
@media (max-width: 600px) {
    .quiz-cycle-message {
        padding: 1.5rem;
        min-height: auto;
    }

    .quiz-cycle-message .cycle-icon {
        font-size: 3rem;
    }

    .quiz-cycle-message h3 {
        font-size: 1.4rem;
    }

    .quiz-cycle-message p {
        font-size: 1rem;
    }

    .quiz-cycle-message .cycle-stats {
        gap: 1rem;
    }

    .quiz-cycle-message .cycle-stat {
        padding: 0.8rem 1rem;
        min-width: 80px;
    }

    .quiz-cycle-message .cycle-stat-value {
        font-size: 1.2rem;
    }

    .quiz-cycle-message .cycle-continue-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

/* ============================================================= */
/* ============ RESPONSIVE MOBILE TOUS JEUX ==================== */
/* ============================================================= */

/* === FLOCON MATCH MOBILE === */
@media (max-width: 768px) {
    .flocon-game-container {
        padding: 0;
        height: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .flocon-header {
        padding: 0.4rem 0.6rem;
        flex-wrap: wrap;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    .flocon-back-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .flocon-stats {
        gap: 0.4rem;
    }

    .flocon-stat {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
        gap: 0.2rem;
    }

    .flocon-game-area {
        padding: 0.3rem;
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .flocon-board {
        max-width: min(85vw, 320px);
        max-height: min(85vw, 320px);
        width: min(85vw, 320px);
        height: min(85vw, 320px);
        padding: 5px;
        gap: 2px;
    }

    .flocon-cell {
        font-size: 1.3rem;
        border-radius: 5px;
    }

    .flocon-footer {
        padding: 0.4rem;
        font-size: 0.75rem;
        gap: 0.8rem;
        flex-shrink: 0;
    }

    .flocon-start-overlay {
        padding: 0.8rem;
    }

    .flocon-start-content {
        padding: 1.2rem;
        max-width: 90vw;
    }

    .flocon-start-icon {
        font-size: 2.5rem;
    }

    .flocon-start-content h2 {
        font-size: 1.3rem;
    }

    .flocon-start-content p {
        font-size: 0.85rem;
    }

    .flocon-diff-buttons {
        gap: 0.4rem;
    }

    .flocon-diff-btn {
        padding: 0.5rem 0.6rem;
        min-width: 60px;
    }

    .flocon-diff-btn span:first-child {
        font-size: 1.1rem;
    }

    .flocon-diff-btn span:last-child {
        font-size: 0.65rem;
    }

    .flocon-preview {
        font-size: 1rem;
        gap: 0.2rem;
    }

    .flocon-play-btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }

    .flocon-cascade,
    .flocon-cascade-text {
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .flocon-board {
        max-width: min(80vw, 280px);
        max-height: min(80vw, 280px);
        width: min(80vw, 280px);
        height: min(80vw, 280px);
        gap: 2px;
        padding: 4px;
    }

    .flocon-cell {
        font-size: 1.1rem;
        border-radius: 4px;
    }

    .flocon-stat {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }
}

/* === SIMON MARMOTTE MOBILE === */
@media (max-width: 768px) {
    #screen-simon {
        overflow: hidden;
    }

    #screen-simon .game-wrapper {
        height: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #screen-simon .game-header {
        padding: 0.4rem 0.5rem;
        flex-shrink: 0;
    }

    #screen-simon .game-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.3rem;
        min-height: 0;
        overflow: hidden;
    }

    .simon-game-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .simon-board {
        max-width: min(75vw, 280px);
        max-height: min(75vw, 280px);
        width: min(75vw, 280px);
        height: min(75vw, 280px);
        gap: 6px;
        padding: 8px;
    }

    .simon-btn {
        font-size: 1.6rem;
        border-radius: 10px;
    }

    .simon-info {
        padding: 0.4rem;
        font-size: 0.8rem;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .simon-overlay {
        padding: 0.8rem;
    }

    .simon-overlay-content {
        padding: 1.2rem;
        max-width: 90vw;
    }

    .simon-overlay-content h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .simon-board {
        max-width: min(70vw, 240px);
        max-height: min(70vw, 240px);
        width: min(70vw, 240px);
        height: min(70vw, 240px);
        gap: 4px;
        padding: 6px;
    }

    .simon-btn {
        font-size: 1.3rem;
        border-radius: 8px;
    }

    .simon-info {
        font-size: 0.75rem;
        gap: 0.4rem;
    }
}

/* === MARMOTTE CLICKER MOBILE === */
@media (max-width: 768px) {
    .clicker-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .clicker-header {
        padding: 0.5rem;
        flex-shrink: 0;
    }

    .clicker-stats {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .clicker-stat {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }

    .clicker-game-zone {
        flex: 1;
        min-height: 200px;
        margin: 0.5rem;
        border-radius: 12px;
    }

    .marmotte-target {
        font-size: 2.5rem;
        width: 55px;
        height: 55px;
    }

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

    .clicker-footer {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .clicker-start-overlay {
        padding: 1rem;
    }

    .clicker-start-content {
        padding: 1.5rem;
        max-width: 95vw;
    }
}

/* === QUIZ ALPIN MOBILE === */
@media (max-width: 768px) {
    #screen-quiz {
        overflow: auto;
    }

    .quiz-container {
        padding: 0.5rem;
        height: auto;
        min-height: 100%;
    }

    .quiz-header {
        padding: 0.5rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .quiz-stat {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }

    .quiz-content {
        padding: 0.5rem;
    }

    .quiz-question-box {
        padding: 1rem;
        font-size: 1rem;
        min-height: auto;
    }

    .quiz-answers {
        gap: 0.5rem;
    }

    .quiz-answer {
        padding: 0.8rem;
        font-size: 0.95rem;
    }

    .quiz-overlay-content {
        padding: 1.5rem;
        max-width: 95vw;
    }
}

/* === CATCH NOISETTES MOBILE === */
@media (max-width: 768px) {
    .catch-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .catch-header {
        padding: 0.5rem;
        flex-shrink: 0;
    }

    .catch-stats {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .catch-stat {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }

    .catch-arena {
        flex: 1;
        min-height: 250px;
        margin: 0.5rem;
        border-radius: 12px;
        touch-action: none;
    }

    .catch-basket {
        width: 70px;
        font-size: 2.5rem;
    }

    .falling-item {
        font-size: 1.8rem;
    }

    .catch-lives {
        font-size: 1.2rem;
    }

    .catch-footer {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .catch-overlay-content {
        padding: 1.5rem;
        max-width: 95vw;
    }
}

/* === MEMORY MOBILE === */
@media (max-width: 768px) {
    .memory-container {
        padding: 0.5rem;
    }

    .memory-header {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .memory-board {
        gap: 4px;
        padding: 0.5rem;
        max-width: 100%;
    }

    .memory-card {
        font-size: 1.5rem;
        border-radius: 8px;
    }
}

/* === RUNNER MOBILE === */
@media (max-width: 768px) {
    .runner-container {
        height: 100%;
    }

    .runner-header {
        padding: 0.5rem;
    }

    .runner-game-area {
        flex: 1;
    }

    .runner-marmotte {
        font-size: 2rem;
    }

    .runner-obstacle {
        font-size: 1.8rem;
    }
}

/* === PONG MOBILE === */
@media (max-width: 768px) {
    #screen-pong .game-content {
        padding: 0.5rem;
    }

    .pong-canvas-container {
        max-width: 100%;
        max-height: calc(100vh - 150px);
    }
}

/* === FIX GLOBAL POUR TOUS LES ÉCRANS DE JEU === */
@media (max-width: 768px) {
    .screen {
        overflow: hidden;
    }

    .game-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .game-header {
        flex-shrink: 0;
    }

    .game-content {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Overlays */
    .game-overlay,
    .flocon-start-overlay,
    .clicker-start-overlay,
    .simon-overlay,
    .catch-overlay,
    .quiz-overlay {
        padding: 1rem;
    }

    .game-overlay-content,
    .flocon-start-content,
    .clicker-start-content,
    .simon-overlay-content,
    .catch-overlay-content,
    .quiz-overlay-content {
        max-width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.5rem;
    }

    /* Boutons de difficulté uniformes */
    .difficulty-btn,
    .diff-btn,
    .flocon-diff-btn,
    .clicker-diff-btn,
    .simon-diff-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        min-width: 65px;
    }

    /* Boutons Play */
    .play-btn,
    .flocon-play-btn,
    .clicker-play-btn,
    .simon-play-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

/* === FIX POUR TRÈS PETITS ÉCRANS === */
@media (max-width: 360px) {
    .flocon-cell {
        font-size: 1rem;
    }

    .simon-btn {
        font-size: 1.4rem;
    }

    .marmotte-target {
        font-size: 2rem;
        width: 45px;
        height: 45px;
    }

    .memory-card {
        font-size: 1.2rem;
    }

    .falling-item {
        font-size: 1.5rem;
    }

    .catch-basket {
        width: 60px;
        font-size: 2rem;
    }
}

/* === FIX ORIENTATION PAYSAGE MOBILE === */
@media (max-height: 500px) and (orientation: landscape) {
    .flocon-header,
    .clicker-header,
    .catch-header,
    .simon-info,
    .quiz-header {
        padding: 0.3rem 0.5rem;
    }

    .flocon-footer,
    .clicker-footer,
    .catch-footer {
        padding: 0.3rem;
        font-size: 0.75rem;
    }

    .flocon-board {
        max-height: calc(100vh - 100px);
    }

    .simon-board {
        max-width: min(70vh, 50vw);
        max-height: min(70vh, 50vw);
    }

    .game-overlay-content,
    .flocon-start-content,
    .clicker-start-content {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* =====================================================
   CORRECTIONS MOBILE - TOUS LES MINI-JEUX
   Responsive pour tous les téléphones (Android/iPhone)
   ===================================================== */

/* === SIMON - Cacher le board avant début === */
.simon-board {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.simon-board.game-started {
    visibility: visible;
    opacity: 1;
}

/* === PUZZLE - Media queries complètes (MANQUANTES) === */
@media (max-width: 600px) {
    .puzzle-board {
        max-width: min(300px, 85vw);
        max-height: min(300px, 85vw);
        gap: 4px;
        padding: 8px;
    }

    .puzzle-piece {
        font-size: 1.2rem;
        border-radius: 8px;
    }

    .puzzle-container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .puzzle-board {
        max-width: min(260px, 80vw);
        max-height: min(260px, 80vw);
        gap: 3px;
        padding: 6px;
    }

    .puzzle-piece {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .puzzle-board {
        max-width: min(220px, 75vw);
        max-height: min(220px, 75vw);
        gap: 2px;
        padding: 5px;
    }

    .puzzle-piece {
        font-size: 1rem;
    }
}

/* === QUIZ - 1 colonne sur mobile === */
@media (max-width: 600px) {
    .quiz-answers {
        grid-template-columns: 1fr !important;
        gap: 0.8rem;
    }

    .quiz-card {
        max-width: 95vw;
        padding: 1.2rem;
        margin: 0.5rem;
    }

    .quiz-question {
        font-size: 1.15rem;
        line-height: 1.4;
    }

    .quiz-number {
        font-size: 0.9rem;
    }

    .quiz-answer-btn {
        padding: 0.9rem 1rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .quiz-card {
        padding: 1rem;
    }

    .quiz-question {
        font-size: 1.05rem;
    }

    .quiz-answer-btn {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
}

/* === MEMORY - Tailles réduites mobile === */
@media (max-width: 600px) {
    .memory-card {
        max-height: 140px;
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(45px, 70px));
        gap: 0.4rem;
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(60px, 90px));
        gap: 0.5rem;
    }

    .memory-board.grid-3 {
        grid-template-columns: repeat(3, minmax(70px, 100px));
        gap: 0.6rem;
    }

    .memory-card-inner {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .memory-card {
        max-height: 110px;
    }

    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(40px, 60px));
        gap: 0.3rem;
    }

    .memory-board.grid-4 {
        grid-template-columns: repeat(4, minmax(55px, 80px));
    }

    .memory-card-inner {
        font-size: 1.5rem;
    }
}

@media (max-width: 400px) {
    .memory-board.grid-6 {
        grid-template-columns: repeat(6, minmax(35px, 55px));
        gap: 0.2rem;
    }

    .memory-card-inner {
        font-size: 1.3rem;
    }
}

/* === FLOCON - Cellules réduites mobile === */
@media (max-width: 600px) {
    .flocon-cell {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }

    .flocon-board {
        max-width: min(340px, 90vw);
        gap: 3px;
        padding: 8px;
    }

    .flocon-game-container {
        padding: 0.8rem;
    }
}

@media (max-width: 480px) {
    .flocon-cell {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    .flocon-board {
        max-width: min(300px, 88vw);
        gap: 2px;
    }
}

@media (max-width: 400px) {
    .flocon-cell {
        width: 30px;
        height: 30px;
        font-size: 1.1rem;
    }

    .flocon-board {
        max-width: min(260px, 85vw);
    }
}

@media (max-width: 360px) {
    .flocon-cell {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

/* === ARENAS - min-height réduit mobile (Clicker/Catch/Runner) === */
@media (max-width: 768px) {
    .clicker-arena,
    .catch-arena {
        min-height: 320px;
    }

    .slalom-arena {
        min-height: 350px;
    }
}

@media (max-width: 600px) {
    .clicker-arena,
    .catch-arena {
        min-height: 280px;
    }

    .slalom-arena {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .clicker-arena,
    .catch-arena,
    .slalom-arena {
        min-height: 250px;
    }
}

/* === SIMON - Boutons responsifs mobile === */
@media (max-width: 600px) {
    .simon-btn {
        width: 85px;
        height: 85px;
        font-size: 2.2rem;
        border-radius: 14px;
    }

    .simon-board {
        gap: 6px;
        padding: 8px;
        max-width: 300px;
    }

    .simon-board.mode-9 {
        max-width: 280px;
        gap: 8px;
        padding: 10px;
    }

    .simon-board.mode-9 .simon-btn {
        font-size: 1.8rem;
    }

    .simon-mascot-container {
        padding: 1rem 1.5rem;
    }

    .simon-marmotte {
        font-size: 3.5rem;
    }

    .simon-status {
        font-size: 1rem;
        letter-spacing: 2px;
    }
}

@media (max-width: 480px) {
    .simon-btn {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
        border-radius: 12px;
        border-width: 3px;
    }

    .simon-board {
        gap: 5px;
        max-width: 250px;
    }

    .simon-board.mode-9 {
        max-width: 240px;
        gap: 6px;
    }

    .simon-board.mode-9 .simon-btn {
        font-size: 1.5rem;
    }
}

@media (max-width: 400px) {
    .simon-btn {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        border-radius: 10px;
    }

    .simon-board {
        gap: 4px;
        max-width: 210px;
    }

    .simon-board.mode-9 {
        max-width: 200px;
        gap: 5px;
    }

    .simon-mascot-container {
        padding: 0.8rem 1.2rem;
    }

    .simon-marmotte {
        font-size: 2.8rem;
    }
}

/* === PACMAN - min-height et responsive === */
@media (max-width: 600px) {
    .pacman-container {
        min-height: auto;
        padding: 0.5rem;
    }

    .pacman-canvas-wrapper {
        max-width: 100%;
        border-width: 3px;
    }

    #pacman-canvas {
        max-width: 100%;
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 480px) {
    .pacman-container {
        padding: 0.3rem;
    }

    .pacman-canvas-wrapper {
        border-width: 2px;
        padding: 0.3rem;
    }

    #pacman-canvas {
        max-height: calc(100vh - 180px);
    }
}

/* === OVERLAYS - Responsive pour tous les jeux === */
@media (max-width: 600px) {
    .game-overlay-content,
    .flocon-start-content,
    .clicker-start-content,
    .simon-overlay-content,
    .catch-overlay-content,
    .quiz-overlay-content {
        max-width: 92vw;
        max-height: 88vh;
        padding: 1.2rem;
        margin: 1rem;
        overflow-y: auto;
    }

    .overlay-title,
    .start-title {
        font-size: 1.4rem;
    }

    .overlay-subtitle,
    .start-subtitle {
        font-size: 0.95rem;
    }

    .diff-buttons {
        gap: 0.6rem;
    }

    .diff-btn {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 400px) {
    .game-overlay-content,
    .flocon-start-content,
    .clicker-start-content,
    .simon-overlay-content,
    .catch-overlay-content,
    .quiz-overlay-content {
        max-width: 95vw;
        padding: 1rem;
        margin: 0.5rem;
        border-radius: 16px;
    }

    .overlay-title,
    .start-title {
        font-size: 1.2rem;
    }

    .diff-btn {
        padding: 0.7rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* === TITAN - Responsive complet === */
@media (max-width: 600px) {
    .titan-board {
        max-width: 280px;
        gap: 8px;
    }

    .titan-btn {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .titan-board {
        max-width: 240px;
        gap: 6px;
    }

    .titan-btn {
        width: 68px;
        height: 68px;
        font-size: 1.7rem;
    }
}

@media (max-width: 400px) {
    .titan-board {
        max-width: 200px;
        gap: 5px;
    }

    .titan-btn {
        width: 58px;
        height: 58px;
        font-size: 1.4rem;
    }
}

/* === RUNNER/SLALOM - Responsive complet === */
@media (max-width: 600px) {
    .runner-ground {
        height: 60px;
    }

    .slalom-player {
        font-size: 2rem;
    }

    .slalom-gate {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .runner-ground {
        height: 50px;
    }

    .slalom-player {
        font-size: 1.8rem;
    }
}

/* === CATCH - Panier et items responsifs === */
@media (max-width: 600px) {
    .catch-basket {
        font-size: 2.2rem;
    }

    .falling-item {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .catch-basket {
        font-size: 2rem;
    }

    .falling-item {
        font-size: 1.3rem;
    }
}

/* === CLICKER - Marmotte et cible responsive === */
@media (max-width: 600px) {
    .marmotte-target {
        width: 55px;
        height: 55px;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .marmotte-target {
        width: 48px;
        height: 48px;
        font-size: 1.8rem;
    }
}

@media (max-width: 400px) {
    .marmotte-target {
        width: 42px;
        height: 42px;
        font-size: 1.5rem;
    }
}

/* === FIX GLOBAL - Empêcher débordement horizontal === */
@media (max-width: 600px) {
    .game-wrapper,
    .game-container {
        max-width: 100vw;
        overflow-x: hidden;
        padding: 0.5rem;
    }

    .game-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.8rem;
    }

    .game-stats {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
}

/* =====================================================
   SIMON MARMOTTE - MOBILE RESPONSIVE COMPLET
   Même design que PC mais adapté, avec scroll tactile
   ===================================================== */
@media (max-width: 768px) {
    /* Écran Simon - permettre le scroll */
    #screen-simon {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #screen-simon .titan-game {
        min-height: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
    }

    /* Header responsive */
    #screen-simon .titan-header {
        padding: 0.6rem 1rem;
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #screen-simon .btn-titan {
        width: 42px;
        height: 42px;
        font-size: 1.3rem;
    }

    #screen-simon .titan-info {
        gap: 0.6rem;
    }

    #screen-simon .titan-logo {
        font-size: 2rem;
    }

    #screen-simon .titan-name {
        font-size: 1.3rem;
    }

    /* Stats responsive */
    #screen-simon .titan-stats {
        gap: 0.6rem;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    #screen-simon .titan-stat {
        padding: 0.5rem 0.8rem;
        min-width: 70px;
        border-radius: 12px;
    }

    #screen-simon .titan-stat .stat-label {
        font-size: 0.6rem;
    }

    #screen-simon .titan-value {
        font-size: 1.2rem;
    }

    /* Container du jeu */
    #screen-simon .titan-container {
        flex: 1;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Zone de jeu */
    #screen-simon .simon-game-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    /* Board Simon */
    #screen-simon .simon-board {
        max-width: 300px;
        width: 85vw;
        gap: 6px;
        padding: 10px;
        border-radius: 16px;
    }

    #screen-simon .simon-board.mode-9 {
        max-width: 280px;
        width: 80vw;
    }

    #screen-simon .simon-btn {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        font-size: 1.8rem;
        border-radius: 12px;
        border-width: 3px;
    }

    /* Barre de progression */
    #screen-simon .simon-progress {
        width: 85vw;
        max-width: 300px;
    }

    /* Mascotte */
    #screen-simon .simon-mascot-container {
        padding: 0.8rem 1.5rem;
        gap: 0.5rem;
        border-radius: 18px;
    }

    #screen-simon .simon-marmotte {
        font-size: 3rem;
    }

    #screen-simon .simon-status {
        font-size: 0.95rem;
        letter-spacing: 2px;
    }

    /* Footer */
    #screen-simon .titan-footer {
        padding: 0.6rem 1rem;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #screen-simon .titan-stat-mini {
        padding: 0.4rem 0.8rem;
    }

    /* Overlay - scrollable */
    #screen-simon .titan-overlay {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    #screen-simon .titan-content {
        max-width: 95vw;
        width: 100%;
        max-height: none;
        padding: 1.5rem;
        margin: auto;
    }

    #screen-simon .titan-icon {
        font-size: 3rem;
    }

    #screen-simon .titan-title {
        font-size: 1.6rem;
    }

    #screen-simon .titan-desc {
        font-size: 0.95rem;
    }

    #screen-simon .titan-rules {
        gap: 0.4rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #screen-simon .titan-rules .rule {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    #screen-simon .titan-play {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    #screen-simon .titan-header {
        padding: 0.5rem 0.8rem;
    }

    #screen-simon .btn-titan {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    #screen-simon .titan-logo {
        font-size: 1.6rem;
    }

    #screen-simon .titan-name {
        font-size: 1.1rem;
    }

    #screen-simon .titan-stat {
        padding: 0.4rem 0.6rem;
        min-width: 60px;
    }

    #screen-simon .titan-value {
        font-size: 1rem;
    }

    #screen-simon .simon-board {
        max-width: 260px;
        width: 78vw;
        gap: 5px;
        padding: 8px;
    }

    #screen-simon .simon-board.mode-9 {
        max-width: 240px;
        width: 75vw;
    }

    #screen-simon .simon-btn {
        font-size: 1.5rem;
        border-radius: 10px;
    }

    #screen-simon .simon-mascot-container {
        padding: 0.6rem 1.2rem;
    }

    #screen-simon .simon-marmotte {
        font-size: 2.5rem;
    }

    #screen-simon .simon-status {
        font-size: 0.85rem;
    }

    #screen-simon .titan-content {
        padding: 1.2rem;
    }

    #screen-simon .titan-icon {
        font-size: 2.5rem;
    }

    #screen-simon .titan-title {
        font-size: 1.4rem;
    }

    #screen-simon .titan-rules .rule {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    #screen-simon .titan-header {
        padding: 0.4rem 0.6rem;
        gap: 0.5rem;
    }

    #screen-simon .btn-titan {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    #screen-simon .titan-logo {
        font-size: 1.4rem;
    }

    #screen-simon .titan-name {
        font-size: 1rem;
    }

    #screen-simon .titan-stat {
        padding: 0.3rem 0.5rem;
        min-width: 55px;
    }

    #screen-simon .titan-stat .stat-label {
        display: none;
    }

    #screen-simon .titan-value {
        font-size: 0.95rem;
    }

    #screen-simon .simon-board {
        max-width: 220px;
        width: 72vw;
        gap: 4px;
        padding: 6px;
    }

    #screen-simon .simon-board.mode-9 {
        max-width: 200px;
        width: 68vw;
    }

    #screen-simon .simon-btn {
        font-size: 1.3rem;
        border-radius: 8px;
        border-width: 2px;
    }

    #screen-simon .simon-mascot-container {
        padding: 0.5rem 1rem;
    }

    #screen-simon .simon-marmotte {
        font-size: 2rem;
    }

    #screen-simon .simon-status {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    #screen-simon .titan-footer {
        padding: 0.4rem;
        gap: 0.5rem;
    }

    #screen-simon .titan-stat-mini {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* =====================================================
   FLOCON MATCH - MOBILE RESPONSIVE COMPLET
   Design épuré, centré, avec scroll tactile
   ===================================================== */
@media (max-width: 768px) {
    /* Écran Flocon - permettre le scroll */
    #screen-flocon {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #screen-flocon .flocon-game-container {
        min-height: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
    }

    /* Header responsive */
    #screen-flocon .flocon-header {
        padding: 0.6rem 1rem;
        flex-wrap: wrap;
        gap: 0.8rem;
        justify-content: space-between;
    }

    #screen-flocon .flocon-back-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    #screen-flocon .flocon-stats {
        gap: 0.8rem;
        flex-wrap: wrap;
    }

    #screen-flocon .flocon-stat {
        padding: 0.5rem 0.8rem;
        font-size: 1.1rem;
        gap: 0.4rem;
        border-radius: 10px;
    }

    /* Zone de jeu centrée */
    #screen-flocon .flocon-game-area {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    /* Board épuré et centré */
    #screen-flocon .flocon-board {
        background: rgba(20, 20, 45, 0.7);
        border: 2px solid rgba(99, 102, 241, 0.3);
        border-radius: 14px;
        padding: 8px;
        gap: 4px;
        max-width: 340px;
        width: 90vw;
        margin: 0 auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    #screen-flocon .flocon-cell {
        font-size: 1.5rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Footer */
    #screen-flocon .flocon-footer {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    /* Overlay scrollable */
    #screen-flocon .flocon-start-overlay {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    #screen-flocon .flocon-start-content {
        max-width: 95vw;
        width: 100%;
        max-height: none;
        padding: 1.5rem;
        margin: auto;
        border-radius: 20px;
    }

    #screen-flocon .flocon-start-icon {
        font-size: 3rem;
    }

    #screen-flocon .flocon-start-content h2 {
        font-size: 1.6rem;
    }

    #screen-flocon .flocon-start-content p {
        font-size: 1rem;
    }

    #screen-flocon .flocon-difficulty-picker h3 {
        font-size: 1rem;
    }

    #screen-flocon .flocon-diff-buttons {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #screen-flocon .flocon-diff-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        border-radius: 10px;
        min-width: 70px;
    }

    #screen-flocon .flocon-preview {
        font-size: 1.5rem;
        gap: 0.4rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #screen-flocon .flocon-play-btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    #screen-flocon .flocon-header {
        padding: 0.5rem 0.8rem;
        justify-content: center;
        gap: 0.6rem;
    }

    #screen-flocon .flocon-back-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    #screen-flocon .flocon-stats {
        gap: 0.5rem;
    }

    #screen-flocon .flocon-stat {
        padding: 0.4rem 0.6rem;
        font-size: 1rem;
    }

    #screen-flocon .flocon-board {
        max-width: 300px;
        width: 88vw;
        padding: 6px;
        gap: 3px;
    }

    #screen-flocon .flocon-cell {
        font-size: 1.3rem;
        border-radius: 6px;
    }

    #screen-flocon .flocon-footer {
        font-size: 0.85rem;
        gap: 1.5rem;
    }

    #screen-flocon .flocon-start-content {
        padding: 1.2rem;
    }

    #screen-flocon .flocon-start-icon {
        font-size: 2.5rem;
    }

    #screen-flocon .flocon-start-content h2 {
        font-size: 1.4rem;
    }

    #screen-flocon .flocon-diff-btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
    }

    #screen-flocon .flocon-preview {
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    #screen-flocon .flocon-header {
        padding: 0.4rem 0.6rem;
    }

    #screen-flocon .flocon-back-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
    }

    #screen-flocon .flocon-stat {
        padding: 0.35rem 0.5rem;
        font-size: 0.9rem;
        gap: 0.25rem;
    }

    #screen-flocon .flocon-board {
        max-width: 260px;
        width: 85vw;
        padding: 5px;
        gap: 2px;
        border-radius: 12px;
    }

    #screen-flocon .flocon-cell {
        font-size: 1.15rem;
        border-radius: 5px;
    }

    #screen-flocon .flocon-footer {
        padding: 0.5rem;
        font-size: 0.8rem;
        gap: 1rem;
    }

    #screen-flocon .flocon-diff-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        min-width: 60px;
    }

    #screen-flocon .flocon-preview {
        font-size: 1.1rem;
        gap: 0.3rem;
    }

    #screen-flocon .flocon-play-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    #screen-flocon .flocon-stats {
        gap: 0.4rem;
    }

    #screen-flocon .flocon-stat {
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
    }

    #screen-flocon .flocon-board {
        max-width: 230px;
        width: 82vw;
        padding: 4px;
        gap: 2px;
    }

    #screen-flocon .flocon-cell {
        font-size: 1rem;
        border-radius: 4px;
    }

    #screen-flocon .flocon-footer {
        font-size: 0.75rem;
    }
}

/* =====================================================
   CHAOS ALPIN - JEU SECRET
   ===================================================== */

/* === CARTE MENU JEU SECRET === */
.secret-game-card {
    position: relative;
    overflow: hidden;
}

.secret-game-card.secret-locked {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(15, 15, 30, 0.95)) !important;
    border: 2px dashed rgba(139, 92, 246, 0.4) !important;
    cursor: not-allowed;
}

.secret-game-card.secret-locked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(139, 92, 246, 0.05) 10px,
        rgba(139, 92, 246, 0.05) 20px
    );
    pointer-events: none;
}

.secret-game-card.secret-locked .secret-icon {
    font-size: 2.5rem;
    filter: grayscale(0.5);
    opacity: 0.7;
}

.secret-game-card.secret-locked .secret-title {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 3px;
}

.secret-game-card.secret-locked .secret-desc {
    color: rgba(139, 92, 246, 0.7);
    font-style: italic;
    font-size: 0.85rem;
}

.secret-progress {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.8rem;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #a78bfa;
    font-weight: 600;
}

/* Carte deverrouillee */
.secret-game-card.secret-unlocked {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2)) !important;
    border: 2px solid rgba(168, 85, 247, 0.6) !important;
    cursor: pointer;
    animation: secretPulse 3s ease-in-out infinite;
}

.secret-game-card.secret-unlocked::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #8b5cf6, #a855f7, #8b5cf6);
    border-radius: inherit;
    z-index: -1;
    animation: secretGlow 2s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes secretPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes secretGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.secret-game-card .unlocked-icon {
    font-size: 2.8rem;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.secret-game-card .unlocked-title {
    color: #c4b5fd;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.secret-game-card .unlocked-desc {
    color: rgba(196, 181, 253, 0.8);
}

.secret-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4);
}

/* === MODAL DEBLOCAGE SECRET === */
.secret-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.secret-modal.show {
    opacity: 1;
    visibility: visible;
}

.secret-modal-content {
    background: linear-gradient(145deg, rgba(30, 20, 60, 0.98), rgba(15, 10, 40, 0.98));
    border: 3px solid rgba(139, 92, 246, 0.6);
    border-radius: 25px;
    padding: 2.5rem;
    text-align: center;
    max-width: 450px;
    width: 90%;
    transform: scale(0.8);
    transition: transform 0.5s ease;
    box-shadow:
        0 0 50px rgba(139, 92, 246, 0.4),
        0 0 100px rgba(168, 85, 247, 0.2),
        inset 0 0 30px rgba(139, 92, 246, 0.1);
}

.secret-modal.show .secret-modal-content {
    transform: scale(1);
}

.secret-modal-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 1rem;
    animation: secretReveal 1s ease-out;
}

@keyframes secretReveal {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.secret-modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.secret-modal-subtitle {
    font-size: 1.1rem;
    color: rgba(196, 181, 253, 0.8);
    margin-bottom: 1.5rem;
}

.secret-modal-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.secret-modal-btn {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.secret-modal-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

/* === MODAL JEU SECRET VERROUILLE === */
.secret-locked-content {
    text-align: center;
}

.secret-locked-info {
    margin: 1.5rem 0;
}

.locked-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.locked-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.locked-progress-text {
    font-size: 1rem;
    font-weight: 700;
    color: #c4b5fd;
}

.locked-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin: 1.5rem 0;
    text-align: left;
}

.locked-hint .hint-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.locked-hint p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0;
}

.locked-hint strong {
    color: #fbbf24;
}

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

.locked-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    min-width: 80px;
}

.locked-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #c4b5fd;
}

.locked-stat-label {
    font-size: 0.7rem;
    color: rgba(196, 181, 253, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.locked-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: left;
    animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 15px 3px rgba(239, 68, 68, 0.4); }
}

.locked-warning span {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.locked-warning p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    margin: 0;
}

.locked-warning strong {
    color: #fca5a5;
}

.secret-close-btn {
    margin-top: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.7rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.secret-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* === MODAL DEBLOCAGE AMELIORE === */
.secret-unlock-content {
    position: relative;
    overflow: hidden;
}

.secret-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    animation: confettiFall linear forwards;
    border-radius: 3px;
}

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

.secret-unlock-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unlock-rings {
    position: absolute;
    inset: 0;
}

.ring {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: ringPulse 2s ease-in-out infinite;
}

.ring-1 {
    border-color: rgba(139, 92, 246, 0.6);
    animation-delay: 0s;
}

.ring-2 {
    inset: 10px;
    border-color: rgba(168, 85, 247, 0.5);
    animation-delay: 0.3s;
}

.ring-3 {
    inset: 20px;
    border-color: rgba(192, 132, 252, 0.4);
    animation-delay: 0.6s;
}

@keyframes ringPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 1;
    }
}

.secret-icon-large {
    font-size: 4rem;
    animation: iconBounce 1s ease-out, iconGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8));
    z-index: 1;
}

@keyframes iconBounce {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes iconGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8)); }
    50% { filter: drop-shadow(0 0 40px rgba(168, 85, 247, 1)); }
}

.unlock-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.sparkle {
    font-size: 1.5rem;
    animation: sparkleAnim 1.5s ease-in-out infinite;
}

.sparkle:last-child {
    animation-delay: 0.5s;
}

@keyframes sparkleAnim {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
}

.unlock-title {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShine 2s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
}

@keyframes titleShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.unlock-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
}

.unlock-subtitle strong {
    color: #c4b5fd;
}

.secret-reveal-box {
    position: relative;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.reveal-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    animation: revealGlowPulse 3s ease-in-out infinite;
}

@keyframes revealGlowPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.reveal-label {
    position: relative;
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.secret-game-name {
    position: relative;
    font-size: 2.2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 1rem;
    text-shadow: none;
    filter: drop-shadow(0 2px 10px rgba(139, 92, 246, 0.5));
}

.game-features {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.feature {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

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

.unlock-dare {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.btn-chaos-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
    background-size: 200% 200%;
    color: white;
    border: none;
    padding: 1.2rem 2rem;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: btnGradient 3s ease-in-out infinite;
    box-shadow: 0 5px 25px rgba(139, 92, 246, 0.5);
}

@keyframes btnGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.btn-chaos-play:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.6);
}

.btn-chaos-play:active {
    transform: translateY(0) scale(0.98);
}

.btn-chaos-icon {
    font-size: 1.3rem;
    animation: iconSpin 3s linear infinite;
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-chaos-text {
    flex: 1;
}

.btn-chaos-arrow {
    font-size: 1.2rem;
    animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.btn-later {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.btn-later:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* === TABS SECRET (Scores, Top100, Succès) === */
.secret-tab,
.secret-game-card,
.secret-filter {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2)) !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    position: relative;
    overflow: hidden;
}

.secret-tab::before,
.secret-game-card::before,
.secret-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: secret-shine 3s ease-in-out infinite;
}

@keyframes secret-shine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.chaos-badge {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3)) !important;
    border: 2px solid rgba(139, 92, 246, 0.6) !important;
}

.chaos-record {
    border-color: rgba(139, 92, 246, 0.5) !important;
}

/* === ECRAN JEU CHAOS ALPIN === */
#screen-chaos {
    background: linear-gradient(180deg, #0a0a1a 0%, #1a0a2e 50%, #0a0a1a 100%);
}

.chaos-game {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

/* Header Chaos */
.chaos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.2), transparent);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chaos-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.chaos-logo {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
}

.chaos-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #c4b5fd;
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
    letter-spacing: 1px;
}

.chaos-stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.chaos-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 0.4rem 0.8rem;
    min-width: 65px;
}

.chaos-stat .stat-label {
    font-size: 0.6rem;
    color: rgba(196, 181, 253, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chaos-stat .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c4b5fd;
}

.chaos-stat.lives .stat-value {
    color: #f87171;
}

.btn-chaos {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-chaos:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
    transform: scale(1.05);
}

/* Container principal */
.chaos-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
}

/* Arene de jeu */
.chaos-arena {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 500px;
    background: linear-gradient(180deg, rgba(15, 5, 30, 0.9), rgba(10, 5, 25, 0.95));
    border: 3px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.2),
        inset 0 0 50px rgba(139, 92, 246, 0.05);
}

.chaos-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

/* Joueur */
.chaos-player {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6));
    transition: left 0.05s linear;
    z-index: 10;
}

.chaos-player.shielded::after {
    content: '';
    position: absolute;
    inset: -15px;
    border: 3px solid rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    animation: shieldPulse 1s ease-in-out infinite;
}

@keyframes shieldPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Projectiles du joueur */
.chaos-bullet {
    position: absolute;
    width: 8px;
    height: 20px;
    background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
    z-index: 5;
}

/* Obstacles à éviter */
.chaos-obstacle {
    position: absolute;
    font-size: 1.8rem;
    transition: transform 0.1s ease;
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Noisettes à collecter */
.chaos-nut {
    position: absolute;
    font-size: 1.5rem;
    z-index: 6;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
    animation: nutFloat 1s ease-in-out infinite;
}

.chaos-nut.rare {
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
    animation: nutGlow 0.5s ease-in-out infinite;
}

.chaos-nut.heals {
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.8));
    animation: heartPulse 0.8s ease-in-out infinite;
}

@keyframes nutFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

@keyframes nutGlow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Joueur invincible (après avoir été touché) */
.chaos-player.invincible {
    animation: invincibleBlink 0.2s ease-in-out infinite;
}

@keyframes invincibleBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Flash rouge quand touché */
.chaos-arena.hit-flash {
    animation: hitFlash 0.2s ease;
}

@keyframes hitFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(239, 68, 68, 0.3); }
}

/* Ennemis (ancien code gardé pour compatibilité) */
.chaos-enemy {
    position: absolute;
    font-size: 1.8rem;
    transition: transform 0.1s ease;
    z-index: 5;
}

.chaos-enemy.hit {
    animation: enemyHit 0.2s ease;
}

@keyframes enemyHit {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(2); }
}

.chaos-enemy.boss {
    font-size: 4rem;
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.6));
}

/* Différents types de boss */
.chaos-boss-mega {
    font-size: 5rem !important;
    filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.8)) !important;
    animation: megaBossPulse 1s ease-in-out infinite !important;
}

.chaos-boss-ultra {
    font-size: 6rem !important;
    filter: drop-shadow(0 0 40px rgba(239, 68, 68, 1)) drop-shadow(0 0 60px rgba(251, 191, 36, 0.8)) !important;
    animation: ultraBossPulse 0.5s ease-in-out infinite !important;
}

@keyframes megaBossPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes ultraBossPulse {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.15) rotate(2deg); }
}

/* Ennemis gelés */
.chaos-enemy.frozen {
    filter: hue-rotate(180deg) brightness(1.5) !important;
    animation: frozenShake 0.3s ease-in-out infinite !important;
}

@keyframes frozenShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Screen shake */
.chaos-arena.shake {
    animation: screenShake 0.5s ease-in-out;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-10px, -5px); }
    20% { transform: translate(10px, 5px); }
    30% { transform: translate(-8px, 3px); }
    40% { transform: translate(8px, -3px); }
    50% { transform: translate(-5px, 5px); }
    60% { transform: translate(5px, -5px); }
    70% { transform: translate(-3px, 2px); }
    80% { transform: translate(3px, -2px); }
    90% { transform: translate(-1px, 1px); }
}

/* Notification de combo */
.chaos-combo-notification {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: comboPopup 0.8s ease-out forwards;
    z-index: 200;
    pointer-events: none;
}

.chaos-combo-notification .combo-count {
    font-size: 3rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.5);
}

.chaos-combo-notification .combo-bonus {
    font-size: 1.5rem;
    font-weight: 700;
    color: #34d399;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
}

@keyframes comboPopup {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}

/* Near-miss popup */
.chaos-near-miss-popup {
    position: absolute;
    bottom: 20%;
    transform: translateX(-50%);
    padding: 0.3rem 0.8rem;
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.9), rgba(139, 92, 246, 0.9));
    border: 2px solid #c084fc;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 0 10px rgba(168, 85, 247, 1);
    animation: nearMissPopup 0.8s ease-out forwards;
    z-index: 150;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes nearMissPopup {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    30% { transform: translateX(-50%) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 0; }
}

/* New record popup */
.chaos-new-record-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 3rem;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95));
    border: 3px solid #fcd34d;
    border-radius: 20px;
    animation: newRecordPopup 2.5s ease-out forwards;
    z-index: 300;
    pointer-events: none;
}

.chaos-new-record-popup .record-icon {
    font-size: 3rem;
    animation: trophyBounce 0.5s ease-in-out infinite;
}

.chaos-new-record-popup .record-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes newRecordPopup {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    25% { transform: translate(-50%, -50%) scale(1); }
    85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

@keyframes trophyBounce {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
}

/* Record glow effect */
.new-record-glow {
    color: #fbbf24 !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8), 0 0 20px rgba(251, 191, 36, 0.6);
    animation: recordGlow 1s ease-in-out infinite;
}

@keyframes recordGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(251, 191, 36, 0.8), 0 0 20px rgba(251, 191, 36, 0.6); }
    50% { text-shadow: 0 0 20px rgba(251, 191, 36, 1), 0 0 40px rgba(251, 191, 36, 0.8); }
}

/* Multiplier stat styling */
.multiplier-stat {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3)) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

.multiplier-stat .chaos-value {
    color: #f87171 !important;
}

/* Best score stat styling */
.best-stat {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.3)) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
}

.best-stat .chaos-value {
    color: #fbbf24 !important;
}

/* Types d'ennemis spéciaux */
.chaos-enemy-skull {
    animation: skullHunt 0.5s ease-in-out infinite;
}

@keyframes skullHunt {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.chaos-enemy-ghost {
    transition: opacity 0.3s ease;
}

.chaos-enemy-meteor {
    animation: meteorSpin 0.5s linear infinite;
}

@keyframes meteorSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.chaos-enemy-reaper {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
}

.chaos-enemy-demon {
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6));
    animation: demonGlow 0.8s ease-in-out infinite;
}

@keyframes demonGlow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6)); }
    50% { filter: drop-shadow(0 0 25px rgba(239, 68, 68, 1)); }
}

.chaos-enemy-dragon {
    filter: drop-shadow(0 0 20px rgba(251, 146, 60, 0.7));
    animation: dragonFlame 0.6s ease-in-out infinite;
}

@keyframes dragonFlame {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(251, 146, 60, 0.7)); }
    50% { filter: drop-shadow(0 0 35px rgba(251, 146, 60, 1)); }
}

/* Animation téléportation pour le Reaper */
@keyframes teleport {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* Power-ups - TOUJOURS VISIBLES au dessus des ennemis */
.chaos-powerup {
    position: absolute;
    font-size: 2rem;
    animation: powerupFloat 1.5s ease-in-out infinite, powerupGlow 1s ease-in-out infinite;
    z-index: 50;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.9));
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    padding: 8px;
}

.chaos-powerup::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(251, 191, 36, 0.6);
    border-radius: 50%;
    animation: powerupRing 1s ease-in-out infinite;
}

@keyframes powerupFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.15); }
}

@keyframes powerupGlow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.9)); }
    50% { filter: drop-shadow(0 0 25px rgba(251, 191, 36, 1)); }
}

@keyframes powerupRing {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0; }
}

/* Effets de power-up actifs */
.chaos-arena.slowmo {
    filter: hue-rotate(180deg) saturate(0.7);
}

.chaos-arena.slowmo::after {
    content: 'SLOW-MO';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(59, 130, 246, 0.8);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    z-index: 100;
}

/* Indicateur de vague */
.chaos-wave-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 800;
    color: #c4b5fd;
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.8);
    opacity: 0;
    animation: waveAnnounce 2s ease-out forwards;
    z-index: 100;
}

@keyframes waveAnnounce {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Overlay de demarrage */
.chaos-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 26, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.chaos-start-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

.chaos-start-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    animation: iconFloat 3s ease-in-out infinite;
}

.chaos-start-content h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #c4b5fd;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.chaos-start-content p {
    color: rgba(196, 181, 253, 0.7);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.chaos-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.chaos-rule {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: #a78bfa;
}

.chaos-powerups-info {
    margin-bottom: 1.5rem;
}

.chaos-powerups-info h4 {
    font-size: 0.85rem;
    color: rgba(196, 181, 253, 0.7);
    margin-bottom: 0.5rem;
}

.chaos-powerup-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.chaos-powerup-item {
    background: rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    color: #c4b5fd;
}

.chaos-play-btn {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chaos-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

/* Footer Chaos */
.chaos-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.8rem;
    background: linear-gradient(0deg, rgba(139, 92, 246, 0.15), transparent);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    flex-wrap: wrap;
}

.chaos-footer-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    color: #a78bfa;
}

.chaos-footer-stat .footer-icon {
    font-size: 1rem;
}

/* Bouton de tir mobile */
.chaos-fire-btn {
    display: none; /* Hidden by default, shown via JS when game starts */
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ef4444, #dc2626);
    border: 4px solid rgba(255, 255, 255, 0.3);
    color: white;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    z-index: 1000;
    box-shadow:
        0 5px 25px rgba(239, 68, 68, 0.5),
        inset 0 2px 10px rgba(255, 255, 255, 0.2);
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.chaos-fire-btn .fire-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.chaos-fire-btn .fire-text {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chaos-fire-btn:active {
    transform: scale(0.9);
    box-shadow:
        0 2px 15px rgba(239, 68, 68, 0.6),
        inset 0 2px 10px rgba(255, 255, 255, 0.3);
}

/* Taille du bouton sur mobile */
@media (max-width: 480px) {
    .chaos-fire-btn {
        width: 70px;
        height: 70px;
        bottom: 20px;
        right: 20px;
    }

    .chaos-fire-btn .fire-icon {
        font-size: 1.5rem;
    }

    .chaos-fire-btn .fire-text {
        font-size: 0.6rem;
    }
}

/* === SYSTEME DE SUCCES COLLECTABLES === */

/* Carte succes cliquable (non collecte mais debloque) */
.achievement-card.claimable {
    cursor: pointer;
    position: relative;
    animation: claimablePulse 2s ease-in-out infinite;
    border-color: rgba(251, 191, 36, 0.6) !important;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)) !important;
}

@keyframes claimablePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 25px rgba(251, 191, 36, 0.5); }
}

.achievement-card.claimable:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.4);
}

.claim-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(251, 191, 36, 0.4);
    animation: badgeBounce 1s ease-in-out infinite;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Succes collecte */
.achievement-card.collected {
    border-color: rgba(34, 197, 94, 0.5) !important;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1)) !important;
}

.collected-check {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.4);
}

/* Compteur de progression des succes */
.achievements-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 15px;
}

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

.progress-item .progress-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #c4b5fd;
}

.progress-item .progress-label {
    font-size: 0.75rem;
    color: rgba(196, 181, 253, 0.7);
    text-transform: uppercase;
}

.progress-bar-wrapper {
    flex: 1;
    max-width: 200px;
    height: 10px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Animation de collecte */
@keyframes collectBurst {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 0; }
}

.achievement-card.collecting {
    animation: collectBurst 0.5s ease-out forwards;
}

/* Toast notification special succes */
.toast.achievement-toast {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95)) !important;
    border-color: rgba(251, 191, 36, 0.8) !important;
}

.toast.achievement-toast .toast-title {
    color: #1a1a2e !important;
}

.toast.achievement-toast .toast-message {
    color: rgba(26, 26, 46, 0.8) !important;
}

/* === CHAOS ALPIN RESPONSIVE === */
@media (max-width: 768px) {
    .chaos-header {
        padding: 0.6rem 0.8rem;
    }

    .chaos-logo {
        font-size: 1.6rem;
    }

    .chaos-name {
        font-size: 1.1rem;
    }

    .chaos-stats {
        width: 100%;
        justify-content: center;
    }

    .chaos-stat {
        padding: 0.3rem 0.6rem;
        min-width: 55px;
    }

    .chaos-stat .stat-value {
        font-size: 1rem;
    }

    .btn-chaos {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .chaos-arena {
        height: 400px;
        max-width: 100%;
        border-radius: 15px;
    }

    .chaos-player {
        font-size: 2rem;
    }

    .chaos-enemy {
        font-size: 1.5rem;
    }

    .chaos-enemy.boss {
        font-size: 3rem;
    }

    .chaos-start-content {
        padding: 1.5rem;
    }

    .chaos-start-icon {
        font-size: 3rem;
    }

    .chaos-start-content h2 {
        font-size: 1.4rem;
    }

    .chaos-play-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    .chaos-footer-stat {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Secret modal responsive */
    .secret-modal-content {
        padding: 1.5rem;
    }

    .secret-modal-icon {
        font-size: 3.5rem;
    }

    .secret-modal-title {
        font-size: 1.4rem;
    }

    .secret-modal-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    /* Achievements progress responsive */
    .achievements-progress {
        flex-direction: column;
        gap: 0.8rem;
    }

    .progress-bar-wrapper {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .chaos-header {
        padding: 0.5rem;
    }

    .chaos-info {
        gap: 0.5rem;
    }

    .chaos-logo {
        font-size: 1.4rem;
    }

    .chaos-name {
        font-size: 0.95rem;
    }

    .chaos-stat {
        padding: 0.25rem 0.5rem;
        min-width: 50px;
    }

    .chaos-stat .stat-label {
        font-size: 0.5rem;
    }

    .chaos-stat .stat-value {
        font-size: 0.9rem;
    }

    .btn-chaos {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .chaos-arena {
        height: 350px;
        border-radius: 12px;
    }

    .chaos-player {
        font-size: 1.8rem;
        bottom: 20px;
    }

    .chaos-enemy {
        font-size: 1.3rem;
    }

    .chaos-enemy.boss {
        font-size: 2.5rem;
    }

    .chaos-bullet {
        width: 6px;
        height: 15px;
    }

    .chaos-powerup {
        font-size: 1.2rem;
    }

    .chaos-wave-indicator {
        font-size: 2rem;
    }

    .chaos-start-icon {
        font-size: 2.5rem;
    }

    .chaos-start-content h2 {
        font-size: 1.2rem;
    }

    .chaos-start-content p {
        font-size: 0.9rem;
    }

    .chaos-rule {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    .chaos-play-btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }

    .chaos-footer {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .chaos-footer-stat {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Secret card responsive */
    .secret-progress {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }

    .secret-badge {
        font-size: 0.55rem;
        padding: 0.2rem 0.5rem;
    }

    /* Secret modal responsive */
    .secret-modal-content {
        padding: 1.2rem;
    }

    .secret-modal-icon {
        font-size: 3rem;
    }

    .secret-modal-title {
        font-size: 1.2rem;
    }

    .secret-modal-subtitle {
        font-size: 0.95rem;
    }

    .secret-modal-text {
        font-size: 0.9rem;
    }

    .secret-modal-btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 360px) {
    .chaos-stat {
        min-width: 45px;
        padding: 0.2rem 0.4rem;
    }

    .chaos-stat .stat-label {
        display: none;
    }

    .chaos-arena {
        height: 300px;
    }

    .chaos-player {
        font-size: 1.5rem;
    }

    .chaos-enemy {
        font-size: 1.1rem;
    }

    .chaos-enemy.boss {
        font-size: 2rem;
    }

    .chaos-start-content h2 {
        font-size: 1rem;
    }

    .chaos-rules {
        gap: 0.3rem;
    }

    .chaos-rule {
        padding: 0.2rem 0.5rem;
        font-size: 0.65rem;
    }

    .chaos-powerups-info {
        display: none;
    }
}

/* ============================================
   NOISETTE CLICKER - DESIGN
   ============================================ */

/* Carte de jeu dans le menu */
.noise-card {
    background: linear-gradient(135deg, #92400e 0%, #78350f 50%, #451a03 100%);
}

.noise-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(146, 64, 14, 0.4);
}

.noise-snow {
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
}

.noise-glow {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
}

.noise-bg {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.noise-title {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.noise-pc-tip {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #93c5fd;
    margin: 0.5rem 0;
    text-align: center;
}

/* Ecran de jeu */
#screen-noiseClicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #451a03 0%, #78350f 50%, #92400e 100%);
    z-index: 50;
    overflow: hidden;
}

/* Container principal */
.noise-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
    position: relative;
}

/* Header avec stats */
.noise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    border: 2px solid rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

.noise-back-btn {
    background: rgba(239, 68, 68, 0.3);
    border: 2px solid rgba(239, 68, 68, 0.5);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.noise-back-btn:hover {
    background: rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

.noise-stats {
    display: flex;
    gap: 1.5rem;
}

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

.noise-stat .stat-icon {
    font-size: 1.2rem;
}

.noise-stat .stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.noise-stat .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

/* Zone de jeu principale */
.noise-game-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Overlay de debut */
.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.noise-start-content {
    text-align: center;
    padding: 2rem;
    max-width: 400px;
}

.noise-start-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: noiseBounce 1s ease-in-out infinite;
}

@keyframes noiseBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}

.noise-start-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.noise-start-content p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.noise-rules {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.noise-rule {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1rem;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.noise-rule .rule-icon {
    font-size: 1.3rem;
}

.noise-rule .rule-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Sélecteur de difficulté Noisette */
.noise-difficulty-selector {
    margin: 1.5rem 0;
    text-align: center;
}

.diff-selector-title {
    display: block;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.noise-diff-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.noise-diff-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 75px;
}

.noise-diff-btn .diff-icon {
    font-size: 1.4rem;
}

.noise-diff-btn .diff-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.noise-diff-btn:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
    transform: translateY(-2px);
}

.noise-diff-btn.selected {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(217, 119, 6, 0.3));
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.noise-diff-btn.selected .diff-name {
    color: #fbbf24;
}

/* Couleurs spécifiques par difficulté */
.noise-diff-btn[data-diff="easy"].selected {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.3), rgba(34, 197, 94, 0.3));
    border-color: #4ade80;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.noise-diff-btn[data-diff="easy"].selected .diff-name {
    color: #4ade80;
}

.noise-diff-btn[data-diff="hard"].selected {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(234, 88, 12, 0.3));
    border-color: #fb923c;
    box-shadow: 0 0 15px rgba(251, 146, 60, 0.3);
}

.noise-diff-btn[data-diff="hard"].selected .diff-name {
    color: #fb923c;
}

.noise-diff-btn[data-diff="extreme"].selected {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
    animation: extremePulse 1.5s ease-in-out infinite;
}

.noise-diff-btn[data-diff="extreme"].selected .diff-name {
    color: #ef4444;
}

@keyframes extremePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.5); }
}

/* Preview des bonus spéciaux */
.noise-bonuses-preview {
    margin-bottom: 1rem;
    padding: 0.8rem 1.2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-title {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.bonuses-list {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 1.5rem;
}

.bonuses-list span {
    cursor: help;
    transition: transform 0.2s ease;
}

.bonuses-list span:hover {
    transform: scale(1.2);
}

.noise-play-btn {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border: none;
    color: #451a03;
    padding: 1rem 3rem;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 30px rgba(251, 191, 36, 0.4);
}

.noise-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.6);
}

/* Bouton Classement Mondial Noisette */
.btn-leaderboard-noise {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-leaderboard-noise:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg, #a78bfa, #818cf8);
}

/* Zone de clic */
.noise-click-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
}

/* Noisette principale */
.noise-main-nut {
    width: 180px;
    height: 180px;
    font-size: 8rem;
    background: radial-gradient(circle at 30% 30%, #fbbf24, #92400e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(251, 191, 36, 0.3),
        inset 0 -10px 30px rgba(0, 0, 0, 0.3);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.noise-main-nut:hover {
    transform: scale(1.05);
}

.noise-main-nut:active {
    transform: scale(0.95);
}

.noise-main-nut.clicked {
    animation: nutClick 0.15s ease;
}

@keyframes nutClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Score flottant */
.noise-score-display {
    font-size: 4rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow:
        0 0 20px rgba(251, 191, 36, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Texte flottant au clic */
.noise-floating {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
    pointer-events: none;
    animation: noiseFloat 1s ease-out forwards;
    z-index: 100;
}

@keyframes noiseFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(1.5);
    }
}

/* Bonus qui apparaissent */
.noise-bonus {
    position: absolute;
    font-size: 3rem;
    cursor: pointer;
    animation: bonusAppear 0.3s ease, bonusFloat 2s ease-in-out infinite;
    z-index: 50;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    transition: transform 0.1s ease;
}

.noise-bonus:hover {
    transform: scale(1.2);
}

@keyframes bonusAppear {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes bonusFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Panel des upgrades - ancien style (remplacé par la version améliorée plus bas) */
/* .noise-upgrades-panel - voir section "Panel upgrades amélioré" ligne ~21324 */

.noise-upgrade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 1.2rem;
    background: rgba(251, 191, 36, 0.1);
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.noise-upgrade:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
    transform: translateY(-3px);
}

.noise-upgrade:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.noise-upgrade .upgrade-icon {
    font-size: 1.5rem;
}

.noise-upgrade .upgrade-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

.noise-upgrade .upgrade-cost {
    font-size: 0.75rem;
    color: #fbbf24;
    font-weight: 600;
}

.noise-upgrade .upgrade-level {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ========== NOISETTE CLICKER - INTERFACE AMELIOREE ========== */

/* Fond dynamique par difficulté */
.noise-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.noise-bg-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.noise-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    animation: bgGlowPulse 3s ease-in-out infinite;
}

@keyframes bgGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

/* Couleurs de fond par difficulté */
.noise-container.diff-easy .noise-bg-glow {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.25) 0%, transparent 70%);
}

.noise-container.diff-normal .noise-bg-glow {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
}

.noise-container.diff-hard .noise-bg-glow {
    background: radial-gradient(circle, rgba(251, 146, 60, 0.25) 0%, transparent 70%);
}

.noise-container.diff-extreme .noise-bg-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    animation: bgGlowPulseExtreme 1.5s ease-in-out infinite;
}

@keyframes bgGlowPulseExtreme {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

/* Particule flottante */
.noise-particle {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.3;
    animation: particleFloat 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

/* Barre de progression du timer */
.noise-timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20;
    overflow: hidden;
}

.noise-timer-progress {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 0.1s linear;
    position: relative;
}

.noise-timer-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
    animation: timerGlowMove 1s ease-in-out infinite;
}

@keyframes timerGlowMove {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Couleurs timer par difficulté */
.noise-container.diff-easy .noise-timer-progress {
    background: linear-gradient(90deg, #4ade80, #22c55e);
}

.noise-container.diff-hard .noise-timer-progress {
    background: linear-gradient(90deg, #fb923c, #ea580c);
}

.noise-container.diff-extreme .noise-timer-progress {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    animation: timerPulseExtreme 0.5s ease-in-out infinite;
}

@keyframes timerPulseExtreme {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* Badge de difficulté pendant le jeu */
.noise-diff-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 2px solid rgba(251, 191, 36, 0.3);
    z-index: 15;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.noise-diff-badge.visible {
    opacity: 1;
    transform: translateX(0);
}

.diff-badge-icon {
    font-size: 1.2rem;
}

.diff-badge-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.diff-badge-mult {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    background: rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    color: #fbbf24;
}

/* Couleurs badge par difficulté */
.noise-container.diff-easy .noise-diff-badge {
    border-color: rgba(74, 222, 128, 0.5);
}
.noise-container.diff-easy .diff-badge-mult {
    background: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.noise-container.diff-hard .noise-diff-badge {
    border-color: rgba(251, 146, 60, 0.5);
}
.noise-container.diff-hard .diff-badge-mult {
    background: rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

.noise-container.diff-extreme .noise-diff-badge {
    border-color: rgba(239, 68, 68, 0.5);
    animation: badgePulseExtreme 1s ease-in-out infinite;
}
.noise-container.diff-extreme .diff-badge-mult {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

@keyframes badgePulseExtreme {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); }
}

/* Cercles d'effet autour de la noisette */
.noise-click-rings {
    position: absolute;
    width: 250px;
    height: 250px;
    pointer-events: none;
}

.click-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.2);
    opacity: 0;
}

.click-ring.ring-1 { width: 200px; height: 200px; }
.click-ring.ring-2 { width: 250px; height: 250px; }
.click-ring.ring-3 { width: 300px; height: 300px; }

.noise-click-rings.pulse .click-ring {
    animation: ringPulse 0.6s ease-out forwards;
}

.click-ring.ring-2 { animation-delay: 0.1s; }
.click-ring.ring-3 { animation-delay: 0.2s; }

@keyframes ringPulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* Compteur de combo */
.noise-combo-display {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 2px solid rgba(251, 191, 36, 0.3);
    z-index: 15;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.noise-combo-display.visible {
    opacity: 1;
    transform: translateX(0);
}

.combo-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.combo-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.noise-combo-display.combo-high .combo-value {
    color: #f97316;
    animation: comboGlow 0.3s ease infinite alternate;
}

.noise-combo-display.combo-max .combo-value {
    color: #ef4444;
    animation: comboGlow 0.15s ease infinite alternate;
}

@keyframes comboGlow {
    0% { text-shadow: 0 0 10px currentColor; transform: scale(1); }
    100% { text-shadow: 0 0 25px currentColor; transform: scale(1.1); }
}

/* Preview des meilleurs scores */
.noise-best-scores-preview {
    margin: 1rem 0;
    padding: 0.8rem 1.2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.best-preview-title {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
    text-align: center;
}

.best-scores-list {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.best-score-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.best-score-item span:last-child {
    font-weight: 700;
    color: #fbbf24;
}

/* Détails de difficulté */
.noise-diff-btn .diff-detail {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.2rem;
}

.noise-diff-btn.selected .diff-detail {
    color: rgba(255, 255, 255, 0.7);
}

/* Panel upgrades amélioré - masqué par défaut, affiché au démarrage du jeu */
.noise-upgrades-panel {
    display: none;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 2px solid rgba(251, 191, 36, 0.2);
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Afficher le panel quand le jeu est actif */
.noise-upgrades-panel.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.upgrades-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.upgrades-header .upgrades-icon {
    font-size: 1.3rem;
}

.upgrades-header .upgrades-title {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0;
    flex: 1;
    margin-left: 0.5rem;
}

.upgrades-header .upgrades-score {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fbbf24;
}

.upgrades-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.noise-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: rgba(251, 191, 36, 0.1);
    border: 2px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.noise-upgrade-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.noise-upgrade-btn:not(.disabled):hover::before {
    left: 100%;
}

.noise-upgrade-btn:not(.disabled):hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
    transform: translateX(5px);
}

.noise-upgrade-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.upgrade-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.upgrade-info .upgrade-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.upgrade-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.upgrade-details .upgrade-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
}

.upgrade-details .upgrade-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

.upgrade-price {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 20px;
}

.upgrade-price .upgrade-cost {
    font-size: 1rem;
    font-weight: 800;
    color: #fbbf24;
}

.upgrade-price .upgrade-currency {
    font-size: 1rem;
}

.upgrade-level {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.noise-upgrade-btn:not(.disabled) .upgrade-level {
    color: #4ade80;
}

/* Footer avec infos amélioré */
.noise-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.8rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.noise-stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.8rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.noise-stat-mini.highlight {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.noise-stat-mini .mini-icon {
    font-size: 1rem;
}

.noise-stat-mini .mini-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.noise-stat-mini .mini-value {
    font-size: 1rem;
    font-weight: 800;
    color: #fbbf24;
}

.noise-power-info, .noise-auto-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.noise-power-info span:first-child,
.noise-auto-info span:first-child {
    font-size: 1.2rem;
}

/* Effet Golden actif */
.noise-golden-active {
    animation: goldenGlow 0.5s ease infinite alternate;
}

@keyframes goldenGlow {
    0% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: 0 0 60px rgba(255, 215, 0, 0.8); }
}

/* Effet Frenzy actif */
.noise-frenzy-active .noise-main-nut {
    animation: frenzyShake 0.1s ease infinite;
}

@keyframes frenzyShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Scores dans la page scores */
.noise-scores-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(146, 64, 14, 0.3), rgba(120, 53, 15, 0.3));
    border-radius: 20px;
    border: 2px solid rgba(251, 191, 36, 0.3);
    margin-bottom: 1.5rem;
}

.noise-badge-icon {
    font-size: 3rem;
}

.noise-badge-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fbbf24;
}

.noise-badge-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.noise-global-stats {
    background: rgba(146, 64, 14, 0.2);
    border-color: rgba(251, 191, 36, 0.2);
}

.noise-scores-note {
    text-align: center;
    padding: 1rem;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    margin-top: 1rem;
}

.noise-scores-note p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0.3rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .noise-header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .noise-stats {
        gap: 1rem;
    }

    .noise-stat .stat-value {
        font-size: 1rem;
    }

    .noise-main-nut {
        width: 140px;
        height: 140px;
        font-size: 6rem;
    }

    .noise-score-display {
        font-size: 2.5rem;
    }

    .noise-upgrades-panel {
        gap: 0.5rem;
    }

    .noise-upgrade {
        padding: 0.5rem 0.8rem;
        min-width: 80px;
    }

    .noise-start-icon {
        font-size: 3rem;
    }

    .noise-start-content h2 {
        font-size: 1.5rem;
    }

    .noise-rule {
        padding: 0.3rem 0.6rem;
    }

    .noise-rule .rule-text {
        font-size: 0.75rem;
    }
}

/* =====================================================
   BARRE DE STATISTIQUES EN LIGNE
   ===================================================== */
.online-stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    margin: 0.5rem auto 1rem;
    max-width: 800px;
}

.online-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.85) 0%, rgba(30, 20, 60, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 30px rgba(139, 92, 246, 0.1);
    position: relative;
    overflow: hidden;
}

/* Effet de brillance sur la barre */
.online-stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: statsBarShine 5s ease-in-out infinite;
}

@keyframes statsBarShine {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.online-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.online-stat:hover {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.online-stat.clickable {
    cursor: pointer;
}

.online-stat.clickable:hover {
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
    transform: scale(1.02);
}

.stat-divider {
    width: 2px;
    height: 28px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(139, 92, 246, 0.4) 50%,
        transparent 100%);
    border-radius: 1px;
}

.stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.stat-dot.pulse-green {
    animation: pulse-green 1.5s ease-in-out infinite;
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 0 10px rgba(34, 197, 94, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 0 15px rgba(34, 197, 94, 0.3);
        transform: scale(1.1);
    }
}

.stat-icon-small {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

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

.stat-value {
    font-size: 1rem;
    font-weight: 800;
    color: #fbbf24;
    margin-left: 0.3rem;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
    transition: all 0.3s ease;
}

/* Animation quand la valeur change */
.stat-value.updated {
    animation: statValueUpdate 0.5s ease;
}

@keyframes statValueUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #22d3ee; }
    100% { transform: scale(1); }
}

/* Couleur différente pour chaque stat */
.online-stat:first-child .stat-value {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.online-stat:nth-child(3) .stat-value {
    color: #22d3ee;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
}

.online-stat:nth-child(5) .stat-value {
    color: #a78bfa;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .online-stats-container {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.5rem;
    }

    .online-stats-bar {
        padding: 0.5rem 1rem;
        border-radius: 18px;
    }

    .online-stats-bar::before {
        display: none;
    }

    .online-stat {
        padding: 0.3rem 0.6rem;
        gap: 0.4rem;
    }

    .stat-divider {
        height: 22px;
    }

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

    .stat-value {
        font-size: 0.85rem;
    }

    .stat-icon-small {
        font-size: 0.95rem;
    }

    .stat-dot {
        width: 8px;
        height: 8px;
    }

    .btn-voir-joueurs {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .online-stats-bar {
        padding: 0.4rem 0.7rem;
        border-radius: 15px;
    }

    .stat-label {
        display: none;
    }

    .online-stat {
        padding: 0.25rem 0.4rem;
        gap: 0.3rem;
    }

    .stat-divider {
        height: 18px;
        width: 1px;
    }

    .stat-value {
        font-size: 0.8rem;
        margin-left: 0.2rem;
    }

    .stat-icon-small {
        font-size: 0.85rem;
    }

    .btn-voir-joueurs .btn-text {
        display: none;
    }

    .btn-voir-joueurs {
        padding: 0.45rem 0.6rem;
        border-radius: 10px;
    }

    .btn-voir-joueurs .btn-icon {
        font-size: 0.9rem;
    }
}

/* =====================================================
   MODAL FEEDBACK / AVIS
   ===================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 1rem;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 2px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

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

.modal-header .modal-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.modal-header h2 {
    font-size: 1.5rem;
    color: white;
    margin: 0;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Formulaire de feedback */
.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(255, 255, 255, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group select {
    cursor: pointer;
}

.form-group select option {
    background: #1a1a2e;
    color: white;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.char-count {
    text-align: right;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Star Rating */
.star-rating {
    display: flex;
    gap: 0.5rem;
    font-size: 2rem;
}

.star-rating .star {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.star-rating .star:hover,
.star-rating .star.active {
    color: #fbbf24;
    transform: scale(1.1);
}

/* Bouton Submit */
.btn-submit-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    color: #1a1a2e;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.btn-submit-feedback:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.3);
}

.btn-submit-feedback:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-submit-feedback .btn-icon {
    font-size: 1.2rem;
}

/* Feedback Success */
.feedback-success {
    text-align: center;
    padding: 2rem;
}

.feedback-success .success-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.feedback-success h3 {
    color: #22c55e;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.feedback-success p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.btn-close-feedback {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.8rem 2rem;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-close-feedback:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-content {
        padding: 1.5rem;
        margin: 0.5rem;
        max-height: 95vh;
    }

    .modal-header .modal-icon {
        font-size: 2.5rem;
    }

    .modal-header h2 {
        font-size: 1.3rem;
    }

    .star-rating {
        font-size: 1.5rem;
    }

    .btn-submit-feedback {
        padding: 0.8rem 1.5rem;
    }
}

/* Bouton Feedback dans le footer */
.feedback-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
}

.feedback-btn:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%) !important;
}

/* =====================================================
   SEARCH BAR - COMPOSANT REUTILISABLE
   ===================================================== */
.search-container {
    padding: 1rem 1.5rem;
    max-width: 500px;
    margin: 0 auto 0.5rem auto;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.4rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(139, 92, 246, 0.05));
    border: 2px solid rgba(34, 211, 238, 0.2);
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.search-box:hover {
    border-color: rgba(34, 211, 238, 0.35);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(139, 92, 246, 0.08));
}

.search-box:focus-within {
    border-color: rgba(34, 211, 238, 0.6);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(139, 92, 246, 0.1));
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.2), 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.search-icon {
    font-size: 1.3rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.search-box:focus-within .search-icon {
    opacity: 1;
}

.search-box input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

.search-clear {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.search-clear:hover {
    background: rgba(239, 68, 68, 0.3);
    opacity: 1;
}

/* Responsive search bar */
@media (max-width: 768px) {
    .search-container {
        padding: 0.8rem 1rem;
    }

    .search-box {
        padding: 0.75rem 1rem;
    }

    .search-box input {
        font-size: 0.95rem;
    }
}

/* =====================================================
   NOUVELLE SECTION SUCCES - DESIGN PROFESSIONNEL
   ===================================================== */

.ach-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: calc(100vh - 60px);
}

/* Header Succès */
.ach-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(10px);
}

.ach-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ach-title-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ach-title-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.4));
}

.ach-title-text h2 {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.ach-title-text p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.2rem 0 0 0;
}

.ach-counter-box {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.6rem 1.2rem;
    border-radius: 30px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.ach-counter-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.ach-counter-total {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

/* Barre de progression */
.ach-progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
    background-size: 200% 100%;
    animation: progressShine 2s linear infinite;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.ach-progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes progressGlow {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* Wrapper des filtres */
.ach-filters-wrapper {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.ach-filters-wrapper::-webkit-scrollbar {
    height: 4px;
}

.ach-filters-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.ach-filters-wrapper::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 2px;
}

/* Filtres Pills */
.ach-filters {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: fit-content;
}

.ach-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.ach-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.ach-pill.active {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.35);
}

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

.pill-text {
    font-weight: 600;
}

.pill-count {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

.ach-pill.active .pill-count {
    background: rgba(0, 0, 0, 0.25);
    color: #1a1a2e;
}

/* Container de la grille */
.ach-grid-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.ach-grid-container::-webkit-scrollbar {
    width: 6px;
}

.ach-grid-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.ach-grid-container::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.3);
    border-radius: 3px;
}

/* Grille des succès */
.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

/* Carte de succès */
.achievement-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.achievement-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
}

.achievement-card:hover::before {
    opacity: 1;
}

/* Succès non débloqué */
.achievement-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
}

.achievement-card.locked:hover {
    opacity: 0.7;
    filter: grayscale(0.3);
}

/* Succès débloqué et collecté */
.achievement-card.unlocked.collected {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.05));
}

.achievement-card.unlocked.collected::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
    font-weight: 700;
}

/* Succès débloqué mais pas collecté (claimable) */
.achievement-card.claimable {
    border-color: rgba(251, 191, 36, 0.5);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
    animation: claimPulse 2s ease-in-out infinite;
}

@keyframes claimPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.2); }
}

.claim-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: badgeBounce 1s ease-in-out infinite;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Icône du succès */
.achievement-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 2px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.achievement-card.unlocked .achievement-icon {
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

/* Info du succès */
.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievement-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* Empty state */
.ach-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.ach-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.ach-empty-text {
    font-size: 1rem;
    font-weight: 500;
}

/* Responsive Succès */
@media (max-width: 768px) {
    .ach-container {
        padding: 0.75rem;
        gap: 1rem;
    }

    .ach-header {
        padding: 1rem;
    }

    .ach-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ach-counter-box {
        align-self: flex-end;
    }

    .ach-title-icon {
        font-size: 2rem;
    }

    .ach-title-text h2 {
        font-size: 1.25rem;
    }

    .ach-grid {
        grid-template-columns: 1fr;
    }

    .pill-text {
        display: none;
    }

    .ach-pill {
        padding: 0.5rem 0.7rem;
    }

    .pill-icon {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .ach-container {
        height: calc(100vh - 50px);
    }

    .achievement-card {
        padding: 0.75rem;
    }

    .achievement-icon {
        width: 42px;
        height: 42px;
        font-size: 1.3rem;
    }

    .achievement-name {
        font-size: 0.9rem;
    }

    .achievement-desc {
        font-size: 0.75rem;
    }
}

/* ========== NOUVELLE PAGE SUCCES ========== */
.ach-mega-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    padding-top: 4rem;
}

.ach-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 16px;
}

.ach-header-icon {
    font-size: 2.5rem;
}

.ach-header-info h2 {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.2rem;
}

.ach-header-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Stats bar */
.ach-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.ach-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.8rem;
    background: rgba(30, 30, 50, 0.8);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.ach-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.1);
}

.ach-stat.highlight {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
    border-color: rgba(251, 191, 36, 0.4);
}

.ach-stat-icon {
    font-size: 1.5rem;
}

.ach-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fbbf24;
}

.ach-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Barre de progression */
.ach-progress-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1.2rem;
    background: rgba(30, 30, 50, 0.6);
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.ach-progress-bar {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #22c55e);
    border-radius: 5px;
    transition: width 0.5s ease;
    width: 0%;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.ach-progress-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fbbf24;
    min-width: 55px;
    text-align: right;
}

/* Filtres */
.ach-filters-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding: 1rem;
    background: rgba(30, 30, 50, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ach-filter-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.ach-filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 45px;
}

.ach-filter-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ach-filter-btn,
.ach-status-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ach-filter-btn:hover,
.ach-status-btn:hover {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--text);
}

.ach-filter-btn.active,
.ach-status-btn.active {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15));
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

/* Grille des succes */
.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.8rem;
}

/* Cartes des succès - Style amélioré */
#screen-achievements .achievement-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#screen-achievements .achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#screen-achievements .achievement-card:hover {
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.15);
}

#screen-achievements .achievement-card.locked {
    opacity: 0.5;
}

#screen-achievements .achievement-card.locked::before {
    background: rgba(100, 100, 100, 0.3);
}

#screen-achievements .achievement-card.unlocked::before,
#screen-achievements .achievement-card.claimable::before {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

#screen-achievements .achievement-card.collected::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

#screen-achievements .achievement-card.claimable {
    cursor: pointer;
    border-color: rgba(251, 191, 36, 0.4);
    animation: achPulse 2s ease-in-out infinite;
}

@keyframes achPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.15); }
}

#screen-achievements .achievement-card.claimable:hover {
    transform: translateX(5px) scale(1.02);
}

#screen-achievements .achievement-card.collected {
    border-color: rgba(34, 197, 94, 0.3);
}

#screen-achievements .achievement-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    flex-shrink: 0;
}

#screen-achievements .achievement-card.locked .achievement-icon {
    filter: grayscale(1);
}

#screen-achievements .achievement-info {
    flex: 1;
    min-width: 0;
}

#screen-achievements .achievement-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

#screen-achievements .achievement-info p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

#screen-achievements .claim-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    padding: 0.25rem 0.6rem;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: badgePulse 1s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

#screen-achievements .collected-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
}

/* Responsive Succès */
@media (max-width: 768px) {
    .ach-mega-wrapper {
        padding: 1rem;
        padding-top: 3.5rem;
    }

    .ach-header {
        flex-direction: row;
        padding: 1rem;
        gap: 0.8rem;
    }

    .ach-header-icon {
        font-size: 2rem;
    }

    .ach-header-info h2 {
        font-size: 1.2rem;
    }

    .ach-header-info p {
        font-size: 0.8rem;
    }

    .ach-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .ach-stat {
        padding: 0.8rem 0.5rem;
    }

    .ach-stat-icon {
        font-size: 1.2rem;
    }

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

    .ach-stat-label {
        font-size: 0.6rem;
    }

    .ach-progress-container {
        padding: 0.6rem 1rem;
    }

    .ach-filters-section {
        padding: 0.8rem;
    }

    .ach-filter-row {
        gap: 0.5rem;
    }

    .ach-filter-label {
        display: none;
    }

    .ach-filter-buttons {
        width: 100%;
        justify-content: center;
    }

    .ach-filter-btn,
    .ach-status-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
    }

    .ach-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    #screen-achievements .achievement-card {
        padding: 0.8rem 1rem;
    }

    #screen-achievements .achievement-icon {
        width: 42px;
        height: 42px;
        font-size: 1.5rem;
    }

    #screen-achievements .achievement-info h4 {
        font-size: 0.85rem;
    }

    #screen-achievements .achievement-info p {
        font-size: 0.75rem;
    }
}

/* ========================================
   BANNIERE RESET HEBDOMADAIRE TOP100
   ======================================== */

.lb-reset-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.15) 0%,
        rgba(245, 158, 11, 0.1) 50%,
        rgba(217, 119, 6, 0.15) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    box-shadow:
        0 4px 15px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lb-reset-banner .reset-icon {
    font-size: 1.3rem;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.lb-reset-banner .reset-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.lb-reset-banner .reset-text strong {
    color: #fbbf24;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.lb-reset-banner .reset-info {
    font-size: 1rem;
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.lb-reset-banner .reset-info:hover {
    opacity: 1;
}

/* Mobile */
@media (max-width: 480px) {
    .lb-reset-banner {
        padding: 0.6rem 1rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .lb-reset-banner .reset-text {
        font-size: 0.8rem;
    }

    .lb-reset-banner .reset-icon {
        font-size: 1.1rem;
    }
}

/* =====================================================
   FIX ECRANS - AFFICHAGE GARANTI
   ===================================================== */
#screen-memory.active,
#screen-clicker.active,
#screen-quiz.active,
#screen-catch.active,
#screen-simon.active,
#screen-noiseClicker.active,
#screen-pacman.active,
#screen-pong.active,
#screen-space-invaders.active,
#screen-breakout.active,
#screen-flappy.active,
#screen-2048.active,
#screen-taquin.active,
#screen-sudoku.active,
#screen-shop.active,
#screen-scores.active,
#screen-settings.active,
#screen-achievements.active,
#screen-leaderboard.active,
#screen-feedback.active,
#screen-players.active,
#screen-difficulty.active,
#screen-runner.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 100 !important;
}

#screen-memory.active .game-wrapper,
#screen-memory.active .titan-game,
#screen-clicker.active .clicker-container,
#screen-quiz.active .game-wrapper,
#screen-catch.active .game-wrapper,
#screen-simon.active .game-wrapper,
#screen-noiseClicker.active .noise-clicker-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
}