/* Игра занимает весь контейнер, который выдала площадка. Никаких внешних отступов
   и никаких фиксированных размеров: белые поля вокруг canvas берутся именно оттуда. */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1F1F20;
}

body {
  /* Долгое нажатие и двойной тап на телефоне не должны выделять текст страницы
     или подсвечивать её: всё управление принимает на себя Unity. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#unity-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Соотношение сторон держит камера самой игры, а не CSS: она подгоняет высоту
   обзора под фактическое окно. Поэтому canvas честно занимает весь контейнер и
   картинка при этом не растягивается непропорционально. */
#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #1F1F20;
}

/* Загрузочный экран: своя картинка вместо пустоты и заставки Unity.
   Цвет фона совпадает с тёмной частью рисунка, поэтому до его подгрузки и по краям
   на непривычном соотношении сторон экран не мигает белым. */
#loading-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #1b1038;
}

/* На рисунке есть текст: название игры сверху и плашка «Загрузка...» снизу.
   Обрезать его нельзя, поэтому картинка вписывается целиком, а не перекрывает окно,
   как фоны меню. Пропорции при этом не насилуются: коробка сама всегда 16:9, ровно
   как исходник, — отсюда пара ограничений через размеры окна. Поля по краям
   заливает тот же тёмный цвет и они не читаются как пустота. */
#loading-art {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc(100vh * 16 / 9);
  max-height: calc(100vw * 9 / 16);
  background-image: url('loading.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

/* Полоса прогресса привязана к самому рисунку, а не к окну: иначе на широком
   экране она уезжала бы от плашки «Загрузка...» вниз, в пустое поле. */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  transform: translateX(-50%);
}

/* Полоса загрузки нарисована стилями, без картинок Unity. */
#unity-progress-bar-empty {
  width: min(46vw, 420px);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fe3d0, #ffd6f2);
  transition: width 0.15s linear;
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  font-family: system-ui, sans-serif;
  font-size: 15px;
  border-radius: 8px;
  overflow: hidden;
  display: none;
}