html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #10131f;
}

body {
    position: absolute;
    text-align: center;
}

:root {
    --desktop-frame-width: 62.5vh;
    --desktop-frame-height: 100vh;
    --desktop-frame-side-width: 65px;
    --desktop-frame-side-overlap: 17px;
    --desktop-game-display-width: 62.5vh;
    --desktop-game-display-height: 100vh;
}

.noselect {
    -webkit-user-select: none;
    user-select: none;
}

#full-screen-container,
#unity-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#unity-canvas {
    width: 100%;
    height: 100%;
    background: transparent;
}

#desktop-background {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.game-frame {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--desktop-frame-width);
    height: var(--desktop-frame-height);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.25s ease;
    filter: drop-shadow(0 22px 26px rgba(4, 13, 31, 0.46));
    z-index: 1;
}

.game-frame-side {
    position: absolute;
    top: -1.6vh;
    width: var(--desktop-frame-side-width);
    height: calc(var(--desktop-frame-height) + 1.6vh);
}

.game-frame-left {
    right: calc(100% - var(--desktop-frame-side-overlap));
}

.game-frame-right {
    left: calc(100% - var(--desktop-frame-side-overlap));
}

#full-screen-container.unity-desktop #desktop-background {
    display: block;
    background-image: url("desktop-bg-webp.webp");
}

#full-screen-container.unity-desktop {
    background: #10131f;
}

#unity-container.unity-desktop {
    inset: auto;
    left: 50%;
    top: 50%;
    width: var(--desktop-game-display-width);
    height: var(--desktop-game-display-height);
    transform: translate(-50%, -50%);
    z-index: 10;
}

#unity-canvas.unity-desktop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000;
    z-index: 0 !important;
}

#full-screen-container.unity-mobile #desktop-background {
    display: none;
}

#ui-root {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    overflow: hidden;
    pointer-events: none;
    background: #10131f;
    transition: opacity 0.25s ease;
}

#ui-root.is-hidden {
    opacity: 0;
}

#ui-root.game-ready {
    background: transparent;
}

#ui-root.game-ready .loading-background,
#ui-root.game-ready .loading-vignette,
#ui-root.game-ready .loading-logo,
#ui-root.game-ready .loading-heroes,
#ui-root.game-ready .loading-leaves,
#ui-root.game-ready .progress {
    opacity: 0;
}

#ui-root.unity-desktop .game-frame {
    display: block;
}

#ui-root.game-ready .game-frame {
    opacity: 1;
}

.loading-background {
    position: absolute;
    inset: 0;
    background-image: url("loading-bg-landscape-webp.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.loading-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 14, 38, 0.08) 0%, rgba(7, 14, 38, 0) 42%, rgba(7, 14, 38, 0.36) 100%),
        linear-gradient(90deg, rgba(7, 14, 38, 0.22) 0%, rgba(7, 14, 38, 0) 22%, rgba(7, 14, 38, 0) 78%, rgba(7, 14, 38, 0.18) 100%);
}

.loading-logo {
    position: absolute;
    left: 50%;
    top: clamp(8px, 2.8vh, 34px);
    width: min(390px, 42vw, 32vh);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 10px 8px rgba(36, 18, 0, 0.32));
}

.loading-heroes {
    position: absolute;
    left: 50%;
    bottom: clamp(78px, 8vh, 110px);
    width: min(860px, 64vw, 64vh);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 16px 12px rgba(33, 16, 0, 0.25));
}

.loading-leaves {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: max(100vw, 1100px);
    height: auto;
    transform: translateX(-50%);
}

.progress {
    position: absolute;
    left: 50%;
    bottom: calc(clamp(28px, 4.1vh, 50px) + env(safe-area-inset-bottom));
    width: min(520px, 70vw);
    height: 52px;
    transform: translateX(-50%);
}

.progress-frame {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #171722;
    border-radius: 2px;
    background: #383641;
    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.24),
        inset 0 3px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 0 rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.progress-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("progress-frame-webp.webp") center / 100% 100% no-repeat;
    opacity: 0.22;
    mix-blend-mode: screen;
}

.progress-fill {
    position: absolute;
    left: 7px;
    top: 7px;
    bottom: 7px;
    width: calc(100% - 14px);
    transform: scaleX(0);
    transform-origin: left center;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0 22px, rgba(255, 255, 255, 0.02) 22px 44px),
        linear-gradient(180deg, #89b8ff 0%, #5f7cff 52%, #4462e8 100%);
    border-radius: 1px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -3px 0 rgba(43, 47, 150, 0.45);
}

@media (orientation: portrait) {
    .loading-logo {
        width: min(460px, 76vw, 34vh);
        top: clamp(6px, 1.2vh, 22px);
    }

    .loading-heroes {
        width: min(960px, 116vw, 62vh);
        bottom: clamp(94px, 11vh, 134px);
    }

    .progress {
        width: min(440px, 72vw);
        height: 44px;
    }
}