/* HTML decoration only: leave the game frame and canvas unobstructed. */
.manor-surround {
    display: none;
    pointer-events: none;
}

@media (min-width: 768px) and (orientation: landscape) {
    html body {
        background-color: #210d20;
        background-image: linear-gradient(#0003, #0003), url("./images/frame/wallpaper.webp");
        background-repeat: no-repeat, repeat;
        background-position: center top;
        background-size: 100% 100%, 627px 627px;
    }

    .manor-surround {
        --bar-width: 24px;
        display: block;
        position: fixed;
        inset-block: 0;
        left: 50%;
        transform: translateX(-50%);
        width: var(--game-w, min(calc(100vw - 48px), 120dvh));
    }

    /* Vignette only the wallpaper gutters. These never extend over the game. */
    .manor-surround::before,
    .manor-surround::after {
        content: "";
        position: absolute;
        inset-block: 0;
        width: max(0px, calc((100vw - 100%) / 2));
        background: radial-gradient(ellipse at center, transparent 15%, #0008 100%);
        box-shadow: inset -14px 0 24px #0009;
    }
    .manor-surround::before { right: 100%; }
    .manor-surround::after { left: 100%; transform: scaleX(-1); }

    .manor-border {
        position: absolute;
        z-index: 1;
        inset-block: 0;
        width: var(--bar-width);
        display: flex;
        flex-direction: column;
    }
    .manor-border--left { right: 100%; transform: scaleX(1); }
    .manor-border--right { left: 100%; transform: scaleX(-1); }
    .manor-border::before,
    .manor-border::after {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 95 / 220;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .manor-border::before { background-image: url("./images/frame/bar-top.webp"); }
    .manor-border::after { background-image: url("./images/frame/bar-bottom.webp"); }
    .manor-border__middle {
        flex: 1 1 0;
        min-height: 0;
        background: url("./images/frame/bar-middle.webp") no-repeat center / 100% 100%;
    }
}