/* ============================================
   BADGE RING STYLES
   26 styles pour badge profil (80px / 60px)
   Adaptés des galeries badge-styles-gallery 1 & 2
   ============================================ */

/* ---- Shared Keyframes ---- */
@keyframes badge-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes badge-shimmer-move {
    0%, 100% { transform: translateX(-50%) translateY(-50%); }
    50% { transform: translateX(50%) translateY(50%); }
}

@keyframes badge-star-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* ============================================
   1. BASIC — Tier 0
   ============================================ */
.style-basic .badge-outer-ring {
    inset: 3px;
    border: 2px solid #333;
}
.style-basic .level-badge {
    border: 2px solid #333;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.style-basic .level-number { color: #888; }

/* ============================================
   2. WOOD — Tier 1
   ============================================ */
.style-wood .badge-outer-ring {
    inset: 2px;
    background: repeating-conic-gradient(from 0deg, #5D4E37 0deg 3deg, #4A3C2A 3deg 6deg);
    opacity: 0.6;
}
.style-wood .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #0a0a0a;
}
.style-wood .level-badge {
    border: 2px solid #5D4E37;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 10px rgba(93,78,55,0.2);
}
.style-wood .level-number {
    background: linear-gradient(180deg, #A08060, #6B5344);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ============================================
   3. BRONZE — Tier 2
   ============================================ */
.style-bronze .badge-outer-ring {
    inset: 2px;
    border: 2px solid #CD7F32;
    box-shadow: inset 0 0 6px rgba(205,127,50,0.3), 0 0 10px rgba(205,127,50,0.2);
}
.style-bronze .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(205,127,50,0.3);
    border-radius: 50%;
}
.style-bronze .level-badge {
    border: 2px solid #CD7F32;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 12px rgba(205,127,50,0.15);
}
.style-bronze .level-number {
    background: linear-gradient(180deg, #E8C49A, #CD7F32 50%, #8B5A2B);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ============================================
   4. SILVER — Tier 3
   ============================================ */
.style-silver .badge-outer-ring {
    inset: 2px;
    border: 2px solid #C0C0C0;
}
.style-silver .badge-glow-ring {
    inset: 0;
    background: conic-gradient(from 0deg, transparent, rgba(192,192,192,0.3), rgba(230,230,230,0.2), transparent, transparent, transparent);
    animation: badge-rotate 5s linear infinite;
}
.style-silver .level-badge {
    border: 2px solid rgba(192,192,192,0.5);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 15px rgba(192,192,192,0.15);
}
.style-silver .level-number {
    background: linear-gradient(180deg, #fff, #C0C0C0 50%, #808080);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ============================================
   5. GOLD — Tier 4 (DEFAULT)
   ============================================ */
.style-gold .badge-outer-ring {
    inset: 2px;
    border: 2px solid rgba(212,175,55,0.3);
}
.style-gold .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 50%;
}
.style-gold .badge-glow-ring {
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.4), rgba(244,228,166,0.3), transparent, transparent, transparent);
    animation: badge-rotate 4s linear infinite;
    filter: blur(1px);
}
.style-gold .level-badge {
    border: 2px solid rgba(212,175,55,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(212,175,55,0.2);
}
.style-gold .level-badge::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.15);
}
.style-gold .level-number {
    background: linear-gradient(180deg, #f4e4a6, #d4af37 50%, #a67c00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 1px 3px rgba(212,175,55,0.3));
}

/* ============================================
   6. PLATINUM — Tier 5
   ============================================ */
.style-platinum .badge-outer-ring {
    inset: 1px;
    border: 2px solid rgba(229,228,226,0.4);
}
.style-platinum .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(229,228,226,0.2);
    border-radius: 50%;
}
.style-platinum .badge-glow-ring {
    inset: -3px;
    background: conic-gradient(from 0deg, transparent 0%, rgba(229,228,226,0.5) 15%, rgba(255,255,255,0.3) 20%, transparent 35%, transparent 50%, rgba(229,228,226,0.4) 65%, transparent 80%, transparent 100%);
    animation: badge-rotate 3s linear infinite;
}
.style-platinum .badge-shimmer {
    display: block;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    animation: badge-shimmer-move 3s ease-in-out infinite;
}
.style-platinum .level-badge {
    border: 2px solid rgba(229,228,226,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 25px rgba(229,228,226,0.2);
}
.style-platinum .level-number {
    background: linear-gradient(180deg, #fff, #E5E4E2 40%, #B8B8B8 70%, #E5E4E2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 5px rgba(229,228,226,0.3));
}

/* ============================================
   7. RUBY — Tier 6
   ============================================ */
.style-ruby .badge-outer-ring {
    inset: 1px;
    border: 2px solid rgba(224,17,95,0.5);
}
.style-ruby .badge-glow-ring {
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(224,17,95,0.5), rgba(255,100,150,0.3), transparent, transparent, rgba(224,17,95,0.4), transparent);
    animation: badge-rotate 3s linear infinite;
    filter: blur(2px);
}
.style-ruby .badge-pulse {
    display: block;
    inset: -2px;
    border: 2px solid rgba(224,17,95,0.3);
    animation: ruby-pulse 2s ease-in-out infinite;
}
@keyframes ruby-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
.style-ruby .level-badge {
    border: 2px solid rgba(224,17,95,0.6);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(224,17,95,0.25);
}
.style-ruby .level-number {
    background: linear-gradient(180deg, #FF6B9D, #E0115F 50%, #8B0A3D);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(224,17,95,0.4));
}

/* ============================================
   8. SAPPHIRE — Tier 6
   ============================================ */
.style-sapphire .badge-outer-ring {
    inset: 1px;
    border: 2px solid rgba(15,82,186,0.5);
}
.style-sapphire .badge-glow-ring {
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(15,82,186,0.5), rgba(100,150,255,0.4), transparent, transparent, rgba(15,82,186,0.4), transparent);
    animation: badge-rotate 3s linear infinite;
    filter: blur(2px);
}
.style-sapphire .level-badge {
    border: 2px solid rgba(15,82,186,0.6);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(15,82,186,0.25);
}
.style-sapphire .level-number {
    background: linear-gradient(180deg, #6BA3FF, #0F52BA 50%, #082567);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(15,82,186,0.4));
}

/* ============================================
   9. EMERALD — Tier 6
   ============================================ */
.style-emerald .badge-outer-ring {
    inset: 1px;
    border: 2px solid rgba(80,200,120,0.5);
}
.style-emerald .badge-glow-ring {
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(80,200,120,0.5), rgba(150,255,180,0.3), transparent, transparent, rgba(80,200,120,0.4), transparent);
    animation: badge-rotate 3.5s linear infinite;
    filter: blur(2px);
}
.style-emerald .level-badge {
    border: 2px solid rgba(80,200,120,0.6);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(80,200,120,0.2);
}
.style-emerald .level-number {
    background: linear-gradient(180deg, #90EE90, #50C878 50%, #228B22);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(80,200,120,0.4));
}

/* ============================================
   10. OBSIDIAN — Tier 7
   ============================================ */
.style-obsidian .badge-outer-ring {
    inset: 1px;
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 0 8px rgba(100,100,100,0.2), 0 0 12px rgba(0,0,0,0.8);
}
.style-obsidian .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(100,100,100,0.2);
    border-radius: 50%;
}
.style-obsidian .badge-glow-ring {
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, rgba(80,80,80,0.4), rgba(120,120,120,0.2), transparent, transparent, transparent);
    animation: badge-rotate 6s linear infinite;
}
.style-obsidian .level-badge {
    border: 2px solid #2a2a2a;
    background: linear-gradient(145deg, #151515, #050505);
    box-shadow: inset 0 0 25px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
}
.style-obsidian .level-number {
    background: linear-gradient(180deg, #6a6a6a, #3a3a3a 50%, #1a1a1a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 3px rgba(100,100,100,0.3));
}

/* ============================================
   11. AURORA — Tier 8
   ============================================ */
.style-aurora .badge-outer-ring {
    inset: 0;
    background: conic-gradient(from 0deg, #00ff87, #60efff, #00ff87, #ff00ff, #60efff, #00ff87);
    animation: badge-rotate 4s linear infinite;
    opacity: 0.5;
    filter: blur(4px);
}
.style-aurora .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-aurora .badge-glow-ring {
    inset: 2px;
    border: 2px solid rgba(100,239,255,0.3);
}
.style-aurora .level-badge {
    border: 2px solid rgba(100,239,255,0.4);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 25px rgba(100,239,255,0.2), 0 0 40px rgba(0,255,135,0.1);
}
.style-aurora .level-number {
    background: linear-gradient(180deg, #60efff, #00ff87 50%, #ff00ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: aurora-shift 3s ease-in-out infinite;
}
@keyframes aurora-shift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

/* ============================================
   12. INFERNO — Tier 9 + Particles
   ============================================ */
.style-inferno .badge-outer-ring {
    inset: 0;
    background: conic-gradient(from 0deg, #FF4500, #FF6B00, #FFD700, #FF6B00, #FF4500, #FF0000, #FF4500);
    animation: badge-rotate 2s linear infinite;
    opacity: 0.6;
    filter: blur(3px);
}
.style-inferno .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-inferno .badge-glow-ring {
    inset: 2px;
    border: 2px solid rgba(255,69,0,0.6);
    box-shadow: 0 0 12px rgba(255,69,0,0.4);
    animation: inferno-pulse 1s ease-in-out infinite;
}
@keyframes inferno-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255,69,0,0.4); }
    50% { box-shadow: 0 0 20px rgba(255,69,0,0.7), 0 0 30px rgba(255,215,0,0.3); }
}
.style-inferno .level-badge {
    border: 2px solid rgba(255,69,0,0.7);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 25px rgba(255,69,0,0.3);
}
.style-inferno .level-number {
    background: linear-gradient(180deg, #FFD700, #FF6B00 40%, #FF4500 70%, #CC0000);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255,69,0,0.6));
    animation: inferno-flicker 0.5s ease-in-out infinite;
}
@keyframes inferno-flicker {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255,69,0,0.6)); }
    50% { filter: drop-shadow(0 0 12px rgba(255,100,0,0.8)); }
}
/* Fire particles */
.style-inferno .particles {
    inset: 0;
    overflow: hidden;
}
.style-inferno .particle {
    width: 3px; height: 3px;
    background: #FFD700;
    border-radius: 50%;
    bottom: 15%;
    animation: fire-particle 1.5s ease-out infinite;
    box-shadow: 0 0 4px #FF6B00, 0 0 6px #FF4500;
}
@keyframes fire-particle {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-40px) scale(0); opacity: 0; }
}
.style-inferno .particle:nth-child(1) { left: 20%; animation-delay: 0s; }
.style-inferno .particle:nth-child(2) { left: 35%; animation-delay: 0.3s; }
.style-inferno .particle:nth-child(3) { left: 50%; animation-delay: 0.1s; }
.style-inferno .particle:nth-child(4) { left: 65%; animation-delay: 0.5s; }
.style-inferno .particle:nth-child(5) { left: 80%; animation-delay: 0.2s; }
.style-inferno .particle:nth-child(6) { left: 25%; animation-delay: 0.7s; }

