/**
 * assets/css/clans.css — раздел кланов.
 *
 * Материал раздел не держит: карточки, строки, выемки, чипы, кнопки и
 * лестница стройки описаны в `ui-frame.css` (§6, §7, §8, §10, §12, §14,
 * §26), а здесь остаются только раскладка, размеры, состояния и цвет
 * текста из словаря. Своих градиентов и рамок в файле быть не должно:
 * рама подключена последней и всё равно их перебьёт (§86 ТЗ).
 */

/* Шапка раздела — общая разметка страниц игры, своя картинка фона. */
.trumpamole__skins-hero--clans::before {
  background-image: var(--tam-bg-clans, url('../clans/bg_page.webp?26090901'));
}

/* Низ страницы считается по измеренной высоте меню, а не круглым числом:
   96px совпадали с ней случайно и разъезжались, как только в ячейке
   навигации менялся кегль подписи. */
.tam-clan {
  padding: 0 14px calc(var(--tam-nav-h, 68px) + 24px + var(--safe-bottom));
  display: grid;
  gap: 12px;
}

/* Кнопка создания клана стоит в шапке, а не внизу страницы:
   раньше её приходилось искать под всем списком кланов. */
.tam-clan__create-slot {
  margin: 2px 0 0;
}

/* ─────────────── Шапка клана ─────────────── */

/* Материал — §6 рамы. */
.tam-clan__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.tam-clan__emblem { width: 56px; height: 56px; object-fit: contain; flex: none; }
.tam-clan__ident { flex: 1; min-width: 0; }

