/* Loading is independent of the fitted/rotated game stage. Keep every rule
 * scoped here so hiding the splash restores the existing game presentation. */
#splash {
    /* Scale against the logical landscape frame, including upright phones. */
    --sun-loading-size: clamp(36px, min(6.5vmax, 13vmin), 116px);
    --sun-loading-font: clamp(8px, min(1.1vmax, 2.15vmin), 18px);
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #270701;
    color: #f4d282;
    font-family: Arial, Helvetica, sans-serif;
}

#splash .loading-stage { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Creator hides its splash at the first Loading scene. Keep this same screen
 * until the prepared Lobby and its decoded banners can be drawn together. */
#splash[data-sun-startup-pending="true"] { display: block !important; }

#splash #spinner {
    position: absolute;
    top: 48%;
    left: 50%;
    width: var(--sun-loading-size);
    height: var(--sun-loading-size);
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
}

@keyframes sun-loading-glow {
    0%, 100% { opacity: .5; }
    70% { opacity: 1; }
}

#splash #spinner .bar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fffcc7;
    animation: sun-loading-glow 1.5s linear infinite;
}
#splash #spinner .bar:nth-child(1) { filter: blur(calc(var(--sun-loading-size) * .086)); }
#splash #spinner .bar:nth-child(2) { filter: blur(calc(var(--sun-loading-size) * .13)); }
#splash #spinner .bar:nth-child(3) { filter: blur(calc(var(--sun-loading-size) * .215)); }
#splash #spinner .bar:nth-child(4) { filter: blur(calc(var(--sun-loading-size) * .39)); }

/* The existing SVG sun occupies x=53..149, y=13..110 in its 200px viewBox. */
#splash #spinner .logo {
    position: absolute;
    width: 208%;
    height: 208%;
    top: -14%;
    left: -55%;
}
#splash #spinner .logo svg { display: block; width: 100%; height: 100%; }
#splash #spinner .logo2,
#splash #spinner .bgColor { display: none; }

#splash .loading-footer {
    position: absolute;
    top: calc(48% + var(--sun-loading-size) * .79);
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 1160px;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    color: #f4d282;
    font-size: var(--sun-loading-font);
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
    overflow-wrap: break-word;
}
#splash .loading-footer p { margin: 0; }
#splash .loading-footer a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    pointer-events: auto;
}

/* Use the same clockwise landscape direction as the game on an upright phone.
 * Only the content rotates; the backdrop always fills the physical viewport. */
#GameDiv[data-sunwin-portrait="true"] + #splash .loading-stage {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100vh;
    height: 100vw;
    width: 100dvh;
    height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
    #splash #spinner .bar { animation: none; opacity: .7; }
}