/*
 * Визуальный слой в стиле актуального DTF (август 2026).
 *
 * Файл намеренно подключён ПОСЛЕДНИМ и не содержит игровой логики. Он только
 * переоформляет существующие классы: светло-серый фон, белые карточки,
 * голубая шапка, синий акцент, системная типографика и мягкие скругления.
 * Исходная тема остаётся в styles.css и public/ui/*.css — этот слой легко
 * отключить одной строкой в index.html.
 *
 * Разметку и имена классов слой НЕ трогает: на них завязаны обработчики
 * (UI-DTF-HANDOFF.md). Всё, что ниже, — только оформление.
 *
 * ── Четыре шкалы, из которых собран весь интерфейс ──────────────────────────
 *
 * Отступы: 4 · 8 · 12 · 16 · 24. Поля панели — 16, шаг внутри панели — 12,
 *          плитки и строки списков — 12, мелочь вроде значков — 4 и 8.
 *          Шаг МЕЖДУ панелями один на всех экранах: 12.
 * Размеры букв: 12 · 13 · 15 · 17 · 22. 22 — заголовок экрана, 17 — заголовок
 *          панели, 15 — обычный текст и поля, 13 — плотные списки, таблицы,
 *          кнопки, 12 — подписи и приписки. Ничего между.
 * Скругления: 12 — панель и шапка, 8 — ВСЁ внутри панели (карточка, плитка,
 *          кнопка, поле, вкладка), 999 — таблетки, 50% — лица.
 *          Ступени 10 больше нет: между 8 и 12 глазу делать нечего, а
 *          разнобой видно сразу (было до семи разных радиусов на экране).
 * Чернила: --ink (#111) — имена, числа, всё главное; --ink-soft (#606060, он
 *          же --dim) — второй голос: описания, подписи, приписки, шапки
 *          таблиц. Третьей, ещё более бледной ступени нет и быть не может:
 *          она не помещается между «тише главного» и 4,5:1. Тише — кеглем и
 *          насыщенностью. Разбор в комментарии у токенов ниже.
 *
 * ── Заливки: белое — основа, серое — только разделитель ─────────────────────
 *
 * Владелец, 11.08.2026: «слишком много серого, мало структурированности и
 * ровности», «всё какое-то перегруженное, всё пляшет». Считали — так и было:
 * до 19 разных заливок на экране, до трёх слоёв плашек друг в друге
 * (значок в сравнении в таблице в панели), 135 серых таблеток в одной только
 * Справке. Серый стоял везде, поэтому не значил ничего.
 *
 * Теперь правило одно и короткое:
 *   • БЕЛАЯ КАРТОЧКА — основа. Всё, что раньше было серой плиткой внутри
 *     панели (числа автора, слоты, манеры, связки, товар, шаг входа), стало
 *     белым с тонкой линией --line. Линия делит не хуже заливки и не давит.
 *   • СЕРАЯ ЗАЛИВКА (--fill-divide) — только там, где она РАЗДЕЛЯЕТ:
 *     шапка таблицы, дорожка невыбранных вкладок и строка-карточка на
 *     телефоне. Больше нигде.
 *   • ЦВЕТНАЯ ЗАЛИВКА — только состояние: синяя «твоё/зовут», красная «беда»,
 *     зелёная «хорошо», янтарная «погоди». Четыре, и каждая что-то значит.
 *   • ОРГАНЫ УПРАВЛЕНИЯ (--dtf-control…) считаются отдельно: кнопка обязана
 *     выглядеть нажимаемой, и её серый — это не «плашка», а сама кнопка.
 *   • ПЛАШКА В ПЛАШКЕ — один уровень, не больше: панель → карточка. Всё, что
 *     лежало третьим слоем (значки сравнения, метки Справки, ступени), краску
 *     потеряло и держится линией или просто кеглем.
 *
 * Числа везде моноширинные (font-variant-numeric: tabular-nums): рейтинг,
 * счёт и полосы не должны дёргаться при перерисовке.
 */

/* ── Дизайн-токены DTF ───────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── Шкалы именами. Раньше числа стояли по месту, и по файлу расползались
     14, 10, 6, 5, 7 и 18 пикселей. Теперь у каждой ступени есть имя, и мимо
     шкалы промахнуться труднее. ─────────────────────────────────────────── */
  --s1: 4px;    /* мелочь: зазор в значке, отступ подписи */
  --s2: 8px;    /* строка списка, зазор между плитками */
  --s3: 12px;   /* поля карточки, шаг внутри панели, шаг МЕЖДУ панелями */
  --s4: 16px;   /* поля панели и края страницы */
  --s5: 24px;   /* крупный разрыв: подвал, поля большой кнопки */

  --r-panel: 12px;  /* панель и шапка страницы */
  --r-inner: 8px;   /* всё внутри панели: карточка, плитка, кнопка, поле */
  --r-pill: 999px;  /* таблетка */

  --t-cap: 22px;    /* заголовок экрана */
  --t-head: 17px;   /* заголовок панели */
  --t-body: 15px;   /* обычный текст и поля */
  --t-dense: 13px;  /* плотные списки, таблицы, кнопки */
  --t-note: 12px;   /* подписи и приписки */

  /* Заливки. Их ровно столько, сколько ролей: карточка, разделитель и четыре
     состояния. Всё прочее держится линией --line. */
  --fill-card: #ffffff;
  --fill-divide: #f2f3f5;
  --line: #e6e8ec;
  --line-strong: #d9dce1;
  /* Кант ПОЛЯ ВВОДА — особая статья. Тонкая линия карточки даёт на белом
     1,23:1, и для рамки-группировки этого хватает: карточка ничего не «значит»,
     она просто собирает вместе. А вот у поля ввода кант — единственное, по чему
     видно, что сюда можно писать, и с него спрос как с указателя: 3:1 (WCAG
     1.4.11). #8c9198 даёт 3,17:1.
     Прежняя тема тут не проходила вовсе: поле стояло на серой заливке #f4f4f4
     (1,06:1 к белой карточке) с кантом #dcdcdc (1,30:1). Так что это не плата
     за отказ от серого, а починка. */
  --line-field: #8c9198;

  /* Старые имена переменных сохранены: на них смотрят styles.css и ui/*.css. */
  --coal: #f2f2f2;
  --coal-deep: #d7d7d7;
  --wood: #ffffff;
  /* Старые «берестяные» имена теперь все указывают на белую карточку: соседние
     файлы рисуют ими плитки внутри панелей, а плиткам положено быть белыми. */
  --wood-dark: var(--fill-card);
  --edge: var(--line);
  --bark: var(--fill-card);
  --bark-light: var(--fill-card);
  --bark-dark: var(--fill-card);
  /* ЧЕРНИЛА. Ступеней две, а не три.
     Раньше их было три — #111, #606060 и «подписной» #8a8a8a, — и третья была
     обманом: на белой панели она даёт 3,45:1, на плитке #f6f6f6 — 3,19:1, на
     синей врезке — 3,05:1 при норме 4,5:1. Подписи слотов, ключи строк и
     свойства вещей — ровно то, ради чего на экран и заходят, — читались хуже
     всего. Поднять её было некуда: самый светлый серый, который держит 4,5:1
     на всех наших подложках (включая строку уникума под мышью), — это #666666,
     а он от #606060 отличается на шесть шагов, то есть ничем. Честнее признать,
     что третьей ступени цвета тут нет.
     Поэтому --dim теперь тот же цвет, что и --ink-soft, а тише подпись делают
     кегль (12 против 15) и насыщенность (400 против 500/700). Ровно так уже
     живёт витрина: public/ui/shop.css завёл себе --shop-quiet: var(--ink-soft)
     по той же причине. Имя --dim оставлено: на него смотрят styles.css и
     public/ui/*.css, и переименование порвало бы чужие файлы. */
  --ink: #111111;
  --ink-soft: #606060;
  --dim: var(--ink-soft);
  --gold: #0b5dd7;
  --gold-light: #3478dc;
  --gold-dim: #0b5dd7;
  /* Цветные краски раздвоены: сочная — для полос, кантов и точек (там норма
     3:1), плотная — для слов (норма 4,5:1). Одной краской обе роли не закрыть:
     #e5484d на белом — 3,91:1, #2f9e44 — 3,45:1, для текста это провал. */
  --blood: #e5484d;
  --blood-light: #f06a6e;
  --blood-ink: #a42d32;
  --life: #2f9e44;
  --life-ink: #22662f;
  --energy: #0b5dd7;
  --memory: var(--energy);
  --bone: #111111;
  --link: #0b5dd7;
  /* --radius видят 28 правил в public/ui/*.css — это всё плитки и кнопки
     внутри панелей, а им положен один радиус. Было 10, стало 8: ступень «10»
     из темы убрана целиком. */
  --radius: var(--r-inner);
  --pad: var(--s3) var(--s4);

  /* Свои токены слоя. */
  --dtf-header: #d9f0ff;
  --dtf-surface: var(--fill-card);
  /* --dtf-surface-muted осталось ровно одной ролью: РАЗДЕЛЯТЬ. Им залиты шапка
     таблицы, дорожка вкладок и строка-карточка на телефоне (adaptive.css берёт
     его через var()). Полями ввода он больше не пользуется — поле теперь белое
     с линией, как карточка. */
  --dtf-surface-muted: var(--fill-divide);
  --dtf-hover: #f5f7fa;
  --dtf-line: var(--line);
  --dtf-line-strong: var(--line-strong);
  --dtf-blue-soft: #e8f2ff;
  --dtf-red-soft: #fff0f0;
  --dtf-green-soft: #edf9f0;
  --dtf-amber-soft: #fff6e0;
  /* Янтарь был #96650a — 4,46:1 на синей врезке оффтопа, чуть ниже нормы.
     Взят тот же тон, каким public/ui/profile.css пишет легендарную вещь, —
     теперь худшее место держит 5,24:1. */
  --dtf-amber-ink: #8a5a06;

  --dtf-blue-hover: #0a4fb5;
  --dtf-blue-press: #08429a;

  /* Кнопки и прочие управляющие поверхности — одна серия оттенков. */
  /* Кнопка выключена — та же серая, что и разделитель: отдельного оттенка под
     это заводить незачем, а в описи он числился ещё одной заливкой. */
  --dtf-control: #eceef1;
  --dtf-control-hover: #e2e5e9;
  --dtf-control-press: #d8dce1;
  --dtf-control-off: var(--fill-divide);
  --dtf-ink-off: #a2a8b0;

  --tex-page: none;
  --tex-bark: none;
  --tex-wood: none;
}

