body { padding: 0; margin: 0 }

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-loading-bar.fade-out {
    animation: fadeOut 2s forwards; /* Анимация плавного исчезновения */
    pointer-events: none;
}
#unity-logo
{
    width: 256px;
    height: 256px;
    background: url('icons/logo.webp') no-repeat center;
    background-size: contain;
    animation: fadeIn 2s, bounce 6s linear infinite;
}
#unity-logo.fade-out {
    animation: fadeOut 2s forwards;
    display: none/* Анимация плавного исчезновения */
}

#unity-progress-bar-empty { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-light.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-light.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }


#main-webgl-container {
    position: fixed center;
    width: 100%;
    height: 100%;
    background-image: url('icons/loading.webp');
    background-size: cover;
    background-position: center;
    display: none;
    filter: blur(2px) brightness(0.4);
    pointer-events: none;
}
#main-webgl-container.remove-effects {
    animation: removeEffects 0.6s forwards;
}
/* Анимация отключения эффектов */
@keyframes removeEffects {
    100% {
        filter: none;
        display: none;
    }
}
@keyframes fadeOutButton {
    100%
    {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5); /* Сохраняем translate */
        display: none;
        pointer-events: none;
    }
}
/* Анимация плавного появления */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;

    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

/* Анимация баунса вверх-вниз */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes zoomBounce {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1); /* Сохраняем translate */
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1); /* Сохраняем translate */
    }
}

/* Copyright logo styles */
#copyrightLogo {
    const scaleFactor = 1.77777777;
    display: none; /* Hidden by default until checked */
    position: absolute;
    bottom: 10px; /* Position at bottom */
    left: calc(960px + 317px + var(--logo-offset, 32px));
    transform: translateX(0); /* No centering, just offset from left */
    z-index: 1000; /* Above Unity canvas */
    max-width: 64px; /* Match medium size (128x128px) */
    width: 100%; /* Responsive scaling */
    height: auto; /* Maintain aspect ratio */
}

/* Дополните существующий стиль */
#unity-canvas {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;   /* ← важно! margins не будут увеличивать размер */
    display: block;
}

/* Если применяете margins к #unity-container */
#unity-container {
    position: fixed;
    inset: 0;                 /* вместо width/height 100% */
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}

/* На мобильных устройствах часто баннеры только снизу или сверху */
@media (max-width: 600px) {
    #unity-canvas {
        /* Дополнительная защита от слишком больших отступов */
        max-height: 100vh;
    }
}