html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}

canvas {
    display: block;
}

body {
    margin: 0;
}

#unity-container {
    width: 100%;
    height: 100%;
    position: relative;
}

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

{

{

{
    BACKGROUND_COLOR
}

}
}
;
}

#loading-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#unity-loading-bar {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#unity-logo {
    text-align: center;
    pointer-events: none;
}

    #unity-logo img {
        max-width: 80%;
        max-height: 80%;
        pointer-events: none;
    }

/* #unity-progress-bar-empty { */
    /* width: 40%; */
    /* height: 24px; */
    /* margin: 10px 20px 20px 10px; */
    /* text-align: left; */
    /* border: 1px solid white; */
    /* padding: 2px; */
/* } */

/* #unity-progress-bar-full { */
    /* width: 0%; */
    /* height: 100%; */
    /* background: white; */
/* } */

/* .light #unity-progress-bar-empty { */
    /* border-color: black; */
/* } */

/* .light #unity-progress-bar-full { */
    /* background: black; */
/* } */

/* .spinner, */
/* .spinner:after { */
    /* border-radius: 50%; */
    /* width: 5em; */
    /* height: 5em; */
/* } */

/* .spinner { */
    /* margin: 10px; */
    /* font-size: 10px; */
    /* position: relative; */
    /* text-indent: -9999em; */
    /* border-top: 1.1em solid rgba(255, 255, 255, 0.2); */
    /* border-right: 1.1em solid rgba(255, 255, 255, 0.2); */
    /* border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); */
    /* border-left: 1.1em solid #ffffff; */
    /* transform: translateZ(0); */
    /* animation: spinner-spin 1.1s infinite linear; */
/* } */

/* @keyframes spinner-spin { */
    /* 0% { */
        /* transform: rotate(0deg); */
    /* } */

    /* 100% { */
        /* transform: rotate(360deg); */
    /* } */
/* } */

/* Убираем старый прогресс-бар */
#unity-progress-bar-empty {
    display: none !important;
}

/* Новый спиннер с квадратами */
.spinner {
    display: inline-flex;
    gap: 5px;
    margin: 10px;
    width: auto;
    height: auto;
    border: none !important;
    text-indent: 0;
    transform: none;
    animation: none;
    font-size: initial;
    position: static;
}

.spinner:before,
.spinner:after {
    content: "";
    width: 25px;
    aspect-ratio: 1;
    box-shadow: 0 0 0 3px inset #fff;
    animation: l4 1.5s infinite;
}

.spinner:after {
    --s: -1;
    animation-delay: 0.75s;
}

@keyframes l4 {
    0%     {transform:scaleX(var(--s,1)) translate(0) rotate(0)}
    16.67% {transform:scaleX(var(--s,1)) translate(-50%) rotate(0)}
    33.33% {transform:scaleX(var(--s,1)) translate(-50%) rotate(90deg)}
    50%,
    100%   {transform:scaleX(var(--s,1)) translate(0) rotate(90deg)}
}

/* Стили для светлой темы */
.light .spinner:before,
.light .spinner:after {
    box-shadow: 0 0 0 3px inset #000;
}

/* Убираем старые анимации спиннера */
@keyframes spinner-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}