/*
  ТЕЛЕФОН — ГЛАВНЫЙ ЭКРАН ЭТОГО САЙТА.

  Отдельный файл, подключается ПОСЛЕ всех остальных. Так сделано осознанно:
  styles-v8.css собран слоями поверх шести прошлых версий, и правка внутри него
  задевает то, о чём не думал. Здесь же собрано одно — поведение на узком
  экране, — и его видно целиком.

  ПОЧЕМУ ПОНАДОБИЛСЯ. Сайт делался «сначала телефон», но проверялся сужением
  окна на компьютере. Это не то же самое: в браузере на компьютере нет ни
  выреза камеры, ни полосы жестов, ни клавиатуры на пол-экрана, ни разницы
  между 100vh и видимой высотой. Живое видео с телефона показало, чего
  не видно из окна.

  ГЛАВНЫЙ ИСТОЧНИК БЕДЫ — сетки с фиксированными колонками. Строка рейтинга
  просит 54px + auto + 1fr + auto плюс отступы; на экране 360px содержимое
  не влезает, и браузер расширяет страницу вместо того, чтобы переносить.
  Дальше вся страница едет в сторону, а масштаб «уплывает» — это и выглядит
  как поломка.
*/

/* ── Нижняя граница: 380px и уже ──────────────────────────────────────────── */

/*
  360px — это ширина большинства недорогих Android, на которых играет
  аудитория. iPhone SE — 375px. Всё, что ниже 380, обязано работать без
  горизонтальной прокрутки, и это проверяется вручную, а не «на глаз».
*/
@media (max-width: 420px) {
  /*
    Отступы по краям: 18px с каждой стороны от 360 — это 10% ширины экрана
    в никуда. Ужимаем до 12, содержимому нужнее.
  */
  .wrap { padding-left: 12px; padding-right: 12px; }
  .site-head__inner { padding-left: 12px; padding-right: 12px; }

  .panel, .hero { padding-left: 13px; padding-right: 13px; border-radius: 13px; }

  /*
    РЕЙТИНГ: три колонки вместо четырёх.

    Очки уезжают под имя, а не жмутся в свою колонку справа. Так строка
    перестаёт требовать больше ширины, чем есть, и цифры остаются читаемыми
    вместо того, чтобы переноситься по одному символу.
  */
  .lad__row {
    grid-template-columns: 38px 1fr auto;
    grid-template-areas:
      "place ident ident"
      "place form  wl"
      "place pts   pts";
    gap: 2px 8px;
    padding: 10px 4px;
  }
  .lad__pts { text-align: left; }
  .lad__place b { font-size: 14px; }

  /*
    Строка недели в карточке альянса: пять колонок на 360px невозможны.
    Собираем в два яруса.
  */
  .vs__row {
    grid-template-columns: 46px 1fr auto;
    grid-template-areas:
      "week dates dates"
      "week badge total";
  }

  /* Плитки альянсов: две в ряд вместо трёх, иначе тег обрезается. */
  .tiles { grid-template-columns: 1fr 1fr; }

  /* Достижения: одно в ряд. Две карточки по 190px в 360px не влезают. */
  .achievement-grid { grid-template-columns: 1fr; }

  /* Фото в хронологии: две в ряд — по 120px минимум умещается ровно две. */
  .tl__gallery { grid-template-columns: 1fr 1fr; }

  /*
    Колокольчик уведомлений: на телефоне слово «Уведомления» делает строку
    «профиль · выйти» тесной. Подпись прячем — остаётся кружок со счётчиком,
    а для программ кнопка уже названа aria-label.
  */
  .forum-bell__label { display: none; }
  .forum-bell { padding-left: 10px; padding-right: 10px; }
}

/* ── Ничего не должно вылезать за край ────────────────────────────────────── */