.tam-clan__name {
  font-size: var(--ui-size-section);
  font-weight: 900;
  color: var(--ui-text-main);
  text-transform: uppercase;
  /* Длинное название не должно переноситься и выдавливать кнопку заявок. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tam-clan__tag { color: var(--ui-gold-light); font-weight: 800; }

/*
 * Карточка клана на вкладке чата: одна строка вместо двух.
 *
 * Уровень, состав и роль повторяют вкладку «Состав» и в разговоре не
 * нужны, а каждая их строка отнимается у ленты сообщений. Эмблема
 * остаётся — по ней клан узнают быстрее, чем по названию.
 */
.tam-clan__head--slim { padding: 8px 10px; gap: 10px; }
.tam-clan__head--slim .tam-clan__emblem { width: 38px; height: 38px; }
.tam-clan__head--slim .tam-clan__name { font-size: var(--ui-size-value); }
.tam-clan__head--slim .tam-clan__meta { display: none; }

/*
 * Зазоры между карточкой, вкладками и лентой — тот же выигрыш высоты.
 *
 * Нижнее поле под меню здесь не нужно: чат кончается строкой ввода,
 * ниже неё ничего не листается, а `section.page` своё поле под меню
 * держит и так — второе поле просто добавляло странице лишний ход
 * прокрутки.
 */
.tam-clan--slim {
  gap: 8px;
  padding-bottom: var(--space-2);
}

.tam-clan__meta {
  margin-top: 2px;
  font-size: var(--ui-size-small);
  color: var(--ui-text-muted);
}

/* Материал — §8 рамы: кнопка заявок вырезана В карточке клана. */
.tam-clan__apps {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: var(--ui-size-small);
  font-weight: 800;
  cursor: pointer;
}

/* ─────────────── Вкладки ─────────────── */

/*
 * Вкладки клана во всю ширину — как на скинах и в профиле.
 *
 * Раздел лежит в карточке с боковыми отступами, и ряд вкладок наследовал
 * их: три кнопки стояли уже остального содержимого и выглядели вложенными
 * в карточку, а не разделом страницы. Отступы гасим отрицательными
 * полями, поэтому ряд занимает всю ширину панели.
 */
/*
 * Полоса вкладок прокручивается вбок.
 *
 * Вкладок стало пять (§2 добавил «Взносы»), и делить ширину телефона
 * поровну между ними больше нельзя: подписи начали обрезаться на
 * полуслове. Полоса прокручивается, а вкладка занимает столько, сколько
 * нужно её тексту.
 */
.tam-clan > .trumpamole__skins-tabs {
  margin-left: -14px;
  margin-right: -14px;
  padding-left: 14px;
  padding-right: 14px;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tam-clan > .trumpamole__skins-tabs::-webkit-scrollbar { display: none; }

.tam-clan > .trumpamole__skins-tabs .trumpamole__skins-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Вид переключателей берётся со страницы скинов: .trumpamole__skins-tabs. */

/* Счётчик на вкладке клана описан один раз — в §23 рамы и по размеру в
   season.css рядом с таким же счётчиком сезона. Своя прозрачная чернота
   жила здесь с прежнего вида вкладок и перебивалась им через раз. */

/* ─────────────── Карточки ─────────────── */

/*
 * Карточка задачи, строка участника и строка клана в поиске: материал
 * берут §6 и §7 рамы, здесь только поле под содержимое.
 *
 * Вместе с ними отсюда ушли шесть классов, которых в разметке игры нет
 * ни одного (§87): `.tam-clan__card` — общая карточка, к которой не
 * обращался никто с тех пор, как раздел разошёлся на штаб, состав и
 * облаву; `.tam-clan__desc` — описание клана, переехавшее в шапку
 * раздела; и сетка `.tam-clan__stats` с тремя её плитками, вместо
 * которой в шапке штаба стоит табличка опыта.
 */
.tam-clan__task,
.tam-clan__row,
.tam-clan__member {
  padding: 12px;
}

/* Шкала опыта берётся из профиля: .trumpamole__profile-exp-wrap. */

/* ─────────────── Кнопки ─────────────── */

/*
 * Собственных кнопок здесь больше нет: раздел использует систему кнопок
 * игры (window.Buttons) — ту же, что в магазине и в разделе друзей.
 * Ниже только раскладка мест, куда они подставляются.
 */

.tam-clan__actions { display: grid; gap: 10px; }
.tam-clan__action { width: 100%; }

/* ----- Взносы (§2 списка владельца) --------------------------------------
   Своих взносов на сегодня раньше не было видно нигде, кроме окна взноса,
   а чужих — нигде вовсе. Строка остатка стоит над кнопкой, таблица клана
   живёт на своей вкладке. */

/* Материал — §8 рамы. */
.tam-clan__donate-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 12px;
  font-size: var(--ui-size-small);
}

.tam-clan__donate-line svg { color: var(--ui-gold-light); flex: none; }

/* Взносы на сегодня кончились: строка гаснет, но не исчезает. Гасить её
   прозрачностью нельзя (§9.2 рамы) — гаснет подпись и значок. */
.tam-clan__donate-line.is-spent { color: var(--ui-text-faint); }
.tam-clan__donate-line.is-spent svg { color: var(--ui-text-faint); }

/* Кромки у обоймы нет: строки внутри держат свою (§7 рамы), и вторая
   рама по периметру читалась двойной линией. */
.tam-clan__donate-board {
  margin-bottom: 12px;
  display: grid;
  gap: 4px;
}

.tam-clan__donate-head,
.tam-clan__donate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px 66px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-family: var(--font-condensed), sans-serif;
  font-size: var(--ui-size-body);
  text-align: right;
}

/* Материал шапки — §8 рамы, строк и итога — §7. Подпись шапки приглушена
   селектором с родителем: §8 красит выемку светлым, а рама идёт после
   раздела и одиночный класс перебивает (§86). */
.tam-clan__donate-board .tam-clan__donate-head {
  color: var(--ui-text-muted);
  font-size: var(--ui-size-small);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tam-clan__donate-row .is-on { color: var(--ui-gold-light); font-weight: 700; }
.tam-clan__donate-total { font-weight: 700; }

/* Итог клана: та же сетка, но читается как подпись под таблицей. */
.tam-clan__donate-row--sum { font-weight: 700; }

.tam-clan__donate-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: left;
}

