/* Spectator Mode Styles */

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 15px rgba(0,255,255,0.3); }
    50% { box-shadow: 0 0 30px rgba(0,255,255,0.6); }
}

/* Session Cards */
.session-card {
    /* Animation removed to prevent flickering on updates */
}

.session-card:hover {
    animation: glow 2s infinite;
}

/* Counter Animation - Smooth number transitions */
#spec-score, #spec-level, #spec-stat-killed, #spec-stat-missed, #spec-stat-active, #spec-stat-bots {
    transition: all 0.5s ease;
}

/* Pulse Animation for Critical States */
@keyframes criticalPulse {
    0%, 100% {
        border-color: #f00;
        box-shadow: 0 0 10px #f00;
    }
    50% {
        border-color: #ff8800;
        box-shadow: 0 0 30px #f00;
    }
}

/* Apply critical pulse to energy bar when low */
#spec-energy-bar[style*="width: 0%"],
#spec-energy-bar[style*="width: 1%"],
#spec-energy-bar[style*="width: 2%"] {
    animation: criticalPulse 1s infinite;
}

/* Spectator Overlay Background */
#spectator-overlay {
    font-family: 'Arial', sans-serif;
    backdrop-filter: blur(10px);
}

/* Events Feed Styling */
#spec-events div {
    padding: 8px 12px;
    background: rgba(0,255,255,0.05);
    border-left: 3px solid #00ffff;
    border-radius: 4px;
}

/* Scrollbar Styling */
#spec-events::-webkit-scrollbar {
    width: 8px;
}

#spec-events::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

#spec-events::-webkit-scrollbar-thumb {
    background: #00ffff;
    border-radius: 4px;
}

#spec-events::-webkit-scrollbar-thumb:hover {
    background: #0ff;
}

/* Session Empty State Animation */
@keyframes sessionPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

#session-empty p {
    animation: sessionPulse 2s infinite;
}

/* Button Hover Effects */
#close-watch-btn:hover,
#close-spectator-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.05);
    transition: all 0.3s;
}

/* Responsive Grid */
@media (max-width: 768px) {
    #session-list {
        grid-template-columns: 1fr !important;
    }
    
    #spectator-overlay > div {
        padding: 15px;
    }
    
    #spectator-overlay > div > div:nth-child(2) {
        flex-direction: column;
    }
}