/* Оффтоп — площадка при арене (DESIGN-DTF.md §8), стили экрана public/ui/offtop.js.

   Ничего своего про цвета тут не выдумывается: краски берутся из переменных
   public/styles.css, панели остаются панелями (.win), кнопки — кнопками (.btn).
   Здесь только раскладка в две колонки, лента разговора и мелочи вроде значков
   состояния и системных строк.

   Слева — чат, справа — кто здесь, доска сильнейших и лента боёв. Узкий экран
   складывает всё в один столбец, и чат встаёт первым: за ним и приходят. */

/* ── Раскладка ─────────────────────────────────────────────────────────────── */

.offtop {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
}

.offtop-col { min-width: 0; }

/* Отступ между колонками, когда они встали друг под друга.
   Раньше тут было просто `.offtop-col > .win:last-child { margin-bottom: 0 }`,
   и на узком экране «Оффтоп» упирался в «Кто сейчас здесь» без единого пикселя
   между ними, хотя все прочие панели шли через 12 px (жалоба владельца
   10.08.2026: «между блоками Оффтоп и Кто здесь нет отступа как у остальных»).
   Причина была не в отступе колонки — сетка .offtop нарочно держит row-gap: 0,
   потому что панели носят свой отступ сами, — а в том, что последней панели
   ЛЮБОЙ колонки его снимали. Снимаем теперь только у самой последней на экране:
   лишний хвост внизу страницы не нужен, а шаг между колонками равен общему. */
.offtop-col:last-child > .win:last-child { margin-bottom: 0; }

.offtop-lead {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.offtop-note { margin-top: 8px; }

/* Аватар в строке не должен растягивать её и не должен прыгать при загрузке. */
.offtop-face { flex: 0 0 auto; line-height: 0; }

/* ── Вкладки: «Разговор» и «События» ───────────────────────────────────────── */
/* Вид у них общий (.tabs/.tab из styles.css и dtf-theme.css) — тот же, что во
   вкладках Профиля. Своего тут ровно две мелочи: место под точку и сама точка. */

.offtop-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* «Там появилось новое». Точка, а не число: считать непрочитанное в разговоре
   бессмысленно (реплики идут пачками), а прыгающая цифра дёргала бы глаз.
   Движения у неё нет вовсе — по той же причине (arena-motion §0: анимация
   объясняет изменение состояния, а появление точки и есть всё изменение).
   Синий --link на плитке вкладок #f1f1f1 — 5,22 : 1 при норме 3 : 1 для
   указателей; на белой активной вкладке — 5,90 : 1. */
.offtop-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--link);
}

/* ── Кто с кем дерётся прямо сейчас ────────────────────────────────────────── */
/* Стоит над лентой событий и не уезжает вместе с прокруткой: «кто сейчас в
   бою» — это ответ, за которым на вкладку и заходят. Пусто — блока нет вовсе. */

.offtop-now:empty { display: none; }

.offtop-now {
  margin-bottom: 12px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--dtf-blue-soft, rgba(11, 93, 215, .1));
  border-radius: var(--radius);
}

/* Подпись блока: 6,29 : 1 на белом и 5,56 : 1 на синей врезке — тише строк она
   не бледностью, а кеглем (11 px против 12). */
.offtop-now-head {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.offtop-now-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  padding: 2px 0;
}

/* «против» и «в бою с ботом»: 5,56 : 1 на синей врезке. */
.offtop-now-vs { color: var(--ink-soft); font-size: 11.5px; }

/* ── Поток разговора ───────────────────────────────────────────────────────── */