.tam-clan__donate-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Второстепенные действия: обычные кнопки в один ряд, без лишнего веса. */
.tam-clan__minor {
  display: flex;
  gap: 8px;
}

/* Материал, подпись и красный оттенок «Распустить» — §12 `ui-frame.css`. */
.tam-clan__link {
  flex: 1;
  padding: 10px;
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-size-body);
  cursor: pointer;
}

.tam-clan__link:active { transform: translateY(1px) scale(0.99); }

/* Кнопка в строке клана занимает фиксированную полосу: без ограничения
   она растягивалась под длинную подпись и выдавливала название клана. */
.tam-clan__row-action {
  flex: 0 0 112px;
  max-width: 112px;
  display: flex;
  justify-content: flex-end;
}

.tam-clan__row-action .trumpamole__btn-par {
  width: 112px;
}

.tam-clan__row-action .trumpamole__btn-par__text {
  font-size: var(--ui-size-small);
  padding: 0 6px;
}

/* Материал — §10 рамы: это чип со значением, а не кнопка. */
.tam-clan__full {
  display: inline-block;
  padding: 8px 14px;
  font-size: var(--ui-size-small);
  font-weight: 800;
}

/* ─────────────── Списки ─────────────── */

.tam-clan__list { display: grid; gap: 8px; }

.tam-clan__member,
.tam-clan__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.tam-clan__ava,
.tam-clan__row-emblem {
  width: 40px; height: 40px;
  border-radius: var(--ui-radius-md);
  object-fit: cover;
  flex: none;
  background: var(--ui-panel-edge);
}
.tam-clan__row-emblem { object-fit: contain; border-radius: 0; }

/* Аватар в таблице взносов вдвое мельче списочного. Правило обязано
   стоять ПОСЛЕ общего: оба класса висят на одном узле, вес у них равный,
   и написанное выше не доживало — в таблице стояли аватары в 40px, из-за
   которых строка была вдвое выше нужного. */
.tam-clan__ava--sm { width: 26px; height: 26px; border-radius: var(--ui-radius-sm); }

.tam-clan__member-text,
.tam-clan__row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }

.tam-clan__member-name,
.tam-clan__row-name { font-size: var(--ui-size-body); font-weight: 800; color: var(--ui-text-main); }

.tam-clan__member-role,
.tam-clan__row-meta { font-size: var(--ui-size-small); color: var(--ui-text-muted); }

.tam-clan__member-contrib { flex: none; font-size: var(--ui-size-body); font-weight: 900; color: var(--ui-gold-light); }

/* ─────────────── Задачи ─────────────── */

.tam-clan__task .trumpamole__bar { margin-top: 8px; }

.tam-clan__task-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tam-clan__task-title { font-size: var(--ui-size-body); font-weight: 800; color: var(--ui-text-main); }
.tam-clan__task-percent { font-size: var(--ui-size-body); font-weight: 900; color: var(--ui-gold-light); }

.tam-clan__task-foot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Материал и цвет подписи — §8 рамы. */
.tam-clan__task-note { font-size: var(--ui-size-small); padding: 4px 8px; }

/* ─────────────── Без клана ─────────────── */

/* Вступительный блок с заголовком и описанием переехал в шапку раздела —
   отдельная карточка дублировала бы её. */

/* Материал — §26 рамы: пунктир говорит «заявка ещё в пути». */
.tam-clan__pending {
  padding: 10px 14px;
  font-size: var(--ui-size-body);
  text-align: center;
}

/* Материал — §8 рамы: поиск вырезан В панели раздела. */
.tam-clan__search {
  width: 100%;
  padding: 11px 14px;
  font-size: var(--ui-size-body);
}
.tam-clan__search:focus { outline: none; border-color: var(--ui-gold-dark); }