/*
  СТРАХОВКА ОТ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ.

  overflow-x: hidden на body уже стоит в styles-v8.css, но он лечит следствие:
  страница перестаёт ездить, а содержимое всё равно обрезано, и часть кнопок
  недостижима. Поэтому здесь — причины.

  Длинное слово без пробелов (ник, ссылка, тег альянса) растягивает своего
  родителя, а тот — всю сетку. Перенос в любом месте некрасив, но читаемый
  текст с переносом посреди слова лучше недостижимой половины экрана.
*/
@media (max-width: 760px) {
  .lad__name, .lad__ident,
  .podium__name, .leader__name,
  .tile, .tag,
  .forum-post__title, .forum-post__body,
  .forum-comment__body, .forum-post__by b,
  .tl__body h3, .tl__summary,
  .quart-card__name, .ally__name {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /*
    min-width: 0 на элементах сетки — не украшение. По умолчанию элемент
    внутри grid и flex не сжимается меньше своего содержимого, и именно так
    фиксированная колонка выдавливает страницу за край.
  */
  .lad__row > *, .vs__row > *,
  .forum-post__head > *, .forum-me > * { min-width: 0; }

  /*
    Картинки шире экрана — вторая частая причина. Ограничение на все разом:
    искать конкретную каждый раз дороже, чем закрыть класс задач.
  */
  img, svg, video { max-width: 100%; height: auto; }

  /* Таблица очков в гайде: даём прокрутку внутри, а не всей странице. */
  .proof__row { grid-template-columns: 74px 1fr auto; gap: 7px; }
}

/* ── Масштаб текста ───────────────────────────────────────────────────────── */

/*
  ЧТО ИМЕННО «УЕЗЖАЛО».

  На iPhone Safari сам увеличивает шрифт в ландшафте, если не сказать иначе.
  Выглядит это как «сайт поехал»: пропорции меняются, вёрстка ломается,
  а человек ничего не делал — просто повернул телефон.

  text-size-adjust: 100% отключает эту самодеятельность. НЕ путать с запретом
  масштабирования пальцами: увеличить двумя пальцами по-прежнему можно,
  и запрещать это нельзя — часть людей иначе не прочитает текст.
*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
  Крупные заголовки на телефоне. clamp с vw в знаменателе даёт на 360px
  слишком мелко, а на 320px — совсем нечитаемо, потому что нижняя граница
  подбиралась под окно компьютера.
*/
@media (max-width: 420px) {
  .hero__num { font-size: 40px; }
  .forum-chron__title { font-size: 20px; line-height: 1.15; }
  .tl__title, .verdict__text { font-size: 19px; }
  .adm-h1 { font-size: 21px; }
}

/* ── Клавиатура на экране ─────────────────────────────────────────────────── */

/*
  Появившаяся клавиатура занимает половину экрана, и 100vh перестаёт означать
  «видимая высота»: нижняя часть окна оказывается ПОД клавиатурой. Кнопка
  «Отправить» под полем ввода уезжает туда же — человек печатает и не может
  отправить.

  dvh («динамическая» высота) учитывает клавиатуру. Поддерживается не везде,
  поэтому идёт вторым объявлением: старые браузеры возьмут первое.
*/
.forum-modal { height: 100vh; height: 100dvh; }
.adm-modal { height: 100vh; height: 100dvh; }

@media (max-width: 760px) {
  /*
    Поле ввода не должно быть выше половины экрана: иначе с открытой
    клавиатурой не видно ни того, что пишешь, ни кнопки.
  */
  .forum-field textarea, .forum-reply textarea,
  .forum-editor { max-height: 40vh; }
}

/* ── Попадание пальцем ────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
  /*
    44 пиксела — не догма из гайдлайнов, а наблюдаемый факт: по цели меньше
    этого палец промахивается, человек жмёт второй раз и получает двойное
    действие. Ниже — места, которые выглядят мелкими по замыслу; размер
    добирается отступами, вид не меняется.
  */
  .nav__link { min-height: 46px; }
  .seg__btn, .cal__btn { min-height: 40px; padding: 9px 13px; }
  .wk { min-height: 44px; }

  /*
    ШРИФТ ПОЛЕЙ НЕ МЕНЬШЕ 16px.

    Safari на iPhone масштабирует ВСЮ страницу при фокусе в поле со шрифтом
    меньше 16px — и выйти из этого увеличения можно только руками. Полные
    формы форума (16px в forum.css) это уже учитывают; поле поиска оставалось
    на 14px и было единственным местом на сайте, где страница «прыгала».
  */
  .search input { font-size: 16px; }
  .lad__row { min-height: 52px; }
  .tl__details summary { min-height: 44px; display: flex; align-items: center; }

  /* Ссылка на карточку альянса: попасть по строке, а не по имени. */
  .lad__row a { display: block; padding: 2px 0; }

  /*
    Наведения на телефоне не существует. Правила :hover при этом срабатывают
    после нажатия и «залипают» до следующего касания в другом месте — строка
    остаётся подсвеченной, и человек думает, что она выбрана.
  */
  .lad__row:hover { background: none; border-left-color: transparent; }
  .lad__row:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
}

/* ── Хронология: месяцы-папки и компактные записи ─────────────────────────── */

/*
  Записи сложены по месяцам: текущий раскрыт, прошлое свёрнуто. Иначе за год
  набирается сотня записей в один столбец, и на телефоне это бесконечная
  прокрутка, где ничего не найти.
*/
.tl--months { list-style: none; margin: 0; padding: 0; }
.tl__month { list-style: none; }

.tl__group { border-bottom: 1px solid var(--line-soft); }
.tl__month:last-child .tl__group { border-bottom: none; }

.tl__group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Папку открывают пальцем — цель должна быть высотой в палец. */
  min-height: 46px;
  padding: 4px 2px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.tl__group-head::-webkit-details-marker { display: none; }
.tl__group-head:hover .tl__group-name { color: var(--text); }

.tl__group-name {
  color: var(--dim);
  font-family: Unbounded, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  transition: color .16s var(--ease);
}

/*
  Счётчик записей внутри. Он же отвечает на вопрос «стоит ли открывать»:
  папка с одной записью и папка с двадцатью выглядят иначе.
*/
.tl__group-count {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mute);
  font-size: 11px;
}
.tl__group-chev {
  margin-left: auto;
  color: var(--mute);
  transition: transform .2s var(--ease);
}
.tl__group[open] .tl__group-chev { transform: rotate(180deg); }
.tl__group[open] .tl__group-name { color: var(--accent); }

.tl--group { list-style: none; margin: 0 0 10px; padding: 0; }

/*
  ЗАПИСЬ СТАЛА КОМПАКТНЕЕ.

  Раньше под каждой висела строка «Открыть событие» — тридцать одинаковых
  строк на ленте из тридцати записей, которые ничего не сообщали. Теперь
  раскрывает сама запись, а о наличии подробностей говорит значок в углу.
*/
.tl__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.tl__row::-webkit-details-marker { display: none; }

