/* Rain + red lightning overlay — pointer-events none so UI stays clickable */
#rain-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9990;
    pointer-events: none;
    display: block;
}

.lightning-flash {
    position: fixed;
    inset: 0;
    z-index: 9989;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 40, 40, 0.55) 0%, rgba(180, 0, 0, 0.18) 42%, transparent 78%),
        linear-gradient(180deg, rgba(255, 0, 0, 0.28) 0%, rgba(80, 0, 0, 0.08) 55%, transparent 100%);
}

.lightning-flash.is-striking {
    animation: red-lightning-flash 0.55s ease-out;
}

.lightning-bolt {
    position: fixed;
    top: 0;
    z-index: 9991;
    pointer-events: none;
    width: 90px;
    height: 62vh;
    opacity: 0;
    filter: drop-shadow(0 0 8px #ff1a1a) drop-shadow(0 0 22px #ff0000);
}

.lightning-bolt.is-striking {
    animation: red-bolt-strike 0.42s ease-out;
}

.lightning-bolt svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes red-lightning-flash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    16% { opacity: 0.12; }
    28% { opacity: 0.85; }
    42% { opacity: 0.08; }
    55% { opacity: 0.45; }
    100% { opacity: 0; }
}

@keyframes red-bolt-strike {
    0% { opacity: 0; }
    6% { opacity: 1; }
    14% { opacity: 0.15; }
    26% { opacity: 1; }
    48% { opacity: 0.7; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #rain-canvas,
    .lightning-flash,
    .lightning-bolt {
        display: none !important;
    }
}