/* ══════════════════════════════════════════════════════════
   ИГРОВОЙ ЭКРАН · Pixel Wars
   Подключается ПОСЛЕ style.css и theme.css, продолжает их язык:
   палитра, шкалы, фаска и фактуры берутся только из theme.css.

   Это единственный экран, который игрок видит почти всё время,
   и главная его беда была не в цвете, а в отсутствии порядка:

   1. ТРИНАДЦАТЬ плавающих кнопок, и каждая кричала одинаково
      громко — своя насыщенная рамка 1.5px, своё цветное свечение,
      подпись 7px жирным. Тринадцать равных акцентов = ни одного.
   2. Колонки стояли в РАЗНОМ ритме: левая шагала через 42px,
      правые через 48px, поэтому ряды не совпадали и край экрана
      выглядел осыпавшимся.
   3. Полоски здоровья и опыта — самое важное на экране — были
      7px без объёма, а их числа набраны 8px. Тоньше и мельче,
      чем декоративные кнопки вокруг.
   4. Кегли ниже сетки шрифта: 6px, 7px, 8px, 9px в подписях
      кнопок, ленте чата и шкале волны. Правило темы про «не мельче
      10» до них не доставало: оно перебивает только инлайн-стили,
      а здесь размеры заданы классами в style.css.

   Порядок правки — от главного к второстепенному:
   ЖИЗНЬ И ОПЫТ → НАВЫКИ → ВОЛНА → КНОПКИ ПО КРАЯМ → ЛЕНТА ЧАТА.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Сетка плавающих кнопок: 44 + 8 = шаг колонки, 40 + 8 = шаг ряда. */
  --hudbtn-w:    44px;
  --hudbtn-h:    40px;
  --hudbtn-step: 48px;
  --hudbtn-top:  56px;

  /* Стекло. Панели игрового экрана лежат поверх боя, и глухими быть
     не должны: сквозь них видно небо и вспышки, иначе поле сужается
     до узкой полосы посередине. Новых цветов не берём — это слои
     темы с прозрачностью. */
  --hud-plate-1: color-mix(in srgb, var(--surface-2) 86%, transparent);
  --hud-plate-2: color-mix(in srgb, var(--bg) 90%, transparent);
  --hud-plate-3: color-mix(in srgb, var(--surface) 92%, transparent);
  --hud-plate-4: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* ── Шрифт. Тема переводит игру на ArkPixel через правило для body,
   но оно работает по наследованию, а эти классы объявляют Courier New
   у себя — и наследование до них не доходит. На игровом экране это
   имя героя, шкала волны, лента чата, счётчики на навыках и зельях
   и значок непрочитанного. ── */
.hud-char-name,
.wave-line, .wave-label, .wave-count,
.chat-strip-line, .chat-hud-badge,
#skillsHud .sk-cd-num, #skillsHud .potion-count {
  font-family: var(--font);
}

/* ══════════════════════════════════════════════════════════
   1 · ВЕРХНЯЯ ПАНЕЛЬ
   Здоровье читается первым, деньги вторыми, всё остальное —
   служебная строка. Раньше порядок был обратный: золото 11px
   жирным перебивало полоску здоровья 7px.
   ══════════════════════════════════════════════════════════ */

#hud {
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) 6px;
}

/* Портрет: золотое кольцо + тёмная внутренность, чтобы аватар
   не сливался с фоном панели. */
.hud-avatar {
  position: relative;
  width: 40px; height: 40px;
  border: 2px solid var(--gold-dim);
  box-shadow:
    0 0 0 1px #07060d,
    inset 0 0 10px rgba(0,0,0,0.75),
    0 0 10px var(--gold-glow);
}
/* Стеклянный блик сверху — портрет перестаёт быть плоской наклейкой */
.hud-avatar::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}

/* Имя — служебная строка, а не заголовок: оно не меняется и
   бороться за внимание с полосками ему незачем. */
.hud-char-name {
  font-size: var(--fs-1);
  font-weight: normal;
  letter-spacing: 0;
  color: var(--text-3);
  opacity: 1;
  margin-bottom: 2px;
}

.hud-stats { gap: var(--sp-1); }
.hud-row { gap: 6px; }

/* ── Полоски. Жёлоб глубокий, заливка разбита делениями:
   так глаз видит, СКОЛЬКО осталось, не читая цифр. Высота 9px
   вместо 7 — здоровье не должно быть тоньше рамки кнопки. ── */
