/* Shared site backdrop v3 — the supplied dungeon artwork (2048x900 after the
   black letterbox is cropped), split at x=1024.

   Each half is a fixed layer at its own edge of a pure-black viewport; the
   artwork's own dark middle is where the game UI sits. Delivered at source
   resolution and scaled smoothly (this is not pixel art, so no
   `image-rendering: pixelated`).

   Scaling: the aspect ratio never changes — only which viewport dimension each
   half is fitted to:
     landscape  background-size: auto 100%   -> fills the height, crops inward
     portrait   background-size: 100% auto   -> fits its 50vw column and shrinks
                                                vertically on tall screens */
html {
    background: #000 !important;
    isolation: isolate;
}
body {
    background: transparent !important;
}
/* Retire the older ambient gradients; otherwise they tint the artwork. */
body::before { content: none !important; }

html::before, html::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 50vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-color: transparent;
}
html::before {
    left: 0;
    background-image: url('site-background-left-v3.jpg');
    background-position: left bottom;
}
html::after {
    right: 0;
    background-image: url('site-background-right-v3.jpg');
    background-position: right bottom;
}

/* No edge blends are needed: the artwork's own centre is pure black (row 450
   across x 900-1150 reads 0), so the two halves meet invisibly, and at wide
   aspect ratios they simply overlap. The earlier pixel-art version needed a
   fade because its bright walls ran into the join. */

/* Portrait / tall screens: fit each half to its own 50vw column instead of the
   viewport height, so the backdrop shrinks vertically with the screen. The two
   halves then meet at the centre (see above) and the top edge fades into the
   page. */
@media (orientation: portrait) {
    html::before, html::after {
        background-size: 100% auto;
        -webkit-mask-image: linear-gradient(to top, #000 62%, transparent 100%);
        mask-image: linear-gradient(to top, #000 62%, transparent 100%);
    }
}