/* [2026-08-26] @import REMONTES EN TETE. La regle CSS impose que @import precede
   toute autre regle : places au milieu du fichier (l.3306 et l.4013), les deux
   familles de polices Google etaient purement ignorees par le navigateur. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,700;6..72,800&family=Manrope:wght@400;500;700&family=Space+Grotesk:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   css/main.css
   Source: concatenation des blocs <style id="main"> + login-luxury-styles
   couvrant la zone <head> et le debut du <body> (avant les packs FX)
   ============================================================ */

/* ===== BLOC STYLE lignes 192-3397 (id=main) ===== */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    /*  ---------------------------------------------------------- 
       |  VARIABLES CSS GLOBALES (Custom Properties)               |
       |  Définissent les couleurs du thème entier du jeu.         |
       |  Modifier ici change TOUTE l\'apparence du jeu.            |
       |  --primary : couleur principale (rouge, utilisée partout) |
       |  --accent  : couleur dorée (or, gemmes, récompenses)      |
       |  --card-bg : fond semi-transparent des cartes/panels      |
       |  --blood/--void : couleurs thématiques sombres            |
        ----------------------------------------------------------  */
    :root {
        --primary: #ff4444;
        --primary-glow: rgba(255, 68, 68, 0.5);
        --secondary: #8a2be2;
        --accent: #ffd700;
        --danger: #ff0000;
        --dark: #0a0005;
        --darker: #030002;
        --card-bg: rgba(15, 5, 10, 0.95);
        --blood: #8b0000;
        --void: #1a0020;
    }
    
    /* Corps de la page : police par défaut, fond très sombre, texte blanc */
    body {
        font-family: 'Rajdhani', sans-serif; /* Police moderne pour l\'UI du jeu */
        background: var(--darker);
        color: #fff;
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* ========== FOND ANIMÉ SINISTRE ========== */
    body::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: 
            radial-gradient(ellipse at 20% 20%, rgba(139, 0, 0, 0.2) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(255, 0, 0, 0.05) 0%, transparent 70%),
            linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(139, 0, 0, 0.1) 100%);
        animation: bgDanger 8s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
    }
    
    body::after {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
        opacity: 0.03;
        pointer-events: none;
        z-index: -1;
    }
    
    @keyframes bgDanger {
        0%, 100% { opacity: 0.7; }
        50% { opacity: 1; }
    }
    
    @keyframes voidPulse {
        0%, 100% { filter: drop-shadow(0 0 20px #8a2be2) brightness(1); transform: scale(1); }
        50% { filter: drop-shadow(0 0 40px #ff00ff) brightness(1.3); transform: scale(1.05); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    
    @keyframes flashOut {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
    
    @keyframes rewardBounce {
        0%, 100% { transform: scale(1) rotate(0deg); }
        25% { transform: scale(1.2) rotate(-5deg); }
        50% { transform: scale(1.1) rotate(5deg); }
        75% { transform: scale(1.15) rotate(-3deg); }
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.05); }
    }
    
    @keyframes ultimatePulse {
        0%, 100% { box-shadow: 0 0 15px rgba(138,43,226,0.4); }
        50% { box-shadow: 0 0 30px rgba(255,0,0,0.6), 0 0 50px rgba(138,43,226,0.4); }
    }
    
    @keyframes ultimateFlash {
        0% { opacity: 0; transform: scale(0.5); }
        30% { opacity: 1; transform: scale(1.2); }
        70% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(1.5); }
    }
    
    @keyframes portalPulse {
        0%, 100% { 
            transform: scale(1); 
            filter: drop-shadow(0 0 15px currentColor);
        }
        50% { 
            transform: scale(1.1); 
            filter: drop-shadow(0 0 30px currentColor);
        }
    }
    
    /* ========== EFFETS 3D SANGLANTS ========== */
    @keyframes bloodDrip {
        0% { transform: translateY(-10px); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translateY(100vh); opacity: 0; }
    }
    
    @keyframes bloodPulse {
        0%, 100% { 
            box-shadow: 
                0 0 20px rgba(139,0,0,0.5),
                inset 0 0 30px rgba(139,0,0,0.3);
        }
        50% { 
            box-shadow: 
                0 0 40px rgba(255,0,0,0.7),
                inset 0 0 50px rgba(139,0,0,0.5),
                0 0 80px rgba(139,0,0,0.3);
        }
    }
    
    @keyframes skull3D {
        0%, 100% { transform: perspective(500px) rotateY(-15deg) rotateX(5deg); }
        50% { transform: perspective(500px) rotateY(15deg) rotateX(-5deg); }
    }
    
    @keyframes floatDark {
        0%, 100% { 
            transform: translateY(0) rotateX(0) rotateZ(0);
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
        }
        50% { 
            transform: translateY(-15px) rotateX(5deg) rotateZ(2deg);
            filter: drop-shadow(0 25px 40px rgba(0,0,0,0.9));
        }
    }
    
    /* Effet de perspective 3D sur les cartes */
    .card-3d {
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 0.5s ease;
    }
    
    .card-3d:hover {
        transform: perspective(1000px) rotateY(5deg) rotateX(-5deg) translateZ(20px);
    }
    
    /* Effet de sang qui coule */
    .blood-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(180deg, 
            #8b0000 0%, 
            #5a0000 50%, 
            transparent 100%);
        filter: blur(1px);
        animation: bloodDrip 8s ease-in-out infinite;
    }
    
    /* Bordures sanglantes */
    .border-blood {
        border: 3px solid transparent;
        background-clip: padding-box;
        position: relative;
    }
    
    .border-blood::before {
        content: '';
        position: absolute;
        inset: -3px;
        background: linear-gradient(45deg, #8b0000, #ff0000, #8b0000, #5a0000);
        background-size: 400% 400%;
        animation: bloodFlow 4s ease infinite;
        border-radius: inherit;
        z-index: -1;
    }
    
    @keyframes bloodFlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    /* Texte sanglant */
    .text-blood {
        color: #ff0000;
        text-shadow: 
            0 0 10px #8b0000,
            0 0 20px #ff0000,
            0 0 30px #8b0000,
            2px 2px 4px #000;
        animation: textBlood 2s ease-in-out infinite;
    }
    
    @keyframes textBlood {
        0%, 100% { filter: brightness(1) drop-shadow(0 0 10px #8b0000); }
        50% { filter: brightness(1.3) drop-shadow(0 0 20px #ff0000); }
    }
    
    /* Boutons 3D */
    .btn-3d {
        position: relative;
        transform-style: preserve-3d;
        transform: perspective(500px) translateZ(0);
        transition: all 0.3s ease;
    }
    
    .btn-3d::before {
        content: '';
        position: absolute;
        inset: 0;
        background: inherit;
        border-radius: inherit;
        transform: translateZ(-10px);
        filter: brightness(0.5);
    }
    
    .btn-3d:hover {
        transform: perspective(500px) translateZ(15px) rotateX(-5deg);
    }
    
    .btn-3d:active {
        transform: perspective(500px) translateZ(5px) rotateX(0);
    }
    
    /* Particules de sang */
    .blood-particle {
        position: fixed;
        width: 8px;
        height: 8px;
        background: radial-gradient(circle, #ff0000, #8b0000);
        border-radius: 50%;
        pointer-events: none;
        animation: bloodFall var(--dur, 5s) linear infinite;
        z-index: -1;
    }
    
    @keyframes bloodFall {
        0% { 
            transform: translateY(-20px) scale(1);
            opacity: 0.8;
        }
        100% { 
            transform: translateY(100vh) scale(0.3);
            opacity: 0;
        }
    }
    
    /* Effet de crâne flottant */
    .skull-float {
        animation: skull3D 6s ease-in-out infinite, floatDark 4s ease-in-out infinite;
        filter: drop-shadow(0 0 30px rgba(139,0,0,0.8));
    }
    
    /* Container avec effet de profondeur */
    .depth-container {
        background: linear-gradient(145deg, 
            rgba(20,0,5,0.98) 0%,
            rgba(40,5,15,0.95) 50%,
            rgba(15,0,5,0.98) 100%);
        border: 2px solid #5a0000;
        border-radius: 20px;
        box-shadow: 
            0 10px 40px rgba(0,0,0,0.8),
            inset 0 1px 0 rgba(255,50,50,0.1),
            inset 0 -5px 20px rgba(0,0,0,0.5);
        position: relative;
        overflow: hidden;
    }
    
    .depth-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,0,0,0.5), transparent);
    }
    
    /* Particules flottantes - SANG ET FEU */
    .particles {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        pointer-events: none;
        z-index: -1;
        overflow: hidden;
    }
    
    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: var(--primary);
        border-radius: 50%;
        opacity: 0.3;
        animation: floatParticle var(--dur) linear infinite;
        box-shadow: 0 0 10px var(--primary);
    }
    
    @keyframes floatParticle {
        0% { transform: translateY(100vh) translateX(0); opacity: 0; }
        10% { opacity: 0.5; }
        90% { opacity: 0.5; }
        100% { transform: translateY(-100px) translateX(var(--dx)); opacity: 0; }
    }
    
    /* ========== SYSTÈME D\'ÉCRANS (NAVIGATION) ==========
       Chaque "écran" du jeu (accueil, combat, boutique, inventaire...)
       est un <div class="screen"> caché par défaut (display: none).
       Quand on navigue, on retire la classe "active" de l\'écran actuel
       et on l\'ajoute au nouvel écran → effect de transition fluide.
       C\'est le pattern "SPA" (Single Page Application) sans framework.
    ---------- */
    .screen {
        max-width: 1100px;
        margin: 0 auto;
        padding: 30px;
        display: none;
        animation: screenFadeIn 0.4s ease-out;
    }
    
    .screen.active { display: block; }
    
    @keyframes screenFadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* ========== EN-TÊTE ========== */
    .header {
        text-align: center;
        margin-bottom: 35px;
        position: relative;
    }
    
    h1 {
        font-family: 'Cinzel', serif;
        font-size: 3em;
        font-weight: 900;
        background: linear-gradient(135deg, #ffd700 0%, #ff6b6b 25%, #4ecdc4 50%, #9b59b6 75%, #ffd700 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: titleShine 3s linear infinite;
        text-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
        letter-spacing: 3px;
    }
    
    @keyframes titleShine {
        to { background-position: 200% center; }
    }
    
    .header p {
        font-size: 1.1em;
        color: #888;
        margin-top: 8px;
        letter-spacing: 2px;
    }
    
    /* ========== BOUTONS NAVIGATION - STYLE DANGEREUX ========== */
    .nav-buttons {
        display: flex;
        gap: 12px;
        margin-bottom: 25px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-btn, .mode-btn, .buy-btn {
        position: relative;
        padding: 14px 28px;
        border: none;
        border-radius: 8px;
        font-family: 'Rajdhani', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #fff;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        background: linear-gradient(145deg, #1a0010, #2a0020);
        border: 2px solid rgba(139, 0, 0, 0.5);
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.6),
            0 0 10px rgba(139, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 100, 100, 0.1);
    }
    
    .nav-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.2), transparent);
        transition: left 0.5s;
    }
    
    .nav-btn:hover::before {
        left: 100%;
    }
    
    .nav-btn:hover {
        transform: translateY(-3px) scale(1.02);
        border-color: #ff4444;
        background: linear-gradient(145deg, #2a0015, #3a0025);
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(255, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 100, 100, 0.2);
    }
    
    .nav-btn:active {
        transform: translateY(0) scale(0.98);
    }
    
    /* Boutons spéciaux colorés - DANGEREUX */
    .btn-gold {
        background: linear-gradient(145deg, #3a2a00, #5a4a10);
        border-color: #ffd700;
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.2);
    }
    .btn-gold:hover {
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.4);
        border-color: #ffaa00;
    }
    
    .btn-purple {
        background: linear-gradient(145deg, #2a0040, #4a1070);
        border-color: #8a2be2;
        box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3), 0 0 15px rgba(138, 43, 226, 0.2);
    }
    .btn-purple:hover {
        box-shadow: 0 8px 30px rgba(138, 43, 226, 0.5), 0 0 40px rgba(138, 43, 226, 0.4);
    }
    
    .btn-orange {
        background: linear-gradient(145deg, #3a1a00, #5a3010);
        border-color: #ff6600;
        box-shadow: 0 4px 20px rgba(255, 102, 0, 0.3);
    }
    .btn-orange:hover {
        box-shadow: 0 8px 30px rgba(255, 102, 0, 0.5), 0 0 40px rgba(255, 102, 0, 0.4);
    }
    
    .btn-red {
        background: linear-gradient(145deg, #3a0000, #6a1010);
        border-color: #ff0000;
        box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4), 0 0 15px rgba(255, 0, 0, 0.3);
        animation: dangerPulse 2s ease-in-out infinite;
    }
    .btn-red:hover {
        box-shadow: 0 8px 30px rgba(255, 0, 0, 0.6), 0 0 50px rgba(255, 0, 0, 0.5);
    }
    
    @keyframes dangerPulse {
        0%, 100% { box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3); }
        50% { box-shadow: 0 4px 30px rgba(255, 0, 0, 0.5); }
    }
    
    .btn-cyan {
        background: linear-gradient(145deg, #001a2a, #003050);
        border-color: #00ffff;
        box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
    }
    .btn-cyan:hover {
        box-shadow: 0 8px 30px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.3);
    }
    .btn-gold {
        background: linear-gradient(145deg, #8B6914, #DAA520);
        border-color: #ffd700;
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    }
    .btn-gold:hover {
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
    }
    
    .btn-purple {
        background: linear-gradient(145deg, #4a1a6b, #8e44ad);
        border-color: #9b59b6;
        box-shadow: 0 4px 20px rgba(155, 89, 182, 0.3);
    }
    .btn-purple:hover {
        box-shadow: 0 8px 30px rgba(155, 89, 182, 0.5), 0 0 40px rgba(155, 89, 182, 0.3);
    }
    
    .btn-orange {
        background: linear-gradient(145deg, #a84300, #e67e22);
        border-color: #f39c12;
        box-shadow: 0 4px 20px rgba(230, 126, 34, 0.3);
    }
    .btn-orange:hover {
        box-shadow: 0 8px 30px rgba(230, 126, 34, 0.5), 0 0 40px rgba(230, 126, 34, 0.3);
    }
    
    .btn-red {
        background: linear-gradient(145deg, #8B0000, #e74c3c);
        border-color: #ff6b6b;
        box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
    }
    .btn-red:hover {
        box-shadow: 0 8px 30px rgba(255, 107, 107, 0.5), 0 0 40px rgba(255, 107, 107, 0.3);
    }
    
    .btn-cyan {
        background: linear-gradient(145deg, #1a6b6b, #4ecdc4);
        border-color: #4ecdc4;
        box-shadow: 0 4px 20px rgba(78, 205, 196, 0.3);
    }
    .btn-cyan:hover {
        box-shadow: 0 8px 30px rgba(78, 205, 196, 0.5), 0 0 40px rgba(78, 205, 196, 0.3);
    }
    
    /* ========== BOUTONS MODE DE JEU ========== */
    .mode-btn {
        padding: 25px 35px;
        font-size: 1.1rem;
        border-radius: 20px;
        background: linear-gradient(145deg, var(--card-bg), #1a1a3a);
        border: 3px solid rgba(255, 255, 255, 0.1);
        min-width: 200px;
        text-align: center;
    }
    
    .mode-btn:hover {
        border-color: var(--primary);
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.05);
        transform: translateY(-5px) scale(1.03);
    }
    
    .mode-btn small {
        display: block;
        margin-top: 8px;
        font-size: 0.8em;
        color: #888;
        text-transform: none;
    }
    
    /* ========== CARTES STATS ==========
       Grille responsive qui affiche les stats du joueur :
       Niveau, Or, Gemmes, XP, Rang, etc.
       Utilise CSS Grid avec auto-fit pour s\'adapter à tous les écrans.
       Chaque carte a un effet hover avec bordure lumineuse.
    ---------- */
    .player-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
        margin-bottom: 25px;
    }
    
    .stat-card {
        background: linear-gradient(145deg, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.95));
        padding: 18px;
        border-radius: 16px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.08);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--secondary), var(--primary));
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(78, 205, 196, 0.3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .stat-card:hover::before {
        opacity: 1;
    }
    
    .stat-label {
        font-size: 0.8em;
        color: #888;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .stat-value {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--secondary);
        text-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
    }
    
    /* ========== BADGES DE RANG ==========
       Styles visuels pour chaque rang du jeu :
       E (gris) → D (bronze) → C (vert) → B (bleu) → A (or)
       → S (rose) → Monarque (rouge+or animé)
       Plus le rang est élevé, plus l\'animation est spectaculaire.
    ---------- */
    .rank-badge {
        display: inline-block;
        padding: 6px 16px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 0.9em;
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: badgePulse 2s ease-in-out infinite;
    }
    
    @keyframes badgePulse {
        0%, 100% { box-shadow: 0 0 10px currentColor; }
        50% { box-shadow: 0 0 25px currentColor; }
    }
    
    .rank-E { background: linear-gradient(145deg, #444, #666); color: #ddd; }
    .rank-D { background: linear-gradient(145deg, #8B4513, #D2691E); color: #fff; }
    .rank-C { background: linear-gradient(145deg, #1a6b1a, #32cd32); color: #fff; }
    .rank-B { background: linear-gradient(145deg, #1a4a8b, #1e90ff); color: #fff; }
    .rank-A { background: linear-gradient(145deg, #8B6914, #ffd700); color: #000; }
    .rank-S { background: linear-gradient(145deg, #8B1a5c, #ff1493); color: #fff; }
    .rank-monarque { 
        background: linear-gradient(145deg, #8B0000, #ff0000, #ffd700); 
        color: #fff;
        animation: monarchGlow 1.5s ease-in-out infinite;
    }
    
    @keyframes monarchGlow {
        0%, 100% { box-shadow: 0 0 20px #ff0000, 0 0 40px #ffd700; }
        50% { box-shadow: 0 0 30px #ffd700, 0 0 60px #ff0000; }
    }
    
    /* ========== BARRE D\'ÉNERGIE ==========
       L\'énergie limite le nombre de combats par session.
       Affichée sous forme d\'orbes dorées (comme des charges).
       Se régénère avec le temps (timer affiché en dessous).
       Quand l\'énergie est à 0, le joueur ne peut plus combattre.
    ---------- */
    #energy-bar-container {
        background: linear-gradient(145deg, rgba(20, 20, 50, 0.9), rgba(10, 10, 30, 0.95));
        border-radius: 20px;
        padding: 20px;
        margin: 25px auto;
        max-width: 600px;
        border: 2px solid rgba(255, 215, 0, 0.2);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
    }
    
    #energy-label {
        display: block;
        text-align: center;
        font-size: 1.2em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 15px;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    
    #energy-orbs, #energy-orbs2 {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    
    .energy-orb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(145deg, #1a1a3a, #0a0a1a);
        border: 2px solid #333;
        transition: all 0.3s ease;
    }
    
    .energy-orb.filled {
        background: linear-gradient(145deg, #ffd700, #ffaa00);
        border-color: #ffd700;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        animation: orbPulse 1.5s ease-in-out infinite;
    }
    
    @keyframes orbPulse {
        0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
        50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    }
    
    #energy-regen-timer {
        display: block;
        text-align: center;
        color: #888;
        font-size: 0.9em;
    }
    
    #energy-warning {
        display: none;
        text-align: center;
        color: var(--danger);
        font-weight: 700;
        padding: 15px;
        background: rgba(255, 107, 107, 0.1);
        border: 1px solid rgba(255, 107, 107, 0.3);
        border-radius: 12px;
        margin: 15px auto;
        max-width: 500px;
        animation: warningPulse 1s ease-in-out infinite;
    }
    
    @keyframes warningPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    
    /* ========== ARÈNE DE COMBAT ==========
       Zone visuelle où se déroulent les combats.
       Le fond change selon le rang du donjon (E=vert, D=violet, etc.)
       Contient : sprite du monstre, barre de vie, boutons d\'exercice.
       Effets d\'ambiance animés (lumières, ombres pulsantes).
    ---------- */
    .battle-arena {
        border-radius: 25px;
        padding: 30px;
        margin-bottom: 25px;
        position: relative;
        overflow: hidden;
        background: radial-gradient(ellipse at center, #2a1a1a 0%, #1a0a0a 50%, #0a0505 100%);
        border: 3px solid rgba(255, 107, 107, 0.3);
        box-shadow: 
            0 0 50px rgba(255, 0, 0, 0.2),
            inset 0 0 100px rgba(0, 0, 0, 0.5);
    }
    
    .battle-arena::before {
        content: '';
        position: absolute;
        inset: 0;
        background: 
            radial-gradient(circle at 30% 20%, rgba(255, 100, 50, 0.15) 0%, transparent 40%),
            radial-gradient(circle at 70% 80%, rgba(100, 50, 255, 0.1) 0%, transparent 40%);
        pointer-events: none;
        animation: arenaAmbient 5s ease-in-out infinite;
    }
    
    @keyframes arenaAmbient {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
    
    /* Arènes par rang */
    /* Arènes par rang — couleurs et ambiances uniques */
    .arena-E { 
        background: radial-gradient(ellipse at center, #1a2a1a 0%, #0a150a 60%, #030803 100%) !important;
        border-color: rgba(100, 200, 100, 0.3) !important;
    }
    .arena-D { 
        background: radial-gradient(ellipse at 40% 30%, #2a1a2e 0%, #15101a 50%, #0a0510 100%) !important;
        border-color: rgba(180, 100, 220, 0.3) !important;
    }
    .arena-C { 
        background: radial-gradient(ellipse at center, #1a2a3a 0%, #0a1520 60%, #030810 100%) !important;
        border-color: rgba(50, 180, 220, 0.35) !important;
    }
    .arena-B { 
        background: radial-gradient(ellipse at 60% 40%, #2a1a0a 0%, #1a0d05 50%, #0a0503 100%) !important;
        border-color: rgba(255, 150, 50, 0.4) !important;
        box-shadow: 0 0 50px rgba(255, 100, 0, 0.1) inset !important;
    }
    .arena-A { 
        background: radial-gradient(ellipse at 50% 30%, #3a1a2a 0%, #200a15 50%, #100508 100%) !important;
        border-color: rgba(255, 50, 150, 0.4) !important;
        box-shadow: 0 0 60px rgba(255, 0, 100, 0.15) inset !important;
    }
    .arena-S, .arena-Sp, .arena-Spp { 
        background: radial-gradient(ellipse at 50% 20%, #3a0a0a 0%, #200505 40%, #0a0000 100%) !important;
        border-color: rgba(255, 50, 50, 0.5) !important;
        box-shadow: 0 0 80px rgba(255, 0, 0, 0.2) inset, 0 0 40px rgba(255, 0, 0, 0.1) !important;
    }
    .arena-Monarque, .arena-M { 
        background: radial-gradient(ellipse at 50% 50%, #15001a 0%, #0a0010 40%, #000005 100%) !important;
        border-color: rgba(160, 50, 255, 0.5) !important;
        box-shadow: 0 0 100px rgba(100, 0, 200, 0.2) inset, 0 0 60px rgba(200, 0, 255, 0.15) !important;
    }
    
    /* Sprite monstre */
    .monster-sprite {
        font-size: 8em;
        text-align: center;
        margin: 20px 0;
        filter: drop-shadow(0 0 30px rgba(255, 100, 100, 0.5));
        animation: monsterIdle 2s ease-in-out infinite;
        position: relative;
        z-index: 10;
    }
    
    @keyframes monsterIdle {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-10px) scale(1.02); }
    }
    
    .monster-sprite img, .monster-sprite video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    }
    
    /* Barre de vie monstre */
    .monster-hp-container {
        background: rgba(0, 0, 0, 0.6);
        border-radius: 15px;
        padding: 15px;
        margin: 20px auto;
        max-width: 400px;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }
    
    .monster-hp-bar {
        height: 25px;
        background: linear-gradient(180deg, #333, #1a1a1a);
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid #444;
        box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
    }
    
    .monster-hp-fill {
        height: 100%;
        background: linear-gradient(180deg, #ff6b6b, #cc0000);
        border-radius: 10px;
        transition: width 0.5s ease-out;
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
        position: relative;
    }
    
    .monster-hp-fill::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 5px;
        right: 5px;
        height: 8px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
        border-radius: 10px;
    }
    
    /* ========== ÉQUIPEMENT & INVENTAIRE ==========
       Système de grille pour afficher les objets :
       - equip-slot  : emplacement d\'équipement (tête, arme, etc.)
       - market-item : objet dans la boutique
       - inventory-item : objet dans l\'inventaire du joueur
       Chaque rareté a son propre style (common→legendary→mythic→ultimate)
    ---------- */
    .grid-3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    
    .equip-slot, .market-item, .inventory-item {
        background: linear-gradient(145deg, rgba(30, 30, 60, 0.95), rgba(15, 15, 35, 0.98));
        padding: 22px;
        border-radius: 18px;
        text-align: center;
        border: 2px solid rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
    }
    
    .equip-slot::before, .market-item::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }
    
    .equip-slot:hover::before, .market-item:hover::before {
        opacity: 1;
    }
    
    .equip-slot:hover, .market-item:hover {
        transform: translateY(-5px) scale(1.02);
        border-color: var(--secondary);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(78, 205, 196, 0.2);
    }
    
    .equip-slot.equipped {
        border-color: var(--danger);
        background: linear-gradient(145deg, rgba(60, 20, 30, 0.95), rgba(40, 10, 20, 0.98));
        box-shadow: 0 0 25px rgba(255, 107, 107, 0.3);
    }
    
    /* ====== SYSTÈME DE RARETÉS ======
       Les objets ont 6 niveaux de rareté, du plus commun au plus rare :
       - common    (gris)    : objets de base, pas d\'animation
       - rare      (bleu)    : fond bleuté, lueur subtile
       - epic      (violet)  : fond violet, pulsation lente
       - legendary (orange)  : fond rouge, pulsation orange↔or
       - mythic    (magenta) : fond violet intense, glow magenta+or
       - ultimate  (arc-en-ciel) : bordure dégradée multicolore, le top !
       Chaque rareté a une animation plus intense que la précédente.
    -------------------------- */
    .rarity-common {
        border-color: #888;
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2);
    }
    
    .rarity-rare {
        border-color: #00bfff;
        background: linear-gradient(145deg, rgba(20, 40, 80, 0.95), rgba(10, 20, 50, 0.98));
        box-shadow: 0 0 25px rgba(0, 191, 255, 0.4);
    }
    
    .rarity-epic {
        border-color: #9932cc;
        background: linear-gradient(145deg, rgba(60, 20, 80, 0.95), rgba(40, 10, 60, 0.98));
        box-shadow: 0 0 30px rgba(153, 50, 204, 0.5);
        animation: epicPulse 2s ease-in-out infinite;
    }
    
    @keyframes epicPulse {
        0%, 100% { box-shadow: 0 0 25px rgba(153, 50, 204, 0.4); }
        50% { box-shadow: 0 0 40px rgba(153, 50, 204, 0.7); }
    }
    
    .rarity-legendary {
        border-color: #ff4500;
        background: linear-gradient(145deg, rgba(80, 20, 20, 0.95), rgba(60, 10, 10, 0.98));
        box-shadow: 0 0 35px rgba(255, 69, 0, 0.6);
        animation: legendaryPulse 1.5s ease-in-out infinite;
    }
    
    @keyframes legendaryPulse {
        0%, 100% { box-shadow: 0 0 30px rgba(255, 69, 0, 0.5); border-color: #ff4500; }
        50% { box-shadow: 0 0 50px rgba(255, 215, 0, 0.7); border-color: #ffd700; }
    }
    
    .rarity-mythic {
        border: 3px solid #ff00ff;
        background: linear-gradient(145deg, rgba(60, 0, 80, 0.95), rgba(80, 0, 100, 0.98));
        box-shadow: 0 0 40px rgba(255, 0, 255, 0.7), 0 0 80px rgba(255, 215, 0, 0.4);
        animation: mythicGlow 2s ease-in-out infinite;
    }
    
    @keyframes mythicGlow {
        0%, 100% { 
            box-shadow: 0 0 40px rgba(255, 0, 255, 0.7), 0 0 80px rgba(255, 215, 0, 0.4);
            border-color: #ff00ff;
        }
        50% { 
            box-shadow: 0 0 60px rgba(255, 0, 255, 1), 0 0 100px rgba(255, 215, 0, 0.7);
            border-color: #ffd700;
        }
    }
    
    .rarity-ultimate {
        border: 3px solid;
        border-image: linear-gradient(45deg, #ffd700, #ff6b6b, #9b59b6, #4ecdc4, #ffd700) 1;
        background: linear-gradient(145deg, rgba(40, 20, 60, 0.95), rgba(20, 10, 40, 0.98));
        box-shadow: 
            0 0 40px rgba(155, 89, 182, 0.6),
            0 0 80px rgba(255, 215, 0, 0.3);
        animation: ultimateGlow 2s ease-in-out infinite;
    }
    
    @keyframes ultimateGlow {
        0%, 100% { 
            box-shadow: 0 0 40px rgba(155, 89, 182, 0.6), 0 0 80px rgba(255, 215, 0, 0.3);
        }
        50% { 
            box-shadow: 0 0 60px rgba(255, 215, 0, 0.8), 0 0 100px rgba(155, 89, 182, 0.5);
        }
    }
    
    /* ========== DEBUFFS (ALTÉRATIONS D\'ÉTAT) ==========
       Les monstres peuvent infliger des debuffs au joueur :
       - Poison (vert)      : dégâts continus chaque tour
       - Saignement (rouge) : dégâts qui s\'accumulent
       - Brûlure (orange)   : dégâts + réduction de stats
       Chaque debuff a sa propre couleur et animation flottante.
       Affiché dans #debuff-display sous forme de badges colorés.
    ---------- */
    #debuff-display {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
        padding: 15px;
        background: linear-gradient(145deg, rgba(30, 10, 10, 0.9), rgba(20, 5, 5, 0.95));
        border: 2px solid rgba(255, 107, 107, 0.3);
        border-radius: 18px;
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.5);
        min-height: 40px;
    }
    
    #debuff-display span {
        padding: 8px 16px;
        border-radius: 25px;
        font-size: 0.9em;
        font-weight: 700;
        border: 2px solid;
        animation: debuffFloat 2s ease-in-out infinite;
        backdrop-filter: blur(5px);
    }
    
    @keyframes debuffFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    
    #debuff-display span[title*="Poison"] { 
        background: rgba(0, 255, 100, 0.2);
        border-color: #00ff64;
        color: #00ff64;
        box-shadow: 0 0 15px rgba(0, 255, 100, 0.4);
    }
    
    #debuff-display span[title*="Saignement"] { 
        background: rgba(255, 50, 50, 0.2);
        border-color: #ff3232;
        color: #ff3232;
        box-shadow: 0 0 15px rgba(255, 50, 50, 0.4);
    }
    
    #debuff-display span[title*="Brûlure"] { 
        background: rgba(255, 150, 0, 0.2);
        border-color: #ff9600;
        color: #ff9600;
        box-shadow: 0 0 15px rgba(255, 150, 0, 0.4);
    }
    
    /* ========== MESSAGES ========== */
    .message {
        text-align: center;
        padding: 18px 25px;
        border-radius: 15px;
        margin: 15px auto;
        max-width: 600px;
        font-weight: 700;
        font-size: 1.1em;
        animation: messageSlide 0.4s ease-out;
    }
    
    @keyframes messageSlide {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .victory-message {
        background: linear-gradient(145deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.1));
        border: 2px solid #2ecc71;
        color: #2ecc71;
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.3);
    }
    
    .defeat-message {
        background: linear-gradient(145deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.1));
        border: 2px solid #e74c3c;
        color: #e74c3c;
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.3);
    }
    
    /* ========== BOUTONS EXERCICE ==========
       Boutons verts pour choisir l\'exercice à faire en combat.
       Quand le joueur clique, il fait des répétitions (pompes, squats...)
       pour infliger des dégâts au monstre.
       Un exercice peut être "sealed" (verrouillé) par un debuff.
    ---------- */
    .exercise-btn {
        padding: 20px 35px;
        font-size: 1.2em;
        border-radius: 15px;
        background: linear-gradient(145deg, #2a4a2a, #1a3a1a);
        border: 3px solid #4caf50;
        color: #4caf50;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .exercise-btn:hover {
        background: linear-gradient(145deg, #3a5a3a, #2a4a2a);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
    }
    
    .exercise-btn:active {
        transform: translateY(0);
    }
    
    .exercise-btn.sealed {
        opacity: 0.4;
        cursor: not-allowed;
        filter: grayscale(100%);
    }
    
    /* ========== COMPTEUR DE RÉPÉTITIONS ==========
       Grand compteur central qui affiche le nombre de reps à faire.
       Le joueur clique sur le gros bouton doré pour compter ses reps.
       Quand le quota est atteint → les dégâts sont infligés au monstre.
    ---------- */
    /* [2026-06-15] Sélection de répétitions = POPUP CENTRÉE par-dessus les exercices
       (avant : bloc inline sous les exos → il fallait scroller). La carte est dans
       .counter-modal-card ; #counter-section devient le fond plein écran (clic hors-champ ferme). */
    #counter-section {
        position: fixed;
        inset: 0;
        z-index: 10050;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(4, 6, 14, 0.82);
        margin: 0;
        padding: 24px;
        max-width: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .counter-modal-card {
        background: linear-gradient(145deg, rgba(40, 40, 80, 0.97), rgba(20, 20, 50, 0.99));
        border-radius: 25px;
        padding: 30px;
        text-align: center;
        max-width: 450px;
        width: 100%;
        border: 3px solid var(--primary);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.25);
    }
    
    #exercise-counter {
        font-size: 5em;
        font-weight: 900;
        color: var(--primary);
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
        font-family: 'Cinzel', serif;
    }
    
    .counter-btn {
        padding: 25px 50px;
        font-size: 1.8em;
        border-radius: 20px;
        background: linear-gradient(145deg, #ffd700, #ffaa00);
        border: none;
        color: #000;
        font-weight: 900;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    }
    
    .counter-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
    }
    
    .counter-btn:active {
        transform: scale(0.95);
    }
    
    /* ========== ANIMATIONS GLOBALES ========== */
    @keyframes floatUp {
        0% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-100px); }
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    @keyframes glow {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.3); }
    }
    
    /* Indicateur de dégâts */
    .damage-indicator {
        position: fixed;
        font-size: 2.5em;
        font-weight: 900;
        font-family: 'Cinzel', serif;
        pointer-events: none;
        animation: damageFloat 1s ease-out forwards;
        z-index: 10000;
        text-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            2px 2px 0 #000;
    }
    
    @keyframes damageFloat {
        0% { opacity: 1; transform: translateY(0) scale(0.5); }
        20% { transform: translateY(-20px) scale(1.2); }
        100% { opacity: 0; transform: translateY(-80px) scale(1); }
    }
    
    /* Buff float */
    .buff-float {
        position: fixed;
        left: 50%;
        top: 30%;
        transform: translateX(-50%);
        padding: 15px 30px;
        border-radius: 15px;
        font-weight: 700;
        font-size: 1.2em;
        z-index: 10000;
        animation: buffAppear 2s ease-out forwards;
    }
    
    .buff-float.good {
        background: linear-gradient(145deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
        border: 2px solid #2ecc71;
        color: #fff;
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
    }
    
    .buff-float.bad {
        background: linear-gradient(145deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.9));
        border: 2px solid #e74c3c;
        color: #fff;
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.5);
    }
    
    @keyframes buffAppear {
        0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.8); }
        15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
        30% { transform: translateX(-50%) translateY(0) scale(1); }
        85% { opacity: 1; }
        100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
    }
    
    /* ========== SCROLLBAR CUSTOM ========== */
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--darker);
        border-radius: 5px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--secondary), var(--primary));
        border-radius: 5px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--primary), var(--secondary));
    }
    
    /* ========== RESPONSIVE ========== */
    @media (max-width: 768px) {
        h1 { font-size: 2em; }
        .nav-btn { padding: 10px 18px; font-size: 0.85rem; }
        .mode-btn { padding: 18px 25px; min-width: 150px; }
        .monster-sprite { font-size: 5em; }
        #exercise-counter { font-size: 3.5em; }
    }

    .nav-btn:active,
    .mode-btn:active,
    .buy-btn:active {
        transform: translateY(0);
        box-shadow:
            0 0 0 1px rgba(120,170,255,0.6),
            0 6px 14px rgba(0,0,0,0.85);
    }

    .player-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 20px; }
	#debuff-display {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 15px 0; padding: 12px;
    background: linear-gradient(135deg, rgba(10,10,30,0.9), rgba(30,0,0,0.8));
    border: 1px solid rgba(255,107,107,0.3); border-radius: 16px;
    box-shadow: 0 0 20px rgba(255,107,107,0.2), inset 0 0 10px rgba(0,0,0,0.5);
    min-height: 32px;
}
#debuff-display span[title*="Poison"] { 
    background: rgba(0,255,65,0.25); border-color: #00ff41; color: #00ff41; 
}
#debuff-display span[title*="Saignement"] { 
    background: rgba(255,68,68,0.25); border-color: #ff4444; color: #ff4444; 
}
#debuff-display span[title*="Étourdissement"] { 
    background: rgba(255,255,0,0.3); border-color: #ffff00; color: #ffff00; 
}
#debuff-display span[title*="Brûlure"] { 
    background: rgba(255,136,0,0.25); border-color: #ff8800; color: #ff8800; 
}
#debuff-display span {
    padding: 6px 12px; border-radius: 20px; font-size: 0.85em; font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); border: 1px solid;
    animation: debuffPulse 2s infinite; min-width: 80px; text-align: center;
}
@keyframes debuffPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:0.9} }
    .stat-card {
        background: linear-gradient(135deg, #2a2a4e 0%, #1e1e3a 100%); padding: 15px;
        border-radius: 12px; text-align: center; border: 1px solid rgba(255,255,255,0.1);
    }
    .stat-label { font-size: 0.8em; color: #888; margin-bottom: 5px; }
    .stat-value { font-size: 1.3em; font-weight: bold; color: #4ecdc4; }
    .rank-badge { padding: 5px 12px; border-radius: 20px; font-weight: bold; font-size: 0.9em; margin-top: 5px; }
    .rank-E { background: #666; } .rank-D { background: #ff8c00; } .rank-C { background: #32cd32; }
    .rank-B { background: #1e90ff; } .rank-A { background: #ffd700; } .rank-S { background: #ff1493; }
    .rank-SS { background: linear-gradient(45deg, #ff6b6b, #ffd700); } .rank-monarque { background: linear-gradient(45deg, #ff0000, #ffd700); color: #000; }

    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 15px; }

    .equip-slot, .market-item {
        background: linear-gradient(135deg, #2a2a4e 0%, #1e1e3a 100%);
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        border: 2px solid rgba(255,255,255,0.1);
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
    }

    .equip-slot:hover, .market-item:hover {
        border-color: #4ecdc4;
        box-shadow: 0 0 20px rgba(78,205,196,0.3);
    }

    .equip-slot.equipped {
        border-color: #ff6b6b;
        background: linear-gradient(135deg, #ff6b6b20, #ee5a6f20);
    }

    /* Rareté : toute la case change de style */
    .rarity-common {
        background: linear-gradient(135deg, #3a3a3a, #222222);
        border-color: #aaaaaa;
        box-shadow: 0 0 10px rgba(170,170,170,0.4);
    }

    .rarity-rare {
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        border-color: #00bfff;
        box-shadow: 0 0 16px rgba(0,191,255,0.7);
    }

    .rarity-epic {
        background: linear-gradient(135deg, #4b0082, #8a2be2);
        border-color: #9932cc;
        box-shadow: 0 0 18px rgba(153,50,204,0.8);
    }

    .rarity-legendary {
        background: linear-gradient(135deg, #8b0000, #ff0000);
        border-color: #ff4b5c;
        box-shadow: 0 0 25px rgba(255,0,0,0.95);
        color: #ffeaea;
    }

    /* RARETÉ ULTIME - ITEMS CRAFTÉS */
    .rarity-ultimate {
        background: linear-gradient(135deg, #1a0a2e, #2d1b4e, #1a0a2e);
        border: 3px solid;
        border-image: linear-gradient(45deg, #ffd700, #ff6b6b, #9b59b6, #4ecdc4, #ffd700) 1;
        box-shadow: 
            0 0 30px rgba(155,89,182,0.8),
            0 0 60px rgba(255,215,0,0.4),
            inset 0 0 20px rgba(255,215,0,0.2);
        color: #ffd700;
        animation: ultimateGlow 2s ease-in-out infinite;
    }
    
    @keyframes ultimateGlow {
        0%, 100% { 
            box-shadow: 0 0 30px rgba(155,89,182,0.8), 0 0 60px rgba(255,215,0,0.4);
            filter: brightness(1);
        }
        50% { 
            box-shadow: 0 0 50px rgba(155,89,182,1), 0 0 80px rgba(255,215,0,0.6);
            filter: brightness(1.1);
        }
    }
    
    /* Animations pour les illustrations des onglets */
    @keyframes spellsGlow {
        0%, 100% { filter: drop-shadow(0 0 20px rgba(155,89,182,0.5)) hue-rotate(0deg); }
        50% { filter: drop-shadow(0 0 35px rgba(155,89,182,0.8)) hue-rotate(15deg); }
    }
    @keyframes weaponsGlow {
        0% { filter: drop-shadow(0 0 15px rgba(231,76,60,0.5)); transform: scale(1); }
        100% { filter: drop-shadow(0 0 30px rgba(231,76,60,0.8)); transform: scale(1.05); }
    }
    @keyframes jesterGlow {
        0%, 100% { filter: drop-shadow(0 0 20px rgba(155,89,182,0.5)); transform: rotate(-5deg); }
        50% { filter: drop-shadow(0 0 40px rgba(155,89,182,0.9)); transform: rotate(5deg); }
    }
    @keyframes chestBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes chestShake {
        0%, 100% { transform: rotate(-5deg) scale(1); }
        25% { transform: rotate(5deg) scale(1.1); }
        50% { transform: rotate(-3deg) scale(1.05); }
        75% { transform: rotate(3deg) scale(1.15); }
    }
    @keyframes confettiFall {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    /* ANIMATIONS POTIONS EN COMBAT */
    @keyframes potionThrow {
        0% { transform: translateX(-50px) translateY(0) rotate(0deg); opacity: 1; }
        50% { transform: translateX(100px) translateY(-80px) rotate(180deg); }
        100% { transform: translateX(200px) translateY(0) rotate(360deg); opacity: 0; }
    }
    @keyframes potionSplash {
        0% { transform: scale(0); opacity: 1; }
        50% { transform: scale(2); opacity: 0.8; }
        100% { transform: scale(3); opacity: 0; }
    }
    @keyframes spellCast {
        0% { transform: scale(0) rotate(0deg); opacity: 0; filter: blur(10px); }
        50% { transform: scale(1.5) rotate(180deg); opacity: 1; filter: blur(0); }
        100% { transform: scale(0.5) rotate(360deg) translateX(200px); opacity: 0; filter: blur(5px); }
    }
    @keyframes spellImpact {
        0% { transform: scale(0); opacity: 1; }
        30% { transform: scale(2); opacity: 1; }
        100% { transform: scale(4); opacity: 0; }
    }
    @keyframes cosmic_wave {
        0% { transform: scaleX(0) translateX(-100px); opacity: 0; }
        20% { transform: scaleX(0.3) translateX(-50px); opacity: 1; }
        100% { transform: scaleX(3) translateX(300px); opacity: 0; }
    }
    /* ANIMATIONS UNIQUES PAR SORT */
    @keyframes cosmic-charge{0%{transform:scale(0);box-shadow:0 0 0 rgba(0,170,255,0)}50%{transform:scale(1.8);box-shadow:0 0 80px rgba(0,170,255,.9)}100%{transform:scale(1);box-shadow:0 0 40px rgba(0,170,255,.6)}}
    @keyframes cosmic-beam{0%{clip-path:inset(0 100% 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1}}
    @keyframes cosmic-ripple{0%{transform:scale(0);opacity:.8;border-width:4px}100%{transform:scale(8);opacity:0;border-width:0}}
    @keyframes chakra-spin{0%{transform:rotate(0) scale(.3);opacity:0}30%{transform:rotate(360deg) scale(1);opacity:1}100%{transform:rotate(1080deg) scale(1.2);opacity:1}}
    @keyframes chakra_sphere-ring{0%{transform:rotate(0) scale(1);opacity:.8}100%{transform:rotate(360deg) scale(2.5);opacity:0}}
    @keyframes chakra_sphere-impact{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(3);opacity:.6}100%{transform:translate(-50%,-50%) scale(6);opacity:0}}
    @keyframes domain-expand{0%{clip-path:circle(0% at 50% 50%)}60%{clip-path:circle(75% at 50% 50%)}100%{clip-path:circle(100% at 50% 50%)}}
    @keyframes domain-sigil{0%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2) rotate(180deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(360deg);opacity:.9}}
    @keyframes domain-slash{0%{transform:scaleX(0) rotate(var(--slash-angle,0));opacity:1}50%{transform:scaleX(1) rotate(var(--slash-angle,0));opacity:1}100%{transform:scaleX(1.5) rotate(var(--slash-angle,0));opacity:0}}
    @keyframes erasion-sphere{0%{transform:translate(-50%,-50%) scale(0)}40%{transform:translate(-50%,-50%) scale(1)}70%{transform:translate(-50%,-50%) scale(1.5)}100%{transform:translate(-50%,-50%) scale(10);opacity:0}}
    @keyframes erasion-dissolve{0%{filter:blur(0) brightness(1);transform:scale(1)}50%{filter:blur(3px) brightness(2) hue-rotate(90deg);transform:scale(1.1)}100%{filter:blur(20px) brightness(0);transform:scale(0);opacity:0}}
    @keyframes spirit-arc{0%{transform:translateX(-150%) rotate(-45deg) scaleY(.3);opacity:0}30%{opacity:1}100%{transform:translateX(150%) rotate(-45deg) scaleY(1);opacity:0}}
    @keyframes genki-gather{0%{transform:translate(-50%,-200%) scale(.2);opacity:0}50%{transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 0 100px rgba(255,255,100,.8)}100%{transform:translate(-50%,0%) scale(3);opacity:0}}
    @keyframes genki-particle-in{0%{transform:translate(var(--gx,0),var(--gy,0)) scale(1);opacity:1}100%{transform:translate(0,0) scale(0);opacity:.5}}
    @keyframes bigbang-explode{0%{transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:50%}50%{transform:translate(-50%,-50%) scale(5);opacity:.8;border-radius:10%}100%{transform:translate(-50%,-50%) scale(12);opacity:0}}
    @keyframes void-warp{0%{transform:translate(-50%,-50%) scale(0) rotate(0);filter:blur(20px)}50%{transform:translate(-50%,-50%) scale(1) rotate(180deg);filter:blur(0)}100%{transform:translate(-50%,-50%) scale(1.1) rotate(360deg)}}
    @keyframes void-grid{0%{background-size:80px 80px;opacity:0}30%{opacity:.5}100%{background-size:40px 40px;opacity:.3}}
    @keyframes eternal-moon{0%{transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 60px #ff0000)}100%{transform:translate(-50%,-50%) scale(1.2);filter:drop-shadow(0 0 100px #ff0000)}}
    @keyframes eternal_moon-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(15);opacity:0}}
    @keyframes blizzard-swirl{0%{transform:rotate(0) translateX(0);opacity:0}20%{opacity:1}100%{transform:rotate(720deg) translateX(var(--bx,100px));opacity:0}}
    @keyframes lightning-strike{0%{clip-path:polygon(48% 0,52% 0,52% 0,48% 0);opacity:1}10%{clip-path:polygon(45% 0,55% 0,53% 40%,58% 40%,52% 70%,60% 70%,50% 100%,48% 70%,40% 70%,47% 40%,42% 40%);opacity:1}30%{opacity:1}100%{opacity:0}}
    @keyframes fireball-fly{0%{transform:translateX(-120%) translateY(20%) scale(.5);opacity:0}20%{opacity:1}80%{transform:translateX(10%) translateY(-5%) scale(1);opacity:1}100%{transform:translateX(15%) scale(0);opacity:0}}
    @keyframes fireball-burst{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(2.5);opacity:.8}100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
    @keyframes shockwave-ring{0%{transform:translate(-50%,-50%) scale(0);opacity:.9;border-width:6px}100%{transform:translate(-50%,-50%) scale(6);opacity:0;border-width:1px}}
    @keyframes arena-shake-heavy{0%,100%{transform:translate(0)}10%{transform:translate(-8px,6px)}20%{transform:translate(6px,-8px)}30%{transform:translate(-6px,4px)}40%{transform:translate(8px,-4px)}50%{transform:translate(-4px,8px)}60%{transform:translate(4px,-6px)}70%{transform:translate(-8px,2px)}80%{transform:translate(6px,6px)}90%{transform:translate(-2px,-8px)}}
    @keyframes spell-particle-float{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--px,50px),var(--py,-80px)) scale(0);opacity:0}}
    @keyframes fireExplosion {
        0% { transform: scale(0); background: radial-gradient(circle, #ff6600, #ff0000); }
        50% { transform: scale(2); background: radial-gradient(circle, #ffff00, #ff6600); }
        100% { transform: scale(3); opacity: 0; }
    }
    @keyframes poisonCloud {
        0% { transform: scale(0.5); opacity: 0.8; }
        50% { transform: scale(1.5); opacity: 0.5; }
        100% { transform: scale(2); opacity: 0; }
    }

    /* ARENE PLUS SOMBRE / SANGLANTE */
    .battle-arena {
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 20px;
        transition: background 0.5s;
        overflow: hidden;
        position: relative;
        background: radial-gradient(circle at top, #2b0000, #050007 60%, #000000 100%);
        box-shadow: 0 0 40px rgba(0,0,0,0.9) inset;
    }

    .battle-arena::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 10% 0%, rgba(255,0,0,0.25), transparent 55%),
            radial-gradient(circle at 90% 100%, rgba(120,0,0,0.35), transparent 60%);
        pointer-events: none;
        mix-blend-mode: screen;
        opacity: 0.7;
    }

    /* Arènes override supprimé — géré par les classes individuelles */
    .arena-M {
        background: radial-gradient(circle at top, #000000, #050005) !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.9) inset !important;
    }

    /* Particules et effets dynamiques d\'arène */
    @keyframes arenaParticleFloat {
        0% { transform: translateY(0) translateX(0); opacity: 0; }
        15% { opacity: 0.8; }
        50% { opacity: 0.6; transform: translateY(-120px) translateX(20px); }
        85% { opacity: 0.3; }
        100% { transform: translateY(-200px) translateX(-10px); opacity: 0; }
    }
    @keyframes arenaFogPulse {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.05); }
    }
    @keyframes arenaLightningFlash {
        0%, 85%, 100% { opacity: 0; }
        88% { opacity: 0.8; }
        91% { opacity: 0; }
        94% { opacity: 0.5; }
    }
    @keyframes arenaBorderPulse {
        0%, 100% { opacity: 0.2; box-shadow: 0 0 10px currentColor; }
        50% { opacity: 0.6; box-shadow: 0 0 30px currentColor, 0 0 60px currentColor; }
    }
    @keyframes arenaVortexSpin {
        from { transform: translate(-50%,-50%) rotate(0deg); }
        to { transform: translate(-50%,-50%) rotate(360deg); }
    }
    @keyframes arenaDistort {
        0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
        25% { transform: scale(1.02) rotate(2deg); opacity: 0.5; }
        50% { transform: scale(1) rotate(0deg); opacity: 0.4; }
        75% { transform: scale(1.01) rotate(-1deg); opacity: 0.6; }
    }
    @keyframes arenaShake {
        0%, 100% { transform: translate(0, 0); }
        25% { transform: translate(-1px, 1px); }
        50% { transform: translate(1px, -1px); }
        75% { transform: translate(-1px, -1px); }
    }
    @keyframes customPulse {
        0%, 100% { box-shadow: 0 0 10px #ffd70044; }
        50% { box-shadow: 0 0 25px #ffd70088, 0 0 40px #ffd70033; }
    }
    @keyframes rainbowBorderAnim {
        0% { border-color: #ff4444; }
        16% { border-color: #ffd700; }
        33% { border-color: #44ff44; }
        50% { border-color: #44ffff; }
        66% { border-color: #4444ff; }
        83% { border-color: #ff44ff; }
        100% { border-color: #ff4444; }
    }

    .monster-container { text-align: center; margin-bottom: 25px; }
    .monster-name { font-size: 1.6em; margin-bottom: 10px; color: #ff6b6b; }

    .monster-sprite {
  width: min(320px, 82vw) !important;
  height: min(320px, 82vw) !important;
  max-width: 100% !important;
  margin: 20px auto;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 10px !important;
  box-shadow: 0 0 30px rgba(255,0,0,0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 4.5em !important;
  overflow: hidden !important;
}
.monster-sprite img,
.monster-sprite video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  border-radius: 10px !important;
  display: block !important;
}



    .health-bar-container { background: rgba(0,0,0,0.3); border-radius: 10px; padding: 8px 10px 6px; margin: 8px auto 4px; max-width: 350px; }
    .health-bar { height: 20px; border-radius: 10px; transition: width 0.4s ease; }

    .exercise-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        width: 100%;
    }

    /* Grille interne 2x2 créée par JS */
    .exercise-buttons > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .exercise-btn {
        position: relative;
        border: none;
        padding: 14px 16px;
        border-radius: 12px;
        cursor: pointer;
        font-size: 1em;
        font-weight: bold;
        color: #ffeaea;
        text-transform: uppercase;
        letter-spacing: 0.03em;

        border: 1px solid rgba(255,255,255,0.06);
        box-shadow:
            0 6px 16px rgba(0,0,0,0.7),
            0 0 12px var(--ex-glow, rgba(255,0,0,0.3)),
            inset 0 1px 0 rgba(255,255,255,0.08),
            inset 0 -2px 4px rgba(0,0,0,0.3);

        overflow: hidden;
        transition:
            transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            box-shadow 0.2s ease-out,
            filter 0.2s ease-out;
    }

    .exercise-btn::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 50%;
        border-radius: 12px 12px 0 0;
        background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent);
        pointer-events: none;
    }

    .exercise-btn::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -30%;
        width: 60%;
        height: 200%;
        background: radial-gradient(circle at 0 50%, rgba(255,255,255,0.3), transparent 55%);
        opacity: 0;
        transform: translateX(-40%);
        transition: opacity 0.3s, transform 0.4s;
    }

    .exercise-btn:hover:not(:disabled) {
        transform: translateY(-4px) scale(1.02);
        box-shadow:
            0 12px 28px rgba(0,0,0,0.8),
            0 0 25px var(--ex-glow, rgba(255,0,0,0.5)),
            inset 0 1px 0 rgba(255,255,255,0.12),
            inset 0 -2px 4px rgba(0,0,0,0.3);
        filter: brightness(1.15) saturate(1.2);
    }

    .exercise-btn:hover:not(:disabled)::after {
        opacity: 1;
        transform: translateX(200%);
    }

    .exercise-btn:active:not(:disabled) {
        transform: translateY(1px) scale(0.97);
        box-shadow:
            0 2px 8px rgba(0,0,0,0.8),
            0 0 8px var(--ex-glow, rgba(255,0,0,0.3));
        transition-duration: 0.08s;
    }

    .exercise-btn:disabled {
        opacity: 0.35;
        filter: grayscale(0.6);
        cursor: not-allowed;
    }

    .counter-section { text-align: center; margin-top: 20px; }
    .counter-display { font-size: 3.5em; font-weight: bold; color: #4ecdc4; margin: 15px 0; text-shadow: 0 0 15px rgba(78,205,196,0.5); }
    .action-btn {
        background: linear-gradient(135deg, #f093fb, #f5576c); border: none; padding: 8px 16px; border-radius: 8px;
        color: white; font-size: 0.95em; font-weight: bold; cursor: pointer; margin: 4px;
    }

    /* MESSAGES PLUS DARK */
    .message {
        text-align: center;
        font-size: 1.1em;
        margin: 15px 0;
        padding: 15px;
        background: rgba(10,10,20,0.9);
        border-radius: 10px;
        border-left: 4px solid #4ecdc4;
    }

    .victory-message {
        border-left-color: #ff1e56;
        background: linear-gradient(135deg, rgba(120,0,0,0.85), rgba(10,10,20,0.95));
        box-shadow: 0 0 20px rgba(255,0,0,0.5);
    }

    .defeat-message {
        border-left-color: #8b0000;
        background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(30,0,0,0.9));
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    .hidden { display: none !important; }
    .daily-quest {
        background: linear-gradient(135deg, #4ecdc4, #44a8a0); border-radius: 12px; padding: 20px; margin-bottom: 20px; text-align: center;
    }
    .quest-progress { font-size: 1.2em; margin-top: 10px; }

    .damage-indicator {
        position: fixed; font-size: 2em; font-weight: bold; color: #ff6b6b;
        animation: damageFloat 1s ease-out forwards; pointer-events: none; z-index: 1000;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .blood-splatter {
        position: absolute;
        width: 220px;
        height: 220px;
        background: url('sang.jpg') center/cover no-repeat;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
        pointer-events: none;
        animation: bloodFade 1.9s ease-out forwards;
    }

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

    @keyframes damageFloat { 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-80px);} }

    @media (max-width: 768px) { .screen { padding: 15px; } h1 { font-size: 1.8em; } }

    .profile-illustration {
        width: 100%;
        max-width: 400px;
        margin: 25px auto 0;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 25px rgba(0,0,0,0.7);
    }

    .profile-illustration img,
    .profile-illustration video {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .equip-layout {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid rgba(78,205,196,0.2);
    }

    .equip-mannequin {
        position: relative;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 15px;
    }

    .equip-silhouette {
        display: none;
    }

    /* Slots rectangulaires modernes */
    .equip-slot-circle,
    .equip-slot-buff {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        height: 70px;
        border-radius: 12px;
        border: 2px solid rgba(78,205,196,0.3);
        background: linear-gradient(145deg, #2a2a4a, #1a1a3a);
        color: #888;
        font-size: 0.75em;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .equip-slot-buff {
        border-color: rgba(255,215,0,0.4);
        background: linear-gradient(145deg, #2a2040, #1a1030);
    }

    .equip-slot-circle:hover,
    .equip-slot-buff:hover {
        border-color: #4ecdc4;
        box-shadow: 0 0 20px rgba(78,205,196,0.4);
        transform: translateY(-2px) !important;
        color: #fff;
    }

    /* quand un item est équipé */
    .equip-slot-filled {
        background: linear-gradient(145deg, #2a3a2a, #1a2a1a) !important;
        color: #4ecdc4 !important;
        border-color: #4ecdc4 !important;
    }

    .equip-slot-filled:hover {
        box-shadow: 0 0 25px rgba(78,205,196,0.6);
    }

    .inventory-items {
        min-height: 260px;
    }

    @media (max-width: 900px) {
      .inventory-layout {
          grid-template-columns: 1fr;
      }
    }

    .inventory-layout {
        display: grid;
        grid-template-columns: 400px 1fr;
        gap: 40px;
        align-items: flex-start;
        margin-top: 20px;
    }

    /* Carte mannequin */
    .equip-layout {
        padding: 20px;
    }

    /* Mannequin */
    .equip-mannequin {
        max-width: 350px;
        margin: 0 auto;
    }

    /* Taille des slots */
    .equip-slot-circle,
    .equip-slot-buff {
        width: 82px;
        height: 82px;
        font-size: 0.9em;
    }
	/* QUÊTES NOUVELLES */
/* [Phase 1 split] FIX : la regle .quest-rank-active du monolithe etait malformee
   (box-shadow sans valeur ni point-virgule, .quest-card imbrique sans
   fermeture). Le parser CSS s'arretait la et ignorait ~3700 lignes de styles
   apres (.lx-top, .lx-langs, .lx-tabs, .lx-title, etc). On clot proprement la
   regle .quest-rank-active et on extrait .quest-card en regle separee. */
.quest-rank-active {
  background: linear-gradient(135deg, #ff4b5c, #ee5a6f) !important;
  box-shadow: 0 0 0 1px rgba(255,107,107,0.6) !important;
}
.quest-card {
  background: linear-gradient(135deg, #2a2a4e 0%, #1e1e3a 100%);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  min-height: 200px;
}
.quest-card:hover { border-color: #4ecdc4; box-shadow: 0 0 20px rgba(78,205,196,0.3); }
.quest-card.completed { border-color: #ff6b6b; background: linear-gradient(135deg, #ff6b6b20, #ee5a6f20); }
.quest-title { font-size: 1.4em; font-weight: bold; color: #ff6b6b; margin-bottom: 10px; }
.quest-reqs { color: #4ecdc4; margin-bottom: 15px; }
.quest-reward { color: #ffd700; font-weight: bold; }
.claim-btn { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); border: none; padding: 10px 20px; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; margin-top: 10px; }

/* ===== SYSTÈME ÉNERGIE ===== */
#energy-bar-container {
    display: flex; align-items: center; gap: 10px;
    background: rgba(10,10,30,0.9); border: 1px solid rgba(0,200,255,0.4);
    border-radius: 12px; padding: 10px 16px; margin: 10px auto;
    max-width: 600px; box-shadow: 0 0 16px rgba(0,200,255,0.3);
}
#energy-orbs { display: flex; gap: 5px; flex-wrap: wrap; }
.energy-orb {
    width: 20px; height: 20px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #00eaff, #0044aa);
    box-shadow: 0 0 10px rgba(0,200,255,0.9);
    transition: all 0.3s;
}
.energy-orb.empty {
    background: radial-gradient(circle at 35% 30%, #222, #111);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#energy-label { color: #00eaff; font-weight: bold; font-size: 0.9em; white-space: nowrap; }
#energy-regen-timer { color: #888; font-size: 0.8em; margin-left: auto; white-space: nowrap; }

/* ===== ANIMATIONS COMBAT ÉPIQUES ===== */

/* IMPACT PRINCIPAL - Secousse violente avec rebond */
@keyframes monsterShake {
    0% { transform: translateX(0) scale(1); }
    10% { transform: translateX(-25px) rotate(-8deg) scale(0.95); }
    20% { transform: translateX(30px) rotate(10deg) scale(1.05); }
    30% { transform: translateX(-20px) rotate(-6deg) scale(0.97); }
    40% { transform: translateX(18px) rotate(5deg) scale(1.02); }
    50% { transform: translateX(-12px) rotate(-3deg); }
    60% { transform: translateX(10px) rotate(2deg); }
    70% { transform: translateX(-6px) rotate(-1deg); }
    85% { transform: translateX(3px); }
    100% { transform: translateX(0) scale(1); }
}

/* FLASH DE DÉGÂTS - Effet cinématique */
@keyframes monsterHit {
    0% { filter: brightness(1) saturate(1); transform: scale(1); }
    8% { filter: brightness(6) saturate(0) contrast(2); transform: scale(1.08); }
    15% { filter: brightness(0.3) saturate(3) hue-rotate(-30deg); transform: scale(0.92); }
    25% { filter: brightness(3) saturate(2) sepia(0.5); transform: scale(1.04); }
    40% { filter: brightness(0.6) saturate(1.5); transform: scale(0.96); }
    60% { filter: brightness(1.8) saturate(1.2); transform: scale(1.02); }
    100% { filter: brightness(1) saturate(1); transform: scale(1); }
}

/* SLASH EFFECT - Trainée lumineuse */
@keyframes slashEffect {
    0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; }
    30% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
    100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity: 0; }
}

/* IMPACT WAVE - Onde de choc */
@keyframes impactWave {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 8px; }
    50% { opacity: 0.8; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; border-width: 1px; }
}

/* SCREEN SHAKE - Tremblement d\'écran */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-8px, -5px) rotate(-0.5deg); }
    20% { transform: translate(10px, 3px) rotate(0.5deg); }
    30% { transform: translate(-6px, 6px) rotate(-0.3deg); }
    40% { transform: translate(8px, -4px) rotate(0.4deg); }
    50% { transform: translate(-5px, 2px) rotate(-0.2deg); }
    60% { transform: translate(4px, -3px) rotate(0.2deg); }
    70% { transform: translate(-3px, 4px) rotate(-0.1deg); }
    80% { transform: translate(2px, -2px) rotate(0.1deg); }
    90% { transform: translate(-1px, 1px); }
}

/* BLOOD BURST - Explosion de sang */
@keyframes bloodBurst {
    0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1.2) rotate(15deg); opacity: 0.9; }
    60% { transform: translate(-50%, -50%) scale(1.5) rotate(-10deg); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2) rotate(5deg); opacity: 0; }
}

/* CRITICAL HIT - Explosion dorée */
@keyframes critFlash {
    0% { transform: scale(0.5) rotate(-15deg); opacity: 0; text-shadow: 0 0 10px #ffd700; }
    15% { transform: scale(1.8) rotate(5deg); opacity: 1; text-shadow: 0 0 40px #ff8800, 0 0 80px #ff4400; }
    30% { transform: scale(1.4) rotate(-3deg); text-shadow: 0 0 60px #ffd700, 0 0 100px #ff6600; }
    50% { transform: scale(1.6) rotate(2deg); }
    70% { transform: scale(1.2) rotate(-1deg); opacity: 0.8; }
    100% { transform: scale(1) rotate(0deg) translateY(-50px); opacity: 0; }
}

/* COMBO TEXT - Texte de combo stylisé */
@keyframes comboText {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    20% { transform: scale(1.5) rotate(10deg); opacity: 1; }
    40% { transform: scale(1.2) rotate(-5deg); }
    60% { transform: scale(1.3) rotate(3deg); }
    80% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1) translateY(-80px); opacity: 0; }
}

/* PLAYER ATTACK FLASH */
@keyframes playerAttackFlash {
    0% { filter: brightness(1); }
    15% { filter: brightness(2.5) contrast(1.3); }
    30% { filter: brightness(0.8); }
    50% { filter: brightness(1.8); }
    100% { filter: brightness(1); }
}

/* ENERGY BURST - Pour les attaques puissantes */
@keyframes energyBurst {
    0% { box-shadow: inset 0 0 30px rgba(78, 205, 196, 0); }
    25% { box-shadow: inset 0 0 80px rgba(78, 205, 196, 0.8), 0 0 40px rgba(78, 205, 196, 0.5); }
    50% { box-shadow: inset 0 0 50px rgba(255, 107, 107, 0.6), 0 0 30px rgba(255, 107, 107, 0.4); }
    100% { box-shadow: inset 0 0 30px rgba(78, 205, 196, 0); }
}

/* MONSTER DEATH - Animation de mort épique */
@keyframes monsterDeath {
    0% { transform: scale(1) rotate(0); filter: brightness(1); opacity: 1; }
    20% { transform: scale(1.1) rotate(-5deg); filter: brightness(3) saturate(0); }
    40% { transform: scale(0.9) rotate(8deg); filter: brightness(0.5) sepia(1); }
    60% { transform: scale(1.05) rotate(-3deg); filter: brightness(2); opacity: 0.7; }
    80% { transform: scale(0.8) rotate(15deg); filter: brightness(0.3); opacity: 0.4; }
    100% { transform: scale(0) rotate(30deg); filter: brightness(0); opacity: 0; }
}

/* SPAWN ANIMATION - Apparition du monstre */
@keyframes monsterSpawn {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; filter: blur(20px); }
    30% { transform: scale(1.3) rotate(20deg); opacity: 0.7; filter: blur(5px); }
    60% { transform: scale(0.9) rotate(-10deg); opacity: 0.9; filter: blur(2px); }
    80% { transform: scale(1.05) rotate(5deg); filter: blur(0); }
    100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}

/* DAMAGE NUMBER - Chiffres de dégâts améliorés */
@keyframes damageNumber {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    15% { transform: translateY(-20px) scale(1.4); opacity: 1; }
    30% { transform: translateY(-35px) scale(1.1); }
    60% { transform: translateY(-60px) scale(1); opacity: 0.9; }
    100% { transform: translateY(-100px) scale(0.8); opacity: 0; }
}

/* BUFF ACTIVATION - Effet de buff */
@keyframes buffActivate {
    0% { transform: translateY(0) scale(0.3) rotate(-10deg); opacity: 0; }
    30% { transform: translateY(-25px) scale(1.3) rotate(5deg); opacity: 1; }
    50% { transform: translateY(-40px) scale(1.1) rotate(-3deg); }
    70% { transform: translateY(-55px) scale(1) rotate(2deg); opacity: 0.8; }
    100% { transform: translateY(-80px) scale(0.9) rotate(0deg); opacity: 0; }
}

/* AURAS AMÉLIORÉES */
@keyframes poisonAura {
    0% { box-shadow: 0 0 20px rgba(0,255,65,0.2) inset, 0 0 40px rgba(0,255,65,0.1); }
    25% { box-shadow: 0 0 40px rgba(0,255,65,0.5) inset, 0 0 60px rgba(0,255,65,0.3); }
    50% { box-shadow: 0 0 60px rgba(0,255,65,0.8) inset, 0 0 80px rgba(0,255,65,0.5); }
    75% { box-shadow: 0 0 40px rgba(0,255,65,0.5) inset, 0 0 60px rgba(0,255,65,0.3); }
    100% { box-shadow: 0 0 20px rgba(0,255,65,0.2) inset, 0 0 40px rgba(0,255,65,0.1); }
}
@keyframes burnAura {
    0% { box-shadow: 0 0 30px rgba(255,100,0,0.3) inset, 0 0 50px rgba(255,50,0,0.2); }
    30% { box-shadow: 0 0 50px rgba(255,80,0,0.6) inset, 0 0 70px rgba(255,30,0,0.4); }
    50% { box-shadow: 0 0 80px rgba(255,50,0,0.9) inset, 0 0 100px rgba(255,0,0,0.6); }
    70% { box-shadow: 0 0 50px rgba(255,80,0,0.6) inset, 0 0 70px rgba(255,30,0,0.4); }
    100% { box-shadow: 0 0 30px rgba(255,100,0,0.3) inset, 0 0 50px rgba(255,50,0,0.2); }
}
@keyframes bleedAura {
    0% { box-shadow: 0 0 20px rgba(180,0,0,0.3) inset; }
    25% { box-shadow: 0 0 35px rgba(200,0,0,0.5) inset, 0 0 15px rgba(255,0,0,0.3); }
    50% { box-shadow: 0 0 55px rgba(255,0,0,0.8) inset, 0 0 30px rgba(255,0,0,0.5); }
    75% { box-shadow: 0 0 35px rgba(200,0,0,0.5) inset, 0 0 15px rgba(255,0,0,0.3); }
    100% { box-shadow: 0 0 20px rgba(180,0,0,0.3) inset; }
}
@keyframes stunAura {
    0% { box-shadow: 0 0 25px rgba(255,255,0,0.3) inset; filter: brightness(1); }
    25% { box-shadow: 0 0 45px rgba(255,255,0,0.6) inset; filter: brightness(1.1); }
    50% { box-shadow: 0 0 70px rgba(255,255,0,0.9) inset; filter: brightness(1.3); }
    75% { box-shadow: 0 0 45px rgba(255,255,0,0.6) inset; filter: brightness(1.1); }
    100% { box-shadow: 0 0 25px rgba(255,255,0,0.3) inset; filter: brightness(1); }
}
@keyframes energyCritical {
    0%,100% { border-color: rgba(255,50,50,0.5); box-shadow: 0 0 10px rgba(255,0,0,0.3); }
    50% { border-color: rgba(255,50,50,1); box-shadow: 0 0 30px rgba(255,0,0,0.8), inset 0 0 20px rgba(255,0,0,0.2); }
}

/* CLASSES D\'AURA */
.battle-arena.aura-poison { animation: poisonAura 2s infinite ease-in-out; }
.battle-arena.aura-burn { animation: burnAura 1.2s infinite ease-in-out; }
.battle-arena.aura-bleed { animation: bleedAura 1.5s infinite ease-in-out; }
.battle-arena.aura-stun { animation: stunAura 0.6s infinite ease-in-out; }
.battle-arena.screen-shake { animation: screenShake 0.5s ease-out; }
.battle-arena.energy-burst { animation: energyBurst 0.8s ease-out; }

/* ============ ANIMATIONS BOSS EN COMBAT ============ */
.battle-arena.boss-fight { position: relative; }
.battle-arena.boss-fight::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 15px;
}

/* Boss Rang E */
.battle-arena.boss-rank-E::after {
    background: radial-gradient(circle, transparent 60%, rgba(136,136,136,0.3) 100%);
    animation: bossAuraE 3s ease-in-out infinite;
}
@keyframes bossAuraE { 0%,100% { opacity:0.5; } 50% { opacity:1; } }

/* Boss Rang D - Clown */
.battle-arena.boss-rank-D::after {
    background: radial-gradient(circle at 30% 70%, rgba(255,0,100,0.2) 0%, transparent 40%),
                radial-gradient(circle at 70% 30%, rgba(100,0,255,0.2) 0%, transparent 40%);
    animation: bossAuraD 2s ease-in-out infinite;
}
@keyframes bossAuraD { 0%,100% { filter:hue-rotate(0deg); } 50% { filter:hue-rotate(30deg); } }

/* Boss Rang C - Troll */
.battle-arena.boss-rank-C::after {
    background: radial-gradient(circle, transparent 50%, rgba(0,255,136,0.25) 100%);
    animation: bossAuraC 2.5s ease-in-out infinite;
}
@keyframes bossAuraC { 0%,100% { opacity:0.3; } 50% { opacity:0.8; } }

/* Boss Rang B - Dragon */
.battle-arena.boss-rank-B { animation: bossShakeB 0.15s infinite; }
.battle-arena.boss-rank-B::after {
    background: radial-gradient(ellipse at bottom, rgba(255,68,68,0.35) 0%, transparent 50%),
                radial-gradient(circle, transparent 40%, rgba(255,100,0,0.25) 100%);
    animation: bossAuraB 1.5s ease-in-out infinite;
}
@keyframes bossAuraB { 0%,100% { opacity:0.5; } 50% { opacity:1; } }
@keyframes bossShakeB { 0%,100% { transform:translateX(0); } 50% { transform:translateX(2px); } }

/* Boss Rang A */
.battle-arena.boss-rank-A::after {
    background: radial-gradient(circle at 20% 80%, rgba(255,0,255,0.25) 0%, transparent 40%),
                radial-gradient(circle at 80% 20%, rgba(138,43,226,0.25) 0%, transparent 40%);
    animation: bossAuraA 1s ease-in-out infinite;
}
@keyframes bossAuraA { 0%,100% { opacity:0.6; } 50% { opacity:1; filter:brightness(1.2); } }

/* Boss Rang S */
.battle-arena.boss-rank-S { animation: bossShakeS 2s ease-in-out infinite; }
.battle-arena.boss-rank-S::after {
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 50%),
                radial-gradient(circle at 50% 100%, rgba(255,170,0,0.35) 0%, transparent 60%);
    animation: bossAuraS 1.2s ease-in-out infinite;
}
@keyframes bossAuraS { 0%,100% { opacity:0.4; } 50% { opacity:1; } }
@keyframes bossShakeS { 0%,100% { transform:scale(1); } 50% { transform:scale(1.01); } }

/* Boss Monarque - DANGER MAXIMUM */
.battle-arena.boss-rank-Monarque { animation: bossShakeMonarque 0.1s infinite; }
.battle-arena.boss-rank-Monarque::after {
    background: radial-gradient(circle at 30% 70%, rgba(255,68,0,0.35) 0%, transparent 40%),
                radial-gradient(circle at 70% 30%, rgba(139,0,0,0.35) 0%, transparent 40%),
                radial-gradient(circle, transparent 20%, rgba(255,0,0,0.3) 100%);
    animation: bossAuraMonarque 0.8s ease-in-out infinite;
}
@keyframes bossAuraMonarque { 0%,100% { opacity:0.6; } 50% { opacity:1; filter:brightness(1.4); } }
@keyframes bossShakeMonarque { 0%,100% { transform:translate(0,0); } 25% { transform:translate(-2px,1px); } 75% { transform:translate(2px,-1px); } }

/* Particules de boss */
.boss-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    animation: bossParticleRise 2s ease-out forwards;
}
@keyframes bossParticleRise {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-150px) scale(0); opacity: 0; }
}

/* MONSTER SPRITE ANIMATIONS */
.monster-sprite.hit-effect { animation: monsterShake 0.6s ease-out, monsterHit 0.7s ease-out; }
.monster-sprite.death-effect { animation: monsterDeath 1.2s ease-out forwards; }
.monster-sprite.spawn-effect { animation: monsterSpawn 0.8s ease-out; }

/* ÉLÉMENTS VISUELS DE COMBAT */
.slash-effect {
    position: absolute; top: 50%; left: 0; right: 0; height: 8px;
    background: linear-gradient(90deg, transparent, #fff, #4ecdc4, #fff, transparent);
    transform: translateY(-50%) rotate(-15deg);
    animation: slashEffect 0.4s ease-out forwards;
    pointer-events: none; z-index: 100;
    box-shadow: 0 0 20px rgba(78,205,196,0.8), 0 0 40px rgba(255,255,255,0.5);
}

.impact-wave {
    position: absolute; top: 50%; left: 50%;
    width: 100px; height: 100px; border-radius: 50%;
    border: 6px solid rgba(255,107,107,0.8);
    background: transparent;
    animation: impactWave 0.6s ease-out forwards;
    pointer-events: none; z-index: 99;
}

.blood-burst {
    position: absolute; width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(180,0,0,0.9) 0%, rgba(120,0,0,0.6) 40%, transparent 70%);
    border-radius: 50%;
    animation: bloodBurst 0.8s ease-out forwards;
    pointer-events: none; z-index: 98;
    filter: blur(2px);
}

.crit-text {
    position: fixed; font-size: 3.5em; font-weight: 900;
    color: #ffd700; 
    text-shadow: 0 0 20px #ff8800, 0 0 40px #ff4400, 4px 4px 0 #8b0000, -2px -2px 0 #ffaa00;
    animation: critFlash 1.2s ease-out forwards;
    pointer-events: none; z-index: 1001;
    letter-spacing: 3px;
    font-family: 'Impact', sans-serif;
}

.combo-text {
    position: fixed; font-size: 2.5em; font-weight: 800;
    color: #4ecdc4;
    text-shadow: 0 0 15px #4ecdc4, 3px 3px 0 #1a1a2e;
    animation: comboText 1s ease-out forwards;
    pointer-events: none; z-index: 1001;
}

.damage-indicator {
    position: fixed; font-size: 2.2em; font-weight: bold;
    animation: damageNumber 1.2s ease-out forwards;
    pointer-events: none; z-index: 1000;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.8), 0 0 15px currentColor;
    font-family: 'Impact', sans-serif;
}
.damage-indicator.player-damage { color: #4ecdc4; }
.damage-indicator.monster-damage { color: #ff6b6b; }
.damage-indicator.crit-damage { color: #ffd700; font-size: 3em; }
.damage-indicator.heal { color: #00ff88; }

/* ============ ANIMATIONS SPÉCIFIQUES PAR EXERCICE ============ */

/* OVERLAY CONTAINER */
.exercise-fx-overlay { overflow:visible !important; }

/* ONDE DE CHOC GÉNÉRIQUE réutilisable */
@keyframes fxShockwave {
    0% { width:0; height:0; opacity:1; border-width:6px; }
    60% { opacity:0.6; border-width:3px; }
    100% { width:300px; height:300px; opacity:0; border-width:1px; }
}
.fx-shockwave {
    position:absolute; border-radius:50%;
    border:6px solid rgba(255,100,0,0.8);
    background:transparent; pointer-events:none;
    transform:translate(-50%,-50%);
    animation: fxShockwave 0.7s ease-out forwards;
}
.fx-shockwave-big { animation-duration: 0.9s; }
.fx-shockwave-delay { animation-delay: 0.15s; opacity:0; animation-fill-mode:forwards; }

/* ===== POMPES - Poing de force ===== */
@keyframes fistImpact {
    0% { transform: translate(-50%,-50%) scale(0); opacity:1; }
    25% { transform: translate(-50%,-50%) scale(1.2); opacity:1; }
    100% { transform: translate(-50%,-50%) scale(2.5); opacity:0; }
}
.exercise-fx-pompes {
    position:absolute; top:40%; left:50%; width:150px; height:150px;
    background: radial-gradient(circle, rgba(255,120,0,0.95) 0%, rgba(255,60,0,0.6) 35%, rgba(200,30,0,0.3) 55%, transparent 75%);
    border-radius:50%; pointer-events:none;
    animation: fistImpact 0.7s ease-out forwards;
}
.exercise-fx-pompes::after {
    content:'👊'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); font-size:3.5em;
    filter: drop-shadow(0 0 20px rgba(255,100,0,0.9));
    animation: fistEmoji 0.7s ease-out forwards;
}
@keyframes fistEmoji {
    0% { transform: translate(-50%,-50%) scale(0) rotate(-90deg); }
    30% { transform: translate(-50%,-50%) scale(1.5) rotate(10deg); }
    60% { transform: translate(-50%,-50%) scale(1.2) rotate(-5deg); }
    100% { transform: translate(-50%,-50%) scale(0.8) rotate(0deg); opacity:0; }
}

/* ===== ABDOS - Tourbillon d\'énergie ===== */
@keyframes vortexSpin {
    0% { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity:1; }
    50% { transform: translate(-50%,-50%) scale(1.2) rotate(360deg); opacity:0.9; }
    100% { transform: translate(-50%,-50%) scale(2) rotate(720deg); opacity:0; }
}
.exercise-fx-abdos {
    position:absolute; top:40%; left:50%; width:180px; height:180px;
    pointer-events:none;
    animation: vortexSpin 0.9s ease-out forwards;
    background: conic-gradient(from 0deg, 
        rgba(138,43,226,0.9), 
        rgba(255,0,255,0.7), 
        rgba(78,205,196,0.7), 
        rgba(138,43,226,0.5),
        rgba(255,0,255,0.3),
        transparent);
    border-radius:50%;
    mask: radial-gradient(circle, transparent 20%, black 30%, black 70%, transparent 80%);
    -webkit-mask: radial-gradient(circle, transparent 20%, black 30%, black 70%, transparent 80%);
    filter: drop-shadow(0 0 15px rgba(138,43,226,0.8));
}

/* ===== SQUATS - Séisme ===== */
@keyframes quakeWave {
    0% { transform: translate(-50%,0) scaleX(0.1); opacity:1; }
    30% { transform: translate(-50%,0) scaleX(1); opacity:0.9; }
    100% { transform: translate(-50%,0) scaleX(3); opacity:0; }
}
@keyframes crackLines {
    0% { transform: translate(-50%,-50%) scaleY(0); opacity:0; }
    20% { opacity:1; }
    40% { transform: translate(-50%,-50%) scaleY(1); opacity:1; }
    100% { transform: translate(-50%,-50%) scaleY(1); opacity:0; }
}
.exercise-fx-squats {
    position:absolute; bottom:15%; left:50%; width:250px; height:50px;
    background: radial-gradient(ellipse, rgba(255,170,0,0.9) 0%, rgba(200,100,0,0.5) 40%, transparent 75%);
    border-radius:50%;
    pointer-events:none;
    animation: quakeWave 0.8s ease-out forwards;
    filter: drop-shadow(0 0 20px rgba(255,150,0,0.7));
}
.exercise-fx-squats::before {
    content:'⚡'; position:absolute; top:-35px; left:50%;
    transform:translateX(-50%); font-size:2.5em;
    animation: crackLines 0.8s ease-out forwards;
}

/* ===== SQUATS SAUTÉ - Éclair du ciel ===== */
@keyframes lightningBolt {
    0% { opacity:0; transform: scaleY(0); transform-origin:top; }
    10% { opacity:1; transform: scaleY(1); }
    30% { opacity:1; filter: brightness(3); }
    50% { opacity:0.8; filter: brightness(1.5); }
    100% { opacity:0; }
}
@keyframes lightningFlash {
    0%,100% { opacity:0; }
    5% { opacity:0.7; }
    10% { opacity:0; }
    15% { opacity:0.5; }
    25% { opacity:0; }
}
.exercise-fx-lightning {
    position:absolute; top:0; left:42%; width:16%; height:75%;
    pointer-events:none;
    background: linear-gradient(180deg,
        rgba(100,200,255,0) 0%,
        rgba(150,220,255,1) 5%,
        rgba(255,255,255,1) 15%,
        rgba(100,200,255,0.9) 30%,
        rgba(255,255,255,1) 50%,
        rgba(100,200,255,0.8) 70%,
        rgba(255,255,255,0.9) 85%,
        rgba(200,230,255,0) 100%);
    clip-path: polygon(
        45% 0%, 55% 0%,
        60% 20%, 50% 20%,
        70% 45%, 55% 45%,
        75% 70%, 52% 70%,
        65% 100%, 50% 100%,
        40% 70%, 48% 70%,
        30% 45%, 45% 45%,
        25% 20%, 40% 20%
    );
    animation: lightningBolt 0.6s ease-out forwards;
    filter: drop-shadow(0 0 25px rgba(100,200,255,0.9)) drop-shadow(0 0 50px rgba(50,150,255,0.5));
}
.exercise-fx-lightning-flash {
    position:absolute; inset:0;
    background: rgba(180,220,255,0.35);
    pointer-events:none;
    animation: lightningFlash 0.6s ease-out forwards;
    border-radius: inherit;
}

/* ===== BURPEES - Explosion massive ===== */
@keyframes bigExplosion {
    0% { transform: translate(-50%,-50%) scale(0); opacity:1; }
    15% { transform: translate(-50%,-50%) scale(0.6); opacity:1; }
    40% { transform: translate(-50%,-50%) scale(1.5); opacity:0.8; }
    100% { transform: translate(-50%,-50%) scale(3); opacity:0; }
}
.exercise-fx-burpees {
    position:absolute; top:40%; left:50%; width:200px; height:200px;
    background: radial-gradient(circle,
        rgba(255,255,220,1) 0%,
        rgba(255,200,50,0.95) 15%,
        rgba(255,100,0,0.8) 30%,
        rgba(220,30,0,0.5) 50%,
        rgba(100,0,0,0.2) 70%,
        transparent 85%);
    border-radius:50%; pointer-events:none;
    animation: bigExplosion 0.9s ease-out forwards;
    filter: drop-shadow(0 0 30px rgba(255,150,0,0.8));
}
.exercise-fx-burpees::after {
    content:'💥'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); font-size:4em;
    animation: fistEmoji 0.8s ease-out forwards;
}

/* ===== TRACTIONS - Triple griffure ===== */
@keyframes clawSwipe {
    0% { transform: scaleX(0) rotate(var(--claw-rot)); transform-origin:left; opacity:1; }
    35% { transform: scaleX(1) rotate(var(--claw-rot)); transform-origin:left; opacity:1; }
    70% { opacity:0.6; }
    100% { opacity:0; }
}
.exercise-fx-claw {
    position:absolute; left:10%; right:10%; height:12px;
    background: linear-gradient(90deg, transparent 0%, #ff3333 10%, #ffffff 50%, #ff3333 90%, transparent 100%);
    pointer-events:none;
    box-shadow: 0 0 20px rgba(255,50,50,0.9), 0 0 40px rgba(255,0,0,0.4);
    border-radius: 2px;
}
.exercise-fx-claw-1 {
    top:28%; --claw-rot: -12deg;
    animation: clawSwipe 0.5s ease-out forwards;
}
.exercise-fx-claw-2 {
    top:43%; --claw-rot: -5deg;
    animation: clawSwipe 0.5s ease-out 0.1s forwards;
    opacity:0;
}
.exercise-fx-claw-3 {
    top:58%; --claw-rot: 3deg;
    animation: clawSwipe 0.5s ease-out 0.2s forwards;
    opacity:0;
}

/* ===== DIPS - Marteau écrasant ===== */
@keyframes hammerDrop {
    0% { transform: translate(-50%,-300%) scale(0.8); opacity:1; }
    40% { transform: translate(-50%,-50%) scale(1.2); opacity:1; }
    50% { transform: translate(-50%,-35%) scale(1.4,0.7); }
    65% { transform: translate(-50%,-50%) scale(0.9,1.15); }
    100% { transform: translate(-50%,-50%) scale(2); opacity:0; }
}
.exercise-fx-dips {
    position:absolute; top:40%; left:50%; width:130px; height:130px;
    background: radial-gradient(circle, rgba(160,160,255,1) 0%, rgba(120,120,220,0.6) 30%, rgba(80,80,180,0.2) 55%, transparent 70%);
    border-radius:50%; pointer-events:none;
    animation: hammerDrop 0.8s ease-in forwards;
    filter: drop-shadow(0 0 25px rgba(150,150,255,0.9));
}
.exercise-fx-dips::after {
    content:'🔨'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); font-size:3.5em;
    filter: drop-shadow(0 0 15px rgba(150,150,255,0.8));
}

/* ============ BOUTIQUE GEMMES ============ */
.gem-pack {
    background: linear-gradient(145deg, rgba(170,68,255,0.15), rgba(100,30,180,0.1));
    border:3px solid #aa44ff; border-radius:15px; padding:20px;
    text-align:center; cursor:pointer; transition:all 0.3s;
}
.gem-pack:hover { transform:translateY(-5px); box-shadow:0 0 30px rgba(170,68,255,0.4); }
.gem-pack.popular { border-color:#ffd700; box-shadow:0 0 20px rgba(255,215,0,0.3); }
.gem-pack.popular::before {
    content:'⭐ POPULAIRE'; display:block;
    background:#ffd700; color:#000; font-weight:bold; font-size:0.75em;
    padding:3px 10px; border-radius:5px; margin:-10px auto 10px; width:fit-content;
}
.gem-item {
    background: linear-gradient(145deg, rgba(30,30,50,0.95), rgba(15,15,30,0.95));
    border:2px solid #555; border-radius:12px; padding:15px;
    text-align:center; cursor:pointer; transition:all 0.3s;
}
.gem-item:hover { border-color:#aa44ff; transform:translateY(-3px); }
.gem-item.owned { border-color:#4ecdc4; opacity:0.6; }

/* ============ BESTIAIRE ============ */
.bestiary-card {
    background: linear-gradient(145deg, rgba(20,20,40,0.95), rgba(10,10,25,0.95));
    border: 2px solid #333; border-radius:12px;
    padding:12px; text-align:center; cursor:pointer;
    transition: all 0.3s ease; position:relative; overflow:hidden;
}
.bestiary-card:hover { transform:translateY(-3px); border-color:#ffd700; }
.bestiary-card.discovered { border-color:#4ecdc4; }
.bestiary-card.undiscovered { opacity:0.4; filter:grayscale(0.8); cursor:default; }
.bestiary-card.undiscovered:hover { transform:none; border-color:#333; }
.bestiary-card .kill-badge {
    position:absolute; top:5px; right:5px;
    background:rgba(255,68,68,0.9); color:#fff;
    font-size:0.7em; padding:2px 7px; border-radius:8px; font-weight:bold;
}
.bestiary-detail-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.95);
    z-index:10006; display:flex; align-items:center; justify-content:center;
    padding:20px; overflow-y:auto;
}

/* ============ ARBRE DE TALENTS ============ */
.talent-node {
    position:relative; text-align:center; padding:12px;
    background: linear-gradient(145deg, rgba(30,30,50,0.95), rgba(15,15,30,0.95));
    border:3px solid #444; border-radius:15px;
    cursor:pointer; transition: all 0.3s ease;
    min-height:110px; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}
.talent-node:hover { transform:translateY(-3px); border-color:#888; }
.talent-node.talent-unlocked {
    border-color:#ffd700; background:linear-gradient(145deg, rgba(60,50,10,0.95), rgba(30,25,5,0.95));
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}
.talent-node.talent-available {
    border-color:#4ecdc4; animation: talentPulse 2s infinite;
}
.talent-node.talent-locked {
    opacity:0.4; cursor:not-allowed; filter:grayscale(0.5);
}
.talent-node.talent-maxed {
    border-color:#ff8800; background:linear-gradient(145deg, rgba(80,40,0,0.95), rgba(40,20,0,0.95));
    box-shadow: 0 0 25px rgba(255,136,0,0.4);
}
@keyframes talentPulse {
    0%,100% { box-shadow: 0 0 10px rgba(78,205,196,0.3); }
    50% { box-shadow: 0 0 25px rgba(78,205,196,0.6); }
}
.talent-connector {
    width:3px; height:25px; background:linear-gradient(180deg, #444, #333);
    margin:0 auto;
}
.talent-connector.active { background:linear-gradient(180deg, #ffd700, #ff8800); box-shadow:0 0 8px rgba(255,215,0,0.5); }
.talent-branch-title {
    text-align:center; padding:10px 20px; border-radius:10px;
    font-weight:bold; font-size:1.1em; margin-bottom:10px;
    border:2px solid; cursor:pointer; transition:all 0.3s;
}
.talent-branch-title:hover { transform:scale(1.03); }
.talent-branch-title.active { box-shadow: 0 0 15px currentColor; }

/* Shakes spécifiques par exercice */
@keyframes shakeHeavy {
    0%,100% { transform: translate(0,0); }
    10% { transform: translate(-12px,-8px) rotate(-1deg); }
    20% { transform: translate(15px,5px) rotate(1deg); }
    30% { transform: translate(-10px,8px) rotate(-0.5deg); }
    40% { transform: translate(12px,-6px) rotate(0.5deg); }
    50% { transform: translate(-8px,4px); }
    60% { transform: translate(6px,-3px); }
    80% { transform: translate(-3px,2px); }
}
@keyframes shakeLightFast {
    0%,100% { transform: translate(0,0); }
    15% { transform: translate(-3px,-2px); }
    30% { transform: translate(4px,1px); }
    45% { transform: translate(-2px,3px); }
    60% { transform: translate(3px,-2px); }
    75% { transform: translate(-1px,1px); }
}
.battle-arena.shake-heavy { animation: shakeHeavy 0.6s ease-out; }
.battle-arena.shake-light { animation: shakeLightFast 0.4s ease-out; }

.buff-float {
    position: fixed; font-size: 1.4em; font-weight: bold;
    padding: 8px 18px; border-radius: 25px; border: 3px solid;
    animation: buffActivate 1.5s ease-out forwards;
    pointer-events: none; z-index: 1002;
    backdrop-filter: blur(5px);
}
.buff-float.debuff { 
    background: linear-gradient(135deg, rgba(180,0,0,0.9), rgba(100,0,0,0.8)); 
    color: #fff; border-color: #ff4444;
    box-shadow: 0 0 20px rgba(255,0,0,0.5);
}
.buff-float.good { 
    background: linear-gradient(135deg, rgba(0,160,80,0.9), rgba(0,100,50,0.8)); 
    color: #fff; border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0,255,136,0.5);
}
.buff-float.info { 
    background: linear-gradient(135deg, rgba(0,80,180,0.9), rgba(0,50,120,0.8)); 
    color: #fff; border-color: #4488ff;
    box-shadow: 0 0 20px rgba(68,136,255,0.5);
}

/* PARTICULES DE COMBAT */
.combat-particle {
    position: absolute; border-radius: 50%; pointer-events: none;
    animation: particleFly 0.8s ease-out forwards;
}
@keyframes particleFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ===== ÉCRAN HISTOIRE DONJON ===== */
@keyframes storyIconPulse {
    0%,100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 20px rgba(255,100,0,0.6)); }
    50%      { transform: scale(1.12) rotate(3deg); filter: drop-shadow(0 0 40px rgba(255,200,0,0.9)); }
}
@keyframes storyTextFadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes particleFloat {
    0%   { transform:translateY(0) translateX(0) scale(1); opacity:0.8; }
    100% { transform:translateY(-120vh) translateX(var(--dx)) scale(0.3); opacity:0; }
}
#dungeon-story-screen.active { display:flex !important; }

#story-text span.story-char {
    display:inline;
    animation: storyTextFadeIn 0.04s ease forwards;
}
.story-particle {
    position:absolute; border-radius:50%;
    animation: particleFloat var(--dur) ease-in forwards;
}

.dungeon-locked { opacity: 0.55; cursor: not-allowed !important; position: relative; }
.dungeon-requirements {
    background: rgba(255,80,0,0.12); border: 1px solid rgba(255,100,0,0.4);
    border-radius: 8px; padding: 8px; margin-top: 8px;
    font-size: 0.75em; color: #ffaa55; text-align: left; line-height: 1.6;
}
.req-ok { color: #00ff88; }
.req-fail { color: #ff4444; }
#energy-warning {
    display: none; text-align: center; padding: 15px; margin: 10px;
    background: rgba(255,0,0,0.2); border: 2px solid #ff4444; border-radius: 12px;
    color: #ff8888; font-weight: bold; animation: energyCritical 1s infinite;
}

/* ===== CHRONOMÈTRE D\'ATTAQUE ENNEMI ===== */
#enemy-attack-timer {
    position: fixed;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: linear-gradient(135deg, rgba(160,0,0,0.97), rgba(80,0,0,0.95));
    border: 3px solid #ff2222;
    border-radius: 20px;
    padding: 14px 32px 12px;
    min-width: 280px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 0 40px rgba(255,0,0,0.7), 0 0 80px rgba(255,0,0,0.25), 0 4px 20px rgba(0,0,0,0.6);
    pointer-events: none;
}
#enemy-attack-timer .timer-bar-bg {
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    height: 10px;
    overflow: hidden;
    margin-top: 8px;
}
#enemy-attack-timer .timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff2222, #ff8800, #ffdd00);
    border-radius: 10px;
    transition: width 0.1s linear;
    box-shadow: 0 0 12px rgba(255,180,0,0.9);
}
#enemy-attack-timer .timer-text {
    font-size: 1.6em;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,60,0,1), 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.08em;
    font-family: 'Cinzel', serif;
}
#enemy-attack-timer.warning {
    animation: timerWarning 0.4s infinite;
    border-color: #ff0000;
}
@keyframes timerWarning {
    0%, 100% { box-shadow: 0 0 40px rgba(255,0,0,0.7), 0 0 80px rgba(255,0,0,0.25); transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 0 80px rgba(255,0,0,1), 0 0 140px rgba(255,0,0,0.5); transform: translateX(-50%) scale(1.05); }
}

/* ===== ANIMATIONS DE DEBUFFS VISUELS ===== */
@keyframes fearShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-5px) rotate(-1deg); }
    20% { transform: translateX(5px) rotate(1deg); }
    30% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    50% { transform: translateX(-3px) rotate(-0.5deg); }
    60% { transform: translateX(3px) rotate(0.5deg); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}
@keyframes fearOverlay {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}
@keyframes poisonPulse {
    0%, 100% { filter: hue-rotate(0deg) saturate(1); }
    50% { filter: hue-rotate(60deg) saturate(1.5); }
}
@keyframes bleedDrip {
    0% { opacity: 0; transform: translateY(-10px); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(100px); }
}
@keyframes stunStars {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes burnFlicker {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    25% { opacity: 1; transform: scale(1.1) rotate(2deg); }
    50% { opacity: 0.6; transform: scale(0.95) rotate(-1deg); }
    75% { opacity: 0.9; transform: scale(1.05) rotate(1deg); }
}
@keyframes skipTurnPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.debuff-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 50;
    border-radius: 15px;
    overflow: hidden;
}
.debuff-overlay.fear {
    background: radial-gradient(circle, transparent 30%, rgba(100,0,100,0.4) 100%);
    animation: fearOverlay 1s infinite;
}
.debuff-overlay.poison {
    background: radial-gradient(circle, transparent 50%, rgba(0,150,0,0.3) 100%);
}
.debuff-overlay.bleed {
    background: linear-gradient(180deg, transparent 70%, rgba(150,0,0,0.4) 100%);
}
.debuff-overlay.stun {
    background: radial-gradient(circle, rgba(255,255,0,0.2) 0%, transparent 60%);
}
.debuff-overlay.burn {
    background: radial-gradient(circle at bottom, rgba(255,100,0,0.4) 0%, transparent 50%);
}

.fear-active {
    animation: fearShake 0.8s infinite;
}
.poison-active {
    animation: poisonPulse 2s infinite;
}
.stun-active .monster-sprite {
    animation: stunStars 2s linear infinite;
}

/* Icônes de debuff flottantes */
.debuff-icon-float {
    position: absolute;
    font-size: 2em;
    animation: buffActivate 2s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

/* Skip turn overlay */
.skip-turn-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: skipTurnPulse 1s infinite;
}
.skip-turn-overlay .message {
    font-size: 2.5em;
    color: #ff6b6b;
    text-shadow: 0 0 20px rgba(255,0,0,0.8);
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   [v14.65] ANIMATIONS DE STATUT PERMANENTES SUR LE MONSTRE
   Quand un debuff est actif (brûlure, gel, poison), un overlay SVG
   animé est visible EN PERMANENCE sur le sprite du monstre.
   Particules continues, filtres CSS, glow coloré.
   ════════════════════════════════════════════════════════════════ */

/* Le sprite doit être positionné pour contenir les overlays absolus.
   overflow:visible override car on veut voir flammes/bulles dépasser. */
#monster-sprite {
    position: relative !important;
}
#monster-sprite .combat-status-fx {
    overflow: visible !important;
}

/* Conteneur overlay à placer dans #monster-sprite */
.combat-status-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: visible;
}
.combat-status-fx svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── BRÛLURE — flammes permanentes qui dansent autour du monstre ── */
.combat-status-fx.burn-fx .flame {
    animation: fxFlameDance 0.55s ease-in-out infinite;
    transform-origin: center bottom;
    filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.8));
}
.combat-status-fx.burn-fx .flame:nth-child(1) { animation-delay: 0s;    transform-origin: 20% 90%; }
.combat-status-fx.burn-fx .flame:nth-child(2) { animation-delay: 0.1s;  transform-origin: 50% 95%; }
.combat-status-fx.burn-fx .flame:nth-child(3) { animation-delay: 0.2s;  transform-origin: 80% 90%; }
.combat-status-fx.burn-fx .flame:nth-child(4) { animation-delay: 0.15s; transform-origin: 35% 92%; }
.combat-status-fx.burn-fx .flame:nth-child(5) { animation-delay: 0.25s; transform-origin: 65% 93%; }
@keyframes fxFlameDance {
    0%, 100% { transform: scaleY(1)    scaleX(1)    translateY(0);  opacity: 0.95; }
    25%      { transform: scaleY(1.15) scaleX(0.92) translateY(-2px); opacity: 1;    }
    50%      { transform: scaleY(0.92) scaleX(1.08) translateY(1px);  opacity: 0.85; }
    75%      { transform: scaleY(1.1)  scaleX(0.95) translateY(-1px); opacity: 1;    }
}
.combat-status-fx.burn-fx .ember {
    animation: fxEmberRise 1.6s ease-out infinite;
    opacity: 0;
}
.combat-status-fx.burn-fx .ember:nth-child(6)  { animation-delay: 0s;    }
.combat-status-fx.burn-fx .ember:nth-child(7)  { animation-delay: 0.3s;  }
.combat-status-fx.burn-fx .ember:nth-child(8)  { animation-delay: 0.6s;  }
.combat-status-fx.burn-fx .ember:nth-child(9)  { animation-delay: 0.9s;  }
.combat-status-fx.burn-fx .ember:nth-child(10) { animation-delay: 1.2s;  }
@keyframes fxEmberRise {
    0%   { transform: translateY(0)   scale(1);    opacity: 1;   }
    100% { transform: translateY(-60px) scale(0.3); opacity: 0;   }
}

/* ── GEL — cristaux de glace qui se forment + aura bleue ── */
.combat-status-fx.freeze-fx {
    filter: drop-shadow(0 0 12px rgba(136, 221, 255, 0.6));
}
.combat-status-fx.freeze-fx .crystal {
    animation: fxCrystalGlimmer 2s ease-in-out infinite;
    transform-origin: center;
}
.combat-status-fx.freeze-fx .crystal:nth-child(1) { animation-delay: 0s;   }
.combat-status-fx.freeze-fx .crystal:nth-child(2) { animation-delay: 0.3s; }
.combat-status-fx.freeze-fx .crystal:nth-child(3) { animation-delay: 0.6s; }
.combat-status-fx.freeze-fx .crystal:nth-child(4) { animation-delay: 0.9s; }
.combat-status-fx.freeze-fx .crystal:nth-child(5) { animation-delay: 1.2s; }
@keyframes fxCrystalGlimmer {
    0%, 100% { opacity: 0.7; transform: scale(1)   rotate(0deg);    }
    50%      { opacity: 1;   transform: scale(1.15) rotate(8deg);   }
}
.combat-status-fx.freeze-fx .snowflake {
    animation: fxSnowFall 3s linear infinite;
    opacity: 0;
}
.combat-status-fx.freeze-fx .snowflake:nth-child(6) { animation-delay: 0s;   }
.combat-status-fx.freeze-fx .snowflake:nth-child(7) { animation-delay: 0.8s; }
.combat-status-fx.freeze-fx .snowflake:nth-child(8) { animation-delay: 1.6s; }
.combat-status-fx.freeze-fx .snowflake:nth-child(9) { animation-delay: 2.4s; }
@keyframes fxSnowFall {
    0%   { transform: translateY(-20px) rotate(0deg);    opacity: 0;   }
    10%  {                                               opacity: 0.9; }
    90%  {                                               opacity: 0.9; }
    100% { transform: translateY(100px) rotate(360deg);  opacity: 0;   }
}

/* Le monstre lui-même reçoit un teint bleu + léger tremblement */
.monster-sprite.is-frozen img,
.monster-sprite.is-frozen video {
    filter: hue-rotate(180deg) saturate(1.4) brightness(0.85) drop-shadow(0 0 10px rgba(136,221,255,0.7));
    animation: fxFreezeShake 0.35s ease-in-out infinite;
}
@keyframes fxFreezeShake {
    0%, 100% { transform: translateX(0);    }
    25%      { transform: translateX(-1.5px); }
    75%      { transform: translateX(1.5px);  }
}

/* Le monstre brûlé reçoit une teinte orange pulsante */
.monster-sprite.is-burned img,
.monster-sprite.is-burned video {
    filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.8)) brightness(1.05);
    animation: fxBurnPulse 0.8s ease-in-out infinite;
}
@keyframes fxBurnPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.8))  brightness(1.05); }
    50%      { filter: drop-shadow(0 0 15px rgba(255, 60, 0, 1))    brightness(1.15); }
}

/* ── POISON — bulles vertes qui montent en continu + teinte verdâtre ── */
.combat-status-fx.poison-fx {
    filter: drop-shadow(0 0 10px rgba(136, 255, 68, 0.55));
}
.combat-status-fx.poison-fx .bubble {
    animation: fxBubbleRise 2.2s ease-in-out infinite;
    opacity: 0;
}
.combat-status-fx.poison-fx .bubble:nth-child(1) { animation-delay: 0s;   }
.combat-status-fx.poison-fx .bubble:nth-child(2) { animation-delay: 0.3s; }
.combat-status-fx.poison-fx .bubble:nth-child(3) { animation-delay: 0.6s; }
.combat-status-fx.poison-fx .bubble:nth-child(4) { animation-delay: 0.9s; }
.combat-status-fx.poison-fx .bubble:nth-child(5) { animation-delay: 1.2s; }
.combat-status-fx.poison-fx .bubble:nth-child(6) { animation-delay: 1.5s; }
.combat-status-fx.poison-fx .bubble:nth-child(7) { animation-delay: 1.8s; }
@keyframes fxBubbleRise {
    0%   { transform: translateY(0)    scale(0.5); opacity: 0;   }
    15%  {                                         opacity: 1;   }
    85%  {                                         opacity: 0.7; }
    100% { transform: translateY(-80px) scale(1.2); opacity: 0;   }
}
.combat-status-fx.poison-fx .skull {
    animation: fxSkullPulse 1.5s ease-in-out infinite;
}
@keyframes fxSkullPulse {
    0%, 100% { opacity: 0.55; transform: scale(1);    }
    50%      { opacity: 1;    transform: scale(1.18); }
}

/* Le monstre empoisonné a une teinte verte */
.monster-sprite.is-poisoned img,
.monster-sprite.is-poisoned video {
    filter: hue-rotate(80deg) saturate(1.5) drop-shadow(0 0 8px rgba(136, 255, 68, 0.7));
}

/* ── SAIGNEMENT — gouttes rouges qui tombent + aura rouge ── */
.combat-status-fx.bleed-fx {
    filter: drop-shadow(0 0 10px rgba(255, 0, 40, 0.55));
}
.combat-status-fx.bleed-fx .drop {
    animation: fxBloodFall 1.5s ease-in infinite;
    opacity: 0;
}
.combat-status-fx.bleed-fx .drop:nth-child(1) { animation-delay: 0s;   }
.combat-status-fx.bleed-fx .drop:nth-child(2) { animation-delay: 0.25s;}
.combat-status-fx.bleed-fx .drop:nth-child(3) { animation-delay: 0.5s; }
.combat-status-fx.bleed-fx .drop:nth-child(4) { animation-delay: 0.75s;}
.combat-status-fx.bleed-fx .drop:nth-child(5) { animation-delay: 1s;   }
@keyframes fxBloodFall {
    0%   { transform: translateY(0)    scaleY(0.6); opacity: 0;   }
    15%  {                                          opacity: 1;   }
    100% { transform: translateY(80px) scaleY(1.4); opacity: 0;   }
}

/* ── BUFF JOUEUR : aura dorée sur l'avatar ── */
.player-buff-aura {
    position: absolute;
    inset: -8px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.35) 0%, transparent 70%);
    animation: fxBuffPulse 2s ease-in-out infinite;
    z-index: -1;
}
@keyframes fxBuffPulse {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%      { transform: scale(1.15); opacity: 1;   }
}

/* Version simplifiée sur mobile pour économiser CPU/batterie */
@media (max-width: 480px) {
    .combat-status-fx .ember:nth-child(n+9)     { display: none; }
    .combat-status-fx .bubble:nth-child(n+6)    { display: none; }
    .combat-status-fx .snowflake:nth-child(n+8) { display: none; }
}

/* ------------------------------------------------------------
   REFONTE VISUELLE V2 — PREMIUM OVERHAUL
   ------------------------------------------------------------ */

/* ===== BOUTONS PREMIUM glassmorphism ===== */
.nav-btn, .mode-btn, .buy-btn {
    background: rgba(15, 5, 20, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.nav-btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    border-color: rgba(255, 100, 100, 0.4) !important;
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 68, 68, 0.2),
        0 0 0 1px rgba(255, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.nav-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    transition-duration: 0.1s !important;
}

.nav-btn.btn-gold:hover { border-color: rgba(255, 215, 0, 0.6) !important; box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 40px rgba(255,215,0,0.2) !important; }
.nav-btn.btn-cyan:hover { border-color: rgba(78, 205, 196, 0.6) !important; box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 40px rgba(78,205,196,0.2) !important; }
.nav-btn.btn-purple:hover { border-color: rgba(138, 43, 226, 0.6) !important; box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 40px rgba(138,43,226,0.2) !important; }

/* ===== CARTES premium ===== */
.stat-card {
    background: rgba(15, 5, 20, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover {
    border-color: rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-2px);
}

/* ===== TITRE glow animé ===== */
h1 {
    background: linear-gradient(135deg, #ffd700, #ff4444, #ff6b6b, #ffd700, #4ecdc4, #ffd700) !important;
    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: titleShineV2 4s linear infinite !important;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.3));
}

@keyframes titleShineV2 {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ===== ÉCRAN transition fluide ===== */
.screen { animation: screenEnterV2 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
@keyframes screenEnterV2 {
    0% { opacity: 0; transform: translateY(30px) scale(0.97); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ===== ARÈNE COMBAT premium ===== */
.battle-arena {
    border: 2px solid rgba(255, 68, 68, 0.2) !important;
    box-shadow: 0 0 60px rgba(255, 0, 0, 0.15), 0 0 120px rgba(0, 0, 0, 0.5), inset 0 0 80px rgba(0, 0, 0, 0.4) !important;
}

.monster-sprite { filter: drop-shadow(0 0 20px rgba(255, 68, 68, 0.4)) !important; }
.monster-sprite img { filter: contrast(1.1) saturate(1.2); }

/* HP bar shimmer */
@keyframes hpBarShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ===== DAMAGE premium ===== */
.damage-indicator { 
    font-family: 'Cinzel', serif !important; 
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 20px currentColor, 0 0 40px currentColor !important; 
}
.damage-indicator.crit-damage { font-size: 3.5em !important; filter: drop-shadow(0 0 10px #ffd700); }

/* ===== SCROLLBAR dark ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff4444, #8b0000); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff6b6b, #c0392b); }

/* ===== INPUTS glow focus ===== */
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    outline: none; border-color: #4ecdc4 !important;
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.2), inset 0 0 10px rgba(78, 205, 196, 0.05);
}

/* ===== MESSAGES améliorés ===== */
.message { backdrop-filter: blur(10px); border-radius: 12px !important; }
.victory-message { border-left: 4px solid #ffd700 !important; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2) !important; }
.defeat-message { border-left: 4px solid #ff4444 !important; box-shadow: 0 4px 20px rgba(255, 68, 68, 0.2) !important; }

/* ===== PARTICLES blur ===== */
.particle { filter: blur(1px); }

/* ===== EXERCISE boutons glow ===== */
button[onclick*="doExercise"]:hover, button[onclick*="startExercise"]:hover { transform: scale(1.05); filter: brightness(1.2); }
button[onclick*="doExercise"]:active, button[onclick*="startExercise"]:active { transform: scale(0.95); }

/* ===== BESTIAIRE/TALENT/GEM glow ===== */
.bestiary-card.discovered:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 25px rgba(78,205,196,0.3) !important; }
.talent-node.talent-unlocked { box-shadow: 0 0 20px rgba(255,215,0,0.3), inset 0 0 15px rgba(255,215,0,0.05) !important; }
.talent-node.talent-maxed { box-shadow: 0 0 30px rgba(255,136,0,0.4), inset 0 0 20px rgba(255,136,0,0.08) !important; }
.gem-pack:hover { box-shadow: 0 0 40px rgba(170,68,255,0.5), 0 0 80px rgba(170,68,255,0.2) !important; }

/* Tooltip custom pour la carte */


/* Tooltip carte - pur CSS, pas de JS
   [v96 fix] Auparavant les tooltips s'affichaient TOUS en permanence (manquait
   opacity:0 + hover). Maintenant : caches par defaut, visibles au hover. */
.map-zone-wrap { position: relative; display: inline-block; }
.map-zone-wrap .map-tip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    width: 180px;
    background: rgba(10,12,20,0.92);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(129,236,255,0.15);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.map-zone-wrap:hover .map-tip,
.map-zone-wrap:focus-within .map-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}
.map-tip-title {
    font-family: 'Cinzel', 'Space Grotesk', serif;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}
.map-tip-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7em;
    color: #8888a0;
    line-height: 1.5;
    margin-bottom: 5px;
    font-style: italic;
}
.map-tip-cost {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,180,0,0.1);
    color: #ffb400;
    display: inline-block;
    margin-top: 2px;
}
.map-tip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(129,236,255,0.15);
}

/* Hover animé pour les boutons de la carte du monde */
.map-zone-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.map-zone-btn:hover {
    transform: scale(1.15) translateY(-3px) !important;
    filter: brightness(1.3) !important;
    box-shadow: 0 0 25px currentColor, 0 8px 20px rgba(0,0,0,0.4) !important;
}
.map-zone-btn:active {
    transform: scale(0.95) !important;
}


/* ===== BLOC STYLE lignes 3758-3815 (id=main) ===== */
      /* Classe commune pour toutes les icônes currency inline */
      .cur-icon {
        display: inline-block;
        vertical-align: -0.15em;
        width: 1.1em;
        height: 1.1em;
        flex-shrink: 0;
      }
      .cur-icon--sm { width: 0.9em; height: 0.9em; }
      .cur-icon--lg { width: 1.6em; height: 1.6em; }
      .cur-icon--xl { width: 2.4em; height: 2.4em; }

      /* ── OR : rotation douce + glow pulsant ── */
      .cur-icon use[href="#cur-gold"],
      .cur-gold-icon {
        animation: curGoldPulse 2.5s ease-in-out infinite;
        filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
      }
      @keyframes curGoldPulse {
        0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4)); }
        50%      { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)); }
      }

      /* ── GEMME : scintillements alternés ── */
      .gem-sparkle { opacity: 0; }
      .cur-icon .gem-sparkle-1 { animation: gemSparkle 2s ease-in-out infinite; animation-delay: 0s; }
      .cur-icon .gem-sparkle-2 { animation: gemSparkle 2s ease-in-out infinite; animation-delay: 0.6s; }
      .cur-icon .gem-sparkle-3 { animation: gemSparkle 2s ease-in-out infinite; animation-delay: 1.2s; }
      @keyframes gemSparkle {
        0%, 100%    { opacity: 0; transform: scale(0.5); }
        40%, 60%    { opacity: 1; transform: scale(1.3); }
      }
      .cur-gem-wrap use[href="#cur-gem"] {
        filter: drop-shadow(0 0 4px rgba(154, 91, 219, 0.6));
      }

      /* ── XP : étoile qui pulse en scale + glow ── */
      .cur-xp-wrap use[href="#cur-xp"] {
        animation: curXpPulse 1.8s ease-in-out infinite;
        filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
        transform-origin: center;
      }
      @keyframes curXpPulse {
        0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5)); }
        50%      { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)); }
      }

      /* ── ÉNERGIE : flash électrique aléatoire ── */
      .cur-energy-wrap use[href="#cur-energy"] {
        animation: curEnergyFlash 3s ease-in-out infinite;
        filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
      }
      @keyframes curEnergyFlash {
        0%, 85%, 100% { filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.5)); }
        90%           { filter: drop-shadow(0 0 10px rgba(0, 212, 255, 1)) brightness(1.4); }
      }

