<!-- Death State Interface -->
<div class="space-y-6">
    
    <!-- Death Header -->
    <div class="cyber-card p-6 border border-cyber-danger/50 bg-red-900/30">
        <div class="text-center">
            <div class="cyber-terminal mb-4">
                <span class="cyber-text-danger text-2xl font-bold">💀 SYSTEM TERMINATED 💀</span>
            </div>
            <div class="text-lg cyber-text-secondary mb-2">
                Your neural link has been severed
            </div>
            <div class="text-sm cyber-text-muted">
                Connection to the virtual reality matrix lost
            </div>
        </div>
    </div>
    
    <!-- Death Information -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="cyber-text-primary font-cyber mb-4">TERMINATION REPORT</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div>
                <div class="cyber-text-secondary">Status</div>
                <div class="cyber-text-danger font-bold">TERMINATED</div>
            </div>
            <div>
                <div class="cyber-text-secondary">Final Location</div>
                <div class="cyber-text-primary">$plsinfo[$pls]</div>
            </div>
            <div>
                <div class="cyber-text-secondary">Survival Time</div>
                <div class="cyber-text-primary">
                    <!--{if isset($getime) && isset($gstime)}-->
                        <!--{eval $survival_time = $getime - $gstime;}-->
                        <!--{eval $hours = floor($survival_time / 3600);}-->
                        <!--{eval $minutes = floor(($survival_time % 3600) / 60);}-->
                        <!--{eval $seconds = $survival_time % 60;}-->
                        {$hours}h {$minutes}m {$seconds}s
                    <!--{else}-->
                        Unknown
                    <!--{/if}-->
                </div>
            </div>
            <div>
                <div class="cyber-text-secondary">Eliminations</div>
                <div class="cyber-text-primary">$killnum</div>
            </div>
        </div>
    </div>
    
    <!-- Death Cause -->
    <!--{if isset($deathmsg) && $deathmsg}-->
    <div class="cyber-card p-4 border border-cyber-warning/30">
        <h3 class="cyber-text-warning font-cyber mb-4">CAUSE OF TERMINATION</h3>
        <div class="cyber-terminal p-3">
            <div class="cyber-text-primary">$deathmsg</div>
        </div>
    </div>
    <!--{/if}-->
    
    <!-- Spectator Options -->
    <div class="cyber-card p-4 border border-cyber-accent/30">
        <h3 class="cyber-text-accent font-cyber mb-4">SPECTATOR MODE</h3>
        <div class="space-y-3">
            <div class="text-sm cyber-text-secondary">
                You can continue to observe the ongoing simulation while waiting for the next session.
            </div>
            
            <!-- Spectator Actions -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <button class="cyber-btn cyber-btn-primary h-12 flex flex-col items-center justify-center"
                        onclick="window.location.reload();">
                    <div class="text-sm">🔄 REFRESH</div>
                </button>
                
                <button class="cyber-btn cyber-btn-secondary h-12 flex flex-col items-center justify-center"
                        onclick="window.open('alive.php', '_blank');">
                    <div class="text-sm">👥 SURVIVORS</div>
                </button>
                
                <button class="cyber-btn cyber-btn-accent h-12 flex flex-col items-center justify-center"
                        onclick="window.open('news.php', '_blank');">
                    <div class="text-sm">📰 NEWS</div>
                </button>
                
                <button class="cyber-btn cyber-btn-warning h-12 flex flex-col items-center justify-center"
                        onclick="window.open('map.php', '_blank');">
                    <div class="text-sm">🗺️ MAP</div>
                </button>
            </div>
        </div>
    </div>
    
    <!-- Game Statistics -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="cyber-text-primary font-cyber mb-4">SESSION STATISTICS</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div class="text-center">
                <div class="cyber-text-secondary">Participants</div>
                <div class="cyber-text-primary font-bold">$validnum</div>
            </div>
            <div class="text-center">
                <div class="cyber-text-secondary">Remaining</div>
                <div class="cyber-text-primary font-bold">$alivenum</div>
            </div>
            <div class="text-center">
                <div class="cyber-text-secondary">Eliminated</div>
                <div class="cyber-text-primary font-bold"><!--{eval echo $validnum - $alivenum;}--></div>
            </div>
            <div class="text-center">
                <div class="cyber-text-secondary">Session #</div>
                <div class="cyber-text-primary font-bold">$gamenum</div>
            </div>
        </div>
    </div>
    
    <!-- Memorial Message -->
    <!--{if isset($lastword) && $lastword}-->
    <div class="cyber-card p-4 border border-cyber-secondary/30">
        <h3 class="cyber-text-secondary font-cyber mb-4">FINAL TRANSMISSION</h3>
        <div class="cyber-terminal p-3">
            <div class="cyber-text-primary">"$lastword"</div>
            <div class="cyber-text-secondary text-xs mt-2">- $name</div>
        </div>
    </div>
    <!--{/if}-->
    
    <!-- Next Session Info -->
    <div class="cyber-card p-4 border border-cyber-success/30">
        <h3 class="cyber-text-success font-cyber mb-4">NEXT SESSION</h3>
        <div class="text-sm space-y-2">
            <div class="cyber-text-secondary">
                The next virtual reality session will begin automatically.
            </div>
            <div class="cyber-text-primary">
                <!--{if isset($starttime)}-->
                    Estimated start time: <!--{eval echo date('Y-m-d H:i:s', $starttime);}-->
                <!--{else}-->
                    Start time will be announced soon.
                <!--{/if}-->
            </div>
            <div class="cyber-text-accent">
                Stay connected to receive notifications.
            </div>
        </div>
    </div>
    
