/* ══════════════════════════════════════════════════════════
   ТЕМА · СОЦИАЛЬНЫЕ ЭКРАНЫ — РЫНОК · КЛАНЫ · ДРУЗЬЯ · АРЕНА
   Продолжение css/theme.css. Подключается ПОСЛЕ него.
   Своих цветов не заводит: всё либо переменная темы, либо
   color-mix от неё.

   Что здесь решается.

   1. ОДНОТИПНЫЕ СТРОКИ. На этих четырёх экранах живёт почти весь
      список приложения: лоты, участники клана, топ арены, история
      боёв, журнал клана, таблица кланов. Раньше каждая строка была
      отдельной плавающей карточкой — своя рамка 1px, своё скругление
      8-10px, свой отступ 6px. Двадцать таких подряд читаются как
      двадцать объектов, а не как один список: глазу не за что
      зацепиться, взгляд не идёт вниз по колонке.
      Стало: строки собраны в таблицу — общий ритм 3px, одинаковая
      высота, чередование через одну, колонки чисел выровнены вправо
      по фиксированной ширине.

   2. ЧЕРЕДОВАНИЕ ИДЁТ В ТЁМНУЮ, А НЕ В СВЕТЛУЮ СТОРОНУ. Это не вкус:
      на осветлённой подложке (#262138) --text-4 даёт контраст 4.0
      при норме 4.5, а на ней набраны все подписи в строках. На
      затемнённой контраст только растёт.

   3. ВКЛАДКИ. Было три разных решения на трёх экранах: у рынка —
      подчёркивание зелёным, у арены — «папки» с рамкой и красной
      заливкой, у кланов — подчёркивание золотым. Стало одно:
      подчёркивание золотым, как у фильтров инвентаря и крафта
      в theme.css. Золото на этих экранах значит «ты здесь».

   4. КРАСНЫЙ ОСТАВЛЕН БОЮ. На арене красным теперь помечены ровно две
      вещи: выбранный противник и кнопка боя. Цепочка «выбрал цель —
      ударил» читается одним взглядом, а вкладки не спорят с ней.

   5. КЕГЛЬ. В классах этих экранов было 17 объявлений мельче 10px
      (7, 8 и 9 пикселей). Правило из theme.css перебивает только
      инлайн-стили, до CSS-классов оно не достаёт — поднято здесь.
      Заодно вычищены пять «серых» из разметки, которые не проходили
      по контрасту: расчёт под каждым в разделе 9.

   НА ЧЁМ ЭТО ДЕРЖИТСЯ. Разметка всех четырёх экранов собирается
   конкатенацией строк в JS, стили стоят прямо в атрибуте style —
   поэтому цвет и фон здесь перебиваются важностью. Раньше и САМИ
   СОСТОЯНИЯ ловились по инлайну: своя строка в топе — по «#f5c542»,
   эпическая редкость — по «#9b59b6», правая колонка лота — по
   «последний ребёнок». Такая зацепка отваливается молча: цвет в JS
   поменяли — оформление перестало находиться, ошибки нет. Теперь
   состояние приезжает классом (блок + модификатор через is-), а по
   инлайну ловится только то, чья разметка лежит в чужих файлах:
   кнопки фильтров рынка (index.html) и общий топ (js/ui-rating.js).
   Оба места помечены на своих строках.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Плита строки списка. Чуть темнее карточки (--surface-2): строк
     на экране много, и на светлой плите список начинает «шуметь». */
  --soc-row:     color-mix(in srgb, var(--surface-2) 82%, #05040a);
  /* Чётная строка. Разница едва заметна поштучно и хорошо ведёт
     взгляд вниз, когда строк двадцать. */
  --soc-row-alt: color-mix(in srgb, var(--surface-2) 58%, #05040a);
  /* Нажатие */
  --soc-row-hit: color-mix(in srgb, var(--surface-3) 90%, var(--gold));
  /* Волосяная линия между строками */
  --soc-hair:    color-mix(in srgb, var(--line) 65%, transparent);
  /* Ритм списка */
  --soc-gap:     3px;
  /* Высота строки: одинаковая у всех списков и заодно палец */
  --soc-row-h:   44px;
}

/* ══════════════════════════════════════════════════════════
   1 · СТРОКА СПИСКА — общий примитив для четырёх экранов
   ══════════════════════════════════════════════════════════ */
.market-listing,
.pvp-opp-card,
.pvp-rating-row,
.pvp-history-row,
.clan-member-row,
.clan-request-row,
.clan-list-row,
.rating-row {
  position: relative;
  margin-bottom: var(--soc-gap);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: var(--soc-row);
  /* Объём даётся не рамкой по кругу, а гранью: светлая нить сверху,
     тёмная подошва снизу. Двадцать рамок подряд превращаются
     в двадцать волосяных линий — то есть в таблицу. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  transition: background .12s, box-shadow .12s, transform .06s;
}

/* Чередование. nth-child, а не nth-of-type: перед строками почти
   везде стоит заголовок или шапка таблицы, и счёт всё равно
   получается через одну. */
.market-listing:nth-child(even),
.pvp-opp-card:nth-child(even),
.pvp-rating-row:nth-child(even),
.pvp-history-row:nth-child(even),
.clan-member-row:nth-child(even),
.clan-request-row:nth-child(even),
.clan-list-row:nth-child(even),
.rating-row:nth-child(even) {
  background: var(--soc-row-alt);
}

/* Компактные строки — одинаковая высота даёт вертикальный ритм */
.pvp-rating-row,
.pvp-history-row,
.clan-member-row,
.clan-request-row,
.clan-list-row,
.rating-row {
  min-height: var(--soc-row-h);
  margin-bottom: var(--soc-gap);
}

/* Нажатие: строка проваливается, а не меняет цвет рамки */
.pvp-opp-card:active,
.clan-list-row:active,
.rating-row:active {
  background: var(--soc-row-hit);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.04);
  transform: translateY(1px);
}

/* ── Рельса слева: единственный способ выделить строку в таблице,
   не ломая её ритм. Включается только на состояниях. ── */
.pvp-opp-card.selected {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--danger) 16%, var(--soc-row)) 0%,
    var(--soc-row) 40%);
  box-shadow:
    inset 3px 0 0 var(--danger),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 12px color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════
   2 · ВКЛАДКИ — один вид на рынке, арене и в клане
   ══════════════════════════════════════════════════════════ */
.market-tabs,
.pvp-tabs,
.clan-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 70%, var(--surface)) 0%,
    var(--bg) 100%);
  border: none;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 #07060d;
  margin-bottom: var(--sp-3);
  flex-shrink: 0;
}
/* У арены вкладки несли padding-top: 76px — отступ под вырез экрана.
   Но его уже держит .panel-header (76px сверху, замер: высота шапки
   94px), поэтому под заголовком «АРЕНА» зияла пустая полоса в 76
   пикселей — почти десятая часть экрана телефона впустую. Убираем. */
.pvp-tabs { padding-top: 0; margin-bottom: 0; }
.market-tabs { margin-bottom: 0; }

.market-tab,
.pvp-tab,
.clan-tab-btn {
  flex: 1;
  position: relative;
  padding: 10px 2px 9px;
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  letter-spacing: 0;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  cursor: pointer;
  transition: color .15s;
}
.market-tab:active,
.pvp-tab:active,
.clan-tab-btn:active {
  transform: none;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
}

.market-tab.active,
.pvp-tab.active,
.clan-tab-btn.active {
  color: var(--gold);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--gold) 10%, transparent) 100%);
  border: none;
  box-shadow: none;
}
/* Полоса под активной вкладкой — тот же приём, что у нижнего меню */
.market-tab.active::after,
.pvp-tab.active::after,
.clan-tab-btn.active::after {
  content: '';
  position: absolute;
  left: 14%; right: 14%; bottom: -1px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}

/* Счётчик заявок в клан: был 8px белым на красном без воздуха */
.clan-req-badge {
  display: inline-block;
  min-width: 16px;
  padding: 1px 4px 2px;
  margin-left: 4px;
  border-radius: var(--r-lg);
  font-size: var(--fs-1);
  line-height: 1.2;
  text-align: center;
  color: var(--text);
  background: var(--danger);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 0 #07060d;
}

/* ══════════════════════════════════════════════════════════
   3 · ЗАГОЛОВКИ СПИСКОВ
   Были 8-9px цветом #556 — контраст 1.7 при норме 4.5,
   то есть подписи колонок фактически не читались.
   ══════════════════════════════════════════════════════════ */
.clan-section-header {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-1);
  margin-bottom: var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.clan-section-header::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* ══════════════════════════════════════════════════════════
   4 · РЫНОК
   ══════════════════════════════════════════════════════════ */

/* ── Оболочка модалки ── */
.market-modal { background: rgba(5,4,10,0.86); }
.market-box {
  border: 1px solid var(--line-strong);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background:
    var(--grain),
    radial-gradient(140% 60% at 50% 0%, rgba(245,197,66,0.07), transparent 60%),
    linear-gradient(180deg, #16131f 0%, #0e0c16 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  box-shadow: 0 14px 32px rgba(0,0,0,0.6);
}

.market-header {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--gold-dim), 0 2px 0 #07060d;
  background: linear-gradient(180deg, rgba(245,197,66,0.06), transparent);
}
.market-title {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  letter-spacing: 0;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
/* Баланс PIXR — не подпись, а счётчик: он тут единственное число,
   от которого зависит, можешь ли ты нажать «Купить». */
#marketPixrBal {
  display: inline-block;
  padding: 3px var(--sp-2) 4px;
  border-radius: var(--r-sm);
  font-family: var(--font-ui) !important;
  font-size: var(--fs-1);
  color: var(--pixr);
  background: color-mix(in srgb, var(--pixr) 12%, var(--bg));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pixr) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
/* Пока баланс не пришёл с сервера, чип пустой — тогда его не рисуем,
   иначе в шапке висит пустая розовая рамка. */
#marketPixrBal:empty { display: none; }
.market-close {
  width: 26px; height: 26px;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-2);
  color: var(--text-3);
  background: none;
  border: 1px solid transparent;
  box-shadow: none;
}
.market-close:active {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--line);
  transform: none;
}

/* ── Фильтры ── */
.market-filters {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.market-filter-row { gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); }
.market-filter-row:first-child { border-bottom: 1px solid var(--line-soft); }

.market-filter-btn,
.market-filter-slot {
  padding: 4px 10px 5px;
  font-size: var(--fs-1);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-3);
  box-shadow: var(--bevel);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
/* Активный фильтр редкости подсвечивается СВОИМ цветом: цвет уже
   лежит в инлайне, currentColor вытягивает его в рамку и подложку.
   Так строка фильтров сама показывает лестницу редкостей. */
.market-filter-btn.active {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 14%, var(--surface-2));
  box-shadow: var(--bevel), 0 0 8px color-mix(in srgb, currentColor 28%, transparent);
}
.market-filter-btn.active:not([style]) { color: var(--gold); }
/* Единственный оставшийся инлайн-хук рынка. Кнопки фильтров лежат не в JS,
   а прямо в index.html, и цвет каждой набран палитрой 2013 года в атрибуте
   style. Класса состояния туда не добавить, не трогая чужой файл, поэтому
   перевод на лестницу редкостей пока держится на литерале. Как только у
   кнопок появятся классы редкости — эти семь строк заменяются на
   .market-filter-btn.is-uncommon и так далее. */
#marketRarityFilters .market-filter-btn[style*="#2ecc71"] { color: var(--r-uncommon) !important; }
#marketRarityFilters .market-filter-btn[style*="#3498db"] { color: var(--r-rare)     !important; }
#marketRarityFilters .market-filter-btn[style*="#9b59b6"] { color: var(--r-epic)     !important; }
#marketRarityFilters .market-filter-btn[style*="#f5c542"] { color: var(--r-legend)   !important; }
#marketRarityFilters .market-filter-btn[style*="#a78bfa"] { color: var(--magic)      !important; }
#marketRarityFilters .market-filter-btn[style*="#cd853f"] { color: var(--r-unique)   !important; }
#marketRarityFilters .market-filter-btn[style*="#f97316"] { color: var(--cls-fire)   !important; }

.market-filter-slot.active {
  border-color: var(--info);
  color: var(--info);
  background: color-mix(in srgb, var(--info) 14%, var(--surface-2));
  box-shadow: var(--bevel), 0 0 8px color-mix(in srgb, var(--info) 28%, transparent);
}

.market-body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }

/* Переключатель «Продажи / Покупки» внутри истории — тоже вкладки, только
   собранные в JS. Приводим к виду фильтров. Раньше ловились позицией
   (первый div тела рынка) и золотым литералом активной кнопки. */
.market-hist-tab {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 6px 0 7px !important;
  font-size: var(--fs-1) !important;
  background: var(--surface-2) !important;
  box-shadow: var(--bevel) !important;
}
.market-hist-tab.active {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: linear-gradient(180deg, #241f14 0%, #1a1710 100%) !important;
  box-shadow: var(--bevel), 0 0 10px var(--gold-glow) !important;
}

/* ── Лот ──
   Порядок чтения задан жёстко: картинка → название → цена → кнопка.
   Цена вынесена в чип цветом валюты, потому что решение о покупке
   принимается по ней, а раньше она была одной из шести строк подряд. */
.market-listing {
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2);
  align-items: flex-start;
}
.market-listing-icon {
  width: 46px; height: 46px;
  border-width: 1px;              /* цвет рамки приходит из инлайна — редкость */
  border-style: solid;
  border-radius: var(--r-sm);
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(255,255,255,0.06), transparent 70%),
    linear-gradient(180deg, #100e1a 0%, #08070f 100%);
  box-shadow: var(--bevel-in), 0 1px 0 rgba(255,255,255,0.04);
}
.market-listing-icon img { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); }

.market-listing-name { font-size: var(--fs-2); color: var(--text); }
.market-listing-sub  { font-size: var(--fs-1); color: var(--text-3); margin-top: 3px; }
/* Таймер лота. Класса на нём раньше не было — правило висело вхолостую, и
   отступа на экране нет; фиксируем то, что видно. Кегль всё равно поднят
   до 10px общим правилом theme.css. Цвет ставит состояние, см. ниже. */
.market-lot-timer    { font-size: var(--fs-1); margin-top: 0; }

/* Правая колонка лота — общий жёлоб под цену и кнопку. Без него
   правый край списка рвётся: у «150» и «98 000» разная ширина.
   Раньше ловилась позицией (последний ребёнок строки). */
.market-lot-actions { min-width: 76px; flex-shrink: 0; }

.market-listing-price {
  display: inline-block;
  padding: 3px var(--sp-2) 4px;
  border-radius: var(--r-sm);
  font-family: var(--font-ui) !important;
  font-size: var(--fs-4);
  line-height: 1;
  color: var(--pixr);
  background: color-mix(in srgb, var(--pixr) 10%, var(--bg));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pixr) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.07);
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
}

/* Кнопки лота. «Купить» и «Забрать» — главное действие, они уже
   золотые из theme.css; здесь только размер под палец и ширина,
   одинаковая у всех строк, иначе правый край списка рвётся. */
.market-buy-btn,
.market-cancel-btn,
.market-claim-btn {
  min-width: 68px;
  padding: 7px var(--sp-2) 8px;
  font-size: var(--fs-1);
  border-radius: var(--r-sm);
}
.market-claim-btn {
  border-color: var(--gold-dim);
  color: #1a1405;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  line-height: 1.35;
}
.market-cancel-btn {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  color: var(--danger);
  background:
    var(--sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--danger) 16%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--danger) 6%, var(--surface-2)) 100%);
}

/* ── Состояния лота ──
   Раньше весь этот блок ловил лот по литералу цвета в атрибуте style: имя
   предмета — по цвету редкости, статус — по #2ecc71, плашки характеристик —
   по #ff6b6b и компании. Держалось на совпадении строк и разваливалось
   молча: после того как RARITIES свели с палитрой темы, половина селекторов
   перестала находить хоть что-нибудь. Теперь состояние приезжает классом,
   а !important нужен потому, что цвет остаётся и в инлайне.

   Редкость сама по себе НЕ перекрашивается: RARITIES уже отдают цвета темы,
   и трогать их из CSS больше незачем. Класс редкости на строке нужен для
   того, что цветом не выражается — свечения иконки и запасного случая. */

/* Лот с редкостью, которой нет в RARITIES: в инлайне у него запасной серый,
   гасим до ступени текста, иначе он читается ярче настоящих подписей. */
.market-lot-name.is-unknown,
.market-lot-rarity.is-unknown { color: var(--text-3) !important; }

/* Вспомогательные подписи строки */
.market-lot-sub,
.market-lot-seller,
.market-lot-party { color: var(--text-3) !important; }

/* Заточка «+N» — единственное фиолетовое в строке */
.market-lot-refine { color: var(--magic) !important; }

/* Исход лота: продан / снят / куплен / выручка */
.market-lot-status.is-sold,
.market-lot-status.is-purchased,
.market-lot-payout.is-earned,
.market-lot-earn        { color: var(--success) !important; }
.market-lot-status.is-cancelled,
.market-lot-payout.is-spent { color: var(--danger) !important; }
.market-lot-sold-badge {
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 50%, transparent) !important;
}

/* Сколько осталось до снятия лота: свежий → скоро → на исходе */
.market-lot-timer.is-fresh  { color: var(--success) !important; }
.market-lot-timer.is-soon   { color: var(--gold)    !important; }
.market-lot-timer.is-urgent { color: var(--danger)  !important; }

/* Плашки характеристик. Цвет и рамку задаёт характеристика, подложка
   остаётся из инлайна — она полупрозрачная и в тему попадает. */
.market-stat-badge.is-atk   { color: var(--danger)    !important; border-color: color-mix(in srgb, var(--danger)    50%, transparent) !important; }
.market-stat-badge.is-def   { color: var(--info)      !important; border-color: color-mix(in srgb, var(--info)      50%, transparent) !important; }
.market-stat-badge.is-hp    { color: var(--success)   !important; border-color: color-mix(in srgb, var(--success)   50%, transparent) !important; }
.market-stat-badge.is-crit  { color: var(--r-unique)  !important; border-color: color-mix(in srgb, var(--r-unique)  50%, transparent) !important; }
.market-stat-badge.is-dodge { color: var(--magic)     !important; border-color: color-mix(in srgb, var(--magic)     50%, transparent) !important; }

/* Иконка лота цвет редкости уже несёт рамкой — усиливаем её на подложке */
.market-listing-icon.is-legend { box-shadow: var(--bevel-in), 0 0 8px rgba(245,197,66,0.28); }

/* ── Пусто / загрузка. Пустой экран тоже надо нарисовать, иначе он
   читается как «не загрузилось». ── */
.market-empty,
.market-loading {
  margin: var(--sp-3) 0;
  padding: 32px var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.7;
}

/* ── Модалка продажи ── */
.sell-box,
.market-unlock-box {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    var(--grain),
    radial-gradient(140% 70% at 50% 0%, rgba(245,197,66,0.09), transparent 62%),
    linear-gradient(180deg, #17142250 0%, #0d0b1500 40%),
    linear-gradient(180deg, #16131f 0%, #0e0c16 100%);
  background-blend-mode: overlay, normal, normal, normal;
  background-size: 120px 120px, auto, auto, auto;
  box-shadow: 0 1px 0 var(--gold-dim), 0 10px 28px rgba(0,0,0,0.6);
}
.sell-title,
.market-unlock-title {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  letter-spacing: 0;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
.sell-item-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--soc-row);
  box-shadow: var(--bevel);
}
.sell-price-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #08070f;
  color: var(--pixr);
  font-family: var(--font-ui) !important;
  font-size: var(--fs-3);
  box-shadow: var(--bevel-in);
}
.sell-price-input:focus {
  border-color: var(--gold);
  box-shadow: var(--bevel-in), 0 0 10px var(--gold-glow);
}
.sell-commission-note { font-size: var(--fs-1); color: var(--text-3); }

/* Подтверждающие кнопки рынка были ярко-зелёными (#00c850) — цвет
   не из палитры и он спорил с золотом главного действия в остальной
   игре. Приводим к одному языку: главное действие — золото. */
.sell-confirm-btn,
.market-unlock-btn {
  font-size: 12px;
  padding: 11px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-sm);
  color: #1a1405;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.sell-cancel-btn,
.market-unlock-close {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: linear-gradient(180deg, var(--surface-2) 0%, #12101c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 0 #07060d;
}

.market-unlock-desc {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px; line-height: 1.5; color: var(--text-2);
  background-image: none !important;
}
.market-unlock-cost {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-5);
  color: var(--pixr);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}

/* ── Подписи на кнопках-дверях HUD: рынок, клан, арена ──
   Были набраны 7 пикселями — самый мелкий текст в игре, на этом
   кегле буквы уже не попадают в пиксель и читаются как узор.
   Поднимаем на сетку и переводим цвет на палитру.
   Сами кнопки НЕ трогаем: это цветной ряд из тринадцати штук на
   игровом экране, перекрасить три из них — сломать ряд. */
.market-hud-label,
.clan-hud-label,
.pvp-hud-label {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
.market-hud-label { color: var(--success); }
.clan-hud-label   { color: var(--gold); }
.pvp-hud-label    { color: var(--magic); }

/* ══════════════════════════════════════════════════════════
   5 · АРЕНА
   ══════════════════════════════════════════════════════════ */

/* ── Счётчики: три плитки-табло ── */
.pvp-counters { gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pvp-counter-box {
  padding: var(--sp-2) var(--sp-1) var(--sp-2);
  border: none;
  border-radius: var(--r-sm);
  background:
    var(--sheen),
    linear-gradient(180deg, var(--surface-2) 0%, #12101c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45);
}
.pvp-counter-val {
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.8);
}
.pvp-counter-label {
  font-size: var(--fs-1);
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.3;
}
/* Два счётчика из трёх окрашены — рейтинг и обновления. Раньше различались
   только литералом цвета в инлайне, теперь модификатором. */
.pvp-counter-val.is-rating  { color: var(--danger) !important; }
.pvp-counter-val.is-refresh { color: var(--info)   !important; }

/* ── Карточка противника ── */
.pvp-opp-card { gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.pvp-opp-avatar {
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #100e1a 0%, #08070f 100%);
  box-shadow: var(--bevel-in);
  font-size: 20px;
}
.pvp-opp-name { font-size: 12px; color: var(--text); }
.pvp-opp-sub  { font-size: var(--fs-1); color: var(--text-3); margin-top: 3px; }
/* Рейтинг — колонка, а не «текст справа»: одинаковая ширина
   выстраивает все числа в столбик. */
.pvp-opp-rating {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  color: var(--gold-soft);
  min-width: 58px;
}
.pvp-opp-card.selected .pvp-opp-avatar {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
}
/* Иконка мечей перед числом прижималась к цифре вплотную */
.pvp-opp-rating svg,
.pvp-rating-val svg,
.rating-cp svg { vertical-align: middle; margin-right: 3px; }

/* ── Кнопка боя: самый громкий элемент экрана ── */
.pvp-fight-btn {
  width: 100%;
  margin-top: var(--sp-3);
  padding: 13px;
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  letter-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 60%, #000);
  border-radius: var(--r-sm);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--danger) 60%, #000) 0%,
      color-mix(in srgb, var(--danger) 30%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 2px 0 color-mix(in srgb, var(--danger) 26%, #000),
    0 0 14px color-mix(in srgb, var(--danger) 32%, transparent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.65);
}
.pvp-fight-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 color-mix(in srgb, var(--danger) 26%, #000);
}
.pvp-refresh-btn {
  margin-top: var(--sp-2);
  padding: 9px;
  font-size: var(--fs-1);
  color: var(--text-3);
  border-radius: var(--r-sm);
}

/* ── Топ арены: настоящая таблица с колонкой мест ── */
.pvp-rating-row,
.rating-row {
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
}
.pvp-rating-rank,
.rating-rank {
  flex-shrink: 0;
  width: 34px; min-width: 34px;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  color: var(--gold-dim);
  /* Волосяная линия справа отделяет колонку мест от имён —
     из-за неё список читается сверху вниз, а не строкой за строкой. */
  box-shadow: inset -1px 0 0 var(--soc-hair);
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
.pvp-rating-name,
.rating-name { font-size: 12px; color: var(--text); }
.pvp-rating-val {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  color: var(--danger);
  min-width: 62px;
  /* Без жёсткой тени — см. .rating-cp: под пиксельными цифрами она даёт
     двойной край, и столбик чисел рябит. */
}
.rating-cp {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  /* Спокойный тон и БЕЗ жёсткой тени: под пиксельными цифрами тень
     0 2px 0 чёрным даёт двойной край, и столбик чисел начинает рябить. */
  color: var(--gold-soft);
  min-width: 82px;
  text-align: right;
  flex-shrink: 0;
}

/* Своя строка в топе. Инлайн задаёт background и border-color, поэтому
   подсветку собираем заново — иначе строка игрока теряется среди пятидесяти
   таких же.
   .rating-row — общий топ из js/ui-rating.js, его правят отдельно: там
   зацепка по цвету пока остаётся, а .is-me уже поддержан — как только класс
   появится в разметке, подсветка переедет на него без правки этого файла. */
.pvp-rating-row.is-me,
.rating-row.is-me,
.rating-row[style*="#fa0"] {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 18%, var(--soc-row)) 0%,
    color-mix(in srgb, var(--gold) 7%, var(--soc-row)) 55%) !important;
  border-color: transparent !important;
  box-shadow:
    inset 3px 0 0 var(--gold),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}
.pvp-rating-row.is-me .pvp-rating-rank,
.rating-row.is-me .rating-rank,
.rating-row[style*="#fa0"] .rating-rank { color: var(--gold); }

/* ── История боёв ── */
.pvp-history-row { gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.pvp-hist-result {
  width: 26px;
  display: flex; align-items: center; justify-content: center;
}
.pvp-hist-opp  { font-size: 12px; color: var(--text); }
.pvp-hist-time { font-size: var(--fs-1); color: var(--text-3); margin-top: 3px; }
.pvp-hist-pts  {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  min-width: 44px;
  text-align: right;
  text-shadow: 0 2px 0 rgba(0,0,0,0.8);
}
/* Очки боя: выиграл / проиграл / бой не твой (защита — очки не меняются) */
.pvp-hist-pts.is-win  { color: var(--success) !important; }
.pvp-hist-pts.is-loss { color: var(--danger)  !important; }
.pvp-hist-pts.is-none { color: var(--text-4)  !important; }

/* ══════════════════════════════════════════════════════════
   6 · АРЕНА — ЭКРАН БОЯ
   Здесь всё решают две полоски здоровья и таймер. Их и делаем
   единственным, что видно поверх поля.
   ══════════════════════════════════════════════════════════ */
.pvp-battle-overlay { background: var(--bg); }
.pvp-battle-hud {
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  background: linear-gradient(180deg,
    rgba(5,4,10,0.96) 0%,
    rgba(5,4,10,0.78) 55%,
    rgba(5,4,10,0) 100%);
}
.pvp-fighter-name {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  color: var(--text-2);
  margin-bottom: 5px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}
/* Жёлоб полоски — глубокий, как у полосок в theme.css */
.pvp-hp-bar-wrap {
  height: 10px;
  border: 1px solid #07060d;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.pvp-hp-bar {
  position: relative;
  border-radius: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--danger) 92%, #fff) 0%,
    var(--danger) 45%,
    color-mix(in srgb, var(--danger) 45%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.30);
}
.pvp-hp-bar-opp { background: linear-gradient(180deg,
    color-mix(in srgb, var(--danger) 92%, #fff) 0%,
    var(--danger) 45%,
    color-mix(in srgb, var(--danger) 45%, #000) 100%); }
/* Полоска противника должна убывать НАВСТРЕЧУ, к центру экрана:
   имя и счёт у него прижаты вправо, а здоровье уходило влево —
   и по двум полоскам не читалось, кто побеждает. Ширину задаёт JS
   в процентах, поэтому разворачиваем саму раскладку жёлоба. */
.pvp-fighter-right .pvp-hp-bar-wrap { display: flex; justify-content: flex-end; }
.pvp-fighter-right .pvp-hp-bar { height: 100%; }
/* Деления — те же 6px, что у полосок здоровья в игре */
.pvp-hp-bar::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
  pointer-events: none;
}
.pvp-hp-text {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  color: var(--text-3);
  margin-top: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}

/* Таймер — в капсуле, иначе цифра висит в воздухе между двумя полосками */
.pvp-timer-block {
  min-width: 52px;
  padding: 4px 6px 5px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(10,8,18,0.9), rgba(6,5,12,0.9));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px #07060d;
}
.pvp-timer {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-5);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 10px var(--gold-glow);
}
.pvp-vs {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  letter-spacing: 1px;
  color: var(--text-4);
  margin-top: 2px;
}

/* Лог урона */
.pvp-dmg-entry {
  font-size: var(--fs-1);
  padding: 3px var(--sp-2) 4px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  background: rgba(5,4,10,0.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}

/* ── Итог боя ── */
.pvp-result-box {
  padding: 28px var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    var(--grain),
    radial-gradient(130% 70% at 50% 0%, rgba(245,197,66,0.12), transparent 62%),
    linear-gradient(180deg, #16131f 0%, #0d0b15 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  box-shadow: 0 12px 34px rgba(0,0,0,0.65);
}
.pvp-result-title {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-5);
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,0.8);
}
/* Итог боя и знак очков — состояние, а не цвет, который ставит JS */
#pvpResultTitle.is-win   { color: var(--gold)   !important; text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 16px var(--gold-glow); }
#pvpResultTitle.is-loss  { color: var(--danger) !important; }
#pvpResultRating.is-up   { color: var(--success) !important; }
#pvpResultRating.is-down { color: var(--danger)  !important; }
.pvp-result-sub { font-size: 12px; color: var(--text-3); }
.pvp-result-rating {
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  text-shadow: 0 2px 0 rgba(0,0,0,0.8);
}
/* Кнопка была красной с рамкой — единственное действие в окне
   читалось как «отменить». Это «дальше», значит золото. */
.pvp-result-btn {
  font-size: 12px;
  padding: 12px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-sm);
  color: #1a1405;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.pvp-result-overlay { background: rgba(5,4,10,0.9); }

/* ══════════════════════════════════════════════════════════
   7 · КЛАНЫ
   ══════════════════════════════════════════════════════════ */

/* ── Карточка клана — единственный «герой» экрана ──
   theme.css выдаёт .clan-card общую фактуру карточки вместе
   с переплетением, а внутри карточки лежит описание клана —
   абзац на переплетении не читается. Собираем фон заново. */
.clan-card {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line-strong));
  border-radius: var(--r-md);
  background:
    var(--grain),
    radial-gradient(120% 80% at 50% -10%, rgba(245,197,66,0.14), transparent 62%),
    var(--vign),
    linear-gradient(180deg, #221d36 0%, #161324 100%) !important;
  background-blend-mode: overlay, normal, normal, normal;
  background-size: 120px 120px, auto, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px #07060d,
    0 3px 0 rgba(0,0,0,0.5),
    0 0 20px rgba(245,197,66,0.10);
}
/* Уголки — тот же приём, что у плиток предметов в theme.css */
.clan-card::after {
  content: '';
  position: absolute; inset: 4px;
  pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) left  top    / 6px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left  top    / 1px 6px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top    / 6px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top    / 1px 6px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left  bottom / 6px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left  bottom / 1px 6px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 6px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 1px 6px no-repeat;
  opacity: 0.45;
}
.clan-card > * { position: relative; z-index: 1; }

/* Описание клана — единственный длинный абзац на экране, по правилу темы
   такие набираются системным шрифтом: кириллица в 10 пикселей на «щ», «ж»,
   «ы» вырождается, и текст читать тяжело. Раньше ловилось тем, что только
   у этого блока в инлайне есть line-height. */
.clan-card-desc {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5;
  border-top-color: var(--line) !important;
  background-image: none !important;
}
/* Кнопка чата клана была ярче названия клана — синяя рамка перетягивала
   на себя весь взгляд. Уводим в тон панели, оставляя цвет ссылки. */
.clan-chat-btn {
  border: 1px solid color-mix(in srgb, var(--info) 45%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  color: var(--info) !important;
  background:
    var(--sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--info) 14%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--info) 5%, var(--surface-2)) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d !important;
}

.clan-card-name {
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--gold);
  margin-bottom: 6px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.75);
}
.clan-card-sub { font-size: var(--fs-1); color: var(--text-3); margin-bottom: var(--sp-2); }

.clan-xp-bar-wrap {
  height: 8px;
  border: 1px solid #07060d;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05);
  margin-bottom: 5px;
  overflow: hidden;
}
.clan-xp-bar-fill {
  position: relative;
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 80%, #fff) 0%, var(--gold) 45%, var(--gold-dim) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.28);
}
.clan-xp-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
}
.clan-card-xp {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

/* Бонусы клана — чипы-показатели, а не таблетки текста */
.clan-bonus-row { gap: var(--sp-1); }
.clan-bonus-chip {
  padding: 3px var(--sp-2) 4px;
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 15%, var(--bg)) 0%,
    color-mix(in srgb, var(--gold) 7%, var(--bg)) 100%);
  border: none;
  box-shadow:
    inset 2px 0 0 var(--gold-dim),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}

/* ── Участники и заявки ── */
.clan-member-row,
.clan-request-row { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.clan-member-name { font-size: 12px; color: var(--text); margin-bottom: 3px; }
.clan-member-sub  { font-size: var(--fs-1); color: var(--text-3); line-height: 1.4; }
.clan-member-btns { gap: var(--sp-1); }

/* Кнопки в строке участника были 9px — в них не попасть пальцем */
.clan-sm-btn {
  min-width: 30px; height: 30px;
  padding: 0 var(--sp-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  background: var(--sheen), linear-gradient(180deg, #2b2544 0%, #1a1730 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
}
.clan-kick-btn {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  color: var(--danger);
  background: var(--sheen), linear-gradient(180deg,
    color-mix(in srgb, var(--danger) 16%, var(--surface-2)) 0%,
    color-mix(in srgb, var(--danger) 6%, var(--surface-2)) 100%);
}
.clan-accept-btn {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line));
  color: var(--success);
  background: var(--sheen), linear-gradient(180deg,
    color-mix(in srgb, var(--success) 18%, var(--surface-2)) 0%,
    color-mix(in srgb, var(--success) 7%, var(--surface-2)) 100%);
}

/* ── Журнал клана — лента, а не список плашек ── */
.clan-log-row {
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 7px var(--sp-2);
  font-size: var(--fs-1);
  border-bottom: 1px solid var(--soc-hair);
}
.clan-log-row:nth-child(even) {
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}
/* Маркер строки: три пикселя золота задают ритм ленты */
.clan-log-row::before {
  content: '';
  flex-shrink: 0;
  width: 3px; height: 3px;
  margin: 5px 0 0;
  background: var(--gold-dim);
}
.clan-log-text { color: var(--text-2); line-height: 1.5; }
.clan-log-date {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  color: var(--text-4);
  margin-left: var(--sp-2);
}

/* ── Таблица кланов ── */
.clan-list-header {
  grid-template-columns: 2fr 1fr 1fr;
  padding: var(--sp-1) var(--sp-3) 6px;
  margin-bottom: var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-4);
  border-bottom: 1px solid var(--line);
}
/* Числовые колонки прижаты вправо и в шапке, и в строках —
   иначе «12/30» и «418 200» пляшут по центру. */
