/* ═══ css/base.css ════════════════════════════════════════════════════════════════════════════════════════════════════
   Общее: цвета, шрифты, раскладка страницы.
   Облик один на всю игру (замечание владельца 27.09: «не сочетается ни с чем, режет глаз»): тёмный камень и
   золото нового («мраморного») интерфейса «Осады» - рамки FramedWindow, портреты, кнопки. Светлого пергамента
   и пёстрых текстур под текстом нет. Цвета, шрифты, размеры, картинки - в data/interface (DefaultControls.dat и окна,
   v18.22); здесь и в остальных css - движок облика и места правил.
   Тёмной/светлой темы нет: цвета заданы явно. Страница не прокручивается (на телефоне сдвигала вид).

   Разделы файла:
     1. Цвета, шрифты, страница
     2. Экран боя
     3. Заставка загрузки
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Цвета, шрифты, страница ─────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* палитра наброска 064 (задача 074, одобрен 16.10): тёмный сланец, золото кромки, кнопки по важности - синяя, зелёная,
     золотая, красная, камень; шрифты - Alegreya SC (заголовки, цифры) и PT Sans (текст). При разборе облика в дату
     (stand/tools/css2dat.py) - блоки Color и FontFamily в DefaultControls.dat (имена - stand/tools/colors.json) */
  color-scheme: dark;
  --r: 10px;
  --r-s: 7px;
  --shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  --stroke:
    0 1px 0 rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9), 0 0 1px #000; /* обводка цифр и надписей на кнопках */
  /* верх экрана: вырез телефона (чёлка, остров) - safe-area (замечание владельца 27.09: «делать под андроид и айфон,
     а не под мой обрезанный браузер» - шапку просмотрщика Claude больше не обходим) */
  --top-free: var(--safe-t);
  /* вырезы телефона в точках интерфейса (280): внутри #app всё увеличено в --uiz раз, вырез - в точках экрана, поэтому
     делится на --uiz (иначе на уменьшенном интерфейсе отступ от чёлки меньше самой чёлки). Масштаб --uiz - по месту
     без вырезов (ui/gui.js fitScale, проба - .safeprobe ниже) */
  --safe-l: calc(env(safe-area-inset-left, 0px) / var(--uiz, 1));
  --safe-r: calc(env(safe-area-inset-right, 0px) / var(--uiz, 1));
  --safe-t: calc(env(safe-area-inset-top, 0px) / var(--uiz, 1));
  --safe-b: calc(env(safe-area-inset-bottom, 0px) / var(--uiz, 1));
  /* место эмблемы игры (097; владелец 17.10: «должна всегда быть статична, на одном месте и одного размера … если она
     где-то появилась, то должна и быть там, пока не сменится экран»): одно на все экраны - заставка загрузки, вход,
     регистрация, поиск боя, «игрок против противника», загрузка поля войны; в точках интерфейса (на ПК - × --uiz).
     Здесь, а не в дате: заставка видна раньше, чем загружены данные, а место у всех экранов должно быть одно */
  /* 098 (владелец 17.10: «в регистрации создать и войти можно сделать меньше, следовательно лого можно будет расширить»;
     «по поиску все можно сместить чуть ниже, и тогда лого можно сделать больше») - 136×84 -> 175×108: место - от
     меньших кнопок регистрации (самое высокое окно под эмблемой, экран 390 точек) */
  --logo-top: calc(var(--safe-t) + 6px); /* сверху по середине: отступ */
  --logo-w: 175px; /* ширина (картинка 682×420 - высота 108) */
  --logo-h: 108px; /* высота */
  --logo-left: calc(var(--safe-l) + 10px); /* низкий экран (до 389): слева по середине высоты */
  --logo-lw: 175px; /* ширина там */
  --logo-lh: 108px; /* высота там (задана, а не auto: до расшифровки картинки место то же, эмблема не «вырастает») */
}