html {
  background: var(--coal);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: var(--coal);
  color: var(--ink);
  font: 15px/1.5 Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Виньетка «свет лучины» из тёмной темы. */
body::before { display: none; }

* {
  scrollbar-color: #c5c5c5 transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #a9a9a9; }

::selection { background: #cfe5ff; color: var(--ink); }

/* Поля страницы — со шкалы: было 20 по бокам и 40 снизу, стало 16 и 24. */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s5);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--dtf-blue-hover); text-decoration: underline; }
a:active { color: var(--dtf-blue-press); }

h1,
h2,
h3,
h4 {
  margin-bottom: 8px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

h1 { font-size: var(--t-cap); }
h2 { font-size: var(--t-head); }
h3 { font-size: var(--t-body); }
h4 { font-size: var(--t-dense); }

small { font-size: var(--t-note); }

/* Клавиатурный обвод виден всегда и всюду одинаковый. */
:focus-visible {
  outline: 2px solid rgba(11, 93, 215, .65);
  outline-offset: 2px;
}

/* Числа не прыгают: везде, где они стоят в столбик или меняются на ходу. */
.fighter-strip,
.win-title,
.tabs,
table.grid,
.bar-text,
.medal,
.price,
.main-nums,
.main-num,
.main-me-nick,
.main-foe-body,
.main-rival-body,
.main-feed-line,
.offtop-who-nums,
.offtop-top-rating,
.offtop-top-nums,
.offtop-place,
.offtop-time,
.offtop-invite-left,
.offtop-lvl,
.hero-nums,
.hero-row-val,
.hero-stat-value,
.hero-gear-line,
.hero-tiers,
.hero-slot-props,
.ord-share,
.ord-total,
.ord-field,
.fg-side,
.fg-secs,
.fg-count,
.fg-score,
.fg-rewards,
.fg-rating-move,
.fg-line,
.shop-purse,
.shop-act,
.shop-diffs,
.login-key { font-variant-numeric: tabular-nums; }

/* ── Шапка, меню, полоса автора ──────────────────────────────────────────── */

.masthead {
  min-height: 68px;
  overflow: visible;
  justify-content: flex-start;
  padding: var(--s3) var(--s4);
  background: var(--dtf-header);
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: none;
}

.masthead-text { text-align: left; }

/* Единственный кегль в файле вне шкалы — и намеренно: это не текст, а размер
   знака «ГЛАВНАЯ» на случай, если art/logo.png не пришёл. Живым начертанием
   всё равно распоряжается public/logo.css, подключённый после этого файла. */
.logo {
  color: #050505;
  font-family: inherit;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  text-shadow: none;
}

.tagline {
  margin-top: var(--s1);
  color: #52697a;
  font-size: var(--t-note);
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}

.tagline::before,
.tagline::after { display: none; }

/* Шаг между блоками верха один и тот же — 12, как между панелями. Сверху у
   меню был 8, снизу 12, и верх страницы из-за этого «съезжал». */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
  margin: var(--s3) 0;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: var(--t-body);
}

/* Точка-разделитель осталась от тёмной темы бурой — в меню она не нужна вовсе,
   а в содержании Справки должна быть обычной серой. */
.sep { color: var(--dim); }
.menu .sep { display: none; }

.menu a {
  display: inline-block;
  padding: var(--s2) var(--s3);
  color: #303030;
  border-radius: var(--r-inner);
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none;
  transition: background-color .14s ease, color .14s ease;
}

.menu a:hover {
  color: #111;
  background: rgba(255, 255, 255, .72);
  text-decoration: none;
  text-shadow: none;
}

.menu a:active { background: rgba(255, 255, 255, .92); }

.menu a.active {
  color: var(--link);
  background: #fff;
  box-shadow: none;
}

.fighter-strip {
  gap: var(--s1) var(--s4);
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s4);
  color: var(--ink-soft);
  background: var(--fill-card);
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: none;
  font-size: var(--t-dense);
}

.fighter-strip b,
.fighter-strip .lvl,
.fighter-strip .strip-num b,
.fighter-strip .strip-gear b { color: #111; letter-spacing: 0; }

.strip-face { align-items: center; }
.strip-alias { color: var(--dim); }
.strip-streak { color: var(--dtf-amber-ink); }
.strip-money { color: var(--link); }
.strip-exit .linklike { color: var(--dim); font-size: var(--t-dense); }
.strip-exit .linklike:hover { color: var(--link); }

.link-state {
  gap: var(--s1) var(--s3);
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s4);
  color: var(--blood-ink);
  background: var(--dtf-red-soft);
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: none;
  font-size: var(--t-dense);
}

.link-connecting { color: var(--dtf-amber-ink); background: var(--dtf-amber-soft); }
/* «Место заняла другая вкладка» — не беда, а положение дел: связь цела,
   игра просто идёт в соседнем окне. Красный тут пугал бы зря, поэтому тон
   тот же спокойный янтарь, что и у «связь налаживается». */
.link-taken { color: var(--dtf-amber-ink); background: var(--dtf-amber-soft); }
.link-state .linklike { color: inherit; font-size: inherit; text-decoration: underline; }

/* ── Белые карточки DTF ──────────────────────────────────────────────────── */

main { margin-top: 0; }

/* Шаг между панелями — 12, и он один на всех экранах и на всех ширинах. */
.win {
  margin-bottom: var(--s3);
  overflow: hidden;
  color: var(--ink);
  background: var(--dtf-surface);
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: none;
}

/* Поля у всех панелей одинаковые: 16 по краям, 12 между заголовком и телом. */
.win-title {
  min-height: 0;
  gap: var(--s3);
  padding: var(--s4) var(--s4) 0;
  color: var(--ink);
  border: 0;
  box-shadow: none;
  font-size: var(--t-head);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

.win-tools {
  color: var(--dim);
  font-size: var(--t-note);
  font-weight: 400;
}

.win-title .linklike { color: var(--link); font-size: var(--t-dense); }

.win-body,
.win-wide .win-body {
  margin: 0;
  padding: var(--s3) var(--s4) var(--s4);
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Панель без заголовка получает такое же поле сверху, как и с заголовком. */
.win > .win-body:first-child { padding-top: var(--s4); }

.win-body p { margin-bottom: var(--s2); }
/* Втяжка списка одна на всю игру — 24, как крупная ступень шкалы. */
.win-body ul,
.win-body ol { margin: 0 0 var(--s2) var(--s5); }
.win-body li { margin-bottom: var(--s1); line-height: 1.5; }
.win-body > :last-child { margin-bottom: 0; }

/* Длинная строка не должна тянуться на всю панель: читается тяжело. */
.win-body p,
.win-body .help-lead,
.offtop-lead { max-width: 78ch; }
.center p,
.win-body .center p { max-width: none; }

hr,
hr.thin {
  margin: var(--s3) 0;
  border-top: 1px solid var(--line);
}

.cols,
.cols-3 { gap: var(--s3); }
.row { gap: var(--s2); }
.gap { height: var(--s3); }

/* Широкая таблица прокручивается внутри панели, а не всей страницей. */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--r-inner);
  -webkit-overflow-scrolling: touch;
}

/* ── Кнопки и ссылки ─────────────────────────────────────────────────────── */