.clan-list-header span:nth-child(n+2) { text-align: right; }

.clan-list-row {
  grid-template-columns: 2fr 1fr 1fr;
  padding: var(--sp-2) var(--sp-3);
  gap: var(--sp-2);
}
.clan-list-name { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 4px; }
.clan-list-tag  { color: var(--gold); }
.clan-list-lv   { font-size: var(--fs-1); color: var(--text-3); }
.clan-list-val  {
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  color: var(--text-2);
  text-align: right;
}

/* ── Кнопки экрана кланов ── */
.clan-join-btn {
  padding: 11px;
  font-size: 12px;
  border-radius: var(--r-sm);
  border-color: var(--gold-dim);
  color: #1a1405;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.clan-join-btn:disabled {
  filter: grayscale(0.75) brightness(0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.clan-action-row {
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.clan-action-btn {
  padding: 10px var(--sp-1) 11px;
  font-size: var(--fs-1);
  line-height: 1.35;
  border-radius: var(--r-sm);
  color: var(--text-3);
}
/* Четыре кнопки действий были одинаково громкими — жёлтая, зелёная,
   фиолетовая и красная рамки одной толщины. «Распустить клан» кричал так
   же, как «Пожертвовать». Выстраиваем иерархию: жертвовать — золотом,
   служебные — приглушённо, разрушительное — тише всех, цветом только текст.
   Роль кнопки теперь в её классе, а не в цвете рамки. */
.clan-action-btn.is-donate {
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)) !important;
  color: var(--gold) !important;
  background:
    var(--sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 18%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--gold) 7%, var(--surface-2)) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 0 #07060d !important;
}
.clan-action-btn.is-edit {
  border: 1px solid var(--line-strong) !important;
  color: var(--success) !important;
  background: var(--sheen), linear-gradient(180deg, #2b2544 0%, #1a1730 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d !important;
}
.clan-action-btn.is-transfer {
  border: 1px solid var(--line-strong) !important;
  color: var(--magic) !important;
  background: var(--sheen), linear-gradient(180deg, #2b2544 0%, #1a1730 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d !important;
}
.clan-action-btn.is-destructive {
  border: 1px solid var(--line) !important;
  color: var(--danger) !important;
  background: linear-gradient(180deg, var(--surface-2) 0%, #12101c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 0 #07060d !important;
}
/* Иконка внутри кнопки «Описание» приходит из JS зелёной старой палитры */
.clan-action-btn svg { vertical-align: middle; margin-right: 3px; }

/* Модалка пожертвования */
.clan-donate-modal-box {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    var(--grain),
    radial-gradient(130% 70% at 50% 0%, rgba(245,197,66,0.12), transparent 62%),
    linear-gradient(180deg, #16131f 0%, #0d0b15 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  box-shadow: 0 1px 0 var(--gold-dim), 0 10px 28px rgba(0,0,0,0.6);
}
.clan-donate-title {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  letter-spacing: 0;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
.clan-donate-opt {
  padding: 11px var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 12%, var(--surface-2)) 0%,
    color-mix(in srgb, var(--gold) 5%, var(--surface-2)) 100%);
  color: var(--gold);
  font-size: var(--fs-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
}
.clan-donate-close { font-size: var(--fs-2); color: var(--text-3); border-radius: var(--r-sm); }

/* ══════════════════════════════════════════════════════════
   8 · ДРУЗЬЯ
   Экран целиком собирается конкатенацией строк в JS, фон, рамка и
   скругление заданы в атрибуте style — их CSS перебить может только
   важностью. Раньше блоки ловились «всё, что не по центру», а кнопки —
   по цвету рамки; теперь у них есть классы, и оформление держится за них.
   ══════════════════════════════════════════════════════════ */
#friendsBody .friends-block {
  /* Общая грань и подъём: блоки перестают быть плоскими прямоугольниками */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.35);
  margin-bottom: var(--sp-3) !important;
}
/* Кнопки экрана: инлайн задаёт им фон и рамку старой палитрой,
   поэтому перекрываем важностью — иначе они выпадают из темы. */
.friends-btn {
  font-family: var(--font) !important;
  border-radius: var(--r-sm) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6) !important;
}
/* Золотые кнопки («Копировать», «Забрать награду») — главное действие */
.friends-btn.is-primary {
  border: 1px solid var(--gold-dim) !important;
  color: #1a1405 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25) !important;
}
/* «Поделиться» — второе по важности */
.friends-btn.is-share {
  border: 1px solid color-mix(in srgb, var(--success) 60%, var(--line)) !important;
  color: var(--success) !important;
  background:
    var(--sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--success) 18%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--success) 7%, var(--surface-2)) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d !important;
}
.friends-btn:active { transform: translateY(2px); }