/* размеры - с полями и рамкой (как в наброске 064): ширина элемента - вся его ширина */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
/* iPhone боком сам увеличивает шрифт страницы (Safari: text-size-adjust; 280) - у нас интерфейс один экран, крупность -
   --uiz: шрифт - ровно как в облике */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  height: 100%;
  height: 100dvh;
  margin: 0;
}
/* приложение с экрана «Домой» (iPhone, 114): 100dvh там верный только после поворота туда-обратно - запущенное
   вертикально и повёрнутое боком держало полосу сверху; 100vh - верный сразу (проверка - core/fullscreen.js
   watchHomeScreen) */
@media (display-mode: standalone) {
  html,
  body {
    height: 100vh;
  }
}
/* двойное касание страницу не приближает (077: «на двойной быстрый клик происходит приближение - в боях, в меню, в
   орденских боях; убери его»): у всех элементов - только прокрутка (и щипок, где он свой); у страницы и холста 3D - свои
   жесты ниже (none), у карт и списков с прокруткой - свои (pan-x pan-y) */
html,
html * {
  touch-action: manipulation;
}
/* меню картинки iPhone (187, снимок владельца: зажал значок артефакта в гарнизоне - вместо перетаскивания башни
   «Поделиться… / Сохранить в Фото»): долгое нажатие на картинку открывает меню системы, а не нажатие игры - у всей
   игры его нет (свойство наследуется), картинки система не тащит */
body {
  background: var(--bg0);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
img {
  -webkit-user-drag: none;
}
#app {
  position: fixed;
  overflow: hidden;
  zoom: var(--uiz, 1);
}
/* крупность интерфейса (v18.51, замечание владельца 05.10: «игра не адаптирована под другие платформы»): на большом
   экране всё в #app нарисовано как на телефоне и увеличено в --uiz раз (core/dom.js uiZoom, DefaultControls.dat
   ScreenScale). Холст 3D и заставка - в точках экрана (холст сам берёт размер экрана, заставка - по vh). Внутри #app
   vw/vh - только через calc(… / var(--uiz)): иначе они тоже увеличиваются */
#boot,
#stage canvas {
  zoom: calc(1 / var(--uiz, 1));
}
/* проба вырезов телефона (280): ui/gui.js fitScale и index.html читают её поля - вырезы в точках экрана; вне #app
   (без увеличения), не видна и не ловит касаний */
.safeprobe {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}
/* мышь (v18.52, ПК): под курсором кнопка чуть светлее (у .btn - своя подсветка, css/ui.css; у точек похода, лиг и
   пустых ячеек фильтр - свой, их не трогаем); то, что тянется мышью
   (карта похода, дорожка пропуска - core/dom.js dragScroll), - курсор «рука» */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):not(.btn):not(.cpt):not(.empty):hover {
    filter: brightness(1.15);
  }
  .cscroll,
  .proad {
    cursor: grab;
  }
}
button,
select,
input {
  font: inherit;
  color: inherit;
}
/* кнопка без своего облика - как обычный блок (плитки, карты, разделы - кнопки; облик - css/ui.css, css/menu.css) */
button {
  background: none;
  text-align: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}
.ico {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}
small {
}

/* ─── 2. Экран боя ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* экран боя - поверх меню, на весь экран; поле (#stage) - под всем интерфейсом боя, на весь экран (замечание владельца
   27.09: «обзор на поле боя на весь экран»), интерфейс - поверх него (css/battle.css) */
#battle {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg0);
}
#stage {
  position: absolute;
  overflow: hidden;
}
#stage canvas {
  display: block;
  touch-action: none;
}

#toast {
  position: fixed;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(560px, calc(90vw / var(--uiz, 1)));
  background: rgba(22, 17, 12, 0.96);
  pointer-events: none;
  box-shadow: var(--shadow);
}
#fps {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 4;
  font: 12px/1.3 var(--body);
  color: #fff;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* ─── 3. Заставка загрузки ───────────────────────────────────────────────────────────────────────────────────────── */
