/* ============================================================
   env-backgrounds.css — Environment scene backgrounds
   Loaded after styles.css, before any game-content CSS.
   ============================================================ */

/* ----------------------------------------------------------
   Base layer
   ---------------------------------------------------------- */
.env-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Subtle dark vignette keeps UI readable over any image */
    box-shadow: inset 0 0 120px 60px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

/* Dark overlay via ::after so the vignette sits on top of the image */
.env-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    pointer-events: none;
}

/* ----------------------------------------------------------
   Scene modifiers — landscape (default)
   ---------------------------------------------------------- */
.env-bg--forest,
[data-env="forest"] .env-bg,
#game-container[data-env="forest"],
#app[data-env="forest"] {
    background-image: url('assets/illustrations/bg/bg-forest.jpg');
}

.env-bg--town,
[data-env="town"] .env-bg,
#game-container[data-env="town"],
#app[data-env="town"] {
    background-image: url('assets/illustrations/bg/bg-town.jpg');
}

.env-bg--battlefield,
[data-env="battlefield"] .env-bg,
#game-container[data-env="battlefield"],
#app[data-env="battlefield"] {
    background-image: url('assets/illustrations/bg/bg-battlefield.jpg');
}

.env-bg--dungeon,
[data-env="dungeon"] .env-bg,
#game-container[data-env="dungeon"],
#app[data-env="dungeon"] {
    background-image: url('assets/illustrations/bg/bg-dungeon.jpg');
}

.env-bg--gauntlet,
[data-env="gauntlet"] .env-bg,
#game-container[data-env="gauntlet"],
#app[data-env="gauntlet"] {
    background-image: url('assets/illustrations/bg/bg-gauntlet.jpg');
}

.env-bg--demon-arena,
[data-env="demon-arena"] .env-bg,
#game-container[data-env="demon-arena"],
#app[data-env="demon-arena"] {
    background-image: url('assets/illustrations/bg/bg-demon-arena.jpg');
}

/* ----------------------------------------------------------
   Mobile / portrait variants
   ---------------------------------------------------------- */
@media (max-width: 640px), (orientation: portrait) {
    .env-bg--forest,
    [data-env="forest"] .env-bg,
    #game-container[data-env="forest"],
    #app[data-env="forest"] {
        background-image: url('assets/illustrations/bg/mobile/bg-forest.jpg');
    }

    .env-bg--town,
    [data-env="town"] .env-bg,
    #game-container[data-env="town"],
    #app[data-env="town"] {
        background-image: url('assets/illustrations/bg/mobile/bg-town.jpg');
    }

    .env-bg--battlefield,
    [data-env="battlefield"] .env-bg,
    #game-container[data-env="battlefield"],
    #app[data-env="battlefield"] {
        background-image: url('assets/illustrations/bg/mobile/bg-battlefield.jpg');
    }

    .env-bg--dungeon,
    [data-env="dungeon"] .env-bg,
    #game-container[data-env="dungeon"],
    #app[data-env="dungeon"] {
        background-image: url('assets/illustrations/bg/mobile/bg-dungeon.jpg');
    }

    .env-bg--gauntlet,
    [data-env="gauntlet"] .env-bg,
    #game-container[data-env="gauntlet"],
    #app[data-env="gauntlet"] {
        background-image: url('assets/illustrations/bg/mobile/bg-gauntlet.jpg');
    }

    .env-bg--demon-arena,
    [data-env="demon-arena"] .env-bg,
    #game-container[data-env="demon-arena"],
    #app[data-env="demon-arena"] {
        background-image: url('assets/illustrations/bg/mobile/bg-demon-arena.jpg');
    }
}