/* ─────────────── Чат клана (§13) ───────────────

   Лента с прижатой к низу строкой ввода.

   Высота ленты ниже — только запаска на первую отрисовку: настоящую высоту
   ставит `fitChatFeed` в `mvp/views/clan.view.js`, замеряя остаток экрана.
   Доля экрана здесь не работает, потому что над чатом стоит шапка раздела
   с карточкой клана и вкладками, а её высота зависит от языка, длины
   названия клана и ширины телефона: 52vh на 390×844 уводили и последние
   сообщения, и поле ввода за нижнюю кромку.

   Материал пузыря и поля берётся из `ui-frame.css` — здесь только
   раскладка. */

.tam-clan__chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.tam-clan__chat-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-ivory) 22%, transparent) transparent;
}

.tam-clan__chat-feed::-webkit-scrollbar { width: 4px; }
.tam-clan__chat-feed::-webkit-scrollbar-track { background: transparent; }

.tam-clan__chat-feed::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-ivory) 22%, transparent);
  border-radius: var(--ui-radius-pill);
}

.tam-clan__chat-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}

/* Своё сообщение уходит вправо: в ленте на тридцать человек сторона
   читается быстрее подписи. */
.tam-clan__chat-line.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.tam-clan__chat-bubble {
  min-width: 0;
  padding: 8px 11px;
  border-radius: var(--ui-radius-md);
}

.tam-clan__chat-who {
  margin-bottom: 2px;
  font-family: var(--font-condensed), sans-serif;
  font-size: var(--ui-size-small);
  letter-spacing: 0.02em;
  color: var(--ui-gold-light);
}

.tam-clan__chat-text {
  font-size: var(--ui-size-body);
  line-height: 1.35;
  /* Ссылка или слово без пробелов не должны растягивать пузырь за край. */
  overflow-wrap: anywhere;
}

.tam-clan__chat-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tam-clan__chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--ui-radius-md);
  font-family: var(--font-main), sans-serif;
  font-size: var(--ui-size-body);
}

/* Кнопка не растягивается на всю строку и не сжимается до многоточия. */
.tam-clan__chat-send {
  flex: 0 0 auto;
  padding: 0 var(--space-3);
}

/* ─────────────── Формы в окнах ─────────────── */

.tam-clanform { display: grid; gap: 12px; text-align: left; }

.tam-clanform__field { display: grid; gap: 5px; font-size: var(--ui-size-small); color: var(--ui-text-muted); }

/* Материал полей — §8 рамы. */
.tam-clanform__field input,
.tam-clanform__field textarea {
  padding: 10px 13px;
  font-size: var(--ui-size-body);
  font-family: inherit;
  resize: none;
}

.tam-clanform__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ui-size-body);
  color: var(--ui-text-muted);
}

.tam-clanform__emblems { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.tam-clanform__emblem { cursor: pointer; }
.tam-clanform__emblem input { display: none; }

.tam-clanform__emblem img {
  width: 52px; height: 52px;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--ui-radius-md);
  border: 2px solid transparent;
  opacity: 0.6;
}

.tam-clanform__emblem input:checked + img {
  border-color: var(--ui-gold);
  opacity: 1;
  background: color-mix(in srgb, var(--ui-gold) 12%, transparent);
}

.tam-clanform__presets { display: grid; gap: 8px; }

@media (prefers-reduced-motion: reduce) {

  .tam-clan__btn:active { transform: none; }
}

/* Кнопки-варианты внутри окон: суммы взноса, действия над участником.
   Материал, подпись и оба оттенка — §12 рамы. */
.tam-clanform__preset {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-size-body);
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.tam-clanform__preset:active { transform: scale(0.98); }
/* ═══════════════ Штаб клана (§153-156, §338-343) ═══════════════
 *
 * Верх вкладки «Штаб» — нарисованный зал, всё остальное обычные панели
 * игры. Три вещи, которые объясняют разметку ниже.
 *
 * **Зал — фон, знамя — слой поверх.** Картинка зала приходит с сервера
 * и меняется с уровнем клана, поэтому она подставляется переменной
 * --tam-hq-hall, а не прописана в файле.
 *
 * **Стройка показывает стадию, а не число.** Под полосой стоит лестница
 * из пяти делений; пройденные горят золотом. Кадр объекта над ней
 * меняется вместе со стадией — это и есть «стройка видна физически».
 *
 * **Полоса босса общая, вклад личный.** Поэтому у облавы две шкалы:
 * широкая полоса здоровья сверху и тонкие полоски вех ниже.
 */