.offtop-stream {
  display: flex;
  flex-direction: column;
  /* Своя система координат: по цитате мы прыгаем к исходной реплике и считаем
     её offsetTop от этого края (public/ui/offtop.js, showSource). */
  position: relative;
  height: clamp(280px, 46vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 8px;
  background: rgba(255, 252, 240, .3);
  border: 1px solid #a89670;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 4px rgba(90, 70, 40, .25);
}

/* Разговор липнет к низу, как в любом чате: пока реплик мало, они стоят
   у поля ввода, а не висят под потолком. Отступ сверху делает именно auto —
   так лента остаётся прокручиваемой, когда реплик станет много. */
.offtop-stream-body { margin-top: auto; }

/* ── Про --dim в этом файле ────────────────────────────────────────────────────
   Серый --dim задумывался как «тихий текст», но тихим выходил до нечитаемости:
   #8a8a8a на светлых фонах площадки — 3,05–3,45 : 1, ниже порога 4,5 : 1, а на
   бересте #6b5c43 даёт 4,24 : 1. Поэтому везде, где им была окрашена именно
   надпись, стоит --ink-soft: 5,42–6,29 : 1 в теме DTF и 6,60–7,82 : 1 на
   бересте. Тише основного текста эти подписи остаются кеглем — 10,5–12 px
   против 13 px строки и 15 px тела, — а не бледностью.

   (В теме DTF --dim с тех пор сам приравняли к --ink-soft, так что на живой
   странице цвета совпадают. Явный --ink-soft оставлен нарочно: берестяной
   запасной слой такого равенства не знает, а порог держать надо и там.)

   Серым остались только две вещи, и обе не буквы живого интерфейса: черта слева
   у отправленного вызова (это указатель, ему хватает 3 : 1) и ник выключенной
   кнопки вызова — выключенное и должно выглядеть выключенным, WCAG такие узлы
   из порога прямо исключает. */

.offtop-empty {
  padding: 18px 6px;
  text-align: center;
  font-style: italic;
  /* Пустой поток: 3,19 → 5,82 : 1. */
  color: var(--ink-soft);
}

.offtop-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 2px;
  font-size: 12px;
  line-height: 1.5;
  border-bottom: 1px dotted rgba(34, 28, 20, .14);
}
.offtop-row:last-child { border-bottom: none; }

/* Своя реплика — чуть тёплее фоном, чтобы глаз находил себя в ленте. */
.offtop-row--mine { background: rgba(201, 162, 39, .1); }

/* Часы реплики. Было --dim — 3,19 : 1 на потоке и 3,05 : 1 на своей строке;
   стало --ink-soft — 5,82 : 1 и 5,56 : 1. Внимание на себя они по-прежнему не
   тянут: 10,5 px против 12,5–13 px у слов. */
.offtop-time {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--ink-soft);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Слова занимают всё, что осталось между аватаром и кнопкой «ответить»:
   тогда кнопка стоит у правого края одинаково во всех строках.
   Основа именно 0, а не auto: строка чата умеет переноситься (её первую полосу
   занимает цитата), и с основой по содержимому длинная реплика утаскивала бы
   за собой на новую полосу и себя, и «ответить». */
.offtop-said { flex: 1 1 0; min-width: 0; word-break: break-word; }

/* Двоеточие между именем и словами: 3,19 → 5,82 : 1 на потоке,
   3,05 → 5,56 : 1 на своей строке. */
.offtop-colon { color: var(--ink-soft); margin-right: 2px; }

.offtop-text { color: var(--ink); }

/* «· «второе имя»» рядом с ником. Было --dim — 3,19 : 1 на потоке, 3,05 : 1 на
   своей строке; стало --ink-soft — 5,82 : 1 и 5,56 : 1. Второстепенным имя
   делает кегль (11 px против 12,5 у ника), а не бледность. */
.offtop-alias {
  font-size: 11px;
  color: var(--ink-soft);
  margin-left: 3px;
}

/* ── Ник как кнопка вызова ─────────────────────────────────────────────────── */

