/* The loading cover (loading-cover.js): Art Studio's loading screen, option C (2026-10-18). Placed on
   its 1080×1920 canvas, scaled by --u (one canvas pixel) to fit the page; the art covers the page. */
@font-face {
    font-family: "Alegreya";
    font-weight: 700;
    font-display: swap;
    src: url("loading/Alegreya-Bold.ttf") format("truetype");
}
/* Alegreya at weight 900 (Google Fonts' variable font, instanced), for the title only. */
@font-face {
    font-family: "Alegreya";
    font-weight: 900;
    font-display: swap;
    src: url("loading/Alegreya-Black.ttf") format("truetype");
}
@font-face {
    font-family: "Alegreya";
    font-weight: 400;
    font-display: swap;
    src: url("loading/Alegreya-Regular.ttf") format("truetype");
}
#loading-cover {
    --u: min(calc(100vw / 1080), calc(100vh / 1920));
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    background: #0e0b10 url("loading/bg.jpg") center / cover no-repeat;
    font-family: "Alegreya", Georgia, "Times New Roman", serif;
    text-align: center;
    transition: opacity 0.3s ease-out;
    user-select: none;
}
@supports (height: 100dvh) {
    #loading-cover {
        --u: min(calc(100vw / 1080), calc(100dvh / 1920));
    }
}
/* A page wider than the art (desktop) shows all of it, as the portrait game does, not a crop. */
@media (min-aspect-ratio: 9 / 16) {
    #loading-cover {
        background-size: auto 100%;
    }
}
#loading-cover.lc-hidden {
    opacity: 0;
    pointer-events: none;
}
/* Scrims behind the title and the bar, so the text reads on any part of the art. */
#loading-cover::before,
#loading-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--u) * 420);
}
#loading-cover::before {
    top: 0;
    background: linear-gradient(rgba(8, 5, 10, 0.6), rgba(8, 5, 10, 0));
}
#loading-cover::after {
    bottom: 0;
    height: calc(var(--u) * 420 + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(8, 5, 10, 0), rgba(8, 5, 10, 0.78));
}
/* Jas's final logo (Art #43, Khiem 2026-10-21): 760×361 at x 160, y 70 of the 1080×1920 canvas. */
#loading-cover .lc-logo {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc(var(--u) * 70 + env(safe-area-inset-top));
    width: calc(var(--u) * 760);
    height: calc(var(--u) * 361);
    margin: 0 auto;
}
#loading-cover .lc-bottom {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: calc(var(--u) * 50 + env(safe-area-inset-bottom));
}
#loading-cover .lc-bar {
    box-sizing: border-box;
    width: calc(var(--u) * 680);
    height: calc(var(--u) * 46);
    margin: 0 auto;
    padding: calc(var(--u) * 9) calc(var(--u) * 8);
    background: url("loading/bar-track.png") 0 0 / 100% 100% no-repeat;
}
/* The fill shows progress × its width of the art, clipped on the right. */
#loading-cover .lc-fill {
    width: 0;
    height: 100%;
    overflow: hidden;
}
#loading-cover .lc-fill::before {
    content: "";
    display: block;
    width: calc(var(--u) * 664);
    height: 100%;
    background: url("loading/bar-fill.png") 0 0 / 100% 100% no-repeat;
}
#loading-cover .lc-status,
#loading-cover .lc-tip {
    white-space: nowrap;
}
#loading-cover .lc-status {
    margin-top: calc(var(--u) * 20);
    font-size: calc(var(--u) * 40);
    font-weight: 700;
    line-height: calc(var(--u) * 48);
    color: rgb(250, 240, 215);
    text-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 rgba(0, 0, 0, 0.85);
}
#loading-cover .lc-tip {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 32);
    font-weight: 400;
    line-height: calc(var(--u) * 40);
    color: rgb(200, 190, 170);
    text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(0, 0, 0, 0.85);
}