#hud .bar-wrap {
  height: 9px;
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%);
  border: 1px solid #07060d;
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.06);
}
#hud .bar-fill {
  position: relative;
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -2px 0 rgba(0,0,0,0.35);
}
/* Деления — те же 6px, что у полосок в теме: одинаковый шаг во всей игре */
#hud .bar-fill::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;
}
#hud .bar-hp {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--danger) 45%, #000) 0%,
    var(--danger) 55%,
    color-mix(in srgb, var(--danger) 70%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 0 8px color-mix(in srgb, var(--danger) 45%, transparent);
}
#hud .bar-xp {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--magic) 45%, #000) 0%,
    var(--magic) 60%,
    color-mix(in srgb, var(--magic) 65%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 0 8px color-mix(in srgb, var(--magic) 40%, transparent);
}

/* Числа у полосок были 8px — мимо сетки шрифта и ниже порога
   читаемости. Ставим на сетку и даём место под «1000/1000». */
#hud .bar-val {
  font-size: var(--fs-1);
  color: var(--text-2);
  min-width: 46px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}
#valXp { color: var(--text-3); }

/* ── Правый блок: валюты сверху, положение в игре снизу ── */
.hud-right { gap: var(--sp-1); }

/* Фактура из темы под четырёхзначными числами читается как грязь —
   оставляем только блик. */
.hud-info-row {
  padding: 3px 6px;
  gap: 5px;
  background:
    var(--sheen),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 1px #07060d,
    0 1px 0 rgba(0,0,0,0.5);
}
.hud-divider {
  height: 12px;
  background: var(--line-strong);
  margin: 0 1px;
}

/* Валюта: 10px — сетка шрифта. Заметность даёт цвет, а не кегль
   и не поддельная жирность (у шрифта есть только Regular). */
.hud-gold-val, .hud-pixr-val, .hud-floor-val, .hud-cp-val {
  font-size: var(--fs-1);
  font-weight: normal;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
}
.hud-gold-val { color: var(--gold);  min-width: 28px; }
.hud-pixr-val { color: var(--pixr);  min-width: 24px; }

/* Подпись серая, значение цветное: во второй строке раньше цветным
   было всё, и она спорила с валютами над собой. */
.hud-floor-val, .hud-cp-val { color: var(--text-3); }
#hudFloor { color: var(--info); }
#hudCp    { color: var(--gold-dim); }

/* ══════════════════════════════════════════════════════════
   2 · ПАНЕЛЬ НАВЫКОВ
   Пять кнопок внизу — то, чем игрок действует. Им нужен свой
   «пол»: без подложки ряд висел прямо на бою и терялся среди
   вспышек. Скругление 12px убрано: в пиксельном интерфейсе
   объём даёт фаска, а не радиус (правило темы).

   Все правила ниже нарочно привязаны к #skillsHud: класс .sk-btn
   общий с колонкой навыков на арене, а арена — не этот экран.
   ══════════════════════════════════════════════════════════ */

#skillsHud {
  gap: var(--sp-2);
  padding: 8px 10px 6px;
  /* «Пол» под кнопками: чем ниже, тем плотнее. Без него ряд висел
     прямо на бою, и в вспышках его было не найти. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 0%,  transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 45%,
    color-mix(in srgb, var(--bg) 84%, transparent) 100%);
}

#skillsHud .sk-btn {
  /* 60 вместо прежних 52: 20 полей панели + 32 зазоры + 8 отбив зелья.
     Без этой поправки на узком экране ряд вылез бы за край. */
  width: min(56px, calc((100vw - 60px) / 5));
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    var(--sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 92%, #000) 0%,
      color-mix(in srgb, var(--bg) 88%, #000) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.6);
  transition: border-color .15s, box-shadow .15s, transform .06s;
}
/* Верхний блик, как на металле — тот же приём, что у плитки предмета */
#skillsHud .sk-btn::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  pointer-events: none; z-index: 2;
}

/* Готов — кольцо цветом класса персонажа (--sk-col ставит skills.js)
   и мягкое свечение. Именно этим кнопка зовёт нажать. */
#skillsHud .sk-btn.ready {
  border-color: var(--sk-col, var(--line-strong));
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--sk-col, #888) 22%, transparent),
    0 0 0 1px #07060d,
    0 0 10px color-mix(in srgb, var(--sk-col, #888) 45%, transparent),
    0 2px 0 rgba(0,0,0,0.6);
}
/* На перезарядке — гаснет, но не исчезает: игрок должен видеть строй */
#skillsHud .sk-btn.oncd {
  opacity: 1;
  border-color: var(--line-soft);
  filter: saturate(0.5) brightness(0.8);
}
/* Закрытый навык остаётся УЗНАВАЕМЫМ: иконка обесцвечена, но видна —
   иначе игрок не понимает, что именно ему откроется. */