/* Собственная кнопка раздела: мелкие действия внутри карточек, где
   крупная кнопка игры заняла бы всю строку. Материал и подпись берёт
   §12 `ui-frame.css` — здесь только геометрия и нажатие. */
.tam-clan__btn {
  padding: 10px 16px;
  min-height: 40px;
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-size-body);
  cursor: pointer;
  white-space: nowrap;
}

.tam-clan__btn:active { transform: translateY(1px) scale(0.99); }
.tam-clan__btn--sm { padding: 7px 12px; min-height: 34px; font-size: var(--ui-size-small); }

/* ─────────────── Зал и знамя ─────────────── */

/*
 * Зал в списки рамы не дописан намеренно: адрес картинки подставляет вид
 * прямо в `style`, а любая запись рамы пишет сокращённое `background` и
 * вместе с ним гасит `background-size` и `background-position` (§86) —
 * зал перестал бы вписываться в кадр. Поэтому здесь свой корпус, но
 * числа взяты из словаря.
 */
.tam-hq__hall {
  position: relative;
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
  border: var(--ui-border) solid var(--ui-panel-edge);
  background-color: var(--ui-bg-deep);
  /* Сам адрес картинки подставляет вид: зал зависит от уровня клана.
     Через CSS-переменную его ставить нельзя — относительный путь внутри
     переменной браузер считает от этого файла, а не от страницы. */
  background-size: cover;
  background-position: center 38%;
  padding: 14px 12px 12px;
  display: grid;
  gap: 10px;
  min-height: 190px;
  box-shadow: var(--ui-edge-panel), var(--ui-shadow-deep);
}

/* Зал нарисован ярко, а поверх него идёт текст: без затемнения снизу
   подписи теряются на светлой мебели. */
.tam-hq__hall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--ui-bg-deep) 24%, transparent) 0%,
              color-mix(in srgb, var(--ui-bg-deep) 12%, transparent) 40%,
              color-mix(in srgb, var(--ui-bg-deep) 82%, transparent) 100%);
  pointer-events: none;
}

.tam-hq__hall > * { position: relative; z-index: 2; }

.tam-hq__banner {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 18px 12px;
  min-width: 150px;
  /* Знамя — единственная красная поверхность раздела, и это осмысленно:
     цвет клана, а не смысловой «опасно». Сквозь него видно зал, поэтому
     заливка полупрозрачная и собрана примесью к словарному красному. */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--ui-red) 92%, transparent),
              color-mix(in srgb, var(--ui-red-deep) 94%, transparent));
  border: var(--ui-border) solid var(--ui-gold-dark);
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
  /* Нижний край знамени вырезан «ласточкиным хвостом»: это флаг, а не
     ещё одна карточка. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  box-shadow: var(--ui-shadow-soft);
}

.tam-hq__banner-emblem { width: 46px; height: 46px; object-fit: contain; }

.tam-hq__banner-name {
  font-family: var(--font-heading);
  font-size: var(--ui-size-body);
  font-weight: 800;
  color: var(--ui-ivory-light);
  text-transform: uppercase;
  text-align: center;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tam-hq__banner-sub {
  font-size: var(--ui-size-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-gold-light);
  padding-bottom: 8px;
}

/* Табличка с опытом лежит на «столе» — у нижнего края зала. В списки
   рамы не дописана по той же причине, что зал: сквозь неё обязана быть
   видна картинка, а материал рамы непрозрачен. */
.tam-hq__plate {
  align-self: end;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-bg-deep) 74%, transparent);
  border: var(--ui-border) solid var(--ui-panel-edge);
}