/* заставка загрузки (078: «логотип убрать, «Загрузка» и прогрессбар сделай стильно, по стилю интерфейса игры, ворота -
   на весь экран, как при загрузке боя»): ворота во весь экран (как экран поиска боя до 078), в арке - эмблема игры
   «Авангард» (096, вместо прежнего логотипа-замка), внизу - тёмное стекло с золотой каймой, на нём золотая «Загрузка…»
   шрифтом заголовков и полоса как у интерфейса (жёлоб, золотая заливка с бликом). Стоит поверх всего, пока меню не
   готово; сходит плавно.
   Запасные значения (194, владелец 25.10: «эмблема, картинка фона и полоска загрузки ... должны загружаться первыми,
   чтобы сразу отображать статус загрузки»): облик заставки - в DefaultControls.dat (Control Tag boot), но дата
   приходит после кода и всех дат-файлов (на медленной связи - десятки секунд); до неё заставку рисуют эти значения -
   те же, что в дате (место, ворота, стекло, полоса), ui/looks.js потом вписывает то же самое. Поменял в дате -
   поменяй и здесь (проверка - stand/tests/boot194.cjs). */
#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0b0806;
  overflow: hidden;
  transition: opacity 0.5s ease-out;
}
/* ворота - картинка bg_gate (ObjectsUIDesc.dat); качается первой (index.html, preload в начале страницы, 195) */
#boot .bt-gate {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat url(../data/textures/interface/bg_gate.webp);
}
#boot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.45));
}
#boot .bt-low {
  z-index: 2;
}
#boot.off {
  pointer-events: none;
}
/* на время входа (задача 085: окно «Вход» поверх заставки) полоса загрузки прячется - ворота остаются; эмблема - у окна
   входа своя, на том же месте (097) */
#boot.auth .bt-low,
#boot.auth .glogo {
  display: none;
}
/* эмблема игры на заставке (096, 097) - на общем месте эмблемы (ниже, .glogo); заставка в точках экрана (zoom 1/--uiz),
   эмблема - в точках интерфейса, как у окон */
#boot .glogo {
  z-index: 2;
  zoom: var(--uiz, 1);
}
/* эмблема игры - одно место на всех экранах (097, переменные --logo-* в :root): сверху по середине; на низком экране
   (до 389 точек - там окно регистрации под эмблемой не помещается) - слева по середине высоты. Не двигается и не
   меняет размер, пока экран тот же (поиск -> «игрок против противника», вход -> регистрация) */
