/* ========================================
   MODAL-BACKGROUND-FIX.CSS - Fix fond modal et synchronisation rareté
   ======================================== */

/* Fix 1: Remettre un fond sombre au modal d'inspection */
.modal-overlay {
    background: rgba(0, 0, 0, 0.95) !important;
}

.monster-detail-container,
.monster-reveal-modal,
.mobile-monster-inspect {
    background: #1a1a2e !important;
    border: 3px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* Fix 2: Synchroniser les badges de rareté partout */
.iv-grade,
.mobile-iv-value,
.iv-score-section .iv-grade {
    /* Utiliser les mêmes classes de rareté que les badges */
    padding: 0.5rem 1.5rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Couleurs unifiées pour TOUTES les raretés */
.common,
.iv-grade.common,
.mobile-iv-value.common {
    background: linear-gradient(135deg, #030303, #c2ccdb6c) !important;
    color: white !important;
}

.uncommon,
.iv-grade.uncommon,
.mobile-iv-value.uncommon {
    background: linear-gradient(135deg, #010e09, #00ff156b) !important;
    color: white !important;
}

.rare,
.iv-grade.rare,
.mobile-iv-value.rare {
    background: linear-gradient(135deg, #101e2c, #0173ffb6) !important;
    color: white !important;
}

.epic,
.iv-grade.epic,
.mobile-iv-value.epic {
    background: linear-gradient(135deg, #251742, #7648ff) !important;
    color: white !important;
    animation: pulse-epic 2s ease-in-out infinite;
}

.legendary,
.iv-grade.legendary,
.mobile-iv-value.legendary {
    background: linear-gradient(135deg, #523705, #ffb700) !important;
    color: #000 !important;
    animation: pulse-legendary 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6) !important;
}

/* Fix 3: S'assurer que le score IV utilise la bonne classe */
.iv-score-display {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

.iv-total-score {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: white !important;
}

/* Fix 4: Modal d'éclosion d'œuf */
.egg-opening-container {
    background: #1a1a2e !important;
    padding: 2rem !important;
    border-radius: 20px !important;
}

/* Fix 5: S'assurer que les sections dans le modal ont un fond */
.detailed-stats-container,
.evolution-family,
.monster-info-section {
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 1.5rem !important;
    border-radius: 15px !important;
    margin: 1rem 0 !important;
}

/* Fix 6: Améliorer la lisibilité du texte */
.monster-description {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 1rem !important;
    border-radius: 10px !important;
    color: #e2e8f0 !important;
}

/* Fix 7: S'assurer que le fond mobile est aussi corrigé */
@media (max-width: 768px) {
    .mobile-monster-inspect {
        background: #1a1a2e !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 20px 20px 0 0 !important;
    }
    
    .mobile-monster-stats-sheet {
        background: rgba(0, 0, 0, 0.3) !important;
        padding: 1rem !important;
        border-radius: 15px !important;
    }
}

/* Fix 8: Animation cohérente pour les raretés élevées */
@keyframes pulse-epic {
    0%, 100% {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(139, 92, 246, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulse-legendary {
    0%, 100% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.9);
        transform: scale(1.08);
    }
}

/* Fix 9: Forcer la suppression du badge "COMMON" incorrect */
.iv-score-section .iv-grade {
    display: inline-block !important;
}

/* Si le monstre a une rareté différente, cacher le mauvais badge */
.monster-reveal-modal[data-rarity="uncommon"] .iv-grade.common,
.monster-reveal-modal[data-rarity="rare"] .iv-grade.common,
.monster-reveal-modal[data-rarity="epic"] .iv-grade.common,
.monster-reveal-modal[data-rarity="legendary"] .iv-grade.common {
    display: none !important;
}