/* ============================================
   13. COSMIC — Tier 9 + Particles
   ============================================ */
.style-cosmic .badge-outer-ring {
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(157,78,221,0.4) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(72,52,212,0.4) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(255,100,255,0.3) 0%, transparent 40%);
    animation: cosmic-pulse 4s ease-in-out infinite;
}
@keyframes cosmic-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
}
.style-cosmic .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-cosmic .badge-glow-ring {
    inset: 1px;
    border: 2px solid rgba(157,78,221,0.5);
}
.style-cosmic .level-badge {
    border: 2px solid rgba(157,78,221,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 30px rgba(157,78,221,0.2);
}
.style-cosmic .level-number {
    background: linear-gradient(180deg, #E0AAFF, #9D4EDD 50%, #5A189A);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 8px rgba(157,78,221,0.5));
}
/* Star particles */
.style-cosmic .particles { inset: -5px; }
.style-cosmic .particle {
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: badge-star-twinkle 2s ease-in-out infinite;
    box-shadow: 0 0 4px #9D4EDD, 0 0 8px rgba(157,78,221,0.5);
}
.style-cosmic .particle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.style-cosmic .particle:nth-child(2) { top: 15%; right: 20%; animation-delay: 0.5s; }
.style-cosmic .particle:nth-child(3) { top: 35%; left: 5%; animation-delay: 0.2s; }
.style-cosmic .particle:nth-child(4) { top: 50%; right: 8%; animation-delay: 0.8s; }
.style-cosmic .particle:nth-child(5) { bottom: 25%; left: 10%; animation-delay: 0.3s; }
.style-cosmic .particle:nth-child(6) { bottom: 15%; right: 15%; animation-delay: 0.6s; }
.style-cosmic .particle:nth-child(7) { top: 5%; left: 50%; animation-delay: 1s; }
.style-cosmic .particle:nth-child(8) { bottom: 8%; left: 40%; animation-delay: 0.4s; }

/* ============================================
   14. DIVINE — Tier 10 + Rays + Particles
   ============================================ */
.style-divine .badge-rays {
    display: block;
    inset: -10px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,215,0,0.3) 2deg, transparent 4deg,
        transparent 18deg, rgba(255,215,0,0.25) 20deg, transparent 22deg,
        transparent 36deg, rgba(255,215,0,0.2) 38deg, transparent 40deg,
        transparent 54deg, rgba(255,215,0,0.25) 56deg, transparent 58deg,
        transparent 72deg, rgba(255,215,0,0.3) 74deg, transparent 76deg,
        transparent 90deg
    );
    animation: divine-rays-spin 20s linear infinite;
}
@keyframes divine-rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.style-divine .badge-outer-ring {
    inset: -2px;
    background: conic-gradient(
        from 0deg,
        #FFD700 0deg, #FFF8DC 30deg, #FFD700 60deg, #FFA500 90deg,
        #FFD700 120deg, #FFF8DC 150deg, #FFD700 180deg, #FFA500 210deg,
        #FFD700 240deg, #FFF8DC 270deg, #FFD700 300deg, #FFA500 330deg, #FFD700 360deg
    );
    animation: badge-rotate 3s linear infinite;
    filter: blur(2px);
}
.style-divine .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 5px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-divine .badge-glow-ring {
    inset: 1px;
    border: 2px solid rgba(255,215,0,0.7);
    box-shadow: 0 0 12px rgba(255,215,0,0.5), 0 0 25px rgba(255,215,0,0.3), 0 0 40px rgba(255,215,0,0.2);
    animation: divine-pulse 2s ease-in-out infinite;
}
@keyframes divine-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255,215,0,0.5), 0 0 25px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 40px rgba(255,215,0,0.5); }
}
.style-divine .level-badge {
    border: 3px solid rgba(255,215,0,0.8);
    box-shadow: inset 0 0 25px rgba(0,0,0,0.5), 0 0 35px rgba(255,215,0,0.4);
}
.style-divine .level-number {
    background: linear-gradient(180deg, #FFF, #FFD700 30%, #FFA500 60%, #FFD700);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.8));
    animation: divine-glow 1.5s ease-in-out infinite;
}
@keyframes divine-glow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255,215,0,0.8)); }
    50% { filter: drop-shadow(0 0 18px rgba(255,215,0,1)) brightness(1.1); }
}
/* Divine particles */
.style-divine .particles { inset: -7px; overflow: visible; }
.style-divine .particle {
    width: 3px; height: 3px;
    background: radial-gradient(circle, #FFF 0%, #FFD700 50%, transparent 100%);
    border-radius: 50%;
    animation: divine-particle 3s ease-in-out infinite;
    box-shadow: 0 0 6px #FFD700, 0 0 12px rgba(255,215,0,0.5);
}
@keyframes divine-particle {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-50px) translateX(var(--drift, 5px)) scale(0); opacity: 0; }
}
.style-divine .particle:nth-child(odd) { --drift: -8px; }
.style-divine .particle:nth-child(even) { --drift: 8px; }
.style-divine .particle:nth-child(1) { left: 10%; bottom: 10%; animation-delay: 0s; }
.style-divine .particle:nth-child(2) { left: 25%; bottom: 5%; animation-delay: 0.4s; }
.style-divine .particle:nth-child(3) { left: 45%; bottom: 8%; animation-delay: 0.2s; }
.style-divine .particle:nth-child(4) { left: 60%; bottom: 3%; animation-delay: 0.6s; }
.style-divine .particle:nth-child(5) { left: 75%; bottom: 10%; animation-delay: 0.3s; }
.style-divine .particle:nth-child(6) { left: 90%; bottom: 6%; animation-delay: 0.5s; }
.style-divine .particle:nth-child(7) { left: 15%; bottom: 15%; animation-delay: 0.8s; }
.style-divine .particle:nth-child(8) { left: 50%; bottom: 12%; animation-delay: 1s; }