.tam-hq__plate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.tam-hq__plate-label { font-size: var(--ui-size-small); text-transform: uppercase; color: var(--ui-text-muted); }
.tam-hq__plate-value { font-size: var(--ui-size-body); font-weight: 900; color: var(--ui-gold-light); }

.tam-hq__plate-row--sub { font-size: var(--ui-size-small); color: var(--ui-text-muted); }

.tam-hq__prestige {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-bg-deep) 74%, transparent);
  border: var(--ui-border) solid var(--ui-gold-dark);
  color: var(--ui-gold-light);
  font-size: var(--ui-size-small);
  font-weight: 900;
}

.tam-hq__prestige svg { width: 14px; height: 14px; }

/* Свежий призыв: узкая полоса, которую видно сразу, но которая не
   притворяется наградой. */
.tam-hq__summon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: var(--ui-size-small);
  font-weight: 700;
}

.tam-hq__summon svg { width: 16px; height: 16px; flex: none; }

/* ─────────────── Стройка ─────────────── */

/* Материал трёх досок штаба — §6 рамы. */
.tam-hq__project,
.tam-hq__wall,
.tam-hq__perks {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.tam-hq__project-head,
.tam-hq__wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tam-hq__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--ui-size-body);
  font-weight: 800;
  color: var(--ui-text-main);
  text-transform: uppercase;
}

.tam-hq__percent { font-size: var(--ui-size-body); font-weight: 900; color: var(--ui-gold-light); }
.tam-hq__about { font-size: var(--ui-size-small); line-height: 1.45; color: var(--ui-text-muted); }

/* Кадр стройки: квадрат, чтобы стадии не прыгали по высоте.
   Материал — §8 рамы. */
.tam-hq__site {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tam-hq__site img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tam-hq__bar { margin: 0; }

.tam-hq__stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* Лестница стройки — разрезанная шкала: дорожка §14.1 рамы, пройденная
   ступень §14.2. Здесь остаётся только высота ступени и кегль номера. */
.tam-hq__stage {
  padding: 5px 0;
  text-align: center;
  font-size: var(--ui-size-small);
  font-weight: 800;
  color: var(--ui-text-faint);
}

.tam-hq__project-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--ui-size-small);
  color: var(--ui-text-muted);
}

/* Остаток казны под стройкой: ею и строят (§35). */
.tam-hq__treasury {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--ui-size-small);
  font-weight: 700;
  color: var(--ui-gold-light);
}

.tam-hq__treasury svg { flex: 0 0 auto; }

.tam-hq__builders { display: flex; flex-wrap: wrap; gap: 6px; }

/* Материал — §8 рамы. */
.tam-hq__builder {
  padding: 4px 10px;
  font-size: var(--ui-size-small);
}

.tam-hq__builder b { color: var(--ui-gold-light); }

/*
 * Подвал стройки: две кнопки одна под другой (§35). Первая — казна,
 * вторая — земля; в строку они не встают, потому что на 360px обе
 * подписи вместе не помещаются и режутся посередине слова.
 */
.tam-hq__project-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tam-hq__project-foot .tam-clan__btn { width: 100%; }

.tam-hq__project-foot .tam-clan__btn[data-build-earth] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tam-hq__note { font-size: var(--ui-size-small); text-align: center; color: var(--ui-text-muted); }

/* Выбор проекта, пока штаб ничего не строит. Материал — §7 рамы. */
.tam-hq__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.tam-hq__pick.is-locked { opacity: 0.55; }

.tam-hq__pick-art {
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--ui-radius-sm);
  object-fit: cover;
}

.tam-hq__pick-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tam-hq__pick-name { font-size: var(--ui-size-body); font-weight: 800; color: var(--ui-text-main); }
/* Материал и цвет подписи — §8 рамы. */
.tam-hq__pick-note { font-size: var(--ui-size-small); line-height: 1.4; padding: 4px 8px; }

/* ─────────────── Стена трофеев ─────────────── */

/* Стена прокручивается вбок: трофеев со временем станет больше, чем
   помещается в ряд, а переносить их в сетку — значит терять «стену». */
