/* Подземелье — заход 13: облик «иллюстрированная книга» (см. .impeccable.md).
   Палитра бумаги и чернил ЖИВЁТ ЗДЕСЬ (переопределяет :root старого style.css —
   тот файл сам палитру не хранит, только ссылается на переменные, см. правки в
   style.css: разбросанные hex-цвета собраны в var(), значения — тут одни на всё).
   Стили экрана партии (иллюстрация, служебное, компоновка «книги») — тоже здесь:
   style.css и так на пределе своего необъявленного лимита, заход не имеет права
   доливать в него ни палитру, ни вёрстку экрана партии. Подключается ПОСЛЕ
   style.css обычным тегом с меткой версии — см. index.html. */

:root {
  --bg: #efe0c4;
  --panel: #e4d1a4;
  --line: #2b1d10;
  --text: #2b1d10;
  --dim: #4a3a28;
  --accent: #2b1d10;
  --good: #3f5726;
  --bad: #7a2e22;
  --cream: #f6ecd6;
  --track: #cbb98d;
  --hp-fill: #7a2e22;
  --enemy-fill: #5b6b3f;
  --chip-hit-border: #3f5726;
  --chip-miss-border: #7a2e22;
  --overlay-bg: rgba(43, 29, 16, .82);
  --stone: #c9b98e;
}

body { font-family: Georgia, "Times New Roman", serif; }

/* ---------- экран партии: страница книги ---------- */

#game-topbar {
  flex: none;
  height: calc(22px + env(safe-area-inset-top));
  background: var(--bg);
}

/* Иллюстрация — примерно 45-48% экрана (см. задание). Кадр обложки едет вниз по
   гравюре с глубиной: background-size растягивает картинку ровно по ширине, она
   становится выше своей рамки, и position-y (считает js/cover.js) выбирает кусок. */
.illust {
  flex: 0 0 46vh;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--stone);
  background-repeat: no-repeat;
  border-bottom: 2px solid var(--line);
}
.illust.illust-photo { background-size: 100% auto; }
/* Без картинки — не рисунок кодом, а титульная заставка книги: своя, более светлая
   бумага (var(--cream)) отличает её от каменного фона под картинкой (var(--stone)),
   читается как страница, а не как ещё не загруженное фото. */
.illust.illust-blank { display: flex; flex-direction: column; background-color: var(--cream); }
.illust-plate-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 16px 22px 0;
}
/* Скромная рамка полем: тонкий контур плюс отступ на inset-рамку — двойная линия
   по краю всей заставки, как форзац старого издания. */
.illust-plate {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 10px 18px;
}
.illust-plate::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--line);
  pointer-events: none;
}
/* Тонкая двойная линейка над именем мира — тот же приём, что открывает главу
   в иллюстрированном издании. */
.illust-rule {
  width: 56%;
  height: 3px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.illust-worldname {
  margin: 0;
  max-width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: .5px;
  line-height: 1.15;
  color: var(--line);
  text-align: center;
}
.illust-mark {
  color: var(--line);
  font-size: 13px;
  letter-spacing: 2px;
}
.illust-mood {
  margin: 0;
  max-width: 92%;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.35;
  color: var(--dim);
  text-align: center;
}
/* Буквица у первой строки настроения мира — увеличенный прямой (не курсивный)
   первый знак, единственный явно декоративный штрих на всей заставке. */
.illust-mood::first-letter {
  font-style: normal;
  font-size: 1.9em;
  color: var(--line);
}
.illust-caption {
  flex: none;
  padding: 8px 14px 10px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--dim);
}

.game-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  overflow: hidden;
}

/* Служебное — сжато до нескольких мелких строк, никогда не соревнуется с рассказом.
   Явный line-height обязателен: без него строки наследуют общий body{line-height:1.45}
   и раздувают пять строк служебного почти вдвое против их реального содержимого —
   именно это отъедало место у рассказа боя (заход 13, возврат №1). */
#hud { padding-bottom: 4px; line-height: 1.16; }
#hud .hrow { font-size: 13px; margin: 0 0 2px; }
#hud .hrow b { font-size: 15px; }
.hpwrap { margin: 3px 0 1px; }
.hpbar { border: 1px solid var(--line); border-radius: 2px; }
.quals, .inv { font-size: 11.5px; }
.inv { margin-top: 1px; }

.subrow { gap: 6px; }
#floor-strip { flex: 1 1 auto; min-width: 32px; overflow-x: auto; white-space: nowrap; padding: 4px 2px; }

/* Рассказ — ядро игры, служебное и кнопки не имеют права его вытеснить целиком
   (заход 13, возврат №1): сцена и боевой вид держат гарантированный минимум высоты,
   а если после этого кнопкам не хватает места — прокручиваются они сами (у #actions
   уже есть overflow-y:auto), а не наоборот. overflow:hidden на #combat-view — вторым
   рубежом: даже если что-то не влезло, оно не расползётся поверх кнопок под ним. */
#scene, #combat-view { min-height: 22vh; }
#combat-view { overflow: hidden; }
#actions { flex: 0 1 auto; }

/* Мелкие кнопки ряда (Журнал / Броски / Картинка): не ниже 44 точек, как и все
   остальные — мелкая кнопка не значит кнопка ниже порога нажатия пальцем. */
.mini {
  flex: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  font-size: 11px;
  font-family: inherit;
  border-radius: 6px;
}
.mini.mini-off { opacity: .55; }

#scene { font-family: Georgia, "Times New Roman", serif; }

.erow { font-size: 13px; margin-bottom: 4px; }
.ebar { border: 1px solid var(--line); }

/* Кнопки действий партии — компактнее общих (там их до четырёх разом, а над ними уже
   иллюстрация в 46% экрана): порог приёмки — не ниже 44 точек, не 56/64 «с запасом»
   как на остальных экранах. Правится только здесь — титул, сбор героя, летопись не
   трогаем, у них места достаточно. */
#scr-game .act { min-height: 44px; margin-top: 6px; padding: 6px 16px; }
#scr-game .act.big { min-height: 50px; font-size: 19px; }

/* ---------- плашка броска: чернила и сепия, не старый чёрно-зелёный экран ---------- */
.roll-flash .num { background: var(--cream); color: var(--line); border-width: 3px; }
.roll-flash .num.hit { color: var(--good); border-color: var(--good); }
.roll-flash .num.miss { color: var(--bad); border-color: var(--bad); }