/* 1. Налаштування тіла сторінки */
html, body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000 !important; /* Агресивно чорний фон */
}

/* 2. Контейнер гри (центрування) */
#unity-container {
  /* Важливо: залишаємо flex для центрування канваса */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000 !important; /* Агресивно чорний фон */
}

/* 3. Канвас (ГОЛОВНА ЛОГІКА) */
#unity-canvas {
  aspect-ratio: 1920 / 1080; /* Фіксоване співвідношення сторін */
  /* Змінено: використовуємо max-width/max-height, щоб канвас не перевищував розмір контейнера */
  max-width: 100%; 
  max-height: 100%;
  /* ОСНОВНИЙ ФІКС: object-fit: contain гарантує чорні смуги, якщо співвідношення сторін екрана не збігається з 16:9 */
  object-fit: contain; 
  background: #000 !important; /* Чорний фон для запобігання світлому прямокутнику */
}

/* 4. Елементи завантаження (центрування прогрес-бара) */
#unity-loading-bar { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  display: block; 
  background-color: transparent !important;
}

/* Приховуємо оригінальний логотип Unity, який містить світлий фон */
#unity-logo { 
  display: none !important; 
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Створюємо прозорий заповнювач на місці логотипу */
#unity-logo-placeholder {
  width: 154px; 
  height: 130px; 
  background-color: transparent;
  margin: 0 auto;
}

#unity-progress-bar-empty { 
  width: 141px; 
  height: 18px; 
  margin: 10px auto 0 auto; /* Центрування по горизонталі */
  background: url('progress-bar-empty-dark.png') no-repeat center;
  position: relative;
}
#unity-progress-bar-full { 
  height: 18px; 
  position: absolute; 
  left: 0; 
  top: 0;
  background: url('progress-bar-full-dark.png') no-repeat center;
  /* Ширина встановлюється JS */
}

/* 5. Footer та кнопка Fullscreen */
#unity-footer { 
  /* Важливо: використовуємо absolute, щоб вивести футер з потоку flex і не зміщувати канвас */
  position: absolute; 
  bottom: 0; 
  right: 0; 
  width: auto;
  height: auto;
  padding: 10px;
  background-color: transparent;
}

/* Приховуємо логотип і назву в футері */
#unity-logo-title-footer, #unity-build-title {
  display: none !important;
}

/* Кнопка повного екрана - візуальна частина */
#unity-fullscreen-button { 
  cursor:pointer; 
  float: right; 
  width: 38px; 
  height: 38px; 
  background: url('fullscreen-button.png') no-repeat center;
}

/* Прозорий оверлей для натискання (активатор повного екрана) */
#fullscreen-touch-overlay {
  position: absolute;
  /* Розмір і позиція, як у кнопки */
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  background-color: transparent;
  z-index: 1000; /* Перекриває оригінальну кнопку */
  cursor: pointer;
}

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }