/*
  СПРАВОЧНИК ОФИЦИАЛЬНЫХ ГАЙДОВ ИГРЫ — слой вёрстки.

  Подключается после всех остальных, поэтому его слово решающее в каскаде.
  Здесь только то, чего нет в forum.css: плитка разделов, карточки гайдов,
  figure с картинкой и подпись под ней, и оформление результатов поиска.
*/

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */
.hb-crumbs { display: flex; flex-wrap: wrap; gap: var(--s-1); font-size: var(--fs-meta); margin-bottom: var(--s-1); }
.hb-crumbs a { color: var(--accent-ink); text-decoration: none; }
.hb-crumbs a:hover { text-decoration: underline; }
.hb-crumbs span[aria-hidden] { color: var(--mute); user-select: none; }
.hb-crumbs span[aria-current] { font-weight: 600; }

/* ── Плитка разделов и гайдов ────────────────────────────────────────────── */
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); padding: 0; list-style: none; }
.hb-tile a { display: flex; flex-direction: column; gap: var(--s-fine); padding: var(--s-2) var(--s-2); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: var(--r); text-decoration: none; color: inherit; transition: border-color .15s, transform .12s; }
.hb-tile a:hover { border-color: var(--accent); transform: translateY(-1px); }
.hb-tile b { font-size: var(--fs-text); line-height: 1.3; }
.hb-tile__kind { font-size: var(--fs-eyebrow); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.hb-tile__lead { font-size: var(--fs-meta); color: color-mix(in srgb, var(--text) 70%, transparent); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Список разделов под гайдами ─────────────────────────────────────────── */
/* Вкладка стала короче, и разделы остались единственным входом в справочник:
   плитки читаются как навигация, а не как подписи к тексту правил. */
.hb-roots { gap: var(--s-1); margin: var(--s-1) 0 var(--s-fine); }
.hb-roots .hb-tile b { font-size: var(--fs-body); }

/* ── Тело гайда: текст + картинки ────────────────────────────────────────── */
.hb-guide { margin-top: var(--s-2); }
.hb-text {
  font-size: var(--fs-text);
  line-height: 1.65;
  margin-bottom: var(--s-2);
  overflow-wrap: anywhere;
  /* Переносы строки в тексте игры значимы: списки «условие → награда»
     читаются построчно, а абзац из них делает только пустая строка. */
  white-space: pre-line;
}
.hb-text p { margin: 0 0 var(--s-1); }
.hb-text strong { font-weight: 700; }

/* ── Фигура с картинкой и подписью ───────────────────────────────────────── */
.hb-fig { margin: var(--s-3) 0; }
.hb-fig picture { display: block; }
.hb-fig img { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.hb-fig figcaption { font-size: var(--fs-meta); color: var(--mute); margin-top: var(--s-fine); line-height: 1.4; padding-left: var(--s-hair); white-space: pre-line; }
.hb-fig figcaption p { margin: 0; }
.hb-fig figcaption strong { font-weight: 600; color: color-mix(in srgb, var(--text) 80%, transparent); }

/* ── Блок «Рядом в этом разделе» ─────────────────────────────────────────── */
.hb-siblings { margin-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); padding-top: var(--s-3); }
.hb-siblings__head { font-size: var(--fs-text); font-weight: 700; margin: 0 0 var(--s-1); }
.hb-siblings ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-fine); }
.hb-siblings a { font-size: var(--fs-small); color: var(--accent-ink); text-decoration: none; display: block; padding: var(--s-fine) 0; }
.hb-siblings a:hover { text-decoration: underline; }

/* ── Подвал страницы ─────────────────────────────────────────────────────── */
.hb-page__foot { margin-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); padding-top: var(--s-2); }
.hb-page__foot p { font-size: var(--fs-meta); }
.hb-page__foot a { color: var(--accent-ink); text-decoration: none; }
.hb-page__foot a:hover { text-decoration: underline; }