#skillsHud .sk-btn.locked {
  opacity: 1;
  border-color: var(--line-soft);
  filter: saturate(0.25) brightness(0.95);
}
/* Нажатие — вдавливание, как у всех кнопок темы, а не съёживание */
#skillsHud .sk-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px #07060d;
}

/* Секунды до готовности — крупно и по центру, а не мелко в углу:
   в бою это число смотрят краем глаза. */
#skillsHud .sk-cd-num {
  left: 0; right: 0; bottom: 3px;
  text-align: center;
  font-size: var(--fs-1);
  font-weight: normal;
  color: var(--text);
  text-shadow: 0 1px 0 #000, 0 0 4px #000;
}
#skillsHud .sk-btn.ready .sk-cd-num { color: var(--text-3); }
#skillsHud .sk-locked-overlay {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 30%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 100%);
  border-radius: var(--r-md);
  font-size: var(--fs-1);
  padding: 3px 4px;
}

/* Зелье — не навык, а расходник: отделяем отбивом и держим
   в красном, чтобы рука находила его не глядя. */
#skillsHud .sk-btn.potion-btn {
  margin-left: var(--sp-2);
  /* !important — потому что в style.css цвет рамки зелья тоже с ним */
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line)) !important;
  background:
    var(--sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--danger) 18%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--danger) 8%,  var(--bg)) 100%);
}
#skillsHud .sk-btn.potion-btn:active { border-color: var(--danger) !important; }
#skillsHud .potion-count {
  bottom: 2px; right: 4px;
  font-size: var(--fs-1);
  font-weight: normal;
  color: color-mix(in srgb, var(--danger) 55%, #fff);
  text-shadow: 0 1px 0 #000, 0 0 4px #000;
}

/* ══════════════════════════════════════════════════════════
   3 · ШКАЛА ВОЛНЫ
   Единственная надпись в центре экрана — она отвечает на вопрос
   «сколько ещё бить». Делаем из неё вставленную в стену табличку:
   тёмная ниша, золотая нить сверху, засечки по углам.
   ══════════════════════════════════════════════════════════ */

#waveHud {
  /* Табличка стоит НЕ по центру экрана, а по центру свободного места:
     слева от неё одна колонка кнопок (52px), справа две (104px). При
     геометрическом центрировании ширина 150px уже налезала на колонку
     SHOP/КРАФТ на узких телефонах (на 320px — на девятнадцать пикселей).
     Сдвиг на 26px = половина разницы колонок. */
  left: calc(50% - 26px);
  width: min(160px, calc(100vw - 172px));
  padding: 5px 8px 6px;
  border-radius: var(--r-sm);
  background:
    var(--sheen),
    linear-gradient(180deg, var(--hud-plate-3) 0%, var(--hud-plate-4) 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  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.5),
    0 6px 16px rgba(0,0,0,0.45);
}
/* Уголки — тот же приём, что у карточек темы */
#waveHud::after {
  content: '';
  position: absolute; inset: 3px;
  pointer-events: none;
  --acc: color-mix(in srgb, var(--gold) 60%, var(--line-strong));
  background:
    linear-gradient(var(--acc), var(--acc)) left  top    / 5px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) left  top    / 1px 5px no-repeat,
    linear-gradient(var(--acc), var(--acc)) right top    / 5px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) right top    / 1px 5px no-repeat;
  opacity: 0.55;
}

.wave-line { align-items: center; gap: var(--sp-1); }
.wave-label {
  font-size: var(--fs-1);
  font-weight: normal;
  line-height: 1.2;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(0,0,0,0.95);
}
.wave-label.bonus { color: var(--success); }
.wave-label.boss  { color: var(--r-unique); }
.wave-count {
  font-size: var(--fs-1);
  color: var(--text-3);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.95);
}
.wave-bar {
  height: 5px; margin-top: 4px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%);
  border: 1px solid #07060d;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.wave-fill {
  position: relative;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 55%, #000) 0%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.wave-fill::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
}
.wave-fill.bonus {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--success) 55%, #000) 0%, var(--success) 100%);
}
.wave-fill.boss {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--r-unique) 55%, #000) 0%, var(--r-unique) 100%);
}

/* Вызов босса — главное действие экрана в этот момент.
   Берём язык главной кнопки из темы, но в цвете стража. */
