html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Matches the dark leather of the menu background, so no white flash before the app draws. */
    background-color: #140c05;
}

#loading {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    /* The menu background doubles as artwork here and warms the cache for the app itself.
       It is a Compose resource, hence the generated path; without it the gradient stands alone. */
    background-color: #140c05;
    background-image:
        radial-gradient(circle at 50% 45%, rgba(20, 12, 5, 0.35) 0%, rgba(20, 12, 5, 0.9) 100%),
        url("composeResources/animals.composeapp.generated.resources/drawable/bg_menu_empty.webp");
    background-size: cover;
    background-position: center;
    transition: opacity 400ms ease-out;
}

/* Set by main.kt once Compose has drawn its first frame. The delayed visibility switch takes the
   faded-out screen out of rendering entirely, so its spinner stops animating behind the game. */
#loading.app-ready {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 400ms ease-out, visibility 0s linear 400ms;
}

#loading-title {
    margin: 0;
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(22px, 6vw, 38px);
    font-weight: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f2e2c4;
    text-shadow: 0 0 20px rgba(255, 183, 92, 0.5);
}

.loading-text {
    max-width: 30em;
    margin: -12px 16px 0;
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(14px, 3.6vw, 17px);
    line-height: 1.5;
    text-align: center;
    color: rgba(242, 226, 196, 0.8);
}

#loading-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
}

#loading-links a {
    color: #f0b95c;
}

#loading-spinner {
    animation: loading-spin 1.1s linear infinite;
}

#loading-track {
    stroke: rgba(242, 226, 196, 0.15);
}

#loading-arc {
    stroke: #f0b95c;
}

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

@media (prefers-reduced-motion: reduce) {
    #loading-spinner {
        animation: loading-pulse 1.8s ease-in-out infinite;
    }

    @keyframes loading-pulse {
        0%, 100% {
            opacity: 0.35;
        }
        50% {
            opacity: 1;
        }
    }
}