/* Кнопки одного размера. Ступеней ровно две: обычная 36 и мелкая 32 — раньше
   мелкая была 28, и на экране Снаряжения четырнадцать мелких кнопок стояли
   лесенкой рядом с одной обычной. min-width держит ряд кнопок ровным: «надеть»,
   «продать за 7» и «все 5 за 35» больше не разной длины ступеньками. */
.btn {
  min-height: 36px;
  min-width: 96px;
  padding: 0 var(--s3);
  color: #111;
  background: var(--dtf-control);
  border: 0;
  border-radius: var(--r-inner);
  box-shadow: none;
  font-family: inherit;
  font-size: var(--t-dense);
  font-weight: 500;
  line-height: 1.2;
  text-shadow: none;
  transition: background-color .14s ease, color .14s ease, transform .08s ease;
}

.btn:hover { color: #111; background: var(--dtf-control-hover); }
.btn:active {
  padding: 0 var(--s3);
  background: var(--dtf-control-press);
  transform: translateY(1px);
}

.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:active {
  color: var(--dtf-ink-off);
  background: var(--dtf-control-off);
  border: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: default;
}

.btn-primary {
  color: #fff;
  background: var(--link);
  border: 0;
  box-shadow: none;
  font-weight: 600;
}

.btn-primary:hover { color: #fff; background: var(--dtf-blue-hover); }
.btn-primary:active { background: var(--dtf-blue-press); }
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:active { color: #eef4fd; background: #a7c3ea; }

/* Большая кнопка удара: та же логика цвета, просто крупнее и таблеткой. */
.btn-strike {
  min-height: 44px;
  padding: 0 var(--s5);
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.btn-strike:active { padding: 0 var(--s5); }

/*
 * Мелкая кнопка — САМАЯ ЧАСТАЯ кнопка игры: на Магазине их 35, в Наказе 44,
 * на Снаряжении по одной у каждой вещи. Заливка --dtf-control (#eceef1) на
 * белой карточке даёт 1,16:1 — при нулевой границе край кнопки на белом фоне
 * практически не читается, а норма для органа управления 3:1 (WCAG 1.4.11).
 *
 * Поэтому мелкая кнопка (и только она) берёт кант --line-field #8c9198 —
 * 3,17:1 на белом. Заливка остаётся прежней: она отличает кнопку от поля
 * ввода, у которого кант тот же. Крупная .btn кант не берёт — она и так
 * заметна размером, и ряды «надеть · продать» не должны разъехаться.
 *
 * box-sizing: border-box стоит в public/styles.css на `*`, поэтому кант
 * съедает единицу ВНУТРИ: 32 остаются 32, 72 остаются 72, ряды не поехали.
 */
.btn-mini {
  min-height: 32px;
  min-width: 72px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-field);
  border-radius: var(--r-inner);
  font-size: var(--t-note);
}

.btn-mini:active { padding: 0 var(--s3); }

/* Синяя кнопка кант не берёт: её собственная заливка на белом даёт 5,9:1 —
   вдвое выше нормы, а серый кант вокруг синего читался бы как обводка.
   Кант остаётся прозрачным, а не снимается совсем: рядом с ней в том же ряду
   стоят обычные мелкие кнопки, и коробка должна быть той же — иначе ряд
   встанет ступенькой. */
.btn-primary.btn-mini { border-color: transparent; }

/* Выключенная кнопка из требования 3:1 исключена (WCAG: inactive controls) и
   в теме нарочно уходит в фон. Но коробку держим ту же — иначе выключенная
   «продать» окажется на два пикселя уже соседней включённой. */
.btn-mini[disabled],
.btn-mini[disabled]:hover,
.btn-mini[disabled]:active { border: 1px solid transparent; }

.linklike {
  color: var(--link);
  font-size: var(--t-dense);
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .14s ease;
}

.linklike:hover { color: var(--dtf-blue-hover); text-decoration: underline; }
.linklike:active { color: var(--dtf-blue-press); }
.linklike[disabled],
.linklike[disabled]:hover {
  color: var(--dtf-ink-off);
  text-decoration: none;
  cursor: default;
}

/* ── Формы ───────────────────────────────────────────────────────────────── */

/* Поле ввода — белое с линией, как карточка. Серую заливку у полей убрали
   вместе со всеми прочими: серое в теме теперь значит «разделитель», а поле
   ничего не разделяет. Границу поле держит линией потемнее — по ней и видно,
   куда писать. */
input[type="text"],
input[type="number"],
input[type="search"],
input:not([type]),
select,
textarea {
  min-height: 40px;
  padding: var(--s2) var(--s3);
  color: var(--ink);
  background: var(--fill-card);
  border: 1px solid var(--line-field);
  border-radius: var(--r-inner);
  box-shadow: none;
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.4;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

textarea { min-height: 96px; resize: vertical; }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: #6f757d; }

input::placeholder,
textarea::placeholder { color: var(--dim); font-style: normal; }

input:focus,
select:focus,
textarea:focus {
  color: var(--ink);
  background: #fff;
  border-color: var(--link);
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 93, 215, .16);
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--dtf-ink-off);
  background: var(--dtf-control-off);
  border-color: var(--line);
  cursor: default;
}

/* Переключатели и ползунок текста не показывают, но кегль у них остаётся
   браузерный (13,33) и в описи числится лишней ступенью. Ставим свой. */
input[type="radio"],
input[type="checkbox"],
input[type="range"],
.ord-heal input[type="range"] { accent-color: var(--link); font-size: var(--t-dense); }

fieldset {
  margin: 0 0 var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: none;
}

legend {
  padding: 0 var(--s1);
  color: var(--dim);
  font-size: var(--t-note);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Индикаторы, таблицы, вкладки ────────────────────────────────────────── */

/* Дорожка полосы нарочно чуть темнее карточки: число внутри полосы часто
   висит над пустой её частью, и на совсем светлом фоне его не прочесть.

   ОБЪЁМ, А НЕ ЗАКРАШЕННЫЙ ПРЯМОУГОЛЬНИК (замечание владельца 12.08.2026 про
   полосы боя — «выглядит слишком просто и дёшево»). Тремя тенями и ни одним
   переливом: внутренняя грань сверху и кант по кругу утапливают дорожку,
   тонкая тень у основания кладёт полосу НА карточку, а горизонтальные грани
   заливки дают ей толщину. Ни градиентов, ни блеска: заливка остаётся ровного
   цвета, потому что по её цвету читают состояние (зелёный — цел, янтарный —
   середина, красный — беда).

   container-type — ради подписи внутри. Полоса на телефоне сжимается, и
   подписи там тесно; насколько тесно — знает сама полоса, а не ширина окна
   (в одном и том же окне полоса на «Популярном» втрое шире, чем в Профиле).
   Поэтому поля подписи убавляются по ширине ПОЛОСЫ — см. @container ниже. Ни
   размера, ни раскладки это не меняет: высота у полосы своя, ширину ей задаёт
   родитель. В бою число вынесено ИЗ полосы (public/ui/fight.css), и там же у
   полосы снят container-type: он делал её containing block’ом и обрезал бы
   вынесенную подпись. */
.bar {
  height: 16px;
  overflow: hidden;
  background: #d6dade;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 2px rgba(15, 22, 30, .20),
    inset 0 0 0 1px rgba(15, 22, 30, .08),
    0 1px 1px rgba(15, 22, 30, .09);
  container-type: inline-size;
}

.bar-fill {
  background: var(--life);
  /* Грани горизонтальные: заливка едет transform: scaleX() (public/motion.css),
     и вертикальные линии от этого толстели бы и худели вместе с ней. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(15, 22, 30, .13);
}

.bar-fill.mid { background: #e0a11a; }
.bar-fill.low,
.bar-fill.hp.low { background: var(--blood); }
.bar-fill.energy,
.bar-fill.mp { background: var(--energy); }
.bar-fill.exp { background: #7a6ad0; }

/* Число внутри полосы стоит на своей полупрозрачной подложке: она затемняет
   и заливку, и пустую дорожку, поэтому белые цифры читаются при любом остатке
   Жизни — и когда полоса полна, и когда от неё осталась полоска.
   Плотность подложки была .34, и обещание не выполнялось: над пустой дорожкой
   (#d6dade) белое давало 2,94:1 при норме 4,5:1 — как раз в тот миг, когда на
   Жизнь и смотрят. При .58 худшее место (та же пустая дорожка) держит 5,61:1,
   а над заливками — от 7,7 до 12,2. */
.bar-text {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  padding: 0 8px;
  color: #fff;
  background: rgba(15, 22, 30, .58);
  border-radius: var(--r-pill);
  font-size: var(--t-note);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  /* Одна строка и только одна. Полоса ростом ровно в строку (16 точек) и с
     обрезкой по краям, поэтому вторая строка не показывается вообще: на
     телефоне в бою «150 / 150» ложилось в два этажа и от Жизни оставалось
     «150 /» — второе число уезжало под нижний край. Переносить эту подпись
     не нужно ни при каком остатке: это два числа и косая черта. */
  white-space: nowrap;
  text-shadow: none;
}

/* Поля подложки уступают место цифрам, а не наоборот.
   Восемь точек слева и справа — украшение; на узкой полосе эти шестнадцать
   точек и есть разница между «150 / 150» и обрывком. Замер в бою на 375:
   полоса 70,5, подписи нужно 57,6 — с полями по 8 выходит 73,6 и не влезает,
   с полями по 4 выходит 65,6 и влезает с запасом.
   Порог 140 берёт только тесные полосы боя на телефоне (70,5 при 375, 98 при
   430) и не трогает ни полосы боя на столе (141 при 560, 208 при 1280), ни
   широкие полосы «Популярного» и профиля (267…744) — там поля прежние. */
@container (max-width: 140px) {
  .bar-text { padding: 0 4px; }
}

/* Совсем узкая полоса — поля ужимаются до предела. Так живёт полоса при
   ширине окна 341…360: бойцы там ещё делят строку пополам, и полосе достаётся
   53,5…63. Читаемость подложки от этого не страдает: тёмная плашка остаётся
   под всей строкой, белое на ней держит те же 5,61:1 в худшем месте. */
@container (max-width: 68px) {
  .bar-text { padding: 0 2px; }
}

/* Строки таблиц одной высоты: 8 сверху, 8 снизу, строка 20. */
table.grid {
  overflow: hidden;
  background: var(--fill-card);
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-dense);
}

table.grid th,
table.grid td {
  padding: var(--s2) var(--s3);
  border: 0;
  border-bottom: 1px solid var(--line);
  line-height: 20px;
}

/* Шапка таблицы — один из двух случаев, где серой заливке место: она отделяет
   названия столбцов от чисел под ними. */
table.grid th {
  color: var(--dim);
  background: var(--fill-divide);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--t-note);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

table.grid tbody tr:last-child td { border-bottom: 0; }
/* Полосатость убрана: в строках и без того встречаются свои светлые плашки. */
table.grid tr:nth-child(even) td { background: transparent; }
table.grid tbody tr:hover td { background: var(--dtf-hover); }
table.grid caption { color: var(--dim); font-size: var(--t-note); padding-bottom: var(--s2); }

/* Приписка тише не бледностью, а кеглем и весом: 12 против 15 у обычного
   текста и 400 против 700 у имён и чисел рядом. Вес задан прямо, чтобы жирный
   из соседнего файла случайно не поднял приписку до уровня заголовка. */
.muted { color: var(--dim); font-size: var(--t-note); font-weight: 400; }
.price { color: var(--link); }
.req-bad,
.c-blood { color: var(--blood-ink); }
.c-life { color: var(--life-ink); }
.c-energy { color: var(--energy); }

/* Дорожка вкладок — второй и последний случай серой заливки: она отделяет
   невыбранные вкладки от выбранной, а выбранная стоит на белом. */
.tabs {
  gap: var(--s1);
  margin-bottom: var(--s3);
  padding: var(--s1);
  background: var(--fill-divide);
  border: 0;
  border-radius: var(--r-inner);
}

.tab {
  min-height: 32px;
  padding: 0 var(--s3);
  color: #606060;
  background: transparent;
  border: 0;
  border-radius: var(--r-inner);
  font-family: inherit;
  font-size: var(--t-dense);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  transition: background-color .14s ease, color .14s ease;
}

.tab:hover { color: #111; background: rgba(255, 255, 255, .7); }
.tab:active { background: rgba(255, 255, 255, .9); }
.tab.active {
  top: 0;
  color: #111;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.flash {
  margin-bottom: var(--s3);
  padding: var(--s3) var(--s4);
  color: #555;
  background: var(--fill-card);
  border: 0;
  border-left: 3px solid #b4b4b4;
  border-radius: var(--r-inner);
  box-shadow: none;
  font-size: var(--t-dense);
}

.flash-ok { color: var(--life-ink); background: var(--dtf-green-soft); border-left-color: var(--life); }
.flash-bad { color: var(--blood-ink); background: var(--dtf-red-soft); border-left-color: var(--blood); }
.flash-note { color: #16549b; background: var(--dtf-blue-soft); border-left-color: var(--link); }

/* Карточки выбора: экранов с ними сейчас нет, но кирпич общий — пусть светлый. */
.pick-cards { gap: var(--s2); }

.pick-card {
  gap: var(--s1);
  padding: var(--s3);
  color: var(--ink);
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease;
}

.pick-card:hover { background: var(--dtf-hover); border-color: var(--line-strong); }
.pick-card b { color: #111; }
.pick-card.sel {
  color: var(--ink);
  background: var(--dtf-blue-soft);
  border-color: #82b5ff;
  box-shadow: none;
}

.pick-card.sel b::before { content: '● '; color: var(--link); }
.pick-desc { color: var(--dim); font-size: var(--t-note); }
.pick-mods { color: var(--link); font-size: var(--t-note); }

/* ── Аватары и состояния ─────────────────────────────────────────────────── */

/* Разметку аватара рисует public/art/avatar.js прямо в style, поэтому светлую
   оправу и точку состояния приходится ставить через !important. Иначе сквозь
   светлую тему просвечивает тёмная: чернильное кольцо и ночной ободок точки. */

.avatar,
.avatar img,
.avatar-plain,
.avatar-face { border-radius: 50%; }

.avatar-frame {
  background: #e6e8eb !important;
  box-shadow: none !important;
}

.avatar--online .avatar-frame { background: #bcd7f6 !important; }

.avatar-dot {
  box-shadow: 0 0 0 2px #fff !important;
}

.avatar-dot--online { background: var(--life) !important; }
.avatar-dot--recent { background: #e0a11a !important; }
.avatar-dot--offline { background: #b7bdc4 !important; }

.avatar-plain {
  overflow: hidden;
  background: var(--dtf-blue-soft);
  border: 0;
  box-shadow: none;
}

/* Иконка вещи: белая плитка с линией — рисунок не висит в пустоте, но и серым
   пятном на карточке не сидит. */
.icon {
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}

.medal {
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  color: #174f93;
  background: var(--dtf-blue-soft);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  font-size: var(--t-note);
  letter-spacing: 0;
}

.medal::before { color: var(--link); }
/* Незаработанная медаль — таблетка без заливки: серую краску тут заменяет
   линия, иначе на карточке получается плашка в плашке. */
.medal-locked { color: var(--dim); background: none; border: 1px solid var(--line); }

.journal { margin-top: var(--s3); }
.journal-body { max-height: 270px; padding: var(--s3) var(--s4) var(--s4); font-size: var(--t-dense); }
.journal-line {
  padding: var(--s2) 0 var(--s2) var(--s4);
  color: #666;
  border-bottom: 1px solid var(--line);
}
.journal-line::before { color: var(--link); }
.journal-line:first-child { color: #111; }
.journal-line.ok { color: var(--life-ink); }
.journal-line.bad { color: var(--blood-ink); }
.journal-line.note { color: var(--link); }

.footer {
  margin-top: var(--s5);
  padding-top: var(--s4);
  color: var(--dim);
  border-top: 1px solid var(--line-strong);
}

.footer::before { display: none; }
.copy { color: var(--dim); font-size: var(--t-note); letter-spacing: 0; }

/* ── Вход и подтверждения ────────────────────────────────────────────────── */

.login { max-width: 680px; gap: var(--s3); }

/* Шаг входа — белая карточка с линией. Раньше это была серая плашка, а внутри
   неё белый кружок с номером: плашка в плашке на самом первом экране игры. */
.login-steps { gap: var(--s2); margin-bottom: var(--s4); }
.login-step {
  min-height: 56px;
  padding: var(--s3);
  color: #666;
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}

.login-step-num {
  width: 24px;
  height: 24px;
  color: #666;
  background: none;
  border: 1px solid var(--line-strong);
  font-size: var(--t-note);
}

.login-step-text b { color: #222; font-size: var(--t-dense); letter-spacing: 0; }
.login-step-text span { color: var(--dim); font-size: var(--t-note); }

.login-step.is-now {
  color: #174f93;
  background: var(--dtf-blue-soft);
  border-color: #c5ddff;
}

.login-step.is-now .login-step-num {
  color: #fff;
  background: var(--link);
  border-color: var(--link);
}

.login-step.is-done .login-step-num {
  color: #fff;
  background: var(--life);
  border-color: var(--life);
}

.login-field { margin-bottom: var(--s3); }

.login-label {
  margin-bottom: var(--s2);
  color: #505050;
  font-size: var(--t-dense);
  font-weight: 500;
  letter-spacing: 0;
}

.login-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-body);
  letter-spacing: 1.5px;
}

.login-profile {
  padding: var(--s3);
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}
.login-profile-text b,
.login-how b { color: #111; }
.login-profile-alias { color: var(--ink-soft); font-size: var(--t-note); }

.login-note {
  padding: var(--s3);
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-left: 3px solid #b4b4b4;
  border-radius: var(--r-inner);
}
.login-note.is-ok { background: var(--dtf-green-soft); border-color: transparent; border-left-color: var(--life); }
.login-note.is-again { background: var(--dtf-blue-soft); border-color: transparent; border-left-color: var(--link); }
.login-note.is-bad { background: var(--dtf-red-soft); border-color: transparent; border-left-color: var(--blood); }
.login-note-text { font-size: var(--t-dense); }
.login-note-hint { color: var(--ink-soft); font-size: var(--t-note); }

.login-small,
.login-how li { font-size: var(--t-dense); }

/* Вопрос — накрывающее окно (разметка и основа в public/ui/ask.css).
   Здесь только цвет и скругления слоя DTF: затемнение поверх страницы,
   белая карточка по центру видимого места. */
.ask { background: rgba(16, 24, 40, .45); }
.ask-box {
  padding: var(--s4);
  color: var(--ink);
  background: var(--fill-card);
  border: 0;
  border-radius: var(--r-panel);
  /* Единственная тень в теме: вопрос стоит «над» страницей и ждёт ответа. */
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
.ask-text {
  color: #111;
  font-family: inherit;
  font-size: var(--t-head);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: none;
}
.ask-note { color: var(--dim); font-size: var(--t-dense); }
.ask-buttons { margin-top: var(--s4); gap: var(--s2); }

/* ── Популярное и Оффтоп ─────────────────────────────────────────────────── */

.main-me-nick b,
.main-pending-text b,
.main-invite b,
.main-foe-nick b,
.main-rival-nick b { color: #111; }

.main-lvl,
.main-me-rating,
.main-rival-rating { color: var(--link); }

/* Повадка и реванш — приписка, а не действие: синим их выделять незачем. */
.main-habit,
.main-rematch { color: var(--dim); font-weight: 500; }

.main-me-alias,
.main-kind,
.main-shift,
.main-foe-title { color: var(--dim); }

.main-me { gap: var(--s4); }
.main-me-bars { gap: var(--s2); margin-bottom: var(--s3); }

/* Строки чисел все одной высоты. Ради этого две вещи: колонка пошире (чтобы
   «уровень экипировки 45 (обычная) · 4/12 слотов» влезала в строку) и min-height
   на самой строке — если значение всё же перенесётся, соседние строки не
   поедут, потому что высота у них уже задана. Раньше одна переносящаяся строка
   растягивала весь ряд, и сетка «плясала». */
.main-nums { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 var(--s4); }
.main-num {
  gap: var(--s3);
  align-items: baseline;
  min-height: 37px;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-dense);
}

.main-warn,
.ord-dirty {
  padding: var(--s3);
  color: var(--blood-ink);
  background: var(--dtf-red-soft);
  border-left: 3px solid var(--blood);
  border-radius: var(--r-inner);
  font-size: var(--t-dense);
}

.main-pending-row,
.main-invite,
.main-rival {
  gap: var(--s3);
  padding: var(--s2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-inner);
  transition: background-color .14s ease;
}

.main-pending-row:hover,
.main-invite:hover,
.main-rival:hover { background: var(--dtf-hover); }

.main-invite { background: var(--dtf-blue-soft); border-bottom-color: transparent; }
.main-invite:hover { background: #ddebfd; }
.main-invite-num { color: var(--dim); }

/* Карточка соперника — белая с линией. Была серой плиткой на белой панели, и
   девять таких плиток разом давали то самое «слишком много серого». */
.main-foes { gap: var(--s2); }
.main-foe {
  gap: var(--s3);
  padding: var(--s3);
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease;
}
.main-foe:hover { background: var(--dtf-hover); border-color: #cddffa; }
.main-foe-met { color: var(--dim); }

/* Итог, отказ и «в бою» — светлая красная и зелёная, без бурых чернил. */
.main-outcome.good,
.main-status-online { color: var(--life-ink); }
.main-outcome.bad,
.main-busy,
.main-why { color: var(--blood-ink); }
.main-status-recent { color: var(--dtf-amber-ink); }
.main-status-offline { color: var(--dim); }

/* Состояние соседа по арене — точкой, как на DTF. */
.main-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.main-feed-line { padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-dense); }
.main-more { margin-top: var(--s3); }

.offtop { gap: 0 var(--s3); }
.offtop-lead { color: var(--dim); font-size: var(--t-dense); }

/* Лента разговора — не плашка, а просто окно прокрутки: заливку сняли совсем.
   Была серая коробка на белой панели, а внутри неё ещё и подсвеченные строки —
   три слоя подряд, и верх ленты выглядел серой пустотой. */
.offtop-stream {
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: none;
}

.offtop-row {
  gap: var(--s2);
  padding: var(--s2);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: var(--t-dense);
}
.offtop-row--mine { background: var(--dtf-blue-soft); }
/* Строка площадки отличается не заливкой, а цветом слов (ниже по файлу):
   ещё одна серая полоса в ленте была лишней. */
.offtop-row--sys { background: none; }
.offtop-text { color: #111; }
.offtop-time { color: var(--dim); font-size: var(--t-note); }
.offtop-nick { color: var(--link); font-weight: 500; }
.offtop-nick:hover { color: var(--dtf-blue-hover); }
.offtop-nick--me { color: #111; }
.offtop-lvl { color: var(--dim); }
.offtop-alias { color: var(--dim); font-size: var(--t-note); }
.offtop-count { color: var(--dim); }
.offtop-empty { color: var(--dim); font-style: normal; }

/* Системные строки площадки: те же три краски, что и везде. */
.offtop-sys { font-size: var(--t-dense); }
.offtop-row--sys.tone-join .offtop-sys { color: var(--life-ink); }
.offtop-row--sys.tone-call .offtop-sys { color: var(--link); }
.offtop-row--sys.tone-fight .offtop-sys { color: var(--blood-ink); }
.offtop-row--sys.tone-part .offtop-sys { color: var(--dim); }

.offtop-say { margin-top: var(--s3); gap: var(--s2); }
.offtop-say.is-waiting input { background: var(--dtf-control-off); border-color: var(--line-strong); }
.offtop-say-foot { font-size: var(--t-note); }
.offtop-rest { color: var(--link); }

.offtop-invite {
  gap: var(--s2);
  padding: var(--s3);
  background: var(--dtf-blue-soft);
  border: 0;
  border-left: 3px solid var(--link);
  border-radius: var(--r-inner);
}
.offtop-invite--sent { background: none; border: 1px solid var(--line); border-left: 3px solid #b4b4b4; }
.offtop-invite-left { color: var(--link); font-size: var(--t-note); }

/* Строки списков одной высоты: 12 сверху, 12 снизу — сколько бы чисел в строке
   ни было и сколько бы их ни перенеслось. */
.offtop-who-row,
.offtop-top-row {
  gap: var(--s3);
  min-height: 56px;
  align-items: center;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-inner);
  transition: background-color .14s ease;
}
.offtop-who-row:hover,
.offtop-top-row:hover { background: var(--dtf-hover); }
.offtop-who-head { gap: var(--s1) var(--s2); }
.offtop-who-nums { font-size: var(--t-note); }
.offtop-who-nums b,
.offtop-top-rating { color: #111; }
.offtop-feed-line { padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-dense); }
.offtop-top-me {
  background: var(--dtf-blue-soft);
  border-radius: var(--r-inner);
  box-shadow: inset 3px 0 0 var(--link);
}
.offtop-top-me:hover { background: #ddebfd; }
.offtop-place { color: var(--link); }
.offtop-seen { color: var(--dim); }
/* Серия побед — не ошибка: тот же тёплый цвет, что и в полосе автора. */
.offtop-streak { color: var(--dtf-amber-ink); }

/* Значки состояния: слово плюс точка того же цвета — как в списках DTF. */
.offtop-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 20px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--t-note);
  letter-spacing: 0;
}
.offtop-badge--online::before,
.offtop-badge--recent::before,
.offtop-badge--offline::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.offtop-badge--online { color: #24733a; background: var(--dtf-green-soft); }
.offtop-badge--recent { color: var(--dtf-amber-ink); background: var(--dtf-amber-soft); }
/* «Не в сети» — не состояние, а его отсутствие: краски ему не положено, иначе
   в списке из десяти человек девять значков кричат серым. */
.offtop-badge--offline { color: var(--dim); background: none; }
.offtop-badge--free { color: #24733a; background: var(--dtf-green-soft); }
.offtop-badge--busy { color: var(--blood-ink); background: var(--dtf-red-soft); }

/* ── Автор, Наказ, Справка ───────────────────────────────────────────────── */

/* Эти два экрана перекрывают токены у себя, потому что public/ui/profile.css
   держит внутри .hero свою бурую палитру. --blood и --life остаются сочными:
   ими же красятся полосы и канты, а с них спрос 3:1. Словам ниже выдаётся
   плотная краска поимённо. */
.hero,
.ord {
  --ink: #111;
  --dim: var(--ink-soft);
  --gold-ink: #0b5dd7;
  --blood: #e5484d;
  --life: #2f9e44;
  --energy: #0b5dd7;
  /* --sheet — это «плитка» в public/ui/profile.css: им залиты одиннадцать мест
     от чисел автора до корзины. Была серая, стала белая: плитка внутри белой
     панели теперь держится линией --line, а не заливкой.
     Своё --line здесь больше не объявляем — берётся общее из :root. */
  --sheet: var(--fill-card);
}

/* Прибавка от вещи и обещание лечения написаны СЛОВАМИ, а не полосой: сочные
   краски давали на светлой плитке 3,19:1 и 3,62:1. Плотные дают 6,46:1 и
   6,48:1. */
.hero-plus { color: var(--life-ink); }
.ord-heal-say b { color: var(--blood-ink); }

.hero h4 {
  margin: var(--s4) 0 var(--s2);
  color: #555;
  font-size: var(--t-dense);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.hero h4:first-child { margin-top: 0; }

.hero-row { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.hero-row-key { color: var(--dim); font-size: var(--t-note); font-weight: 400; letter-spacing: 0; text-transform: none; }

.hero-card { gap: var(--s4); }
.hero-face .avatar {
  border: 0;
  box-shadow: none;
}
.hero-profile { color: var(--link); font-size: var(--t-note); }
.hero-profile:hover { color: var(--dtf-blue-hover); }
.hero-name { font-family: inherit; font-size: var(--t-cap); line-height: 1.3; letter-spacing: 0; }
.hero-name b,
.hero-num b,
.hero-build b,
.hero-slot-name,
.hero-stat-name b { color: #111; }
.hero-alias { color: var(--dim); font-style: normal; }
.hero-former span { color: var(--dim); }
.hero-level,
.hero-cap { color: var(--link); }
.hero-nick-note { font-style: normal; }

/* Все плитки внутри панели — одна плоскость, один радиус, одни поля.
   И плоскость эта БЕЛАЯ: серую заливку тут держали двадцать с лишним плиток
   разом, из-за них экран Автора и читался как «сплошное серое». Разделяет
   теперь линия. */
.hero-num,
.hero-gear-line,
.hero-build,
.hero-zone,
.hero-slot,
.hero-chances,
.hero-bag-all,
.medal-card,
.ord-heal,
.ord-manner,
.ord-say,
.help-stat,
.help-build {
  padding: var(--s3);
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}

.hero-nums { gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.hero-num i { color: var(--dim); font-size: var(--t-note); font-weight: 400; letter-spacing: 0; text-transform: none; }
.hero-num b { font-size: var(--t-body); }
.hero-zone { padding: var(--s1) var(--s2); }
.hero-zone i { color: var(--dim); font-size: var(--t-note); }
.hero-zones { gap: var(--s2); }
.hero-tiers { gap: var(--s1); margin-top: var(--s2); }
.hero-tier {
  padding: var(--s1) var(--s2);
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-note);
}
.hero-tier.is-here {
  color: #174f93;
  background: var(--dtf-blue-soft);
  border-color: transparent;
  font-weight: 500;
}
.hero-points {
  padding: var(--s3);
  background: var(--dtf-blue-soft);
  border-left: 3px solid var(--link);
  border-radius: var(--r-inner);
}
/* «Свободных очков нет» — не событие, красить его незачем: белая карточка
   с линией и серой чертой слева. */
.hero-points--empty { background: var(--fill-card); border: 1px solid var(--line); border-left: 3px solid #bbb; }
.hero-stat-desc td { background: transparent; }
.hero-stat-value { font-size: var(--t-body); }
.hero-what,
.hero-example,
.hero-build-desc { color: #555; }
.hero-effect { color: #111; }
.hero-tip { color: var(--dim); font-style: normal; }

/* Двенадцать слотов — двенадцать одинаковых плиток. grid-auto-rows: 1fr
   равняет ВСЕ ряды по самому высокому: раньше первый ряд был выше двух других,
   потому что в нём переносилось название надетой вещи, и сетка ехала. Кнопке
   «снять» общий min-width тут ни к чему — из-за него название ломалось ещё
   сильнее и плитка росла. */
.hero-slots { gap: var(--s2); grid-auto-rows: 1fr; }
.hero-slot { min-height: 76px; }
.hero-slot .btn { min-width: 0; }
.hero-slot--empty { background: none; border: 1px dashed var(--line-strong); }
.hero-slot-label,
.hero-chances-head,
.hero-tagline,
.ord-count,
.shop-goal-head,
.shop-compare-head,
.shop-tag {
  color: var(--dim);
  font-size: var(--t-note);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.hero-lore { color: var(--dim); font-style: normal; }
.hero-builds { gap: var(--s2); }
.hero-build-stats { color: var(--link); }

.ord-name b,
.ord-manner b { color: #111; }
.ord-share,
.ord-total b { color: var(--link); }
.ord-bar { background: var(--fill-divide); border: 0; border-radius: var(--r-pill); }
.ord-bar-fill { background: var(--link); }
.ord-heal-say { color: #555; }
.ord-manners { gap: var(--s2); }
.ord-manner span { color: #555; }
.ord-manner:hover { background: var(--dtf-hover); border-color: var(--line-strong); }
.ord-manner.is-picked {
  background: var(--dtf-blue-soft);
  border-color: #9bc3fa;
  box-shadow: none;
}
.ord-buttons { gap: var(--s2); margin: var(--s4) 0 var(--s2); }

.help { gap: var(--s3); }
.help-caption {
  margin: var(--s4) 0 var(--s2);
  padding-bottom: var(--s1);
  color: #111;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  letter-spacing: 0;
}
.help-toc { gap: var(--s1) var(--s2); font-size: var(--t-dense); }
.help-list b,
.help-stat-head b,
.help-build > b { color: #111; }
.help-mine {
  padding: var(--s3);
  background: var(--dtf-blue-soft);
  border-left: 3px solid var(--link);
  border-radius: var(--r-inner);
  font-size: var(--t-dense);
}
/* Метка Справки. Их на экране сто тридцать пять — именно они и делали Справку
   «сплошным серым». Заливку сняли, осталась линия: метка по-прежнему видна как
   отдельное слово, но не давит. */
.help-tag {
  padding: var(--s1) var(--s2);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-note);
}
.help-stats,
.help-builds { gap: var(--s3); }
.help-stat-head { margin-bottom: var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--line); }
.help-stat-short { color: var(--ink-soft); font-size: var(--t-note); }
.help-stat-mine { color: var(--link); }
.help-stat-effect { color: #111; }
.help-stat-tip { color: var(--dim); font-style: normal; }
.help-note { color: var(--dim); font-size: var(--t-note); }

/* ── Бой ─────────────────────────────────────────────────────────────────── */

/* В public/ui/fight.css красным написаны СЛОВА: заметка «соперника нет в сети —
   дерётся наказ», горячий отсчёт хода и урон в журнале. Сочная краска давала им
   3,62:1 на панели боя и 3,75:1 на чётной строке журнала; плотная — 6,48:1 и
   6,71:1. Токен --blood при этом не трогаем: им же залиты полоса Жизни на
   исходе и кант чужой стороны, а это указатели, и норма у них 3:1. */
.fg-note,
.fg-secs.is-hot,
.fg-wait.is-hot,
.fg-dmg { color: var(--blood-ink); }

/* Экран боя переделывает ведущий следующим заходом (см. concerns). Здесь
   только краска и шкала — раскладку боя этот файл не трогает: иначе бой
   остался бы единственным экраном на старых серых плитках. */
.fg-side,
.fg-choices,
.fg-panel,
.fg-loot-box {
  background: var(--fill-card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: none;
}

.fg-side { padding: var(--s3) var(--s2); }
.fg-side--me { box-shadow: inset 3px 0 0 var(--life); }
.fg-side--foe { box-shadow: inset -3px 0 0 var(--blood); }
.fg-face .avatar { box-shadow: none; }
.fg-name,
.fg-rating b,
.fg-secs,
.fg-rewards,
.fg-rating-move { color: #111; }
.fg-lvl,
.fg-gear b,
.fg-count b,
.fg-rewards b { color: var(--link); }
.fg-alias,
.fg-rating,
.fg-vital-name,
.fg-gear,
.fg-wait,
.fg-move,
.fg-count,
.fg-score { color: var(--dim); }
.fg-alias,
.fg-wait,
.fg-move,
.fg-replay-note,
.fg-empty,
.fg-rating-move.is-flat { font-style: normal; }
.fg-gear { border-top: 1px solid var(--line); padding-top: var(--s2); }
.fg-heal { color: var(--life-ink); }
.fg-rating-move.is-up b { color: var(--life-ink); }
.fg-rating-move.is-down b { color: var(--blood-ink); }
.fg-give-up { color: var(--blood-ink); }

.fg-effect {
  min-height: 20px;
  padding: 0 var(--s2);
  color: #174f93;
  background: var(--dtf-blue-soft);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--t-note);
}

/* Мелкие подписи боя: без разрядки и капса — это подписи, а не гравировка. */
.fg-col-title,
.fg-panel-title,
.fg-round,
.fg-loot-title,
.fg-round-line,
.fg-vital-name,
.fg-versus {
  color: var(--dim);
  font-size: var(--t-note);
  letter-spacing: 0;
  text-transform: none;
}
.fg-col-title,
.fg-panel-title,
.fg-round {
  border-bottom: 1px solid var(--line);
}
.fg-round-line { color: var(--link); font-weight: 700; }

.fg-choices { padding: var(--s3); gap: var(--s3); }
.fg-col-title { padding-bottom: var(--s2); margin-bottom: var(--s2); }
.fg-pick {
  gap: var(--s1);
  padding: var(--s2);
  color: #111;
  border-radius: var(--r-inner);
  transition: background-color .14s ease;
}
.fg-pick:hover { background: var(--dtf-hover); }
.fg-pick:has(input:checked) {
  background: var(--dtf-blue-soft);
  box-shadow: inset 0 0 0 1px #9bc3fa;
}
.fg-pick:has(input:disabled) { color: var(--dtf-ink-off); }
.fg-pick:has(input:disabled):hover { background: none; }

.fg-auto.is-on,
.fg-morale.is-on,
.fg-pill.sel {
  color: #fff;
  background: var(--link);
  border: 0;
  text-shadow: none;
}
.fg-auto.is-on:hover,
.fg-morale.is-on:hover,
.fg-pill.sel:hover { background: var(--dtf-blue-hover); }
.fg-pill.sel:active { background: var(--dtf-blue-press); }

.fg-panel { margin-top: var(--s3); }
.fg-panel-title { padding: var(--s2) var(--s3); }
.fg-panel-tools { color: var(--dim); font-size: var(--t-note); }
.fg-panel-body { padding: var(--s3); }
.fg-buttons { gap: var(--s2); }
.fg-series { gap: var(--s2) var(--s3); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.fg-round { margin: var(--s3) 0 var(--s1); padding-bottom: var(--s1); }
.fg-round:first-child { margin-top: 0; }

.fg-log { max-height: 340px; }
.fg-line {
  padding: var(--s2);
  font-size: var(--t-dense);
  line-height: 1.45;
}
/* Полосатость журнала боя убрана: серая через строку — это ещё один слой, а
   строки и без неё разделяются отступом. */
.fg-line:nth-child(even) { background: transparent; }
.fg-line.is-tactic { font-style: normal; border-left-color: #9bb0c9; }
.fg-line.is-finish { color: var(--blood-ink); background: var(--dtf-red-soft); border-left-color: var(--blood); }

.fg-vitals { gap: var(--s2); }
.fg-vital-name { text-align: left; }
.fg-mid { gap: var(--s3); }
.fg-go { gap: var(--s2); }

.fg-banner {
  padding: var(--s2) var(--s5);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--t-head);
  letter-spacing: 1px;
  text-shadow: none;
}
.fg-banner.win { color: var(--life-ink); background: var(--dtf-green-soft); }
.fg-banner.lose { color: var(--blood-ink); background: var(--dtf-red-soft); }
.fg-banner.draw { color: var(--dtf-amber-ink); background: var(--dtf-amber-soft); }
.fg-rematch {
  padding: var(--s3);
  color: var(--blood-ink);
  background: var(--dtf-red-soft);
  border: 0;
  border-radius: var(--r-inner);
  font-size: var(--t-dense);
}
.fg-loot-box { padding: var(--s3); }
.fg-loot-title { margin-bottom: var(--s2); }
.fg-replay-head { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }

/* ── Магазин ─────────────────────────────────────────────────────────────── */

.shop { --shop-line: var(--line); --shop-sheet: var(--fill-card); }
.shop-purse { font-size: var(--t-body); }
.shop-goal { padding: var(--s3); background: var(--fill-card); border: 1px solid var(--line); border-radius: var(--r-inner); }
/* В строке товара своя светлая плашка сравнения — полосатость тут лишняя. */
table.grid.shop-goods td { background: transparent; }
.shop-goods td { padding-top: var(--s3); padding-bottom: var(--s3); }
.shop-lore { color: var(--dim); font-style: normal; font-size: var(--t-note); }
.shop-req,
.shop-cant { color: var(--dim); font-size: var(--t-note); }

/* Сравнение «если надеть» было самым глубоким местом во всей игре: значок
   внутри сравнения внутри строки таблицы внутри панели — четыре слоя краски.
   Теперь сравнение — не плашка, а отбивка тонкой линией сверху, а сами значки
   цвета не имеют вовсе: разницу говорят стрелка и число, а «лучше/хуже» —
   зелёные и красные чернила. */
.shop-compare {
  margin-top: var(--s2);
  padding: var(--s2) 0 0;
  background: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.shop-compare-head { margin-bottom: var(--s1); }
.shop-diffs { gap: var(--s1) var(--s3); }
.shop-diff { padding: 0; background: none; font-size: var(--t-note); }
.shop-diff.is-up { background: none; color: var(--life-ink); }
.shop-diff.is-down { background: none; color: var(--blood-ink); }
.shop-warn { color: var(--blood-ink); font-size: var(--t-note); }
.shop-act .price { margin-bottom: var(--s2); }

/* ── Адаптивность ────────────────────────────────────────────────────────── */

/* 1280 и 1024 идут по общей раскладке; ниже 900 колонки складываются сами
   (public/ui/*.css), а здесь только поля и мелочи.
   Шкала на узком экране та же — просто ступенью ниже: поля панели 16 → 12,
   поля страницы 16 → 12 → 8. Шаг МЕЖДУ панелями остаётся 12 на любой ширине:
   именно по нему глаз и считывает, что панели равноправны. */

@media (max-width: 900px) {
  .page { padding: var(--s3) var(--s3) var(--s5); }
  .win-title { padding: var(--s3) var(--s3) 0; }
  .win-body,
  .win-wide .win-body { padding: var(--s3); }
  .journal-body { padding: var(--s3); }
  .fighter-strip { padding: var(--s2) var(--s3); }
  .link-state { padding: var(--s2) var(--s3); }
  .masthead { padding: var(--s3); }
}

@media (max-width: 720px) {
  .page { padding: var(--s2) var(--s2) var(--s5); }
  .masthead { min-height: 64px; }
  .logo { font-size: var(--t-cap); letter-spacing: -.6px; }
  .tagline { font-size: var(--t-note); }

  .menu { margin: var(--s3) 0; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: var(--s2) var(--s3); font-size: var(--t-body); }

  .btn-strike { min-height: 40px; padding: 0 var(--s4); }
  .btn-strike:active { padding: 0 var(--s4); }
}

@media (max-width: 480px) {
  .masthead { align-items: flex-start; min-height: 76px; }
  .fighter-strip { gap: var(--s1) var(--s3); }
  .strip-exit { margin-left: 0; }
  .login-steps { grid-template-columns: 1fr; }
  .login-buttons .btn { width: 100%; }
  .ask-buttons .btn { flex: 1 1 100%; }
  /* На телефоне ряды кнопок тянутся на всю ширину, поэтому общий min-width
     им только мешает: снимаем, ровность держит flex. */
  .btn,
  .btn-mini { min-width: 0; }
  table.grid { font-size: var(--t-note); }
  table.grid th,
  table.grid td { padding: var(--s2); }
}

/* ── Приведение к шкале: что натекло из соседних файлов ──────────────────── */

/*
 * public/ui/*.css писались до того, как у темы появились шкалы, и завели себе
 * свои ступени: 10 · 10,5 · 11 · 11,5 · 12,5 · 14 пикселей. По описи их набегало
 * до одиннадцати РАЗНЫХ кеглей на одном экране Магазина — оттого и «всё пляшет»:
 * подпись под товаром была на полпикселя мельче подписи в соседнем столбце, и
 * глазу не за что зацепиться.
 *
 * Чужие файлы не трогаем (их правят другие) — сводим кегли здесь, последним
 * слоем. Правило простое: 10 · 10,5 · 11 → 12 (подпись), 11,5 · 12,5 → 13
 * (плотный текст), 14 → 15 (число). Ничего между.
 *
 * Блок стоит в конце файла нарочно: он должен перебивать и сами ui/*.css,
 * и всё, что выше по этому файлу назначено «по месту».
 */

/* Подписи и приписки — 12. */
.main-when,
.main-why,
.main-foe-met,
.main-rival-state,
.offtop-now-head,
.offtop-lvl,
.offtop-quote,
.offtop-reply-bar,
.offtop-events-note,
.offtop-you,
.offtop-top-nums,
.shop-subhead-count,
.shop-rar,
.shop-move-head,
.shop-known,
.shop-per,
.shop-count,
.shop-pick-head,
.hero-former,
.hero-stat-name .muted,
.hero-plus,
.hero-build-stats,
.hero-slot-props,
.hero-sell-num,
.hero-sell-note,
.hero-lore,
.hero-req,
.hero-rar,
.hero-slot-rar,
.hero-stats-note,
.ord-add i,
.shop-lock,
.shop-more-head,
.help-stat-tip,
.help-grid .help-note,
/* Экран боя — самый запущенный случай: на нём стояло ВОСЕМЬ кеглей текста
   (10,5 · 11 · 11,5 · 12 · 12,5 · 13 · 15 · 17) против четырёх на Профиле и в
   Магазине. Часть уже сведена выше, в разделе «Бой», — там подписи столбцов и
   заголовки панелей. Здесь добираем остальное: приписки автора (прозвище,
   рейтинг, снаряжение, счётчик приёмов), заметку под соперником и подписи
   разбора. Правки только кегельные: краску, начертание и раскладку боя этот
   файл по-прежнему не трогает, а public/ui/fight.css остаётся чужим. */
.fg-note,
.fg-alias,
.fg-rating,
.fg-gear,
.fg-count,
.fg-explain-label,
.fg-kind-note-title,
.fg-farm-title,
/* Присказка «это правило, а не поломка» была 11,5 — тише соседнего абзаца на
   полпикселя, чего глаз не видит. Ставим её вровень с абзацем (12): тише её
   делают начертание и место в конце, а не полступени кегля. */
.fg-farm-hint { font-size: var(--t-note); }

/* Шапку товарной таблицы сосед уже переписал сам (public/ui/shop.css, «без
   серой заливки»), но кегль там остался 11 — доводим до ступени. */
table.grid.shop-goods thead th { font-size: var(--t-note); }

/* Плотный текст — 13. */
.offtop-now-vs,
.offtop-nick--big,
.shop-subhead-desc,
.shop-move-note,
.shop-move-line,
.shop-done,
.shop-sum-text,
.hero-stat-desc td,
.hero-build-desc,
.hero-bag-all-text span,
.hero-abils td:last-child,
.hero .hero-abils tr.hero-move-desc td,
.hero-count,
.shop-facts dt,
.ord-manner span,
/* Экран боя — плотная ступень: строка выбранного приёма, название и цена
   напитка, текст разбора и приписка к записи боя. .fg-pill уже приходит к 13
   через общую `.btn` (тема подключена после public/ui/fight.css), но названа
   здесь нарочно: таблетка выбора зоны — тот же плотный текст, и если сосед
   когда-нибудь снимет с неё класс .btn, кегль не уедет обратно на 11,5. */
.fg-move,
.fg-item-name,
.fg-item-cost,
.fg-explain-text,
.fg-replay-note,
.fg-pill { font-size: var(--t-dense); }

/* Числа и поля — 15. */
.shop-pick-num,
.help-find-input { font-size: var(--t-body); }

/*
 * То же самое с полями. Соседи развели 1 · 2 · 3 · 5 · 6 · 7 · 9 · 10 · 18 —
 * до десяти разных отступов на экране Оффтопа. Ниже — только те места, где
 * разнобой видно глазом: заголовки разделов, строки лент и таблетки-счётчики.
 * Плитки и карточки уже сведены выше, в своих разделах.
 */
.shop-subhead td,
.shop-move-full,
.offtop-reply,
.offtop-quote { padding: var(--s2) var(--s3); }

/* Мелочь, которая ломала ровность строки в Оффтопе: единица, двойка и тройка
   пикселей на глаз не видны, а в описи это три лишние ступени. */
.offtop-reply { border-radius: var(--r-inner); }
.offtop-who-act { padding-top: 0; }
.offtop-time,
.offtop-you { padding: 0; }

/* В Магазине завелись свои радиусы 3 и 4 и поля 2, 5 и 10. Оправу рисунка и
   замок правим здесь — они одиночными метками и слушаются.
   А вот `.shop-rar.rar-*` (радиус 3) и `.shop .shop-sum` (радиус и поля 10)
   написаны в public/ui/shop.css НАРОЧНО в две метки, чтобы перебить тему, —
   там даже комментарий об этом стоит. Чужое не переспориваю: две ступени из
   описи Магазина остаются, они перечислены в отчёте.
   Полей замка тоже не трогаю: 5 вместо 8 — ступень мимо шкалы, но с восемью
   метка «нужно: Ловкость 6» перестаёт помещаться в строку товара и роняет
   строку на вторую линию. Ровность строк тут дороже одной ступени в описи. */
.shop-lock { border-radius: var(--r-pill); }
/* Рамка значка вещи живёт в public/ui/shop.css: она про витрину, а не про
   общий слой. Тема подключается позже и перебивала её, из-за чего значок
   приходилось описывать двойным селектором. Убрано 12.08.2026. */

.hero-count,
.shop-rar,
.hero-rar,
.hero-slot-rar { padding: 0 var(--s2); }

/* Ряд действий над вещью — три кнопки одной ширины. Было 80 · 101 · 91, и они
   стояли ступеньками одна под другой: именно это владелец и называл «пляшет». */
.hero-acts,
.hero-sell-many { gap: var(--s2); margin-bottom: var(--s2); }
.hero-acts .btn,
.hero-sell-many .btn { min-width: 112px; }

/* Сетка характеристик (.mv-*) в public/ui/profile.css совсем свежая и завела
   свои 2 и 6 пикселей. Шапка и строка правятся ПАРОЙ — иначе столбцы шапки
   разъедутся со столбцами строк. */
.mv-head { padding: 0 0 var(--s2); }
.mv-line { padding: var(--s2) 0; }
.hero-reset-list { padding-left: var(--s5); }
.hero-reset-act { padding: var(--s3); }

/* Справочник приёмов в public/ui/help.css — тоже свежая работа соседа, и
   тоже со своими 9, 5, 14 и 2. Втяжку под раскрывающий знак (20 слева) НЕ
   трогаю: под неё подогнан сам знак, сдвину — уедет стрелка. Остальное на
   шкалу. */
.help-more > summary { padding-top: var(--s2); padding-bottom: var(--s2); }
.help-ref-head { padding-bottom: var(--s1); }
.help-ref-body { padding-top: 0; padding-bottom: var(--s3); }
.help-stat-mine { font-size: var(--t-note); }

/* Точка-разделитель в содержании Справки: единица пикселя по бокам — ступень
   из ниоткуда, а зазор между словами и так задан. */
.sep { padding: 0; }

/*
 * ⚠ Единственное место во всём файле, где приходится ЗАДИРАТЬ ВЕС СЕЛЕКТОРА.
 *
 * public/adaptive.css подключён в index.html ПОСЛЕ этого файла, поэтому обычным
 * `.page` его не перебить. На телефоне он ставит поля 10 и 14 — четыре ступени
 * мимо шкалы там, где их видно на каждом экране. Приписка `body` даёт вес на
 * единицу больше и ровно это чинит.
 *
 * Нажимаемость не страдает: 44 и 40 пикселей высоты adaptive.css задаёт
 * отдельно, через min-height, и я их не трогаю — меняются только БОКОВЫЕ поля.
 *
 * Правильное место для этих четырёх строк — сам adaptive.css. Как только его
 * хозяин перенесёт значения к себе, блок отсюда надо удалить: он тут временно
 * и перечислен в отчёте.
 */
@media (max-width: 768px) {
  /* Меню отсюда УБРАНО: хозяин adaptive.css перенёс значения к себе (шаг 4,
     поля 0 0 4, поля пункта 8 · 12), и там же теперь живёт сетка узкого меню.
     Две приписки `body` были ровно тем, из-за чего adaptive.css объявлял шаг
     6 пикселей, а на экране был 4: правило-то не работало. */
  body .tab { padding: 0 var(--s3); }
  body .fighter-strip { padding: var(--s3); }
  /* 7 пикселей в ячейке таблицы — та же история: на Справке их 224 штуки. */
  body table.grid th,
  body table.grid td { padding: var(--s2); }
}

/* Поля страницы отсюда тоже УБРАНЫ — по той же причине: 8 · 8 · 24 теперь
   стоят прямо в adaptive.css, в его же ступени ≤480. */

/* Счётчик в стаке и мелкие поля-числа: одна высота с мелкой кнопкой рядом,
   иначе ряд «продать за N» стоит ступеньками. */
.hero-sell-num input,
.ord-heal input[type="number"],
.ord-field input { min-height: 32px; padding: 0 var(--s2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,
  .menu a,
  .tab,
  .fg-pick,
  .main-foe,
  .main-rival,
  .offtop-who-row,
  .pick-card { transition: none; }
}