/* ========================================
   Team Overlay V2 - SIMPLIFIED for debugging
   Remove all complex features
   ======================================== */

.team-overlay-v2 {
    /* Absolute position to overlay stats section */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Beautiful gradient background */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(10, 14, 39, 0.93) 100%
    ) !important;
    
    /* Border follows theme color */
    border: 2px solid var(--primary-color) !important;
    border-radius: 15px !important;
    
    /* High z-index to be on top of stats */
    z-index: 100 !important;
    
    /* Flexbox centering */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 40px !important;
    
    /* Start hidden, will fade in - NO !important to allow JS override */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease;
}

.team-group-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

.team-grid-v2 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 60px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    
    /* Start with scale effect - NO !important to allow JS animation */
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s ease;
}

.team-card-v2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 20px !important;
    
    /* Make sure nothing covers the image */
    position: relative !important;
    z-index: 1 !important;
}

.team-avatar-wrapper-v2 {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    
    /* Border follows theme color */
    border: 3px solid var(--primary-color) !important;
    /* NO padding - let image fill the space */
    padding: 0 !important;
    
    /* Transparent background - don't cover image */
    background: transparent !important;
    
    /* Glow effect follows theme color */
    box-shadow: 0 0 20px var(--glow-color) !important;
    
    /* Ensure proper layering */
    position: relative !important;
    overflow: hidden !important;
    
    /* Smooth transition for hover */
    transition: all 0.3s ease !important;
}

.team-avatar-wrapper-v2:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 35px var(--glow-color) !important;
}

.team-avatar-v2 {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #333 !important;
    
    /* Brightness filter */
    filter: brightness(1.2) contrast(1.1) !important;
    
    /* FORCE visible */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Make sure z-index is correct */
    position: relative !important;
    z-index: 1 !important;
}

/* Debug helper - add visible border to everything */
.team-overlay-v2 * {
    box-sizing: border-box !important;
}

/* ========================================
   GROUP PHOTO MODE (12h00-12h15)
   All 27 avatars displayed together
   ======================================== */

.team-photo-title {
    text-align: center !important;
    margin-bottom: 30px !important;
    animation: pulse 2s ease-in-out infinite !important;
}

.team-photo-title h2 {
    font-size: 48px !important;
    color: var(--primary-color) !important;
    text-shadow: 0 0 20px var(--glow-color) !important;
    margin-bottom: 10px !important;
    font-family: 'Orbitron', monospace !important;
    font-weight: 700 !important;
}

.team-photo-title p {
    font-size: 24px !important;
    color: var(--secondary-color) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
}

.team-grid-v2-photo {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1800px !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 20px !important;
    
    /* Start with scale effect */
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s ease;
}

.team-card-v2-compact {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

.team-avatar-wrapper-v2-compact {
    width: 85px !important;
    height: 85px !important;
    border-radius: 50% !important;
    
    /* Border follows theme color */
    border: 2px solid var(--primary-color) !important;
    padding: 0 !important;
    background: transparent !important;
    
    /* Glow effect */
    box-shadow: 0 0 15px var(--glow-color) !important;
    
    /* Layering */
    position: relative !important;
    overflow: hidden !important;
    
    /* Smooth transition */
    transition: all 0.3s ease !important;
}

.team-avatar-wrapper-v2-compact:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 0 25px var(--glow-color) !important;
    z-index: 10 !important;
}

/* Pulse animation for title */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}