.tam-hq__wall-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.tam-hq__wall-row::-webkit-scrollbar { display: none; }

/* Материал — §8 рамы: трофей стоит в вырезе стены. */
.tam-hq__trophy {
  position: relative;
  flex: 0 0 84px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px;
}

.tam-hq__trophy img {
  width: 54px; height: 54px;
  object-fit: contain;
  /* Незаработанный трофей — силуэт: место на стене видно, а что именно
     там будет — нет. */
  filter: grayscale(1) brightness(0.35);
}

/* Заработанный трофей отмечен золотым кольцом ВНУТРИ кромки, а не самой
   кромкой: на стене из восьми ячеек восемь золотых рам спорили бы друг
   с другом (тот же приём, что у редкости в §6 рамы). */
.tam-hq__trophy.is-earned {
  box-shadow: var(--ui-inner-well),
              inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 60%, transparent);
}

.tam-hq__trophy.is-earned img { filter: none; }

.tam-hq__trophy-name {
  font-size: var(--ui-size-micro);
  line-height: 1.25;
  text-align: center;
  color: var(--ui-text-muted);
}

.tam-hq__trophy.is-earned .tam-hq__trophy-name { color: var(--ui-gold-light); }

.tam-hq__trophy-lock {
  position: absolute;
  top: 6px; right: 6px;
  color: var(--ui-text-faint);
}

.tam-hq__trophy-lock svg { width: 12px; height: 12px; }

/* ─────────────── Перки уровня ─────────────── */

.tam-hq__perks-list { display: grid; gap: 6px; }

/*
 * Материал строки и кружка — §8 рамы. Закрытый перк гаснет буквой, а не
 * прозрачностью: сквозь выцветшую строку просвечивала доска под ней.
 *
 * Селектор из двух классов взят намеренно: цвет строке даёт §8, рама
 * подключена последней, и одиночный `.tam-hq__perk` она перебивает
 * белым. Родитель поднимает вес ровно настолько, чтобы этого не было
 * (§86 — не `!important`, а разбор каскада).
 */
.tam-hq__perks .tam-hq__perk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  color: var(--ui-text-faint);
}

.tam-hq__perks .tam-hq__perk.is-open { color: var(--ui-text-main); }

.tam-hq__perk .tam-hq__perk-level {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  font-size: var(--ui-size-small);
  font-weight: 900;
  color: var(--ui-gold-light);
}

.tam-hq__perk-name { flex: 1; font-size: var(--ui-size-small); color: inherit; }
.tam-hq__perk-tick { color: var(--ui-gold-light); }
.tam-hq__perk-tick svg { width: 14px; height: 14px; }

/* ═══════════════ Облава: клановый и общий босс ═══════════════ */

/* Материал карточки — §6 рамы. */
.tam-raid {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

/* Облава мира отличается от клановой кольцом ВНУТРИ кромки: сама кромка
   у всех карточек игры почти чёрная (§6 рамы), и красить её — значит
   вернуть цветную раму во весь периметр. */
.tam-raid.tam-raid--world {
  box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft),
              inset 0 0 0 2px color-mix(in srgb, var(--ui-purple-light) 55%, transparent);
}

/* Материал кадра — §8 рамы. */
.tam-raid__art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.tam-raid__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Материал наклейки — §10 рамы. Подпись золотая: селектор из двух
   классов, иначе рама красит её белым (§86). */
.tam-raid__art .tam-raid__scope {
  position: absolute;
  left: 8px; top: 8px;
  padding: 4px 10px;
  font-size: var(--ui-size-micro);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-gold-light);
}

/* Полоса здоровья босса: единственная широкая шкала на карточке, чтобы
   её нельзя было спутать с полосками вех. Материал и красный цвет
   заливки — §14 рамы: здоровье убывает, и золотой полосой «сколько
   осталось у босса» читалось как «сколько набрал клан». */
.tam-raid__hp-bar {
  height: var(--ui-bar-h);
}