/*
  Раскрывающийся хвост: тонкий уголок в углу записи, без кружка «плюс».
  О его существовании говорят наклон у стрелки и цвет при открытии.
*/
.tl__chev {
  flex: none;
  align-self: center;
  margin: 0 1px 0 5px;
  color: var(--mute);
  font-size: 11px;
  line-height: 1;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.tl__details[open] .tl__chev { transform: rotate(180deg); color: var(--accent); }

@media (max-width: 420px) {
  .tl__group-name { font-size: 12px; }
  .tl__group-head { gap: 8px; }
  /* Уголок ужимаем до одного символа: место нужнее заголовку записи. */
  .tl__chev { margin-left: 3px; font-size: 10.5px; }
  .tl__item .tl__title { font-size: 14.5px; }
  .tl__meta { font-size: 11px; }
}

/* ── Профиль участника ────────────────────────────────────────────────────── */

.forum-profile__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.forum-profile__ident { flex: 1; min-width: 0; }
.forum-profile__nick {
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
  overflow-wrap: anywhere;
}
.forum-profile__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 12px;
}
.forum-profile__role { color: var(--dim); }
/* Метка «Блогер» на странице участника — свой цвет, как и роль-бейдж в ленте. */
.forum-profile__role--blogger {
  padding: 2px 8px;
  border: 1px solid rgba(49,197,181,.4);
  border-radius: 999px;
  color: #31c5b5;
}
.forum-profile__ally {
  padding: 2px 8px;
  border: 1px solid rgba(255,201,60,.3);
  border-radius: 999px;
  color: var(--gold);
  font-family: Unbounded, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
}
.forum-profile__about {
  margin: 10px 0 0;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.forum-profile__edit { flex: none; }

/*
  Аватарка. Размер задаётся классом, а не подгоняется на месте: одна и та же
  картинка стоит в ленте, в комментариях и на странице профиля, и три разных
  «примерно 36 пикселов» разъехались бы при первой правке.
*/
.forum-ava--lg {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  font-size: 34px;
}
.forum-ava--img {
  object-fit: cover;
  background: var(--raised-2);
}

.forum-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.forum-profile__stat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  text-align: center;
}
.forum-profile__stat b {
  display: block;
  font-family: Unbounded, sans-serif;
  font-size: 22px;
  line-height: 1;
}
.forum-profile__stat span {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  font-size: 10.5px;
}

/*
  Блок блога на странице участника-блогера: счётчики записей и просмотров.
  Строка stats повторяет layout статистики профиля, но в одну линию — сбоку
  от неё кнопка перехода к ленте блогов.
*/
.forum-blog { margin-bottom: 18px; padding: 14px 16px; }
.forum-blog__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.forum-blog__badge {
  padding: 3px 10px;
  border: 1px solid rgba(49,197,181,.4);
  border-radius: 999px;
  background: rgba(49,197,181,.08);
  color: #31c5b5;
  font-size: 11px;
  font-weight: 700;
}
.forum-blog__stats {
  display: flex;
  gap: 18px;
}
.forum-blog__stats .forum-profile__stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 0;
  border: none;
  background: none;
}
.forum-blog__stats b { font-size: 15px; }
.forum-blog__stats span {
  display: inline;
  margin: 0;
  font-size: 10.5px;
}
.forum-blog__head .forum-btn { margin-left: auto; }

.forum-profile__posts { margin: 0; padding: 0; list-style: none; }
.forum-profile__posts li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.forum-profile__posts li:last-child { border-bottom: none; }
.forum-profile__posts a {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.forum-profile__posts a:hover { color: var(--accent); }
.forum-profile__post-meta {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  font-size: 11px;
}
.forum-profile__post-text { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; }

/* Правка профиля. */
.forum-profile-edit__ava {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.forum-profile-edit__ava-acts { display: grid; gap: 8px; justify-items: start; }
.forum-profile-edit__ava-acts small { font-size: 11px; line-height: 1.45; max-width: 34ch; }

/*
  Кнопка выбора файла — это <label> с полем внутри. Скрытое поле нельзя
  заменить кнопкой: браузер открывает диалог только по настоящему <input>.
*/
.forum-profile-edit__ava-acts label { cursor: pointer; }

.forum-field input:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.forum-field small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.45; }

@media (max-width: 520px) {
  /*
    На телефоне карточка складывается в столбик: аватарка 88px и ник рядом
    оставляют имени полосу шириной в два слова.
  */
  .forum-profile__top { flex-direction: column; gap: 12px; }
  .forum-profile__edit { width: 100%; }
  .forum-ava--lg { width: 72px; height: 72px; border-radius: 18px; font-size: 28px; }
  .forum-profile__stats { gap: 7px; }
  .forum-profile__stat { padding: 10px 6px; }
  .forum-profile__stat b { font-size: 19px; }
  .forum-profile__stat span { font-size: 9.5px; }
  .forum-profile-edit__ava { flex-direction: column; align-items: flex-start; }
}

/* ── Вложения в постах ────────────────────────────────────────────────────── */

/*
  Сетка под скриншоты. Одна картинка — во всю ширину, две и больше — по две
  в ряд: скриншот интерфейса игры при трёх в ряд на телефоне становится
  нечитаемым, и открывать его придётся всё равно.
*/
.forum-shots {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}
.forum-shots--multi { grid-template-columns: 1fr 1fr; }

.forum-shots a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
}
.forum-shots img {
  display: block;
  width: 100%;
  /*
    Высота ограничена: вертикальный скриншот иначе занимает три экрана,
    и лента превращается в галерею. Полный вид — по нажатию.
  */
  max-height: 320px;
  object-fit: cover;
}
.forum-shots--multi img { height: 130px; object-fit: cover; }

