:root { color-scheme: light; background: #7fb8e0; --app-height: 100dvh; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #7fb8e0; font-family: Arial, sans-serif; }
#unity-container { position: fixed; inset: 0; width: 100vw; height: var(--app-height); min-width: 0; min-height: 0; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#unity-canvas { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: #7fb8e0; touch-action: none; }
#unity-canvas:focus { outline: none; }

/* Без padding на самой секции: абсолютные дети (арт и градиент) ложатся внутрь него,
   и по краям экрана оставалась рамка. Отступы теперь на самом тексте. */
#unity-loading-bar { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 0; padding: 0; text-align: center; background: #8ec6ea; transition: opacity .45s ease; overflow: hidden; }
/* Рисунок лежит под текстом и обрезается по краям, а не сжимается: композиция острова
   должна оставаться по центру на любом соотношении сторон. */
.splash-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  /* cover, а не contain: композиция обрезается по краям, но не оставляет полей и не
     искажается на нестандартных пропорциях окна. */
  object-fit: cover; object-position: center 42%;
  /* Явная привязка ко всем строкам сетки: абсолютный элемент всё равно получает свою
     ячейку при авто-размещении и иначе сдвигает подвал с прогрессом наверх. */
  grid-row: 1 / -1; grid-column: 1; }
/* Тёмная подложка сверху и снизу — иначе белый заголовок теряется на светлом небе. */
#unity-loading-bar::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,18,28,.62) 0%, rgba(8,18,28,.12) 30%, rgba(8,18,28,.2) 58%, rgba(8,18,28,.78) 100%); }
/* Строки заданы явно. Картинка занимает все три, поэтому авто-размещение уводило
   подвал с прогрессом в среднюю строку, прямо под заголовок. */
.splash-top { position: relative; z-index: 2; grid-row: 1; grid-column: 1; padding: clamp(20px, 5vh, 56px) 24px 0; }
.splash-bottom { position: relative; z-index: 2; grid-row: 3; grid-column: 1; align-self: end; padding: 0 24px clamp(20px, 5vh, 56px); }
#unity-loading-bar.hidden { opacity: 0; pointer-events: none; }
.brand { font-size: clamp(26px, 6.4vw, 62px); letter-spacing: .06em; font-weight: 700; color: #fff6dc; text-shadow: 0 3px 16px rgba(0,0,0,.6); }
.brand-sub { margin-top: 8px; font-size: clamp(13px, 1.6vw, 18px); color: #e6f0f6; opacity: .9; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
#unity-progress { width: min(520px, 78vw); height: 6px; margin: 14px auto 0; overflow: hidden; background: rgba(255,255,255,.25); border-radius: 3px; }
#unity-progress-fill { width: 0; height: 100%; background: #ffcf5c; transition: width .18s ease; }
#unity-loading-text { color: #fff; font: 14px/1.4 Arial, sans-serif; margin-top: 10px; }
#unity-loading-note { margin-top: 10px; color: rgba(255,255,255,.8); font: 13px/1.5 Arial, sans-serif; text-align: center; max-width: min(520px, 82vw); margin-left: auto; margin-right: auto; }
#unity-warning { position: fixed; left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); z-index: 20; padding: 10px 14px; color: #3d2b00; background: rgba(255,207,92,.95); border: 1px solid #cc9a2e; text-align: center; font: 14px Arial, sans-serif; border-radius: 6px; }
#unity-warning:empty { display: none; }

/* Игра рассчитана только на горизонтальную ориентацию (камера над островом). */
#rotate-overlay { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay { display: flex; position: fixed; inset: 0; z-index: 9999;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 40%, #3d6d9e 0, #1c3550 70%);
    text-align: center; padding: 32px; }
  #unity-container { visibility: hidden; }
  .rotate-icon { font-size: 64px; animation: rotateHint 2.2s ease-in-out infinite; }
  .rotate-title { color: #fff6dc; font: 600 24px/1.3 Arial, sans-serif; letter-spacing: .02em; }
  .rotate-note { color: #d9e8f5; font: 15px/1.5 Arial, sans-serif; max-width: 80vw; }
}
@keyframes rotateHint { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-90deg)} }