* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: #000;
}

#matrix {
    display: block;
    width: 100vw;
    height: 100vh;
    background: #000;
}

#shutdown-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, transparent 100%, #000 100%);
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, -50%);
    opacity: 0;
}

#shutdown-overlay.active {
    opacity: 1;
    animation: tvShutdown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes tvShutdown {
    0% {
        background: radial-gradient(circle, transparent 100%, #000 100%);
    }
    10% {
        background: radial-gradient(circle, transparent 90%, #000 90%);
    }
    20% {
        background: radial-gradient(circle, transparent 80%, #000 80%);
    }
    30% {
        background: radial-gradient(circle, transparent 70%, #000 70%);
    }
    40% {
        background: radial-gradient(circle, transparent 60%, #000 60%);
    }
    50% {
        background: radial-gradient(circle, transparent 50%, #000 50%);
    }
    60% {
        background: radial-gradient(circle, transparent 40%, #000 40%);
    }
    70% {
        background: radial-gradient(circle, transparent 30%, #000 30%);
    }
    80% {
        background: radial-gradient(circle, transparent 20%, #000 20%);
    }
    85% {
        background: radial-gradient(circle, transparent 10%, #000 10%);
    }
    90% {
        background: radial-gradient(circle, transparent 5%, #000 5%);
    }
    95% {
        background: radial-gradient(circle, transparent 2%, #000 2%);
    }
    98% {
        background: radial-gradient(circle, transparent 0.5%, #000 0.5%);
    }
    100% {
        background: radial-gradient(circle, transparent 0%, #000 0%);
    }
}

#explosion-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 20;
    transform: translate(-50%, -50%);
    opacity: 0;
    background: radial-gradient(circle,
        rgba(255, 255, 0, 0) 0%,
        rgba(255, 200, 0, 0) 0%,
        rgba(255, 100, 0, 0) 0%,
        rgba(255, 50, 0, 0) 0%,
        rgba(200, 0, 0, 0) 0%
    );
}

#explosion-overlay.active {
    animation: fireExplosion 0.4s ease-out forwards;
}

@keyframes fireExplosion {
    0% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 0, 1) 2%,
            rgba(255, 200, 0, 0.9) 5%,
            rgba(255, 100, 0, 0) 10%,
            transparent 10%
        );
    }
    7% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 0, 1) 5%,
            rgba(255, 200, 0, 0.9) 12%,
            rgba(255, 100, 0, 0.5) 20%,
            transparent 25%
        );
    }
    14% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 0, 1) 8%,
            rgba(255, 200, 0, 0.95) 18%,
            rgba(255, 100, 0, 0.7) 28%,
            rgba(255, 50, 0, 0.4) 35%,
            transparent 40%
        );
    }
    21% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 0, 1) 10%,
            rgba(255, 200, 0, 0.95) 22%,
            rgba(255, 100, 0, 0.8) 35%,
            rgba(255, 50, 0, 0.6) 45%,
            transparent 55%
        );
    }
    28% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 0, 0.9) 0%,
            rgba(255, 200, 0, 0.95) 12%,
            rgba(255, 100, 0, 0.85) 28%,
            rgba(255, 50, 0, 0.7) 45%,
            rgba(200, 0, 0, 0.4) 60%,
            transparent 70%
        );
    }
    35% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 0, 0.85) 0%,
            rgba(255, 200, 0, 0.95) 15%,
            rgba(255, 100, 0, 0.9) 32%,
            rgba(255, 50, 0, 0.75) 50%,
            rgba(200, 0, 0, 0.5) 65%,
            transparent 78%
        );
    }
    42% {
        opacity: 1;
        background: radial-gradient(circle,
            rgba(255, 255, 0, 0.8) 0%,
            rgba(255, 200, 0, 0.95) 18%,
            rgba(255, 100, 0, 0.9) 38%,
            rgba(255, 50, 0, 0.75) 58%,
            rgba(200, 0, 0, 0.5) 72%,
            transparent 85%
        );
    }
    49% {
        opacity: 0.95;
        background: radial-gradient(circle,
            rgba(255, 200, 0, 0.8) 0%,
            rgba(255, 100, 0, 0.85) 20%,
            rgba(255, 50, 0, 0.75) 45%,
            rgba(200, 0, 0, 0.55) 65%,
            rgba(150, 0, 0, 0.3) 80%,
            transparent 90%
        );
    }
    56% {
        opacity: 0.9;
        background: radial-gradient(circle,
            rgba(255, 200, 0, 0.75) 0%,
            rgba(255, 100, 0, 0.8) 22%,
            rgba(255, 50, 0, 0.7) 48%,
            rgba(200, 0, 0, 0.5) 70%,
            rgba(100, 0, 0, 0.25) 88%,
            transparent 95%
        );
    }
    63% {
        opacity: 0.85;
        background: radial-gradient(circle,
            rgba(255, 200, 0, 0.7) 0%,
            rgba(255, 100, 0, 0.75) 25%,
            rgba(255, 50, 0, 0.68) 52%,
            rgba(200, 0, 0, 0.48) 75%,
            rgba(100, 0, 0, 0.2) 92%,
            transparent 100%
        );
    }
    70% {
        opacity: 0.75;
        background: radial-gradient(circle,
            rgba(255, 100, 0, 0.65) 0%,
            rgba(255, 50, 0, 0.6) 35%,
            rgba(200, 0, 0, 0.45) 65%,
            rgba(100, 0, 0, 0.18) 88%,
            transparent 100%
        );
    }
    77% {
        opacity: 0.6;
        background: radial-gradient(circle,
            rgba(255, 100, 0, 0.55) 0%,
            rgba(255, 50, 0, 0.5) 38%,
            rgba(200, 0, 0, 0.38) 68%,
            rgba(100, 0, 0, 0.15) 90%,
            transparent 100%
        );
    }
    84% {
        opacity: 0.4;
        background: radial-gradient(circle,
            rgba(255, 100, 0, 0.4) 0%,
            rgba(255, 50, 0, 0.35) 42%,
            rgba(200, 0, 0, 0.28) 72%,
            rgba(100, 0, 0, 0.12) 92%,
            transparent 100%
        );
    }
    91% {
        opacity: 0.2;
        background: radial-gradient(circle,
            rgba(200, 0, 0, 0.25) 0%,
            rgba(100, 0, 0, 0.15) 50%,
            rgba(50, 0, 0, 0.08) 80%,
            transparent 100%
        );
    }
    100% {
        opacity: 0;
        background: radial-gradient(circle,
            rgba(200, 0, 0, 0.1) 0%,
            rgba(100, 0, 0, 0.05) 50%,
            transparent 100%
        );
    }
}