/* Выбранные, но ещё не отправленные картинки в форме. */
.forum-attach {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}
.forum-attach__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--dim);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.forum-attach__btn:hover { border-color: var(--accent); color: var(--text); }

.forum-attach__list { display: flex; flex-wrap: wrap; gap: 7px; }
.forum-attach__item {
  position: relative;
  width: 62px;
  height: 62px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.forum-attach__item img { width: 100%; height: 100%; object-fit: cover; }
.forum-attach__drop {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: rgba(6,7,9,.78);
  color: #ffb3ba;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.forum-attach__hint { color: var(--mute); font-size: 11px; }

/*
  Ник — ссылка на профиль. Подчёркивание не ставим: в ленте ников много,
  и подчёркнутыми они превратили бы карточку в набор ссылок. Цвет и наведение
  говорят достаточно.
*/
.forum-nick {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.forum-nick:hover { color: var(--accent); }

/* Тег альянса рядом с ником в ленте: мелко и сдержанно. */
.forum-post__ally {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(255,201,60,.26);
  border-radius: 999px;
  color: var(--gold);
  font-family: Unbounded, sans-serif;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

@media (max-width: 600px) {
  .forum-alliance-card small { max-width: 70px; }
  .forum-tag-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .forum-tag-filter .forum-tag { flex: 0 0 auto; }
}

/* ── Президентская доска ──────────────────────────────────────────────────── */

/*
  БЫЛА ОГРОМНОЙ НА КОМПЬЮТЕРЕ, И ЭТО НЕ МЕЛОЧЬ.

  Доска росла слоями: сначала строка в шапке, потом «командный центр» с рамкой,
  подсветкой, бегущим блеском, надписью S33 / COMMAND STATUS в углу и именем
  размером с заголовок страницы. В сумме — блок на 90 пикселов высоты над
  каждой страницей сайта.

  Для телефона её потом ужали до одной строки (правила в styles-v8.css,
  строки 1680–1698), а компьютер остался с прежним монументом. Получилось
  наоборот: на большом экране, где места много, блок огромный, а на маленьком
  аккуратный.

  Дело не в красоте. Доска — справочная строка «кто сейчас президент»,
  а не главное на странице. Занимая экран, она оттесняет то, за чем человек
  пришёл: итоги недели, рейтинг, ленту форума.

  Поэтому здесь она приведена к одному виду на всех экранах: одна строка,
  высота как у шапки. Всё, что делало её монументом, убрано — не «уменьшено»,
  а именно убрано: блеск, вторая рамка, надпись в углу и подпись под именем.
*/
@media (min-width: 760px) {
  .president-board {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Прижимаем к правому краю шапки: слева марка, справа статус. */
    margin: 0 0 0 auto;
    max-width: 420px;
    padding: 7px 12px;
    border-radius: 999px;
    border-width: 1px;
    /*
      Дышащая тень и бегущий блеск отвлекали от содержимого страницы.
      Строке справочного назначения движение не нужно вовсе.
    */
    animation: none;
    box-shadow: inset 0 1px color-mix(in srgb, var(--text) 6%, transparent);
    background: linear-gradient(110deg, rgba(167,163,194,.1), color-mix(in srgb, var(--text) 3%, transparent));
  }
  .president-board::before,
  .president-board::after { display: none; }

  /* Голова доски перестаёт быть отдельным ярусом и встаёт в ту же строку. */
  .president-board__head {
    display: contents;
  }
  .president-board__signal {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(167,163,194,.1), 0 0 10px var(--electric);
  }
  .president-board__label {
    flex: none;
    font-size: 8px;
    letter-spacing: .12em;
  }
  .president-board__live {
    order: 5;
    flex: none;
    margin-left: 0;
    padding: 3px 6px;
    font-size: 6.5px;
  }

  .president-board__identity {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding-left: 0;
  }
  /*
    Имя было clamp(18px, 2.2vw, 25px) — крупнее, чем заголовки разделов.
    Президент сервера важен, но не важнее того, ради чего открыли страницу.
  */
  .president-board__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
  }
  .president-board__alliance {
    flex: none;
    font-size: 13px;
    line-height: 1.1;
    text-shadow: none;
  }
  /*
    Подпись («Данные обновляются вручную») в строку не влезает и была
    вторым ярусом с разделительной чертой — то есть удваивала высоту ради
    фразы, которую читают один раз. Оставляем её только на телефоне,
    где доска стоит отдельной строкой под маркой.
  */
  .president-board__note { display: none; }
}

/*
  Очень широкий экран: доска не должна растягиваться на пол-шапки.
  Ограничение по ширине уже стоит выше, здесь только запас по краю.
*/
@media (min-width: 1240px) {
  .president-board { max-width: 460px; }
}

/* ── Компьютер: содержимое не должно тонуть в пустоте ─────────────────────── */

/*
  ПОЧЕМУ ЗДЕСЬ ВООБЩЕ ЕСТЬ ПРАВИЛА ДЛЯ БОЛЬШОГО ЭКРАНА.

  Файл называется mobile.css, но занимается он одним: приведением сайта
  к одному виду на всех экранах. Правки для компьютера попали сюда потому,
  что чинят они ту же болезнь — вёрстку, которая подгонялась на одном размере
  окна и разъехалась на других.

  Появление бокового меню сдвинуло содержимое на 232 пиксела вправо, а полоса
  чтения осталась прежней (1120). На экране 1920 получается 232 слева, 1120
  содержимого и 568 пустоты справа — блок сидит не по центру и выглядит
  съехавшим.
*/
@media (min-width: 1040px) {
  /*
    Содержимое центрируется в остатке экрана, а не во всей его ширине.
    Полосу чтения заодно расширяем: 1120 подбирались под сайт без бокового
    меню, и с ним строка рейтинга стала теснее, чем была.
  */
  :root { --wrap: 1240px; }
}

/*
  ДЕКОРАТИВНЫЕ НАДПИСИ В УГЛАХ.

  «LIVE // SERVER 33», «SYSTEM ONLINE», «TACTICAL OVERVIEW», «S33 / COMMAND
  STATUS» — следы того периода, когда сайту добавляли «атмосферу командного
  центра». Каждая по отдельности безобидна, все вместе создают шум: на экране
  одновременно четыре надписи, которые ничего не сообщают и ни на что
  не ведут.

  Хуже другое: они стоят абсолютным позиционированием в углах блоков, и при
  сужении окна наезжают на настоящий текст. Именно так «SYSTEM ONLINE»
  оказывался поверх номера недели.

  Оставляю одну — «LIVE» в президентской доске, где она означает настоящее:
  данные обновляются вручную и показывают текущее положение. Остальные убираю.
*/
.site-head__inner::before,
#app::before,
.hero__top::after,
.bot-hero::before,
.president-board::after { display: none !important; }

/*
  Полоса под шапкой с бегущим блеском. На телефоне её не видно вовсе,
  на компьютере она тянет взгляд к пустому месту.
*/
.site-head::after { display: none; }

/*
  Свечение шапки при наведении. Задумывалось как отклик, но шапка не кнопка:
  курсор проходит через неё по пути к меню, и вся страница мигает тенью
  без причины.
*/
.site-head:hover { box-shadow: none; }

@media (min-width: 1040px) {
  /*
    ШАПКА НА КОМПЬЮТЕРЕ.

    Марка дублируется в боковом меню, поэтому в шапке её нет (правило
    в forum.css). Осталась одна президентская доска — и без марки шапка
    стала полосой в 60 пикселов с одной строкой внутри.

    Ужимаем: доска и есть всё её содержимое.
  */
  .site-head__inner { padding-top: 6px; padding-bottom: 6px; min-height: 0; }

  /* Отступ содержимого от шапки был рассчитан на более высокую шапку. */
  #app { padding-top: 18px; }
}

/*
  ПЛОТНОСТЬ СТРОК РЕЙТИНГА.

  На компьютере в строке шесть колонок и много воздуха: 32 альянса занимают
  два экрана прокрутки, хотя влезли бы в один. Таблица результатов —
  то, ради чего сайт существует, и видеть её целиком важнее, чем просторно.
*/
@media (min-width: 1040px) {
  .lad__row { padding-top: 8px; padding-bottom: 8px; }
  .lad__wl { font-size: 12px; }
}

/*
  Заголовки страниц на большом экране были подобраны под окно поменьше
  и на 1920 выглядят мелко относительно ширины полосы чтения.
*/
@media (min-width: 1240px) {
  .hero__num { font-size: 68px; }
  .tl__title { font-size: 30px; }
}

/* ── Метка роли ───────────────────────────────────────────────────────────── */

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

  Цвет приходит переменной из словаря (src/forum/roles.js), а не задаётся
  здесь по классу: тогда добавление роли — правка в одном месте, а не в двух.

  РАЗМЕР. Первая версия была на треть крупнее: значок 10 пикселов, текст 9.5,
  отступы 7. Рядом с ником 13.5 это выглядело не подписью, а вторым именем —
  метка спорила с тем, к чему относится. Вторая стала мельче (8.5), но в строке
  с кнопками действий всё равно тащила слово «владелец» за собой и наезжала
  на соседние кнопки. Теперь слово осталось только там, где места много
  (шапка, профиль), а у постов и комментариев — один значок.

  Метка обязана читаться, но не первой. Поэтому она мельче ника почти втрое,
  а слово прячется в подсказку (title) — заметно, что роль есть, и ясно,
  что главное — ник.
*/
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--role-tone) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--role-tone) 10%, transparent);
  color: var(--role-tone);
  /* Не наследует полужирность родителя: метка не должна спорить с ником. */
  font-family: Inter, sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}
