body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer {
    position: absolute;
    left: 1em;
    top: 1em;
    width: 3%;
    height: calc(100% - 1em);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.unity-mobile #unity-footer {
    display: none
}

#unity-fullscreen-button {
    pointer-events: auto;
    cursor: pointer;
    width: 100%;
    /* height: 38px; */
    aspect-ratio: 1;
    background: url('fullscreen-button.png') no-repeat center;
    background-size: contain;
    transition: transform 0.2s ease-in-out;
}

#unity-fullscreen-button:hover {
    transform: scale(1.1);
}

.is-fullscreen #unity-fullscreen-button {
    background: url('reduce_screen.png') no-repeat center;
    background-size: contain;
}