/* ========================================
   SYSTÈME DE DESIGN UNIFIÉ
   Basé sur le design de référence de la bannière et des modales
   ======================================== */

/* ========================================
   BOUTONS D'ACTION UNIFIÉS
   ======================================== */

/* Anneau de focus visible et discret (A11y) */
.focus-ring:focus,
button:focus-visible,
a:focus-visible:not(.banner-btn),
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(74,108,247,0.25);
}

/* Style de base pour tous les boutons d'action (alias .modal-btn) */
.btn-action,
.modal-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tag-base-gap);
    padding: var(--tag-base-padding);
    height: var(--tag-base-height);
    border-radius: var(--tag-base-border-radius);
    font-size: var(--tag-base-font-size);
    font-weight: var(--tag-base-font-weight);
    text-decoration: none;
    border: 1px solid;
    cursor: pointer;
    transition: var(--unified-transition);
    backdrop-filter: var(--unified-glass-backdrop);
    -webkit-backdrop-filter: var(--unified-glass-backdrop);
    box-shadow: var(--unified-glass-shadow);
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

body.dark-mode .btn-action,
body.dark-mode .modal-btn {
    background: var(--unified-glass-bg-dark);
    border-color: var(--unified-glass-border-dark);
    box-shadow: var(--unified-glass-shadow-dark);
}

/* Effet de brillance pour tous les boutons d'action (optimisé GPU) */
.btn-action::before,
.modal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--unified-shine-effect);
    transform: translateX(-100%);
    transition: var(--unified-shine-transition);
    will-change: transform;
    pointer-events: none;
    backface-visibility: hidden;
}

.btn-action:hover::before,
.modal-btn:hover::before {
    transform: translateX(100%);
}

/* Effet de brillance spécifique pour les icônes */
.btn-action iconify-icon,
.modal-btn iconify-icon {
    transition: var(--unified-transition);
}

/* Icônes blanches unifiées (lisibilité maximale sur fond glass) */
.modal-btn iconify-icon,
.modal-score-item iconify-icon,
.tag-unified iconify-icon,
#gameModal .modal-platform iconify-icon,
.game-card .game-platform iconify-icon,
.calendar-results-grid .game-card .game-platform iconify-icon {
    color: #ffffff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
    opacity: 1;
}

/* États hover pour tous les boutons d'action */
.btn-action:hover,
.modal-btn:hover {
    /* Flat: aucun changement visuel au hover */
    transform: none;
    text-shadow: inherit;
    backdrop-filter: var(--unified-glass-backdrop);
    -webkit-backdrop-filter: var(--unified-glass-backdrop);
}

.btn-action:active,
.modal-btn:active { transform: none; }

/* Bouton Suivre (alias .modal-btn.follow) */
.btn-action.btn-follow,
.modal-btn.follow {
    background: var(--btn-action-follow);
    border-color: var(--btn-action-follow-border);
    box-shadow: 
        0 4px 16px var(--btn-action-follow-shadow),
        var(--unified-glass-shadow);
}

.btn-action.btn-follow:hover,
.modal-btn.follow:hover { background: var(--btn-action-follow); border-color: var(--btn-action-follow-border); box-shadow: var(--unified-glass-shadow); }

/* Wishlist supprimée: styles conservés non référencés (inutile) */

/* Bouton Partager (alias .modal-btn.share) */
.btn-action.btn-share,
.modal-btn.share {
    background: var(--btn-action-share);
    border-color: var(--btn-action-share-border);
    box-shadow: 
        0 4px 16px var(--btn-action-share-shadow),
        var(--unified-glass-shadow);
}

.btn-action.btn-share:hover,
.modal-btn.share:hover { background: var(--btn-action-share); border-color: var(--btn-action-share-border); box-shadow: var(--unified-glass-shadow); }

/* ========================================
   SCORES ET BADGES UNIFIÉS
   ======================================== */

/* Style de base pour tous les scores et badges (alias .modal-score-item) */
.score-badge,
.modal-score-item {
    display: flex;
    align-items: center;
    gap: var(--tag-base-gap);
    padding: var(--tag-base-padding);
    height: var(--tag-base-height);
    border-radius: var(--tag-base-border-radius);
    font-size: var(--tag-base-font-size);
    font-weight: var(--tag-base-font-weight);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    background: var(--unified-glass-bg);
    border: 1px solid var(--unified-glass-border);
    backdrop-filter: var(--unified-glass-backdrop);
    -webkit-backdrop-filter: var(--unified-glass-backdrop);
    transition: var(--unified-transition);
    cursor: pointer;
    box-shadow: var(--unified-glass-shadow);
    position: relative;
    overflow: hidden;
}