.role-badge i { font-size: 7.5px; font-style: normal; line-height: 1; }
.role-badge b { font-weight: 700; }

/*
  В строках постов и комментариев слово не показываем вовсе: там же рядом
  стоят кнопки действий, и даже маленькое слово толкало их и наезжало.
  Значок один — его хватает, имя роли читается из title.
*/
.forum-post__by .role-badge b,
.forum-comment__head .role-badge b { display: none; }
.forum-post__by .role-badge,
.forum-comment__head .role-badge { padding: 1px 3px; }

/*
  Владелец. Единственная метка с заметным свечением — и это осознанно:
  если подсветить все, разница между ними исчезнет, а метка нужна именно
  чтобы отличать.

  Свечение слабое нарочно. Первая версия была ярче и крупнее — и метка
  перетягивала внимание с ника, хотя служит подписью к нему, а не заголовком.
*/
.role-badge--owner {
  border-color: rgba(255,201,60,.4);
  background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,201,60,.06));
  box-shadow: 0 0 9px -5px rgba(255,201,60,.5), inset 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}
.role-badge--owner i { filter: drop-shadow(0 0 3px rgba(255,201,60,.45)); }

/*
  Блогер — не роль, а отметка: писать блог может участник любой роли, поэтому
  метка своя. Цвет отличён от ролей (бирюзовый), чтобы читалась как «загляните
  в блог», а не как «у этого человека есть власть».
*/
.role-badge--blogger {
  --role-tone: #31c5b5;
  border-color: color-mix(in srgb, var(--role-tone) 40%, transparent);
  background: color-mix(in srgb, var(--role-tone) 12%, transparent);
  color: var(--role-tone);
}
.role-badge--blogger:hover {
  border-color: var(--role-tone);
  background: color-mix(in srgb, var(--role-tone) 20%, transparent);
}
.role-badge--blogger i { font-size: 7.5px; }