/* ══════════════════════════════════════════════════════════
   9 · ОБЩЕЕ ДЛЯ ЧЕТЫРЁХ ЭКРАНОВ
   ══════════════════════════════════════════════════════════ */

/* ── Пять «серых» из разметки, которые не читаются ──
   В JS этих экранов вспомогательные подписи набраны сокращёнными
   кодами #334, #445, #556, #667, #778. Замер контраста на фоне
   панели (яркость 0.0058):
       #334 — 1.52   #445 — 1.97   #556 — 2.58
       #667 — 3.34   #778 — 4.28     норма 4.5
   То есть ни один из пяти не проходит, а на них набрано всё
   второстепенное: «3 ур. до награды», «всего заработано», подписи
   колонок. Переводим на ступени текста темы: замер там же даёт
   --text-4 = 4.9 и --text-3 = 6.5.
   Ловилось это по самому коду цвета в атрибуте style — то есть по тому,
   что мы как раз и собираемся однажды заменить. Теперь у каждой подписи
   свой класс, и правило не зависит от того, каким серым её набрали. */
.friends-hint,           /* подсказка «поделись ссылкой» */
.friends-note,           /* «загрузка», «только в Telegram», «пока никого» */
.friends-card-next,      /* «следующая награда: Lv.N» */
.friends-card-progress,  /* «3 ур. до награды» */
.friends-total,          /* «всего заработано» */
.clan-lv-xp.is-past      /* XP пройденной ступени клана */
  { color: var(--text-4) !important; }

.friends-label,          /* подпись над реферальной ссылкой */
.friends-list-label,     /* «твои друзья (N)» */
.friends-reward-box,     /* блок «за каждого друга» */
.clan-lv-title.is-past,  /* заголовок пройденной ступени клана */
/* #6d87a8 по контрасту проходит (5.1), но это шестой оттенок серого
   в наборе — сводим к той же ступени, чтобы подписи на экране были
   одного тона, а не шести близких. */
.pvp-note                /* «загрузка», «нет соперников», «ошибка сети» */
  { color: var(--text-3) !important; }

/* Ни на одной из этих панелей нет длинных абзацев на фактуре:
   описание клана и подсказки набираются системным шрифтом
   по правилу theme.css, а переплетение под ними снято. */
.clan-card-desc,
.market-unlock-desc,
.market-empty,
.market-loading {
  background-image: none;
}

/* Списки в панелях кланов и арены дышат одинаково */
#clanPanelBody, #pvpBody, #ratingBody { padding-top: var(--sp-2); }
#panelPvp .panel-body { padding-top: var(--sp-3); }