body.dark-mode .score-badge,
body.dark-mode .modal-score-item {
    background: var(--unified-glass-bg-dark);
    border-color: var(--unified-glass-border-dark);
    box-shadow: var(--unified-glass-shadow-dark);
}

/* Effet de brillance pour les scores */
.score-badge::before,
.modal-score-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--unified-shine-effect);
    transition: var(--unified-shine-transition);
    pointer-events: none;
}

.score-badge:hover::before,
.modal-score-item:hover::before { left: 100%; }

/* Effet de brillance pour les icônes dans les scores */
.score-badge iconify-icon,
.score-badge img,
.modal-score-item iconify-icon,
.modal-score-item img {
    position: relative;
    overflow: hidden;
    transition: var(--unified-transition);
}

.score-badge iconify-icon::before,
.score-badge img::before,
.modal-score-item iconify-icon::before,
.modal-score-item img::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--unified-icon-shine-effect);
    transition: var(--unified-icon-shine-transition);
    pointer-events: none;
    z-index: 1;
}

.score-badge:hover iconify-icon::before,
.score-badge:hover img::before,
.modal-score-item:hover iconify-icon::before,
.modal-score-item:hover img::before {
    left: 100%;
}

.score-badge:hover,
.modal-score-item:hover { background: inherit; border-color: inherit; box-shadow: inherit; transform: none; text-shadow: inherit; }

/* Badge Metacritic (alias .modal-score-item.metacritic) */
.score-badge.score-metacritic,
.modal-score-item.metacritic {
    background: var(--metacritic-bg-high);
    border-color: var(--metacritic-border-high);
    box-shadow: 
        0 4px 16px var(--metacritic-shadow-high),
        var(--unified-glass-shadow);
}

.score-badge.score-metacritic:hover,
.modal-score-item.metacritic:hover {
    background: var(--metacritic-bg-medium);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px var(--metacritic-shadow-medium),
        var(--unified-glass-shadow-hover);
}

/* Badge OpenCritic (alias .modal-score-item.opencritic) */
.score-badge.score-opencritic,
.modal-score-item.opencritic {
    background: rgba(255, 69, 0, 0.2);
    border-color: rgba(255, 69, 0, 0.3);
    box-shadow: 
        0 4px 16px rgba(255, 69, 0, 0.15),
        var(--unified-glass-shadow);
}

.score-badge.score-opencritic:hover,
.modal-score-item.opencritic:hover {
    background: rgba(255, 99, 71, 0.3);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(255, 99, 71, 0.25),
        var(--unified-glass-shadow-hover);
}

/* Badge HLTB (alias .modal-score-item.hltb) */
.score-badge.score-hltb,
.modal-score-item.hltb {
    background: rgba(139, 72, 136, 0.2);
    border-color: rgba(139, 72, 136, 0.3);
    box-shadow: 
        0 4px 16px rgba(139, 72, 136, 0.15),
        var(--unified-glass-shadow);
}

.score-badge.score-hltb:hover,
.modal-score-item.hltb:hover {
    background: rgba(155, 90, 154, 0.3);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(155, 90, 154, 0.25),
        var(--unified-glass-shadow-hover);
}

/* Éviter le double effet de brillance (icône + badge) pour HLTB */
.modal-score-item.hltb iconify-icon::before,
.modal-score-item.hltb img::before { content: none; }

/* ========================================
   TAGS UNIFIÉS - SYSTÈME COMPLET
   ======================================== */

/* Style de base unifié pour tous les tags (genres, plateformes, stores) */
.tag-unified,
#gameModal .modal-platform,
.modal-tag-base {
    display: inline-flex;
    align-items: center;
    gap: var(--tag-base-gap);
    padding: var(--tag-base-padding);
    height: var(--tag-base-height);
    border-radius: var(--tag-base-border-radius);
    font-size: var(--tag-base-font-size);
    font-weight: var(--tag-base-font-weight);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    border: 1px solid var(--unified-glass-border);
    backdrop-filter: var(--unified-glass-backdrop);
    -webkit-backdrop-filter: var(--unified-glass-backdrop);
    transition: var(--unified-transition);
    cursor: pointer;
    box-shadow: var(--unified-glass-shadow);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

body.dark-mode .tag-unified,
body.dark-mode #gameModal .modal-platform,
body.dark-mode .modal-tag-base {
    border-color: var(--unified-glass-border-dark);
    box-shadow: var(--unified-glass-shadow-dark);
}

/* Effet de brillance pour tous les tags */
.tag-unified::before,
#gameModal .modal-platform::before,
.modal-tag-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--unified-shine-effect);
    transition: var(--unified-shine-transition);
    pointer-events: none;
}