.tam-raid__hp-bar i {
  display: block;
  height: 100%;
  transition: width var(--tam-t-sheet) ease;
}

.tam-raid__hp-row {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  font-size: var(--ui-size-small);
  color: var(--ui-text-muted);
}

.tam-raid__meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* Материал плитки — §10 рамы. */
.tam-raid__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: var(--ui-size-small);
}

.tam-raid__meta-item svg { width: 13px; height: 13px; color: var(--ui-gold-light); }

.tam-raid__attempts {
  font-size: var(--ui-size-small);
  font-weight: 700;
  color: var(--ui-text-muted);
  text-align: center;
}

.tam-raid__cta { min-height: var(--tap); display: grid; }
.tam-raid__cta .tam-clan__full { align-self: center; justify-self: center; }
.tam-raid__extra { display: grid; }
.tam-raid__extra .tam-clan__btn { width: 100%; }

/* Вехи. Каждая — строка из подписи, тонкой полоски и действия справа. */
.tam-raid__steps { display: grid; gap: 6px; }

/* Материал вехи — §8 рамы. */
.tam-raid__step {
  display: grid;
  grid-template-columns: 1fr 74px auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

/* Готовая к получению веха отмечена золотым кольцом внутри кромки, взятая
   — приглушённой подписью: гасить строку прозрачностью нельзя, сквозь неё
   просвечивает карточка облавы. */
.tam-raid__step.is-ready {
  box-shadow: var(--ui-inner-well),
              inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 55%, transparent);
}

.tam-raid__step.is-claimed { color: var(--ui-text-faint); }

.tam-raid__step-text { display: grid; gap: 2px; min-width: 0; }
.tam-raid__step-kind { font-size: var(--ui-size-small); font-weight: 800; color: inherit; }
.tam-raid__step-need { font-size: var(--ui-size-micro); color: var(--ui-text-muted); }
.tam-raid__step-bar { margin: 0; }

.tam-raid__reward {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ui-size-small);
  font-weight: 900;
  color: var(--ui-gold-light);
}

.tam-raid__reward svg { width: 13px; height: 13px; }
.tam-raid__got { color: var(--ui-gold-light); }
.tam-raid__got svg { width: 16px; height: 16px; }

/* Таблица вклада. Потолок подписан рядом с заголовком: игрок должен
   видеть, что первое место нельзя купить. */
.tam-raid__top { display: grid; gap: 4px; }

.tam-raid__top-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--ui-size-small);
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.tam-raid__cap { text-transform: none; font-size: var(--ui-size-micro); }

/* Материал строки — §7 рамы. */
.tam-raid__row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--ui-size-small);
}

.tam-raid__place { font-weight: 900; color: var(--ui-gold-light); text-align: center; }
.tam-raid__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tam-raid__who i { font-style: normal; color: var(--ui-text-muted); }
.tam-raid__dmg { font-weight: 900; color: var(--ui-ivory); }

/* Закрытая облава: подпись говорит, чего ждать, — гасить карточку целиком
   нельзя, сквозь неё просвечивает панель раздела. */
.tam-raid--locked { text-align: center; }
.tam-raid--locked .tam-hq__title,
.tam-raid--locked .tam-hq__about { color: var(--ui-text-faint); }
.tam-raid__lock { color: var(--ui-text-faint); }
.tam-raid__lock svg { width: 26px; height: 26px; }

/* Узкий экран: 360px и меньше. Ряд вех перестаёт помещаться в три
   колонки, а трофеи — в 84 пикселя. */
@media (max-width: 360px) {

  .tam-raid__step { grid-template-columns: 1fr auto; }
  .tam-raid__step-bar { display: none; }
  .tam-hq__trophy { flex-basis: 74px; }
  .tam-hq__trophy img { width: 46px; height: 46px; }
  .tam-hq__stage { font-size: var(--ui-size-micro); }
}

@media (prefers-reduced-motion: reduce) {

  .tam-raid__hp-bar i { transition: none; }
}