/* ===============================================
   🎮 THEBLINDTEST - INTERFACE GAMING MODERNE 🎮
   Design glassmorphism harmonieux avec l'existant
   =============================================== */

:root {
    --primary-color: #1DB954;
    --primary-hover: #1CD85E;
    --secondary-color: #ff6b6b;
    --accent-color: #4ecdc4;
    --warning-color: #ffd93d;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --shadow-glow: 0 4px 20px rgba(29, 185, 84, 0.2);
    --shadow-soft: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* ===== AMÉLIORATIONS SUBTILES DES PANNEAUX ===== */
#classementJoueurs, #listeChansons, #chatRoom {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all 0.3s ease !important;
}

/* ===== BOUTONS GAMING AMÉLIORÉS ===== */
button:not(.swal2-confirm):not(.swal2-cancel):not([class*="swal"]), 
.btn:not(.swal2-confirm):not(.swal2-cancel):not([class*="swal"]) {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

button:not(.swal2-confirm):not(.swal2-cancel):not([class*="swal"]):hover, 
.btn:not(.swal2-confirm):not(.swal2-cancel):not([class*="swal"]):hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
    box-shadow: var(--shadow-glow) !important;
    transform: translateY(-1px) !important;
}

/* ===== INPUTS GAMING ===== */
#songGuess, #sendChat {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    border: 2px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

#songGuess:focus, #sendChat:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 20px rgba(29, 185, 84, 0.2) !important;
    background: rgba(29, 185, 84, 0.05) !important;
}

/* ===== TITRES AVEC STYLE ===== */
.titreBlock {
    background: linear-gradient(135deg, var(--glass-bg), rgba(29, 185, 84, 0.1)) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid var(--primary-color) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

/* ===== VIGNETTES ROOMS GAMING ===== */
.vignetteRoom {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 2px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.vignetteRoom:hover {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-glow) !important;
    transform: translateY(-3px) !important;
}

/* ===== CLASSEMENT MODERNE ===== */
.nomJoueurClassement, .classementShow {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

.nomJoueurClassement:hover, .classementShow:hover {
    background: rgba(29, 185, 84, 0.1) !important;
    transform: translateX(3px) !important;
}

/* ===== CHRONO STYLÉ ===== */
#time {
    color: var(--text-primary) !important;
    text-shadow: 0 2px 15px rgba(29, 185, 84, 0.4) !important;
    font-weight: 900 !important;
    transition: all 0.3s ease !important;
}

/* ===== POPUPS SWEETALERT2 GAMING ===== */
.swal2-popup {
    background: linear-gradient(145deg, rgba(0,0,0,0.9), rgba(29, 185, 84, 0.1)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-glow) !important;
}

.swal2-title {
    color: var(--text-primary) !important;
    text-shadow: 0 2px 10px rgba(29, 185, 84, 0.3) !important;
}

.swal2-content {
    color: var(--text-secondary) !important;
}

/* ===== CONTENEURS PRINCIPAUX ===== */
#main, #main2 {
    backdrop-filter: blur(15px) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glow) !important;
}

#cadreMain2 {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* ===== RESPONSIVE FIXES ===== */
@media (max-width: 768px) {
    .vignetteRoom {
        margin: 8px !important;
        padding: 15px 12px !important;
    }
    
    .titreBlock {
        padding: 10px 12px !important;
        font-size: 0.9em !important;
    }
    
    button, .btn {
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    .nomJoueurClassement, .classementShow {
        padding: 12px 10px !important;
        margin: 6px 0 !important;
    }
}

@media (max-width: 480px) {
    .vignetteRoom {
        margin: 6px !important;
        padding: 12px 10px !important;
    }
    
    .titreBlock {
        padding: 8px 10px !important;
        font-size: 0.85em !important;
    }
    
    button, .btn {
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
}

/* ===== ANIMATIONS DOUCES ===== */
@keyframes pulseGlow {
    0%, 100% { box-shadow: var(--shadow-soft); }
    50% { box-shadow: var(--shadow-glow); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-2px); }
}

.pulse-animation {
    animation: pulseGlow 2s ease-in-out infinite;
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}