/* ============================================
   GALLERY 2 STYLES
   ============================================ */

/* ============================================
   15. FROST — Élémentaire Glace + Particles
   ============================================ */
.style-frost .badge-outer-ring {
    inset: 0;
    background: conic-gradient(from 0deg, rgba(135,206,235,0.1), rgba(200,240,255,0.4), rgba(135,206,235,0.1), rgba(255,255,255,0.3), rgba(135,206,235,0.1));
    animation: badge-rotate 8s linear infinite;
    filter: blur(2px);
}
.style-frost .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-frost .badge-glow-ring {
    inset: 2px;
    border: 2px solid rgba(135,206,235,0.4);
    box-shadow: inset 0 0 12px rgba(135,206,235,0.1), 0 0 12px rgba(135,206,235,0.2);
}
.style-frost .level-badge {
    border: 2px solid rgba(135,206,235,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(135,206,235,0.2);
}
.style-frost .level-number {
    background: linear-gradient(180deg, #fff, #87CEEB 50%, #4A90B8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(135,206,235,0.5));
}
/* Ice crystals */
.style-frost .particles { inset: -5px; }
.style-frost .particle {
    width: 4px; height: 4px;
    background: #fff;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: frost-fall 4s linear infinite;
    opacity: 0.7;
}
@keyframes frost-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(70px) rotate(360deg); opacity: 0; }
}
.style-frost .particle:nth-child(1) { top: 0; left: 20%; animation-delay: 0s; }
.style-frost .particle:nth-child(2) { top: 5%; left: 50%; animation-delay: 0.8s; }
.style-frost .particle:nth-child(3) { top: 0; left: 80%; animation-delay: 0.4s; }
.style-frost .particle:nth-child(4) { top: 10%; left: 35%; animation-delay: 1.2s; }

/* ============================================
   16. NEON PINK — Cyberpunk
   ============================================ */
.style-neon-pink .badge-outer-ring {
    inset: 2px;
    border: 2px solid #FF1493;
    box-shadow: 0 0 8px #FF1493, 0 0 16px #FF1493, 0 0 25px rgba(255,20,147,0.5), inset 0 0 6px rgba(255,20,147,0.3);
    animation: neon-flicker 3s ease-in-out infinite;
}
@keyframes neon-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.6; }
    94% { opacity: 1; }
    96% { opacity: 0.8; }
    97% { opacity: 1; }
}
.style-neon-pink .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(255,20,147,0.3);
    border-radius: 50%;
}
.style-neon-pink .level-badge {
    border: 2px solid #FF1493;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 12px rgba(255,20,147,0.4);
}
.style-neon-pink .level-number {
    color: #FF1493;
    text-shadow: 0 0 8px #FF1493, 0 0 16px #FF1493, 0 0 25px rgba(255,20,147,0.5);
}

/* ============================================
   17. NEON CYAN — Tron
   ============================================ */
.style-neon-cyan .badge-outer-ring {
    inset: 2px;
    border: 2px solid #00FFFF;
    box-shadow: 0 0 8px #00FFFF, 0 0 16px #00FFFF, 0 0 25px rgba(0,255,255,0.5);
}
.style-neon-cyan .badge-glow-ring {
    inset: -2px;
    border: 1px solid rgba(0,255,255,0.3);
    animation: cyan-pulse 2s ease-in-out infinite;
}
@keyframes cyan-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; box-shadow: 0 0 12px rgba(0,255,255,0.3); }
    50% { transform: scale(1.05); opacity: 0.8; box-shadow: 0 0 25px rgba(0,255,255,0.5); }
}
.style-neon-cyan .level-badge {
    border: 2px solid #00FFFF;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 15px rgba(0,255,255,0.3);
}
.style-neon-cyan .level-number {
    color: #00FFFF;
    text-shadow: 0 0 8px #00FFFF, 0 0 16px #00FFFF;
}

/* ============================================
   18. MATRIX — Code
   ============================================ */
.style-matrix .badge-outer-ring {
    inset: 2px;
    border: 2px solid rgba(0,255,0,0.5);
    box-shadow: 0 0 10px rgba(0,255,0,0.3);
}
.style-matrix .level-badge {
    border: 2px solid rgba(0,255,0,0.6);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 12px rgba(0,255,0,0.2);
}
.style-matrix .level-number {
    color: #00FF00;
    text-shadow: 0 0 10px #00FF00;
    font-family: 'Courier New', monospace;
}
/* Matrix rain */
.style-matrix .particles {
    inset: 0;
    overflow: hidden;
}
.style-matrix .particle {
    top: -10px;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    color: #00FF00;
    text-shadow: 0 0 3px #00FF00;
    animation: matrix-rain 2s linear infinite;
    opacity: 0.8;
    width: auto; height: auto;
    background: none;
}
@keyframes matrix-rain {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(80px); opacity: 0; }
}
.style-matrix .particle:nth-child(1) { left: 15%; animation-delay: 0s; }
.style-matrix .particle:nth-child(2) { left: 35%; animation-delay: 0.3s; }
.style-matrix .particle:nth-child(3) { left: 55%; animation-delay: 0.1s; }
.style-matrix .particle:nth-child(4) { left: 75%; animation-delay: 0.5s; }

/* ============================================
   19. SAKURA — Fleurs de cerisier + Particles
   ============================================ */
