/* help.css — стили экрана «Справка» (js/screens/help.js).

   Экран — аккордеон из panel(title, {collapsible, foldedByDefault}) (ui.js):
   складывание/разворот, стрелка, localStorage-память состояния — всё уже
   даёт сама panel(), здесь только вёрстка содержимого внутри тела панели.

   Канон: без скруглений, золотые L-скобки панелей рисует ui.brackets() в
   самом JS. Ни одного нового цвета — только var(--...) из :root в game.css.
   Кегль нигде не мельче var(--font-min) (13px), это же и есть базовый
   размер текста здесь — телефон 360px читает эту справку с рук. */

.help-intro {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.help-screen { display: flex; flex-direction: column; gap: 12px; }

/* Тело каждой аккордеон-панели */
.help-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.help-p b, .help-p strong { color: var(--text); font-weight: 600; }

/* Список коротких пунктов — тире слева, не браузерный <ul> (в игре нигде
   не используются нативные списки, отступы/маркеры ломают общий ритм). */
.help-bullets { display: flex; flex-direction: column; gap: 7px; }
.help-bullet {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.help-bullet::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: 6px;
  background: var(--gold-strong);
}

/* Пары «правило — число»: подпись слева, значение золотом справа, перенос
   на телефоне не ломает строку в горизонтальный скролл — flex-wrap. */
.help-fact {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--edge-soft);
  font-size: 13.5px;
}
.help-fact:last-child { border-bottom: none; }
.help-fact .lbl { color: var(--text-2); flex: 1 1 auto; min-width: 140px; }
.help-fact .val { color: var(--gold-strong); text-align: right; white-space: nowrap; }

/* Врезка — предупреждение/важная оговорка (напр. «почему список пуст») */
.help-note {
  padding: 10px 12px;
  border-left: 2px solid var(--gold-strong);
  background: var(--panel-alt);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.help-note.warn { border-left-color: var(--red); }

.help-subhead {
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
}

@media (max-width: 480px) {
  .help-intro { padding: 10px 12px; font-size: var(--font-min); }
  .help-body { padding: 10px 12px; gap: 9px; }
  .help-fact .lbl { min-width: 100%; }
}