.offtop-nick {
  font-weight: bold;
  color: #6d4f12;
  letter-spacing: .2px;
}
.offtop-nick:hover { color: var(--blood); }
.offtop-nick--me { color: #3d6323; cursor: default; }
.offtop-nick--big { font-size: 12.5px; }
.offtop-nick[disabled] { color: var(--dim); }

/* Имя без кнопки: бот из тренировки, участник старой записи — тот, у кого арена
   не знает id. Звать его некуда, поэтому и подчёркивать нечем: это просто имя.
   Раньше такие рисовались как «это ты», зелёным, — человек находил себя там,
   где его не было.

   Селектор нарочно двойной (0,2,0). Тема dtf-theme.css подключена ПОСЛЕ этого
   файла и красит `.offtop-nick` в синий — одиночный класс ей проиграл бы по
   порядку, а не по смыслу. Цвет берём переменной, чтобы работало в обеих темах:
   --ink-soft это #4a3d29 на бересте (8,5 : 1) и #606060 на белом DTF (6,3 : 1)
   при норме 4,5 : 1 для текста. */
.offtop-nick.offtop-nick--plain { color: var(--ink-soft); cursor: default; }

.offtop-lvl {
  font-size: 11px;
  font-weight: bold;
  color: #5f5138;
}

/* ── Ответ на конкретную реплику ───────────────────────────────────────────── */

/* Кнопка «ответить» видна всегда, а не по наведению: на телефоне наведения нет
   вовсе, и спрятанное действие там просто не существует.

   Тихой её делает не бледность, а размер и цвет буквы. Раньше было наоборот:
   10,5 px серым --dim давали 3,19 : 1 на фоне потока — ниже порога 4,5 : 1, и
   прочитать слово удавалось не всем. Теперь кегль 12 (нижняя ступень шкалы
   dtf-theme.css — та же, что у часов и приписки) и --ink-soft: 5,82 : 1 на
   потоке, 5,56 : 1 на своей реплике. Серый рядом с синим ником и чёрными
   словами всё равно читается вторым — спорить ему нечем. */
.offtop-reply {
  /* Точка отсчёта для площадки нажатия ниже. */
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 1px;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
/* Под курсором — синий потемнее (--link дал бы 4,89 на потоке и 4,67 на своей
   строке: проходит, но впритык, и любой сдвиг оттенка строки его роняет). */
.offtop-reply:hover { color: var(--dtf-blue-hover, #0a4fb5); background: rgba(0, 0, 0, .05); }
.offtop-reply.is-picked { color: var(--link); font-weight: bold; }

/* Площадка нажатия: палец толще курсора, и слову в 12 px нужно поле вокруг.
   Растим не саму кнопку, а невидимую накладку — она вылезает за её края и
   поэтому не раздвигает строку потока (её высоту держит аватар). Накладка —
   часть кнопки, так что попадание по ней считается попаданием по кнопке.
   32×32 — нижняя граница из разбора; по ширине слово и так длиннее. */
.offtop-reply::after,
.offtop-reply-off::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 32px;
  min-height: 32px;
  transform: translate(-50%, -50%);
}

/* Строка, которой сейчас отвечают: та же метка слева, что у своей строки в
   доске сильнейших, — «вот это выбрано». */
.offtop-row.is-answering { box-shadow: inset 2px 0 0 var(--link); }

/* Цитата над репликой: ник исходника и его начало, ровно одна строка.
   Длинный хвост обрывается многоточием — раскладку он не ломает никогда.
   Строка чата переносится (flex-wrap), и цитата занимает в ней первую полосу
   целиком: на телефоне ей нужна вся ширина, иначе от чужих слов остаётся
   два слога. */
.offtop-row { flex-wrap: wrap; }

.offtop-quote {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin: 0 0 3px;
  padding: 2px 6px;
  font: inherit;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  /* Цитата сидит на подложке, которая на 5% темнее строки, — и любой серый на
     ней проседает. --ink-soft держал 5,21 : 1 на потоке и 4,99 на своей строке,
     а под курсором (подложка темнеет до 9%) падал до 4,76 и 4,55 : 1 — то есть
     впритык к порогу, и хватило бы сдвига оттенка строки, чтобы он ушёл вниз.
     Теперь тут цвет обычных слов: 15,65 / 14,97 в покое и 14,29 / 13,67 под
     курсором. Тише реплики цитата остаётся кеглем (11 px против 13), подложкой
     и синей чертой слева — приглушать её ещё и краской нечем. */
  color: var(--ink);
  background: rgba(0, 0, 0, .05);
  border: 0;
  border-left: 2px solid var(--link);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
}
.offtop-quote:hover { background: rgba(0, 0, 0, .09); }

/* Имя не ужимается вместе с цитатой: без него непонятно, кому отвечали.
   Ограничение по половине строки держит только совсем длинные ники.

   Синий --link на подложке цитаты давал 4,89 : 1 на потоке и 4,67 : 1 на своей
   строке — формально выше порога, но с запасом в сотые доли: подложка тут уже
   темнее строки, и дальше опускаться некуда. Поэтому ник цитаты синеет сразу
   тем тоном, каким ссылки темнеют под курсором: 6,22 : 1 и 5,95 : 1. */
.offtop-quote-nick {
  flex: 0 0 auto;
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  color: var(--dtf-blue-hover, #0a4fb5);
}

/* Под курсором подложка темнеет ещё на 4% — ник уходит на ступень глубже, к
   тону нажатой ссылки: 7,04 : 1 на потоке и 6,74 : 1 на своей реплике.
   Это и отклик на наведение, и запас по контрасту разом. */
.offtop-quote:hover .offtop-quote-nick { color: var(--dtf-blue-press, #08429a); }

.offtop-quote-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Прыгнули по цитате к исходнику: он на полторы секунды разгорается тёплым и
   гаснет сам. Это не украшение — иначе непонятно, куда именно тебя перенесло. */
@keyframes offtop-found {
  from { background-color: var(--dtf-amber-soft, #fff6e0); }
  to { background-color: transparent; }
}
.offtop-row.is-found { animation: offtop-found 1400ms ease-out; }

/* Плашка над полем ввода: кому отвечаем. Крестик снимает ответ, Escape в поле
   делает то же самое. */
.offtop-reply-bar {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, .05);
  border-left: 2px solid var(--link);
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* Плашка уже отбила поле от ленты — форме сверху хватит малого.
   4, а не 5: шкала отступов в теме DTF — 4 · 8 · 12 · 16 · 24, и пятёрка тут
   осталась с берестяных времён. */
.offtop-reply-bar + .offtop-say { margin-top: 4px; }

.offtop-reply-mark {
  flex: 0 0 auto;
  font-weight: bold;
  color: var(--link);
}

.offtop-reply-peek {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Тот же разбор, что и у «ответить», только тут крестик: серым --dim он давал
   3,09 : 1 на плашке, а под курсором краснел до 3,50 : 1 — то есть подсказка
   была хуже покоя. Красный сюда и не просился: снять выбранный ответ — дело
   безобидное, ничего не пропадает. Поэтому крестик просто дочернеет до цвета
   слов: 5,63 : 1 в покое, 16,9 : 1 под курсором. Размер буквы прежний (15 px
   и так не мелочь), площадь нажатия добирает общая накладка выше. */
.offtop-reply-off {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 5px;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}
.offtop-reply-off:hover { color: var(--ink); }

/* ── Системные строки: события площадки, а не люди ─────────────────────────── */

.offtop-row--sys { background: rgba(51, 80, 125, .07); }

.offtop-sys {
  /* Та же основа 0, что и у слов человека: перенос в строке оставлен цитате. */
  flex: 1 1 0;
  min-width: 0;
  font-style: italic;
  font-size: 11.5px;
  color: var(--link);
  word-break: break-word;
}
.offtop-sys::before {
  content: '· ';
  font-style: normal;
  font-weight: bold;
}

/* Ник внутри события — такая же кнопка вызова, как в чате. Строка события
   набрана курсивом, поэтому имя из неё выступает прямым начертанием и весом:
   цветом ему выделиться нечем — вся строка и так синяя. */
.offtop-row--sys .offtop-nick {
  font-style: normal;
  font-weight: 700;
}

/* Каждому событию — свой оттенок, но все они читаются как одно семейство. */
.offtop-row--sys.tone-join .offtop-sys { color: #3d6323; }
/* «Ушёл с площадки» — самое тихое событие, но и его читают: 3,07 → 5,59 : 1. */
.offtop-row--sys.tone-part .offtop-sys { color: var(--ink-soft); }
.offtop-row--sys.tone-call .offtop-sys { color: #7a5f12; }
.offtop-row--sys.tone-fight .offtop-sys { color: var(--blood); }
.offtop-row--sys.tone-note .offtop-sys { color: var(--link); }

/* ── Поле ввода ────────────────────────────────────────────────────────────── */

.offtop-say {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.offtop-say input { flex: 1 1 auto; min-width: 0; }
.offtop-say .btn { flex: 0 0 auto; }

/* Пауза между репликами: поле остаётся живым, но видно, что ждём. */
.offtop-say.is-waiting input {
  background: #ece2c8;
  border-color: #a08f6a;
}

/* Приписки под полем ввода: сколько знаков осталось, когда можно снова, какое
   тут правило. Служебные — но не декоративные: их читают, когда поле не пускает.
   Было --dim — 3,45 : 1 на белой панели; стало --ink-soft — 6,29 : 1. Приписка
   и так тише формы: 10,5–12 px против 15 px поля. Правило про длину наследует
   этот же цвет. */
.offtop-say-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  /* 4 — ступень общей шкалы отступов (4 · 8 · 12 · 16 · 24). */
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-soft);
}

/* На вкладке событий поля ввода нет — тут не разговаривают, — и вместо приписок
   поля под лентой стоит одна строка про саму вкладку. Она не прячется на узком
   экране (в отличие от .offtop-rule): именно там объяснение и нужнее всего.
   6,29 : 1 на белой панели, кегль 11 против 13 у строк ленты. */
.offtop-events-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-soft);
}

/* «Можно снова через N» — предупреждение, а не беда: ничего не сломалось, надо
   переждать. Красный --blood в теме DTF светлый (#e5484d) и на белой панели
   давал 3,91 : 1 даже жирным. Взят янтарь темы — тот же, каким помечены «был
   недавно» и серия побед: 5,92 : 1. На бересте, где янтарного токена нет,
   остаётся прежний тёмный --blood — 5,78 : 1. */
.offtop-wait { color: var(--dtf-amber-ink, var(--blood)); font-weight: bold; }
.offtop-rest { color: #7a5f12; }
.offtop-rule { margin-left: auto; font-style: italic; }

/* ── Вызовы ────────────────────────────────────────────────────────────────── */

.offtop-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(201, 162, 39, .14);
  border: 1px solid #a89670;
  border-left: 3px solid var(--blood);
  border-radius: var(--radius);
}
.offtop-invite + .offtop-invite { margin-top: 6px; }

.offtop-invite--sent {
  background: rgba(255, 252, 240, .28);
  border-left-color: var(--dim);
}

.offtop-invite-text {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
}
.offtop-invite-text .muted { display: block; }

.offtop-invite-left {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: bold;
  color: var(--blood);
  font-variant-numeric: tabular-nums;
}

.offtop-invite-act {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
}

/* ── Кто сейчас здесь ──────────────────────────────────────────────────────── */

/* Счёт площадки в заголовке: «в сети 3 · в бою 1». Числа моноширинные, строка
   не переносится — иначе заголовок панели дёргался бы на каждом входе-выходе. */
.offtop-count {
  color: #a3936f;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.offtop-who-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px dotted rgba(34, 28, 20, .2);
}
.offtop-who-row:first-child { padding-top: 0; }
.offtop-who-row:last-child { border-bottom: none; padding-bottom: 0; }

/* Кого нет на площадке — приглушаем, но не прячем: вызвать по наказу можно. */
.offtop-who-row--offline { opacity: .72; }

.offtop-who-body { flex: 1 1 auto; min-width: 0; }

.offtop-who-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

.offtop-who-nums {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  word-break: break-word;
}
.offtop-who-nums b { color: #3b2c14; }

.offtop-streak { color: var(--blood); font-weight: bold; }
/* «Был(а) N назад» — 3,45 → 6,29 : 1 на белой панели. */
.offtop-seen { color: var(--ink-soft); }

/* Причина отказа — не всплывающая подсказка, а строка под числами: подсказки
   title на телефоне нет вовсе, и запертая кнопка там молчала. Тот же приём и
   тот же цвет, что у соперника в «Популярном» (main.css, .main-why): 7,00 : 1
   на белой панели. Строка появляется только там, где отказ не проговорён
   значками «не в сети»/«в бою», — иначе список удвоился бы в высоте. */
.offtop-why {
  display: block;
  margin-top: 2px;
  /* Тот же кегль, что у чисел рядом: в теме DTF он 12 px (--t-note), в
     берестяной — 11 px. Пишем через ту же ступень, чтобы приписка не выбивалась
     из строки ни там, ни там. */
  font-size: var(--t-note, 11px);
  line-height: 1.5;
  color: var(--blood-ink);
  word-break: break-word;
}

/* Отказ, общий для всего списка («ты уже в бою», «связи нет»), — один раз
   сверху, а не в каждой строке. */
.offtop-why--all {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px dotted rgba(34, 28, 20, .2);
}

.offtop-who-act { flex: 0 0 auto; padding-top: 1px; }

/*
 * Запертая кнопка «Вызвать» в списке «Кто здесь».
 *
 * Тема гасит выключенную кнопку до --dtf-ink-off (#a2a8b0) на заливке
 * разделителя (#f2f3f5) — 2,16 : 1. Для выключенного органа управления WCAG
 * этого не запрещает, но здесь кнопка стоит в списке живых людей и по ней
 * читают, можно ли позвать ИМЕННО ЭТОГО, — то есть она не украшение, а ответ.
 * Поэтому берём второй голос текста (--ink-soft): 5,66 : 1 на заливке кнопки,
 * 6,29 : 1 на белой панели. В берестяной теме тот же приём даёт 5,13 : 1
 * вместо прежних 1,91 : 1.
 *
 * Кант: у выключенной .btn-mini он прозрачный (коробка та же, что у включённой),
 * и на белой панели кнопка пропадала совсем — 1,11 : 1 по заливке. Возвращаем
 * ему цвет поля (--line-field, 3,17 : 1 на белом): норма для органа управления
 * 3 : 1 (WCAG 1.4.11) выдержана, а ширина не меняется — кант уже был, просто
 * невидимый.
 */
.offtop-who-act .btn.offtop-call[disabled],
.offtop-who-act .btn.offtop-call[disabled]:hover,
.offtop-who-act .btn.offtop-call[disabled]:active {
  color: var(--ink-soft);
  border-color: var(--line-field, #8c9198);
}

/* Своя строка: вместо кнопки «Вызвать» — тихая пометка «это ты». Кнопки там нет
   вовсе (просьба владельца 10.08.2026), а место под неё оставлено: без него
   строка каждый раз перестраивалась бы шириной. 6,29 : 1 на белой панели. */
.offtop-you {
  display: inline-block;
  padding-top: 3px;
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Значки состояния: одно слово, чтобы не гадать по цвету точки. */
.offtop-badge {
  display: inline-block;
  padding: 0 6px 1px;
  font-size: 10px;
  letter-spacing: .3px;
  border: 1px solid;
  border-radius: 8px;
  white-space: nowrap;
}
.offtop-badge--online { color: #2f5d1f; border-color: #6d9c4d; background: rgba(109, 156, 77, .2); }
.offtop-badge--recent { color: #7a5f12; border-color: #b39543; background: rgba(179, 149, 67, .18); }
/* Значок «не на площадке» — слово, а не украшение: серым он не читался. */
.offtop-badge--offline { color: var(--ink-soft); border-color: #a89670; background: rgba(120, 96, 56, .12); }
.offtop-badge--busy { color: var(--blood); border-color: #b4695f; background: rgba(143, 31, 26, .12); }
.offtop-badge--free { color: #3d6323; border-color: #8aa877; background: rgba(120, 150, 96, .14); }

/* ── Доска сильнейших ──────────────────────────────────────────────────────── */

/* Не таблица, а список: в узкой колонке шесть столбцов ужимаются до многоточий,
   а список одинаково хорош и на широком экране, и на телефоне. */

.offtop-top-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 4px;
  border-bottom: 1px dotted rgba(34, 28, 20, .2);
}
.offtop-top-row:first-child { padding-top: 0; }
.offtop-top-row:last-child { border-bottom: none; }

/* Своя строка подсвечена: видно, где ты среди прочих. */
.offtop-top-me {
  background: rgba(201, 162, 39, .2);
  box-shadow: inset 2px 0 0 var(--blood);
}

.offtop-place {
  flex: 0 0 auto;
  min-width: 16px;
  text-align: right;
  font-weight: bold;
  color: #7a5f12;
  font-variant-numeric: tabular-nums;
}

.offtop-top-body { flex: 1 1 auto; min-width: 0; }

.offtop-top-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
/* Длинный ник не ломает строку, а обрывается многоточием:
   уровень и рейтинг важнее последних букв. */
.offtop-top-head .offtop-nick {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.offtop-top-nums {
  display: block;
  font-size: 10.5px;
  color: var(--ink-soft);
}

.offtop-top-rating {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: bold;
  color: #3b2c14;
  font-variant-numeric: tabular-nums;
}

/* ── Лента боёв ────────────────────────────────────────────────────────────── */
/* Общая лента: последние бои ВСЕЙ арены. Строка читается как фраза — «кто кого
   и с каким счётом», — а ники в ней кнопки, те же самые, что в чате. Поэтому
   никакой своей раскладки в столбцы тут нет: столбцы разорвали бы фразу. */

.offtop-feed-line {
  display: flex;
  gap: 6px;
  padding: 4px 2px;
  font-size: 11.5px;
  line-height: 1.5;
  border-bottom: 1px dotted rgba(34, 28, 20, .16);
}
.offtop-feed-line:last-child { border-bottom: none; }

.offtop-feed-text { min-width: 0; color: var(--ink-soft); word-break: break-word; }

/* Ник внутри строки ленты. Кегль тут ниже, чем в чате (11,5 против 12,5), так
   что от ника хватает полужирного и цвета — крупнее делать нечего.

   Переносить длинное имя разрешаем: колонка на телефоне узкая, и ник в тридцать
   знаков с `white-space: nowrap` вылез бы за край панели и утащил бы за собой
   всю страницу. Целостность имени тут не стоит горизонтальной прокрутки. */
.offtop-feed-text .offtop-nick {
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Откуда лента — строкой над боями: это условие чтения, а не сноска.
   Отступ свой: .offtop-note отбивает СВЕРХУ (он для сносок), а этой строке
   нужен отбив снизу — от неё до первого боя. */
.offtop-feed-lead { margin: 0 0 6px; }

/* ── Узкий экран ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .offtop { grid-template-columns: minmax(0, 1fr); }
  .offtop-stream { height: clamp(240px, 40vh, 420px); }
}

@media (max-width: 520px) {
  .offtop-rule { display: none; }
  .offtop-who-row { flex-wrap: wrap; }
  .offtop-who-act { width: 100%; padding-left: 44px; }
  .offtop-invite-act { width: 100%; }
  .offtop-top-nums { font-size: 10px; }
  /* Площадь под палец даёт накладка, а не сама кнопка, — поэтому на узком
     экране поля по бокам, наоборот, ужимаем: каждый пиксель ширины тут нужнее
     словам реплики, чем воздуху вокруг слова «ответить». Раздуй мы видимую
     кнопку до 32 px, строка потока выросла бы на 19 px — а поток уже принят. */
  .offtop-reply { padding: 3px 5px; }
}

/* ── Кому движение мешает ──────────────────────────────────────────────────── */
/* Подсветку найденного исходника заменяет ровный тёплый фон: он держится всё
   то же время (класс снимает public/ui/offtop.js), просто не гаснет плавно. */

@media (prefers-reduced-motion: reduce) {
  .offtop-row.is-found {
    animation: none !important;
    background-color: var(--dtf-amber-soft, #fff6e0);
  }
}