/* ========================================
   MONSTER-DISPLAY-FIX.CSS - Corrections affichage des monstres
   ======================================== */

/* Fix 1: Supprimer TOUTES les couleurs de fond des cartes */
.monster-display,
.monster-image-wrapper,
.monster-card-img {
    background: transparent !important;
}

/* Supprimer les bordures colorées aussi */
.monster-display {
    border: none !important;
}

/* Fix 2: Background de la section - Garder le noir */
.monsters-section {
    background: #000000 !important;
}

/* Fix 3: Enlever TOUS les fonds colorés selon la rareté */
.monster-display.common,
.monster-display.uncommon,
.monster-display.rare,
.monster-display.epic,
.monster-display.legendary {
    background: transparent !important;
    border: none !important;
}

/* Enlever les glows colorés autour des images */
.monster-image-wrapper {
    background: transparent !important;
    box-shadow: none !important;
}

/* Fix 4: Garder seulement un léger glow blanc au hover */
.monster-display:hover .monster-image-wrapper {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 60%
    ) !important;
}

/* Fix 4: S'assurer que le nom n'apparaît qu'une fois, sous l'image */
.monster-info {
    background: transparent !important;
}

.monster-name {
    /* Le nom doit être visible et bien stylé */
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-align: center;
    margin-top: 0.5rem;
}

/* Fix 5: Badge de rareté plus visible sur fond noir */
.rarity-badge {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    font-size: 0.7rem !important;
}

/* Fix 6: Stats IV plus visibles sur fond noir */
.monster-quick-stats span {
    background: rgba(147, 51, 234, 0.3) !important;
    border: 1px solid rgba(147, 51, 234, 0.5);
    color: #fff !important;
}

/* Fix 7: Enlever tout fond gris des sous-éléments */
.monster-display * {
    background-color: transparent !important;
}

/* Exceptions pour les éléments qui doivent avoir un fond */
.rarity-badge,
.monster-quick-stats span {
    /* Ces éléments gardent leur fond défini ci-dessus */
}

/* Fix 8: Améliorer le hover sur fond noir */
.monster-display:hover .monster-image-wrapper {
    background: radial-gradient(
        ellipse at center,
        rgba(147, 51, 234, 0.2) 0%,
        rgba(147, 51, 234, 0.1) 40%,
        transparent 70%
    ) !important;
}

/* Fix 9: S'assurer que seule l'image du monstre est visible dans le wrapper */
.monster-image-wrapper > * {
    display: none !important;
}

.monster-image-wrapper > .monster-card-img {
    display: block !important;
}

/* Fix 10: Nettoyer l'affichage mobile aussi */
@media (max-width: 768px) {
    .monster-display {
        padding: 0 !important;
    }
    
    .monster-name {
        font-size: 1rem !important;
        padding: 0 0.5rem;
    }
    
    .rarity-badge {
        top: 8px !important;
        right: 8px !important;
        font-size: 0.6rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* Fix 11: Forcer le calcul de rareté à s'appliquer visuellement */
.monster-card-img {
    /* Aura colorée selon la rareté */
    border-radius: 15px;
}

/* ENLEVER tous les drop-shadow colorés */
.monster-display:has(.legendary) .monster-card-img,
.monster-display:has(.epic) .monster-card-img,
.monster-display:has(.rare) .monster-card-img,
.monster-card-img.legendary,
.monster-card-img.epic,
.monster-card-img.rare {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) !important;
}

/* Fix 12: Titre de section sur fond noir */
.monsters-section .section-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(147, 51, 234, 0.5);
}

/* Fix 13: Forcer la suppression des fonds colorés même avec !important */
[class*="monster"] {
    background-color: transparent !important;
    background-image: none !important;
}

/* Exceptions pour les badges de rareté qui doivent garder leur couleur */
.rarity-badge {
    /* Les badges gardent leurs couleurs */
}

/* Fix 14: S'assurer que les cartes sont bien noires/transparentes */
.monster-image-wrapper,
.monster-display,
.monster-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}