/* ===== BLOC STYLE lignes 3976-3979 (id=main) ===== */
        @keyframes introFadeOut { from { opacity:1; } to { opacity:0; } }

/* ===== BLOC STYLE lignes 4116-4299 (id=main) ===== */
            /* ────── [v14.78] PANNEAU STATS JOUEUR 2026 — GLASSMORPHISM ────── */
            .player-stats-panel {
                position: relative;
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 14px;
                margin-bottom: 12px;
                background: linear-gradient(135deg, rgba(129,236,255,0.04) 0%, rgba(201,124,255,0.06) 50%, rgba(255,107,157,0.04) 100%);
                backdrop-filter: blur(14px) saturate(1.2);
                -webkit-backdrop-filter: blur(14px) saturate(1.2);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 16px;
                box-shadow:
                    0 8px 32px rgba(0,0,0,0.3),
                    inset 0 1px 0 rgba(255,255,255,0.08);
                overflow: hidden;
            }
            /* Gradient holographique animé en fond */
            .player-stats-panel::before {
                content: '';
                position: absolute;
                top: -50%; left: -50%;
                width: 200%; height: 200%;
                background: conic-gradient(from 0deg, transparent 0deg, rgba(129,236,255,0.05) 60deg, transparent 120deg, rgba(201,124,255,0.05) 180deg, transparent 240deg, rgba(255,215,0,0.04) 300deg, transparent 360deg);
                animation: pspHoloRotate 18s linear infinite;
                pointer-events: none;
                z-index: 0;
            }
            @keyframes pspHoloRotate { to { transform: rotate(360deg); } }
            
            .player-stats-panel > * { position: relative; z-index: 1; }
            
            /* Orb avec ring XP */
            .psp-orb-ring {
                position: relative;
                width: 110px;
                height: 110px;
                flex-shrink: 0;
            }
            .psp-orb-svg {
                display: block;
                animation: pspOrbFloat 3.5s ease-in-out infinite;
            }
            @keyframes pspOrbFloat {
                0%, 100% { transform: translateY(0); }
                50%      { transform: translateY(-3px); }
            }
            .psp-orb-center {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                pointer-events: none;
            }
            .psp-rank-badge {
                font-family: 'Cinzel', 'Cormorant Garamond', serif;
                font-size: 1.15em;
                font-weight: 700;
                color: #ffd700;
                line-height: 1;
                letter-spacing: 0.1em;
                filter: drop-shadow(0 0 8px rgba(255,215,0,0.6));
                margin-bottom: 2px;
            }
            .psp-level-label {
                font-family: 'Inter', sans-serif;
                font-size: 8px;
                letter-spacing: 0.25em;
                text-transform: uppercase;
                color: #988a9e;
                margin-top: 2px;
            }
            .psp-level-num {
                font-family: 'Space Grotesk', sans-serif;
                font-size: 1.8em;
                font-weight: 900;
                color: #f0f0fd;
                line-height: 1;
                text-shadow: 0 0 14px rgba(129,236,255,0.45);
            }
            
            /* Colonne stats */
            .psp-stats-col {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            
            .psp-xp-info { display: flex; flex-direction: column; gap: 4px; }
            .psp-xp-line {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
            }
            .psp-xp-label {
                font-family: 'Inter', sans-serif;
                font-size: 9px;
                letter-spacing: 0.2em;
                text-transform: uppercase;
                color: #988a9e;
                font-weight: 700;
            }
            .psp-xp-value {
                font-family: 'Space Grotesk', sans-serif;
                font-size: 11px;
                font-weight: 700;
                color: #ffd700;
            }
            .psp-xp-bar-bg {
                position: relative;
                height: 6px;
                background: rgba(0,0,0,0.5);
                border-radius: 3px;
                overflow: hidden;
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
            }
            .psp-xp-bar-fill {
                height: 100%;
                background: linear-gradient(90deg, #ffd700, #ff8800);
                border-radius: 3px;
                transition: width 0.8s cubic-bezier(0.23,1,0.32,1);
                box-shadow: 0 0 10px rgba(255,215,0,0.6);
                position: relative;
            }
            .psp-xp-bar-fill::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
                animation: pspXpShine 2.5s ease-in-out infinite;
            }
            @keyframes pspXpShine {
                0%, 100% { transform: translateX(-100%); }
                50%      { transform: translateX(100%); }
            }
            
            /* Chips ressources */
            .psp-resources {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 6px;
            }
            .psp-res-chip {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                padding: 6px 4px;
                background: rgba(0,0,0,0.35);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 8px;
                font-family: 'Space Grotesk', sans-serif;
                font-size: 12px;
                font-weight: 800;
                transition: all 0.2s;
                min-width: 0;
            }
            .psp-res-chip:hover {
                transform: translateY(-1px);
                background: rgba(0,0,0,0.5);
            }
            .psp-res-num {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .psp-gold    { color: #ffd700; border-color: rgba(255,215,0,0.25); }
            .psp-gem     { color: #c97cff; border-color: rgba(201,124,255,0.25); }
            .psp-energy  { color: #ffb400; border-color: rgba(255,180,0,0.25); }
            
            @media (max-width: 420px) {
                .player-stats-panel { gap: 12px; padding: 12px; }
                .psp-orb-ring { width: 90px; height: 90px; }
                .psp-orb-svg { width: 90px; height: 90px; }
                .psp-level-num { font-size: 1.5em; }
                .psp-res-chip { font-size: 11px; }
            }

/* ===== BLOC STYLE lignes 4372-4627 (id=main) ===== */
          /* ====== BOUTON DÉFI LUXE 3D ====== */
          .defi-luxe-btn {
            position: relative;
            width: 100%;
            max-width: 440px;
            height: 96px;
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            display: inline-block;
            outline: none;
            transform-style: preserve-3d;
            perspective: 600px;
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
          }
          .defi-luxe-btn:hover { transform: translateY(-3px) scale(1.02); }
          .defi-luxe-btn:active { transform: translateY(1px) scale(0.99); transition-duration: 0.08s; }
          
          /* Ombre 3D profonde derrière le bouton */
          .defi-shadow {
            position: absolute;
            inset: 10px 0 -12px 0;
            background: radial-gradient(ellipse at center, rgba(255, 70, 0, 0.55) 0%, rgba(120, 20, 0, 0.3) 45%, transparent 70%);
            filter: blur(16px);
            z-index: 0;
          }
          
          /* Fond principal : gradient riche type vitrail + relief */
          .defi-main {
            position: absolute;
            inset: 0;
            border-radius: 20px;
            overflow: hidden;
            background:
              linear-gradient(145deg, #2a0500 0%, #5a0f00 20%, #b02000 50%, #ff4500 80%, #ff8800 100%);
            box-shadow:
              inset 0 2px 4px rgba(255, 230, 180, 0.45),
              inset 0 -3px 6px rgba(0, 0, 0, 0.55),
              inset 0 0 40px rgba(255, 120, 0, 0.2),
              0 8px 24px rgba(180, 40, 0, 0.6),
              0 2px 6px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 220, 180, 0.35);
          }
          
          /* Texture grain subtile pour la matière */
          .defi-grain {
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.6 0 0 0 0 0.2 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
            mix-blend-mode: overlay;
            opacity: 0.35;
            pointer-events: none;
          }
          
          /* Glow qui respire (pulse) */
          .defi-glow {
            position: absolute;
            inset: -2px;
            border-radius: 20px;
            background: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 100, 0.5) 0%, transparent 65%);
            filter: blur(8px);
            animation: defiGlow 2.4s ease-in-out infinite;
            pointer-events: none;
          }
          @keyframes defiGlow {
            0%, 100% { opacity: 0.6; transform: scale(0.98); }
            50% { opacity: 1; transform: scale(1.04); }
          }
          
          /* Reflet "sabre de lumière" qui traverse le bouton */
          .defi-shine {
            position: absolute;
            top: 0; bottom: 0;
            left: -40%;
            width: 50%;
            background: linear-gradient(100deg,
              transparent 30%,
              rgba(255, 255, 255, 0.35) 50%,
              rgba(255, 220, 140, 0.6) 55%,
              rgba(255, 255, 255, 0.35) 60%,
              transparent 75%);
            transform: skewX(-15deg);
            animation: defiShine 3.5s infinite ease-in-out;
            pointer-events: none;
            mix-blend-mode: screen;
          }
          @keyframes defiShine {
            0% { left: -40%; }
            55% { left: 100%; }
            100% { left: 100%; }
          }
          
          /* Contenu central : épées + texte */
          .defi-content {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 22px;
            z-index: 2;
            pointer-events: none;
          }
          .defi-sword {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(255, 220, 120, 0.5));
            transition: transform 0.3s ease;
          }
          .defi-sword.left  { animation: defiSwordL 2.4s ease-in-out infinite; }
          .defi-sword.right { animation: defiSwordR 2.4s ease-in-out infinite; }
          @keyframes defiSwordL {
            0%, 100% { transform: rotate(-8deg) translateY(0); }
            50%      { transform: rotate(-12deg) translateY(-2px); }
          }
          @keyframes defiSwordR {
            0%, 100% { transform: rotate(8deg) scaleX(-1) translateY(0); }
            50%      { transform: rotate(12deg) scaleX(-1) translateY(-2px); }
          }
          .defi-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
          }
          .defi-label {
            font-family: "Cormorant Garamond", "Cinzel", serif;
            font-style: italic;
            font-weight: 500;
            font-size: 42px;
            letter-spacing: 0.01em;
            color: #fff8e0;
            text-shadow:
              0 1px 2px rgba(0, 0, 0, 0.8),
              0 2px 8px rgba(255, 120, 0, 0.6),
              0 0 20px rgba(255, 230, 160, 0.5);
            background: linear-gradient(180deg, #fffae6 0%, #ffd700 45%, #c97c00 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
          }
          .defi-caption {
            font-family: "Inter", sans-serif;
            font-weight: 400;
            font-size: 10px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(255, 240, 210, 0.75);
            margin-top: 4px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
          }
          
          /* Particules dorées qui flottent */
          .defi-spark {
            position: absolute;
            width: 4px; height: 4px;
            background: radial-gradient(circle, #fff8dc 0%, #ffd700 40%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
          }
          .defi-spark.s1 { top: 20%;  left: 15%; animation: defiSpark 3s ease-in-out infinite; animation-delay: 0s; }
          .defi-spark.s2 { top: 65%;  left: 82%; animation: defiSpark 3s ease-in-out infinite; animation-delay: 1s; }
          .defi-spark.s3 { top: 35%;  left: 55%; animation: defiSpark 3s ease-in-out infinite; animation-delay: 2s; }
          @keyframes defiSpark {
            0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
            50%      { opacity: 1; transform: translateY(-10px) scale(1.5); }
          }
          
          /* Mobile : ajuster la taille */
          @media (max-width: 480px) {
            .defi-luxe-btn { height: 82px; }
            .defi-label    { font-size: 34px; }
            .defi-caption  { font-size: 9px; }
            .defi-sword    { width: 24px; height: 24px; }
          }
          
          /* ════════════════════════════════════════════════════════
             [v14.65] STYLE HEADER DE SECTION LUXE
             Icône SVG + titre Cormorant italic + sous-titre + badge
             ════════════════════════════════════════════════════════ */
          .section-luxe-header {
            padding: 24px 16px 8px;
          }
          .section-luxe-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            margin-bottom: 12px;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 215, 100, 0.14) 0%, transparent 65%);
            animation: sectionIconFloat 3.5s ease-in-out infinite;
          }
          @keyframes sectionIconFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-4px); }
          }
          .section-luxe-icon.bestiary-icon { background: radial-gradient(circle at 50% 50%, rgba(201, 163, 84, 0.2) 0%, transparent 65%); }
          .section-luxe-icon.talent-icon   { background: radial-gradient(circle at 50% 50%, rgba(126, 204, 90, 0.22) 0%, transparent 65%); }
          .section-luxe-icon.heal-icon     { background: radial-gradient(circle at 50% 50%, rgba(255, 77, 109, 0.2) 0%, transparent 65%); }
          
          .section-luxe-title {
            font-family: "Cormorant Garamond", "Cinzel", serif;
            font-weight: 400;
            font-size: clamp(30px, 5.5vw, 42px);
            line-height: 1.05;
            letter-spacing: -0.015em;
            color: #f2e8d8;
            margin: 0 0 8px;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
          }
          .section-luxe-title em {
            font-style: italic;
            font-weight: 500;
            background: linear-gradient(180deg, #fff5d6 0%, #e8c877 50%, #b88830 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 1px 2px rgba(120, 80, 0, 0.4));
          }
          
          .section-luxe-caption {
            font-family: "Inter", system-ui, sans-serif;
            font-weight: 300;
            font-style: italic;
            font-size: 13px;
            color: #988a9e;
            margin: 0 0 14px;
            letter-spacing: 0.01em;
          }
          
          .section-luxe-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 20px;
            border-radius: 999px;
            background: rgba(242, 232, 216, 0.05);
            border: 1px solid rgba(242, 232, 216, 0.15);
            font-family: "Inter", sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: #c9a354;
            margin-top: 4px;
          }
          .section-luxe-badge.gold {
            background: linear-gradient(135deg, rgba(232, 200, 119, 0.18), rgba(201, 163, 84, 0.05));
            border-color: rgba(232, 200, 119, 0.45);
            color: #e8c877;
            box-shadow: 0 0 20px rgba(201, 163, 84, 0.15);
          }

