:root {
    color-scheme: dark;
    --loading-background: #021e67;
    --loading-track: #061f52;
    --loading-fill: #82e53d;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: var(--loading-background);
}

#unity-container {
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background: var(--loading-background);
}

#unity-canvas {
    display: block;
    width: 100%;
    height: 100vh;
}

#loading-bar {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--loading-background);
    color: #fff;
}

#loading-reticle {
    position: absolute;
    top: 27.84%;
    left: 50%;
    width: min(25.64vw, 11.85dvh);
    height: auto;
    transform: translate(-50%, -50%);
}

#loading-logo {
    position: absolute;
    top: 44.02%;
    left: 50%;
    width: min(76.923vw, 55dvh);
    height: auto;
    transform: translate(-50%, -50%);
}

#loading-progress {
    position: absolute;
    top: 83.77%;
    left: 50%;
    width: min(76.923vw, 55dvh);
    transform: translateX(-50%);
}

#progress-bar-empty {
    width: 100%;
    height: clamp(8px, 1.422dvh, 24px);
    border-radius: 999px;
    background: var(--loading-track);
    overflow: hidden;
}

#progress-bar-full {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--loading-fill);
}

.loading-waiting #progress-bar-full {
    width: 30%;
    animation: loading 1.6s linear infinite;
}

@keyframes loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(340%); }
}

#loading-status {
    margin-top: clamp(10px, 1.2dvh, 20px);
    color: #fff;
    text-align: center;
    font: 400 clamp(12px, 1.9dvh, 18px)/1.5 Arial, sans-serif;
}

.loading-stopped #progress-bar-full {
    animation: none;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .loading-waiting #progress-bar-full {
        animation: none;
        transform: translateX(115%);
    }
}

#unity-warning {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: max(16px, env(safe-area-inset-top));
    width: min(90%, 640px);
    transform: translateX(-50%);
    background: #fff;
    color: #111;
    padding: 10px;
    overflow-wrap: anywhere;
    display: none;
}

#version-label {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    color: #ffffff80;
    font: 12px/1.5 Arial, sans-serif;
}