/* В шапке форума метка стоит одна, без ника рядом — отступ слева не нужен. */
.forum-me__body .role-badge { margin-left: 0; }

/* На странице профиля метка крупнее: там она часть представления человека. */
.forum-profile__meta .role-badge {
  margin-left: 0;
  padding: 2px 7px;
  font-size: 8px;
}
.forum-profile__meta .role-badge i { font-size: 9px; }

/* ── Отступы на узком экране ───────────────────────────────────────────────── */

/*
  Собрано в одном месте нарочно. Отступы в проекте задавались по месту:
  правила форума писались отдельно от правил панелей, панели — отдельно
  от героя страницы. На компьютере разница в три пиксела незаметна,
  на 360 пикселах она складывается в перекошенную страницу: одна карточка
  отступает на 18, соседняя на 13, третья на 20.

  Ниже — общий ритм для узкого экрана. Не «уменьшить всё», а привести
  к одному шагу: 13 внутри блоков, 12 по краям страницы.
*/
@media (max-width: 420px) {
  /* Раскрывающиеся блоки форума: правила и форма поста. */
  .forum-rules__summary,
  .forum-composer__summary { padding: 13px; gap: 10px; }
  .forum-rules__list { padding: 0 13px 4px 32px; }
  .forum-rules__sanctions { margin: 4px 13px 0; padding: 12px 13px; }
  .forum-rules__note { margin: 11px 13px 14px; }
  .forum-composer form { padding: 0 13px 14px; }

  /* Окна: 20 пикселов по кругу на узком экране съедали строку текста. */
  .forum-modal { padding: 12px; }
  .forum-modal__box { padding: 16px; }
  .forum-modal__rule { padding: 10px; }

  /* Сводка сервера на форуме. */
  .forum-chron { padding-bottom: 14px; }
  .forum-chron__stats { margin: 14px 0 12px; }

  /*
    Карточка поста. Заголовок и подпись автора отступали от края на 13,
    а нижняя полоса с реакциями — на 14: строка выглядела съехавшей.
  */
  .forum-post__foot { margin-top: 12px; padding-top: 11px; gap: 8px; }
  .forum-post__head { gap: 9px; margin-bottom: 10px; }

  /* Обсуждение под постом. */
  .forum-thread { margin-top: 14px; padding-top: 13px; }
  .forum-comment { padding: 10px 0; gap: 9px; }
}

/*
  ПОСЛЕДНИЙ БЛОК СТРАНИЦЫ НЕ ДОЛЖЕН УПИРАТЬСЯ В КРАЙ.

  На телефоне последний пост ленты заканчивался ровно у нижней границы экрана,
  под полосой жестов. Выглядело как обрезанная страница, и было непонятно,
  кончилась лента или не догрузилась.
*/
@media (max-width: 760px) {
  .forum-feed > :last-child { margin-bottom: 6px; }
  .site-foot { margin-top: 8px; }
}

/* ── Безопасные края ──────────────────────────────────────────────────────── */