.style-sakura .badge-outer-ring {
    inset: 2px;
    border: 2px solid rgba(255,183,197,0.4);
}
.style-sakura .badge-glow-ring {
    inset: -2px;
    background: radial-gradient(circle, rgba(255,183,197,0.15), transparent 70%);
}
.style-sakura .level-badge {
    border: 2px solid rgba(255,183,197,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 15px rgba(255,183,197,0.2);
}
.style-sakura .level-number {
    background: linear-gradient(180deg, #FFF, #FFB7C5 50%, #FF69B4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Petals */
.style-sakura .particles { inset: -7px; overflow: visible; }
.style-sakura .particle {
    width: 5px; height: 5px;
    background: linear-gradient(135deg, #FFB7C5, #FF69B4);
    border-radius: 50% 0 50% 50%;
    animation: petal-fall 5s ease-in-out infinite;
    opacity: 0.8;
}
@keyframes petal-fall {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { transform: translateY(90px) translateX(15px) rotate(360deg); opacity: 0; }
}
.style-sakura .particle:nth-child(1) { top: -5%; left: 20%; animation-delay: 0s; }
.style-sakura .particle:nth-child(2) { top: 0; left: 50%; animation-delay: 1s; }
.style-sakura .particle:nth-child(3) { top: -10%; left: 75%; animation-delay: 0.5s; }
.style-sakura .particle:nth-child(4) { top: 5%; left: 35%; animation-delay: 2s; }
.style-sakura .particle:nth-child(5) { top: -5%; left: 60%; animation-delay: 1.5s; }
.style-sakura .particle:nth-child(6) { top: 0; left: 85%; animation-delay: 0.8s; }

/* ============================================
   20. THUNDER — Foudre + Particles
   ============================================ */
.style-thunder .badge-outer-ring {
    inset: 1px;
    border: 2px solid rgba(255,215,0,0.5);
    box-shadow: 0 0 10px rgba(255,215,0,0.4), inset 0 0 10px rgba(255,215,0,0.1);
}
.style-thunder .badge-glow-ring {
    inset: -1px;
    animation: thunder-shock 4s ease-in-out infinite;
}
@keyframes thunder-shock {
    0%, 100% { box-shadow: 0 0 12px rgba(255,215,0,0.2); }
    48% { box-shadow: 0 0 12px rgba(255,215,0,0.2); }
    50% { box-shadow: 0 0 40px rgba(255,215,0,0.9), 0 0 60px rgba(255,255,255,0.5); }
    52% { box-shadow: 0 0 12px rgba(255,215,0,0.2); }
    54% { box-shadow: 0 0 30px rgba(255,215,0,0.7); }
    56% { box-shadow: 0 0 12px rgba(255,215,0,0.2); }
}
.style-thunder .level-badge {
    border: 2px solid rgba(255,215,0,0.6);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 15px rgba(255,215,0,0.3);
}
.style-thunder .level-number {
    background: linear-gradient(180deg, #FFF, #FFD700 50%, #FFA500);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
    animation: thunder-text 4s ease-in-out infinite;
}
@keyframes thunder-text {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.5)); }
    50% { filter: drop-shadow(0 0 12px rgba(255,215,0,1)) brightness(1.3); }
    52% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.5)); }
}
/* Lightning bolts */
.style-thunder .particles { inset: 0; }
.style-thunder .particle {
    width: 1px; height: 10px;
    background: linear-gradient(180deg, #FFD700, #FFF, #FFD700);
    animation: lightning-bolt 4s ease-in-out infinite;
    opacity: 0;
    box-shadow: 0 0 6px #FFD700;
}
@keyframes lightning-bolt {
    0%, 48%, 56%, 100% { opacity: 0; }
    50%, 54% { opacity: 1; }
}
.style-thunder .particle:nth-child(1) { top: 10%; left: 25%; transform: rotate(-20deg); }
.style-thunder .particle:nth-child(2) { top: 15%; right: 20%; transform: rotate(25deg); }
.style-thunder .particle:nth-child(3) { bottom: 15%; left: 20%; transform: rotate(-15deg); }

/* ============================================
   21. VOID — Trou noir + Particles
   ============================================ */
.style-void .badge-outer-ring {
    inset: 0;
    background: conic-gradient(from 0deg, #000, #1a0a2e, #000, #2d1b4e, #000);
    animation: void-rotate 10s linear infinite;
}
@keyframes void-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
.style-void .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    background: #050505;
    border-radius: 50%;
}
.style-void .badge-glow-ring {
    inset: 2px;
    border: 2px solid rgba(75,0,130,0.5);
    box-shadow: inset 0 0 15px rgba(75,0,130,0.3), 0 0 12px rgba(75,0,130,0.2);
}
.style-void .level-badge {
    border: 2px solid rgba(75,0,130,0.6);
    background: radial-gradient(circle, #0a0a0a, #000);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 0 20px rgba(75,0,130,0.3);
}
.style-void .level-number {
    background: linear-gradient(180deg, #9370DB, #4B0082 50%, #1a0a2e);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Void particles sucked in */
.style-void .particles { inset: -10px; }
.style-void .particle {
    width: 3px; height: 3px;
    background: #9370DB;
    border-radius: 50%;
    animation: void-suck 3s ease-in infinite;
    box-shadow: 0 0 4px #4B0082;
}
@keyframes void-suck {
    0% { transform: translate(0,0) scale(1); opacity: 0.8; }
    100% { transform: translate(calc(40px - var(--vx,0px)), calc(40px - var(--vy,0px))) scale(0); opacity: 0; }
}
.style-void .particle:nth-child(1) { top: 0; left: 50%; --vx: 40px; --vy: 0; animation-delay: 0s; }
.style-void .particle:nth-child(2) { top: 15%; right: 5%; --vx: 75px; --vy: 12px; animation-delay: 0.5s; }
.style-void .particle:nth-child(3) { top: 50%; right: 0; --vx: 80px; --vy: 40px; animation-delay: 0.25s; }
.style-void .particle:nth-child(4) { bottom: 15%; right: 5%; --vx: 75px; --vy: 68px; animation-delay: 0.75s; }
.style-void .particle:nth-child(5) { bottom: 0; left: 50%; --vx: 40px; --vy: 80px; animation-delay: 0.4s; }
.style-void .particle:nth-child(6) { bottom: 15%; left: 5%; --vx: 5px; --vy: 68px; animation-delay: 0.9s; }

/* ============================================
   22. RAINBOW — Arc-en-ciel rotatif
   ============================================ */
.style-rainbow .badge-outer-ring {
    inset: 0;
    background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #ff00ff, #ff0000);
    animation: badge-rotate 3s linear infinite;
    filter: blur(2px);
    opacity: 0.7;
}
.style-rainbow .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-rainbow .badge-glow-ring {
    inset: 2px;
    border: 2px solid transparent;
    background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #ff00ff, #ff0000);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: badge-rotate 3s linear infinite reverse;
}
.style-rainbow .level-badge {
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.1);
}
.style-rainbow .level-number {
    background: linear-gradient(180deg, #ff8800, #ffff00 25%, #00ff00 50%, #00ffff 75%, #ff00ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: rainbow-shift 3s linear infinite;
}
@keyframes rainbow-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* ============================================
   23. BLOOD MOON — Lune de sang + Particles
   ============================================ */
.style-blood .badge-outer-ring {
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(139,0,0,0.4), transparent 50%);
}
.style-blood .badge-glow-ring {
    inset: 1px;
    border: 2px solid rgba(139,0,0,0.6);
    box-shadow: 0 0 12px rgba(139,0,0,0.4), inset 0 0 15px rgba(139,0,0,0.2);
    animation: blood-pulse 3s ease-in-out infinite;
}
@keyframes blood-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(139,0,0,0.4), inset 0 0 15px rgba(139,0,0,0.2); }
    50% { box-shadow: 0 0 20px rgba(139,0,0,0.6), inset 0 0 25px rgba(139,0,0,0.3); }
}
.style-blood .level-badge {
    border: 2px solid rgba(139,0,0,0.7);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 0 20px rgba(139,0,0,0.3);
}
.style-blood .level-number {
    background: linear-gradient(180deg, #DC143C, #8B0000 50%, #4A0000);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 5px rgba(139,0,0,0.5));
}
/* Blood drip */
.style-blood .particles { inset: 0; overflow: hidden; }
.style-blood .particle {
    top: 0;
    width: 2px; height: 8px;
    background: linear-gradient(180deg, #8B0000, #4A0000);
    border-radius: 0 0 2px 2px;
    animation: blood-drip 4s ease-in infinite;
    opacity: 0;
}
@keyframes blood-drip {
    0% { transform: translateY(0); opacity: 0; height: 3px; }
    10% { opacity: 0.9; height: 8px; }
    90% { opacity: 0.7; }
    100% { transform: translateY(60px); opacity: 0; height: 10px; }
}
.style-blood .particle:nth-child(1) { left: 25%; animation-delay: 0s; }
.style-blood .particle:nth-child(2) { left: 50%; animation-delay: 1.5s; }
.style-blood .particle:nth-child(3) { left: 75%; animation-delay: 0.8s; }

/* ============================================
   24. HOLOGRAM — Effet holographique
   ============================================ */
.style-holo .badge-outer-ring {
    inset: 1px;
    border: 2px solid rgba(255,255,255,0.3);
    background: linear-gradient(135deg, rgba(255,0,128,0.1), rgba(0,255,255,0.1) 25%, rgba(255,255,0,0.1) 50%, rgba(0,255,128,0.1) 75%, rgba(255,0,255,0.1));
    animation: holo-shift 4s ease-in-out infinite;
}
@keyframes holo-shift {
    0%, 100% { filter: hue-rotate(0deg); opacity: 0.7; }
    50% { filter: hue-rotate(90deg); opacity: 1; }
}
.style-holo .badge-glow-ring {
    inset: -1px;
    background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 55%, transparent 100%);
    animation: holo-scan 2s linear infinite;
}
@keyframes holo-scan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.style-holo .level-badge {
    border: 2px solid rgba(255,255,255,0.4);
    background: linear-gradient(145deg, rgba(26,26,26,0.9), rgba(10,10,10,0.9));
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 12px rgba(255,255,255,0.1);
}
.style-holo .level-number {
    background: linear-gradient(180deg, #ff80bf, #80ffff 33%, #ffff80 66%, #80ff80);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: holo-text 3s ease-in-out infinite;
}
@keyframes holo-text {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(45deg) brightness(1.2); }
}
/* Scan lines */
.style-holo .particles {
    inset: 5px;
    overflow: hidden;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
    animation: holo-scanlines 0.5s linear infinite;
}
@keyframes holo-scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

/* ============================================
   25. OCEAN DEPTHS — Eau + Particles
   ============================================ */
.style-ocean .badge-outer-ring {
    inset: 0;
    background: linear-gradient(180deg, rgba(0,105,148,0.3), rgba(0,50,80,0.5));
}
.style-ocean .badge-glow-ring {
    inset: 2px;
    border: 2px solid rgba(0,150,200,0.4);
    box-shadow: 0 0 12px rgba(0,150,200,0.2), inset 0 0 12px rgba(0,150,200,0.1);
}
.style-ocean .level-badge {
    border: 2px solid rgba(0,150,200,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 0 15px rgba(0,150,200,0.2);
}
.style-ocean .level-number {
    background: linear-gradient(180deg, #00CED1, #006994 50%, #003366);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Bubbles */
.style-ocean .particles { inset: 0; overflow: hidden; }
.style-ocean .particle {
    bottom: -5px;
    width: 4px; height: 4px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(0,150,200,0.3));
    border-radius: 50%;
    animation: bubble-rise 4s ease-in-out infinite;
}
@keyframes bubble-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-70px) translateX(10px); opacity: 0; }
}
.style-ocean .particle:nth-child(1) { left: 20%; animation-delay: 0s; width: 3px; height: 3px; }
.style-ocean .particle:nth-child(2) { left: 40%; animation-delay: 1s; width: 5px; height: 5px; }
.style-ocean .particle:nth-child(3) { left: 55%; animation-delay: 0.5s; }
.style-ocean .particle:nth-child(4) { left: 75%; animation-delay: 1.5s; width: 3px; height: 3px; }

/* ============================================
   26. GALAXY SWIRL — Spirale cosmique + Particles
   ============================================ */
.style-galaxy .badge-outer-ring {
    inset: -2px;
    background:
        conic-gradient(from 0deg, transparent, rgba(147,112,219,0.4), rgba(65,105,225,0.3), transparent, rgba(147,112,219,0.3), transparent),
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(147,112,219,0.2), transparent 40%);
    animation: galaxy-spin 15s linear infinite;
    filter: blur(1px);
}
@keyframes galaxy-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.style-galaxy .badge-outer-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    background: #0a0a0a;
    border-radius: 50%;
}
.style-galaxy .badge-glow-ring {
    inset: 2px;
    border: 2px solid rgba(147,112,219,0.4);
    box-shadow: 0 0 12px rgba(147,112,219,0.2);
}
.style-galaxy .level-badge {
    border: 2px solid rgba(147,112,219,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 0 20px rgba(147,112,219,0.2);
}
.style-galaxy .level-number {
    background: linear-gradient(180deg, #E6E6FA, #9370DB 50%, #4169E1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(147,112,219,0.5));
}
/* Stars */
.style-galaxy .particles {
    inset: -2px;
    animation: galaxy-spin 30s linear infinite reverse;
}
.style-galaxy .particle {
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px #fff;
    animation: badge-star-twinkle 2s ease-in-out infinite;
}
.style-galaxy .particle:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.style-galaxy .particle:nth-child(2) { top: 20%; left: 75%; animation-delay: 0.3s; }
.style-galaxy .particle:nth-child(3) { top: 40%; left: 5%; animation-delay: 0.6s; }
.style-galaxy .particle:nth-child(4) { top: 35%; left: 90%; animation-delay: 0.9s; }
.style-galaxy .particle:nth-child(5) { top: 60%; left: 20%; animation-delay: 0.4s; }
.style-galaxy .particle:nth-child(6) { top: 55%; left: 80%; animation-delay: 0.7s; }
.style-galaxy .particle:nth-child(7) { top: 75%; left: 35%; animation-delay: 0.2s; }
.style-galaxy .particle:nth-child(8) { top: 85%; left: 65%; animation-delay: 0.5s; }


/* ============================================
   DISRUPTIF STYLES
   Adapted from badge-styles-disruptif 1 & 2
   Container: 80px / Badge: 60px
   ============================================ */

/* ============================================
   27. GLITCH — Système corrompu
   ============================================ */
.style-glitch .badge-outer-ring {
    inset: 0;
    border: 2px solid #ff0040;
    animation: glitchRing 2s infinite;
}
@keyframes glitchRing {
    0%, 20%, 80%, 86%, 100% { transform: translateX(0); border-color: #ff0040; box-shadow: 0 0 10px rgba(255,0,64,0.5); }
    5% { transform: translateX(-4px) skewX(-5deg); border-color: #0ff; box-shadow: 4px 0 0 #f0f, -4px 0 0 #0ff; }
    10% { transform: translateX(4px) skewX(5deg); border-color: #f0f; }
    15% { transform: translateX(-2px); border-color: #ff0040; }
    82% { transform: translateX(3px) scaleY(1.02); border-color: #0ff; box-shadow: -3px 0 0 #f0f; }
    84% { transform: translateX(-3px) scaleY(0.98); border-color: #f0f; box-shadow: 3px 0 0 #0ff; }
}
.style-glitch .badge-glow-ring {
    inset: 5px;
    border: 1px dashed rgba(255,0,64,0.4);
    animation: glitchInner 3s infinite reverse;
}
@keyframes glitchInner {
    0%, 100% { transform: rotate(0deg); opacity: 0.5; }
    50% { transform: rotate(180deg); opacity: 1; }
}
.style-glitch .level-badge {
    border: 2px solid #ff0040;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(255,0,64,0.3);
    animation: badgeGlitch 4s infinite;
}
@keyframes badgeGlitch {
    0%, 6%, 50%, 56%, 100% { transform: translateX(0) translateY(0); filter: none; }
    2% { transform: translateX(-1px) translateY(1px); }
    4% { transform: translateX(1px) translateY(-1px); }
    52% { transform: translateX(2px) translateY(-1px); filter: hue-rotate(90deg); }
    54% { transform: translateX(-2px) translateY(1px); filter: hue-rotate(-90deg); }
}
.style-glitch .level-number {
    color: #ff0040;
    text-shadow: 1px 0 #0ff, -1px 0 #f0f;
    animation: textGlitch 0.5s infinite;
}
@keyframes textGlitch {
    0%, 100% { text-shadow: 1px 0 #0ff, -1px 0 #f0f; transform: translateX(0); }
    25% { text-shadow: -1px 0 #0ff, 1px 0 #f0f; transform: translateX(-1px); }
    50% { text-shadow: 1px 1px #0ff, -1px -1px #f0f; }
    75% { text-shadow: -1px -1px #0ff, 1px 1px #f0f; transform: translateX(1px); }
}
/* Glitch blocks */
.style-glitch .glitch-blocks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 50%;
    z-index: 3;
}
.style-glitch .glitch-block {
    position: absolute;
    background: #ff0040;
    animation: glitchBlock 4s infinite;
    opacity: 0;
}
.style-glitch .glitch-block:nth-child(1) { width: 100%; height: 2px; top: 20%; }
.style-glitch .glitch-block:nth-child(2) { width: 60%; height: 1px; top: 45%; left: 20%; animation-delay: 0.1s; }
.style-glitch .glitch-block:nth-child(3) { width: 80%; height: 2px; top: 70%; left: 10%; animation-delay: 0.2s; }
.style-glitch .glitch-block:nth-child(4) { width: 40%; height: 1px; top: 35%; left: 30%; animation-delay: 0.15s; }
.style-glitch .glitch-block:nth-child(5) { width: 70%; height: 2px; top: 85%; left: 15%; animation-delay: 0.25s; }
@keyframes glitchBlock {
    0%, 6%, 50%, 56%, 100% { opacity: 0; transform: translateX(0); }
    2% { opacity: 1; transform: translateX(-5px); background: #0ff; }
    4% { opacity: 1; transform: translateX(5px); background: #f0f; }
    52% { opacity: 0.8; transform: translateX(3px); }
    54% { opacity: 0.8; transform: translateX(-3px); }
}


/* ============================================
   28. NUCLEAR — Zone radioactive
   ============================================ */
.style-nuclear .badge-outer-ring {
    inset: -2px;
    border: 3px solid #39FF14;
    box-shadow: 0 0 10px #39FF14, 0 0 20px rgba(57,255,20,0.5), 0 0 30px rgba(57,255,20,0.3), inset 0 0 15px rgba(57,255,20,0.2);
    animation: nuclearRing 2s ease-in-out infinite;
}
@keyframes nuclearRing {
    0%, 100% { box-shadow: 0 0 10px #39FF14, 0 0 20px rgba(57,255,20,0.5), 0 0 30px rgba(57,255,20,0.3), inset 0 0 15px rgba(57,255,20,0.2); }
    50% { box-shadow: 0 0 20px #39FF14, 0 0 40px rgba(57,255,20,0.6), 0 0 60px rgba(57,255,20,0.4), inset 0 0 25px rgba(57,255,20,0.3); }
}
.style-nuclear .badge-glow-ring {
    inset: 7px;
    border: 1px dashed rgba(57,255,20,0.5);
    animation: badge-rotate 5s linear infinite reverse;
}
.style-nuclear .radiation-symbol {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    animation: badge-rotate 10s linear infinite;
}
.style-nuclear .radiation-blade {
    position: absolute;
    width: 35%;
    height: 35%;
    background: linear-gradient(180deg, rgba(57,255,20,0.4), rgba(57,255,20,0.1));
    top: 5%;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.style-nuclear .radiation-blade:nth-child(2) { transform: translateX(-50%) rotate(120deg); }
.style-nuclear .radiation-blade:nth-child(3) { transform: translateX(-50%) rotate(240deg); }
.style-nuclear .wave {
    position: absolute;
    inset: 0;
    border: 1px solid #39FF14;
    border-radius: 50%;
    animation: nuclearWave 2s ease-out infinite;
    opacity: 0;
}
.style-nuclear .wave:nth-child(2) { animation-delay: 0.5s; }
.style-nuclear .wave:nth-child(3) { animation-delay: 1s; }
.style-nuclear .wave:nth-child(4) { animation-delay: 1.5s; }
@keyframes nuclearWave {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}
.style-nuclear .level-badge {
    border: 3px solid #39FF14;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), inset 0 0 10px rgba(57,255,20,0.2), 0 0 20px rgba(57,255,20,0.4);
}
.style-nuclear .level-number {
    color: #39FF14;
    text-shadow: 0 0 5px #39FF14, 0 0 10px #39FF14, 0 0 20px rgba(57,255,20,0.5);
    animation: nuclearText 0.5s ease-in-out infinite;
}
@keyframes nuclearText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
/* Nuclear particles */
.style-nuclear .particles { inset: 0; }
.style-nuclear .particle {
    width: 3px;
    height: 3px;
    background: #39FF14;
    border-radius: 50%;
    box-shadow: 0 0 5px #39FF14, 0 0 10px #39FF14;
    animation: nuclearParticle 3s ease-out infinite;
}
@keyframes nuclearParticle {
    0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-45px) scale(0); opacity: 0; }
}
.style-nuclear .particle:nth-child(1) { top: 50%; left: 50%; --angle: 0deg; }
.style-nuclear .particle:nth-child(2) { top: 50%; left: 50%; --angle: 45deg; animation-delay: 0.3s; }
.style-nuclear .particle:nth-child(3) { top: 50%; left: 50%; --angle: 90deg; animation-delay: 0.6s; }
.style-nuclear .particle:nth-child(4) { top: 50%; left: 50%; --angle: 135deg; animation-delay: 0.9s; }
.style-nuclear .particle:nth-child(5) { top: 50%; left: 50%; --angle: 180deg; animation-delay: 1.2s; }
.style-nuclear .particle:nth-child(6) { top: 50%; left: 50%; --angle: 225deg; animation-delay: 1.5s; }
.style-nuclear .particle:nth-child(7) { top: 50%; left: 50%; --angle: 270deg; animation-delay: 1.8s; }
.style-nuclear .particle:nth-child(8) { top: 50%; left: 50%; --angle: 315deg; animation-delay: 2.1s; }


/* ============================================
   29. QUANTUM — Superposition quantique
   ============================================ */
.style-quantum .badge-outer-ring {
    inset: 0;
    border: 2px solid rgba(0,191,255,0.5);
    box-shadow: 0 0 15px rgba(0,191,255,0.3);
}
.style-quantum .orbit {
    position: absolute;
    border: 1px solid rgba(0,191,255,0.4);
    border-radius: 50%;
}
.style-quantum .orbit:nth-child(1) {
    inset: -5px;
    animation: orbitSpin1 4s linear infinite;
}
.style-quantum .orbit:nth-child(2) {
    inset: -2px;
    animation: orbitSpin2 3s linear infinite reverse;
}
.style-quantum .orbit:nth-child(3) {
    inset: -7px;
    animation: orbitSpin3 5s linear infinite;
}
@keyframes orbitSpin1 { from { transform: rotateX(70deg) rotateY(20deg) rotateZ(0deg); } to { transform: rotateX(70deg) rotateY(20deg) rotateZ(360deg); } }
@keyframes orbitSpin2 { from { transform: rotateX(70deg) rotateY(-40deg) rotateZ(0deg); } to { transform: rotateX(70deg) rotateY(-40deg) rotateZ(360deg); } }
@keyframes orbitSpin3 { from { transform: rotateX(70deg) rotateY(60deg) rotateZ(0deg); } to { transform: rotateX(70deg) rotateY(60deg) rotateZ(360deg); } }
.style-quantum .electron {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00BFFF;
    border-radius: 50%;
    box-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
}
.style-quantum .ghost-badge {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(0,191,255,0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: quantumGhost 4s ease-in-out infinite;
}
@keyframes quantumGhost {
    0%, 50%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    25% { transform: translate(-60%, -40%) scale(1.05); opacity: 0.3; }
    75% { transform: translate(-40%, -60%) scale(0.95); opacity: 0.3; }
}
.style-quantum .probability {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0,191,255,0.15), transparent 30%);
    animation: probabilityShift 5s ease-in-out infinite;
}
@keyframes probabilityShift {
    0%, 100% { background: radial-gradient(circle at 30% 30%, rgba(0,191,255,0.15), transparent 30%); }
    33% { background: radial-gradient(circle at 70% 40%, rgba(0,191,255,0.15), transparent 30%); }
    66% { background: radial-gradient(circle at 50% 70%, rgba(0,191,255,0.15), transparent 30%); }
}
.style-quantum .level-badge {
    border: 2px solid #00BFFF;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 20px rgba(0,191,255,0.3);
    animation: quantumBadge 4s ease-in-out infinite;
}
@keyframes quantumBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.style-quantum .level-number {
    background: linear-gradient(180deg, #FFF, #00BFFF 50%, #0080FF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 8px rgba(0,191,255,0.6));
    animation: quantumNumber 2s ease-in-out infinite;
}
@keyframes quantumNumber {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(0,191,255,0.6)); }
    50% { filter: drop-shadow(0 0 14px rgba(0,191,255,0.9)) blur(0.5px); }
}


/* ============================================
   30. REALITY BREAK — Cassure dimensionnelle
   ============================================ */
.style-reality .badge-outer-ring {
    inset: 0;
    border-radius: 50%;
}
.style-reality .reality-shards {
    position: absolute;
    inset: -5px;
    pointer-events: none;
}
.style-reality .shard {
    position: absolute;
    background: linear-gradient(135deg, #fff, rgba(255,255,255,0.3));
    animation: shardFloat 6s ease-in-out infinite;
}
.style-reality .shard:nth-child(1) { width: 10px; height: 4px; top: 5%; left: 30%; clip-path: polygon(0% 0%, 100% 20%, 80% 100%, 10% 80%); --float-x: 5px; --float-y: -8px; --rot: 45deg; }
.style-reality .shard:nth-child(2) { width: 8px; height: 12px; top: 20%; right: 5%; clip-path: polygon(20% 0%, 100% 10%, 90% 100%, 0% 80%); animation-delay: 0.5s; --float-x: 8px; --float-y: 5px; --rot: -30deg; }
.style-reality .shard:nth-child(3) { width: 12px; height: 6px; bottom: 15%; right: 15%; clip-path: polygon(10% 0%, 100% 20%, 90% 100%, 0% 70%); animation-delay: 1s; --float-x: -5px; --float-y: 10px; --rot: 60deg; }
.style-reality .shard:nth-child(4) { width: 9px; height: 9px; bottom: 10%; left: 10%; clip-path: polygon(20% 0%, 80% 0%, 100% 80%, 0% 100%); animation-delay: 1.5s; --float-x: -8px; --float-y: -5px; --rot: -45deg; }
.style-reality .shard:nth-child(5) { width: 6px; height: 10px; top: 40%; left: 0%; clip-path: polygon(0% 20%, 100% 0%, 80% 100%, 20% 80%); animation-delay: 2s; --float-x: -10px; --float-y: 3px; --rot: 30deg; }
.style-reality .shard:nth-child(6) { width: 11px; height: 5px; top: 0%; left: 50%; clip-path: polygon(10% 0%, 90% 10%, 100% 100%, 0% 90%); animation-delay: 2.5s; --float-x: 3px; --float-y: -10px; --rot: -60deg; }
@keyframes shardFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.8; }
    50% { transform: translate(var(--float-x), var(--float-y)) rotate(var(--rot)); opacity: 1; }
}
.style-reality .portal {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #00ff00, #ff00ff);
    animation: portalSpin 4s linear infinite;
    opacity: 0.3;
    filter: blur(4px);
}
@keyframes portalSpin {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1); }
}
.style-reality .portal-inner {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #050505;
}
.style-reality .distortion {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid;
    border-color: #ff00ff #00ffff #ffff00 #00ff00;
    animation: distortionSpin 2s linear infinite;
    box-shadow: 0 0 10px rgba(255,0,255,0.5), 0 0 20px rgba(0,255,255,0.3);
}
@keyframes distortionSpin {
    from { transform: rotate(0deg); filter: hue-rotate(0deg); }
    to { transform: rotate(360deg); filter: hue-rotate(360deg); }
}
.style-reality .level-badge {
    border: 2px solid transparent;
    background: linear-gradient(#0a0a0a, #0a0a0a) padding-box, linear-gradient(45deg, #ff00ff, #00ffff, #ffff00) border-box;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 15px rgba(255,0,255,0.2), 0 0 15px rgba(0,255,255,0.2);
    animation: realityBadge 6s ease-in-out infinite;
}
@keyframes realityBadge {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.02) rotate(1deg); }
    50% { transform: scale(0.98) rotate(-1deg); }
    75% { transform: scale(1.01) rotate(0.5deg); }
}
.style-reality .level-number {
    background: linear-gradient(180deg, #ff00ff, #00ffff 50%, #ffff00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: realityNumber 3s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255,0,255,0.5));
}
@keyframes realityNumber {
    0% { filter: drop-shadow(0 0 5px rgba(255,0,255,0.5)) hue-rotate(0deg); }
    100% { filter: drop-shadow(0 0 5px rgba(255,0,255,0.5)) hue-rotate(360deg); }
}
/* Reality particles */
.style-reality .particles { inset: -5px; overflow: visible; }
.style-reality .particle {
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: realityParticle 4s ease-in-out infinite;
    box-shadow: 0 0 3px #ff00ff, 0 0 6px #00ffff;
}
.style-reality .particle:nth-child(1) { top: 50%; left: 0; --end-x: -15px; --end-y: 0; }
.style-reality .particle:nth-child(2) { top: 50%; right: 0; --end-x: 15px; --end-y: 0; animation-delay: 0.5s; }
.style-reality .particle:nth-child(3) { top: 0; left: 50%; --end-x: 0; --end-y: -15px; animation-delay: 1s; }
.style-reality .particle:nth-child(4) { bottom: 0; left: 50%; --end-x: 0; --end-y: 15px; animation-delay: 1.5s; }
.style-reality .particle:nth-child(5) { top: 15%; left: 15%; --end-x: -10px; --end-y: -10px; animation-delay: 2s; }
.style-reality .particle:nth-child(6) { top: 15%; right: 15%; --end-x: 10px; --end-y: -10px; animation-delay: 2.5s; }
.style-reality .particle:nth-child(7) { bottom: 15%; left: 15%; --end-x: -10px; --end-y: 10px; animation-delay: 3s; }
.style-reality .particle:nth-child(8) { bottom: 15%; right: 15%; --end-x: 10px; --end-y: 10px; animation-delay: 3.5s; }
@keyframes realityParticle {
    0%, 100% { transform: translate(0, 0); opacity: 0.8; }
    50% { transform: translate(var(--end-x), var(--end-y)); opacity: 0; }
}


/* ============================================
   31. CORRUPTED — Données corrompues
   ============================================ */
.style-corrupted .badge-outer-ring {
    inset: 0;
    border: 2px solid #ff0040;
    animation: corruptRing 0.5s infinite;
}
@keyframes corruptRing {
    0%, 30%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-color: #ff0040; }
    10% { clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 30%, 70% 50%, 100% 50%, 100% 100%, 0 100%); border-color: #0ff; }
    20% { clip-path: polygon(0 0, 30% 0, 30% 20%, 0 20%, 0 60%, 40% 60%, 40% 100%, 100% 100%, 100% 0, 50% 0, 50% 40%, 100% 40%); border-color: #ff0; }
}
.style-corrupted .corrupt-symbols {
    position: absolute;
    inset: -10px;
    pointer-events: none;
}
.style-corrupted .corrupt-symbol {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #ff0040;
    animation: symbolFloat 3s ease-in-out infinite;
    text-shadow: 0 0 5px #ff0040;
}
.style-corrupted .corrupt-symbol:nth-child(1) { top: 10%; left: 10%; }
.style-corrupted .corrupt-symbol:nth-child(2) { top: 5%; right: 20%; animation-delay: 0.5s; }
.style-corrupted .corrupt-symbol:nth-child(3) { top: 30%; left: 0; animation-delay: 0.3s; }
.style-corrupted .corrupt-symbol:nth-child(4) { top: 25%; right: 5%; animation-delay: 0.8s; }
.style-corrupted .corrupt-symbol:nth-child(5) { bottom: 30%; left: 5%; animation-delay: 0.2s; }
.style-corrupted .corrupt-symbol:nth-child(6) { bottom: 25%; right: 10%; animation-delay: 0.6s; }
.style-corrupted .corrupt-symbol:nth-child(7) { bottom: 10%; left: 20%; animation-delay: 0.4s; }
.style-corrupted .corrupt-symbol:nth-child(8) { bottom: 5%; right: 25%; animation-delay: 0.7s; }
@keyframes symbolFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-5px) rotate(10deg); opacity: 1; }
}
.style-corrupted .level-badge {
    border: 2px solid #ff0040;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 10px rgba(255,0,64,0.3);
    animation: badgeCorrupt 2s infinite;
}
@keyframes badgeCorrupt {
    0%, 15%, 100% { transform: scale(1); }
    5% { transform: scale(1.02) skewX(2deg); }
    10% { transform: scale(0.98) skewX(-2deg); }
}
.style-corrupted .level-number {
    font-family: 'Courier New', monospace;
    color: #ff0040;
    text-shadow: 1px 0 #0ff, -1px 0 #ff0, 0 0 10px #ff0040;
    animation: numberCorrupt 0.2s infinite;
}
@keyframes numberCorrupt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}


/* ============================================
   32. BLACK HOLE — Singularité
   ============================================ */
.style-blackhole .accretion-disk {
    position: absolute;
    inset: -13px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff6600 0deg, #ffcc00 60deg, #fff 90deg, #ffcc00 120deg, #ff6600 180deg, #ff3300 240deg, #ff0000 300deg, #ff6600 360deg);
    animation: accretionSpin 8s linear infinite;
    filter: blur(2px);
    opacity: 0.8;
}
@keyframes accretionSpin {
    from { transform: rotateX(75deg) rotateZ(0deg); }
    to { transform: rotateX(75deg) rotateZ(360deg); }
}
.style-blackhole .accretion-disk::before {
    content: '';
    position: absolute;
    inset: 18px;
    background: #000;
    border-radius: 50%;
}
.style-blackhole .event-horizon {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #000 0%, #000 60%, rgba(255,100,0,0.3) 80%, transparent 100%);
    box-shadow: 0 0 25px 10px rgba(0,0,0,0.9), inset 0 0 25px #000;
}
.style-blackhole .lensing {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(255,150,50,0.5);
    animation: lensingPulse 2s ease-in-out infinite;
}
@keyframes lensingPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
.style-blackhole .level-badge {
    border: none;
    background: radial-gradient(circle, #050505, #000);
    box-shadow: 0 0 30px 15px rgba(0,0,0,0.95), inset 0 0 25px rgba(0,0,0,1);
}
.style-blackhole .level-number {
    background: radial-gradient(circle, #fff, #666 50%, #333);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: bhNumber 4s ease-in-out infinite;
}
@keyframes bhNumber {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(0.98); filter: brightness(0.7); }
}
/* Black hole particles (sucked in) */
.style-blackhole .particles { inset: -22px; }
.style-blackhole .particle {
    width: 2px; height: 2px;
    background: #ff8800;
    border-radius: 50%;
    animation: bhSuck 3s ease-in infinite;
    box-shadow: 0 0 4px #ff6600;
}
@keyframes bhSuck {
    0% { transform: translate(var(--start-x), var(--start-y)) scale(1); opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translate(0, 0) scale(0); opacity: 0; }
}
.style-blackhole .particle:nth-child(1) { top: 0; left: 50%; --start-x: 0; --start-y: -22px; }
.style-blackhole .particle:nth-child(2) { top: 20%; right: 0; --start-x: 22px; --start-y: -13px; animation-delay: 0.4s; }
.style-blackhole .particle:nth-child(3) { top: 50%; right: -5px; --start-x: 27px; --start-y: 0; animation-delay: 0.8s; }
.style-blackhole .particle:nth-child(4) { bottom: 20%; right: 0; --start-x: 22px; --start-y: 13px; animation-delay: 1.2s; }
.style-blackhole .particle:nth-child(5) { bottom: 0; left: 50%; --start-x: 0; --start-y: 22px; animation-delay: 0.2s; }
.style-blackhole .particle:nth-child(6) { bottom: 20%; left: 0; --start-x: -22px; --start-y: 13px; animation-delay: 0.6s; }
.style-blackhole .particle:nth-child(7) { top: 50%; left: -5px; --start-x: -27px; --start-y: 0; animation-delay: 1s; }
.style-blackhole .particle:nth-child(8) { top: 20%; left: 0; --start-x: -22px; --start-y: -13px; animation-delay: 1.4s; }
.style-blackhole .particle:nth-child(9) { top: 10%; left: 30%; --start-x: -9px; --start-y: -20px; animation-delay: 1.8s; }
.style-blackhole .particle:nth-child(10) { bottom: 10%; right: 30%; --start-x: 9px; --start-y: 20px; animation-delay: 2.2s; }


/* ============================================
   33. HYPERDRIVE — Vitesse lumière
   ============================================ */
.style-hyperdrive .badge-outer-ring {
    inset: 0;
    border: 2px solid #88ccff;
    box-shadow: 0 0 10px #88ccff, 0 0 20px rgba(136,204,255,0.5), inset 0 0 10px rgba(136,204,255,0.2);
}
.style-hyperdrive .speed-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #88ccff;
    animation: speedExpand 0.8s linear infinite;
    opacity: 0;
}
.style-hyperdrive .speed-ring:nth-child(1) { inset: 30%; }
.style-hyperdrive .speed-ring:nth-child(2) { inset: 30%; animation-delay: 0.2s; }
.style-hyperdrive .speed-ring:nth-child(3) { inset: 30%; animation-delay: 0.4s; }
.style-hyperdrive .speed-ring:nth-child(4) { inset: 30%; animation-delay: 0.6s; }
@keyframes speedExpand {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}
.style-hyperdrive .motion-blur {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(136,204,255,0.1) 20%, rgba(136,204,255,0.3) 50%, rgba(136,204,255,0.1) 80%, transparent 100%);
    animation: motionBlur 0.2s infinite;
}
@keyframes motionBlur {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.1); }
}
.style-hyperdrive .level-badge {
    border: 2px solid #88ccff;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(136,204,255,0.4), -10px 0 15px rgba(136,204,255,0.2), 10px 0 15px rgba(136,204,255,0.2);
    animation: hyperBadge 0.1s infinite;
}
@keyframes hyperBadge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1px); }
}
.style-hyperdrive .level-number {
    color: #fff;
    text-shadow: 0 0 5px #88ccff, 0 0 10px #88ccff, -3px 0 8px #88ccff, 3px 0 8px #88ccff;
    animation: hyperNumber 0.15s infinite;
}
@keyframes hyperNumber {
    0%, 100% { text-shadow: 0 0 5px #88ccff, 0 0 10px #88ccff, -3px 0 8px #88ccff, 3px 0 8px #88ccff; }
    50% { text-shadow: 0 0 8px #88ccff, 0 0 15px #88ccff, -5px 0 10px #88ccff, 5px 0 10px #88ccff; }
}


/* ============================================
   34. DEMON CORE — Énergie démoniaque
   ============================================ */
.style-demon .demon-circle {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid #8B0000;
    animation: badge-rotate 10s linear infinite;
}
.style-demon .pentagram {
    position: absolute;
    inset: 3px;
    animation: badge-rotate 20s linear infinite reverse;
}
.style-demon .pentagram svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #8B0000;
    stroke-width: 1;
    filter: drop-shadow(0 0 3px #ff0000);
    opacity: 0.5;
}
.style-demon .runes {
    position: absolute;
    inset: -7px;
    animation: runesFloat 8s ease-in-out infinite;
}
.style-demon .rune {
    position: absolute;
    font-size: 10px;
    color: #8B0000;
    text-shadow: 0 0 5px #ff0000;
    animation: runeGlow 2s ease-in-out infinite;
}
.style-demon .rune:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.style-demon .rune:nth-child(2) { top: 20%; right: 5%; animation-delay: 0.4s; }
.style-demon .rune:nth-child(3) { top: 50%; right: -5%; animation-delay: 0.8s; }
.style-demon .rune:nth-child(4) { bottom: 20%; right: 5%; animation-delay: 1.2s; }
.style-demon .rune:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 0.2s; }
.style-demon .rune:nth-child(6) { bottom: 20%; left: 5%; animation-delay: 0.6s; }
.style-demon .rune:nth-child(7) { top: 50%; left: -5%; animation-delay: 1s; }
.style-demon .rune:nth-child(8) { top: 20%; left: 5%; animation-delay: 1.4s; }
@keyframes runeGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}
@keyframes runesFloat {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}
.style-demon .flames {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    overflow: hidden;
}
.style-demon .flame {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 20px;
    background: linear-gradient(0deg, #8B0000, #ff0000, #ff6600, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: demonFlame 0.5s ease-in-out infinite;
    opacity: 0.6;
    filter: blur(1px);
}
.style-demon .flame:nth-child(1) { left: 10%; height: 17px; }
.style-demon .flame:nth-child(2) { left: 25%; height: 22px; animation-delay: 0.1s; }
.style-demon .flame:nth-child(3) { left: 40%; height: 25px; animation-delay: 0.05s; }
.style-demon .flame:nth-child(4) { left: 55%; height: 21px; animation-delay: 0.15s; }
.style-demon .flame:nth-child(5) { left: 70%; height: 19px; animation-delay: 0.08s; }
.style-demon .flame:nth-child(6) { left: 85%; height: 16px; animation-delay: 0.12s; }
@keyframes demonFlame {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.2) scaleX(0.9); }
}
.style-demon .badge-glow-ring {
    inset: 7px;
    border: 2px solid #8B0000;
    box-shadow: 0 0 10px #8B0000, 0 0 20px rgba(139,0,0,0.5), inset 0 0 15px rgba(139,0,0,0.3);
    animation: demonPulse 1s ease-in-out infinite;
}
@keyframes demonPulse {
    0%, 100% { box-shadow: 0 0 10px #8B0000, 0 0 20px rgba(139,0,0,0.5), inset 0 0 15px rgba(139,0,0,0.3); }
    50% { box-shadow: 0 0 18px #ff0000, 0 0 30px rgba(255,0,0,0.6), inset 0 0 20px rgba(139,0,0,0.5); }
}
.style-demon .eyes {
    position: absolute;
    top: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    animation: eyesAppear 5s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}
.style-demon .eye {
    width: 4px;
    height: 2px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
}
@keyframes eyesAppear {
    0%, 40%, 60%, 100% { opacity: 0; }
    45%, 55% { opacity: 1; }
}
.style-demon .level-badge {
    border: 3px solid #8B0000;
    background: radial-gradient(circle, #1a0a0a, #0a0505);
    box-shadow: inset 0 0 20px rgba(139,0,0,0.4), 0 0 20px rgba(139,0,0,0.4);
}
.style-demon .level-number {
    background: linear-gradient(180deg, #ff6666, #ff0000 30%, #8B0000 60%, #4a0000);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255,0,0,0.8));
    animation: demonNumber 1s ease-in-out infinite;
}
@keyframes demonNumber {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255,0,0,0.8)); }
    50% { filter: drop-shadow(0 0 14px rgba(255,0,0,1)) brightness(1.2); }
}