.unity-container.desktop {
    height: 100%;
    aspect-ratio: 3 / 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
}

.unity-container.handheld {
    height: 100%;
    width: 100%;
}

html, body {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-image: url('../img/bg_3.png');
    background-color: rgba(169, 152, 124, 1);
    background-repeat: repeat;
    background-size: 450px 450px;
    background-attachment: fixed;
    animation: moveDots 220s linear infinite;
}

@keyframes moveDots {
    0% {
        background-position: 0 100%;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 100%;
    }
}

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

#studio-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: pulseLogo 2s ease-in-out infinite;
}

#studio-logo img {
    width: 150px; /* Настройте под ваш размер */
    height: auto;
    display: block;
}

/* Анимация пульсации */
@keyframes pulseLogo {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

#dots-loader {
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side, #ffffff 90%, #0000); /* Белый цвет */
    background: var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: l44 1s infinite linear alternate;
    margin: 0 auto 20px auto;
    display: block;
}

@keyframes l44 {
    0%,
    5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
    50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
    62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
    75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
    87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
    95%,
    100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}

#unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 155%);
    display: none;
    width: min(627px, 80vw);
}

#unity-progress-bar-empty {
    width: 100%;
    height: clamp(35px, 8vw, 47px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); /* Белый градиент */
    border-radius: clamp(30px, 10vw, 48px);
    border: 2px solid #ffffff; /* Белая рамка */
    position: relative;
    overflow: hidden;
    padding: clamp(4px, 2vw, 6px);
    box-sizing: border-box;
}

#unity-progress-bar-full {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffffff, #e6e6e6); /* Белый градиент */
    border-radius: clamp(25px, 8vw, 35px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Белая тень */
    transition: width 0.2s ease;
}

#unity-progress-text {
    color: #ffffff; /* Белый цвет текста */
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 3vw, 14px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: clamp(6px, 2vw, 8px);
    text-align: center; /* Центрируем текст */
    width: 100%; /* Занимает всю ширину */
}