/*
  Вырез камеры, скруглённые углы и полоса жестов. В ландшафте вырез уходит
  влево или вправо, поэтому отступы нужны с обеих сторон, а не только сверху.
*/
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 1039px) {
    .wrap {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
    .site-head__inner {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
    /* Последний блок страницы не должен упираться в полосу жестов. */
    #app { padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px)); }
  }
}

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

/*
  На телефоне левая кнопка «Меню» открывает всё, что в шапке есть, поэтому
  она первая и на левом краю. Марку прижимаем к правому: имя сайта читается
  последним, после того как человек понял, где он и что можно открыть.
  Без этого марка стоит вплотную к кнопке, а остаток строки пустует.

  ЕСЛИ МАРКА СТОИТ СЛЕВА, А КНОПКА ПО СЕРЕДИНЕ — это правило снова разбилось
  скрытым flex-direction: column из styles-v8.css: тот блок писался, когда
  в шапке стояла полоса вкладок, и он пережил её переезд в боковое меню.
  Показывать его могу только я (ниже); марка обязана стоять справа в обеих
  строках — и когда доски президента нет, и когда она есть.

  flex-direction: row стоит ЗДЕСЬ, а не «где-то там»: этот файл грузится
  последним, и только его слово — последнее. Раньше в блоке была только
  раскладка; column из styles-v8.css молча оставался и давил на неё, потому
  что column — отдельное свойство, и display: flex его не сбрасывает.

  Диапазон до 1039px, а не до 759px: телефон в альбомной ориентации шире
  759px, а шапка всё равно должна разводить кнопку и марку по краям.
*/
@media (max-width: 1039px) {
  .site-head__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  /*
    Порядок детей явный: в styles-v8.css на узком экране .brand получил
    order: 1, и без своих order три ребёнка разъехались бы как попало.
  */
  .site-head__inner > .burger { order: 0; }
  .site-head__inner > .brand--head {
    order: 1;
    /* Кнопка меню первая и у левого края; при показанной президентской доске
       без этого три flex-ребёнка разъехались бы равномерно, и марка ушла
       в середину. margin: auto съедает свободный промежуток между кнопкой
       и маркой, поэтому марка остаётся у правого края в обоих случаях. */
    margin-left: 0;
    margin-right: auto;
  }
  .site-head__inner > #president-board { order: 2; }
}

/* ── Шторка меню: уже ─────────────────────────────────────────────────────── */

/*
  232 пиксела на экране 375 — больше шестидесяти процентов ширины. Меню
  должно выдвигаться, а не съедать экран. Движение «намного уже» требует
  заметности: 52vw на 375 — 195px, на 360 — 187px, на 320 — 166px, при этом
  вкладки (полоса в 10px по краю и текст в 14px) всё ещё читаются.
*/
@media (max-width: 1039px) {
  .side { width: min(var(--side-w), 52vw); }
}

/* ── Разделы на телефоне: сегменты → выпадающий список ─────────────────────── */

/*
  ЗАЧЕМ СПИСОК. Полоска разделов форума (восемь плашек) на узком экране —
  это либо строка, уезжающая за правый край, либо три яруса плашек над лентой.
  На телефоне выбор раздела происходит реже, чем чтение, поэтому он должен
  занимать одну строку, а не половину экрана.

  Дубликат управления намеренный: на компьютере остаются кнопки-сегменты
  (мгновеннее, всё видно сразу), на телефоне — один сегмент превращается
  в аккуратный выпадающий список. Работа та же, состояния синхронизируются
  обработчиками.

  РАЗМЕТКА. Список свой, а не системный <select>: системный раскрывается
  крутым во весь экран, и человек теряет страницу, по которой выбирал.
  Меню выезжает из-под кнопки и занимает ровно её ширину.

  КАК РАБОТАЕТ. Класс .is-open на .pick открывает меню, aria-expanded
  на кнопке. Меню скрыто opacity/visibility, а не display: только так его
  появление плавное. Закрывается выбором, кликом мимо и Esc (логика
  в обработчиках страницы).
*/
.pick {
  display: none;
  position: relative;
  flex: 1 1 180px;
  min-width: 0;
}

/* Сама пилюля: раньше это был <label> с системным <select> внутри. */
.pick__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 37px;
  padding: 0 34px 0 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.pick__btn:hover { border-color: color-mix(in srgb, var(--text) 24%, transparent); }
.pick__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick.is-open .pick__btn {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--raised-2);
}

