#fx-layer.fx-rain {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

#fx-layer.fx-rain .rain-drop {
    position: absolute;
    width: 2px;
    height: 90px;
    opacity: 0;
    animation: rainFall linear infinite;
}

@keyframes rainFall {
    0% { transform: translateY(-120px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.6; }
    100% { transform: translateY(120vh); opacity: 0; }
}

/* REALISTIC */
#fx-layer.fx-rain.rain-realistic .rain-drop {
    background: rgba(255,255,255,0.35);
    filter: blur(0.3px);
}

/* HEAVY */
#fx-layer.fx-rain.rain-heavy .rain-drop {
    width: 3px;
    height: 140px;
    background: rgba(255,255,255,0.45);
    filter: blur(0.6px);
}

/* MAGIC */
#fx-layer.fx-rain.rain-magic .rain-drop {
    width: 3px;
    height: 110px;
    background: linear-gradient(
        to bottom,
        rgba(180,120,255,0.9),
        rgba(140,80,255,0.2)
    );
    filter: blur(1.5px)
            drop-shadow(0 0 6px rgba(180,120,255,0.7));
}

/* CYBERPUNK */
#fx-layer.fx-rain.rain-cyberpunk .rain-drop {
    background: linear-gradient(
        to bottom,
        rgba(0,200,255,1),
        rgba(0,200,255,0)
    );
    filter: blur(1px)
            drop-shadow(0 0 6px rgba(0,200,255,0.9));
}