</div>

<script>
// Death interface enhancements
document.addEventListener('DOMContentLoaded', function() {
    initDeathInterface();
    setupDeathAnimations();
});

function initDeathInterface() {
    // Change theme to danger mode
    if (window.themeManager) {
        window.themeManager.setGameStateTheme('danger');
    }
    
    // Add death-specific styling
    document.body.classList.add('death-mode');
    
    // Play death sound effect (placeholder)
    playDeathSound('player_eliminated');
    
    // Show death notification
    if (window.nouveauTheme) {
        window.nouveauTheme.showNotification('You have been eliminated from the simulation', 'error');
    }
}

function setupDeathAnimations() {
    // Add glitch effect to death header
    const deathHeader = document.querySelector('.cyber-card.border-cyber-danger\\/50');
    if (deathHeader) {
        deathHeader.style.animation = 'deathGlitch 3s ease-in-out infinite';
    }
    
    // Add fade-in animation to cards
    const cards = document.querySelectorAll('.cyber-card');
    cards.forEach((card, index) => {
        card.style.animationDelay = `${index * 0.2}s`;
        card.classList.add('cyber-fade-in');
    });
    
    // Add memorial effect
    const memorial = document.querySelector('.cyber-terminal');
    if (memorial) {
        memorial.style.animation = 'memorialGlow 2s ease-in-out infinite';
    }
}

function playDeathSound(soundName) {
    // Placeholder for death sound effects
    console.log(`Playing death sound: ${soundName}`);
}

// Auto-refresh for spectator mode
let autoRefreshInterval;
function startAutoRefresh() {
    autoRefreshInterval = setInterval(() => {
        // Only refresh if game is still active
        if (document.querySelector('.cyber-text-primary')) {
            window.location.reload();
        }
    }, 30000); // Refresh every 30 seconds
}

// Stop auto-refresh when leaving page
window.addEventListener('beforeunload', function() {
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
    }
    document.body.classList.remove('death-mode');
});

// Start auto-refresh after 5 seconds
setTimeout(startAutoRefresh, 5000);
</script>

<style>
/* Death-specific styles */
.death-mode {
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255, 0, 102, 0.1) 0%, transparent 70%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
}

@keyframes deathGlitch {
    0%, 100% { 
        filter: hue-rotate(0deg) brightness(1);
        transform: translateX(0);
    }
    10% { 
        filter: hue-rotate(90deg) brightness(1.2);
        transform: translateX(-2px);
    }
    20% { 
        filter: hue-rotate(180deg) brightness(0.8);
        transform: translateX(2px);
    }
    30% { 
        filter: hue-rotate(270deg) brightness(1.1);
        transform: translateX(-1px);
    }
    40% { 
        filter: hue-rotate(360deg) brightness(0.9);
        transform: translateX(1px);
    }
    50% { 
        filter: hue-rotate(0deg) brightness(1);
        transform: translateX(0);
    }
}

@keyframes memorialGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        opacity: 1;
    }
    50% { 
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
        opacity: 0.8;
    }
}

/* Death card styling */
.death-mode .cyber-card {
    backdrop-filter: blur(10px);
    background: rgba(26, 26, 46, 0.9);
}

/* Terminal effect for death messages */
.death-mode .cyber-terminal {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--cyber-danger);
    position: relative;
    overflow: hidden;
}

.death-mode .cyber-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 102, 0.2), transparent);
    animation: terminalScan 3s linear infinite;
}

@keyframes terminalScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Spectator button enhancements */
.death-mode .cyber-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 20px currentColor;
}

/* Mobile responsiveness for death interface */
@media (max-width: 768px) {
    .grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cyber-btn h-12 {
        height: 2.5rem;
    }
    
    .death-mode .cyber-card {
        margin-bottom: 1rem;
    }
}
</style>