.glogo {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: var(--logo-top);
  width: var(--logo-w);
  height: var(--logo-h);
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
#boot .bt-low {
  position: absolute;
  left: 50%;
  bottom: max(5vh, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  gap: 1.6vh;
  padding: 1.8vh 3vh 2.2vh;
  border-radius: 16px;
  width: min(58vw, 520px);
  display: grid;
  justify-items: center;
  background: linear-gradient(180deg, rgba(20, 26, 36, 0.82), rgba(8, 11, 16, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.18),
    inset 0 0 0 1px rgba(233, 192, 106, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#boot .bt-text {
  color: rgb(251, 227, 161); /* GoldLight, пока облик не загрузился */
  font: 700 min(4.4vh, 26px)/1 var(--display, 'Alegreya SC', serif);
  text-shadow:
    0 1px 0 #3a2200,
    0 0 2px #000,
    0 2px 6px rgba(0, 0, 0, 0.9);
}
#boot .bt-text.err {
  text-transform: none;
}
#boot .bt-bar {
  position: relative;
  width: 100%;
  height: min(3.4vh, 20px);
  border-radius: 999px;
  background: linear-gradient(180deg, #05080c, #121821);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 236, 190, 0.12),
    0 0 0 1px rgba(233, 192, 106, 0.45),
    0 0 0 2px rgba(0, 0, 0, 0.8);
}
#boot .bt-bar i {
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  clip-path: inset(0 100% 0 0);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(
      180deg,
      var(--gold-b-hi, rgb(255, 226, 138)),
      var(--gold-b, rgb(231, 169, 43)) 60%,
      var(--gold-b-lo, rgb(154, 101, 19))
    ); /* запасные значения - пока облик (DefaultControls.dat) не загрузился */
  box-shadow: 0 0 8px rgba(255, 210, 110, 0.55);
}

/* ─── 3.1. Заставка компании ─────────────────────────────────────────────────────────────────────────────────────── */
/* заставка компании перед загрузкой (200, владелец 26.10: «надо чтобы эта заставка была перед загрузкой и появлялась с
   каким-то коротким звуком. Процесс появления: черный фон и поверх него плавно проявляется картинка под короткий
   звук»): чёрный экран поверх всего, логотип по середине проявляется (--splash-in), держится (--splash-hold), заставка
   уходит (--splash-out) - под ней заставка загрузки. Анимации, а не таймеры страницы: игра грузится под заставкой и
   занимает страницу на секунду и дольше, а анимация прозрачности идёт сама (замер - журнал задачи 200). Время - только
   здесь, index.html берёт его отсюда; логотип не пришёл за --splash-wait от первого кадра (медленная связь) -
   заставка уходит без него (.off). Облик - те же значения, что DefaultControls.dat Control Tag splash (видна до кода и
   даты, как заставка загрузки; проверка - stand/tests/splash200.cjs). Вне #app - в точках экрана */
#splash {
  --splash-in: 1.2s;
  --splash-hold: 1.4s;
  --splash-out: 0.6s;
  --splash-wait: 3s;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background-color: rgb(0, 0, 0);
}
#splash img {
  height: min(60vh, 520px);
  max-width: 86vw;
  object-fit: contain;
  opacity: 0;
}
#splash.on img {
  animation: splash-in var(--splash-in) ease-out forwards;
}
#splash.on {
  animation: splash-out var(--splash-out) ease-in calc(var(--splash-in) + var(--splash-hold)) forwards;
}
#splash.off {
  animation: splash-out var(--splash-out) ease-in forwards;
}
@keyframes splash-in {
  to {
    opacity: 1;
  }
}
/* ушла - не ловит касания, пока страница её не убрала */
@keyframes splash-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ─── 3.2. Вопрос о звуке ────────────────────────────────────────────────────────────────────────────────────────── */
/* вопрос «Играть со звуком?» (205, владелец 26.10: «если нам надо нажатие, может сразу добавить вопрос играть со звуком
   или нет?»; «сделать менюшку выбора и применять просто там где он блокирован»): где браузер не даёт звук без касания -
   на чёрном экране заставки компании, до логотипа (index.html). Облик - как стекло заставки загрузки (золотая кромка),
   кнопки - игры (.btn, css/ui.css): «Да» - синяя главная, «Нет» - камень; цвета и шрифты - запасные, пока облик
   (DefaultControls.dat) не загрузился; те же значения - DefaultControls.dat Control Tag sndAsk (проверка -
   stand/tests/splash200.cjs). Вне #app - в точках экрана */
#sndAsk {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2.6vh;
  padding: 3.4vh 4vh 3vh;
  border-radius: 16px;
  width: min(80vw, 480px);
  background: linear-gradient(180deg, rgba(20, 26, 36, 0.82), rgba(8, 11, 16, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.18),
    inset 0 0 0 1px rgba(233, 192, 106, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.6);
}
#sndAsk .sa-q {
  color: rgb(251, 227, 161); /* GoldLight */
  font: 700 clamp(20px, 6.4vh, 32px)/1.1 var(--display, 'Alegreya SC', serif);
  text-align: center;
  text-shadow:
    0 1px 0 #3a2200,
    0 0 2px #000,
    0 2px 6px rgba(0, 0, 0, 0.9);
}
#sndAsk .sa-b {
  display: flex;
  gap: 3vh;
}
#sndAsk .btn {
  --hi: var(--stone-hi, rgb(135, 146, 163));
  --mid: var(--stone, rgb(82, 92, 107));
  --lo: var(--stone-lo, rgb(47, 54, 64));
  min-width: min(28vw, 150px);
  height: clamp(40px, 11vh, 54px);
  padding: 0 3vh;
  border-radius: 12px;
  color: rgb(255, 255, 255);
  font: 700 clamp(18px, 5.4vh, 26px)/1 var(--display, 'Alegreya SC', serif);
  cursor: pointer;
}
#sndAsk .btn.blue {
  --hi: var(--blue-hi, rgb(111, 182, 255));
  --mid: var(--blue, rgb(44, 126, 224));
  --lo: var(--blue-lo, rgb(22, 74, 154));
}
#sndAsk .sa-h {
  color: rgba(226, 232, 240, 0.72);
  font: 400 clamp(13px, 3.8vh, 17px)/1.25 var(--body, 'PT Sans', sans-serif);
  text-align: center;
}