.wave-boss-btn {
  margin-top: 6px; padding: 6px 4px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--r-unique) 70%, #000);
  color: color-mix(in srgb, var(--r-unique) 22%, #000);
  font-size: var(--fs-1);
  font-weight: normal;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, var(--r-unique) 0%, color-mix(in srgb, var(--r-unique) 70%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 2px 0 color-mix(in srgb, var(--r-unique) 38%, #000),
    0 0 12px color-mix(in srgb, var(--r-unique) 40%, transparent);
  text-shadow: 0 1px 0 rgba(255,255,255,0.22);
  animation: waveBossPulse 1.8s ease-in-out infinite;
}
.wave-boss-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 color-mix(in srgb, var(--r-unique) 38%, #000);
  animation: none;
}
@keyframes waveBossPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 2px 0 color-mix(in srgb, var(--r-unique) 38%, #000),
                          0 0 10px color-mix(in srgb, var(--r-unique) 30%, transparent); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 2px 0 color-mix(in srgb, var(--r-unique) 38%, #000),
                          0 0 18px color-mix(in srgb, var(--r-unique) 65%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-boss-btn { animation: none; }
}

/* Возврат на прежнюю точку — предложение, а не приказ: тише босса */
.wave-restore-btn {
  margin-top: 5px; padding: 5px 4px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--magic) 45%, var(--line));
  background:
    var(--sheen),
    linear-gradient(180deg, #221b3a 0%, #14102a 100%);
  color: color-mix(in srgb, var(--magic) 75%, #fff);
  font-size: var(--fs-1);
  font-weight: normal;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d;
}
.wave-restore-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 #07060d;
}

/* ══════════════════════════════════════════════════════════
   4 · ПЛАВАЮЩИЕ КНОПКИ ПО КРАЯМ
   Их тринадцать. Пока у каждой была своя цветная рамка и своё
   свечение, край экрана выглядел гирляндой, а в бой смотреть
   было некуда.

   Решение: КОРПУС У ВСЕХ ОДИН — тёмное стекло, фаска, тонкая
   линия. Цвет несут ровно две вещи: пиксельная иконка (она и так
   нарисована в своём цвете) и цветной корешок по верхнему краю
   в переменной --acc. Подпись у всех одинаково серая, поэтому
   ряды читаются как список, а не как набор наклеек.

   Селектор по вхождению «-hud-btn» — чтобы правило накрыло и те
   кнопки, которые появятся позже.
   ══════════════════════════════════════════════════════════ */

[class*="-hud-btn"] {
  width: var(--hudbtn-w);
  height: var(--hudbtn-h);
  /* Боковых полей нет намеренно: самая длинная подпись («ПОДЗЕМ»,
     «LIMITED») занимает 39px из 42px внутренней ширины. */
  padding: 3px 0 4px;
  gap: 2px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background:
    var(--sheen),
    linear-gradient(180deg, var(--hud-plate-1) 0%, var(--hud-plate-2) 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.55);
  /* overflow тут ставить НЕЛЬЗЯ: значок непрочитанного у «ЧАТ» висит
     углом наружу, и любое подрезание съедает его наполовину. */
  overflow: visible;
  transition: transform .06s, border-color .15s, box-shadow .15s;
}

/* Цвет раздела — полоской ПО ВЕРХУ кнопки. Снизу её ставить нельзя:
   подчёркивание внизу в этой игре означает «выбрано» (так помечена
   активная вкладка нижнего меню), и все тринадцать кнопок выглядели
   бы нажатыми. Сверху это читается как цветной корешок раздела. */
[class*="-hud-btn"]::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--acc, var(--line-strong));
  opacity: 0.8;
  pointer-events: none;
}
[class*="-hud-btn"]:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 #07060d;
}

/* Подписи: было 6-7px жирным Courier — ниже сетки шрифта и ниже
   порога читаемости. Стало 10px обычным, один цвет на все. */
[class*="-hud-label"] {
  font-family: var(--font);
  font-size: var(--fs-1);
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}

/* Иконки внутри — тень отделяет их от подложки */
[class*="-hud-btn"] > svg,
[class*="-hud-btn"] > canvas {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
  flex-shrink: 0;
}
/* Кнопка петов рисовалась иконкой 28px и холстом 36px — вдвое крупнее
   соседей, из-за чего подпись «ПЕТЫ» вылезала за нижний край.
   18 = ровно половина холста, то есть без размытия. */
#petHudNone   { width: 20px; height: 20px; }
#petHudCanvas { width: 18px; height: 18px; }

/* ── Цвет раздела. Берём тот, в котором НАРИСОВАНА иконка: её заливки
   зашиты в SVG, и спорить с ними бессмысленно — полоска просто
   называет тот же цвет словами палитры. ── */
