* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000a23;
}

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

#unity-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #000a23;
}

/* ─── Warning banner ───────────────────────────────────────────────────────── */

#unity-warning {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 100;
  border-radius: 8px;
  overflow: hidden;
  max-width: 90%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Внешний экран загрузки (penguice-loading) — фон/лого/бар/текст, живёт ДО
   старта Unity и гасится по alpha, когда createUnityInstance() зарезолвится.
   Дизайн — фиксированная сцена 1080x1920, масштабируется целиком под окно
   (см. #penguice-loading transform в index.js). Один в один с
   Loading Assets/loading-preview.html — тот файл и есть эталон для правок.
   ═══════════════════════════════════════════════════════════════════════════ */

/* cover-fit, не contain-fit: экран заполняется ВСЕГДА (без чёрных полос
   сверху/снизу на нестандартных соотношениях сторон), лишнее обрезается.
   Заякорено по НИЖНЕМУ краю (bottom:0, transform-origin: bottom center) —
   если что-то обрезается, то сверху (фон/лого), а не снизу — бар и текст
   статуса внизу должны быть видны всегда.
   Масштаб — ЧИСТЫЙ CSS (calc/max с vw/vh), НЕ JS: JS-вариант (Math.max в
   index.js resize()) не помогал, потому что браузер успевает нарисовать
   самый первый кадр ДО того как скрипт вообще выполнится — на телефоне
   несмасштабированные 1080x1920 настоящих пикселей на миг показываются
   "как расстянуто под ПК"/зумом. CSS считается движком лэйаута сразу же,
   до и без JS, гонки по времени тут в принципе быть не может. */
#penguice-loading {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 1080px;
  height: 1920px;
  transform: translateX(-50%) scale(max(calc(100vw / 1080px), calc(100vh / 1920px)));
  transform-origin: bottom center;
  background: #000a23;
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  z-index: 50;
  transition: opacity 0.5s ease-out;
}

#penguice-loading.pl-hidden {
  opacity: 0;
  pointer-events: none;
}

#pl-bg {
  position: absolute;
  top: 0; left: 0;
  width: 1080px; height: 1920px;
  object-fit: cover;
  display: block;
}

/* ── Логотип ──
   Размер — ровно 15% высоты дизайн-холста (0.15 * 1920 = 288px). Раз весь
   #penguice-loading масштабируется целиком одним CSS transform (см. выше),
   фиксированный px-размер внутри холста уже означает постоянный % от
   реальной высоты экрана на любом устройстве — доп. vh тут не нужны.
   top: 130 -> 260 -> 340 — на экранах короче/шире дизайна (1080x1920)
   cover-fit обрезает сверху (см. #penguice-loading), и лого первым теряет
   отступ до края. Больше запаса — меньше шанс, что упрётся в самый верх. */
#pl-logo-wrap {
  position: absolute;
  top: 318px;
  left: 50%;
  width: 331px;
  height: 331px;
  margin-left: -166px;
  opacity: 0;
  transform: scale(0.7);
}
#pl-logo-wrap img {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(0, 20, 60, 0.55));
}

/* ── Строка загрузочного бара ──────────────────────────────────────────
   left/right/center/bar сделаны в одном холсте 128x128 — все 4 элемента
   ставим одной и той же высотой (масштаб x0.8 от исходника, 102.4px) и
   одним top:0, тогда их собственные внутренние отступы автоматически
   совпадают друг с другом. Общая ширина строки (800px) не трогается —
   только высота, трек забирает освободившееся от уменьшенных иконок
   место по горизонтали. ── */
#pl-bar-row {
  position: absolute;
  top: 1630px;
  left: 50%;
  width: 800px;
  height: 102.4px;
  margin-left: -400px;
}

#pl-bar-row .pl-cap {
  position: absolute;
  top: 0;
  width: 102.4px;
  height: 102.4px;
}
#pl-bar-row .pl-cap img { width: 100%; height: 100%; display: block; }
#pl-cap-left  { left: 0; }
#pl-cap-right { right: 0; }

#pl-track {
  position: absolute;
  left: 102.4px;
  right: 102.4px;
  top: 0;
  height: 102.4px;
  background-image: url('center.png'); /* относительно самого style.css — он и так лежит в TemplateData/ */
  background-size: 100% 100%;
}

/* fill-wrap лежит ВНУТРИ #pl-track (не рядом), чтобы его width:% считался
   от реальной ширины трека, а не от всей строки бара. */
#pl-fill-wrap {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%; /* анимируется через JS, 0..100% от ширины track */
  overflow: hidden;
}

/* Заливка нарисована чистым CSS-градиентом (цвета сняты пипеткой с
   bar.png), а не через border-image: 9-slice на плавном градиенте даёт
   видимые швы на стыках "плиток". Позиция/высота/радиус подобраны так,
   чтобы плашка легла в ту же полосу, где была в bar.png. */
#pl-fill {
  position: absolute;
  left: 0;
  top: 29.6px;
  height: 46.4px;
  width: 100%;
  min-width: 17.6px;
  border-radius: 8.8px;
  background: linear-gradient(to bottom, #a2bded, #6b93c8);
  box-sizing: border-box;
}

/* ── Текст статуса ── */
#pl-status-text {
  position: absolute;
  top: 1780px;
  left: 50%;
  width: 900px;
  margin-left: -450px;
  text-align: center;
  color: #cfe0ff;
  font-size: 27.2px;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 10, 35, 0.8);
  user-select: none;
}