.tag-unified:hover::before,
#gameModal .modal-platform:hover::before,
.modal-tag-base:hover::before { left: -100%; }

/* Icônes dans les tags */
.tag-unified iconify-icon,
#gameModal .modal-platform iconify-icon,
.modal-tag-base iconify-icon {
    transition: var(--unified-transition);
    margin-right: 6px;
    font-size: 1em;
}

/* États hover pour tous les tags */
.tag-unified:hover,
#gameModal .modal-platform:hover,
.modal-tag-base:hover { transform: none; text-shadow: inherit; backdrop-filter: var(--unified-glass-backdrop); -webkit-backdrop-filter: var(--unified-glass-backdrop); }

.tag-unified:active,
#gameModal .modal-platform:active,
.modal-tag-base:active { transform: none; }

/* ========================================
   TAGS DE GENRE - STYLES CENTRALISÉS DANS genre-tags.css
   ======================================== */

/* ========================================
   TAGS DE PLATEFORME - COULEURS DOUCES ET TRANSPARENTES
   ======================================== */

/* PlayStation */
.tag-unified.tag-platform-playstation {
    background: var(--tag-platform-playstation);
    border-color: rgba(0, 112, 209, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 112, 209, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-playstation:hover {
    background: rgba(0, 112, 209, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 112, 209, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Xbox */
.tag-unified.tag-platform-xbox {
    background: var(--tag-platform-xbox);
    border-color: rgba(16, 124, 16, 0.2);
    box-shadow: 
        0 4px 16px rgba(16, 124, 16, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-xbox:hover {
    background: rgba(16, 124, 16, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(16, 124, 16, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Nintendo */
.tag-unified.tag-platform-nintendo {
    background: var(--tag-platform-nintendo);
    border-color: rgba(230, 0, 18, 0.2);
    box-shadow: 
        0 4px 16px rgba(230, 0, 18, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-nintendo:hover {
    background: rgba(230, 0, 18, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(230, 0, 18, 0.15),
        var(--unified-glass-shadow-hover);
}

/* PC */
.tag-unified.tag-platform-pc {
    background: var(--tag-platform-pc);
    border-color: rgba(79, 84, 92, 0.2);
    box-shadow: 
        0 4px 16px rgba(79, 84, 92, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-pc:hover {
    background: rgba(79, 84, 92, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(79, 84, 92, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Windows */
.tag-unified.tag-platform-windows {
    background: var(--tag-platform-windows);
    border-color: rgba(0, 120, 212, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 120, 212, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-windows:hover {
    background: rgba(0, 120, 212, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 120, 212, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Linux */
.tag-unified.tag-platform-linux {
    background: var(--tag-platform-linux);
    border-color: rgba(221, 72, 20, 0.2);
    box-shadow: 
        0 4px 16px rgba(221, 72, 20, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-linux:hover {
    background: rgba(221, 72, 20, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(221, 72, 20, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Mac */
.tag-unified.tag-platform-mac {
    background: var(--tag-platform-mac);
    border-color: rgba(153, 153, 153, 0.2);
    box-shadow: 
        0 4px 16px rgba(153, 153, 153, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-mac:hover {
    background: rgba(153, 153, 153, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(153, 153, 153, 0.15),
        var(--unified-glass-shadow-hover);
}

/* iOS */
.tag-unified.tag-platform-ios {
    background: var(--tag-platform-ios);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 122, 255, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-ios:hover {
    background: rgba(0, 122, 255, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 122, 255, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Android */
.tag-unified.tag-platform-android {
    background: var(--tag-platform-android);
    border-color: rgba(164, 198, 57, 0.2);
    box-shadow: 
        0 4px 16px rgba(164, 198, 57, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-android:hover {
    background: rgba(164, 198, 57, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(164, 198, 57, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Mobile */
.tag-unified.tag-platform-mobile {
    background: var(--tag-platform-mobile);
    border-color: rgba(255, 153, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(255, 153, 0, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-mobile:hover {
    background: rgba(255, 153, 0, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(255, 153, 0, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Web */
.tag-unified.tag-platform-web {
    background: var(--tag-platform-web);
    border-color: rgba(23, 162, 184, 0.2);
    box-shadow: 
        0 4px 16px rgba(23, 162, 184, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-platform-web:hover {
    background: rgba(23, 162, 184, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(23, 162, 184, 0.15),
        var(--unified-glass-shadow-hover);
}

/* ========================================
   TAGS DE STORES - COULEURS DOUCES ET TRANSPARENTES
   ======================================== */

/* Steam */
.tag-unified.tag-store-steam {
    background: var(--tag-store-steam);
    border-color: rgba(27, 40, 56, 0.2);
    box-shadow: 
        0 4px 16px rgba(27, 40, 56, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-steam:hover {
    background: rgba(27, 40, 56, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(27, 40, 56, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Epic */
.tag-unified.tag-store-epic {
    background: var(--tag-store-epic);
    border-color: rgba(18, 18, 18, 0.2);
    box-shadow: 
        0 4px 16px rgba(18, 18, 18, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-epic:hover {
    background: rgba(18, 18, 18, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(18, 18, 18, 0.15),
        var(--unified-glass-shadow-hover);
}

/* GOG */
.tag-unified.tag-store-gog {
    background: var(--tag-store-gog);
    border-color: rgba(138, 67, 163, 0.2);
    box-shadow: 
        0 4px 16px rgba(138, 67, 163, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-gog:hover {
    background: rgba(138, 67, 163, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(138, 67, 163, 0.15),
        var(--unified-glass-shadow-hover);
}

/* PlayStation Store */
.tag-unified.tag-store-playstation {
    background: var(--tag-store-playstation);
    border-color: rgba(0, 112, 209, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 112, 209, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-playstation:hover {
    background: rgba(0, 112, 209, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 112, 209, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Xbox Store */
.tag-unified.tag-store-xbox {
    background: var(--tag-store-xbox);
    border-color: rgba(16, 124, 16, 0.2);
    box-shadow: 
        0 4px 16px rgba(16, 124, 16, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-xbox:hover {
    background: rgba(16, 124, 16, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(16, 124, 16, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Nintendo Store */
.tag-unified.tag-store-nintendo {
    background: var(--tag-store-nintendo);
    border-color: rgba(230, 0, 18, 0.2);
    box-shadow: 
        0 4px 16px rgba(230, 0, 18, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-nintendo:hover {
    background: rgba(230, 0, 18, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(230, 0, 18, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Apple App Store */
.tag-unified.tag-store-apple {
    background: var(--tag-store-apple);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 122, 255, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-apple:hover {
    background: rgba(0, 122, 255, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 122, 255, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Google Play */
.tag-unified.tag-store-googleplay {
    background: var(--tag-store-googleplay);
    border-color: rgba(164, 198, 57, 0.2);
    box-shadow: 
        0 4px 16px rgba(164, 198, 57, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-googleplay:hover {
    background: rgba(164, 198, 57, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(164, 198, 57, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Itch.io */
.tag-unified.tag-store-itch {
    background: var(--tag-store-itch);
    border-color: rgba(250, 92, 92, 0.2);
    box-shadow: 
        0 4px 16px rgba(250, 92, 92, 0.1),
        var(--unified-glass-shadow);
}

.tag-unified.tag-store-itch:hover {
    background: rgba(250, 92, 92, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(250, 92, 92, 0.15),
        var(--unified-glass-shadow-hover);
}

/* ========================================
   ICÔNES DE PLATEFORME DANS LES MODALES
   ======================================== */

/* Application du design unifié aux icônes de plateforme dans les modales */
/* On garde la forme de .modal-tag-base mais on applique les couleurs et effets */

/* Effet de brillance */
#gameModal .modal-platform[class*="platform-tag-"]::before,
#gameModal .modal-platform[class*="store-tag-"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--unified-shine-effect);
    transition: var(--unified-shine-transition);
    z-index: 1;
}

/* Hover states - on garde seulement les effets de brillance */
#gameModal .modal-platform[class*="platform-tag-"]:hover::before,
#gameModal .modal-platform[class*="store-tag-"]:hover::before {
    left: 100%;
}

/* Icônes dans les modales */
#gameModal .modal-platform-icon {
    color: #ffffff;
    opacity: 0.9;
    position: relative;
    z-index: 3;
}

/* Taille de texte augmentée pour les tags de plateforme dans les modales */
#gameModal .modal-platform[class*="platform-tag-"],
#gameModal .modal-platform[class*="store-tag-"] {
    font-size: 0.95rem;
}

/* Couleurs spécifiques par plateforme avec le design unifié - style transparent */
#gameModal .modal-platform.platform-tag-pc {
    background: rgba(0, 120, 215, 0.15);
    border-color: rgba(0, 120, 215, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 120, 215, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-windows {
    background: rgba(0, 120, 215, 0.15);
    border-color: rgba(0, 120, 215, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 120, 215, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-linux {
    background: rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(255, 140, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-mac {
    background: rgba(0, 122, 255, 0.15);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 122, 255, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-playstation {
    background: rgba(0, 112, 184, 0.15);
    border-color: rgba(0, 112, 184, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 112, 184, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-xbox {
    background: rgba(107, 190, 0, 0.15);
    border-color: rgba(107, 190, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(107, 190, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-nintendo {
    background: rgba(230, 0, 0, 0.15);
    border-color: rgba(230, 0, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(230, 0, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-mobile {
    background: rgba(156, 39, 176, 0.15);
    border-color: rgba(156, 39, 176, 0.2);
    box-shadow: 
        0 4px 16px rgba(156, 39, 176, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-ios {
    background: rgba(0, 122, 255, 0.15);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 122, 255, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-android {
    background: rgba(61, 220, 132, 0.15);
    border-color: rgba(61, 220, 132, 0.2);
    box-shadow: 
        0 4px 16px rgba(61, 220, 132, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-web {
    background: rgba(66, 133, 244, 0.15);
    border-color: rgba(66, 133, 244, 0.2);
    box-shadow: 
        0 4px 16px rgba(66, 133, 244, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.platform-tag-generic {
    background: rgba(128, 128, 128, 0.15);
    border-color: rgba(128, 128, 128, 0.2);
    box-shadow: 
        0 4px 16px rgba(128, 128, 128, 0.1),
        var(--unified-glass-shadow);
}

/* Stores - style transparent */
#gameModal .modal-platform.store-tag-steam {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-epic-games-store,
#gameModal .modal-platform.store-tag-epic {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-gog {
    background: rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(255, 140, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-playstation-store,
#gameModal .modal-platform.store-tag-playstation {
    background: rgba(0, 112, 184, 0.15);
    border-color: rgba(0, 112, 184, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 112, 184, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-xbox-store,
#gameModal .modal-platform.store-tag-xbox {
    background: rgba(107, 190, 0, 0.15);
    border-color: rgba(107, 190, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(107, 190, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-nintendo {
    background: rgba(230, 0, 0, 0.15);
    border-color: rgba(230, 0, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(230, 0, 0, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-apple-appstore,
#gameModal .modal-platform.store-tag-apple {
    background: rgba(0, 122, 255, 0.15);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 122, 255, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-google-play,
#gameModal .modal-platform.store-tag-googleplay {
    background: rgba(164, 198, 57, 0.15);
    border-color: rgba(164, 198, 57, 0.2);
    box-shadow: 
        0 4px 16px rgba(164, 198, 57, 0.1),
        var(--unified-glass-shadow);
}

#gameModal .modal-platform.store-tag-itch,
#gameModal .modal-platform.store-tag-itchio {
    background: rgba(250, 92, 92, 0.15);
    border-color: rgba(250, 92, 92, 0.2);
    box-shadow: 
        0 4px 16px rgba(250, 92, 92, 0.1),
        var(--unified-glass-shadow);
}

/* Hover states pour les couleurs spécifiques - style transparent */
#gameModal .modal-platform.platform-tag-pc:hover,
#gameModal .modal-platform.platform-tag-windows:hover {
    background: rgba(0, 120, 215, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 120, 215, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-linux:hover {
    background: rgba(255, 140, 0, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(255, 140, 0, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-mac:hover {
    background: rgba(0, 122, 255, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 122, 255, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-playstation:hover {
    background: rgba(0, 112, 184, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 112, 184, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-xbox:hover {
    background: rgba(107, 190, 0, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(107, 190, 0, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-nintendo:hover {
    background: rgba(230, 0, 0, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(230, 0, 0, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-mobile:hover {
    background: rgba(156, 39, 176, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(156, 39, 176, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-ios:hover {
    background: rgba(0, 122, 255, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(0, 122, 255, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-android:hover {
    background: rgba(61, 220, 132, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(61, 220, 132, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-web:hover {
    background: rgba(66, 133, 244, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(66, 133, 244, 0.15),
        var(--unified-glass-shadow-hover);
}

#gameModal .modal-platform.platform-tag-generic:hover {
    background: rgba(128, 128, 128, 0.25);
    border-color: var(--primary);
    box-shadow: 
        0 6px 20px rgba(128, 128, 128, 0.15),
        var(--unified-glass-shadow-hover);
}

/* Responsive design géré par .modal-tag-base */

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .btn-action,
    .score-badge {
        height: 28px;
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }
}

@media (max-width: 576px) {
    .btn-action,
    .score-badge {
        height: 24px;
        padding: 4px 8px;
        font-size: 10px;
        gap: 3px;
    }
} 



/* ======================================== */