/* Applied only after the desktop background has decoded successfully. */
.uya-background,
.uya-page footer .uya-background-controls { display:none; }
.uya-background__character { display:none; }
.uya-background[hidden],
.uya-page footer .uya-background-controls[hidden] { display:none !important; }
.uya-background-status {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.uya-page .uya-background-control {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    height:26px;
    min-height:26px;
    margin:0;
    padding:3px 7px;
    border:1px solid #e3d9ec;
    border-radius:4px;
    background:transparent;
    color:#78628d;
    font:inherit;
    font-size:11px;
    line-height:1.4;
    white-space:nowrap;
    cursor:pointer;
}
.uya-page .uya-background-control:hover:not(:disabled) { background:#eee7f5; }
.uya-page .uya-background-control[aria-pressed="true"] { color:#7650ad; border-color:#d6c6e5; }
.uya-page .uya-background-control:disabled { color:#a69aac; border-color:#ebe5ee; cursor:default; opacity:.65; }
.uya-page .uya-background-control:focus-visible { outline:3px solid #9170bc; outline-offset:3px; }

@media (min-width:1200px) {
    body.is-desktop-template.has-uya-background {
        --uya-background-lane:clamp(380px,28vw,520px);
        /* Reserve the BGM bar plus the footer's 26px controls and vertical padding. */
        --uya-background-floor:104px;
        /* The shared artwork is 1672 x 941; cap movement by its contained width. */
        --uya-background-art-width:min(100vw,calc((100vh - var(--uya-background-floor)) * 1.776833));
        isolation:isolate;
        background:#f4eef8;
    }
    body.is-desktop-template.has-uya-background .uya-background:not([hidden]) {
        display:block;
        position:fixed;
        inset:0;
        z-index:-1;
        overflow:hidden;
        pointer-events:none;
        user-select:none;
        background:#f4eef8;
    }
    body.is-desktop-template.has-uya-background .uya-background__image {
        display:block;
        position:absolute;
        top:0;
        right:0;
        width:100%;
        height:calc(100% - var(--uya-background-floor));
        max-width:none;
        margin:0;
        padding:0;
        border:0;
        object-fit:contain;
        object-position:right bottom;
        transform:translateX(min(10vw,calc(var(--uya-background-art-width) * .11)));
        opacity:0;
        transition:opacity 600ms ease;
        pointer-events:none;
    }
    body.is-desktop-template.has-uya-background .uya-background__image.is-active { opacity:1; }
    /* Scene metadata owns compositing: legacy artwork already includes a person. */
    body.is-desktop-template.has-uya-background .uya-background.is-layered .uya-background__image:not(.is-background-only),
    body.is-desktop-template.has-uya-background .uya-background:not(.is-layered) .uya-background__image.is-background-only { display:none; }
    body.is-desktop-template.has-uya-background .uya-background.is-layered .uya-background__image {
        object-fit:cover;
        object-position:center;
        transform:none;
    }
    body.is-desktop-template.has-uya-background .uya-background.is-layered .uya-background__character {
        display:block;
        position:absolute;
        z-index:1;
        right:8px;
        bottom:var(--uya-background-floor);
        width:calc(var(--uya-background-lane) - 16px);
        height:calc(100% - var(--uya-background-floor) - 24px);
        max-width:none;
        margin:0;
        padding:0;
        border:0;
        object-fit:contain;
        object-position:center bottom;
        filter:drop-shadow(0 10px 16px rgb(48 33 69 / 18%));
        pointer-events:none;
    }
    /* The transition starts below the image, leaving the character's shoes intact. */
    body.is-desktop-template.has-uya-background .uya-background::after {
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        height:var(--uya-background-floor);
        background:linear-gradient(to bottom,#f4eef8,#faf9fb 55%);
    }
    body.is-desktop-template.has-uya-background .uya-header,
    body.is-desktop-template.has-uya-background .uya-layout {
        width:min(1440px,calc(100% - var(--uya-background-lane)));
        margin-left:0;
        margin-right:auto;
        background:rgba(250,249,251,.93);
    }
    body.is-desktop-template.has-uya-background footer { background:#faf9fb; }
    body.is-desktop-template.has-uya-background footer .uya-background-controls:not([hidden]) {
        display:inline-flex;
        align-items:center;
        gap:5px;
        margin-right:10px;
        vertical-align:middle;
    }
    @supports (height:100dvh) {
        body.is-desktop-template.has-uya-background {
            --uya-background-art-width:min(100vw,calc((100dvh - var(--uya-background-floor)) * 1.776833));
        }
    }
}

@media (min-width:1200px) and (max-width:1500px) {
    body.is-desktop-template.has-uya-background .uya-header,
    body.is-desktop-template.has-uya-background .uya-layout { padding-left:24px; padding-right:24px; }
    body.is-desktop-template.has-uya-background .uya-layout { grid-template-columns:196px minmax(0,1fr); gap:18px; }
}

@media (min-width:1200px) and (max-width:1350px) {
    body.is-desktop-template.has-uya-background .bili-hub--desktop { grid-template-columns:repeat(4,minmax(0,1fr)); }
    body.is-desktop-template.has-uya-background .bili-hub--desktop .bili-hub__profile { display:none; }
    body.is-desktop-template.has-uya-background .bili-hub--desktop .vs-open { font-size:10px; padding-left:4px; padding-right:4px; }
}

body.is-desktop-template.has-uya-background:not([data-uya-effects="on"]) .uya-background__image,
body.is-desktop-template.has-uya-background[data-uya-effects-paused="true"] .uya-background__image { transition:none; }
@media (prefers-reduced-motion:reduce) {
    body.is-desktop-template.has-uya-background .uya-background__image { transition:none !important; }
}
@media (max-width:1199px) {
    .uya-background,
    .uya-page footer .uya-background-controls { display:none !important; }
}