/* Add these styles to your existing style.css file */

/* --- Sudden Death Mode Styles --- */

/* Make the whole page pulse red */
body.sudden-death-mode {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { background-color: #2c3e50; }
    50% { background-color: #8e1a1a; } /* A dark, blood red */
    100% { background-color: #2c3e50; }
}

/* Make the challenge display area more alarming */
body.sudden-death-mode #challenge-display {
    border-color: #ff0000; /* Bright red border */
    box-shadow: 0 0 20px #ff0000; /* Red glow effect */
    animation: shake 0.5s infinite;
}

/* A simple shake animation for the challenge text */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Maybe change the spin button to look dangerous */
body.sudden-death-mode #spin-button {
    background-color: #8b0000; /* Dark red */
    border-color: #ff0000;
    animation: glow-button 1.5s infinite alternate;
}

@keyframes glow-button {
    from { box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60000, 0 0 40px #e60000; }
    to { box-shadow: 0 0 20px #fff, 0 0 30px #ff4d4d, 0 0 40px #ff4d4d, 0 0 50px #ff4d4d; }
}