.pick__cap {
  flex: none;
  color: var(--mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pick__val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

/* Каретка своим треугольником, а не системной стрелкой: стрелка разного вида
   в каждом браузере, треугольник один. Поворотом смотрит вверх. */
.pick__carat {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--mute);
  border-bottom: 1.6px solid var(--mute);
  transform: rotate(45deg);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
  pointer-events: none;
}
.pick.is-open .pick__carat { transform: rotate(225deg); border-color: var(--accent); }

/*
  Меню. Шириной в пилюлю, а не во весь экран: выбор раздела не должен уводить
  человека со страницы, для которой он выбирает. Высота ограничена — при
  восьми разделах форума прокручивается, ниже выступать некуда.
*/
.pick__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 0;
  max-height: 196px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised-2);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.85), 0 4px 18px -10px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity .18s var(--ease),
    transform .2s var(--ease),
    visibility 0s linear .18s;
}
.pick.is-open .pick__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.pick__opt {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.pick__opt:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.pick__opt[aria-selected="true"] {
  color: #14100c;
  background: linear-gradient(135deg, #ff9a4a, var(--accent));
  font-weight: 600;
}

/*
  Телефон в проекте — всё уже 760px (та же граница, что у остальных
  мобильных правил). Раньше список появлялся только до 639px: на широких
  телефонах (640-759) длинный сегмент разделов всё ещё уезжал за правый
  край и страница пановалась вбок.
*/
@media (max-width: 759px) {
  .seg--cat,
  .seg--type { display: none; }
  .pick { display: block; }
}

/* Мигание меню при закрытии незаметно тем, кто не любит движение. */
@media (prefers-reduced-motion: reduce) {
  .pick__menu { transition: none; }
}

/* Сегменты, которые остались на телефоне, становятся плотнее: «Свежее /
   Лучшее / Обсуждаемое» в одну строку вместо трёх. */
@media (max-width: 480px) {
  .seg { gap: 1px; padding: 2px; }
  .seg__btn { padding: 6px 9px; font-size: 12px; }
}

/*
  СТАБИЛЬНОСТЬ: на телефоне страница не должна дёргаться.

  Четыре источника «тряски», которые остались после починки зума полей:
    — min-height: 100vh у body: при сворачивании адресной полосы браузер
      пересчитывает высоту окна, и страница сдвигается вверх-вниз.
      svh — «малая» высота, всегда самая маленькая из возможных: она не
      меняется, когда полоса сворачивается и разворачивается;
    — постоянные полноэкранные анимации фона (пятна-аврора, зерно) гоняют
      перерисовку всего экрана, во время прокрутки это видно как дрожь;
    — входной «выезд» #app на каждой смене раздела — страница будто заново
      появляется из-под низа;
    — blur под липкой шапкой: Safari пересчитывает размытие каждый кадр
      прокрутки, и содержимое дёргается, проходя под шапкой.
*/
body { min-height: 100svh; }

@media (hover: none) and (pointer: coarse) {
  body::before,
  body::after,
  #app { animation: none; }
  html { scroll-behavior: auto; }
  /*
    Горизонтальный пан. overflow-x: hidden на body iOS не всегда уважает —
    любой элемент шире экрана уводит страницу вбок, и справа остаётся пустой
    фон. clip не создаёт прокручиваемый контейнер и срезает лишнее жёстче.
  */
  html,
  body { overflow-x: clip; }
  .site-head {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
  }
}

/* ── Приветствие и горячие темы на телефоне ───────────────────────────────── */

@media (max-width: 480px) {
  .forum-welcome { align-items: flex-start; flex-wrap: wrap; }
  .forum-welcome .forum-btn { margin-left: 0; width: 100%; }
  .forum-hot__item a { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ── Чаты: кнопка «К новым» на телефоне ──────────────────────────────────────
   Кнопка стоит над кнопкой «вниз», не наезжает на поле ввода и кнопку
   отправки; область нажатия не меньше тач-минимума. */

@media (max-width: 759px) {
  .chat-go-new {
    right: 10px;
    bottom: 130px;
    min-height: 40px;
  }
}

@media (max-width: 380px) {
  .chat-go-new { padding: 6px 10px; }
  .chat-go-new span { min-width: 16px; }
}

/* ── Полировка: широкие телефоны (до 480) ────────────────────────────────── */

/*
  Мобильная плотность жила на 420px, а самые массовые свежие диагонали
  (iPhone Pro Max, Plus-модели) — 430px. Они получали десктопные отступы
  панелей: посадка карточки на экране «топорщилась», хотя места не меньше.
  Добираем ту же плотность до 480px. Правила для 420 остаются — они точнее
  для старых узких корпусов.
*/
@media (max-width: 480px) {
  .panel, .hero, div.forum-post { padding-left: 13px; padding-right: 13px; border-radius: 13px; }

  /* Один шаг воздуха между карточками: панель и лента не должны спорить. */
  .panel, .hero { margin-bottom: 10px; }
  div.forum-feed { gap: 10px; }

  /*
    Категория поста («Новости сервера») — no-wrap. На узком экране длинное
    название выдавливало строку или резалось без многоточия. Обрезаем по
    ширине экрана: категория, как и тег, — подпись, а не заголовок.
  */
  .forum-post__head .forum-post__cat {
    flex: none;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/*
  Вертикальный ритм карточек. Горизонталь уже сбита к 13px; вертикаль жила
  своей жизнью — 20 у панели, 22 у героя, 13 у поста. Снаружи это читалось
  как «карточка присела», внутри — как разнобой. Приводим к шагу 14/16.
  Селектор с классом и тегом: refine.css задаёт .forum-post последним,
  при равной силе перебил бы это правило.
*/
@media (max-width: 420px) {
  .panel { padding-top: 14px; padding-bottom: 14px; }
  .hero  { padding-top: 16px; padding-bottom: 16px; }
  div.forum-post { padding: 13px 14px; }
}

/*
  Сервисные подписи 10px — граница читаемости на телефоне в движении.
  Поджимаем на полтора пиксела. Усиление против refine.css (он грузится
  последним и при равной силе перебивал бы правку).
*/
@media (max-width: 480px) {
  body .forum-post__by time,
  body .forum-comment__head time { font-size: 11px; }
  .forum-post__head .forum-post__cat { font-size: 10.5px; }
  body .chat-item__time { font-size: 11px; }
}

/*
  Реакции и действия поста — тач-цель. Остальные кнопки уже 40–46px,
  а эти оставались 24–32px: палец промахивался. min-height добирает высоту
  отступами, вид не меняется. Усиление против refine.css — тот задаёт
  min-height 28px для реакций и грузится после.
*/
@media (hover: none) and (pointer: coarse) {
  body .forum-post__foot .forum-react__btn,
  body .forum-comment__foot .forum-react__btn,
  body .forum-post__acts .forum-act,
  body .forum-act-menu__list .forum-act { min-height: 36px; }
  body .forum-me .forum-btn { min-height: 40px; padding: 8px 12px; }
}