/* 
 * Styles pour les icônes de rôles des agents Valorant
 * Utilise des SVG intégrés pour éviter de dépendre des images
 */

/* Conteneur d'icône de rôle */
.role-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icône de Duelliste */
.duelist-icon {
    background-color: #FE4655;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 2L9 3.5 11 5.5 9 7.5 10.5 9 14 5.5 10.5 2zM5.5 10L2 13.5 5.5 17 7 15.5 5 13.5 7 11.5 5.5 10zM18.5 10L17 11.5 19 13.5 17 15.5 18.5 17 22 13.5 18.5 10zM13.5 15L10 18.5 13.5 22 15 20.5 13 18.5 15 16.5 13.5 15z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 2L9 3.5 11 5.5 9 7.5 10.5 9 14 5.5 10.5 2zM5.5 10L2 13.5 5.5 17 7 15.5 5 13.5 7 11.5 5.5 10zM18.5 10L17 11.5 19 13.5 17 15.5 18.5 17 22 13.5 18.5 10zM13.5 15L10 18.5 13.5 22 15 20.5 13 18.5 15 16.5 13.5 15z'/%3E%3C/svg%3E");
}

/* Icône de Contrôleur */
.controller-icon {
    background-color: #00C8C8;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-9h10v2H7z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-9h10v2H7z'/%3E%3C/svg%3E");
}

/* Icône d'Initiateur */
.initiator-icon {
    background-color: #FFCE2E;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 12c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1zm5 0c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1zm-5-9c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5h2.75c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-7 9c0-3.87 3.13-7 7-7s7 3.13 7 7c0 1.66-1.34 3-3 3h-2.75c-1.66 0-3 1.34-3 3 0 .55.45 1 1 1h-0.25c-3.87 0-7-3.13-7-7z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 12c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1zm5 0c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1zm-5-9c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5h2.75c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-7 9c0-3.87 3.13-7 7-7s7 3.13 7 7c0 1.66-1.34 3-3 3h-2.75c-1.66 0-3 1.34-3 3 0 .55.45 1 1 1h-0.25c-3.87 0-7-3.13-7-7z'/%3E%3C/svg%3E");
}

/* Icône de Sentinelle */
.sentinel-icon {
    background-color: #7C66FF;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l7 3.12v4.7c0 4.67-3.13 8.96-7 10.19-3.87-1.23-7-5.52-7-10.19V6.3l7-3.12z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l7 3.12v4.7c0 4.67-3.13 8.96-7 10.19-3.87-1.23-7-5.52-7-10.19V6.3l7-3.12z'/%3E%3C/svg%3E");
}

/* Styles pour les boutons de filtre */
.filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Légende des agents */
.agent-legend {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.agent-card:hover .agent-legend {
    max-height: 100px;
}

/* Animation pour les cartes d'agents */
.agent-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.agent-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.agent-card:hover::before {
    opacity: 0.2;
}

.agent-card-image {
    transition: transform 0.5s ease;
}

.agent-card:hover .agent-card-image {
    transform: scale(1.05);
}

/* Styles pour les capacités */
.agent-card-abilities {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.agent-card-ability {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-card-ability:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--primary-color);
    z-index: 2;
}

.agent-card-ability img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}