/* =========================================
   EFFECTS BASE LAYER (CRITICAL)
========================================= */

#fx-layer {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    /* Layer Order:
        1 — Background (below everything)
        2 — Fog / Particles
        3 — Rain
        4 — Lightning Flashes
        5 — UI / Navbar (in components.css)
    */
    z-index: 2;

    overflow: hidden;
}

/* Standard effect groups */
.fx-fog,
.fx-vignette,
.fx-rain,
.fx-particles,
.fx-lightning {
    position: absolute;
    inset: 0;
}