/* ===== BLOC STYLE lignes 4639-4642 (id=main) ===== */
                @keyframes mapParticle{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-120px) translateX(30px);opacity:0}}
                .map-particle{position:absolute;width:3px;height:3px;background:#81ecff;border-radius:50%;animation:mapParticle linear infinite;box-shadow:0 0 6px #81ecff;}

/* ===== BLOC STYLE lignes 5338-5343 (id=main) ===== */
                @keyframes bdmCardPulse {
                    0%, 100% { box-shadow: 0 0 40px rgba(255,0,40,0.35); }
                    50%      { box-shadow: 0 0 60px rgba(255,0,40,0.6); }
                }

/* ===== BLOC STYLE lignes 6262-6296 (id=main) ===== */
        .stat-card-2026 {
          position:relative;
          padding:14px 14px;
          background:linear-gradient(145deg,rgba(20,23,38,0.7),rgba(14,16,26,0.5));
          backdrop-filter:blur(10px);
          -webkit-backdrop-filter:blur(10px);
          border:1px solid rgba(255,255,255,0.05);
          border-radius:12px;
          overflow:hidden;
          transition:all 0.3s;
        }
        .stat-card-2026::before {
          content:'';
          position:absolute;
          top:0; left:0;
          width:3px; height:100%;
          background:currentColor;
          opacity:0.4;
          border-radius:2px 0 0 2px;
        }
        .stat-card-2026::after {
          content:'';
          position:absolute;
          top:-50%; right:-50%;
          width:120%; height:120%;
          background:radial-gradient(circle at center,currentColor 0%,transparent 60%);
          opacity:0.04;
          pointer-events:none;
        }
        .stat-card-2026:hover {
          transform:translateY(-1px);
          border-color:rgba(255,255,255,0.1);
        }

/* ===== BLOC STYLE lignes 7000-7211 (id=main) ===== */
/* [2026-08-26] BLOC HTML RETIRE — 202 lignes de balises <div> etaient tombees dans ce
   fichier CSS lors d une extraction de <style>. Le parseur abandonnait a « Selecteur
   attendu » et jetait les regles qui suivaient. Les originaux sont dans
   _img_backup_2026-08-26/main.css.avant-nettoyage. */
@keyframes bossWarningPulse {
    0% { transform: scale(1); box-shadow: 0 0 60px rgba(255,0,0,0.5); }
    100% { transform: scale(1.02); box-shadow: 0 0 100px rgba(255,0,0,0.8); }
}
@keyframes bossIconShake {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* ===== BLOC STYLE lignes 8058-8062 (id=main) ===== */
              #mx-remember-cb:checked { background:linear-gradient(135deg,#ffd84a,#ff8c1a) !important; border-color:#ffd84a !important; box-shadow:0 0 12px rgba(255,215,74,.6); }
              #mx-remember-cb:checked::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#1a0c00; font-weight:900; font-size:14px; line-height:1; }
              #mx-remember-cb:hover { border-color:#ffd84a !important; box-shadow:0 0 8px rgba(255,215,74,.4); }


/* ===== login-luxury-styles ===== */
      
      #login-screen {
        --lx-bg: #0a0611;
        --lx-bg-2: #120a1e;
        --lx-ink: #f2e8d8;
        --lx-ink-dim: #988a9e;
        --lx-violet: #6b2fb3;
        --lx-violet-2: #9a5bdb;
        --lx-gold: #c9a354;
        --lx-gold-2: #e8c877;
        --lx-line: rgba(242, 232, 216, 0.1);
        --lx-display: "Cormorant Garamond", "Cinzel", serif;
        --lx-sans: "Inter", system-ui, sans-serif;
      }
      
      /* Texture grain par-dessus tout */
      #login-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 3;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.75 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        opacity: 0.5;
        mix-blend-mode: overlay;
      }
      
      /* Radial gradients d'ambiance */
      #login-screen::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background:
          radial-gradient(ellipse at 25% 20%, rgba(107, 47, 179, 0.28), transparent 55%),
          radial-gradient(ellipse at 80% 70%, rgba(201, 163, 84, 0.18), transparent 50%),
          radial-gradient(ellipse at 50% 100%, rgba(107, 47, 179, 0.15), transparent 60%);
      }
      
      #login-screen .lx-wrap {
        position: relative;
        z-index: 5;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
      }
      
      #login-screen .lx-card {
        width: 100%;
        max-width: 440px;
        position: relative;
        /* [v14.80] Glassmorphism pour voir le monstre en fond */
        background: linear-gradient(160deg, rgba(15,10,28,0.65), rgba(8,5,15,0.82));
        backdrop-filter: blur(18px) saturate(1.3);
        -webkit-backdrop-filter: blur(18px) saturate(1.3);
        border: 1px solid rgba(255,215,180,0.1);
        border-radius: 18px;
        padding: 28px 26px;
        box-shadow:
            0 20px 60px rgba(0,0,0,0.6),
            inset 0 1px 0 rgba(255,255,255,0.06);
      }
      
      /* Bande supérieure avec langues */
      #login-screen .lx-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 56px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--lx-line);
      }
      #login-screen .lx-brand {
        font-family: var(--lx-display);
        font-style: italic;
        font-weight: 500;
        font-size: 18px;
        letter-spacing: 0.04em;
        color: var(--lx-ink);
      }
      #login-screen .lx-brand span { color: var(--lx-gold-2); }
      
      #login-screen .lx-langs {
        display: flex;
        gap: 6px;
      }
      #login-screen .lx-lang {
        width: 28px; height: 28px;
        border: 1px solid var(--lx-line);
        background: rgba(242, 232, 216, 0.02);
        border-radius: 50%;
        font-size: 13px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        color: var(--lx-ink-dim);
      }
      #login-screen .lx-lang:hover { border-color: var(--lx-gold); transform: translateY(-1px); }
      #login-screen .lx-lang.active {
        border-color: var(--lx-gold);
        background: rgba(201, 163, 84, 0.12);
        color: var(--lx-gold-2);
      }
      
      /* Badge "depuis ..." style journal */
      #login-screen .lx-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 7px 16px 7px 8px;
        border: 1px solid var(--lx-line);
        border-radius: 999px;
        font-family: var(--lx-sans);
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--lx-ink-dim);
        margin-bottom: 32px;
        background: rgba(242, 232, 216, 0.02);
      }
      #login-screen .lx-badge .lx-pulse {
        width: 8px; height: 8px;
        background: var(--lx-gold-2);
        border-radius: 50%;
        position: relative;
      }
      #login-screen .lx-badge .lx-pulse::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: var(--lx-gold-2);
        opacity: 0.4;
        animation: lxPulseRing 2s ease-out infinite;
      }
      @keyframes lxPulseRing {
        0% { transform: scale(0.8); opacity: 0.4; }
        100% { transform: scale(2.4); opacity: 0; }
      }
      #login-screen .lx-badge .lx-div { width: 1px; height: 12px; background: var(--lx-line); }
      
      /* Titre principal — Cormorant Garamond italic */
      #login-screen .lx-title {
        font-family: var(--lx-display);
        font-weight: 400;
        font-size: clamp(52px, 9vw, 88px);
        line-height: 0.92;
        letter-spacing: -0.025em;
        margin-bottom: 16px;
        color: var(--lx-ink);
      }
      #login-screen .lx-title em {
        font-style: italic;
        font-weight: 500;
        color: var(--lx-gold-2);
      }
      #login-screen .lx-subtitle {
        font-family: var(--lx-sans);
        font-size: 13px;
        font-weight: 300;
        color: var(--lx-ink-dim);
        line-height: 1.6;
        max-width: 340px;
        margin-bottom: 48px;
      }
      
      /* Séparateur ornemental */
      #login-screen .lx-ornament {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 36px 0 24px;
      }
      #login-screen .lx-ornament .lx-line { flex: 1; height: 1px; background: var(--lx-line); }
      #login-screen .lx-ornament .lx-diamond {
        width: 6px; height: 6px;
        background: var(--lx-gold);
        transform: rotate(45deg);
      }
      #login-screen .lx-ornament-label {
        font-family: var(--lx-sans);
        font-size: 10px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--lx-ink-dim);
      }
      
      /* Onglets — underline minimal */
      #login-screen .lx-tabs {
        display: flex;
        gap: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid var(--lx-line);
      }
      #login-screen .lx-tab {
        padding: 14px 0;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--lx-ink-dim);
        cursor: pointer;
        font-family: var(--lx-sans);
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        transition: all 0.3s ease;
        margin-bottom: -1px;
      }
      #login-screen .lx-tab.active {
        color: var(--lx-gold-2);
        border-bottom-color: var(--lx-gold);
      }
      #login-screen .lx-tab:hover:not(.active) { color: var(--lx-ink); }
      
      /* Inputs minimal, underline style */
      #login-screen .lx-field {
        margin-bottom: 24px;
      }
      #login-screen .lx-label {
        display: block;
        font-family: var(--lx-sans);
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--lx-ink-dim);
        margin-bottom: 8px;
      }
      #login-screen .lx-input {
        width: 100%;
        padding: 12px 0;
        background: none;
        border: none;
        border-bottom: 1px solid var(--lx-line);
        color: var(--lx-ink);
        font-family: var(--lx-sans);
        font-size: 15px;
        outline: none;
        transition: border-color 0.3s ease;
      }
      #login-screen .lx-input::placeholder {
        color: var(--lx-ink-dim);
        font-style: italic;
        font-family: var(--lx-display);
        font-size: 16px;
      }
      #login-screen .lx-input:focus { border-bottom-color: var(--lx-gold); }
      
      /* Boutons principaux */
      #login-screen .lx-btn {
        width: 100%;
        padding: 16px 24px;
        border: none;
        cursor: pointer;
        font-family: var(--lx-sans);
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: relative;
        overflow: hidden;
      }
      #login-screen .lx-btn-primary {
        background: linear-gradient(135deg, var(--lx-gold), var(--lx-violet-2));
        color: #1a0b2a;
        border-radius: 2px;
        box-shadow: 0 4px 20px rgba(201, 163, 84, 0.25);
      }
      #login-screen .lx-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(201, 163, 84, 0.4);
      }
      #login-screen .lx-btn-primary::after {
        content: "→";
        font-size: 14px;
        transition: transform 0.3s ease;
      }
      #login-screen .lx-btn-primary:hover::after { transform: translateX(4px); }
      
      #login-screen .lx-btn-secondary {
        background: transparent;
        color: var(--lx-ink-dim);
        border: 1px solid var(--lx-line);
        border-radius: 2px;
      }
      #login-screen .lx-btn-secondary:hover {
        color: var(--lx-ink);
        border-color: var(--lx-gold);
      }
      
      #login-screen .lx-link {
        background: none;
        border: none;
        color: var(--lx-ink-dim);
        font-family: var(--lx-sans);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        padding: 12px 0;
        margin-top: 16px;
        transition: color 0.3s ease;
      }
      #login-screen .lx-link:hover { color: var(--lx-gold-2); }
      
      /* Erreur */
      #login-screen .lx-error {
        background: rgba(220, 50, 50, 0.08);
        border-left: 3px solid #dc3232;
        padding: 12px 16px;
        color: #ff8080;
        font-family: var(--lx-sans);
        font-size: 12px;
        margin-bottom: 20px;
        display: none;
      }
      
      /* Footer */
      #login-screen .lx-footer {
        margin-top: 56px;
        padding-top: 24px;
        border-top: 1px solid var(--lx-line);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
      }
      #login-screen .lx-footer-item {
        font-family: var(--lx-sans);
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--lx-ink-dim);
      }
      #login-screen .lx-footer-item strong {
        display: block;
        font-family: var(--lx-display);
        font-style: italic;
        font-weight: 500;
        font-size: 14px;
        color: var(--lx-ink);
        letter-spacing: -0.01em;
        text-transform: none;
        margin-bottom: 2px;
      }
      
      /* Responsive */
      @media (max-width: 480px) {
        #login-screen .lx-top { flex-direction: column; gap: 16px; align-items: flex-start; }
        #login-screen .lx-tabs { gap: 20px; }
        #login-screen .lx-footer { flex-direction: column; align-items: flex-start; }
      }