/* Экран справочника.
   ------------------------------------------------------------------
   Прежде это было модальное окно поверх игры: оно гасило экран, приходило со
   своими кнопками старого образца и круглым крестиком, а содержимое сводилось
   к семнадцати строкам по одному предложению.

   Первая попытка сделать из него экран дала ровный текстовый лист: читать
   можно, смотреть не на что. Справочник открывают, когда чего-то не поняли,
   и глаз должен сразу находить нужный кусок, а не идти по строкам подряд.
   Отсюда три вещи, которых тут не было: знак у раздела, выделенное главное
   правило и разная плотность у заголовков разных уровней.

   Рамок и подложек нет намеренно: их даёт общая оболочка, и коробка вокруг
   текста ничего не сообщает. Разделяет воздух и волосяная черта. */

/* Экран был чёрным листом с текстом. У всех прочих экранов за содержимым
   стоит сцена, и справочник выбивался именно этим. Берём фон вкладки заказов
   — доска объявлений под деревьями подходит справочнику по смыслу лучше
   прочих — и глушим его почти в ноль: читаемость текста тут важнее картинки,
   фон нужен только чтобы экран не был пустотой. */
.hb-app .hb-guide-screen {
  position: relative;
  display: block;
  /* те же поля, что у экрана заказов: без верхнего отступа заголовок
     упирался в верхнюю панель и срезался по строчным выносным */
  padding: 26px 30px 40px;
  min-height: 0;
  overflow-y: auto;
}

/* Фон кладём прямо на экран, а не отдельным слоем позади: у приложения своя
   непрозрачная подложка, и слой с отрицательным z-index уходил за неё, так что
   экран оставался чёрным. */
.hb-app .hb-guide-screen {
  background:
    linear-gradient(180deg, rgba(8, 13, 9, .88), rgba(8, 13, 9, .96)),
    url("../images/bg-bounties-v1.png") center / cover no-repeat;
  background-attachment: local, local;
  image-rendering: pixelated;
}

.hb-app .hb-guide-lede {
  margin: 6px 0 34px;
  max-width: 62ch;
  color: var(--muted, #8ea89b);
  font-size: 14.5px;
  line-height: 1.6;
}

.hb-app .hb-guide-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 46px;
  align-items: start;
}

@media (max-width: 1180px) {
  .hb-app .hb-guide-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---- шапка раздела ---- */

.hb-app .hb-guide-section > header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line2, #1a241f);
}

/* Знак раздела — тот же спрайт, что стоит в навигации, приглушённый до
   лаймового силуэта. Маской, а не картинкой: иначе шесть разноцветных
   иконок в тексте начнут спорить между собой. */
.hb-app .hb-guide-mark {
  width: 34px;
  height: 34px;
  background-color: var(--lime, #b7f24a);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  opacity: .85;
}

.hb-app .hb-guide-section h2 {
  margin: 0 0 4px;
  font-family: var(--disp, "Alagard", serif);
  font-size: 24px;
  line-height: 1.12;
  color: var(--ivory, #eaf5ee);
  letter-spacing: .3px;
}

.hb-app .hb-guide-section > header p {
  margin: 0;
  color: var(--muted, #8ea89b);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---- статьи ---- */

.hb-app .hb-guide-entries {
  display: grid;
  gap: 18px;
}

.hb-app .hb-guide-entry {
  padding-left: 14px;
  border-left: 2px solid var(--line2, #1a241f);
}

.hb-app .hb-guide-entry h3 {
  margin: 0 0 4px;
  font-family: var(--body, "Pixel Operator", monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--ivory, #eaf5ee);
  letter-spacing: .2px;
}

/* Строка справочника — объяснение, а не подпись под кнопкой, поэтому ширина
   ограничена по числу знаков: длинная строка на широком мониторе читается
   хуже короткой, сколько бы места ни было. */
.hb-app .hb-guide-entry p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted, #8ea89b);
  font-size: 13.5px;
  line-height: 1.62;
}

/* Главное правило раздела. В каждом разделе ровно одно, и это то самое, что
   чаще всего понимают неправильно.

   Раньше оно красилось лаймом целиком — и заголовок, и черта, и текст. На
   шести разделах сразу это дало шесть цветных пятен и стало похоже на
   подсветку маркером в чужом учебнике. Достаточно, чтобы черта слева стала
   заметнее: глаз находит её так же быстро, а экран остаётся спокойным. */
.hb-app .hb-guide-entry.is-key {
  border-left-color: color-mix(in srgb, var(--lime, #b7f24a) 55%, var(--line2, #1a241f));
  border-left-width: 3px;
  padding-left: 13px;
}

/* ---- обходы подсказок ---- */

.hb-app .hb-guide-section--tours {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--line2, #1a241f);
}

.hb-app .hb-guide-section--tours > header {
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
}

.hb-app .hb-guide-tours {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hb-app .hb-guide-tours .hb-ledger-button {
  min-height: 42px;
}