html,
body {
    width: calc(var(--app-vw) * 100);
    height: calc(var(--app-vh) * 100);
    overflow: hidden;
    background: var(--color-bg-void);
    font-family: var(--font-primary);
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    background-color: var(--color-bg-void);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-screen--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0.28rem solid rgba(53, 214, 138, 0.25);
    border-top-color: var(--color-button-glow);
    animation: loading-spin 0.9s linear infinite;
}

.loading-text {
    margin: 0;
    color: var(--color-text-light);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}

#app {
    position: relative;
    width: calc(var(--app-vw) * 100);
    height: calc(var(--app-vh) * 100);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-void);
}

#app::before {
    content: none;
}

.quiz-stage {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #000;
}

.stage-canvas {
    position: relative;
    container-type: size;
    container-name: stage;
}

.stage-canvas::before,
.stage-canvas::after {
    content: none;
}

@media (orientation: landscape),
    (orientation: portrait) and (max-width: 320px),
    (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
    #app::before {
        content: "";
        position: absolute;
        inset: -2.5vmax;
        z-index: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), url("../assets/backgrounds/landscape-background.webp");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    #app:has(#incorrect-screen:not([hidden]))::before {
        background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), url("../assets/backgrounds/landscape-background2.webp");
    }
}

@media (orientation: landscape) {
    .stage-canvas::before,
    .stage-canvas::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 0;
        width: 6%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), url("../assets/backgrounds/landscape-background.webp");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        pointer-events: none;
    }

    .stage-canvas::before {
        left: 0;
        -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0%, transparent 100%);
    }

    .stage-canvas::after {
        right: 0;
        -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
        mask-image: linear-gradient(to left, #000 0%, transparent 100%);
    }

    #app:has(#incorrect-screen:not([hidden])) .stage-canvas::before,
    #app:has(#incorrect-screen:not([hidden])) .stage-canvas::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), url("../assets/backgrounds/landscape-background2.webp");
    }
}

@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
    .stage-canvas {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    }
}

/* Landscape: the 900x1600 artboard fits entirely inside a centered 9:16 stage, no crop. */
@media (orientation: landscape) {
    .quiz-stage {
        aspect-ratio: var(--stage-aspect-width) / var(--stage-aspect-height);
        height: min(calc(var(--app-vh) * 100), calc(var(--app-vw) * 100 * var(--stage-aspect-height) / var(--stage-aspect-width)));
        width: min(calc(var(--app-vw) * 100), calc(var(--app-vh) * 100 * var(--stage-aspect-width) / var(--stage-aspect-height)));
        max-width: calc(var(--app-vw) * 100);
        max-height: calc(var(--app-vh) * 100);
    }

    .stage-canvas {
        width: 100%;
        height: 100%;
    }
}

@media (orientation: portrait) and (max-width: 320px),
    (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
    .quiz-stage {
        background-color: transparent;
    }
}

/* Portrait: the stage fills the whole viewport and the artboard covers it, cropping edges as needed. */
@media (orientation: portrait) {
    .quiz-stage {
        width: calc(var(--app-vw) * 100);
        height: calc(var(--app-vh) * 100);
    }

    .stage-canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: max(calc(var(--app-vw) * 100), calc(var(--app-vh) * 100 * var(--stage-aspect-width) / var(--stage-aspect-height)));
        aspect-ratio: var(--stage-aspect-width) / var(--stage-aspect-height);
    }
}