.packs-hud-btn   { --acc: var(--cls-archer); }  /* зелёный сундук   */
.market-hud-btn  { --acc: var(--success); }     /* зелёная лавка    */
.bp-hud-btn      { --acc: var(--gold); }
.prem-hud-btn    { --acc: var(--magic); }
.limited-hud-btn { --acc: var(--danger); }
.task-hud-btn    { --acc: var(--success); }
.craft-hud-btn   { --acc: var(--gold-dim); }
.rune-hud-btn    { --acc: var(--magic); }
.boss-hud-btn    { --acc: var(--danger); }
.pet-hud-btn     { --acc: var(--cls-water); }
.clan-hud-btn    { --acc: var(--gold); }
.chat-hud-btn    { --acc: var(--gram); }

/* Единственная иконка на currentColor — арена. Оставляем ей прежний
   фиолетовый, чтобы рука находила кнопку там же, где привыкла. */
.pvp-hud-btn { --acc: var(--magic); color: var(--magic); }
.pvp-hud-btn.active {
  border-color: var(--magic);
  background:
    var(--sheen),
    linear-gradient(180deg, color-mix(in srgb, var(--magic) 26%, transparent) 0%, var(--hud-plate-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px #07060d,
    0 0 12px color-mix(in srgb, var(--magic) 45%, transparent),
    0 2px 0 rgba(0,0,0,0.55);
}

/* ── Кто имеет право звать. Из тринадцати кнопок постоянно
   светится только та, где действительно что-то ждёт. ── */
.limited-hud-btn {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 0 1px #07060d,
    0 0 10px color-mix(in srgb, var(--danger) 35%, transparent),
    0 2px 0 rgba(0,0,0,0.55);
}
.limited-hud-label { color: color-mix(in srgb, var(--danger) 45%, var(--text)); }

.pet-hud-btn.has-pet {
  border-color: color-mix(in srgb, var(--cls-water) 45%, var(--line));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 0 1px #07060d,
    0 0 10px color-mix(in srgb, var(--cls-water) 30%, transparent),
    0 2px 0 rgba(0,0,0,0.55);
}

/* Значок непрочитанного — единственная красная точка на экране */
.chat-hud-badge {
  top: -5px; right: -5px;
  min-width: 15px; height: 15px;
  border-radius: 8px;
  background: var(--danger);
  color: color-mix(in srgb, var(--danger) 12%, #000);
  font-size: var(--fs-1);
  font-weight: normal;
  line-height: 1;
  border: 1px solid #07060d;
  box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 55%, transparent);
  text-shadow: none;
  z-index: 3;
}

/* ── Сетка. Левая колонка шагала через 42px, правые через 48 —
   ряды не совпадали. Один шаг на все три колонки: 48px, зазор 8.
   Колонки тоже с зазором 8: 8 · 44 · 8 · 44 от каждого края. ── */
.packs-hud-btn   { left: 8px;  top: var(--hudbtn-top); }
.bp-hud-btn      { left: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step)); }
.prem-hud-btn    { left: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 2); }
.limited-hud-btn { left: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 3); }

.market-hud-btn  { right: 60px; top: var(--hudbtn-top); }
.craft-hud-btn   { right: 60px; top: calc(var(--hudbtn-top) + var(--hudbtn-step)); }
.pvp-hud-btn     { right: 60px; top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 2); }
.pet-hud-btn     { right: 60px; top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 3); }

.task-hud-btn    { right: 8px;  top: var(--hudbtn-top); }
.rune-hud-btn    { right: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step)); }
.boss-hud-btn    { right: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 2); }
.clan-hud-btn    { right: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 3); }
.chat-hud-btn    { right: 8px;  top: calc(var(--hudbtn-top) + var(--hudbtn-step) * 4); }

/* ══════════════════════════════════════════════════════════
   5 · ЛЕНТА ЧАТА
   Фоновый слой: пусть будет видна, но не спорит с боем.
   Было 9px жирным — ниже сетки шрифта.
   ══════════════════════════════════════════════════════════ */

.chat-strip-body {
  /* Подложка гаснет вправо: слева, где начинается строка, она плотная,
     а к концу растворяется — реплики не превращаются в глухую плашку
     поперёк всего боя. */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 84%, transparent) 0%,
    color-mix(in srgb, var(--bg) 42%, transparent) 100%);
  border-left: 2px solid color-mix(in srgb, var(--gram) 60%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 4px 8px 5px;
}
.chat-strip-line {
  font-size: var(--fs-1);
  line-height: 1.45;
  color: var(--text-2);
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(0,0,0,0.9);
}
.chat-strip-name { font-weight: normal; }
.chat-strip-text { color: var(--text-3); }
.chat-strip-close {
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text-3);
  font-size: var(--fs-1);
  line-height: 14px;
}
.chat-strip-close:active { color: var(--text); }