body { padding: 0; margin: 0;}
#unity-container { display: flex; justify-content: center; width: 100%; height: 100%; }
#unity-canvas { max-width: 1080px; height: 100%; background: #transparent; width: calc((100vh - 200px)*(320 / 599)); }
#unity-loading-bar {
    position: absolute;
    left: 50%; /* Центрування */
    bottom: 20px; /* Відступ від нижнього краю */
    width: calc((100vh) * (310/599));
    max-width: 788px; /* Максимальна ширина */
    margin: 0 auto; /* Вирівнювання по центру */
    transform: translateX(-50%); /* Центрування з урахуванням `left: 50%` */
    display: block;
}

@media screen and (min-width: 769px) {
    #unity-loading-bar {
        width: calc((100vh - 140px) * (310/599));
    }
}

#unity-logo { display: none; width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty {
    width: 80%; /* Займає 80% ширини екрана */
    max-width: 788px; /* Максимальна ширина прогресбара */
    aspect-ratio: 788 / 45; /* Зберігає пропорції 788:45 */
    background: url('progress-bar-empty-dark.png') no-repeat center;
    background-size: contain; /* Масштабування фону */
    position: relative; /* Для абсолютного позиціонування заповнення */
    margin: 0 auto; /* Центрування на сторінці */
}
#unity-progress-bar-full
{
    width: 50%; /* Ширина заповнення (50% для прикладу) */
    height: 16px; /* Фіксована висота заповнення */
    max-width: 94%; /* Максимальна ширина заповнення */
    background: url('progress-bar-full-dark.png') no-repeat left center;
    background-size: contain; /* Масштабування фону */
    position: absolute;
    top: 50%; /* Центрування по вертикалі */
    transform: translateY(-50%); /* Центрування з урахуванням висоти */
    margin-left: 15px;
}
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

#sleepagotchiBG {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0%;
    object-fit: cover;
}

#sleepagotchiBG-game {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0%;
    object-fit: cover;
    z-index: -1;
}

#sleepagotchiLogo {
    position: absolute; /* Фіксація позиції */
    top: 20%; /* Відцентрування з вертикальним зсувом (40% від висоти сторінки) */
    left: 50%; /* Центрування по горизонталі */
    transform: translate(-50%, -50%); /* Центрування з урахуванням розміру елемента */
    max-width: 705px; /* Максимальна ширина з урахуванням відступів */
    width: 100%; /* Адаптація до ширини екрана */
    height: auto; /* Пропорційне масштабування */
    z-index: 10; /* Вивід над іншими елементами */
    padding: 0 25px; /* Відступи зліва та справа */
    box-sizing: border-box; /* Врахування паддингів у розмір */
}

#loading-text {
    font-size: 32px; /* Розмір шрифту */
    color: #ffffff; /* Колір тексту */
    text-align: center; /* Вирівнювання по центру */
    margin-bottom: 10px; /* Відступ між текстом і прогресбаром */
    position: relative; /* Відносне позиціонування для тексту */
    font-family: Arial, sans-serif;
}

@media screen and (max-width: 768px) {
    #unity-canvas { max-width: 1080px; height: 100%; width: 100%; }
}