/* ── Поле поиска ─────────────────────────────────────────────────────────── */
.hb-search { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--text) 4%, transparent); margin: 0 0 var(--s-2); }
.hb-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.hb-search svg { width: 16px; height: 16px; flex: none; stroke: var(--mute); fill: none; stroke-width: 2; stroke-linecap: round; }
.hb-search input { flex: 1; border: none; background: none; font: inherit; font-size: var(--fs-text); color: inherit; outline: none; }
.hb-search input::placeholder { color: var(--mute); }
.hb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Результаты поиска ───────────────────────────────────────────────────── */
.hb-results { margin-bottom: var(--s-3); }
.hb-hits { list-style: none; margin: 0; padding: 0; }
.hb-hit { border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); padding: var(--s-1) 0; }
.hb-hit:last-child { border-bottom: none; }
.hb-hit > a { display: flex; align-items: baseline; gap: var(--s-1); text-decoration: none; }
.hb-hit > a b { font-size: var(--fs-text); color: var(--text); }
.hb-hit > a:hover b { color: var(--accent-ink); }
.hb-hit__where { font-size: var(--fs-eyebrow); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-hit__snippet { font-size: var(--fs-meta); line-height: 1.5; margin: var(--s-fine) 0 0; color: color-mix(in srgb, var(--text) 75%, transparent); overflow-wrap: anywhere; }
.hb-hit__snippet mark { background: color-mix(in srgb, var(--accent) 20%, transparent); color: inherit; border-radius: var(--r-hair); padding: 0 var(--s-hair); }

/* ── «Ничего не найдено» ─────────────────────────────────────────────────── */
.hb-none { font-size: var(--fs-small); color: var(--mute); margin: var(--s-1) 0; }

/* ── «Такого гайда нет» ──────────────────────────────────────────────────── */
.hb-page > .panel__head .back { font-size: var(--fs-small); color: var(--accent-ink); text-decoration: none; display: inline-block; margin-top: var(--s-1); padding: var(--s-1) 0; }
.hb-page > .panel__head .back:hover { text-decoration: underline; }
.hb-page > .panel__head code { font-size: var(--fs-meta); opacity: .75; }

/* ── Справочник внутри вкладки «Гайды» ───────────────────────────────────── */
/*
  Отдельной вкладки у справочника больше нет: поиск по словам и список
  разделов живут под авторскими гайдами, в одной полосе с ними. Разделитель
  сверху и нужен, чтобы было видно где кончаются чужие советы и начинается
  текст игры.
*/
.guide-handbook { margin-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); padding-top: var(--s-3); }
.guide-handbook h2 { font-size: var(--fs-h2); margin: var(--s-fine) 0 0; }
.guide-handbook .hb-search { max-width: 560px; }

/* ── Собранные страницы: строка разделов и оглавление ────────────────────── */
/*
  Отдельный набор правил, потому что у этих страниц нет бокового меню:
  статья открывается из поиска или из чата, и человеку нужно одну строкой
  показать, куда ещё можно пойти. Меню сайта на них нарочно не повторяется —
  оно открывается кнопкой, а кнопки без скрипта на собранной странице нет.
*/
.hb-sitenav { display: flex; flex-wrap: wrap; gap: var(--s-fine) var(--s-3); align-items: center; padding: var(--s-2) 0; margin-bottom: var(--s-3); border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); font-size: var(--fs-small); }
.hb-sitenav a { color: var(--mute); text-decoration: none; }
.hb-sitenav a:hover { color: var(--accent-ink); text-decoration: underline; }
.hb-sitenav a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }

.hb-catalog { margin: var(--s-3) 0 var(--s-fine); }
.hb-catalog h2 { font-size: 16px; margin: 0 0 var(--s-1); }
.hb-catalog h2 a { color: inherit; text-decoration: none; }
.hb-catalog h2 a:hover { color: var(--accent-ink); }
.hb-catalog__root { list-style: none; margin: 0; padding: 0; }
.hb-catalog__branch { list-style: none; margin: var(--s-hair) 0 var(--s-1); padding-left: var(--s-3); border-left: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.hb-catalog__root > li, .hb-catalog__branch > li { padding: var(--s-hair) 0; font-size: var(--fs-text); }
.hb-catalog a { color: var(--accent-ink); text-decoration: none; }
.hb-catalog a:hover { text-decoration: underline; }
/* Подпись гайда — та же первая строка, что под плиткой и в выдаче: три
   пересказа одного правила читались бы как спор. */
.hb-catalog__lead { color: var(--mute); font-size: var(--fs-meta); }

/* ── Снимки форума и гайдов ──────────────────────────────────────────────── */
/*
  Статическая копия темы живёт на тех же правилах, что справочник, но это не
  статья: у неё есть автор, ответы и картинки. Ниже только то, чего в
  справочнике нет, — остальное берут .hb-page и .hb-text.
*/
.forum-snap { min-width: 0; }
.forum-snap__body { margin-top: var(--s-3); }
.forum-snap__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0 0; color: var(--mute); font-size: var(--fs-meta); line-height: 1.5; }
.forum-snap__meta > span { display: inline-flex; align-items: center; gap: var(--s-fine); }
.forum-snap__author { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.forum-snap__author a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.forum-snap__author a:hover { color: var(--accent-ink); text-decoration: underline; }
.forum-snap__ava { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--mute); font-size: var(--fs-eyebrow); font-weight: 700; }
.forum-snap__ava img { width: 100%; height: 100%; object-fit: cover; }

.forum-snap__tags { display: flex; flex-wrap: wrap; gap: var(--s-fine); margin: var(--s-1) 0 0; }
.forum-snap__tag { padding: var(--s-hair) var(--s-1); border: 1px solid var(--line-soft); border-radius: var(--r-pill); color: var(--mute); font-size: var(--fs-eyebrow); letter-spacing: .04em; text-transform: uppercase; }

.forum-snap__shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-1); margin: var(--s-3) 0; }
.forum-snap__shots a { display: block; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: color-mix(in srgb, var(--text) 4%, transparent); }
.forum-snap__shots img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }

.forum-snap__cta { margin: var(--s-3) 0; }
.forum-snap__cta .forum-btn { display: inline-flex; align-items: center; text-decoration: none; }

.forum-snap__comments { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.forum-snap__comments h2,
.forum-snap__more h2 { margin: 0 0 var(--s-2); font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-card); letter-spacing: -.02em; }
.forum-snap__comment { padding: var(--s-2) 0; border-top: 1px solid var(--line-soft); }
.forum-snap__comment:first-of-type { border-top: 0; }
.forum-snap__comment-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1); color: var(--mute); font-size: var(--fs-meta); }
.forum-snap__comment-body { margin: var(--s-1) 0 0; color: var(--dim); }
.forum-snap__comment-body p:last-child { margin-bottom: 0; }

.forum-snap__more { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.forum-snap__more ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; }
.forum-snap__more li { padding: var(--s-hair) 0; font-size: var(--fs-small); }
.forum-snap__more a { color: var(--accent-ink); text-decoration: none; }
.forum-snap__more a:hover { text-decoration: underline; }

.forum-snap__note { margin: var(--s-3) 0 0; color: var(--mute); font-size: var(--fs-meta); line-height: 1.5; }

/* ── Адаптив: плитка на телефоне в одну колонку ──────────────────────────── */
@media (max-width: 519px) {
  .hb-grid { grid-template-columns: 1fr; }
  .hb-siblings ul { grid-template-columns: 1fr; }
  .hb-catalog__lead { display: block; }
  .forum-snap__shots { grid-template-columns: 1fr; }
  .forum-snap__comment-head { align-items: flex-start; }
}