/* Башня Смерти — вёрстка экранов.

   ТОКЕНЫ И РОЛИ ЖИВУТ НЕ ЗДЕСЬ, а в `static/дизайн.css` — он подключается
   первым (base.html) и является единственным источником дизайна (решение
   Mike 2026-07-27). В этом файле только правила конкретных экранов, и они
   обязаны брать цвета, радиусы и кегли токенами, а не литералами. */
.шапка {
  display: flex; align-items: center; gap: 12px;
  height: var(--шапка); padding: 0 12px; flex-shrink: 0; box-sizing: border-box;
  position: relative;                     /* якорь выпадающего меню игрока */
  background: linear-gradient(var(--камень-верх), var(--камень-низ));
  color: var(--текст); border-bottom: 2px solid var(--кромка-золото);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.шапка-лого { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.шапка-лого .эмблема { height: 22px; }
.шапка-лого .слово { height: 20px; }

/* вкладки меты — те же кнопки на камне (решение Mike 2026-07-24), но
   прижаты к лого, а не выброшены в правый край жёстким padding: 20vw */
.нав-мета { display: flex; gap: 4px; flex-shrink: 0; }
.нав-мета .таб {
  position: relative; background: var(--кнопка); color: var(--текст);
  padding: 6px 13px; font-size: var(--к-база); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--кромка); border-radius: var(--р-действие);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .10);
}
.нав-мета .таб:hover { background: var(--кнопка-навод); color: var(--золото); }
.нав-мета .таб.active {
  background: var(--лист-поле); color: #1f1f1f; font-weight: bold;
  border-color: var(--кромка-золото);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--лист-поле);
}
/* красная точка «есть что вложить» — очки статов и навыков вместе */
/* СЧЁТЧИК — ЦИФРА, А НЕ КРУЖОК (правка Mike 2026-07-27). Была пилюля с
   обводкой: три слоя (фон, кант, тень) ради одного знака, и на камне она
   читалась крупнее самой вкладки. Оставлена голая красная цифра в углу —
   она и так единственная красная на вкладке, значит замечается сразу, а
   лишней геометрии не добавляет. Тень — чтобы цифра не терялась на камне. */
.нав-мета .таб-точка {
  position: absolute; top: -1px; right: 3px;
  /* ТОНКИМ И ПОКРУПНЕЕ (правка Mike 2026-07-27): жирная девятка в 9 px на
     камне слипалась в пятно — «восьмёрка нечитаема». Тонкое начертание на
     ступень крупнее читается лучше жирного мелкого, а яркости добавляет
     цвет, а не вес */
  background: none; color: #ff8a78; font: normal var(--к-метка) Verdana;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
/* на АКТИВНОЙ вкладке фон светлый лист, и та же светлая киноварь на нём
   тонет — берём густой красный без тени (правка Mike 2026-07-27) */
.нав-мета .таб.active .таб-точка { color: #b02a1c; text-shadow: none; }
/* в бою мета только для просмотра (правило 09-интерфейса) — вкладки
   притушены (решение Mike 2026-07-25), внимание держат багровые часы */
.шапка.в-бою .нав-мета .таб { opacity: .45; }
.шапка.в-бою .нав-мета .таб:hover { opacity: .7; }

/* Две равные половины по краям (правка Mike 2026-07-25): каждая берёт
   ровно половину свободного места (flex: 1 1 0), поэтому середина строки —
   это физическая середина экрана. Часы больше не ездят от того, что слева
   или справа что-то выросло: полка наблюдений, длинный ник, лишний чип. */
.шап-лево, .шап-право { flex: 1 1 0; min-width: 0; display: flex;
  align-items: center; gap: 12px; }
.шап-право { justify-content: flex-end; }

/* часы мира — центр строки, единственное живое место шапки.
   Плитка внутри — по содержимому: часы не растягиваются баннером */
.часы-зона { flex: 0 0 auto; max-width: 100%; display: flex;
  justify-content: center; align-items: stretch; margin: 6px 0; }
.шапка-часы {
  max-width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--р-действие);
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
/* на телефоне заголовок часов короче (см. services/шапка.py::часы) —
   «ВРАТА АСКЕЗА» не влезало в 390px и резалось многоточием */
.шапка-часы .кратко { display: none; }
/* время не режем никогда — оно и есть смысл плитки; жмётся заголовок */
.шапка-часы b { font-size: var(--к-знач); letter-spacing: .5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.шапка-часы .подпись { color: var(--тихо); font-size: var(--к-мелко); flex-shrink: 0; }
.шапка-часы .время { font: bold 15px/1 Georgia, serif; flex-shrink: 0; }
/* состояния — ПЛОТНЫМИ тонами, а не полупрозрачной вуалью поверх градиента
   (правка Mike 2026-07-25: «цвет плохо встал» — просвечивающий камень мутил
   и янтарь, и зелень). Каждый тон — свой тёмный фон + своя кромка. */
.шапка-часы.пусто { border: none; }
.шапка-часы.ч-сон { color: var(--тихо); }      /* покой — без плитки совсем */
.шапка-часы.ч-набор { color: #ffe0a0; background: #6b5a33; border-color: #b39b5e; }
.шапка-часы.ч-в_деле { color: #d6f5d6; background: #3d6338; border-color: #7ab472; }
.шапка-часы.ч-башня { color: #f7efdd; background: #5d5238; border-color: #b39b5e; }
.шапка-часы.ч-бой { color: #ffe2e0; background: #8a2f2b; border-color: #d0665e;
  animation: шапка-пульс 1.6s infinite; }
/* КРОВАВАЯ БОЙНЯ (Mike 2026-07-30): призыв перебивает врата и анонсы, поэтому
   и тон самый громкий в строке — багрец с пульсом, как у идущего боя, но
   светлее кромкой: событие зовёт, а не уже держит тебя */
.шапка-часы.ч-бойня { color: #ffe6df; background: #7a1f1a; border-color: #e08a5e;
  animation: шапка-пульс 1.6s infinite; }
@keyframes шапка-пульс {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 50, 50, .5); }
  50% { box-shadow: 0 0 0 5px rgba(200, 50, 50, 0); }
}

/* состояние бойца: HP (тикает клиентом, реген 1%/8сек) и кредиты */
/* зазор побольше (правка Mike 2026-07-25): чипы стоят раздельными мишенями,
   и HP уезжает левее — ближе к рабочей зоне экрана, куда ходит рука */
.шапка-сост { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
/* Чипы — ТАКИЕ ЖЕ КНОПКИ, как ник (решение Mike 2026-07-25): раньше HP и
   кредиты были голым текстом, и по ним не читалось, что это двери на
   «Персонажа» и «Рынок». Правило шапки простое: всё, что в рамке с бликом,
   — нажимается. Тепловая зона игрока лежит ниже (карта, лут, форма хода),
   поэтому сигнал должен стоять постоянно, а не всплывать по наведению. */
.шапка-сост .чип { display: flex; align-items: center; gap: 6px;
  color: var(--текст); text-decoration: none; white-space: nowrap;
  font-size: var(--к-знач); padding: 4px 9px; border-radius: var(--р-действие);
  background: var(--кнопка); border: 1px solid var(--кромка);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
/* ГЛАВНАЯ ПРИЧИНА «ничего не видно» (Mike 2026-07-25): глобальное
   `b { color: #000 }` (БК-правило для инфо-блоков на бумаге) перебивало цвет
   чипов — числа HP и кредитов рисовались ЧЁРНЫМ по тёмному камню. На камне
   жирное наследует цвет своего блока. */
.шапка b, .чат-шапка b, .чат-полоска b { color: inherit; }
.шапка-сост .чип b { font-weight: bold; }
.шапка-сост .чип:hover { background: var(--кнопка-навод); color: var(--золото); }
.шапка-сост .чип:hover .мелко { color: var(--текст); }
/* ник чуть отодвинут от чипов — он про аккаунт, а не про состояние боя */
.шапка-ник { margin-left: 4px; }
/* знаки чипов держат свой цвет: сердце — приглушённо-красное, кредиты —
   золото. Серые значки на камне сливались в кашу (правка Mike 2026-07-25) */
.шапка-сост .знак { font-size: var(--к-база); line-height: 1; }
.шапка-сост .чип:first-child .знак { color: #ff8f82; }
.шапка-сост .чип + .чип .знак { color: var(--золото); }
.шапка-сост .мелко { color: var(--тихо); font-size: var(--к-мелко); }
.шапка-сост .полоска { width: 46px; height: 8px; background: #2f2d28;
  border: 1px solid #201f1b; border-radius: var(--р-лист); overflow: hidden; }
.шапка-сост .полоска i { display: block; height: 100%; width: 100%;
  background: linear-gradient(#8ee08e, #4fa54f); }
.шапка-сост .полоска i.мало { background: linear-gradient(#ff9a7a, #cc5137); }
.шапка-ник { display: flex; align-items: center; gap: 5px;
  background: var(--кнопка); border: 1px solid var(--кромка); border-radius: var(--р-действие);
  color: var(--золото); font: 12px Verdana, Arial, sans-serif; padding: 5px 9px;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
.шапка-ник:hover { background: var(--кнопка-навод); color: #fff0c8; }
.шапка-ник .галка { color: var(--тихо); font-size: var(--к-мелко); }
.шапка-ник .глиф-меню { display: none; }
/* гость: справочники строкой — прятать ему нечего, часов и чипов нет */
.гость-ссылки { display: flex; gap: 14px; }
.гость-ссылки a { color: var(--золото); text-decoration: none; font-size: var(--к-база); }
.гость-ссылки a:hover { text-decoration: underline; }

/* меню игрока — вместо семи ссылок в углу (решение Mike 2026-07-25) */
.шапка-меню { position: absolute; top: var(--шапка); right: 10px; z-index: 60;
  width: 210px; background: var(--камень-низ); border: 1px solid var(--кромка);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.шапка-меню .шап { padding: 9px 12px; border-bottom: 1px solid var(--кнопка); }
.шапка-меню .шап b { color: var(--золото); font-size: var(--к-знач); }
.шапка-меню .шап .мелко { color: var(--тихо); font-size: var(--к-мелко); }
.шапка-меню .группа { padding: 4px 0; border-bottom: 1px solid var(--кнопка); }
.шапка-меню .группа:last-child { border-bottom: none; }
.шапка-меню a, .шапка-меню .как-ссылка {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  color: var(--текст); text-decoration: none; font-size: var(--к-база); }
.шапка-меню a:hover, .шапка-меню .как-ссылка:hover {
  background: var(--кнопка); color: var(--золото); text-decoration: none; }
/* «выйти» — кнопка POST-формы (CSRF), но выглядит как соседние ссылки */
.как-ссылка { background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: #ffcc66; cursor: pointer; }
.как-ссылка:hover { text-decoration: underline; }
/* док вкладок — только телефон (вариант Б), на десктопе его нет */
.нав-док { display: none; }

/* лестница сжатия: узкое окно гасит украшения, а не смысл. Сначала уходит
   слово лого (эмблема держит опознание), потом «/50» у HP и отступы вкладок;
   ниже 760px — телефонная раскладка (медиазапрос в конце файла). */
@media (max-width: 1180px) {
  .шапка-лого .слово { display: none; }
}
@media (max-width: 1040px) {
  .шапка-сост .чип .мелко { display: none; }
  .нав-мета .таб { padding: 6px 10px; }
  .шапка { gap: 9px; }
}
.layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.content { flex: 1; padding: 12px 16px; max-width: var(--контент); overflow-y: auto; width: 100%; margin: 0 auto;
           /* шкала сдвига скрыта — появляясь, дёргала ширину (правка Mike);
              прокрутка колесом/тачпадом работает как раньше */
           scrollbar-width: none;
           /* центрирование рабочей зоны (правка Mike 2026-07-20):
              --Л — левый край колонки инвентаря (третья колонка char-layout),
              --С — сдвиг вправо на половину свободного места справа от зоны
              (ширина зоны = --Л + 578px карточек); размер зоны не меняется */
           --Л: calc(var(--кукла-кол) + max(205px, 15%)
                     + 2 * var(--сет-зазор));
           --С: max(0px, calc((100% - var(--Л) - 578px) / 2)); }
.content::-webkit-scrollbar { display: none; }
.chat {
  /* стартовая высота — 1/4 экрана (правка Mike 2026-07-21, было 20vh
     с потолком 242px); ручка перетаскивания работает как раньше */
  height: clamp(142px, 25vh, 380px); flex-shrink: 0;
  /* золотая кромка — та же, что под шапкой: верх и низ экрана держат
     один камень (правка Mike 2026-07-25: «шапка и чат — одна вёрстка») */
  border-top: 2px solid var(--кромка-золото); background: var(--лист);
  padding: 6px 10px 4px;
  font-size: var(--к-база);                  /* текст чата +10% (правка Mike) */
  display: flex; flex-direction: column;
  position: relative;
}
/* Язычок по центру верхней границы (концепт Mike 2026-07-25): одна деталь
   вместо ручки и кнопки ▾ в углу — ТЯНЕШЬ меняет высоту, КЛИК сворачивает.
   104×16 вместо прежних 16px кнопки: центр нижней кромки экрана — место,
   куда рука идёт сама (жест шторки на телефоне). */
.чат-язычок {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 16px; border-radius: var(--р-действие); z-index: 3;
  background: var(--кромка-золото); color: #fff6e2; cursor: ns-resize;
  font: 10px/16px Verdana; text-align: center; letter-spacing: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  user-select: none; -webkit-user-select: none;
}
.чат-язычок:hover { background: #a08b5c; }

/* Шапка чата (концепт Mike 2026-07-25): ОДНА строка на всю ширину —
   каналы слева со счётчиками, инструменты справа. Отрицательные поля
   съедают паддинг .chat, полоса идёт от края до края. */
/* Шапка чата — ТОТ ЖЕ КАМЕНЬ, что у шапки страницы (правка Mike 2026-07-25):
   верх и низ экрана держат одну вёрстку, каналы читаются теми же кнопками,
   что вкладки меты. Раньше чат был бумажным, а шапка каменной — два языка. */
.чат-шапка {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 30px; margin: -6px -10px 5px; padding: 0 10px;
  background: linear-gradient(var(--камень-верх), var(--камень-низ));
  border-bottom: 1px solid var(--кромка); color: var(--текст);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.чат-инстр { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* инструменты чата — та же кнопка, что «ник ▾» в шапке страницы */
.онлайн-кнопка, .чат-свернуть {
  font: 11px Verdana; line-height: 1; padding: 5px 9px; cursor: pointer;
  color: var(--золото); background: var(--кнопка); border: 1px solid var(--кромка);
  border-radius: var(--р-действие); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.онлайн-кнопка:hover, .чат-свернуть:hover { background: var(--кнопка-навод); }
.онлайн-кнопка b { color: #a6e8a6; }
/* спрятанная зона онлайна — кнопка вдавлена, чтобы состояние читалось */
.chat.онлайн-скрыт .онлайн-кнопка { background: #3a3831; color: var(--тихо); }
.chat.онлайн-скрыт .онлайн-кнопка b { color: var(--тихо); }
.chat.онлайн-скрыт .online { display: none; }
/* ▾ — сворачивание для мобилы, где язычка нет (на десктопе прячется) */
.чат-свернуть { display: none; }
.chat .cap { color: #666; font-weight: bold; font-size: var(--к-метка); text-transform: uppercase; margin-bottom: 3px; }
.chat .chat-body { flex: 1; display: flex; gap: 8px; min-height: 0; }
.chat .chat-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat .messages { flex: 1; overflow-y: auto; }
/* зона онлайна справа (09-интерфейс): ЛКМ — профиль, ПКМ — публично/приват */
.chat .online {
  width: var(--онлайн); border-left: 1px solid #d0d0d0;
  padding-left: 8px; overflow-y: auto;
}
.chat .online-list a { display: block; padding: 1px 0; text-decoration: none; }
.chat .online-list a:hover { text-decoration: underline; }
/* строка зоны онлайна (правка Mike 2026-07-20, вид уточнён тем же днём):
   » приват (без окантовки, в размер текста, зазор — пробел) · логин ·
   ♜ турнир (ладья-башня вместо эмодзи) · ⚔ поединок в рост заглавной
   буквы логина (клик — окно боя зрителем) */
.chat .online-list .онлайн-ряд {
  display: flex; align-items: baseline; gap: 4px; padding: 1px 0;
}
.chat .online-list .онлайн-ряд a { display: inline; padding: 0; }
.chat .online-list a.онлайн-стрелка { color: #6b6b5a; flex-shrink: 0; }
.chat .online-list a.онлайн-стрелка:hover { text-decoration: none; color: #333; }
.онлайн-значок { color: #6b6b5a; cursor: default; }
.онлайн-ур { color: #777; font-size: var(--к-мелко); }   /* уровень, как [1] на кукле */
.chat .online-list a.онлайн-мечи { color: #a00; font-size: var(--к-база); line-height: 1; }
/* окно персонажа внутри игры (решение Mike 2026-07-20) */
.модал-фон {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0, 0, 0, .55);
  align-items: center; justify-content: center;
}
.модал {
  /* уже прежнего (было 900px) — окно квадратнее (правка Mike) */
  width: min(640px, 94vw); max-height: 90vh;
  background: var(--лист); border: 2px solid #6b6b5a;
  box-shadow: 0 10px 42px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column;
  /* ОКНО ТЯНЕТСЯ ЗА УГОЛ (Mike 2026-08-01): СВОЯ ручка поверх рамы —
     нативный resize:both не работал: угол окна накрыт iframe-рамой, и мышь
     уходила в неё, не долетая до UA-резизера. Драг ведёт modal.js; класс
     .ручной выключает авто-подгон под содержимое. */
  overflow: hidden; position: relative;
  min-width: 300px; min-height: 180px;
}
.модал-угол, .окно-угол {
  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px;
  cursor: nwse-resize; z-index: 3;
  /* штриховка уголка — как у системных окон */
  background:
    linear-gradient(135deg, transparent 0 9px, #6b6b5a 9px 10px,
      transparent 10px 13px, #6b6b5a 13px 14px, transparent 14px 17px,
      #6b6b5a 17px 18px, transparent 18px);
}
/* подтверждениям ручка ни к чему — это мини-диалог */
.модал.модал-вопрос .модал-угол { display: none; }
/* высоту рамы задаёт modal.js по содержимому (без пустоты); стартовая —
   чтобы не мигало нулём до сообщения */
.модал-рама { width: 100%; height: 340px; border: 0; }
/* ручной режим: рама больше не держит высоту содержимого — заполняет окно,
   каким его растянули; внутри рамы страница скроллится сама */
.модал.ручной .модал-рама { height: auto !important; flex: 1 1 auto; min-height: 0; }
/* окно карты башни крупнее обычного (правка Mike): фиксированные 900px,
   клетка там 25px; сверхширокий этаж (Лабиринт) скроллится внутри рамы */
.модал.модал-карта { width: min(900px, 94vw); }
/* окно боя зрителя — по ширине контента лога (640) + ~50px по краям
   (правка Mike 2026-07-21): 740 = 640 лог + 2×(border 2 + .content 18 + 30) */
.модал.модал-бой { width: min(740px, 94vw); }
/* окно-вопрос (правка Mike 2026-07-26): подтверждения больше не браузерные */
.модал.модал-вопрос { width: min(420px, 92vw); }
.вопрос-тело {
  padding: 14px 16px; font-size: var(--к-база); line-height: 1.45;
  overflow-y: auto; max-height: 46vh;
}
.вопрос-строка { min-height: 1px; }
.вопрос-строка.пусто { height: 8px; }
.вопрос-кнопки {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 0 16px 14px;
}
/* разбивка стата в окне персонажа: «41 (20 + 21)» — скобки тише итога,
   чтобы главным читалось само число (скрин БК от Mike 2026-07-26) */
.стат-расклад { color: #7d7767; font-weight: normal; font-size: var(--к-мелко); }
/* только что вложенное очко — синим, как «+» рядом (правка Mike 2026-07-26):
   раньше надбавка от вещей и набранное вручную выглядели одинаково, и было
   не понять, что уйдёт по «сбросить», а что останется */
.стат-набор { color: #295fa6; font-weight: bold; }
/* пачка стакающихся предметов: «Синий камень ×8» (подземелье, этап 1) */
.стак { margin-left: 5px; padding: 1px 6px; border-radius: var(--р-метка);
  background: #e2ddd0; color: #55503f; font-size: var(--к-бейдж);
  font-weight: bold; vertical-align: 2px; }
.вопрос-кнопки button { min-width: 96px; margin-top: 0; }
/* кнопка согласия берёт игровые классы (.кн-опасно / .кн-главная) — своей
   раскраски у неё нет. Гасим синее системное кольцо фокуса: оно чужое в
   палитре (правка Mike 2026-07-26) */
.вопрос-кнопки button:focus { outline: none; }
.вопрос-кнопки button:focus-visible {
  outline: 2px solid #d8b25a; outline-offset: 1px;
}
/* в режиме окна: высота по содержимому, равные зазоры со всех сторон,
   контент по центру (правка Mike) */
body.в-окне { height: auto; display: block; overflow: visible; }
body.в-окне .layout { height: auto; display: block; }
body.в-окне .content {
  height: auto; overflow: visible; padding: 18px;
}
/* профиль/окно персонажа: кукла + характеристики по ширине содержимого,
   flex-ряд вместо grid-колонок 25%|15%|auto — иначе в узком окне кукла
   наезжала на характеристики (правка Mike). Сдвиг --С и позиционирование
   инвентарной страницы сброшены */
body.в-окне .char-layout {
  display: flex; justify-content: center; gap: 18px;
  position: static; left: 0; width: auto; margin: 0;
}
body.в-окне .char-left, body.в-окне .char-mid { flex: 0 0 auto; }
body.в-окне .hint { text-align: center; }
.модал-шапка {
  display: flex; justify-content: space-between; align-items: center;
  background: #3b3b3b; color: #e8e8e8; font-size: var(--к-мелко);
  padding: 4px 8px; letter-spacing: 1px;
}
.модал-закрыть { cursor: pointer; padding: 0 4px; color: #ffcc66; }
.модал-закрыть:hover { color: var(--лист-поле); }
.модал-рама { border: 0; width: 100%; background: var(--лист-поле); }

.chat-menu {
  position: fixed; z-index: 50; background: var(--лист); border: 1px solid var(--лист-кромка);
  box-shadow: 2px 2px 4px rgba(0,0,0,.25); font-size: var(--к-мелко); display: none;
}
/* меню по ПКМ в языке игры (Mike 2026-07-25): имя бойца в шапке, мишени
   под палец и мышь, пункты с глифом */
.chat-menu { min-width: 168px; border-radius: var(--р-лист);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.chat-menu .меню-шап { padding: 6px 10px; background: var(--лист);
  border-bottom: 1px solid var(--лист-кромка); font-weight: bold;
  font-size: var(--к-база); cursor: default; }
.chat-menu div { display: flex; align-items: center; gap: var(--ш2);
  padding: 8px 10px; cursor: pointer; }
.chat-menu div:hover:not(.меню-шап) { background: var(--действие-навод); }
.chat-menu .глиф { width: 14px; text-align: center; color: var(--тихо); }
.chat .msg { padding: 1px 0; }
/* логины в чате обычные (синие); красный — только у обращающегося в приват */
.chat .msg .nick { color: #295fa6; font-weight: bold; }
.chat .msg .nick.private { color: #cc0000; }
/* Системные строки без канцелярии (Mike 2026-07-25): было
   «Системное сообщение → [Ник] приватно: …» — 40 служебных знаков перед
   смыслом, и самое красное пятно ленты принадлежало роботу. Стало:
   время · ✦ · суть, приглушённым; красное осталось живым приватам. */
.chat .msg.системная { color: #6b675c; }
.chat .msg.системная .знак { color: #a08b57; }
.chat .msg.системная b { color: #3f6b3f; font-weight: bold; }

/* боевой лог: зон-графика вместо «Бой», цветные слова-эффекты, урон крупнее
   и голубоватый (решение Mike 2026-07-20) */
.chat .msg.боевая { padding: 4px 0; }   /* больше воздуха между строками лога */
/* раздел между разменами (правка Mike): линия + больший отступ, чтобы удары
   одного размена читались группой */
.chat .размен-раздел, .watch-лог .размен-раздел {
  border-top: 1px solid #cdbfa2; margin: 9px 10px 5px;
}
/* два столбика точек «удар | блок» (правка Mike): монохром, без цвета —
   левый столбик = куда удар, правый = где блок; залитая точка = отмечено */
.боевая .zone-graf {
  display: inline-flex; gap: 2px; vertical-align: middle; margin: 0 4px;
}
.боевая .zone-col { display: inline-flex; flex-direction: column; gap: 1.5px; }
.боевая .zone-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #c1b391;                    /* пустая зона — плотный тан, чётче */
}
/* отмеченная зона — полная заливка чёрным (правка Mike) */
.боевая .zone-dot.on { background: #111; }
.боевая .бой-имя { font-weight: bold; color: #333; }
.боевая .бой-цель { font-weight: bold; color: #666; }   /* по кому удар */
.боевая .бой-hp { color: var(--тише-лист); }
.боевая .dmg { color: #4a86c5; font-size: 1.18em; }
/* крит: цифра урона багровая, в цвет слова «кританул» (Mike 2026-07-24) */
.боевая .dmg.dmg-crit { color: #c0392b; }
/* лог в окне зрителя (вне .chat) — те же отступы, что в чат-логе боя
   (правка Mike 2026-07-21) */
.watch-лог .msg { padding: 1px 0; }
.watch-лог .msg.боевая { padding: 4px 0; }
/* системные строки (вступил в поединок) — под текст боевых, ровно */
.watch-лог .msg.сис { padding-left: 20px; color: #777; }
/* только слова-значения окрашены, остальной текст — как обычно */
.eff-pierce { color: #b9770e; }   /* пробой брони — янтарный */
.eff-dodge  { color: #2e8b57; }   /* уворот — зелёный */
.eff-crit   { color: #c0392b; }   /* крит/контр — багровый */
.eff-block  { color: #5a6f8a; }   /* блок — сталь */
/* строка ввода: поле и «»» одной высоты и по одной линии. Кнопка съезжала
   вниз из-за глобального `button { margin-top: auto }` (он нужен карточкам,
   где кнопка прижимается к низу) — здесь его гасим (правка Mike 2026-07-25) */
.chat .input-row { display: flex; gap: 5px; margin-top: 5px; align-items: stretch;
  position: relative; }

/* ── чат-бар по скрину БК (Mike 2026-08-01): время · выход · друзья ·
   почта · инвентарь · смайлы, справа от строки ввода ── */
.чат-бар { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.чат-бар .чат-кн {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 100%; padding: 0 6px; box-sizing: border-box;
  background: var(--кнопка); color: var(--золото);
  border: 1px solid var(--кромка); cursor: pointer;
  font-size: 15px; line-height: 1; text-decoration: none; position: relative;
}
.чат-бар .чат-кн:hover { background: var(--кнопка-навод); }
.чат-бар .чат-выход { display: flex; }
/* БК-ЧАСЫ-ТАБЛО (скрин Mike 2026-08-02) в цветах концепта:
   тёмный камень, золотые цифры, багровая плашка-подпись, золотой кант */
.бк-часы { margin-left: auto; align-self: stretch; display: inline-flex;
  margin-right: 2px; border: 1px solid #8a6d3b; border-radius: 3px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.бк-табло { display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(var(--камень-низ), #2e2c27);
  padding: 0 6px 0 8px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.6); }
.бк-табло .чат-часы { font-size: 18px; line-height: 1;
  color: var(--золото); font-weight: 700; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 5px rgba(255,217,138,.35); }
.бк-табло i { font-style: normal; font-size: 9px; line-height: 1;
  color: var(--золото); opacity: .75; align-self: flex-start;
  margin-top: 4px; font-variant-numeric: tabular-nums; }
.почта-бейдж {
  position: absolute; top: -6px; right: -5px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--багровый, #a33); color: #fff;
  font-size: 10px; line-height: 15px; padding: 0 3px; font-style: normal;
}
.смайл-панель {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 4px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 2px; max-width: 300px;
  /* авторский display перебивает UA-правило атрибута hidden — без этой
     строки панель не сворачивалась вовсе (Mike 2026-08-01) */
  background: var(--лист); border: 1px solid var(--кромка);
  border-radius: var(--р-лист); padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.смайл-панель button {
  min-width: 30px; height: 30px; padding: 0; font-size: 17px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
}
.смайл-панель button:hover { border-color: var(--кромка); background: var(--кнопка); }
.смайл-панель[hidden] { display: none; }

/* ── окна друзей и почты ── */
.друзья-добавить { display: flex; gap: 6px; margin-top: 6px; }
.друзья-добавить input { flex: 1; }
.друзья-список { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.друзья-строка {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-bottom: 1px dotted var(--кромка);
}
.друзья-сеть { color: #999; font-size: 11px; }
.друзья-сеть.в-сети { color: #2e7d32; }
.друзья-ник { cursor: pointer; color: var(--ссылка, #22c); font-weight: 600; }
.друзья-действия { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.почта-письмо { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.почта-кому { display: flex; gap: 6px; }
.почта-кому input { flex: 1; }
.почта-входящие { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.почта-строка { border: 1px solid var(--кромка); border-radius: var(--р-лист);
  padding: 6px 8px; }
.почта-строка.непрочитано { border-color: var(--кромка-золото, #b90); }
.почта-шап { display: flex; gap: 8px; align-items: baseline; }
.почта-от { cursor: pointer; color: var(--ссылка, #22c); font-weight: 600; }
.почта-ответ { margin-left: auto; }
.почта-текст { margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.chat .input-row button {
  margin-top: 0; flex-shrink: 0; min-width: 40px;
  padding: 0 14px; font-size: var(--к-знач); line-height: 1;
  background: var(--кнопка); color: var(--золото); border: 1px solid var(--кромка);
  border-radius: var(--р-действие); box-shadow: 0 1px 2px rgba(0, 0, 0, .35),
                                 inset 0 1px 0 rgba(255, 255, 255, .10);
}
.chat .input-row button:hover:not(:disabled) { background: var(--кнопка-навод); }
.chat input[type=text] {
  /* возврат к прежнему виду (Mike 2026-08-02: «верни строку обратно») */
  flex: 1; background: var(--лист-поле); border: 1px solid #7f9db9; color: #000;
  font: 12px Verdana, sans-serif; padding: 4px 7px; border-radius: var(--р-действие);
  min-height: 26px; box-sizing: border-box;
}
.chat .soon { color: var(--тише-лист); }
/* вкладки чата: лёгкая теневая окантовка; ряд живёт СЛЕВА в шапке чата
   (концепт Mike 2026-07-25 — прежний прижим «вправо до зоны онлайна
   с зазором 10%» ронял вкладки в случайное место экрана) */
/* каналы = вкладки меты (правка Mike 2026-07-25): одни и те же кнопки на
   камне сверху и снизу, активная светится листом */
.chat .chat-tabs-row { display: flex; gap: 4px; align-items: center; }
.chat .chat-tab {
  position: relative; cursor: pointer; color: var(--текст); font-size: var(--к-база);
  background: var(--кнопка); padding: 4px 12px; border-radius: var(--р-действие);
  border: 1px solid var(--кромка);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .10);
  white-space: nowrap;
}
.chat .chat-tab:hover { background: var(--кнопка-навод); color: var(--золото); }
.chat .chat-tab.active {
  color: #1f1f1f; background: var(--лист-поле); font-weight: bold;
  border-color: var(--кромка-золото);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--лист-поле);
}
.chat .chat-tab.active:hover { color: #1f1f1f; }
/* неактивная вкладка (вне боя): видна, но не кликается */
.chat .chat-tab.выкл { color: var(--тихо); cursor: default; opacity: .6;
                       box-shadow: none; }
.chat .chat-tab.выкл:hover { background: var(--кнопка); color: var(--тихо); }
/* счётчик непрочитанного у канала (Mike 2026-07-25): при нуле исчезает
   совсем — пустой бейдж читается как «что-то есть» */
.chat .таб-счёт {
  display: none; position: absolute; top: -6px; right: -6px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: #c0392b; color: #fff; font: bold 9px/13px Verdana;
  text-align: center; border-radius: var(--р-метка); box-shadow: 0 0 0 1px #24231f;
}
.chat .chat-tab.есть .таб-счёт { display: inline-block; }
.chat .msg .nick { text-decoration: none; }
.chat .msg .nick:hover { text-decoration: underline; }

h1 { font-size: var(--к-акцент); color: #7a1010; letter-spacing: 1px; margin: 0 0 12px; font-weight: bold; }
h2 { font-size: var(--к-база); color: #444; font-weight: bold; text-transform: uppercase; margin: 14px 0 6px; }
/* флейвор-цитаты и анонсы — без рамки, на общем фоне, с лёгкой жирностью
   (правка Mike 2026-07-21): единый вид на всех страницах */
.death {
  color: #555; font-style: italic; font-weight: 600;
  padding: 4px 0; margin: 8px 0;
}
/* общий стиль окошек (решение Mike 2026-07-21): скругление 4px, как у
   вкладок, карточек инвентаря и тултипов — на всех рамочных панелях */
.fighter, .panel, .death, .chat-menu,
input[type=text], input[type=password], select, textarea {
  border-radius: var(--р-лист);
}
.модал { border-radius: var(--р-лист); overflow: hidden; }

/* Меню лобби */
.menu { list-style: none; padding: 0; margin: 0; }
.menu li { padding: 6px 2px; border-bottom: 1px solid #d0d0d0; }
.menu .soon { color: var(--тише-лист); }

/* Панели и «бойцовские» карточки */
.arena { display: flex; gap: 10px; flex-wrap: wrap; }
/* ПАНЕЛЬ — роль «Лист» по дизайн-системе (правка Mike 2026-07-27: «сравни
   умения с фонами вещей в инвентаре, надо в общий дизайн»).
   Было: фон `--лист-поле` (тон АКТИВНОГО элемента и поля ввода) и жёсткая
   рамка #9a9a9a — а она в системе закреплена за ГНЁЗДАМИ, ёмкостями под вещь
   (ячейка куклы, арт вещи). Панель — не гнездо и не активный элемент, она
   контейнер, значит тот же лист, что у карточки вещи в инвентаре: мягкая
   кромка, радиус листа, без тени. Теперь «Развитие» и «Снаряжение» — одна
   бумага, а не две разные. */
.fighter {
  flex: 1; min-width: 280px; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист);
  padding: 8px 10px;
}
/* СТУПЕНЬ ВЕЩИ римской цифрой (решение Mike 2026-07-28): I…IV перед именем.
   Цвет тот же, что у камня этой ступени в ковке, — лестница читается одним
   языком в лавке, в мешке и у наковальни */
.тир-метка { display: inline-block; min-width: 20px; margin-right: 5px;
  padding: 0 4px; border-radius: var(--р-метка); font-size: var(--к-бейдж);
  font-weight: bold; text-align: center; vertical-align: 1px;
  color: #fff; background: #9a9a92; }
/* на КАРТОЧКАХ метка стоит после названия (Mike 2026-08-03) — отступ
   переезжает налево; в списке Библиотеки она осталась спереди */
.iname-big .тир-метка, .item-tip-name .тир-метка,
.биб-карточка-имя .тир-метка, h1 .тир-метка,
/* панели слотов этажа — тот же отступ, что в тултипе (эталон Mike
   2026-08-03: «везде одинаковый») */
.слот-меню-имя .тир-метка { margin: 0 0 0 6px; }
/* переключатель порядка витрины — тихие ссылки в строке заголовка группы */
.рынок-порядок { float: right; font-weight: normal; text-transform: none;
  letter-spacing: 0; font-size: var(--к-мелко); }
.рынок-порядок a { color: var(--тихо-лист); margin-left: 10px; text-decoration: none; }
.рынок-порядок a:hover { color: #333; text-decoration: underline; }
.рынок-порядок a.акт { color: #8d1414; font-weight: bold; }
/* отбор витрины — чипы ступеней и уровней (Mike 2026-07-28).
   clear: both обязателен — строка порядка над ним плавает вправо (float),
   без него флоат режет ширину ряда и чипы встают столбиком */
.рынок-отбор { clear: both; display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px; margin: 0 0 8px; font-size: var(--к-мелко); }
.рынок-отбор .лбл { color: #888; text-transform: uppercase;
  font-size: var(--к-метка); letter-spacing: .04em; margin-left: 6px; }
.рынок-отбор .лбл:first-child { margin-left: 0; }
.рынок-отбор .чип { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border: 1px solid var(--лист-кромка); background: var(--лист);
  color: #555; text-decoration: none; border-radius: 2px; }
.рынок-отбор .чип i { font-style: normal; color: #999; font-size: var(--к-метка); }
.рынок-отбор .чип:hover { border-color: #999; color: #222; }
.рынок-отбор .чип.вкл { background: #8d1414; border-color: #8d1414; color: #fff;
  font-weight: bold; }
.рынок-отбор .чип.вкл i { color: #f0c9c9; }
.рынок-отбор .чип.сброс { border-style: dashed; color: #888; }
/* ордера на выкуп (Mike 2026-07-28): плашка первой строкой над витриной */
.ордер-плашка { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 12px; margin: 0 0 10px;
  padding: 7px 10px; background: var(--лист); border: 1px solid var(--лист-кромка);
  border-left: 3px solid #8d1414; }
.ордер-плашка.пусто { border-left-color: var(--лист-кромка); }
.ор-суть b { font-size: var(--к-знач); }
.ор-числа { color: #666; font-size: var(--к-мелко); margin-left: 8px; }
.ор-кнопки { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ор-кнопки form { margin: 0; }
.ор-что { color: #888; font-size: var(--к-метка); }
.ор-ссылка { font-size: var(--к-мелко); }
.ордер-форма { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding: 7px 10px; background: var(--лист);
  border: 1px dashed var(--лист-кромка); }
.ордер-мини { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.ордер-мини .lbl { font-size: var(--к-мелко); }
.ордер-строка .item-info form { margin-top: 5px; }
/* постраничная навигация — 25 карточек на страницу (Mike 2026-07-28) */
.страницы { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 10px 0 4px; font-size: var(--к-мелко); }
.страницы .стр-счёт { color: #888; margin-right: 6px; }
.страницы a, .страницы .стр-тек, .страницы .стр-нет {
  min-width: 26px; padding: 3px 7px; text-align: center;
  border: 1px solid var(--лист-кромка); background: var(--лист);
  color: #555; text-decoration: none; border-radius: 2px; }
.страницы a:hover { border-color: #999; color: #222; }
.страницы .стр-тек { background: #8d1414; border-color: #8d1414; color: #fff;
  font-weight: bold; }
.страницы .стр-нет { color: #c3c3c3; }
.страницы .стр-разрыв { color: #999; padding: 0 2px; border: none;
  background: none; min-width: 0; }
/* строка продажи: своя цена и мгновенный выкуп рядом */
.продажа-строка { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; margin-top: 4px; }
.продажа-строка form { display: flex; align-items: center; gap: 5px; margin: 0; }
.продажа-строка .lbl { font-size: var(--к-база); color: var(--тише-лист); }
.продажа-строка .сейчас { background: #8d1414; border-color: #8d1414; color: #fff; }
.продажа-строка .hint { font-size: var(--к-мелко); }
.тир-метка.тир-2 { background: #4e8f4e; }
.тир-метка.тир-3 { background: #3f6ea8; }
.тир-метка.тир-4 { background: #8d1414; }
.fname { font-weight: bold; font-size: var(--к-знач); }
.fweap { color: #555; }
.fstat { color: #777; font-size: var(--к-мелко); }
.panel {
  display: flex; gap: 18px; flex-wrap: wrap; background: var(--лист);
  border: 1px solid var(--лист-кромка); padding: 8px 10px; margin: 10px 0;
}
.col { display: flex; flex-direction: column; gap: 2px; }
.cap { color: #666; font-weight: bold; font-size: var(--к-метка); text-transform: uppercase; margin-bottom: 3px; }
label { cursor: pointer; }

/* Кнопки: спокойные, в тон фона, без ретро-объёма — формат кнопки «Удар!»
   на весь проект, чуть ниже и с поджатым текстом (решение Mike) */
/* кнопки: без рамки — мягкий теневой ореол, уходящий в фон
   (правка Mike 2026-07-20) */
/* ДЕЙСТВИЕ (дизайн-система): рамка вместо теневого ореола — ореол давал
   «мыло» и не читался как край кнопки; радиус общий с вкладками и чипами */
button {
  background: var(--действие-фон); color: #3b382f; font: 11px/1.2 Verdana, sans-serif;
  border: 1px solid var(--действие-кромка); border-radius: var(--р-действие);
  padding: 3px 13px; cursor: pointer; margin-top: auto;
}
button:hover:not(:disabled) { background: var(--действие-навод); border-color: #b3ab97; }
button:active { background: var(--действие-нажат); }
button:disabled { color: #a09a8c; cursor: default; background: var(--действие-выкл);
                  border-color: var(--действие-нажат); }
/* распределение статов: визуально только «+» на общем фоне (решение Mike) */
.plusbtn {
  background: none; border: none; padding: 0 4px; margin: 0;
  font: bold 13px Verdana, sans-serif; color: #295fa6; line-height: 1;
  box-shadow: none;
}
.plusbtn:active { border: none; background: none; }
button.plusbtn:hover { color: #cc0000; background: none; }
/* выброс вещи: неброская текстовая кнопка, красная при наведении */
.dropbtn {
  background: none; border: none; padding: 0; margin: 0;
  font-size: var(--к-метка); color: #888; text-decoration: underline;
  box-shadow: none;
}
.dropbtn:active { border: none; background: none; }
/* «выбросить» — текст, а не кнопка: гасим и общий теневой ореол неактивной
   кнопки (на телефоне, где мишень 38px, он рисовал вокруг слова рамку) */
.dropbtn:disabled { box-shadow: none; }
button.dropbtn:hover { color: #cc0000; background: none; }
/* выбранные радио/чекбоксы — тёмные, не ярко-синие (решение Mike) */
input[type=radio], input[type=checkbox] { accent-color: #4f545c; }
input[type=text], input[type=password] {
  background: var(--лист-поле); border: 1px solid #7f9db9; color: #000;
  font: 12px Verdana, sans-serif; padding: 3px 6px;
}

/* «Кукла» персонажа как в БК: колонки слотов по бокам, фигура в центре.
   Пропорции (решение Mike, 2026-07-18, финальные): фигура не меняется,
   её высота H делится на 10 частей:
   лево  = шлем 2 + наручи 1 + оружие 2 + броня 3 + пояс 1 (= 9)
           + 1 часть на 4 отступа (по 0.025H) → ровно H;
   право = амулет 1 + кольца 0.5 (квадраты) + перчатки 1 + оружие2/щит 2
           + поножи 3 + ботинки 1.5 (= 9) + 1 часть на 5 отступов (0.02H) → H.
   Ширина колонок — от ряда колец: 3×0.05H + 2×0.02H = 0.19H, одна для всех. */
.doll { --кукла-h: calc(var(--портрет) * 2);
        /* ВЫСОТА колонок теперь РОВНО по фигуре (правка Mike 2026-07-26):
           прежде ячейки были на 10 % длиннее, и пока колонки стояли врозь,
           свес снизу не мешал. В единой рамке он ломает «подложку», на
           которой стоит персонаж. Ширину ячеек сохраняем прежнюю —
           множитель 1.1 переехал из высоты в долю ширины (0.17 → 0.187) */
        --ячейка-h: var(--кукла-h);
        --доля-ширины: 0.187;
        --фигура-w: var(--портрет);       /* ширина колонки фигуры */
        /* ВПЛОТНУЮ (правка Mike 2026-07-26, по эталону БК): между колонками
           и фигурой зазоров нет, весь блок — одна выпуклая подложка с рамкой,
           «персонаж стоит на подложке» */
        display: flex; gap: 0;
        /* stretch, а не flex-start (правка Mike 2026-07-26): у фигуры была
           жёсткая высота --кукла-h, а колонки ячеек короче ровно на схлопнутые
           рамки (4–5 px) — снизу торчала чёрная полоса. Теперь высоту задаёт
           самая длинная колонка, а фигура под неё подстраивается */
        align-items: stretch;
        /* ПОДЛОЖКА (эталон БК, правка Mike 2026-07-26): рамка идёт почти
           вплотную к ячейкам — было 3 px светлой полосы вокруг, стало 1 px.
           Тени как у выступающей панели: снаружи тёмный контур, внутри
           светлая фаска сверху-слева и тёмная снизу-справа, под всем блоком
           собственная тень. Фаски ЖЁСТКИЕ (0 размытия) — как у ячеек */
        padding: 1px; background: linear-gradient(#fbf8f1, #e4ded0);
        /* РАМКА РАЗНАЯ ПО СТОРОНАМ (эталон БК, правка Mike 2026-07-26):
           СВЕТЛАЯ сверху и слева, тёмная справа и снизу — так панель ловит
           свет и выступает. Тёмный контур со всех сторон, как было, читался
           плоской обводкой, а не объёмом */
        border: 1px solid;
        border-color: #fffefb #4a453a #4a453a #fffefb;
        box-shadow: inset -1px -1px 0 rgba(108, 98, 76, .35),
                    0 3px 5px rgba(52, 44, 30, .34);
        /* ЯВНАЯ ширина куклы по долям (правка Mike, Safari): 2 колонки ячеек
           + фигура + 2 зазора. Раньше ширину брали из min-content вложенного
           флекса — Safari его схлопывал, вёрстка боя «плыла» */
        /* ширина считается ТОЧНО (правка Mike 2026-07-26): две колонки +
           фигура, ужатая своими отрицательными полями (−2 px), + padding 2 +
           border 2. Раньше стояло +4 px, и лишние два пикселя копились у
           правого края — кромка выходила 2/2/2/4. justify-content — страховка
           от дробных остатков при масштабировании */
        justify-content: center;
        width: calc(2 * (var(--ячейка-h) * var(--доля-ширины))
                    + var(--фигура-w) + 6px); }
/* вертикальные зазоры ещё вдвое меньше (решение Mike): лево 0.00625H,
   право 0.005H; между кольцами по горизонтали остаётся 0.01H, чтобы
   визуально не сбить; ширина колонок = 3×0.05H + 2×0.01H = 0.17H */
.slotcol { display: flex; flex-direction: column; flex: 0 0 auto;
           width: calc(var(--ячейка-h) * var(--доля-ширины)); }
/* зазоров между ячейками нет: соседние рамки схлопываются отрицательным
   полем, как border-collapse у таблицы — иначе на стыке было бы 2 px линии */
.slotcol { gap: 0; }
/* ВОЛОС ПОДЛОЖКИ между ячейками (решение Mike 2026-07-27). Раньше рамки
   схлопывались отрицательным полем в одну линию — но у занятых вещей фаска
   светлая сверху-слева, и чёрный НИЗ верхней вещи ложился поверх белого
   ВЕРХА нижней: фаска оставалась только у самой верхней ячейки, у остальных
   её съедал сосед. Пиксель подложки разводит рамки — у каждой вещи своя
   полная окантовка, перекрашивать нечему.
   Селектор строго по ПРЯМЫМ детям: без «>» правило цепляло кольца внутри
   ряда, и они уезжали на пиксель (баг Mike 2026-07-26). */
.slotcol > .slot + .slot, .slotcol > .slotrow + .slot,
.slotcol > .slot + .slotrow { margin-top: 1px; }
.slotrow { display: flex; gap: 1px; }
.slotrow .slot {
  /* три кольца в ряд занимают ширину колонки. Доля поднята 0.06 → 0.08:
     при 0.06 ячейка была 14 px, а значок кольца — 13×12, и с полями он
     ОБРЕЗАЛСЯ (замер Mike 2026-07-26). Поля убраны, значок центрован */
  /* КВАДРАТНАЯ ячейка (правка Mike 2026-07-27): при 0.08 она была 15x19, а
     арт кольца вписывался квадратом 15x15 и центрировался — снизу оставалось
     пустое поле, кольцо не доходило до рамки. Доля 0.06 даёт ~14x14, и
     картинка заполняет ячейку целиком. Два сотых переданы сапогам, колонка
     по-прежнему даёт ровно 1.000 */
  flex: 1 1 0; width: auto;
  height: calc(var(--ячейка-h) * 0.06); padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.slotrow .slot .slot-ghost-icon { font-size: var(--к-метка); line-height: 1; }
.slot {
  /* ГНЕЗДО (дизайн-система): острый угол + вдавленность — читается
     как ёмкость, куда кладут вещь, а не как плитка */
  /* ПУСТАЯ ячейка — БЕЛЫЙ контур (эталон БК: «открытые зоны с белым
     бордером»), внутри ниша: тень сверху-слева, свет снизу-справа */
  border: 1px solid #fdfdfa;
  background: linear-gradient(#e9e3d5, var(--лист) 55%, #fbf8f1);
  border-radius: var(--р-гнездо); box-shadow: var(--вдавленность);
  padding: 2px 6px; font-size: var(--к-мелко); position: relative; overflow: hidden;
}
/* клетка, куда пойдёшь по окончании перезарядки (очередь шага, Mike
   2026-07-26): пунктир и лёгкое свечение — видно намерение, но не спутать
   с тем, где стоишь сейчас */
.эт-кл.в-очереди {
  outline: 2px dashed #b8860b; outline-offset: -3px;
  box-shadow: inset 0 0 12px rgba(184, 134, 11, .45);
}
#шаг-очередь { display: block; color: #8a6d1f; font-size: var(--к-бейдж);
  line-height: 1.2; overflow-wrap: anywhere; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* ячейка С ВЕЩЬЮ выступает, пустая остаётся нишей (решение Mike 2026-07-26) */
.slot:has(.slot-art) {
  /* РАЗБОР ЭТАЛОНА (Mike 2026-07-26): в БК у ячейки с вещью ЧИСТЫЙ чёрный
     контур, а объём идёт от самого арта — запечённые блик и тень. У нас
     поверх чёрной рамки лежала ещё белая фаска изнутри, и на стыках линия
     светлела, будто ячейки разделены. Фаску снимаем, оставляем контур и
     мягкую тень под плиткой. */
  box-shadow: var(--занятое-тень);
  background: var(--занятое-фон);
  /* ЧЁРНАЯ рамка у занятой ячейки (эталон БК, правка Mike 2026-07-26):
     жёсткая линия по контуру + светлая фаска внутри дают объём, а пустые
     ячейки со светлой кромкой рядом читаются как открытые гнёзда */
  /* СВЕТЛО СВЕРХУ-СЛЕВА, ТЕМНО СПРАВА-СНИЗУ (правка Mike 2026-07-27) — та же
     фаска, что у подложки: плитка ловит свет сверху. Раньше кромка была
     чёрной по кругу и спорила со светлой фаской на открытых сторонах */
  border-color: #fdfdfa var(--занятое-кромка) var(--занятое-кромка) #fdfdfa;
  z-index: 1;                 /* линия поверх кромки соседа */
}
/* арт ВПЛОТНУЮ к чёрной кромке (правка Mike 2026-07-26): отступ в пиксель
   оставлял светлую полоску снизу — «нижний пиксель до окантовки» */
.slot:has(.slot-art) .slot-art { inset: 0; width: 100%; height: 100%; }
/* ПЕРЧАТКИ САДЯТСЯ НА НИЗ ГНЕЗДА (замер Mike 2026-07-29). Гнездо перчаток
   1.44:1, а их арт 1.71:1 — картинка упирается в ширину, и сверху со снизу
   остаётся по 5.6 % пустоты. Ужать гнездо нельзя: над щитом ровно 0.33
   высоты, иначе руки встанут на разной горизонтали. Поэтому пустоту сгоняем
   наверх — перчатки лежат на нижней кромке, как и положено кистям */
.slot-перчатки .slot-art { object-position: bottom; }
/* АМУЛЕТ И СЕРЬГИ — АРТ ВРАСТЯЖКУ С ОБРЕЗКОЙ СВОЕГО ПОЛЯ (Mike 2026-07-29:
   «картинка не доходит до краёв — поправь, как другие смотрятся чётко»).
   Беда в самой картинке: лента 768×288 несёт запечённое поле 7 % по бокам и
   17 % сверху-снизу, а гнездо совпадает с ней по пропорции до сотых — потому
   contain в любом виде удваивает поля, и амулет плавал посреди пустоты.
   Раздуваем арт на 10 % за кромку (гнездо режет лишнее overflow'ом): поле
   картинки срезается, до шнура остаётся ~3 px по бокам и ~5 сверху-снизу —
   как у колец и перчаток. Мерить только по рендеру (canvas в размер гнезда):
   расчёт по долям исходного PNG врёт втрое. */
.slot-амулет:has(.slot-art) .slot-art,
.slot-серьги:has(.slot-art) .slot-art { left: -5%; top: -5%; right: auto; bottom: auto;
  width: 110%; height: 110%; }
/* СВЕТЛАЯ ФАСКА там, где сторона НЕ прикрыта соседней вещью (правило Mike
   по эталону: «слева или сверху»). После появления волоса у фигуры левый
   край открыт у ОБЕИХ колонок — у левой он смотрит на край подложки, у
   правой на этот самый волос. Верх открыт у первой ячейки колонки */
/* внутренняя фаска снята: светлую сторону теперь рисует сама рамка
   (правка Mike 2026-07-27), два светлых слоя подряд давали толстый кант */
.slotcol > .slot:has(.slot-art) { box-shadow: var(--занятое-тень); }
/* ДОЛИ ПЕРЕСЧИТАНЫ (правка Mike 2026-07-26): каждая колонка обязана дать
   РОВНО высоту фигуры, иначе внизу остаётся хвост и «вплотную» не выходит.
   Было 0.90 + зазоры = 0.925 H у обеих. Стало ровно 1.000:
     левая:  0.22 шлем + 0.11 наручи + 0.22 оружие + 0.33 торс + 0.12 пояс
     правая: 0.07 серьги + 0.07 амулет + 0.06 кольца + 0.13 перчатки
             + 0.22 щит + 0.28 поножи + 0.17 сапоги
   ЩИТ ВРОВЕНЬ С ОРУЖИЕМ (решение Mike 2026-07-27): над щитом набирается
   0.07+0.07+0.06+0.13 = 0.33 — ровно столько же, сколько шлем+наручи слева,
   поэтому обе «руки» начинаются на одной горизонтали. Зона над кольцами
   поделена поровну между амулетом и новыми серьгами; перчаткам добавлено за
   их счёт (правка Mike 2026-07-27) — 0.33 неприкосновенны, иначе щит уедет.
   Пропорции сохранены: торс и поножи самые высокие, наручи и пояс мелкие. */
.slot-шлем    { height: calc(var(--ячейка-h) * 0.22); }
.slot-наручи  { height: calc(var(--ячейка-h) * 0.11); }
.slot-оружие  { height: calc(var(--ячейка-h) * 0.22); }
.slot-торс    { height: calc(var(--ячейка-h) * 0.33); }
.slot-пояс    { height: calc(var(--ячейка-h) * 0.12); }
.slot-амулет  { height: calc(var(--ячейка-h) * 0.07); }
.slot-серьги  { height: calc(var(--ячейка-h) * 0.07); }
/* −2 px: над щитом ЧЕТЫРЕ волоса между ячейками (серьги, амулет, кольца,
   перчатки), а над оружием слева только ДВА — без поправки щит вставал на
   два пикселя ниже. Эти же 2 px возвращены сапогам, чтобы колонка осталась
   прежней высоты (правка Mike 2026-07-27) */
.slot-перчатки{ height: calc(var(--ячейка-h) * 0.13 - 2px); }
.slot-щит     { height: calc(var(--ячейка-h) * 0.22); }
.slot-поножи  { height: calc(var(--ячейка-h) * 0.28); }
.slot-сапоги  { height: calc(var(--ячейка-h) * 0.17 + 2px); }
.slot .sname { color: var(--тише-лист); font-size: var(--к-бейдж); text-transform: uppercase; display: block; }
.slot .iname { color: #000; }
.slot .empty { color: #bbb; }
/* арт вещи в ячейке: вписан без искажений; multiply убирает белый фон
   сгенерированных картинок на любом светлом фоне */
/* вещь ВЫПУКЛАЯ в нише (правка Mike 2026-07-26): своя тень отрывает арт от
   дна ячейки. drop-shadow берётся ДО смешивания, так что multiply её только
   притемняет — на светлом фоне это ровно то, что нужно */
.slot .slot-art { position: absolute; inset: 2px; width: calc(100% - 4px);
                  height: calc(100% - 4px); object-fit: contain;
                  mix-blend-mode: multiply; filter: var(--выпуклость); }
.item-img .item-art { width: 100%; height: 100%; object-fit: contain;
                      mix-blend-mode: multiply; }
/* тень арта — ТОЛЬКО в карточке инвентаря. В общем правиле она задевала и
   вещи в Башне, которых вёрстка куклы касаться не должна была */
.item-pic .item-img .item-art { filter: var(--выпуклость); }
/* снятие вещи: вся ячейка — зона кнопки, без видимого крестика (решение Mike) */
.slot .takeoff { position: absolute; inset: 0; margin: 0; }
.slot .takeoff button {
  display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  background: none; border: none; cursor: pointer;
  box-shadow: none; border-radius: var(--р-гнездо);
}
.slot .takeoff button:hover { background: rgba(0, 0, 0, 0.06); }
.slot .takeoff button:active { border: none; }
/* колонка фигуры: шкала HP ровно по ширине фигуры, чуть выше неё —
   вне потока, чтобы фигура и ячейки шли вровень по верху (решение Mike) */
.figure-col { flex: 0 0 var(--фигура-w); display: flex; flex-direction: column;
              position: relative;
              /* ВОЛОС подложки по бокам фигуры (решение Mike 2026-07-26):
                 сперва колонку втягивали на пиксель, чтобы рамки схлопнулись
                 в одну линию, — но тогда у правой колонки левый край считался
                 закрытым и оставался без светлой фаски. Пиксель подложки
                 разделяет их: каждая ячейка получает свой контур и свою
                 фаску, а шва не возникает */
              margin: 0 1px; }
/* шкала HP — врезана в верхнюю кромку куклы, цифры ВНУТРИ полосы слева,
   имя по центру над куклой — как в БК (правка Mike 2026-07-21) */
/* шкала врезана в верх куклы; просвет даёт опущенный силуэт
   (правка Mike 2026-07-21, вторая итерация) */
/* шкала во ВСЮ ширину куклы (решение Mike 2026-07-26): раньше она отступала
   от ячеек, пока фигура была втянута в соседей. Теперь по бокам волос
   подложки, и шкала может занять всю ширину — ложится внутрь серого канта,
   чтобы окантовка осталась непрерывной */
.hpwrap { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px);
          z-index: 2; }
.hpwrap .hpnum { position: absolute; left: 5px; top: 0; line-height: 15px;
                 color: #fff; font-size: var(--к-метка);
                 text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
.hpwrap .hpname { position: absolute; left: 50%; bottom: calc(100% + 4px);
                  transform: translateX(-50%);
                  font: bold 11px Verdana, sans-serif; white-space: nowrap; }
.hpwrap .hpname .ур { color: #777; font-weight: normal; }
.figure {
  /* центральная кукла не меняется (решение Mike): высота H задаёт пропорции;
     фон — чёрная радиальная виньетка как в БК, силуэт Mike поверх */
  /* СЕРЫЙ КАНТ (эталон БК, решение Mike 2026-07-26): у куклы своя серебристая
     окантовка, а не чёрная как у ячеек — она и отделяет фигуру от вещей.
     Тёмным его делали, пока колонки стояли вплотную и светлый кант давал шов;
     с волосом подложки по бокам шва нет, и серый читается как в оригинале */
  border: 1px solid var(--гнездо-кромка);
  background: radial-gradient(ellipse at 50% 42%, #2c2c2c 0%, #101010 62%, #000 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; position: relative; overflow: hidden;
  /* высота — от колонки, а не своя: силуэт обрезается снизу (object-fit:
     cover), голова остаётся на месте */
  flex: 1 1 auto; min-height: 0;
}
.figure .silhouette { font-size: calc(var(--портрет) * 0.5); line-height: 1; }
/* силуэт-арт с встроенной виньеткой 1:2 — заполняет ячейку (cover) */
/* силуэт опущен под шкалу с просветом (правка Mike 2026-07-21) */
.figure .portrait { position: absolute; inset: 22px 0 0 0; width: 100%;
                    height: calc(100% - 22px); object-fit: cover; }
.figure .fname { font-size: var(--к-знач); }

/* Страница персонажа как в БК: кукла 1/4 | характеристики | инвентарь
   (доли — решение Mike), остаток пространства уходит в отступы между зонами;
   зона характеристик без фона и рамки */
/* средняя колонка не уже 190px — строки показателей («Мощность крита: ×2.10»)
   не переносятся (решение Mike) */
/* зоны как в БК на весь экран (решение Mike 2026-07-21, база 1920×1080):
   кукла ~20% · информация ~15% · инвентарь — всё остальное; чат внизу.
   Страница с куклой снимает потолок ширины и центрирующий сдвиг */
.content:has(.char-layout), .content:has(.перс-раскладка),
/* экран этажа Башни — тоже во весь экран (правка Mike 2026-08-03):
   планка HUD тянется от края до края, зона куклы стоит с тем же
   отступом от края, что и в инвентаре */
.content:has(.эт-hud) { max-width: none; --С: 0px; }
/* экран боя — тоже во весь экран: зоны 1/4·2/4·1/4 считаются от окна,
   не от потолка контента (правка Mike 2026-07-21, вторая итерация) */
.content:has(.duel-arena) { max-width: none; --С: 0px; }
/* кукла растёт с экраном (правка Mike 2026-07-21): портрет — от высоты
   окна до чата (глобальный потолок 182px мелчил зону на 1920×1080);
   вся геометрия куклы и ячеек тянется от --портрет. Только широкие
   экраны — на узких остаётся vw-масштаб; модалки не трогаем */
@media (min-width: 1001px) {
  body:not(.в-окне) .content:has(.char-layout),
  body:not(.в-окне) .content:has(.перс-раскладка),
  /* кукла этажа Башни — размером как в инвентаре (правка Mike 2026-08-03) */
  body:not(.в-окне) .content:has(.эт-hud) {
    /* −15% от первой версии (правка Mike: слишком крупно) */
    --портрет: clamp(150px, calc((100vh - 430px) * 0.425), 306px);
  }
  body:not(.в-окне) .content:has(.duel-arena) {
    /* экран боя — кукла инвентарного размера, но не шире своей зоны 1/4
       (правка Mike 2026-07-21, вторая итерация: кукла шире 25% ломала
       строку — соперник переносился вниз); ширина куклы с ячейками =
       портрет × 1.748 + 16px */
    --портрет: clamp(117px,
                     min(calc((100vh - 430px) * 0.425),
                         calc((25vw - 24px) / 1.748)),
                     306px);
  }
}
.char-layout { display: grid;
               /* пропорции Mike 2026-07-21: зона персонажа (кукла + инфо)
                  = 2/5 экрана, инвентарь = 3/5. Кукла по своей ширине,
                  инфо добирает остаток двух пятых */
               grid-template-columns: max-content 1fr 60%;
               /* stretch, а не start (примитив пары «кукла + числа», Mike
                  2026-07-27): колонки тянутся до общей высоты, низ ровный */
               gap: var(--сет-зазор); align-items: stretch;
               margin-top: 16px;      /* место имени над HP-шкалой */
               position: relative; left: var(--С, 0px); }
/* кукла по центру своей зоны — имя над шкалой (absolute влево) не
   вылетает за экран, и БК-пропорция дышит.
   ТОЛЬКО ПО ГОРИЗОНТАЛИ (правка Mike 2026-07-27): короткая запись `margin: 0
   auto` заодно обнуляла верхний резерв под подпись, и кукла вставала на 22 px
   выше соседней колонки чисел. Компоненту оставляем его отступы */
.char-layout > .char-left > div { margin-left: auto; margin-right: auto; }
/* узкие экраны: кукла и информация в ряд, инвентарь вниз на всю ширину;
   колонке куклы +28px — имя над шкалой не срезается краем экрана */
@media (max-width: 1000px) {
  .char-layout { grid-template-columns: var(--кукла-кол) 1fr; }
  .char-right { grid-column: 1 / -1; }
}
.char-left { min-width: 0; }
.char-mid { min-width: 0; }
.char-mid .fighter { min-width: 0; background: none; border: none; padding: 0; }
.req-bad { color: #cc0000 !important; }
/* свёртки секций в зоне персонажа (правка Mike 2026-07-20): заголовок
   кликабелен, маркер ▾/▸ показывает состояние */
.свёртка-шапка { cursor: pointer; user-select: none; }
.свёртка-шапка::before { content: '▾ '; color: var(--лист-кромка); }
.свёртка-шапка.закрыта::before { content: '▸ '; }
.свёртка-шапка:hover { color: #333; }
.char-right { min-width: 0; }
.char-right .log { max-height: 55vh; }
.effect-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--к-мелко); padding: 1px 0; border-bottom: 1px dotted #e8e4da;
}

/* Карточка вещи в инвентаре — как в БК: картинка слева с кнопкой под ней,
   справа имя и строки-атрибуты (09-интерфейс) */
.item-card {
  /* фон карточек чуть светлее общего фона страницы #e8e3d9 (решение Mike).
     ЛИСТ по дизайн-системе: мягкая рамка и радиус 2 — жёсткая рамка
     #9a9a9a осталась только у гнёзд (ячейки куклы, арт вещи) */
  display: flex; gap: var(--ш3); background: var(--лист);
  border: 1px solid var(--лист-кромка); padding: var(--ш2) var(--ш3);
  margin-bottom: 6px; border-radius: var(--р-лист);
  /* кнопка под картинкой не вылезает за рамку при коротком описании
     (правка Mike 2026-07-20): минимум — колонка картинки с кнопкой */
  min-height: calc(var(--икона) * 1.7 + 46px);
}
/* ЛЕВАЯ КОЛОНКА ФИКСИРОВАННОЙ ШИРИНЫ (правка Mike 2026-07-29): ячейки вещей
   разной ширины (квадрат расходника, лента амулета, кольцо) начинали текст
   карточки на разной глубине — списки читались рвано и в инвентаре
   («прочее»), и на рынке (ордера, предложения). Колонка берёт ширину самой
   широкой ячейки, узкие центруются — текст ВЕЗДЕ стартует с одной линии */
.item-pic { display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 0 0 auto;
  width: max(calc(var(--портрет) * 0.374), calc(var(--икона) * 1.7)); }
.item-img {
  width: calc(var(--икона) * 1.7); height: calc(var(--икона) * 1.7);
  /* окантовка вещей в карточках убрана (проба Mike 2026-07-20) */
  border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--икона) * 0.9);
}
/* ячейка карточки = ячейка куклы по размеру и виду (решение Mike):
   доли от высоты куклы 2.2×портрет, как в .slot-* */
/* МЯГКАЯ вдавленность (решение Mike 2026-07-27): этот селектор ловит и
   кнопки вещей в Башне, а переопределение --вдавленность делалось под куклу.
   Турниру возвращён прежний вид; куклу и карточки это не задевает — у них
   свои правила с большим весом */
[class*="яч-"] { border: 1px solid var(--гнездо-кромка); background: var(--лист);
                 border-radius: var(--р-гнездо);
                 box-shadow: var(--вдавленность-мягкая);
                 width: calc(var(--портрет) * 0.374); }
.яч-шлем, .яч-оружие, .яч-щит { height: calc(var(--портрет) * 0.44); }
.яч-торс { height: calc(var(--портрет) * 0.66); }
/* ПОНОЖИ — своя высота (Mike 2026-07-29): арт 512×768 шире, чем гнездо торса
   (512×896), и в общей ячейке штаны упирались в ширину, оставляя поля сверху
   и снизу. 0.56 портрета даёт ровно 2:3 картинки */
.яч-поножи { height: calc(var(--портрет) * 0.56); }
.яч-сапоги { height: calc(var(--портрет) * 0.33); }
.яч-наручи, .яч-пояс, .яч-перчатки { height: calc(var(--портрет) * 0.22); }
/* АМУЛЕТ И СЕРЬГИ — своя высота (Mike 2026-07-29): их арт нарисован широкой
   лентой 768×288, и в ячейке 1.7:1 цепочка висела ниткой посреди пустоты.
   0.14 портрета даёт те же 2.67:1, что у картинки, — вещь заполняет гнездо */
.яч-амулет, .яч-серьги { height: calc(var(--портрет) * 0.14); }
.яч-кольцо { width: calc(var(--портрет) * 0.11); height: calc(var(--портрет) * 0.11); }
/* кольцо в КАРТОЧКЕ крупнее ячейки куклы — эмодзи/арт не вылезает за рамку
   (правка Mike 2026-07-19); на кукле ячейка остаётся мелкой */
.item-pic .яч-кольцо { width: calc(var(--портрет) * 0.22);
                       height: calc(var(--портрет) * 0.22);
                       font-size: calc(var(--портрет) * 0.15); }
/* АМУЛЕТ И СЕРЬГИ в карточке — в ширину ОБЩЕЙ колонки (правка Mike
   2026-07-29, вторая): их растянутая до 0.55 портрета ячейка одна ломала
   ровную линию текста. Ширина как у всех (0.374), пропорция ленты 2.67:1
   сохранена высотой */
.item-pic .яч-амулет, .item-pic .яч-серьги {
  height: calc(var(--портрет) * 0.14); }
/* лут-кольцо: ячейка слота куклы (0.11) слишком мала — эмодзи 💍 (нет
   картинки кольца) плывёт из неё. Даём тот же размер, что в карточке,
   чтобы значок сидел в ячейке (правка Mike 2026-07-20) */
.loot-btn.яч-кольцо { width: calc(var(--портрет) * 0.22);
                      height: calc(var(--портрет) * 0.22);
                      font-size: calc(var(--портрет) * 0.15); }
/* Арт вещи в карточке — ТАКОЕ ЖЕ ГНЕЗДО, как ячейка на кукле (дизайн-система
   2026-07-25): одна и та же вещь выглядит одинаково в двух местах экрана,
   и взгляд достраивает «её можно переложить туда». Проба «без окантовки»
   (Mike 2026-07-20) этим отменяется — вернуть можно одной строкой */
/* картинка вещи в карточке ВСЕГДА занята — значит и выглядит как занятая
   ячейка куклы, а не как пустая ниша (замечание Mike 2026-07-26: «несуразно
   нарисованы бордеры»). Прежде тут стояла вдавленность и серая кромка */
.item-pic .item-img { border: 1px solid var(--занятое-кромка);
  background: var(--занятое-фон); box-shadow: var(--занятое-тень); }
/* эликсиры/свитки не носятся — квадрат прежнего размера в стиле ячейки */
.яч-иконка { width: calc(var(--икона) * 1.7); height: calc(var(--икона) * 1.7); }
/* надпись строго по центру кнопки (правка Mike 2026-07-20):
   на 5% уже ячейки, симметричные поля, без наследуемого margin-top */
.item-pic button { margin: 0; padding: 2px 0; width: calc(var(--икона) * 1.45);
                   text-align: center; line-height: 1.3; }
/* лут на этаже: вещь сама — кнопка подбора, без надписи «взять» (решение Mike);
   ячейка как в инвентаре, при перезарядке/бое — приглушена */
button.loot-btn { padding: 0; margin: 0; border: 1px solid #c5c5c5; }
button.loot-btn:active { border: 1px solid #c5c5c5; }
button.loot-btn:hover:not(:disabled) { background: #fffbe8; }
button.loot-btn:disabled { opacity: 0.45; }
/* лут в турнире — тултип общий (tip.js), как на куклах */
.loot-cell { display: flex; }

/* полная карта башни в окне (правка Mike): планировка + названия комнат
   + отметка себя 🧍; без позиций соперников и дропа */
.км-клетка {
  width: var(--км); height: var(--км);
  text-align: center; font-size: calc(var(--км) * 0.72); line-height: var(--км);
}
.км-стена { background: transparent; }
/* клетка с игроком — поверх подписей комнат: 🧍 не прячется под названием
   (правка Mike 2026-07-20) */
.км-я { position: relative; z-index: 2; }
.км-комната { background: #c9b271; }
.км-коридор { background: #8a8578; }
.км-тупик { background: #6e6353; }
.км-портал { background: var(--редкое); }
.карта-метка {
  position: absolute; transform: translate(-50%, -50%);
  font-size: var(--к-база); font-weight: bold; color: #2f2610; white-space: nowrap;
  background: rgba(255, 253, 247, 0.82); padding: 0 3px; border-radius: var(--р-лист);
  pointer-events: none;
}
/* общий тултип вещи (tip.js) — на куклах везде: поединки, окно персонажа,
   профиль; требования, которых не хватает смотрящему, — красным (Mike) */
.item-tip {
  position: fixed; z-index: 60; display: none; pointer-events: none;
  width: max-content; max-width: 240px;
  background: var(--лист-фон); border: 1px solid var(--лист-кромка); padding: 6px 10px;
  border-radius: var(--р-лист);     /* тултип — лист «над листом» */
  font-size: var(--к-мелко); line-height: 1.4; text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.item-tip .item-tip-name { font-weight: bold; margin-bottom: 3px; }
.item-tip .attr { margin: 2px 0; }
.item-tip .lbl { color: #777; }
/* секции тултипа построчно по референсу БК (Mike 2026-08-03): заголовки
   жирные тёмные с двоеточием, значения с буллетами, «что даётся» — жирным
   тёмным (синий читался как ссылка). Те же классы живут в панелях куклы
   этажа (.слот-меню) — вёрстка карточки одна на тултип и панель */
.item-tip .tip-разд, .слот-меню .tip-разд { color: var(--чернила);
  font-weight: bold; margin-top: 4px; }
.item-tip .tip-строка, .слот-меню .tip-строка { display: block; }
.item-tip .tip-строка::before,
.слот-меню .tip-строка::before { content: "• "; }
.item-tip .tip-строка b, .слот-меню .tip-строка b { color: inherit; }
.item-tip .item-tip-note { color: var(--хорошо); margin-top: 4px; font-size: var(--к-метка);
  /* многострочные заметки (статы бойца в бою, Mike 2026-07-21) */
  white-space: pre-line; }
/* плоский тултип статов/показателей (Mike 2026-07-21): серый, некрупный */
.item-tip.plain { font-size: var(--к-мелко); max-width: 260px; }
.item-tip.plain .item-tip-name { font-size: var(--к-мелко); }
.item-tip.plain .item-tip-note { color: #777; }
/* тултип-сравнение лута с надетым (Mike 2026-07-23): две колонки рядом —
   слева «В Башне», справа «Надето», тонкий разделитель между ними */
.item-tip.item-tip-cmp { max-width: none; display: flex; gap: 0; padding: 0; }
.item-tip-cmp .tip-кол { padding: 6px 10px; min-width: 120px; max-width: 190px; }
.item-tip-cmp .tip-кол + .tip-кол { border-left: 1px solid #c9c1ae; }
.item-tip-cmp .tip-кол-загол {
  color: #8a8a8a; font-size: var(--к-бейдж); text-transform: uppercase;
  letter-spacing: .5px; font-weight: bold; margin-bottom: 4px;
}
/* вертикальный разделитель между картинкой и описанием — как линия между
   характеристиками и боевыми показателями (правка Mike 2026-07-20) */
.item-info { flex: 1; font-size: var(--к-мелко);
             border-left: 1px solid #b9b9b9; padding-left: 14px; }
.item-info .iname-big { font-size: var(--к-база); font-weight: bold; }
.item-info .attr { color: #444; padding: 1px 0; }
/* заголовки секций карточки — жирные тёмные, значения с буллетами,
   числа жирные тёмные (референс БК, Mike 2026-08-03) */
.item-info .attr .lbl { color: var(--чернила); font-weight: bold; }
.item-info .attr .ч::before { content: "• "; }

/* Вкладки инвентаря (как в БК) */
.tabs { display: flex; flex-wrap: wrap; gap: var(--ш1); margin-bottom: 6px; }
/* навигация меты уехала внутрь строки шапки (концепт Mike 2026-07-25) —
   правила ищи выше, в блоке «ШАПКА». Здесь остались вкладки страниц
   (инвентарь, режимы) — они по-прежнему бумажные закладки БК. */
/* личный итог боя на экране завершения (решение Mike 2026-07-21):
   дубль системных сообщений, спокойным серым */
.итог-боя { margin: 10px auto 0; color: #555; font-size: var(--к-база);
  line-height: 1.5; }
/* кнопка выхода из итога — по центру, под центрированными строками итога
   (правка Mike 2026-07-28): .гл-кнопка блочная с max-width и прижималась
   к левому краю широкого экрана */
.итог-боя .гл-кнопка { margin-left: auto; margin-right: auto; }
/* кнопкой бывает и ссылка («К ИТОГАМ ТУРНИРА») — вид тот же */
a.гл-кнопка { text-decoration: none; text-align: center; }
/* логин со стандартными жестами (ЛКМ обращение, ПКМ private/info) —
   везде: заявки, строки сторон, имена в бою (решение Mike 2026-07-21) */
/* ник — действие, а не переход (Mike 2026-07-25): рисуется span'ом, чтобы
   браузер не показывал статус-бар со ссылкой поверх строки ввода чата */
.ник-жест, .nick[role=button] { cursor: pointer; }
.ник-жест { color: #295fa6; font-weight: bold; text-decoration: none; }
.ник-жест:hover { text-decoration: underline; }
/* вкладки в стиле кнопок (правка Mike 2026-07-20): без рамки, мягкий
   теневой ореол; снизу тень подрезана — вкладка сливается с листом */
/* Вкладки страниц (подвкладки инвентаря, «продать») — это ДЕЙСТВИЕ, значит
   тот же радиус и та же рамка, что у кнопок и вкладок шапки. Прежние
   «бумажные закладки» 4/4/0/0 с ореолом были пятым языком на экране. */
.tab {
  background: var(--действие-фон); color: #4a463d;
  border: 1px solid var(--действие-кромка); border-radius: var(--р-действие);
  padding: 4px 13px; font-size: var(--к-мелко); text-decoration: none;
  white-space: nowrap;               /* вкладки в одну строку (правка Mike) */
}
.tab:hover { background: var(--действие-навод); color: #1f1f1f; }
.tab:hover:not(.active) { background: var(--действие-навод); }
/* активная — светлый лист с золотой кромкой: ТА ЖЕ деталь, что у активной
   вкладки шапки и активного канала чата. Единственное, что проходит сквозь
   оба материала, и оно же говорит «ты здесь» */
.tab.active {
  background: var(--лист-поле); color: #1f1f1f; font-weight: bold;
  border-color: var(--кромка-золото);
}

/* Справочные таблицы (таблица опыта и т.п.) */
.xt { border-collapse: collapse; margin: 10px 0; background: var(--лист); }
.xt th, .xt td { border: 1px solid var(--лист-кромка); padding: 4px 12px; font-size: var(--к-база); text-align: left; }
.xt th { background: var(--лист-шапка); font-size: var(--к-метка); text-transform: uppercase; color: #555; }
.xt .here { background: #f5efc9; }
/* рейтинги (правка Mike 2026-07-21): всё по центру, ровные столбцы —
   узкие числовые не слипаются, колонка бойца не прыгает по ширине */
.xt.центр th, .xt.центр td { text-align: center; min-width: 48px; }
.xt.центр th:nth-child(2), .xt.центр td:nth-child(2) { min-width: 130px; }

/* dev-смотровая карты этажа (веха 4): сетка клеток, цвета локаций */
.devmap { border-collapse: collapse; margin: 10px 0; }
.devmap td { width: 22px; height: 22px; font-size: var(--к-метка); text-align: center; padding: 0; }
.devmap .c { border: 1px solid var(--тише-лист); cursor: default; }
.devmap .v { border: none; }
.devmap .kor, .devkey.kor { background: #e9e9e9; }
.devmap .tup, .devkey.tup { background: #d9c9a9; }
.devmap .r0, .devkey.r0 { background: #f3c6c6; }
.devmap .r1, .devkey.r1 { background: #c6d6f3; }
.devmap .r2, .devkey.r2 { background: #c9ecc9; }
.devmap .r3, .devkey.r3 { background: #ead9f5; }
.devmap .r4, .devkey.r4 { background: #f5ecc0; }
.devmap .r5, .devkey.r5 { background: #c9e8e8; }
.devmap .r6, .devkey.r6 { background: #f3d9c0; }
.devkey { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--тише-лист);
          vertical-align: -1px; margin-right: 3px; }

/* Экран поединка как в БК: бойцы слева и справа, формы боя между ними;
   бойцы ближе друг к другу — арена собрана к центру, узкая средняя зона
   (решение Mike) */
/* обёртка арена+лог: ширину задаёт арена, лог ложится ровно под ней —
   от левого края первого бойца до правого края второго (решение Mike) */
.duel-wrap { width: fit-content; margin: 0 auto; display: flex;
             flex-direction: column; flex: 1 1 auto; min-height: 0; }
.duel-wrap .log { width: 0; min-width: 100%; max-width: none; }
/* строка сторон под ареной: ниже характеристик, на всю ширину арены,
   при мультибое ложится длинной строкой (решение Mike) */
.sides-line { width: 0; min-width: 100%; text-align: center;
              margin-top: 8px; font-size: var(--к-база); }
/* кнопка удара: тот же формат, но крупнее — главная кнопка боя;
   чуть ниже прежнего, текст поджат (решение Mike) */
.udar-btn {
  background: var(--действие-фон); border: 1px solid #a8a8a8; color: #333;
  font: bold 12px/1.2 Verdana, sans-serif; padding: 4px 26px; cursor: pointer;
}
button.udar-btn:hover:not(:disabled) { background: var(--действие-нажат); }
.udar-btn:active { background: #c9c4ba; border-style: solid; }
.duel-arena { display: flex; align-items: stretch;
              /* арена по ширине содержимого, зазоры равные с обеих сторон */
              width: fit-content; margin: 0 auto; gap: 18px 40px;
              /* узкое окно: карточки переносятся, а не режутся краем
                 (правка Mike 2026-07-20 — «вёрстка поплыла») */
              flex-wrap: wrap; justify-content: center; max-width: 100%; }
.duel-side {
  /* фон общий со страницей, без рамок (решение Mike). Ширина — по явной
     ширине куклы (была min-content, Safari её схлопывал → «плыло»); карточка
     сжата под куклу, зазоры арены одинаковы с обеих сторон */
  flex: 0 0 auto; background: transparent; border: none;
  /* без горизонтальных полей: край карточки = край ячеек, лог ровно под ними */
  padding: 8px 0; text-align: center; width: fit-content;
}
.duel-side .portrait { font-size: calc(var(--портрет) * 0.66); line-height: 1.2; margin: 8px 0; }
.hpbar {
  /* выше прежнего — цифры HP теперь живут внутри полосы (Mike 2026-07-21) */
  height: 15px; background: #c03a2b; border: 1px solid #555;
  margin: 0;
}
.hpbar .fill { height: 100%; background: #3f9c35; }
.hpnum { font-size: var(--к-бейдж); color: #444; font-weight: bold; white-space: nowrap; }
.duel-mid {
  /* ширина по содержимому (отступы вокруг ровные), вертикально по центру;
     дополнительный воздух с обеих сторон — в ширину ячейки кольца */
  flex: 0 0 auto; background: transparent; border: none;
  padding: 10px calc(var(--портрет) * 0.11);
  font-size: var(--к-база); align-self: center;
}
/* Кукла внутри боя — компактнее: H меньше, пропорции 10 частей те же.
   --фигура-w уже пересчитает и ширину куклы, и колонку фигуры (одна доля).
   Осталось только окнам зрителя (в-окне) — на страницах боя кукла
   инвентарная (решение Mike 2026-07-21, ниже) */
.duel-side .doll { --кукла-h: calc(var(--портрет) * 1.5);
                   --фигура-w: calc(var(--портрет) * 0.75);
                   justify-content: center; margin-top: 6px; }
.duel-side .slot { font-size: var(--к-метка); }
.duel-side .figure { min-height: calc(var(--портрет) * 1.125); }
/* Экран боя как в БК (правка Mike 2026-07-21, вторая итерация): жёсткие
   зоны — своя кукла 1/4 · центр «Атака/Защита» 2/4 · соперник 1/4, без
   переносов; куклы инвентарного размера, отцентрированы каждая в своей
   зоне; центр — компактный блок по образцу БК, не растянут на всю зону.
   Окно зрителя (в-окне) — как было */
body:not(.в-окне) .duel-wrap { width: 100%; }
body:not(.в-окне) .duel-arena { width: 100%; gap: 18px 0; }
body:not(.в-окне) .duel-side { flex: 0 0 25%; min-width: 0; display: flex;
  flex-direction: column; align-items: center; }
body:not(.в-окне) .duel-mid { flex: 0 0 50%;
  /* зона на всю высоту арены; имена — на линии HP-шкалы кукол (правка
     Mike 2026-07-21): 8px паддинга карточки + 22px запаса шкалы,
     строка имени в высоту шкалы (15px) */
  align-self: stretch; padding-top: 30px;
  display: flex; flex-direction: column; align-items: center;
  box-sizing: border-box; }
.duel-центр { flex: 1 1 auto; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
body:not(.в-окне) .duel-side .doll { --кукла-h: calc(var(--портрет) * 2);
                                     --фигура-w: var(--портрет); }
body:not(.в-окне) .duel-side .figure { min-height: 0; }
@media (min-width: 901px) {
  /* широкие экраны: три зоны в одну строку всегда — куклам перенос
     запрещён (портрет ужат под зону правилом --портрет ниже) */
  body:not(.в-окне) .duel-arena { flex-wrap: nowrap; }
}
/* логины бойцов — по краям всей центральной зоны, каждый рядом со своей
   куклой (правка Mike 2026-07-21, третья итерация) */
.duel-имена { display: flex; justify-content: space-between; gap: 24px;
  width: 100%; padding: 0 10px; box-sizing: border-box;
  font: bold 13px/15px Verdana, sans-serif; color: #223a7a;
  margin-bottom: 22px; }
.duel-имена .ур { color: #777; font-weight: normal; font-size: var(--к-мелко); }
/* форма — по контенту, по центру зоны; масштаб крупнее (правка Mike) */
body:not(.в-окне) .duel-mid { font-size: var(--к-знач); }
/* колонки «Атака»/«Защита» рядом, зазор 10–15px (правка Mike) */
/* ШИРЕ (правка Mike 2026-07-30): колонки жались по содержимому, и с тенью
   строка выглядела огрызком. Форма шринк-врапилась по тексту — даём ей ширину
   в отведённом центре, а колонкам базу, чтобы тень читалась полосой. */
.ход-форма { width: 100%; max-width: 520px; margin: 0 auto; }
.ход-колонки { display: flex; gap: 14px; justify-content: center; }
.ход-колонки > div { flex: 1 1 0; min-width: 0; }
.ход-заголовок { text-align: center; font-size: var(--к-акцент); margin-bottom: 8px;
  /* как в БК дословно: «Атака», не «АТАКА» — капс и серость .cap сняты;
     полоса-подложка чуть светлее фона на всю ширину столбца (правка Mike) */
  text-transform: none; color: #222;
  background: var(--лист); padding: 3px 10px; border-radius: var(--р-лист); }
.ход-строка { display: block; padding: 3px 0; white-space: nowrap; }
/* два оружия: активный столбик — куда ляжет следующий клик (Mike 2026-07-24).
   Подсветка еле заметная, серой тенью по кружкам столбика. */
.ход-форма.рука-1 input[name="udar"],
.ход-форма.рука-2 input[name="udar2"] {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.10); border-radius: 50%;
}
/* ПОДПИСЬ КУКЛЫ ВНЕ ПОТОКА — под неё нужен запас сверху (правило стоит после
   дуэльных, чтобы перебить их margin-top).

   Резерв висит на «с-подписью», а НЕ на «есть-hp» (правка Mike 2026-07-27):
   раньше 22 px отдавались всякой кукле со шкалой, даже там, где имя не
   рисуется (окно бойца, экран боя), — и кукла вставала на 22 px ниже соседней
   колонки чисел. Теперь резерв и подпись включаются одним условием, и пара
   «кукла + числа» сходится по верху сама. Высота — общий токен: её же берёт
   соседняя колонка, см. «ПАРА КУКЛА+ЧИСЛА». */
.doll.с-подписью { margin-top: var(--пб-подпись); }
.duel-side .figure .silhouette { font-size: calc(var(--портрет) * 0.36); }

/* Газетный лог боя — на общем фоне страницы, без рамки; по центру,
   ровно под рабочей зоной арены (решение Mike) */
.log {
  background: transparent; border: none;
  padding: 6px 0; max-height: 40vh; overflow: auto; font-size: var(--к-мелко);
  width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto;
}
/* Шкала перезарядки/таймера: ширина от сетки, тонкая линия */
.kd-полоса {
  display: inline-block; width: var(--шкала); height: 0.5em;
  background: var(--жёлоб); border: 1px solid var(--тише-лист); vertical-align: middle;
}
.kd-bar { display: block; height: 100%; background: #a00; }
.line { padding: 2px 0; border-bottom: 1px solid #f0ece3; }
.round { color: #888; margin-top: 5px; font-size: var(--к-метка); }
.sys { color: #7a1010; font-style: italic; }
.miss { color: var(--тише-лист); }
.block { color: #295fa6; }
.dodge { color: #1a7a8a; }
.crit { color: #cc0000; font-weight: bold; }
.pierce { color: #a06a00; font-weight: bold; }
.hit { color: #000; }
b { color: #000; }
.hint { color: #888; font-size: var(--к-мелко); margin-top: 12px; }

/* окно вещи (решение Mike 2026-07-19): иконка-ссылка без подчёркивания */
.item-link { text-decoration: none; color: inherit; cursor: pointer; }
.iname-big .item-link:hover { text-decoration: underline; }

/* ── Врата (стартовая, решение Mike 2026-07-19): стилистика стартовой
   combats.com — чёрный экран, всё по центру, линии-разделители ── */
body.врата {
  background: #000; color: #c9c9c9; display: flex; min-height: 100vh;
  align-items: center; justify-content: center; margin: 0;
  font: 12px Verdana, sans-serif;
  /* вратам общий запрет прокрутки не нужен: длинные экраны (регистрация)
     листаются, полоса скрыта общим правилом html */
  height: auto; flex-direction: row; overflow: visible;
}
.врата-центр { text-align: center; max-width: 560px; padding: 24px; }
.врата-лого { display: block; width: 100%; max-width: 470px; margin: 10px auto 4px; }
.врата-линия { border: none; border-top: 1px solid #3a3a2c; margin: 16px 0; }
.врата-цитата { color: #777; font-style: italic; margin: 10px 0 18px; line-height: 1.5; }
body.врата input[type=text], body.врата input[type=password] {
  background: #101010; border: 1px solid #4a4a3a; color: #ddd;
  padding: 5px 7px; width: 210px; font: 12px Verdana, sans-serif;
}
body.врата button {
  background: #22221c; color: #cfc9a6; border: 1px solid #55543f;
  padding: 5px 20px; font: 11px Verdana, sans-serif; cursor: pointer;
}
body.врата button:hover { background: #2e2e24; }
.врата-форма { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.врата-ссылки { margin-top: 4px; color: #555; }
.врата-ссылки a { color: #9a9a7a; text-decoration: none; margin: 0 9px; }
.врата-ссылки a:hover { text-decoration: underline; }
body.врата .sys {
  background: #1a1a14; border: 1px solid #4a4a3a; color: #d3c089;
  padding: 6px 10px; margin-bottom: 12px;
}

/* ── Инфо-блоки в БК-стиле (решение Mike 2026-07-19, по скрину статов БК):
   значения — жирный тёмно-синий, секции разделены серыми линиями,
   ключевой агрегат (опыт — наше «могущество») — зелёный жирный ── */
.fighter b { color: #16168d; }
/* числа в карточках вещей — жирные ТЁМНЫЕ (Mike 2026-08-03: синий
   читался как ссылка); синие значения остаются у карточки бойца */
.item-info .attr b { color: var(--чернила); }
.fighter .cap { border-top: 1px solid #b9b9b9; padding-top: 6px; }
.fighter .cap:first-child { border-top: none; padding-top: 0; }
.агрегат { color: var(--хорошо) !important; }

/* призраки пустых ячеек (решение Mike 2026-07-19, как в БК): бледный
   серый арт-подсказка предназначения; надписей в пустых ячейках нет */
.slot .slot-ghost {
  position: absolute; inset: 2px; width: calc(100% - 4px);
  height: calc(100% - 4px); object-fit: contain;
  mix-blend-mode: multiply; opacity: .22; filter: grayscale(1);
}
.slot .slot-ghost-icon {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; opacity: .3; filter: grayscale(1);
}

/* деньги: цифры чёрным жирным везде (правка Mike — не синим) */
.деньги { color: #000 !important; font-weight: bold; }

/* арты врат (генерация Mike по промптам-9) */
.врата-арт { display: block; width: 100%; margin: 0 auto;
             border: 1px solid #2e2e24; }
.врата-арт.квадрат { max-width: 300px; }

/* ── Сцена главной (решение Mike 2026-07-20): арт почти во весь экран без
   рамок, лого вплавлено в верх арта, вход поверх тёмного градиента ── */
.врата-широко { width: 100%; }
.врата-сцена { position: relative; width: min(96vw, 1536px); margin: 0 auto; }
.врата-сцена-арт { display: block; width: 100%; }
.врата-сцена::before, .врата-сцена::after {
  content: ''; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 1;
}
/* тьма сверху и снизу — лого и форма замешиваются с рисунком */
.врата-сцена::before { top: 0; height: 30%;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%); }
.врата-сцена::after { bottom: 0; height: 44%;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 100%); }
.врата-сцена-лого {
  position: absolute; top: 4.5%; left: 50%; transform: translateX(-50%);
  width: 44%; z-index: 2; opacity: .94;
  filter: drop-shadow(0 0 22px rgba(0,0,0,.95));
}
.врата-сцена-низ {
  position: absolute; left: 0; right: 0; bottom: 3.5%;
  z-index: 2; text-align: center;
}
.врата-сцена-низ input[type=text], .врата-сцена-низ input[type=password] {
  background: rgba(10, 10, 8, .62); border-color: rgba(74, 74, 58, .8);
  color: #d3c089;
}
.врата-сцена-низ button {
  background: rgba(34, 34, 28, .72); border-color: rgba(85, 84, 63, .85);
}
.врата-сцена-низ .sys { display: inline-block; }
.врата-широко .врата-ссылки { margin-top: 12px; }
/* автозаполнение браузера красит поля в светлое — гасим */
body.врата input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #101010 inset;
  -webkit-text-fill-color: #ddd;
}
.врата-сцена-низ input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #0d0d0a inset;
  -webkit-text-fill-color: #d3c089;
}
/* квадратные арты (регистрация): размер от высоты окна, лого крупнее */
.врата-сцена.квадрат { width: min(96vw, 78vh); }
.врата-сцена.квадрат .врата-сцена-лого { width: 58%; top: 3%; }
.врата-сцена.квадрат::after { height: 34%; }
/* узкий экран: арту не хватает высоты под форму — вход уходит под рисунок */
@media (max-width: 820px) {
  .врата-сцена-низ { position: static; margin-top: 10px; }
  .врата-сцена::after { display: none; }
  .врата-сцена-лого { width: 60%; }
}

/* ============================================================
   МОБИЛЬНАЯ ОБОЛОЧКА (Mike 2026-07-22, дизайн/09-интерфейс)
   Жёсткий 3-зонный каркас телефона: статичная шапка → прокручиваемая
   середина (персонаж+инвентарь) → статичный чат. Только ≤760px —
   десктоп не трогаем. Иконки-глифы вкладок — заглушки, меняются позже.
   ============================================================ */
/* элементы только для мобилы — на десктопе скрыты
   (кнопка онлайна с 2026-07-25 работает и на десктопе — она уехала
   в шапку чата и складывает колонку, поэтому из списка убрана) */
.бургер, .таб-иконка { display: none; }

@media (max-width: 760px) {
  /* на телефоне порядок витрины перестаёт плавать вправо — становится своей
     строкой над чипами отбора, иначе обе строки лезут друг на друга */
  .рынок-порядок { float: none; display: flex; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 3px; }
  .рынок-порядок a { margin-left: 0; }
  /* ВСЕ 3 ЗОНЫ СТАТИЧНЫ (Mike 2026-07-22, по замерам его iOS): у Mike
     innerHeight под клавиатуру НЕ сжимается, сжимается только видимая область
     (visualViewport.height 746→426). Поэтому каркас прижимаем ТОЧНО к видимой
     области скриптом: position:fixed, height=visualViewport.height,
     top=offsetTop (base.html). Контент = ровно видимое, скролла нет, iOS
     нечего дёргать, кадр стоит. Запасная высота 100dvh — до первой подгонки. */
  html { height: 100%; }
  body:not(.в-окне) {
    position: fixed; left: 0; top: 0; width: 100%; height: 100dvh;
  }

  /* iOS Safari зумит страницу при фокусе на поле со шрифтом <16px (авто-зум
     «к полю» — из-за него экран «плыл» и увеличивался). 16px это отключает,
     не ломая пользовательский pinch-zoom (Mike 2026-07-22) */
  input[type=text], input[type=password], input[type=email],
  input[type=number], textarea, select { font-size: 16px; }
  .chat input[type=text] { font-size: 16px; }

  /* ---- Зона 1: строка состояния сверху (40px) ----
     Концепт Mike 2026-07-25, вариант Б: наверху остаётся только состояние
     (эмблема · HP · кредиты · часы · меню), а ПЕРЕХОДЫ уезжают вниз, в зону
     большого пальца — верхние углы телефона до них не дотягиваются. */
  :root { --шапка: 40px; }
  .шапка { gap: 8px; padding: 0 8px; }
  .шапка-лого .слово { display: none; }     /* на 360px слово — украшение */
  .шапка-лого .эмблема { height: 20px; }
  /* равные половины — правило КОМПЬЮТЕРА (там слева вкладки, и часы обязаны
     стоять ровно посередине). На телефоне вкладки уехали в док внизу, слева
     осталась одна эмблема — деление пополам зажимало часы в узкую щель
     (находка Mike). Здесь края отдают место часам, а те выравниваются влево. */
  .шап-лево, .шап-право { flex: 0 0 auto; gap: 8px; }
  .часы-зона { flex: 1 1 auto; min-width: 0; margin: 5px 0;
    justify-content: flex-start; }
  .шапка-часы .полно { display: none; }
  .шапка-часы .кратко { display: inline; }
  .шапка-часы { padding: 0 8px; justify-content: flex-start; }
  .шапка-часы b { font-size: var(--к-мелко); }
  .шапка-часы .время { font-size: var(--к-знач); }
  .шапка-сост { gap: 9px; }
  .шапка-сост .полоска { width: 34px; }
  .шапка-сост .чип .мелко { display: none; }   /* «/50» — только на компе */
  /* ник ужимается до ☰: мишень та же, места меньше */
  .шапка-ник .ник-текст, .шапка-ник .галка { display: none; }
  .шапка-ник .глиф-меню { display: inline; font-size: var(--к-глиф); line-height: 1; }
  .шапка-ник { padding: 4px 9px; }
  .шапка-меню { top: var(--шапка); right: 6px; width: min(80vw, 260px); }

  /* док вкладок — низ каркаса, над шторкой чата; шторка открывается ПОВЕРХ
     содержимого, но док остаётся на месте: он в потоке, а не fixed, поэтому
     клавиатурный каркас (visualViewport) не трогается */
  .нав-верх { display: none; }
  .нав-док {
    display: flex; flex-wrap: nowrap; gap: 3px; padding: 4px; flex-shrink: 0;
    background: linear-gradient(var(--камень-верх), var(--камень-низ));
    border-top: 2px solid var(--кромка-золото);
  }
  .нав-док .таб {
    flex: 1; text-align: center; padding: 7px 2px; font-size: var(--к-глиф);
    box-shadow: none; border-radius: var(--р-действие);
  }

  /* иконки вместо текста во всех вкладках (нав / чат / инвентарь) */
  .таб-иконка { display: inline; }
  .таб-текст { display: none; }

  /* ---- Зона 2: персонаж + инвентарь (единственная прокручиваемая) ---- */

  /* вкладки инвентаря — вертикальный рельс иконок слева от карточек */
  /* Рельс вкладок слева, карточки справа, панель — СВОЕЙ строкой снизу.
     Было (правка Mike 2026-07-25): панель — прямой ребёнок обёртки, а обёртка
     на телефоне flex nowrap, поэтому «Сортировать по» становилось четвёртой
     колонкой шириной 57px и разъезжалось в столбик. */
  .инв-обёртка { display: flex; align-items: flex-start; gap: 8px;
                 flex-wrap: wrap; }
  .tabs.инв-вкладки {
    flex-direction: column; flex-wrap: nowrap; flex-shrink: 0;
    gap: 5px; margin: 8px 0 0;
  }
  .tabs.инв-вкладки .tab {
    padding: 8px 9px; font-size: var(--к-глиф); border-radius: var(--р-действие);
    text-align: center; box-shadow: 0 0 2px rgba(0, 0, 0, .28);
  }
  /* карточки — во всю высоту, без внутренней прокрутки: середину зоны
     скроллит сама (.content), вложенный скролл на мобиле не нужен.
     Целимся в #инв-список, а не в «последний div»: последним стала панель,
     и правило доставалось ей, а карточкам — нет */
  .инв-обёртка > #инв-список {
    flex: 1; min-width: 0;
    max-height: none !important; overflow: visible !important;
  }
  /* отметка на выброс — мишень под палец (38px), подпись читаемая.
     Селектор с .item-pic намеренно: мобильный блок в файле идёт РАНЬШЕ
     базового правила, а медиазапрос веса не добавляет — без этого база
     перебивала бы высоту */
  .item-pic .выброс-галка { min-height: 38px; font-size: var(--к-мелко); }
  .item-pic .выброс-галка input { width: 17px; height: 17px; }
  /* липкая полоса выбора: во всю ширину, крупные мишени */
  .инв-обёртка > .выбор-полоса { flex: 0 0 100%; padding: var(--ш2); }
  .выбор-полоса button { min-height: 38px; }
  /* панель выброса — отдельной строкой во всю ширину, мишень под палец */
  .инв-обёртка > .инв-панель {
    flex: 0 0 100%; margin-top: 8px; padding: 6px 8px; gap: 10px;
  }
  .инв-панель button { min-height: 38px; padding: 8px 16px; font-size: var(--к-знач); }
  /* сортировка на телефоне не показывается: список идёт «сначала доступные
     и свежие», этого хватает (решение Mike 2026-07-25) */
  .инв-панель .сорт-строка { display: none; }
  .инв-панель.сорт-только { display: none; }

  /* шторка может занять до 85% экрана — контенту нужно уметь ужиматься:
     без min-height:0 флекс-элемент не сжимается ниже своего содержимого,
     и низ страницы уезжал бы за экран */
  .content { min-height: 0; }

  /* ---- Зона 3: чат — ШТОРКА с тремя положениями (концепт Mike 2026-07-25)
     Было: жёсткие 200px из 812 (четверть экрана) всегда, ввод сверху, новые
     сообщения сверху — костыль под клавиатуру. Стало: свёрнута 31px (игре
     94% экрана) · половина 45% · полная 85%; тянет ТОТ ЖЕ ЯЗЫЧОК, что на
     компе — один жест на обеих платформах. Ввод и новые сообщения снизу,
     как во всех мессенджерах. Шторка в потоке, не поверх контента:
     контент просто ужимается, и клавиатурный каркас не трогаем. */
  .chat {
    height: 45vh;                       /* стартовое положение — половина */
    padding: 6px 8px; position: relative;
    display: grid; gap: 5px 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head" "msgs" "input";
  }
  /* язычок — главный орган и на телефоне; кнопка ▾ больше не нужна */
  .чат-язычок { display: block; width: 68px; height: 15px; top: -8px;
                line-height: 15px; }
  .чат-свернуть { display: none; }
  .чат-шапка { grid-area: head; height: 30px; margin: -6px -8px 0; padding: 0 6px; }
  /* распластываем обёртки, чтобы поле/лента/онлайн стали ячейками сетки */
  .chat .chat-body, .chat .chat-left { display: contents; }

  /* строка ввода — ВНИЗУ, над клавиатурой; поле и «»» одной высоты */
  .chat .input-row { grid-area: input; margin: 0; align-items: stretch; gap: 5px; }
  .chat .input-row button { min-width: 44px; font-size: 16px; }

  /* каналы и инструменты — пальцем: 30px мишени */
  .chat .chat-tabs-row { gap: 5px; }
  .chat .chat-tab { padding: 4px 8px; font-size: var(--к-глиф); text-align: center; }
  .онлайн-кнопка { font-size: var(--к-знач); padding: 4px 8px; }

  .chat .messages { grid-area: msgs; }

  /* онлайн — не выпадашка поверх ленты, а СЕГМЕНТ: подменяет ленту целиком
     (решение Mike 2026-07-25: выпадашка закрывала сообщения) */
  .chat .online {
    grid-area: msgs; width: auto; border-left: none; padding: 4px 2px;
    display: none; overflow-y: auto; background: none; border: none;
    box-shadow: none;
  }
  .chat.онлайн-сегмент .online { display: block; }
  .chat.онлайн-сегмент .messages { display: none; }
  .chat.онлайн-сегмент .онлайн-кнопка { background: var(--лист-поле); font-weight: bold; }

  /* ── СВЁРНУТА: одна полоска с последним сообщением и счётчиками ── */
  .chat.свёрнут { height: 31px !important; padding: 0; overflow: hidden; }
  .chat.свёрнут > *:not(.чат-полоска):not(.чат-язычок) { display: none; }
  .чат-полоска { display: none; }
  /* свёрнутая полоска — тот же камень, что док вкладок под ней: низ экрана
     читается одной тёмной полосой (правка Mike 2026-07-25) */
  .chat.свёрнут { background: linear-gradient(var(--камень-верх), var(--камень-низ)); }
  .chat.свёрнут .чат-полоска {
    display: flex; align-items: center; gap: 6px; height: 100%;
    padding: 0 8px; font-size: var(--к-мелко); color: var(--текст); overflow: hidden;
  }
  .полоска-канал { background: var(--кнопка); border: 1px solid var(--кромка);
                   border-radius: var(--р-действие); padding: 1px 5px;
                   font-size: var(--к-знач); position: relative; flex-shrink: 0; }
  .полоска-канал .счёт { position: absolute; top: -4px; right: -5px;
    background: #c0392b; color: #fff; font-size: var(--к-бейдж); font-weight: bold;
    border-radius: var(--р-метка); padding: 0 3px; }
  .полоска-текст { flex: 1; min-width: 0; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
  .полоска-текст b { color: var(--золото); }
  .полоска-онлайн { color: var(--тихо); flex-shrink: 0; font-size: var(--к-метка); }
}

/* Инвентарь: галка «на выброс» в углу карточки и нижняя панель управления
   (решение Mike 2026-07-24, по образцу БК) */
/* Отметка на выброс — в КОЛОНКЕ ДЕЙСТВИЯ, под «надеть» (Mike 2026-07-25).
   Была галка 15px в правом нижнем углу карточки, по диагонали от кнопки:
   и целиться далеко, и мишень вдвое меньше пальца. Теперь мишень во всю
   ширину колонки, с подписью — и рука уже там, где «надеть». */
.выброс-галка { display: flex; align-items: center; justify-content: center;
  gap: 5px; width: calc(var(--икона) * 1.7); min-height: 26px;
  /* подпись «на выброс» ОДНОЙ строкой (правка Mike 2026-08-02): раньше
     ширина 1.45 иконы ломала её в две — теперь во всю колонку картинки */
  white-space: nowrap;
  cursor: pointer; color: var(--тихо); font-size: var(--к-метка);
  border-radius: var(--р-действие); }
/* наведение — мягкой заливкой, без рамки: рамка на тачскрине залипала
   и «коробила» вещь (находка Mike на iPhone 2026-07-25) */
.выброс-галка:hover { color: #7a1010; background: var(--действие-навод); }
.выброс-галка input { width: 14px; height: 14px; cursor: pointer; margin: 0; }

/* Липкая полоса выбора: появляется по первой отметке, держится у нижней
   кромки рабочей зоны (практика bulk-action bar). Раньше кнопка выброса
   лежала в конце списка — до неё надо было долистать. */
.выбор-полоса {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--ш2);
  margin-top: var(--ш2); padding: var(--ш1) var(--ш2);
  background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); box-shadow: 0 -2px 8px rgba(0, 0, 0, .14);
  font-size: var(--к-база);
}
.выбор-полоса[hidden] { display: none; }
.кн-опасно { background: #8d1414; color: #fff; border: 1px solid #4d0a0a;
  font-weight: bold; letter-spacing: .5px; padding: 5px 16px; }
button.кн-опасно:hover:not(:disabled) { background: var(--плохо); border-color: #4d0a0a; }
.как-текст { background: none; border: none; color: var(--тихо);
  text-decoration: underline; padding: 4px 6px; }
.как-текст:hover:not(:disabled) { background: none; color: #7a1010; }
/* «разобрать» на камни — в колонке действия под галкой выброса */
.кн-разбор { font-size: var(--к-мелко); padding: 2px 6px; width: 100%; }
/* ── СТРАНИЦА В МОДАЛЬНОЙ РАМЕ (?окно=1) — ЕДИНОЕ МЕСТО МАСШТАБА
   (Mike 2026-08-03: «окно ровно, текст не уезжает; подборка масштаба из
   одного места»). body.в-окне ставит base.html; любые карточки в раме
   наследуют эти правила — новые страницы ничего своего не изобретают. */
body.в-окне { overflow-x: hidden; }
body.в-окне .content { max-width: 100%; padding: 12px 14px; }
body.в-окне h1 { font-size: 20px; overflow-wrap: anywhere; }
/* карточка вещи/предмета: резиновый ряд — арт слева, на узкой раме
   центрируется сверху, текст падает вниз и не уезжает за край */
.вещь-ряд { display: flex; gap: 20px; align-items: flex-start;
  flex-wrap: wrap; }
/* арт на ОДНОЙ линии с текстом описания (правка Mike 2026-08-03: раньше
   зона 280px центрировала картинку по вертикали, и та висела ниже строк) */
.вещь-арт { flex: 0 1 240px; min-width: 170px;
  display: flex; align-items: flex-start; justify-content: center;
  margin: 0 auto; }
.вещь-арт img { max-width: 100%; max-height: 260px;
  mix-blend-mode: multiply; }
.вещь-тело { flex: 1 1 260px; min-width: min(260px, 100%); }
/* колонка описания карточки (переехало из инлайна item.html): подпись
   строкой, значения под ней с точкой-маркером. Длинные фразы ПЕРЕНОСЯТСЯ
   (правка Mike 2026-08-03: nowrap уводил свойства билета за край окна) */
/* вёрстка по референсу БК (Mike 2026-08-03): заголовки секций жирные
   тёмные с двоеточием, значения с маркерами-буллетами; числа «что
   даётся» жирные ТЁМНЫЕ — синий читался как ссылка */
.вещь-л { color: var(--чернила); font-weight: bold; margin-top: 7px; }
.вещь-з { font-size: var(--к-знач); }
.вещь-з .ч { white-space: normal; overflow-wrap: anywhere; }
.вещь-з .ч::before { content: "• "; }
.вещь-тело b { color: var(--чернила); }
/* перебиваем правило окна ПЕРСОНАЖА `body.в-окне .char-mid {flex:0 0 auto}`
   (оно про куклу): у карточки вещи тело обязано жаться под раму, иначе
   flex-basis:auto распахивал текст до самой длинной строки — 1124px в
   раме 420 (баг Mike 2026-08-03 «текст уезжает за экран») */
body.в-окне .вещь-тело { flex: 1 1 240px; max-width: 100%;
  min-width: min(240px, 100%); }
/* симметричные поля 10% по бокам окна вещи (правка Mike 2026-08-03):
   текст и картинка ближе к центру, пустота по краям ровная; минимум
   текста чуть ослаблен, а базис арта ужат — перенос строки flex считает
   по базису, и с прежними 240px арт падал под текст */
body.в-окне .вещь-страница { padding: 0 10%; }
body.в-окне .вещь-арт { flex-basis: 170px; }
.вещь-тело .вещь-з, .вещь-тело .вещь-л { overflow-wrap: anywhere; }
/* Библиотека-каталог по референсу БК (Mike 2026-08-03): меню разделов
   слева, поиск, «открыто сегодня» иконками, плоские списки с метками */
.биб-раскладка { display: flex; gap: 18px; align-items: flex-start;
  margin-top: 10px; }
.биб-меню { flex: 0 0 190px; }
.биб-группа { font-weight: bold; margin-top: 9px; }
.биб-пункт { display: block; padding: 1px 0 1px 12px;
  text-decoration: none; }
.биб-пункт.акт { font-weight: bold; }
.биб-пункт.биб-пусто { color: var(--тише-лист, #999); cursor: default; }
.биб-тело { flex: 1 1 auto; min-width: 0; }
.биб-поиск { display: flex; gap: 8px; }
.биб-поиск input { flex: 0 1 260px; }
/* находки дня — в ряд к вкладкам (Mike 2026-08-03): new-уголок, клик —
   карточка внутри каталога */
.биб-ряд-вкладок { display: flex; align-items: center; flex-wrap: wrap; }
.биб-сегодня-ряд { display: flex; gap: 6px; align-items: center;
  margin-left: 14px; flex-wrap: wrap; }
.биб-сегодня-арт { position: relative; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--кромка); border-radius: 4px;
  background: var(--лист-поле, transparent); }
.биб-сегодня-арт img { max-width: 34px; max-height: 34px; }
.биб-нов { position: absolute; top: -6px; right: -5px; font-style: normal;
  font-size: 8px; font-weight: bold; color: #fff; background: #a02020;
  border-radius: 3px; padding: 0 3px; line-height: 11px; }
/* карточка вещи внутри каталога: список слева, вещь справа */
.биб-двое { display: flex; gap: 20px; align-items: flex-start; }
.биб-двое .биб-списочная { flex: 1 1 auto; min-width: 0; }
.биб-двое.с-карточкой .биб-списочная { flex: 0 0 250px; }
.биб-карточка { flex: 1 1 auto; min-width: 0;
  border-left: 1px solid var(--кромка); padding-left: 18px; }
.биб-карточка-имя { font-size: 17px; font-weight: bold; margin: 12px 0 4px; }
.биб-карточка-имя .сер { font-weight: normal; font-size: var(--к-знач);
  color: var(--тихо-лист); margin-left: 5px; }
/* в узкой колонке каталога арт и минимум текста ужимаются,
   чтобы описание вставало рядом с картинкой, как в БК */
.биб-карточка .вещь-арт { flex-basis: 170px; }
.биб-карточка .вещь-арт img { max-height: 195px; }
/* картинка ВПЛОТНУЮ к тексту (правка Mike 2026-08-03: на широком экране
   тело растягивалось, и арт улетал вправо через пустоту): тело по
   содержимому, арт сразу за ним без авто-полей */
.биб-карточка .вещь-тело { flex: 0 1 auto; min-width: min(200px, 100%); }
.биб-карточка .вещь-арт { margin: 0 0 0 10px; }
.биб-строка.акт { background: rgba(0,0,0,.05); }
@media (max-width: 860px) {
  .биб-двое { flex-wrap: wrap; }
  .биб-двое.с-карточкой .биб-списочная { flex: 1 1 100%; }
  .биб-карточка { border-left: none; padding-left: 0; }
}
.биб-список { margin-top: 6px; }
.биб-строка { padding: 2px 0; border-bottom: 1px dotted var(--кромка); }
.биб-строка .тир-метка { margin-right: 5px; }
.биб-ур { font-size: var(--к-метка); margin-left: 7px; }
/* на телефоне меню ложится над списком */
@media (max-width: 700px) {
  .биб-раскладка { flex-wrap: wrap; }
  .биб-меню { flex: 1 1 100%; }
}
/* страница «Обновления» (Mike 2026-08-03): версия · дата · короткая суть.
   Версия НЕ золотом: на светлой бумаге золото плыло — тёмно-багровый
   акцент заголовков читается везде */
.обновы { border-collapse: collapse; width: 100%; }
.обновы td { padding: 7px 12px 7px 0; vertical-align: top;
  border-bottom: 1px dotted var(--кромка); font-size: var(--к-база);
  line-height: 1.45; }
.обновы-в { color: #7a1010; font-weight: bold; white-space: nowrap; }
.обновы-д { color: var(--тихо); white-space: nowrap; }
/* ВИП-лавка (Mike 2026-08-02, вторая редакция): сундук как в больших
   проектах — крупный арт по центру, цена читаемым бейджем на камне,
   широкая кнопка снизу; всё в концепте камень+золото */
.вип-товары { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  align-items: stretch; }
.вип-товар { flex: 1 1 280px; max-width: 380px; position: relative;
  border: 1px solid var(--кромка); border-radius: 8px; padding: 14px 16px;
  background: linear-gradient(var(--камень-верх), var(--камень-низ));
  color: #e8ddc4; display: flex; flex-direction: column; }
.вип-заголовок { font-weight: bold; font-size: var(--к-знач);
  color: var(--золото); letter-spacing: .5px; text-transform: uppercase;
  text-align: center; margin-bottom: 6px; }
/* цена — тёмный бейдж золотом в углу: читается на любом фоне (правка Mike:
   «не видно цифры цены») */
.вип-цена-бейдж { position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.55); border: 1px solid var(--золото);
  border-radius: 5px; padding: 3px 10px; color: var(--золото);
  font-weight: bold; font-size: var(--к-знач); }
.вип-суть { font-size: var(--к-база); margin: 8px 0; color: #d9cfae; }
.вип-метка { color: #9ec98f; font-size: var(--к-метка); margin: 4px 0;
  text-align: center; }
.вип-кнопка { width: 100%; margin-top: auto; padding: 10px 0;
  font-size: var(--к-знач); letter-spacing: 1px; }
.вип-товар form { margin-top: auto; }
/* ── СУНДУК — чистый CSS: корпус, кованые полосы, замок, свечение ── */
.сундук-сцена { display: flex; justify-content: center; padding: 14px 0 10px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.сундук { position: relative; width: 150px; animation: сундук-свет 2.6s
  ease-in-out infinite; }
@keyframes сундук-свет {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(212,175,55,.25)); }
  50%      { filter: drop-shadow(0 0 16px rgba(212,175,55,.6)); }
}
.сундук-крышка { height: 44px; border-radius: 22px 22px 4px 4px;
  background: linear-gradient(#8a5a2b, #6b3f1d);
  border: 2px solid #3d2411; border-bottom: none; position: relative;
  overflow: hidden; }
.сундук-низ { height: 52px; border-radius: 0 0 6px 6px;
  background: linear-gradient(#7a4c22, #543015);
  border: 2px solid #3d2411; position: relative; overflow: hidden; }
/* кованые полосы */
.сундук-крышка i, .сундук-низ i { position: absolute; top: 0; bottom: 0;
  width: 14px; background: linear-gradient(#c9a24a, #8a6a25);
  border-left: 1px solid #5c4413; border-right: 1px solid #5c4413; }
.сундук-крышка i:first-child, .сундук-низ i:first-child { left: 22px; }
.сундук-крышка i:last-child, .сундук-низ i:last-child { right: 22px; }
.сундук-замок { position: absolute; left: 50%; top: 32px;
  transform: translateX(-50%); width: 30px; height: 34px;
  background: linear-gradient(#e3c464, #a67c1f); border: 2px solid #5c4413;
  border-radius: 6px; display: flex; align-items: center;
  justify-content: center; color: #4a3208; font-size: 15px; z-index: 2; }
/* третий сундук (комплект III тира): холодная сталь вместо дерева */
.сундук-третий .сундук-крышка { background: linear-gradient(#6b7280, #4b5563); }
.сундук-третий .сундук-низ { background: linear-gradient(#5b6270, #3f4654); }
.сундук-третий .сундук-замок { font-size: 12px; font-weight: bold; }
/* полоса до гаранта */
.вип-гарант { margin: 6px 0 2px; }
.вип-гарант-полоса { height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.45); border: 1px solid #5c4413; }
.вип-гарант-полоса i { display: block; height: 100%;
  background: linear-gradient(90deg, #8a6a25, var(--золото)); }
/* таблица вероятностей — раскрывашкой, каждая позиция */
.вип-шансы-свёрток { margin-top: 10px; font-size: var(--к-метка); }
.вип-шансы-свёрток summary { cursor: pointer; color: var(--золото);
  text-align: center; }
.вип-шансы { width: 100%; font-size: var(--к-метка); margin: 6px 0;
  border-collapse: collapse; }
.вип-шансы td { padding: 2px 8px 2px 0; color: #cfc39f;
  border-bottom: 1px dotted rgba(212,175,55,.2); }
.вип-шансы td:last-child { color: #fff; text-align: right; white-space: nowrap; }
.вип-шансы .сер { color: #9b8f6d; }
.вип-шансы-раздел td { color: var(--золото); font-weight: bold;
  padding-top: 8px; border-bottom: 1px solid rgba(212,175,55,.4); }
.вип-бп-арт { font-size: 64px; text-align: center; padding: 10px 0;
  color: var(--золото); text-shadow: 0 0 18px rgba(212,175,55,.45); }
/* тост — всплывающее окно на 3 секунды (Mike 2026-08-02): дроп разбора.
   Камень и золото концепта, поверх всего, ниже шапки; уходит растворяясь */
.тост-окно { position: fixed; top: 58px; left: 50%; transform: translateX(-50%);
  z-index: 120; max-width: min(92vw, 480px); padding: 10px 18px;
  background: linear-gradient(var(--камень-верх), var(--камень-низ));
  border: 1px solid var(--золото); border-radius: 4px; color: var(--золото);
  font-size: var(--к-знач); text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); opacity: 1; transition: opacity .4s; }
.тост-уход { opacity: 0; }
/* режим выбора: карточка целиком становится мишенью, отмеченная — видна */
.режим-выбора .item-card { cursor: pointer; }
.режим-выбора .item-card:has(input[type=checkbox]:checked) {
  border-color: #b0453b; box-shadow: inset 3px 0 0 #b0453b; }
.инв-панель { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; padding: 5px 8px; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист); font-size: var(--к-база); }
.инв-панель button[disabled] { color: var(--тише-лист); }

/* Групповая раскидка статов (Mike 2026-07-24): набранная надбавка зелёным
   у стата, панель «осталось / сохранить / сбросить» под характеристиками */
.стат-набор { color: var(--хорошо); font-weight: bold; }
.стат-панель { display: flex; align-items: center; gap: 6px; margin-top: 5px;
  padding: 3px 6px; background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); font-size: var(--к-мелко);
  /* ОДНОЙ СТРОКОЙ (правка Mike 2026-07-28): с wrap счётчик уезжал на второй
     этаж, и панель на телефоне раздувалась вдвое */
  flex-wrap: nowrap; white-space: nowrap; }
/* счётчик прижат вправо (решение Mike 2026-07-27): кнопки слева, число
   справа — как в липкой полосе выброса вещей */
.стат-панель #стат-остаток { color: #777; margin-left: auto; }
.стат-панель button[type=submit] { font: bold 11px Verdana; padding: 1px 10px; }
/* «сбросить» — тихая ссылка, не вторая крупная кнопка */
.стат-панель #стат-сброс { font: 11px Verdana; color: #777; background: none;
  border: none; padding: 0; text-decoration: underline; cursor: pointer; }
.стат-панель #стат-сброс:hover { color: #cc0000; background: none; }

/* ── Главная страница «Турниры» (концепт Mike 2026-07-24) ────────────────
   Один экран — одно решение: зона действия крупная, дальше «сейчас», форма
   игрока и лента истории. Палитра прежняя, БКшная: пергамент и камень. */
.гл-герой { display: flex; gap: 14px; align-items: stretch; margin-bottom: 10px; }
.гл-башня { flex: 1.35; background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); padding: 12px 14px; }
.гл-имя { font-size: var(--к-титул); font-weight: bold; letter-spacing: 1px; }
.гл-хозяин { color: var(--редкое); font-size: var(--к-мелко); margin-top: 1px; }
.гл-текст { color: #555; font-size: var(--к-мелко); margin-top: 8px; max-width: 560px; }
.гл-метки { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.гл-метка { font-size: var(--к-метка); padding: 2px 8px; border: 1px solid #cfc7b5;
  border-radius: var(--р-метка); background: var(--действие-фон); color: #5a5346; }
.гл-действие { flex: 1; background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); padding: 12px 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
.гл-таймер { font-size: var(--к-таймер); font-weight: bold; letter-spacing: 2px; line-height: 1; }
.гл-таймер small { display: block; font-size: var(--к-метка); font-weight: normal;
  color: #777; letter-spacing: 1px; margin-top: 3px; }
/* главная кнопка экрана: одна, крупнее всего остального */
.гл-кнопка { display: block; margin: 12px 0 8px; width: 100%; max-width: 330px;
  padding: 14px 10px; font: bold 16px Verdana; letter-spacing: 1px; color: #fff;
  background: linear-gradient(#8d1414, #6d0f0f); border: 1px solid #4d0a0a;
  border-radius: var(--р-действие); box-shadow: 0 2px 0 #4d0a0a; cursor: pointer; }
button.гл-кнопка:hover:not(:disabled) { background: linear-gradient(var(--плохо), #7d1111);
  border-color: #4d0a0a; }
.гл-кнопка:active { box-shadow: 0 1px 0 #4d0a0a; transform: translateY(1px); }
.гл-кнопка.гл-вошёл { background: linear-gradient(#2f6b34, #255628);
  border-color: #1c421f; box-shadow: 0 2px 0 #1c421f; cursor: default; }
.гл-кнопка.гл-закрыто { background: #cfc7b5; color: #7a7365;
  border-color: #b3ab97; box-shadow: 0 2px 0 #b3ab97; cursor: default; }
.гл-слоты { font-size: var(--к-мелко); color: #555; }
/* вторичное действие не соперничает с главной кнопкой — тихая ссылка */
.гл-тихая { margin-top: 8px; font: 11px Verdana; color: #777; background: none;
  border: none; text-decoration: underline; cursor: pointer; padding: 0; }
.гл-тихая:hover { color: #cc0000; background: none; }
/* слоты бойцов — появляются по мере записи */
.гл-бойцы { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
.гл-боец { font-size: var(--к-мелко); padding: 2px 9px; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-метка); }
.гл-боец.я { border-color: #8d1414; }
.гл-боец.я a { color: #8d1414; font-weight: bold; }

.гл-зона { margin-top: 12px; }
.гл-заголовок { font-size: var(--к-метка); letter-spacing: 2px; color: var(--тихо-лист);
  text-transform: uppercase; margin-bottom: 6px; }
.гл-идёт { display: flex; align-items: center; gap: 8px; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист); padding: 8px 12px;
  font-size: var(--к-база); margin-bottom: 4px; }
.гл-состав { color: #555; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; min-width: 60px; }
.гл-пульс { width: 8px; height: 8px; border-radius: 50%; background: #a00;
  box-shadow: 0 0 0 3px rgba(170, 0, 0, .15); flex-shrink: 0; }
.гл-пусто { font-size: var(--к-база); color: var(--тихо-лист); padding: 6px 0; }

.гл-форма { display: flex; gap: 10px; flex-wrap: wrap; }
.гл-плитка { flex: 1; min-width: 120px; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист); padding: 8px 10px;
  text-align: center; }
.гл-плитка span { display: block; font-size: var(--к-метка); color: var(--тихо-лист);
  letter-spacing: 1px; }
.гл-плитка b { font-size: var(--к-глиф); }
.гл-плитка.гл-итог b { font-size: var(--к-знач); }
.гл-плитка.гл-итог a { font-size: var(--к-мелко); }

.гл-строка { display: flex; gap: 8px; align-items: baseline; font-size: var(--к-мелко);
  padding: 4px 0; border-bottom: 1px solid #e2dccc; white-space: nowrap;
  overflow: hidden; }
.гл-строка.скрытая { display: none; }
.гл-дата { color: var(--тихо-лист); flex-shrink: 0; }
.гл-башня-имя { font-weight: bold; flex-shrink: 0; }
.гл-кто { color: #555; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.гл-приз { color: var(--хорошо); flex-shrink: 0; }
.гл-ещё { margin-top: 8px; font: 11px Verdana; color: #295fa6; background: none;
  border: none; text-decoration: underline; cursor: pointer; padding: 0; }
.гл-ещё:hover { color: #cc0000; background: none; }
/* мобила: зона действия под описанием башни, а не рядом */
@media (max-width: 760px) {
  .гл-герой { flex-direction: column; }
  .гл-состав { display: none; }
}

/* ── Экран этажа (концепт Mike 2026-07-24) ───────────────────────────────
   HUD состояния сверху, две рабочие зоны: «где я» (карта крупно) и «что
   здесь» (лут в три ряда, живые, журнал). Бой — режим: полоса + приглушение. */
/* высота HUD постоянна: смена подписей чипов («находки 0» → «находки 3 ·
   1 навсегда») не должна двигать всё, что ниже (правка Mike 2026-07-25) */
.эт-hud { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 38px;
  background: var(--лист); border: 1px solid var(--лист-кромка); border-radius: var(--р-лист);
  padding: 7px 12px; margin-bottom: 8px; font-size: var(--к-база); }
.эт-башня { font-weight: bold; font-size: var(--к-знач); }
.эт-фаза { color: #a00; font-weight: bold; letter-spacing: 1px; }
.эт-фаза.подготовка { color: #7a5c0a; }
.эт-чип { font-size: var(--к-мелко); padding: 2px 9px; background: var(--действие-фон);
  border: 1px solid #cfc7b5; border-radius: var(--р-метка); white-space: nowrap; }
.эт-hp { display: flex; align-items: center; gap: 6px; }
.эт-полоса { width: clamp(80px, 11vw, 150px); height: 11px; background: var(--жёлоб);
  border: 1px solid #b3ab97; border-radius: var(--р-лист); overflow: hidden; }
.эт-полоса i { display: block; height: 100%;
  background: linear-gradient(#4e9e57, #2f6b34); }
/* чипы — сразу после названия с небольшим отступом (правка Mike
   2026-08-03; прежний .эт-право с margin-left:auto убран) */
.эт-отступ { margin-left: 18px; }
/* горячее событие — ВНУТРИ плашки, занимает остаток строки (правка Mike
   2026-08-03: отдельная полоса и пустота под ней убраны) */
.эт-горячее { flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: var(--к-мелко); color: #7a1010;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity .8s ease; }
.эт-горячее.гаснет { opacity: 0; }

/* stretch (правка Mike 2026-08-03): блок карты тянется до высоты зоны
   куклы — окно обзора добирает высоту, низ у зон ровный */
.эт-рабочая { display: flex; gap: 14px; align-items: stretch; }
/* ПРОПОРЦИИ ЗОН (правка Mike 2026-08-03): кукла ~1/4 экрана, карта 2/4,
   вещи и живые — оставшаяся 1/4. Кукла не ужимается ниже своего
   контента (колонки слотов от --портрет) */
.эт-зона-карта { flex: 1 1 50%; min-width: 300px; }
/* блок карты — колонкой на всю высоту зоны */
.эт-зона-карта .эт-блок { display: flex; flex-direction: column;
  box-sizing: border-box; }
.эт-зона-клетка { flex: 1 1 25%; min-width: 0; }
.эт-зона-клетка .эт-блок { box-sizing: border-box;
  display: flex; flex-direction: column; }
/* height:0 + min-height:100% (правка Mike 2026-08-03, вторая): блок НЕ
   вносит вклад в высоту ряда — мерило одно, зона куклы; лишнее
   прокручивается внутри. ТОЛЬКО при кукле в ряду (правка 2026-08-04):
   в подземелье куклы-ростомера нет, и эти же правила схлопывали блоки
   в полоску — титулы и карта вылезали за рамки плашек */
.эт-рабочая:has(.эт-зона-кукла) .эт-зона-карта .эт-блок,
.эт-рабочая:has(.эт-зона-кукла) .эт-зона-клетка .эт-блок {
  height: 0; min-height: 100%; }
.эт-зона-клетка .эт-журнал { flex: 1 1 auto; min-height: 0;
  max-height: none; overflow-y: auto; }
/* ТРИ ЗОНЫ этажа (решение Mike 2026-08-03): слева кукла с панелями.
   Размер куклы — ИНВЕНТАРНЫЙ (правка Mike 2026-08-03): --портрет
   наследуется от .content:has(.эт-hud), локально не перебиваем; кнопка
   «ПЕРСОНАЖ» правой зоны на широком экране прячется (под куклой её
   больше нет вовсе) */
/* зона куклы — ПО КОНТЕНТУ (правка Mike 2026-08-03, вторая: зазор между
   листом куклы и картой должен равняться зазору карта↔правая зона —
   лишняя ширина зоны уходит карте, отступы везде gap 14px) */
.эт-зона-кукла { flex: 0 0 auto; width: fit-content; position: relative; }
/* 861–1000: у инвентарного clamp media-нижняя граница 1001px — здесь
   держим прежние 150, чтобы кукла не мельчала до базовых 117 */
@media (max-width: 1000px) { .эт-зона-кукла { --портрет: 150px; } }
/* подкладка по контенту куклы (правка Mike 2026-08-03): поля слева и
   справа симметричны — лишняя ширина зоны остаётся снаружи листа */
.эт-зона-кукла .эт-блок { padding: 10px; width: fit-content; }
/* наведение в зоне куклы (правка Mike 2026-08-03): лёгкий ховер на
   фигуре — и полупрозрачный ПЛЮСИК по центру (Mike: «намекает, что на
   куклу можно нажать, а то не до конца понятно») */
.эт-зона-кукла .figure { cursor: pointer; position: relative; }
.эт-зона-кукла .figure .portrait { transition: filter .15s ease; }
.эт-зона-кукла .figure:hover .portrait { filter: brightness(1.15); }
.эт-зона-кукла .figure::after { content: '+'; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -54%);
  font-size: 64px; line-height: 1; font-weight: bold;
  color: #f5eeda; opacity: 0; transition: opacity .15s ease;
  pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.эт-зона-кукла .figure:hover::after { opacity: .55; }
/* курсор-палец и видимый ховер — ТОЛЬКО у активных слотов (есть надетое
   или вещи мешка; класс ставит слоты.js). Неактивный слот молчит: у него
   лишь title предназначения */
.эт-зона-кукла .slot.есть-панель { cursor: pointer; }
/* ховер — КАК В ИНВЕНТАРЕ (правка Mike 2026-08-03: «никакого жёлтого
   канта»): то же лёгкое затемнение, что у ячейки-кнопки снятия
   (.slot .takeoff button:hover). Слоем ::before — фон слота гнездо/арт,
   красить его напрямую нельзя */
.эт-зона-кукла .slot.есть-панель:hover::before { content: '';
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.06);
  pointer-events: none; z-index: 2; }
/* ЕСТЬ ВЕЩИ ДЛЯ СЛОТА (Mike 2026-08-03, уточнение того же дня): точка
   ТОЛЬКО на пустом слоте с вещами в мешке (на занятом не горит) и
   помельче; класс ставит слоты.js по содержимому панели */
.эт-зона-кукла .slot.есть-вещи::after { content: '';
  position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: #3f9d4a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
  pointer-events: none; z-index: 3; }
/* .эт-своб убран (Mike 2026-08-03): надпись про свободные очки под куклой
   снята — раскидка и так в панели фигуры */
/* специфичность 0-2-0: сам .эт-персонаж (ниже по файлу) ставит flex */
.эт-персонаж.эт-перс-мобильный { display: none; }
/* панель слота/статов — лист поверх карты, живёт в зоне куклы */
.слот-меню { position: absolute; z-index: 55; width: max-content;
  max-width: 270px; background: var(--лист-фон, #f3efe4);
  border: 1px solid var(--лист-кромка, #c9c1ae);
  border-radius: var(--р-лист); padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  font-size: var(--к-мелко); line-height: 1.45;
  /* карточки секциями сделали панель выше (Mike 2026-08-03) — длинный
     мешок прокручивается внутри, а не вылезает за экран; скролл ТОНКИЙ
     (правка Mike 2026-08-03: широкий желоб захламлял ленту) */
  max-height: min(78vh, 560px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #b3ab97 transparent; }
.слот-меню::-webkit-scrollbar { width: 5px; }
.слот-меню::-webkit-scrollbar-thumb { background: #b3ab97;
  border-radius: 3px; }
.слот-меню::-webkit-scrollbar-track { background: transparent; }
/* хвост длинного мешка свёрнут (Mike 2026-08-03): первые 5 вещей, дальше
   кнопка «показать ещё» — раскрывает слоты.js */
.слот-меню-вещь.слот-скрытая { display: none; }
.слот-ещё { display: block; width: 100%; margin-top: 4px;
  background: none; border: none; color: #295fa6; cursor: pointer;
  font-size: var(--к-мелко); text-align: center; padding: 3px 0; }
.слот-ещё:hover { color: #cc0000; background: none; }
.слот-меню-вещь { padding: 5px 0; border-top: 1px dotted var(--кромка);
  display: flex; gap: 8px; align-items: flex-start; }
.слот-меню-вещь:first-child { border-top: none; padding-top: 0; }
/* иконка вещи в строке панели (правка Mike 2026-08-03) */
.слот-меню-арт { flex: 0 0 42px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--кромка); border-radius: 4px;
  background: var(--лист-поле, transparent); }
.слот-меню-арт img { max-width: 38px; max-height: 38px; }
.слот-меню-текст { flex: 1; min-width: 0; }
/* РЯД ЭЛИКСИРОВ под куклой (пересмотр Mike 2026-08-03, вторая правка:
   «только сам рисунок» — без рамки-гнезда и квадратика): склянка — голый
   арт размером с иконку всплывающего окна (42px, как .слот-меню-арт);
   ряд на ширину куклы, лишние переносятся */
/* width:0 + min-width:100% — ряд НЕ раздувает зону куклы (она flex: 0 0
   auto, ширина по контенту): ширину блока задаёт кукла, склянки
   переносятся на следующую строку */
.кукла-эликсиры-ряд { display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0 2px; width: 0; min-width: 100%;
  /* место под строку склянок занято ВСЕГДА (правка Mike 2026-08-03):
     подбор эликсира не двигает экран */
  min-height: 63px; }
/* +50% к ряду под куклой (правка Mike 2026-08-03): 42 → 63px; фон
   склянок теперь прозрачный (белый снят с самих PNG floodfill-ом) */
.кукла-эликсир { position: relative; cursor: pointer;
  width: 63px; height: 63px; padding: 0; margin: 0;
  border: none; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; }
/* ховер — ТОЛЬКО сам рисунок (правка Mike 2026-08-03): фон кнопки не
   красим; button.…:hover — специфичность против глобального
   button:hover:not(:disabled), красившего зону вокруг банки белым */
button.кукла-эликсир:hover { background: none; border: none;
  box-shadow: none; }
.кукла-эликсир:hover img { filter: brightness(1.12); }
.кукла-эликсир img { max-width: 63px; max-height: 63px; }
.эликсир-стак { position: absolute; right: 0; bottom: 0;
  font-size: var(--к-бейдж); color: var(--тихо-лист); line-height: 1; }
/* ── ОКНО «ИНВЕНТАРЬ» из чат-бара (Mike 2026-08-03) ──────────────────
   Свободное окно (.инфо-окно) поверх игры: вкладки инвентаря + сетка
   слотов 50×50, видимая зона 8×5, дальше прокрутка; закрытие — только
   крестиком, окно переживает переходы (окна.js, вид 'инв') */
/* двойной класс — специфичность выше поздней .инфо-окно{width:330px},
   которая молча ужимала окно и рождала горизонтальный скролл сетки */
.инфо-окно.инв-окно { width: 476px; max-width: 96vw; }
.инв-окно .инфо-тело { padding: 0; }
.инв-вкладки { display: flex; flex-wrap: wrap; gap: 4px;
  padding: 7px 9px; border-bottom: 1px solid var(--кромка); }
/* вкладки — стиль вкладок инвентаря .tab (правка Mike 2026-08-03:
   тёмные чипы чата на светлом листе читались слепо) */
.инв-вкладка { font-size: var(--к-мелко); padding: 3px 11px;
  background: var(--действие-фон); color: #4a463d;
  border: 1px solid var(--действие-кромка);
  border-radius: var(--р-действие); cursor: pointer; }
.инв-вкладка:hover { background: var(--действие-навод); color: #1f1f1f; }
.инв-вкладка.активна { background: var(--действие-нажат, #d8d2c2);
  color: #1f1f1f; font-weight: bold; }
.инв-вкладка b { font-weight: normal; color: var(--тихо-лист); }
.инв-вкладка.активна b { color: #555; }
.инв-сетка { display: grid; grid-template-columns: repeat(8, 50px);
  grid-auto-rows: 50px; gap: 4px; padding: 9px; align-content: start;
  /* БАЗОВО ровно 5 рядов высоты, даже пустых (правка Mike 2026-08-03:
     окно открывалось в один ряд); лишнее — прокрутка тонкой полосой */
  height: calc(5 * 50px + 4 * 4px + 18px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #b3ab97 transparent; }
.инв-сетка::-webkit-scrollbar { width: 5px; }
.инв-сетка::-webkit-scrollbar-thumb { background: #b3ab97;
  border-radius: 3px; }
/* фон ячейки прозрачный (правка Mike 2026-08-03): рисунок в тонкой
   рамке, без гнезда и тени */
.инв-слот { position: relative; width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--гнездо-кромка); border-radius: var(--р-гнездо);
  background: none; cursor: pointer; }
.инв-слот img, .инв-слот .item-art { max-width: 46px; max-height: 46px;
  /* белый фон PNG вещей сливается со светлым листом окна (правка Mike
     2026-08-03: «фон у вещей прозрачный») — без перерисовки 140 картинок */
  mix-blend-mode: multiply; }
.инв-стак { position: absolute; right: 2px; bottom: 1px;
  font-size: var(--к-бейдж); color: var(--тихо-лист); line-height: 1;
  text-shadow: 0 0 3px #fff; }
.инв-пусто { grid-column: 1 / -1; color: var(--тише-лист);
  padding: 12px 4px; }
/* потянули за угол — фикс 5 рядов снимается, прокрутка переезжает в
   тело окна (.инфо-окно.ручной .инфо-тело { overflow:auto }) */
.инв-окно.ручной .инв-сетка { height: auto; }
/* клик по окну НЕ рисует золотую обводку «мигни» — достаточно тени
   (правка Mike 2026-08-03) */
.инфо-окно.инв-окно.мигни { outline: none; }

/* ДЕЙСТВУЮЩИЕ ЭФФЕКТЫ поверх куклы (Mike 2026-08-03, референс БК):
   строка иконок сверху слева, голые рисунки 42px БЕЗ ховера; наведение
   даёт тултип с эффектом и остатком времени; лишние переносятся.
   Отступ сверху — сразу под шкалой HP с маленьким зазором (правка Mike
   2026-08-03, вторая: доля портрета уводила строку слишком низко).
   Шкала фиксированной высоты (top 1px + 15px + рамки ≈ 18px) — фикс
   22px даёт зазор ~4px на любом масштабе куклы */
.кукла-эффекты { position: absolute;
  top: 22px; left: 4px; right: 4px;
  display: flex; flex-wrap: wrap; gap: 4px; z-index: 2; }
.кукла-эффект { width: 42px; height: 42px; display: flex;
  align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; }
.кукла-эффект img { max-width: 42px; max-height: 42px; }
/* курсор на иконке эффекта — это НЕ наведение на фигуру: плюс и
   осветление куклы молчат (у эффекта ховера нет вовсе) */
.эт-зона-кукла .figure:has(.кукла-эффект:hover)::after { opacity: 0; }
.эт-зона-кукла .figure:has(.кукла-эффект:hover) .portrait { filter: none; }
/* поле надетой — чуть ярче, лёгкий серо-желтоватый (правка Mike
   2026-08-03; было серое затемнение rgba(0,0,0,.04)) */
.слот-меню-вещь.надето { background: rgba(201, 181, 135, .22);
  margin: -4px -6px 0; padding: 5px 6px 6px; border-radius: 4px; }
/* надетая — единственная в панели: фон в 4px от низа, как от трёх других
   сторон (правка Mike 2026-08-03 — снизу зияло поле панели 8px) */
.слот-меню-вещь.надето:last-child { margin-bottom: -4px; }
/* «— надето» не рвётся переносом на вторую строку (правка Mike) */
.слот-меню-вещь.надето .сер { white-space: nowrap; }
.слот-меню-имя { font-weight: bold; }
.слот-меню-свойства { color: #444; }
.слот-меню-треб { color: var(--тихо-лист); }
.слот-меню-пусто { color: var(--тише-лист); }
.слот-меню form { margin-top: 3px; }
.слот-меню .effect-line { display: flex; justify-content: space-between;
  gap: 10px; }
.кукла-статы { min-width: 210px; }
/* идёт бой — рабочие зоны глохнут: из боя всё равно нет выхода */
.эт-рабочая.глухо { opacity: .5; pointer-events: none; }
.эт-блок { background: var(--лист); border: 1px solid var(--лист-кромка); border-radius: var(--р-лист);
  padding: 10px 12px; }
.эт-титул { font-size: var(--к-метка); letter-spacing: 2px; color: var(--тихо-лист);
  text-transform: uppercase; margin-bottom: 6px; }
.эт-титул b { color: #000; letter-spacing: 0; font-size: var(--к-знач);
  text-transform: none; }

/* карта: клетка вдвое крупнее прежней (концепт) */
/* клетка ужата под трёхзонный экран (правка Mike 2026-08-03: «масштаб
   клеток измени, чтоб влезало в зону по центру всё») — зона карты теперь
   делит ширину с куклой, и прежние 72px выталкивали сетку из зоны */
:root { --кл-этаж: clamp(36px, 3.5vw, 58px); }
/* ОКНО ОБЗОРА КАРТЫ (решение Mike 2026-08-03): вся планировка этажа
   внутри вьюпорта — зум (+/−), панорама зажатым ЛКМ, карта не выходит за
   границы (карта-зум.js). Кнопка «Карта Башни» и схема истончения убраны */
.карта-обзор { position: relative; overflow: hidden; flex: 1 1 auto;
  /* холст absolute и не распирает flex — без распорки обзор схлопывался
     до сотни пикселей (замер 2026-08-03) */
  min-width: 280px;
  /* высота — от растяжки блока до зоны куклы (Mike 2026-08-03: «окно
     карты по высоте как персонаж»); min-height — страховка без куклы */
  min-height: 260px;
  border: 1px solid var(--кромка); border-radius: var(--р-лист);
  background: var(--лист-поле, #ece6d8); cursor: grab; }
.карта-обзор:active { cursor: grabbing; }
.карта-холст { position: absolute; left: 0; top: 0;
  transform-origin: 0 0; will-change: transform; }
/* пульт карты (пересмотр Mike 2026-08-03): «+»/«−» ЖЁСТКО в правом
   верхнем углу; крестовина убрана — ходьба кликом по клеткам со
   стрелочками; перезарядка и портал — левый верхний угол */
.карта-зум { position: absolute; right: 8px; top: 8px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px; align-items: center; }
.карта-зум > .карта-плюс, .карта-зум > .карта-минус {
  width: 34px; height: 34px; padding: 0;
  font-size: 20px; line-height: 1; font-weight: bold;
  background: var(--лист); border: 1px solid var(--кромка);
  border-radius: var(--р-действие); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.карта-зум > .карта-плюс:hover, .карта-зум > .карта-минус:hover {
  background: var(--действие-навод); }
/* знак вопроса под «−» (правка Mike 2026-08-03): справка пользования
   картой — жёстко в колонке пульта, тултип по наведению */
.карта-справка { width: 34px; height: 34px; display: flex;
  align-items: center; justify-content: center; cursor: help;
  font-size: 18px; font-weight: bold; color: var(--тихо-лист);
  background: var(--лист); border: 1px solid var(--кромка);
  border-radius: var(--р-действие); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
/* ВЕЩИ КОМНАТЫ под картой (правка Mike 2026-08-03): та же подложка
   блока, слоты 50×50 в стиле окна инвентаря — прозрачный фон, ховер-
   затемнение как у надетых вещей куклы */
.карта-вещи { display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding-top: 8px; min-height: 60px; }
.карта-вещь { position: relative; width: 50px; height: 50px;
  padding: 0; margin: 0; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
  border: 1px solid var(--гнездо-кромка); border-radius: var(--р-гнездо);
  background: none; box-shadow: none; font-size: 26px; }
button.карта-вещь:hover:not(:disabled) { background: none; }
.карта-вещь::before { content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0); pointer-events: none; border-radius: inherit; }
.карта-вещь:hover:not(:disabled)::before { background: rgba(0, 0, 0, .06); }
.карта-вещь img { max-width: 46px; max-height: 46px;
  mix-blend-mode: multiply; }
.карта-вещь:disabled { opacity: .45; }
.карта-пусто { color: var(--тише-лист); font-size: var(--к-мелко); }
.карта-подбор { display: flex; align-items: center; gap: 8px; }
.карта-инфо { position: absolute; left: 8px; top: 8px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  max-width: 190px; }
.карта-инфо .эт-кд { width: auto; height: auto; padding: 2px 8px;
  background: var(--лист); border: 1px solid var(--кромка);
  border-radius: var(--р-действие); }
/* перезарядки нет — плашка невидима (:empty не ловит пробелы макроса,
   ловим по единственному скрытому #шаг-очередь внутри) */
.карта-инфо .эт-кд:not(:has(span:not([hidden]))) { display: none; }
.карта-инфо form.место-занято { visibility: hidden; }
/* СПИСОК БОЙЦОВ по ЛКМ на вражеской клетке (Mike 2026-08-03): строка на
   бойца — ник + кубик «i», у смежных ещё «напасть»; закрытие кликом мимо */
.карта-бойцы { position: absolute; z-index: 8; min-width: 150px;
  background: var(--лист-фон, #f3efe4);
  border: 1px solid var(--лист-кромка, #c9c1ae);
  border-radius: var(--р-лист); padding: 6px 9px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  font-size: var(--к-мелко); }
.кб-строка { display: flex; align-items: center; gap: 7px;
  padding: 3px 0; }
.кб-строка + .кб-строка { border-top: 1px dotted var(--кромка); }
.кб-ник { font-weight: bold; flex: 1; }
.кб-форма { display: inline; margin: 0; }
/* «напасть» — кнопка-текст: бьёт сразу, без экранов подтверждения */
button.кб-напасть { background: none; border: none; padding: 0;
  color: #a00; cursor: pointer; white-space: nowrap;
  font-size: var(--к-мелко); }
button.кб-напасть:hover:not(:disabled) { background: none;
  text-decoration: underline; }
.кб-все { display: block; text-align: center; padding-top: 5px;
  margin-top: 3px; border-top: 1px solid var(--кромка); }
/* вражеская клетка теперь кнопка — вид прежний, без кнопочного фона */
button.эт-кл.враг, button.эт-кл.враг-далеко { border: none; padding: 0;
  cursor: pointer; }
button.эт-кл.враг:hover:not(:disabled),
button.эт-кл.враг-далеко:hover:not(:disabled) { background: #c00; }

/* СТРЕЛОЧКА на клетке шага (Mike 2026-08-03): маленький треугольник
   чернильного тона по центру — видно, куда можно шагнуть, без крестовины */
.эт-кл.шаг { position: relative; }
.эт-кл .кл-стрелка { --стрелка: calc(var(--кл-этаж) * 0.16);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(59, 56, 47, .62); pointer-events: none; }
.эт-кл.шаг:hover .кл-стрелка { color: rgba(59, 56, 47, .95); }
/* диагональные шаги (Mike 2026-08-03): та же стрелка, повёрнутая на 45° —
   «вверх повп» смотрит на северо-восток, «вниз повп» — на юго-запад */
.эт-кл .кл-стрелка.повп { transform: translate(-50%, -50%) rotate(45deg); }
.эт-кл .кл-стрелка.повл { transform: translate(-50%, -50%) rotate(-45deg); }
.эт-карта { display: grid; grid-template-columns: repeat(7, var(--кл-этаж)); gap: 2px; }
.эт-кл { width: var(--кл-этаж); height: var(--кл-этаж); border-radius: var(--р-лист);
  text-align: center; font-size: calc(var(--кл-этаж) * 0.42);
  line-height: var(--кл-этаж); text-decoration: none; }
.эт-кл.комната { background: #c9b271; }
.эт-кл.коридор { background: #8a8578; }
.эт-кл.тупик { background: #6e6353; }
.эт-кл.портал { background: var(--редкое); }
.эт-кл.враг, .эт-кл.враг-далеко { background: #a00; color: #fff; }
.эт-кл.враг { box-shadow: inset 0 0 0 2px #6d0f0f; cursor: pointer; }
.эт-кл.враг:hover { background: #c00; }
.эт-кл.нет { background: transparent; }
.эт-кл.я { outline: 2px solid #295fa6; outline-offset: -2px; }
/* соседняя клетка — кнопка шага (Mike 2026-07-25): подсвечивается на наведении,
   стрелки при этом никуда не делись */
button.эт-кл.шаг { border: none; padding: 0; cursor: pointer; }
button.эт-кл.шаг:hover { outline: 2px solid #295fa6; outline-offset: -2px;
  filter: brightness(1.08); }
/* управление — справа от карты, в пустоте рядом с ней (Mike 2026-07-24):
   крестовина крупнее (там теперь есть место), под ней перезарядка и кнопки.
   Короткие подписи кнопок живут только на телефоне (см. блок 760px) */
.эт-управление .кратко { display: none; }
/* ряд «карта + управление» по центру зоны (правка Mike 2026-08-03:
   «сдвинь в зону, отцентруй» — карта липла вправо, слева пустота) */
.эт-карта-ряд { display: flex; gap: 18px; align-items: center;
  justify-content: center; }
/* вспышка события (Mike 2026-07-29): три секунды по центру экрана и гаснет.
   pointer-events: none — под ней продолжают работать карта и кнопки */
.вспышка { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 900; pointer-events: none; max-width: min(560px, 88vw);
  padding: 14px 22px; text-align: center; font-size: 17px; line-height: 1.35;
  color: #f0e6d2; background: rgba(20, 16, 12, .93);
  border: 1px solid #8d1414; border-radius: 6px;
  box-shadow: 0 0 30px rgba(141, 20, 20, .45);
  animation: вспышка-жизнь 3s ease-in-out forwards; }
@keyframes вспышка-жизнь {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
/* ЗОВ НА БОЙНЮ (Mike 2026-07-30) — та же вспышка, но по ней КЛИКАЮТ: это
   приглашение, и дорога на арену должна быть прямо в нём. Значит
   pointer-events возвращаем, живёт дольше (успеть прочитать и попасть) и не
   исчезает совсем — гаснет до полупрозрачной, пока игрок не уйдёт со страницы */
.вспышка.зов { pointer-events: auto; cursor: pointer; text-decoration: none;
  border-color: #c23b2a; box-shadow: 0 0 34px rgba(194, 59, 42, .5);
  animation: зов-жизнь 8s ease-in-out forwards; }
.вспышка.зов:hover { background: rgba(40, 20, 14, .96); border-color: #e6613f; }
@keyframes зов-жизнь {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  6%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: .35; }
}
/* полная карта с 25-й минуты (Mike 2026-07-29): мелкие клетки во всю сетку,
   ширина приходит переменной — карта у каждого турнира своя */
.эт-общая { display: grid; gap: 1px; margin-top: 4px;
  grid-template-columns: repeat(var(--общая-ширина, 20), 14px); }
.эт-точка { width: 14px; height: 14px; border-radius: 2px; font-size: 9px;
  line-height: 14px; text-align: center; color: #1a1712; }
.эт-точка.стена { background: transparent; }
.эт-точка.комната { background: #c9b271; }
.эт-точка.коридор { background: #8a8578; }
.эт-точка.тупик { background: #6e6353; }
.эт-точка.занята { background: #8d1414; color: #f0e6d2; font-weight: bold; }
.эт-точка.я { box-shadow: inset 0 0 0 2px #f0e6d2; }
/* ШИРИНА ФИКСИРОВАННАЯ (баг Mike 2026-07-27): блок тянулся по содержимому, и
   длинная подпись очереди шага («пойдёшь: … — нажми ещё раз, чтобы отменить»)
   расширяла его на 186 px — крест выбора направлений уезжал на 93 px вбок.
   Теперь подпись переносится по строкам, а крест стоит на месте */
.эт-управление { display: flex; flex-direction: column; align-items: center;
  gap: 8px; width: 150px; flex: 0 0 auto; }
.эт-крест { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; }
.эт-крест button { width: 44px; height: 44px; padding: 0; font-size: var(--к-акцент);
  display: flex; align-items: center; justify-content: center; }
.эт-крест span { width: 44px; height: 44px; }
/* СТРЕЛКА — ТРЕУГОЛЬНИК НА ГРАНИЦАХ, а не символ (правка Mike 2026-07-28).
   Символьные ▲◀▶▼ подставляются разными шрифтами фолбэка и выходят разного
   роста — крест выглядел кривым, особенно на телефоне. Границы одинаковы в
   любом окружении, а `currentColor` красит их цветом кнопки, поэтому
   гашение недоступного направления работает само собой. */
.стрелка { display: block; width: 0; height: 0; border: var(--стрелка, 7px) solid transparent; }
.стрелка.вверх { border-top-width: 0; border-bottom-color: currentColor; }
.стрелка.вниз { border-bottom-width: 0; border-top-color: currentColor; }
.стрелка.влево { border-left-width: 0; border-right-color: currentColor; }
.стрелка.вправо { border-right-width: 0; border-left-color: currentColor; }
/* строка перезарядки живёт в постоянной высоте: без этого появление
   «шаг перезаряжается» сдвигало крестовину (правка Mike 2026-07-25) */
.эт-кд { font-size: var(--к-мелко); text-align: center; height: 2.8em; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; }
.эт-подпись-карты { font-size: var(--к-мелко); color: var(--тихо-лист); margin-top: 8px; }
/* невидимый распорщик: держит высоту колонки управления постоянной */
.место-занято { visibility: hidden; }

/* лут: три ряда видно, дальше прокрутка (решение Mike) */
.эт-лут { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start;
  max-height: calc(3 * (var(--икона) * 1.1 + 7px)); overflow-y: auto; }
/* вещи в клетке Башни — БЕЗ рамок (решение Mike 2026-07-27): пробовали
   привести их к виду инвентаря, чёрная кромка там не села. Возвращено как
   было — голая иконка на фоне клетки */
.эт-вещь { width: calc(var(--икона) * 1.1); height: calc(var(--икона) * 1.1);
  font-size: calc(var(--икона) * 0.55); }
.эт-чек { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: #f7f2df; border: 1px solid #e0d3a8; border-radius: var(--р-лист);
  padding: 5px 8px; font-size: var(--к-мелко); }

.эт-чипы { display: flex; gap: 5px; flex-wrap: wrap; }
.эт-жив { font-size: var(--к-мелко); padding: 2px 8px; background: var(--действие-фон);
  border: 1px solid #cfc7b5; border-radius: var(--р-метка); }
.эт-жив.дерётся { border-color: #a00; }
.эт-жив.пал { color: var(--тише-лист); }
.эт-свёртка { display: inline-block; margin-top: 8px; font: 11px Verdana;
  color: #295fa6; background: none; border: none; padding: 0;
  text-decoration: underline; cursor: pointer; }
.эт-свёртка:hover { color: #cc0000; background: none; }
.эт-журнал { margin-top: 6px; max-height: 190px; overflow-y: auto;
  border-top: 1px solid #e2dccc; }
.эт-запись { font-size: var(--к-мелко); padding: 3px 0; border-bottom: 1px solid #efeadd;
  color: #333; }
.эт-запись.общее { color: #7a1010; }

.эт-подвал { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.эт-кнопка { font: 11px Verdana; padding: 4px 12px; }
/* опасное действие — тихой ссылкой, не кнопкой */
.эт-тихая { font: 11px Verdana; color: var(--тихо-лист); background: none; border: none;
  padding: 0; text-decoration: underline; cursor: pointer; }
.эт-тихая:hover { color: #cc0000; background: none; }
.эт-тихая-ссылка { font-size: var(--к-мелко); color: var(--тихо-лист); align-self: center; }

/* встреча и бой */
/* подтверждение нападения — ПО ЦЕНТРУ ЭКРАНА (правка Mike 2026-08-03):
   плашка всплывает поверх, «отойти» или нападение убирают её */
.эт-встреча { position: fixed; left: 50%; top: 38%;
  transform: translate(-50%, -50%); z-index: 70;
  max-width: min(560px, 92vw);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
  background: #f7ecec; border: 1px solid #d99; border-radius: var(--р-лист);
  padding: 8px 12px; margin-bottom: 8px; }
.эт-напасть { font: bold 12px Verdana; padding: 6px 20px; color: #fff;
  background: linear-gradient(#8d1414, #6d0f0f); border: 1px solid #4d0a0a;
  border-radius: var(--р-действие); cursor: pointer; }
button.эт-напасть:hover:not(:disabled) { background: linear-gradient(var(--плохо), #7d1111);
  border-color: #4d0a0a; }
.эт-бой { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(#8d1414, #6d0f0f); color: #fff;
  padding: 9px 14px; border-radius: var(--р-лист); margin-bottom: 8px; }
.эт-бой b { font-size: var(--к-знач); letter-spacing: 1px; }
.эт-бой-таймер { background: rgba(0, 0, 0, .25); border-radius: var(--р-лист); padding: 2px 8px; }
.эт-бой-таймер.срочно { background: var(--лист-поле); color: #8d1414; font-weight: bold; }
.эт-к-бою { margin-left: auto; font: bold 12px Verdana; padding: 5px 18px;
  background: var(--лист-поле); border: 1px solid #4d0a0a; border-radius: var(--р-действие); cursor: pointer; }

@media (max-width: 860px) {
  .эт-рабочая { flex-direction: column; }
  .эт-зона-карта, .эт-зона-клетка { width: 100%; }
  /* планшет: управление под картой, крестовина по центру */
  .эт-карта-ряд { flex-direction: column; gap: 10px; }
  .эт-управление { width: 100%; }
  /* на телефоне левой зоны куклы нет — как раньше (решение Mike
     2026-08-03), кнопка «ПЕРСОНАЖ» правой зоны возвращается */
  .эт-зона-кукла { display: none; }
  .эт-персонаж.эт-перс-мобильный { display: flex; }
}

/* ТЕЛЕФОН: карта и управление — В ОДНУ СТРОКУ (находка Mike 2026-07-26).
   Было: карта 7×7 и крестовина под ней, вместе 643 px — находки на клетке
   начинались на 858-й точке, то есть за экраном, и до вещей приходилось
   листать. Стало: обзор ужат до 5×5 (внешнее кольцо 7×7 просто скрыто —
   разметка та же), клетка 42 px, крестовина справа от карты. Экономия
   ~330 px по высоте: «что здесь» попадает в первый экран. */
@media (max-width: 760px) {
  .эт-блок { padding: 8px; }
  .эт-карта-ряд { flex-direction: row; gap: 8px; align-items: center; }
  .эт-карта { grid-template-columns: repeat(5, 42px); }
  .эт-кл { width: 42px; height: 42px; font-size: var(--к-крупно); line-height: 42px; }
  /* внешнее кольцо семёрки прячем: первая и последняя строки, первый и
     последний столбцы — остаются ровно центральные 5×5 */
  .эт-карта > :nth-child(-n+7), .эт-карта > :nth-child(n+43),
  .эт-карта > :nth-child(7n+1), .эт-карта > :nth-child(7n) { display: none; }
  .эт-управление { width: auto; min-width: 0; gap: 5px; }
  .эт-крест { grid-template-columns: repeat(3, 36px); gap: 3px; }
  .эт-крест button { width: 36px; height: 36px; font-size: var(--к-знач);
    --стрелка: 6px; }
  .эт-крест span { width: 36px; height: 36px; }
  /* ПЛАШКА УХОДИТ НА ВРЕМЯ БОЯ (решение Mike 2026-07-28). В подземелье бой
     идёт на том же экране, что и забег: шапка, плашка «глубина · сундуки ·
     отряд · опыт» и полоса боя вместе съедали треть телефона, и до выбора
     удара с блоком надо было листать. Глубина подождёт до конца размена. */
  .эт-hud.в-бою { display: none; }
  /* HUD этажа — ОДНОЙ СТРОКОЙ (правка Mike 2026-07-28): на телефоне он
     разваливался на три. Слово «Башня» и подпись таймера прячутся
     (.эт-полно), слово «HP» тоже — полоса говорит сама; полоса сжимаемая,
     чипы плотнее. Что не влезет — срежется, а не перенесётся. */
  .эт-hud { flex-wrap: nowrap; gap: 7px; padding: 6px 8px; overflow: hidden; }
  /* у подземелья в плашке счётов больше (глубина · помещение · сундуки ·
     отряд · опыт) — ей одна строка не по размеру, там перенос остаётся:
     nowrap молча срезал бы хвост */
  .эт-hud:has(.эт-счёт) { flex-wrap: wrap; }
  .эт-hud .эт-полно { display: none; }
  .эт-башня { font-size: var(--к-мелко); white-space: nowrap; }
  .эт-фаза { font-size: var(--к-мелко); }
  .эт-право { display: flex; flex-wrap: nowrap; flex: 0 0 auto;
    gap: 5px; margin-left: auto; white-space: nowrap; }
  .эт-чип { padding: 1px 6px; font-size: var(--к-бейдж); }
  .эт-кд { height: auto; min-height: 1.6em; font-size: var(--к-метка); }
  .эт-управление .эт-кнопка { font-size: var(--к-мелко); padding: 6px 8px; }
  .эт-управление .полно { display: none; }   /* «Карта Башни» → «Карта» */
  .эт-управление .кратко { display: inline; }
  .эт-подпись-карты { display: none; }       /* подсказка съедала строку */
  /* пустое место под кнопку портала на компьютере держит крестовину от
     прыжка; на телефоне кнопки стоят ПОД крестовиной, прыгать нечему —
     не тратим на пустоту целую строку экрана */
  .эт-управление .место-занято { display: none; }
}

/* Сворачивание чата (Mike 2026-07-24, пересобрано 2026-07-25): внутри
   турнира место нужнее карте и луту. Свёрнутый чат = ТА ЖЕ ШАПКА без
   ленты — каналы и счётчики остаются на месте, поэтому при сворачивании
   ничего не прыгает, а пропущенное видно цифрой у канала (прежняя
   полоска «чат свёрнут · N новых» больше не нужна). */
.chat.свёрнут { height: auto !important; min-height: 0; padding: 0;
                overflow: visible; }
.chat.свёрнут .чат-шапка { margin: 0; }
.chat.свёрнут > *:not(.чат-шапка):not(.чат-язычок) { display: none; }

/* «Персонаж» на этаже (Mike 2026-07-24): в Башне одеваются в найденное —
   это частое действие, поэтому оно крупное и первое в правой зоне. Не красное:
   красный на этом экране означает «бей» и «уходи». */
.эт-персонаж { display: flex; align-items: center; gap: 10px; margin: 10px 0;
  padding: 9px 12px; text-decoration: none; color: #000;
  background: linear-gradient(var(--лист), #e6e0d2); border: 1px solid #b3ab97;
  border-radius: var(--р-действие); box-shadow: 0 1px 0 #cfc7b5; }
.эт-персонаж:hover { background: linear-gradient(var(--лист-поле), #efe9da);
  border-color: var(--тихо-лист); color: #000; }
.эт-персонаж b { display: block; font-size: var(--к-знач); letter-spacing: 1px; }
.эт-персонаж small { display: block; font-size: var(--к-метка); color: var(--тихо-лист); }
.эт-персонаж-икона { font-size: var(--к-титул); line-height: 1; }

/* ── Экран поединка (концепт Mike 2026-07-25) ────────────────────────────
   Полоса боя с таймером сверху, арена как была (куклы с экипировкой и
   статами по наведению), чипы соперников при мультибое, лента размена. */
.бой-полоса { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(#8d1414, #6d0f0f);
  padding: 4px 12px; border-radius: var(--р-лист); margin-bottom: 8px; }
/* глобальное `b { color: #000 }` красило заголовок в чёрный на тёмно-красном
   и он пропадал (баг Mike 2026-07-25) — на полосе всё белое явно */
.бой-полоса, .бой-полоса b, .бой-полоса span, .бой-полоса .kd-t { color: #fff; }
.бой-полоса b { font-size: var(--к-знач); letter-spacing: 1px; }
.бой-полоса.кончен { background: linear-gradient(#5a5346, #45403a); }
.бой-полоса.кончен.победа { background: linear-gradient(#2f6b34, #255628); }
.бой-размен { opacity: .75; font-size: var(--к-мелко); }
.бой-таймер { margin-left: auto; background: rgba(0, 0, 0, .3);
  border-radius: var(--р-лист); padding: 2px 10px; font-size: var(--к-база); }
/* твой ход — самое заметное на полосе: белая плашка, багровые цифры */
.бой-таймер.срочно { background: var(--лист-поле); font-weight: bold; font-size: var(--к-знач); }
.бой-таймер.срочно, .бой-полоса .бой-таймер.срочно b,
.бой-полоса .бой-таймер.срочно .kd-t { color: #8d1414; }
.бой-выход { font: bold 13px Verdana; padding: 8px 22px; letter-spacing: 1px; }

.бой-чипы { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin: 10px 0 0; }
.бой-чипы-метка { font-size: var(--к-мелко); color: var(--тихо-лист); }
.бой-чип { font-size: var(--к-мелко); padding: 3px 10px; background: var(--лист);
  border: 1px solid #cfc7b5; border-radius: var(--р-метка); }
.бой-чип.активен { border-color: #8d1414; background: #f7ecec; }
/* красный чип — этот соперник ждёт твоего ответа */
.бой-чип.ждёт { border-color: #a00; }
/* чип-ссылка — переход в пару с этим соперником (мультибой, правка
   2026-07-28): выглядит так же, меняется только курсор и подсветка */
a.бой-чип { text-decoration: none; color: inherit; cursor: pointer; }
a.бой-чип:hover { background: var(--действие-фон); border-color: #a00; }
.бой-чип-шкала { display: block; height: 3px; background: var(--жёлоб);
  border-radius: var(--р-лист); margin-top: 2px; overflow: hidden; }
.бой-чип-шкала i { display: block; height: 100%; background: #a00; }
.бой-чип-шкала i.тихо { background: var(--тише-лист); }

.бой-лента { margin-top: 12px; background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); padding: 8px 12px; }
.бой-лента-метка { font-size: var(--к-метка); letter-spacing: 2px; color: var(--тихо-лист);
  text-transform: uppercase; margin-bottom: 4px; }
.бой-лента-хвост { text-transform: none; letter-spacing: 0; opacity: .8; }
.бой-лента .msg.боевая { padding: 3px 0; border-bottom: 1px solid #e6e0d0; }
.бой-лента .msg.боевая:last-child { border-bottom: none; }
.бой-пусто { font-size: var(--к-мелко); color: var(--тихо-лист); }

@media (max-width: 900px) {
  /* мобила: полоса боя липнет сверху — таймер виден всегда */
  .бой-полоса { position: sticky; top: 0; z-index: 5; }
  .бой-таймер { margin-left: 0; }
}

/* Форма хода — строки-кнопки (концепт поединка, Mike 2026-07-25): попасть
   можно и мышью, и пальцем; крохотные кружки больше не единственная цель. */
.ход-форма .ход-строка { display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: var(--р-действие); white-space: nowrap; cursor: pointer; }
.ход-форма .ход-строка:hover { background: var(--действие-фон); }
.ход-форма .ход-строка input { width: 14px; height: 14px; margin: 0; }
.ход-форма .udar-btn { padding: 10px 26px; font-size: var(--к-знач); font-weight: bold;
  letter-spacing: 1px; }

@media (max-width: 900px) {
  /* Мобила (концепт поединка, Mike 2026-07-25): бойцы — две компактные
     карточки в ряд наверху (портрет + шкала HP), форма хода занимает всю
     ширину под ними. Экипировка на мобиле смотрится в окне персонажа. */
  .duel-arena { display: grid; grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "я vs он" "форма форма форма";
    gap: 2px; align-items: start; }
  .duel-side:first-child { grid-area: я; }
  .duel-side:last-child { grid-area: он; }
  .duel-mid { grid-area: форма; }
  /* VS между бойцами (решение Mike 2026-07-28) — псевдоэлементом, чтобы не
     трогать три шаблона поединка сразу; на компьютере между куклами стоит
     форма хода, там разделитель не нужен */
  .duel-arena::before { content: "VS"; grid-area: vs; align-self: center;
    font: bold var(--к-знач)/1 Verdana, sans-serif; color: #8d1414;
    letter-spacing: 1px; padding: 0 2px; }
  /* КУКЛА КАК В ИНВЕНТАРЕ, ТОЛЬКО МЕЛЬЧЕ (решение Mike 2026-07-28: «я думал,
     персонажи будут видны с вещами как в инвентаре, только меньше
     пропорционально»).
     Прежде на телефоне колонки ячеек растворялись (display: contents) и вещи
     ложились строкой под силуэтом — с полным комплектом это три ряда иконок,
     и кнопка «Вперёд!!!» уходила за край экрана. Теперь кукла та же, что в
     инвентаре, просто уменьшенная: вся геометрия считается от --кукла-h,
     поэтому достаточно задать два числа, и пропорции сходятся сами. */
  /* ВО ВСЮ ШИРИНУ (решение Mike 2026-07-28): кукла занимает свою половину
     экрана целиком. Ширина куклы считается как 2×(H×доля) + портрет + 6,
     поэтому пара чисел ниже подобрана так, чтобы при 375 px две куклы легли
     впритык к краям, сохранив пропорции инвентаря. */
  .duel-side .doll { --портрет: 86px; --кукла-h: 158px; }
  body:not(.в-окне) .duel-side .doll { --кукла-h: 158px; }
  .duel-side { display: flex; justify-content: center; }
  /* СИММЕТРИЯ (правка Mike 2026-07-28): обе куклы прижимались к ЛЕВОЙ линии
     своей колонки — левая стояла у края, а правая висела в 33px от края.
     Прижимаем каждую к своему краю арены: зазоры равные, VS ровно посередине */
  .duel-side:first-child { justify-self: start; }
  .duel-side:last-child { justify-self: end; }
  .duel-имена { display: none; }                 /* имена уже на шкалах */
  /* зоны — крупными строками, текст переносится, колонки во всю ширину */
  /* колонки Атаки и Защиты — поровну на всю ширину (правка Mike 2026-07-28:
     «растянуть, чтоб смотрелась симметричной»). Прежнее правило целилось в
     класс .ход-кол, которого в разметке нет, — колонки сжимались по тексту
     и съезжали к центру несимметрично */
  /* центральная зона без своих боковых отступов (правка Mike 2026-07-28):
     `.duel-mid` держит padding в долю портрета — на телефоне это лишние
     13 px с каждой стороны, из-за них форма стояла уже кукол и «не на всю
     ширину». Куклы уже прижаты к краям контента, форма встаёт вровень */
  .duel-mid { padding-left: 0; padding-right: 0; }
  /* форма растягивается на всю зону (правка Mike 2026-07-28, второй заход).
     `.duel-центр` — flex-колонка с `align-items: center`, и форма как
     flex-item ужималась по содержимому: в Башне колонки стояли 41…352 при
     доступных 16…377. Прошлая правка сняла отступы `.duel-mid`, но эту
     усадку не трогала — оттого пустота по краям осталась. */
  .duel-центр .ход-форма { align-self: stretch; width: 100%; }
  .ход-колонки { gap: 8px; }
  .ход-колонки > div { flex: 1 1 0; min-width: 0; }
  .ход-форма .ход-строка { padding: 7px 6px; white-space: normal;
    font-size: var(--к-база); line-height: 1.2; }
  .ход-заголовок { font-size: var(--к-знач); }
  /* кнопка хода липнет к низу — под большой палец */
  .ход-форма .udar-btn { position: sticky; bottom: 6px; width: 100%; }
  .бой-лента .msg.боевая { font-size: var(--к-мелко); }
}

/* ── Вкладка «Поединки» (концепт Mike 2026-07-25) ────────────────────────
   Тот же язык, что главная: зона действия, затем «идут махачи» — карточка
   боя с составом и HP, вход в идущий бой открыт (FFA, толпой). */
.сп-переключатель { float: right; font-size: var(--к-мелко); letter-spacing: 0;
  text-transform: none; }
.сп-бой { background: var(--лист); border: 1px solid var(--лист-кромка); border-radius: var(--р-лист);
  padding: 8px 12px; margin-bottom: 6px; }
.сп-бой.мой { border-color: #8d1414; }
.сп-бой-шапка { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.сп-статус { display: flex; align-items: center; gap: 6px; font-size: var(--к-база);
  font-weight: bold; }
.сп-статус.ждёт { color: #7a5c0a; font-weight: normal; }
.сп-влететь { font: bold 12px Verdana; padding: 6px 16px; letter-spacing: 1px;
  color: #fff; background: linear-gradient(#8d1414, #6d0f0f);
  border: 1px solid #4d0a0a; border-radius: var(--р-действие); cursor: pointer; }
button.сп-влететь:hover:not(:disabled) { background: linear-gradient(var(--плохо), #7d1111);
  border-color: #4d0a0a; }
.сп-бойцы { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.сп-боец { font-size: var(--к-мелко); padding: 2px 9px; background: var(--действие-фон);
  border: 1px solid #cfc7b5; border-radius: var(--р-метка); }
.сп-боец.пал { color: var(--тише-лист); border-style: dashed; }
.сп-боец.я { border-color: #8d1414; }
.сп-архив { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--к-база); padding: 5px 0; border-bottom: 1px solid #e2dccc; }
.сп-итог { font-weight: bold; min-width: 96px; }
/* где дрались — чип перед датой (правка Mike 2026-07-28): цвет отличает
   махач от Башни и подземелья с одного взгляда */
.сп-где { font-size: var(--к-бейдж); text-transform: uppercase; letter-spacing: 1px;
  padding: 1px 7px; border-radius: var(--р-метка); white-space: nowrap;
  min-width: 84px; text-align: center;
  background: var(--действие-фон); color: var(--тихо-лист);
  border: 1px solid var(--лист-кромка); }
.сп-где.башня { color: #8d1414; border-color: #d8b9b9; }
.сп-где.подземелье { color: #6b4f1d; border-color: #d9c9a4; }
.сп-итог.победил { color: var(--хорошо); }
.сп-итог.пал { color: #a00; }
.сп-итог.вышел, .сп-итог.разошлись { color: #777; }
.сп-против { flex: 1; min-width: 180px; color: #555; }

/* Живые блоки вкладки «Поединки» (Mike 2026-07-25): пульс дня, кто свободен,
   топ недели — вкладка отвечает «что происходит» и «с кем драться». */
.сп-пульс { font-size: var(--к-мелко); color: var(--тихо-лист); margin-bottom: 6px; }
.сп-пульс b { color: #5a5346; }
.сп-топ { display: flex; align-items: center; gap: 10px; font-size: var(--к-база);
  padding: 4px 0; border-bottom: 1px solid #e2dccc; }
.сп-топ.я { background: var(--лист); }
.сп-место { width: 22px; color: var(--тихо-лист); text-align: right; }
.сп-топ-ник { flex: 1; }
.сп-очки { font-weight: bold; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭКРАН «ПЕРСОНАЖ» (концепт Mike 2026-07-25): «Инвентарь» и «Дерево умений»
   слились в один экран с двумя режимами. Слева — кто я (кукла, три главных
   числа, характеристики, боевые показатели), справа — чем усиляюсь.
   Было: карточка вещи 153px (влезало 3.4 штуки) и колонка чисел 118×1174.
   ═══════════════════════════════════════════════════════════════════════ */

/* переключатель режима — крупный, как главная кнопка экрана */
/* ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА — роль «Действие» по дизайн-системе (правка Mike
   2026-07-27). Был бумажной закладкой: активный режим подчёркивался красным
   2 px, и ради него же ужимался нижний padding — кнопка выходила
   несимметричной, а красная черта спорила с главной красной кнопкой экрана.
   Система говорит иначе и одинаково для камня и листа: «ты здесь» — это
   СВЕТЛЫЙ ЛИСТ С ЗОЛОТОЙ КРОМКОЙ (тот же приём, что у вкладок меты в шапке,
   `.нав-мета .таб.active`). Никаких подчёркиваний. */
.экран-режимы { display: flex; gap: var(--ш1); align-items: center;
                margin: 10px 0 8px; }
.экран-режим {
  font: bold var(--к-база) Verdana; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px; border-radius: var(--р-действие); text-decoration: none;
  /* цвет надписи — как у обычной кнопки на бумаге: режим это кнопка, а не
     подпись, и `--тихо` (он для камня) делал её нечитаемой */
  background: var(--действие-фон); color: #3b382f;
  border: 1px solid var(--действие-кромка);
  transition: background .12s, color .12s;
}
.экран-режим:hover { background: var(--действие-навод); color: #000; }
.экран-режим:active { background: var(--действие-нажат); }
.экран-режим.акт {
  background: var(--лист-поле); color: #1f1f1f;
  border-color: var(--кромка-золото);
  /* внутренний светлый кант — та же деталь, что у активной вкладки меты:
     одна и та же мысль «ты здесь» на камне и на бумаге */
  box-shadow: inset 0 0 0 1px var(--лист-поле);
  cursor: default;
}
/* СОСТОЯНИЕ В ЧИПЕ РЕЖИМА (концепт Mike 2026-07-27): полоса режимов вкладки
   «Турниры» не пустой переключатель — чип подземелья говорит «ГОТОВ / через
   2:14 / ОТРЯД 3/6 / ТЫ ВНИЗУ». За это она и отрабатывает свои 30 px,
   отнятые у героя главной. У Башни состояния нет: часы шапки уже показывают
   врата, а экран шапку не дублирует. */
.реж-сост { font: normal 10px Verdana; letter-spacing: 1px; color: #7a7365;
            text-transform: none; margin-left: 8px; }
.реж-сост.жив { color: #2f6b34; font-weight: bold; }
.реж-сост.горит { color: var(--плохо); font-weight: bold; }

/* ── Подземелье: лобби отряда (режим вкладки «Турниры») ──────────────── */
.пз-выбор { display: flex; gap: 6px; margin: 8px 0 0; flex-wrap: wrap; }
.пз-чип { border: 1px solid var(--действие-кромка); background: var(--действие-фон);
  padding: 5px 10px; font-size: var(--к-мелко); border-radius: var(--р-действие);
  text-decoration: none; color: #4a4a44; }
.пз-чип:hover { background: var(--действие-навод); color: #000; }
.пз-чип.акт { background: var(--лист-поле); border-color: var(--кромка-золото);
              font-weight: bold; color: #000; }
.пз-отряд { display: flex; gap: 6px; flex-wrap: wrap; }
.пз-боец { background: var(--лист); border: 1px solid #c9c2b2;
           padding: 3px 9px; font-size: var(--к-мелко); display: inline-flex;
           align-items: center; gap: 5px; }
.пз-боец.пусто { color: #b0a898; border-style: dashed; background: none; }
.пз-боец.не-готов { border-color: var(--тревога); }
.пз-вожак { font-size: var(--к-метка); text-transform: uppercase;
            letter-spacing: 1px; color: var(--тихо-лист); }
.пз-беда { font-size: var(--к-метка); text-transform: uppercase;
           letter-spacing: 1px; color: var(--плохо); }
.пз-кнопка { border: 1px solid var(--действие-кромка); border-radius: var(--р-действие);
  background: var(--действие-фон); padding: 5px 12px; cursor: pointer;
  font: bold 11px Verdana; letter-spacing: 1px; text-transform: uppercase; }
.пз-кнопка:hover:not(:disabled) { background: var(--действие-навод); }
.пз-кнопка:disabled { color: #b0a898; cursor: default; }

/* ── Подземелье: экран забега ────────────────────────────────────────── */
.пз-хп { display: inline-flex; align-items: center; gap: 6px;
         font-size: var(--к-мелко); }
.пз-хп-полоса { display: inline-block; width: 90px; height: 9px;
  background: var(--жёлоб); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-метка); overflow: hidden; }
.пз-хп-полоса i { display: block; height: 100%;
                  background: linear-gradient(#4f9a54, #2f6b34); }
.пз-хп-полоса.малая { width: 100%; height: 7px; }

/* СТРАЖ — одна шкала на всю команду (решение Mike 2026-07-27): в неё бьёт
   весь отряд, и она главное число экрана боя */
.пз-страж { margin: 10px 0 8px; }
.пз-страж-имя { font: bold var(--к-акцент) Verdana; letter-spacing: 1px; }
.пз-глубина { font: normal var(--к-метка) Verdana; letter-spacing: 1px;
              text-transform: uppercase; color: var(--тихо-лист, var(--тихо-лист));
              margin-left: 8px; }
.пз-страж-шкала { position: relative; height: 22px; margin-top: 4px;
  background: var(--жёлоб); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); overflow: hidden; }
.пз-страж-шкала i { display: block; height: 100%;
  background: linear-gradient(#a83232, #7d1111); }
.пз-страж-шкала b { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff;
  font-size: var(--к-мелко); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

.пз-команда { display: flex; gap: var(--ш2); flex-wrap: wrap;
              margin-bottom: 10px; }
.пз-боец-бой { flex: 0 0 130px; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист);
  padding: 5px 8px; font-size: var(--к-мелко); }
.пз-боец-бой.я { border-color: var(--кромка-золото);
                 box-shadow: inset 0 0 0 1px var(--лист-поле); }
.пз-боец-бой.пал { opacity: .5; }
.пз-боец-имя { font-weight: bold; margin-bottom: 3px; }
.пз-это-ты { font: normal var(--к-метка) Verdana; text-transform: uppercase;
             letter-spacing: 1px; color: var(--тихо-лист, var(--тихо-лист)); }
.пз-боец-низ { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.пз-снял { color: var(--плохо); }
.пз-готов { color: #2f6b34; font-weight: bold; margin-left: auto; }
.пз-ход { max-width: 520px; }

.пз-встреча { background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); padding: 10px 12px; }
.пз-встреча .гл-кнопка { max-width: 260px; margin: 10px 0 6px; }
.пз-добыча { display: flex; gap: var(--ш1); flex-wrap: wrap; }

/* ── Ковка (режим «Рынка») ───────────────────────────────────────────── */
.ковка { display: grid; grid-template-columns: minmax(190px, 240px) 1fr;
         gap: var(--сет-зазор); align-items: start; }
.ковка-список { min-width: 0; }
.ковка-работа { min-width: 0; }
.ковка-строка { display: flex; align-items: center; gap: var(--ш2);
  padding: 4px 6px; text-decoration: none; color: #000;
  border: 1px solid transparent; border-radius: var(--р-действие); }
.ковка-строка:hover { background: var(--действие-навод); color: #000; }
.ковка-строка.акт { background: var(--лист-поле);
  border-color: var(--кромка-золото); box-shadow: inset 0 0 0 1px var(--лист-поле); }
/* ступень — метка, а не действие: pill по дизайн-системе */
.ковка-ступень { min-width: 26px; text-align: center; font: bold var(--к-метка) Verdana;
  letter-spacing: 1px; padding: 1px 6px; border-radius: var(--р-метка);
  background: #e4dfd3; border: 1px solid var(--лист-кромка); color: #5a554c; }
.ковка-ступень.ст-пятёрка { background: #cfe0ee; border-color: #9db9cf; }
.ковка-ступень.ст-вершина { background: #eccfd0; border-color: #c99a9c; }
.ковка-слот { text-transform: uppercase; letter-spacing: 1px;
              font-size: var(--к-мелко); }
.ковка-сколько { margin-left: auto; color: var(--тихо-лист, var(--тихо-лист));
                 font-size: var(--к-мелко); }
.ковка-камни { display: flex; gap: var(--ш1); flex-wrap: wrap; }

.ковка-смета { margin: 6px 0 2px; max-width: 320px; }
.ковка-строка-сметы { display: flex; justify-content: space-between;
  gap: var(--ш2); padding: 2px 0; font-size: var(--к-мелко);
  border-bottom: 1px dotted var(--лист-кромка); }
.ковка-строка-сметы b { color: #16168d; }
.ковка-строка-сметы b.не-хватает { color: var(--плохо); }

/* ВАРИАНТЫ КОВКИ — гнёзда с артом, как вещи в карточке: одна и та же вещь
   должна выглядеть одинаково везде (дизайн-система) */
.ковка-выбор { display: block; }
.ковка-вариант { display: grid; grid-template-columns: auto 46px 1fr;
  align-items: center; gap: var(--ш2); padding: 4px 6px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--р-лист); }
.ковка-вариант:hover { background: var(--действие-фон); }
.ковка-вариант:has(input:checked) { background: var(--лист-поле);
  border-color: var(--кромка-золото); }
.ковка-арт { width: 42px; height: 42px; object-fit: contain;
  background: var(--лист-поле); border: 1px solid var(--гнездо-кромка);
  box-shadow: var(--вдавленность-мягкая); }
.ковка-имя { font-size: var(--к-знач); }
.ковка-действие { grid-column: 3; font-size: var(--к-метка);
                  color: var(--тихо-лист, var(--тихо-лист)); }
.ковка-выбор .гл-кнопка { max-width: 280px; margin: 10px 0 4px; }
.ковка-обмен { display: flex; gap: var(--ш2); align-items: center;
               margin: 4px 0; }

@media (max-width: 760px) {
  .ковка { grid-template-columns: 1fr; }
}

/* точка с числом — есть что вложить (очки навыков + владения) */
/* то же и на бумаге: цифра, а не пилюля (правка Mike 2026-07-27) —
   надстрочная, чтобы не спорить с самим словом режима */
/* `line-height: 0` обязателен (правка Mike 2026-07-27): надстрочная цифра
   РАСТЯГИВАЛА строку, и вкладка со счётчиком выходила на 2.5 px выше соседней —
   «разные размеры Снаряжение и Развитие». Ноль высоты строки убирает цифру из
   расчёта строчного бокса, а видна она по-прежнему. */
.экран-точка { margin-left: 5px; background: none; color: var(--плохо);
  font: normal var(--к-метка) Verdana;
  vertical-align: super; line-height: 0; }

/* три колонки как в БК (правка Mike 2026-07-25): кукла · числа · рабочая
   зона. Числа снова между куклой и инвентарём, а не под куклой — но уже
   не ниткой в 118px: минимум 200px, плитки и свёртка «Подробности». */
/* ── ПАРА «КУКЛА + ЧИСЛА» — общий примитив ───────────────────────────────
   Кукла с колонкой чисел рядом встречается на трёх экранах (Персонаж, окно
   бойца, профиль), и раньше каждый верстал её сам — оттого высоты и не
   сходились (правка Mike 2026-07-27). Правил ровно три, и они одни на всех:

   1. ВЕРХ. Подпись куклы висит вне потока, поэтому под неё резервируется
      строка `--пб-подпись`. Резерв берут ОБЕ колонки — и только там, где
      подпись есть (`.doll.с-подписью`).
   2. ВЫСОТА. Колонки тянутся до общей (`align-items: stretch`), а не каждая
      до своего содержимого. Тогда низ ровный, чем бы колонки ни набились.
   3. НИЗ. Колонка чисел — флекс-столбец; последний её блок с классом
      `.пб-низ` прижимается к низу (`margin-top: auto`). Иначе под коротким
      списком остаётся дыра, а кукла рядом уходит вниз.

   Пользоваться: колонке чисел дать `.пб-числа`, её хвосту — `.пб-низ`,
   контейнеру пары — `align-items: stretch`. Подробности и другие заготовки —
   `заметки/вёрстка-руководство.md`. */
/* РЕЗЕРВ БЕРУТ ВСЕ КОЛОНКИ СТРОКИ, а не только числа (правка Mike
   2026-07-27): подпись куклы поднимает её колонку, и любая соседняя, что
   осталась без резерва, встаёт выше — на экране «Персонаж» так и висела
   рабочая зона с вкладками инвентаря. Резерв вынесен в отдельную утилиту,
   потому что колонке чисел нужен ещё и флекс, а рабочей зоне — нет. */
.пб-верх { padding-top: var(--пб-подпись); }
.пб-числа { padding-top: var(--пб-подпись);
            display: flex; flex-direction: column; }
/* верх колонки задаёт ПРИМИТИВ, а не отступ первого блока: свой margin-top у
   первого ребёнка складывался с резервом, и числа уезжали ещё на 10 px */
.пб-числа > :first-child, .пб-верх > :first-child { margin-top: 0; }
/* !important здесь на месте: это утилита, и она обязана перебивать обычный
   отступ блока, к которому её прицепили. Без него `.окно-числа .раздел`
   (специфичность выше) выигрывал, и хвост не прижимался — под числами
   оставалось 89 px пустоты (замер 2026-07-27) */
.пб-низ { margin-top: auto !important; }

.перс-раскладка { display: grid;
  grid-template-columns: max-content minmax(200px, 1fr) 58%;
  gap: var(--сет-зазор); align-items: stretch;
  position: relative; left: var(--С, 0px); }
.перс-кукла { min-width: 0; }
.перс-числа { min-width: 0; }
.перс-право { min-width: 0; }
/* flex: 0 0 auto — блоки колонки чисел растут ПО СОДЕРЖИМОМУ (правка Mike
   2026-07-28). Общий `.fighter` объявлен с `flex: 1`; пока блок в колонке
   был один, растяжка была не видна, а после разреза на три (статы ·
   владения · прочее) каждый тянулся на треть высоты — у свёрнутых секций
   зияла пустота во весь блок */
.перс-числа .fighter { min-width: 0; background: none; border: none; padding: 0;
  flex: 0 0 auto; }
/* колонка чисел разрезана на три блока (правка Mike 2026-07-28: на телефоне
   статы уезжают вправо от куклы, владения под них) — на компьютере разрез
   невидим: фона и рамок у этих .fighter нет, а линию-разделитель первой
   шапке «Боевых показателей» возвращаем вручную, она больше не first-child
   общего блока */
.перс-прочее > .cap:first-child,
.перс-владения > .cap:first-child { border-top: 1px solid #b9b9b9; padding-top: 6px; }
/* владения стоят в основном блоке вместе с характеристиками (решение Mike
   2026-07-28); зона «Развития» их дублирует — так и задумано */
.перс-владения { margin-top: 10px; }
/* короткие подписи статов (СИЛ/ЛОВ/ИНТ/ВЫН) — только для телефона */
.стат-кратко { display: none; }
/* узкие экраны: кукла и числа в ряд, рабочая зона вниз на всю ширину —
   как это делал прежний .char-layout */
@media (max-width: 1000px) and (min-width: 761px) {
  .перс-раскладка { grid-template-columns: var(--кукла-кол) 1fr; }
  .перс-право { grid-column: 1 / -1; }
}
.перс-новичок { margin-top: 10px; font-size: var(--к-мелко); }
.перс-новичок s { color: var(--тише-лист); }

/* три главных числа плиткой: то, что тут тратится, видно сразу */
.экран-плитки { display: flex; gap: 6px; margin: 10px 0 8px; }
.экран-плитка { flex: 1; min-width: 0; text-align: center; padding: 4px 6px;
  background: var(--лист); border: 1px solid var(--лист-кромка); border-radius: var(--р-действие); }
.экран-плитка .зн { font-size: var(--к-акцент); font-weight: bold; white-space: nowrap; }
.экран-плитка .зн .мелко { font-size: var(--к-метка); color: #777; font-weight: normal; }
.экран-плитка .пд { font-size: var(--к-бейдж); color: var(--тихо-лист); text-transform: uppercase;
  letter-spacing: 1px; }
/* есть нераспределённое — плитка зовёт */
.экран-плитка.есть { border-color: var(--тревога); }
.экран-плитка.есть .зн { color: var(--тревога); }

/* Зона вещей — БК-карточки с подвкладками (откат Mike 2026-07-25):
   чипы-фильтры, строки 44px и тумблер плотности сняты, .item-card живёт
   прежними правилами выше. Экран «Персонаж» и режимы — остаются. */

/* ── режим «Развитие» ─────────────────────────────────────────────────── */
.разв-ряд { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.разв-владения { flex: 0.5 1 180px; }
.разв-умения { flex: 1.5 1 340px; }
/* высота по ряду — да, свой фон — нет: панель везде один лист
   (правка Mike 2026-07-27) */
.разв-ряд .fighter { height: 100%; }
.узел { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; border-bottom: 1px solid #f0ece3; padding: 3px 0; font-size: var(--к-мелко); }
.узел .ступень { color: var(--тихо-лист); }
.узел .треб { color: var(--тише-лист); font-size: var(--к-метка); }
.узел .зел { color: var(--хорошо); }
.узел .сер { color: #777; }
/* РЕМЁСЛА — пять карточек в одну строку (Mike 2026-07-29). Общее правило
   вынесено над рядом, поэтому карточке хватает узкой колонки: имя, ступень,
   чего не хватает, кнопка. На телефоне ряд переносится по две */
.разв-правило { font-size: var(--к-мелко); color: var(--тихо-лист);
  line-height: 1.45; margin: 2px 0 8px; }
.разв-ремёсла { display: flex; gap: 8px; align-items: stretch; }
.разв-ремёсла .ремесло { flex: 1 1 0; min-width: 0;
  border: 1px solid var(--рамка); border-radius: 4px; padding: 6px 7px;
  background: var(--лист); display: flex; flex-direction: column; gap: 3px; }
.разв-ремёсла .ремесло.взят { border-color: #2e7d32; box-shadow: inset 3px 0 0 #2e7d32; }
.разв-ремёсла .fname { font-size: var(--к-мелко); line-height: 1.2; }
.разв-ремёсла .рем-ступень { font-size: var(--к-метка); color: var(--тихо-лист); }
.разв-ремёсла .рем-строка { font-size: var(--к-метка); line-height: 1.35;
  word-break: break-word; }
.разв-ремёсла .рем-строка.сер { color: #777; }
.разв-ремёсла .зел { color: var(--хорошо); }
.разв-ремёсла .треб { color: var(--тревога); }
.разв-ремёсла form { margin-top: auto; }
.разв-ремёсла button { width: 100%; padding: 3px 0; font-size: var(--к-метка); }
/* ШКАЛА ОПЫТА РЕМЕСЛА (Mike 2026-07-30) — работ до следующей ступени. Тонкой
   полосой без цифр внутри: карточек пять в ряд, они узкие, и число живёт
   строкой ниже вместе с остальными требованиями. Полная — зелёная, как «✓»
   у инструмента: одним взглядом видно, что условие закрыто. */
.разв-ремёсла .рем-шкала { height: 4px; border-radius: 2px;
  background: var(--жёлоб); border: 1px solid var(--лист-кромка);
  overflow: hidden; }
.разв-ремёсла .рем-шкала i { display: block; height: 100%;
  background: var(--тихо-лист); transition: width .2s; }
.разв-ремёсла .рем-шкала.полна i { background: var(--хорошо); }
.разв-пути { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
/* карточка пути — тот же ЛИСТ, что карточка вещи в инвентаре (правка Mike
   2026-07-27): стоял тон `--лист-поле`, а это тон АКТИВНОГО элемента и поля
   ввода, не контейнера. Взятый путь и так помечен зелёной кромкой — светлить
   ему фон незачем */
.разв-пути .путь { flex: 1 1 240px; min-width: 230px;
  background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); padding: 8px 10px; }
/* взятый путь — зелёной кромкой; закрытые сворачиваются в строку, чтобы
   не занимать колонку на пол-экрана (Mike 2026-07-25) */
.разв-пути .путь.взят { border-color: #2e7d32; box-shadow: inset 3px 0 0 #2e7d32; }
.разв-пути .путь.закрыт { flex: 1 1 100%; min-width: 0; opacity: .5; }
.разв-пути .путь.закрыт .fname { display: inline; }

/* ── мобила ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Персонаж на телефоне (решение Mike 2026-07-28): всё важное — первым
     экраном. Кукла слева, справа от неё крупная раскидка статов и владения;
     ниже плитки и вещи, боевые показатели и подробности — под ними. */
  /* колонка раскидки — ровно 150px (замер: строка «сохранить · сбросить (N)»
     просит 149), всё остальное забирает кукла */
  .перс-раскладка { display: grid; left: 0;
    grid-template-columns: auto minmax(158px, 1fr); gap: 0 10px;
    grid-template-areas:
      "кукла статы"
      "кукла владения"
      "плитки плитки"
      "право право"
      "прочее прочее"; }
  /* боевые показатели и подробности — в самый низ, под вещи (правка Mike
     2026-07-28): первым экраном должна влезать хотя бы одна вещь с кнопкой
     «надеть». Плитки остаются над вещами, но ужаты в одну строку. */
  .экран-плитки { gap: 4px; }
  .экран-плитка { display: flex; align-items: baseline; justify-content: center;
    gap: 4px; padding: 3px 4px; }
  .экран-плитка .зн { font-size: var(--к-база); }
  .экран-плитка .пд { letter-spacing: 0; }
  .перс-кукла { grid-area: кукла; align-self: start; }
  .перс-числа { display: contents; }
  .перс-числа .экран-плитки { grid-area: плитки; margin: 8px 0 2px; }
  .перс-статы { grid-area: статы; align-self: start; }
  .перс-владения { grid-area: владения; align-self: start; }
  .перс-прочее { grid-area: прочее; margin-top: 12px; }
  /* вещи прижаты к строке плиток (правка Mike 2026-07-28) */
  .перс-право { grid-area: право; margin-top: 2px; }
  /* КУКЛА БЕРЁТ ВСЮ ОСТАВШУЮСЯ ШИРИНУ (решение Mike 2026-07-28: «максимальный
     размер, но чтобы не мешала прокачке статов и никуда не наезжала»).
     Раньше стоял глухой портрет 82px — на iPhone это оставляло полосу пустоты
     справа от раскидки. Теперь считаем: окно − поля 32 − зазор 10 − колонка
     раскидки 150. Множитель 1.82 — во столько ширина куклы с двумя рядами
     ячеек больше портрета (замер на стенде: портрет 82 → блок 149).
     Потолок 132px — выше кукла станет длиннее правой колонки и потянет вещи
     вниз; пол 82px — прежний размер для узких экранов вроде 320px. */
  .перс-кукла .doll {
    --портрет: clamp(82px, calc((100vw - 200px) / 1.82), 132px); }
  /* колонке раскидки хватает 150px, но ТОЛЬКО если строка кнопок не распирает
     её изнутри: «сохранить · сбросить (6)» просила 173px и одна держала
     ширину всей колонки. Кнопки в одну строку — решение Mike, поэтому жмём
     сами кнопки, а не переносим их */
  .стат-панель { gap: 3px; }
  .стат-панель button[type=submit] { font-size: 10px; padding: 2px 6px; }
  .стат-панель #стат-сброс { font-size: 10px; }
  .стат-панель #стат-остаток { font-size: var(--к-метка); margin-left: 2px; }
  /* строки раскидки крупнее, подписи короткие — плюс попадает под палец */
  .перс-статы .effect-line, .перс-владения .effect-line {
    font-size: var(--к-знач); padding: 4px 0; }
  .перс-статы .стат-полно { display: none; }
  .перс-статы .стат-кратко { display: inline; font-weight: bold; letter-spacing: 1px; }
  /* СТРОКА С ВЛОЖЕННЫМ ОЧКОМ — самая длинная (правка Mike 2026-07-28): к числу
     добавляется «+1» и вылезает вторая кнопка «−», строка просила 160 px при
     колонке 152 и переносилась пополам. Ужимаем сами части: кнопки (37→30),
     надбавку и зазор, — колонке хватает 158 px, кукла теряет всего пару
     пикселей ширины */
  .перс-статы .effect-line, .перс-владения .effect-line { gap: 6px; }
  .перс-статы .plusbtn, .перс-владения .plusbtn { font-size: 18px; padding: 2px 7px; }
  .стат-набор { font-size: var(--к-мелко); }
  .экран-режим { flex: 1; text-align: center; padding: 8px 6px; }
  .экран-режимы { margin: 6px 0 8px; }
  .разв-владения, .разв-умения { flex: 1 1 100%; }
  .разв-пути .путь { flex: 1 1 100%; }
  /* на телефоне пять ремёсел в строку не читаются — по две */
  .разв-ремёсла { flex-wrap: wrap; }
  .разв-ремёсла .ремесло { flex: 1 1 46%; }
}

/* «Путь новичка» — лентой шагов над рабочей зоной (правка 2026-07-25) */
/* лента — такой же ЛИСТ, как всё вокруг (правка Mike 2026-07-27): своя
   кромка #b8ad91 и радиус действия делали её единственным блоком экрана с
   другим краем */
.перс-новичок { background: var(--лист) !important;
  border: 1px solid var(--лист-кромка) !important;
  padding: 6px 10px !important; border-radius: var(--р-лист); margin-bottom: 10px; }
.новичок-шаги { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--к-мелко);
                margin: 2px 0 3px; }
.новичок-шаг.готов { color: var(--тише-лист); }

/* ═══════════════════════════════════════════════════════════════════════
   ЭКРАН «РЫНОК» (концепт Mike 2026-07-25): комиссионка и мастерская —
   один экран с режимами, как и было задумано в 05-мета-контуре.
   Было: мастерская — вкладка под одну карточку (117px из 512), витрина
   упёрта в 920px (72% экрана), группы без «Расходников».
   ═══════════════════════════════════════════════════════════════════════ */
.рынок-раскладка { display: grid; grid-template-columns: 250px 1fr;
  gap: var(--сет-зазор); align-items: start;
  /* воздух после ряда режимов (правка Mike 2026-07-29): выравнивание убрало
     личные отступы первых детей, и раскладка прилипла к меню. Отступ теперь
     ОБЩИЙ у сетки — линия колонок остаётся ровной */
  margin-top: 14px; }
/* в режиме «Купить» справа встаёт колонка групп (09-интерфейс) */
.рынок-раскладка.с-группами { grid-template-columns: 250px 1fr 180px; }
.рынок-слева, .рынок-работа, .рынок-группы { min-width: 0; }
/* РОВНАЯ ВЕРХНЯЯ ЛИНИЯ (правка Mike 2026-07-29): первые элементы всех трёх
   колонок стоят на одной горизонтали в любом режиме. Ломали её собственные
   отступы первых детей: плитки слева несут margin-top 10px, вкладки и
   заголовки справа — ноль, и колонки начинались вразнобой */
.рынок-слева > :first-child, .рынок-работа > :first-child,
.рынок-группы > :first-child { margin-top: 0; }
/* у «Продать» рабочая зона начинается вкладками — прижимаем их к линии и
   держим ту же высоту строки, что у плиток, чтобы линия читалась глазом */
.рынок-работа > .tabs { margin-top: 0; }
/* min-width:0 обязателен: у общего .fighter он 280px — блок распирал
   колонку в 250px и числа лезли под рабочую зону */
.рынок-слева .fighter { min-width: 0; background: none; border: none;
                        padding: 0; }
/* узкая колонка: длинная пара «подпись — значение» переносится, а не
   вылезает в рабочую зону */
.рынок-слева .effect-line { flex-wrap: wrap; }
.рынок-слева .effect-line span { min-width: 0; }
.рынок-группы a { display: block; font-size: var(--к-мелко); padding: 1px 0;
                  text-decoration: none; }
.рынок-группы a.акт { font-weight: bold; color: #000; }
.рынок-группы a.пусто { color: var(--тише-лист); }
/* строка пакетного ремонта — ради неё мастерская и осталась режимом */
.мастер-пачка { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; padding: 7px 10px; background: var(--лист);
  border: 1px solid #b3ab97; border-radius: var(--р-действие); font-size: var(--к-база); }
.кн-главная { background: #8d1414; color: #fff; font-weight: bold;
              padding: 5px 14px; }
.кн-главная:hover:not(:disabled) { background: #a01717; color: #fff; }

@media (max-width: 760px) {
  .рынок-раскладка, .рынок-раскладка.с-группами { display: block; }
  .рынок-слева { margin-bottom: 10px; }
  /* группы — лентой под витриной, а не колонкой в 180px */
  .рынок-группы { margin-top: 12px; }
  .рынок-группы a { display: inline-block; margin-right: 10px; }
}


/* ══ ЗАЛИПШИЙ HOVER НА ТАЧСКРИНЕ (Mike 2026-07-25) ═══════════════════════
   iOS оставляет :hover на элементе после тапа, пока не ткнёшь в другое
   место, — и кнопка/вкладка/галка стоит подсвеченной, будто выбрана.
   Наведение имеет смысл только там, где есть курсор, поэтому на устройствах
   без него возвращаем всё к спокойному виду. */
@media (hover: none) {
  .выброс-галка:hover { color: var(--тихо); background: none; }
  button:hover:not(:disabled) { background: var(--действие-фон);
                                border-color: var(--действие-кромка); }
  .кн-опасно:hover:not(:disabled) { background: #8d1414; }
  .как-текст:hover:not(:disabled) { color: var(--тихо); }
  .tab:hover, .tab:hover:not(.active) { background: var(--действие-фон); color: #4a463d; }
  .tab.active:hover { background: var(--лист-поле); color: #1f1f1f; }
  .экран-режим:hover { background: var(--действие-фон); color: #4a4a44; }
  .нав-мета .таб:hover { background: var(--кнопка); color: var(--текст); }
  .нав-мета .таб.active:hover { background: var(--лист-поле); color: #1f1f1f; }
  .шапка-сост .чип:hover { background: var(--кнопка); color: var(--текст); }
  .шапка-ник:hover { background: var(--кнопка); color: var(--золото); }
  .chat .chat-tab:hover { background: var(--кнопка); color: var(--текст); }
  .chat .chat-tab.active:hover { background: var(--лист-поле); color: #1f1f1f; }
  .онлайн-кнопка:hover, .чат-свернуть:hover { background: var(--кнопка); }
  .чат-язычок:hover { background: var(--кромка-золото); }
  .шапка-меню a:hover, .шапка-меню .как-ссылка:hover { background: none;
                                                       color: var(--текст); }
}


/* ══ ИНФОРМАЦИОННЫЕ ОКНА БОЙЦОВ (решения Mike 2026-07-25) ═══════════════
   Кубик «i» рядом с ником открывает окно поверх игры. Игра НЕ затемняется:
   игрок продолжает драться и видит, как соперник переодевается в турнире.
   Кукла в окне уменьшена — три окна должны помещаться на экране и не
   мешать бою. */
.инфо-кубик {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; cursor: pointer; user-select: none;
  /* по центру строки ника: середина кубика совпадает с серединой текста
     (правка Mike 2026-07-25 — раньше сидел на 3 px ниже) */
  vertical-align: middle; position: relative; top: -1px;
  /* ПЛИТКА ВРАТ В МИНИАТЮРЕ (правка Mike 2026-07-26: «ближе к шапке»).
     Кубик берёт ровно те тона, что плитка часов набора наверху: тёмный
     камень, золотая кромка `#b39b5e`, золотая серифная «i» `#ffe0a0`
     (контраст 5.2–7.0). Значок читается как кусочек шапки, опущенный
     в строку с ником, — и одинаково узнаётся на бумаге и на камне. */
  background: linear-gradient(#6b5a33, #574828);
  border: 1px solid #b39b5e;
  border-radius: var(--р-гнездо);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  font: bold var(--к-метка)/1 Georgia, serif; color: #ffe0a0;
}
.инфо-кубик:hover {                      /* наводка — как подсветка плитки */
  background: linear-gradient(#8a7442, #6b5a33);
  border-color: var(--золото); color: #fff3d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
              0 0 0 1px rgba(255, 217, 138, .30);
}
/* ОДИН вид на всех экранах (решение Mike 2026-07-26). Раньше на камне
   (зона онлайна, чипы соперников) кубик перекрашивался в тёмный — рядом с
   такими же кубиками ленты это читалось как два разных значка. Светлая
   клавиша одинаково узнаётся и на бумаге, и на камне, а на тёмном фоне
   она даже заметнее. */

.инфо-окно {
  position: fixed; z-index: 50; width: 330px;
  background: var(--лист); border: 1px solid var(--кромка);
  border-radius: var(--р-лист); box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
  /* карточка тянется за угол (Mike 2026-08-01) — как модальные окна:
     открывается по границам информации, потянул — размер твой */
  overflow: hidden; min-width: 280px; min-height: 160px;
}
/* в ручном размере тело заполняет окно и скроллится при нехватке места */
.инфо-окно.ручной .инфо-тело { flex: 1 1 auto; min-height: 0; overflow: auto; }
.инфо-окно.тянут { box-shadow: 0 18px 46px rgba(0, 0, 0, .45); opacity: .97; }
.инфо-окно.мигни { outline: 2px solid var(--кромка-золото); }
.инфо-шапка {
  display: flex; align-items: center; gap: var(--ш2); cursor: grab;
  background: linear-gradient(var(--камень-верх), var(--камень-низ));
  color: var(--текст); border-bottom: 1px solid var(--кромка);
  padding: 5px 8px; user-select: none;
}
.инфо-шапка:active { cursor: grabbing; }
.инфо-имя { font-weight: bold; font-size: var(--к-база); }
.инфо-кнопки { margin-left: auto; display: flex; gap: var(--ш1); }
.инфо-кнопки button {
  width: 22px; height: 20px; padding: 0; font-size: var(--к-мелко); line-height: 1;
  background: var(--кнопка); color: var(--текст);
  border: 1px solid var(--кромка); border-radius: var(--р-действие); cursor: pointer;
}
.инфо-кнопки button:hover { background: var(--кнопка-навод); color: var(--золото); }
.инфо-тело { padding: var(--ш2) var(--ш3); }
.инфо-ждём { color: var(--тихо); text-align: center; padding: 30px 0; }
/* пара «кукла + числа» по общему примитиву (правка Mike 2026-07-27): stretch
   вместо высоты по содержимому — иначе список чисел кончался раньше куклы и
   под ним зияла дыра до кнопки */
.окно-тело { display: flex; gap: var(--ш3); align-items: stretch; }
/* кукла в окне мельче инвентарной: три окна на экране + не мешают бою.
   --карт-зум ставит окна.js: базовое окно ×2 растит ТОЛЬКО куклу — текст
   статический (правка Mike 2026-08-03), ужатие окна возвращает 96px */
.окно-кукла { --портрет: calc(96px * var(--карт-зум, 1)); flex-shrink: 0; }
/* полоса HP в карточке бойца — тоньше (Mike 2026-08-03: при крупной
   кукле прежние 15px смотрелись жирно) */
.окно-кукла .hpbar { height: 12px; }
.окно-кукла .hpwrap .hpnum { line-height: 12px; }
/* послужной список — сразу под статами с небольшим отступом (правка Mike
   2026-08-03): прижатие к низу при крупной кукле рвало колонку дырой */
.окно-числа .пб-низ { margin-top: 14px !important; }
.окно-числа { flex: 1; min-width: 0; max-width: 230px; font-size: var(--к-мелко);
  /* потолок ширины (Mike 2026-08-01): при растянутом окне числа держатся
     у подписей, а не уезжают за правый край — лишняя ширина пустует */
              display: flex; flex-direction: column; }
.окно-числа .строка { display: flex; justify-content: space-between; gap: 8px;
  padding: 1px 0; white-space: nowrap; }
.окно-числа .строка span { overflow: hidden; text-overflow: ellipsis; }
.окно-числа .строка b { color: #16168d; }
/* разбивка в узкой карточке — не переносится и не давит на имя стата */
/* в узкой колонке карточки разбивка ужимается, иначе имя стата обрезается
   в «Ловк…» (замечено при проверке 2026-07-26) */
.окно-числа .стат-расклад { margin-left: 3px; white-space: nowrap;
  font-size: var(--к-бейдж); }
.окно-числа .строка { gap: 4px; }
.окно-числа .строка .бонус { color: var(--хорошо); font-size: var(--к-метка); margin-left: 3px; }
.окно-числа .раздел {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--лист-кромка);
  color: var(--тихо); font-size: var(--к-метка); letter-spacing: .6px;
  text-transform: uppercase;
}
/* кнопки живут ПОД куклой её шириной (правка Mike 2026-08-01): раньше низ
   лежал отдельным рядом на всю карточку и растягивался с окном */
.окно-низ { display: flex; flex-direction: column; gap: 4px;
  margin-top: var(--ш1); align-items: center; }
/* кнопки СТАТИЧНОГО размера по центру куклы (правка Mike 2026-08-03:
   при крупной кукле width:100% раздувал «написать приватно» во всю её
   ширину) */
.окно-низ button { width: auto; min-width: 170px; }

/* полка наблюдений — в шапке: свёрнутые карточки переживают переходы */
/* Полка свёрнутых карточек. Она НЕ имеет права расти бесконечно (Mike
   2026-07-25): в строку влезает пара имён, остальные уходят под стрелку.
   Так шапка не превращается в панель задач, а вернуть бойца — по-прежнему
   один клик для тех, за кем следишь прямо сейчас. */
.полка-наблюдений { display: flex; align-items: center; gap: var(--ш1);
  position: relative; }
.полка-чип .имя { max-width: 96px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.полка-ещё { gap: 4px; }                    /* постоянная ширина: глаз, число, галка */
.полка-ещё .глаз { font-size: var(--к-мелко); filter: grayscale(1) brightness(1.7); }
.полка-ещё .галка { color: var(--тихо); font-size: var(--к-бейдж); }
.полка-ещё b { font-weight: bold; }
/* раскрытая полка видна и без списка: мишень «нажата» */
.полка-ещё.раскрыт { background: var(--кнопка-навод); color: var(--золото);
  border-color: var(--кромка-золото); }
.полка-ещё.раскрыт .галка { color: var(--золото); }
.полка-список[hidden] { display: none; }   /* иначе display:grid ниже
   перебивает служебный hidden и список висит открытым */
.полка-список {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 168px; padding: var(--ш1); display: grid; gap: 2px;
  background: linear-gradient(var(--камень-верх), var(--камень-низ));
  border: 1px solid var(--кромка-золото); border-radius: var(--р-лист);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.полка-список .полка-чип { justify-content: flex-start; gap: 6px; }
/* строка полки: метка «бой» слева у края, ник следом, крестик прижат к
   правому краю (правка Mike). Растяжки имени тут мало: у него есть предел
   ширины на длинные ники, поэтому у коротких крестик отплывал от края —
   двигаем его автоматическим отступом, а не растяжкой соседа */
.полка-список .полка-чип .имя { flex: 0 1 auto; }
.полка-список .полка-чип .кр { margin-left: auto; padding-left: 8px; }
.полка-чип {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  background: var(--кнопка); border: 1px solid var(--кромка);
  border-radius: var(--р-действие); padding: 4px 7px;
  font-size: var(--к-мелко); color: var(--текст);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.полка-чип:hover { background: var(--кнопка-навод); color: var(--золото); }
.полка-чип .кр { color: var(--тихо); }
/* Метка боя — отдельная мишень (правка Mike 2026-07-25): клик по имени
   поднимает всё свёрнутое, клик по метке — только бой. Слово в тонкой
   рамке вместо глифа мечей: эмодзи на разных системах рисуется по-разному
   и рядом с «убрать» вырождалось во второй крестик. Красный приглушённый —
   бой виден, но не кричит из шапки. */
.полка-чип .метка-бой {
  font-size: var(--к-бейдж); line-height: 1; letter-spacing: .4px;
  padding: 2px 5px; color: #c98f8f;
  border: 1px solid #8c5252; border-radius: var(--р-метка);
}
.полка-чип .метка-бой:hover { color: #ffdada; border-color: #c47a7a; }
.полка-чип .имя.тускло { color: var(--тихо); }   /* свёрнут только бой */
.полка-чип .кр:hover { color: #ff9b9b; }

/* телефон: окон нет — карточка приезжает шторкой снизу, как чат */
.инфо-шторка { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-height: 70vh; overflow: auto; background: var(--лист);
  border-top: 2px solid var(--кромка-золото);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .35); }
@media (max-width: 760px) {
  .инфо-окно { display: none; }
  .окно-кукла { --портрет: 84px; }
  .полка-наблюдений { display: none; }   /* полка съела бы строку состояния */
}


/* ── окно поединка (решение Mike 2026-07-25) ─────────────────────────
   Та же рама, что у карточки бойца: камень, имя в шапке, «–» и «✕»,
   перетаскивание, полка, живое обновление. Отличие одно — комната шире:
   в бою надо показать обе стороны и журнал разменов, в 300 px это не
   помещается. Журнал прокручивается внутри окна, чтобы окно не росло
   вниз до бесконечности по ходу боя. */
.бой-окно { width: 460px; }
.бой-окно .инфо-тело { max-height: 52vh; overflow-y: auto; padding: var(--ш2); }
.наб-статус { text-align: center; color: var(--лист-поле);
  font-size: var(--к-мелко); text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: var(--ш1); }
.наб-стороны { text-align: center; margin-bottom: var(--ш2);
  padding-bottom: var(--ш2); border-bottom: 1px solid var(--лист-кромка); }
.наб-боец { display: inline-block; }
.наб-мечи { color: #a00; margin: 0 4px; }
.бой-окно .watch-лог { font-size: var(--к-мелко); }
.бой-окно .watch-лог .msg { padding: 1px 0; }
/* страница зрителя осталась как была — лог по центру узкой колонкой */
.watch-страница .watch-лог { max-width: 640px; margin: 0 auto; font-size: var(--к-мелко); }
.watch-страница .наб-статус { margin: 14px 0 4px; }
.бой-шторка .инфо-тело { max-height: 60vh; overflow-y: auto; }

/* ── СВОДКА (итог турнира и итог забега) ─────────────────────────────────
   Блок общий на два экрана (правка Mike 2026-07-27: «окно статистики как
   после башни»). Правила жили внутри `tower_result.html`, и второй такой
   экран пришлось бы верстать заново — ровно то, от чего мы ушли в
   руководстве по вёрстке. Теперь скелет один: вердикт, личные числа
   плиткой, табло участников, журнал. */
.итог-шапка { text-align: center; margin: 6px 0 14px; }
.итог-вердикт { font-size: var(--к-таймер); font-weight: bold; letter-spacing: 2px; }
.итог-победа { color: var(--хорошо); }
.итог-поражение { color: #a00; }
.итог-ничья { color: var(--тихо-лист); }
.итог-нейтр { color: #555; }
.итог-под { color: #777; font-size: var(--к-база); margin-top: 2px; }
.итог-награды { display: flex; gap: 18px; justify-content: center;
  flex-wrap: wrap; background: var(--лист); padding: 8px 12px;
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист); margin-bottom: 14px; }
.итог-награда { text-align: center; min-width: 84px; }
.итог-награда .з { display: block; color: #777; font-size: var(--к-мелко); }
.итог-награда b { font-size: var(--к-крупно); }
.итог-табло { width: 100%; border-collapse: collapse; font-size: var(--к-база); }
.итог-табло th { text-align: right; color: #777; font-weight: normal;
  padding: 3px 6px; border-bottom: 1px solid var(--лист-кромка); white-space: nowrap; }
.итог-табло th:nth-child(-n+2), .итог-табло td:nth-child(-n+2) { text-align: left; }
.итог-табло td { padding: 3px 6px; border-bottom: 1px solid #f0ece3;
  text-align: right; white-space: nowrap; }
.итог-табло tr.я { background: var(--лист); }
.итог-табло tr.я td { font-weight: bold; }
.итог-место { color: #777; width: 26px; }
.итог-первый { color: #b8860b; font-weight: bold; }
.итог-бот { color: #777; }
.итог-вынос { text-align: left; white-space: normal; color: var(--хорошо); }
.итог-кнопки { margin-top: 16px; text-align: center; }
.итог-скролл { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.вынос-моб { display: none; }
/* Телефон (находка Mike 2026-07-26: экран приходилось двигать вправо —
   табло было 497 px в экране 375). Три причины лишней ширины убраны:
   длинные заголовки ужимаются до коротких, колонка выноса уезжает
   строкой под ник, узкие счётчики скрыты как и раньше. */
@media (max-width: 700px) {
  .итог-табло .скрыть-моб, .итог-табло .итог-вынос { display: none; }
  .итог-табло th[data-к] { font-size: 0; }
  .итог-табло th[data-к]::after { content: attr(data-к); font-size: var(--к-мелко); }
  .итог-табло th, .итог-табло td { padding: 3px 4px; }
  .вынос-моб { display: block; color: var(--хорошо); font-size: var(--к-мелко);
    white-space: normal; }
}

/* мелочи каркаса (templates/_каркас.html): ссылка справа в капители зоны и
   плитка «есть что вложить» — они и раньше писались руками на местах, теперь
   у них одно имя (правка Mike 2026-07-27) */
.гл-заголовок-справа { float: right; font-weight: normal; letter-spacing: 0;
                       text-transform: none; }
.гл-плитка.тревога { border-color: var(--тревога); }

/* ── Мастерская панель (dev_панель.html): сетка вещей ─────────────────── */
.дев-сетка { display: grid; gap: var(--ш2);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.дев-вещь { display: grid; grid-template-columns: 46px 1fr; gap: var(--ш2);
  align-items: center; background: var(--лист);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-лист);
  padding: var(--ш1) var(--ш2); }
.дев-вещь.есть { border-color: var(--кромка-золото); }
.дев-имя { font-size: var(--к-мелко); }
.дев-кнопки { grid-column: 2; display: flex; gap: var(--ш1); margin-top: 3px; }
.дев-кнопки button { padding: 2px 8px; font-size: var(--к-метка); }

/* метка «мастер» в меню под ником: ссылка каменная, как все, а «это не для
   игроков» говорит слово (правка Mike 2026-07-27 — цветом было не видно) */
.шапка-меню .меню-метка { margin-left: 6px; font-size: var(--к-бейдж);
  letter-spacing: 1px; text-transform: uppercase; color: var(--золото);
  border: 1px solid var(--кнопка); border-radius: var(--р-метка);
  padding: 0 5px; vertical-align: 1px; }

/* ── ВСПЛЫВАЮЩИЕ ВЕСТИ (static/всплывашка.js, решение Mike 2026-07-27) ────
   Сообщения сервера больше не лежат строкой в потоке и не двигают вёрстку:
   всплывают над содержимым и гаснут через три секунды. Одна за раз.
   `position: fixed` и `pointer-events: none` — весть не перехватывает клик,
   игрок может жать по клетке прямо сквозь неё. */
.вспл-гнездо { position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--шапка) + 10px); z-index: 70;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; max-width: min(92vw, 560px); }
.вспл-весть {
  background: var(--камень-низ); color: var(--текст);
  border: 1px solid var(--кромка-золото); border-radius: var(--р-лист);
  padding: 8px 16px; font-size: var(--к-база); text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s, transform .18s;
}
.вспл-весть.видна { opacity: 1; transform: translateY(0); }

/* СУНДУКИ НА КАРТЕ (решение Mike 2026-07-27). Вскрытый исчезает совсем — взятое
   не показываем; дальний, вне обзора, — ромбом на краю карты в своей
   стороне. Отдельный ряд подсказок Mike снял: «много пространства и никакой
   информации» — метке место на карте, а не рядом с ней. */
.эт-даль { opacity: .5; font-size: var(--к-мелко); }

/* СТРОКА ДЕЙСТВИЙ каркаса: главное слева, тихий уход справа. Раскрытый
   список (журнал) переносится на всю ширину под строкой — иначе он влезал бы
   между кнопками и разваливал ряд. */
.строка-действий { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px; margin-top: 12px; }
.строка-действий form { margin: 0; }
.строка-действий > .эт-журнал { flex: 0 0 100%; }
.свёртка-стрелка { opacity: .7; }

/* ИТОГ ПОЕДИНКА (решение Mike 2026-07-27): по концу боя игрок должен видеть
   разом — победил или проиграл, кто кого добил, чего это стоило и куда выйти.
   Главная строка крупная и жирная, остальное — обычным текстом под ней. */
/* ЦВЕТ ИСХОДА (правка Mike 2026-07-30, по скрину): было `color: var(--текст)`
   — почти белое #f4f0e6, потому что итог сперва жил только в ТЁМНОМ чате.
   На светлом экране боя (лист #f4f0e7) надпись «ВЫ ПОБЕДИЛИ» сливалась с
   бумагой до полной неразборчивости.
   Цвет НЕ ОБЪЯВЛЯЕМ ЗАНОВО: классы `.итог-победа` / `.итог-поражение` уже
   живут выше (вердикт сводок подземелья и турнира) — второе объявление молча
   перекрашивало бы их. Строка боя просто носит те же классы и берёт их тон;
   здесь остаётся только кегль, а для тёмного чата — свои светлые тона. */
.итог-главное { font-size: var(--к-крупно); font-weight: 700; letter-spacing: .04em;
  margin-bottom: 4px; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.итог-строка { font-size: var(--к-база); color: var(--тихо-лист); }
/* в чате фон тёмный — там те же смыслы светлыми тонами */
.chat .итог-главное { text-shadow: none; }
.chat .итог-победа { color: #9ae09a; }
.chat .итог-поражение { color: #ff9f95; }
.chat .итог-ничья { color: #cfc9a8; }
.chat .итог-строка { color: var(--тихо); }


/* ── СВИТОК-СПИСОК (Mike 2026-07-29): свои всплывающие списки ──────────────
   Нативный дропдаун ОС выпадал из газетного стиля. Кнопка — поле как у
   прочих форм (лист, гнездовая кромка, вдавленность); панель — «выписка из
   описи»: жёсткая кромка и тень подложки, тёмная строка выбора как активная
   вкладка, метки-разделы капителью. Панель живёт у body (fixed) — её не
   режет overflow карточек. На телефоне — шторка снизу, строки под палец. */
.свиток-скрыт { position: absolute !important; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: -1px; }
.свиток-кнопка { display: inline-flex; align-items: center; gap: 6px;
  justify-content: space-between; max-width: 100%; min-width: 0;
  font: var(--к-мелко) Verdana; color: #333; text-align: left;
  padding: 3px 7px; background: var(--лист);
  border: 1px solid var(--гнездо-кромка); border-radius: var(--р-гнездо);
  box-shadow: var(--вдавленность-мягкая); cursor: pointer; }
.свиток-кнопка .свиток-текст { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.свиток-кнопка .свиток-галка { color: var(--тихо-лист); font-size: 9px; }
.свиток-кнопка.открыт { background: #efe9db; }
.свиток-поп { position: fixed; z-index: 950; display: flex;
  flex-direction: column; min-width: 160px; max-width: min(340px, 92vw);
  max-height: 50vh; background: var(--лист);
  border: 1px solid #4a453a; border-radius: 3px;
  box-shadow: 0 4px 12px rgba(52, 44, 30, .4); }
.свиток-поиск { margin: 6px 6px 3px; padding: 3px 7px; font: var(--к-мелко) Verdana;
  border: 1px solid var(--гнездо-кромка); border-radius: var(--р-гнездо);
  background: #fffdf8; }
.свиток-лента { overflow-y: auto; padding: 3px 0; overscroll-behavior: contain; }
.свиток-ряд { padding: 5px 12px; font: var(--к-мелко) Verdana; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.свиток-ряд:hover { background: #e9e3d5; }
.свиток-ряд.выбран { background: #2f2b22; color: #f0e6d2; }
.свиток-ряд.выкл { color: #b5ae9f; cursor: default; }
.свиток-раздел { padding: 7px 12px 2px; font: bold var(--к-бейдж) Verdana;
  text-transform: uppercase; letter-spacing: 1px; color: var(--тише-лист);
  border-top: 1px solid #eee8dc; }
.свиток-раздел:first-child { border-top: 0; }
/* складной раздел (Mike 2026-07-29): выкатываемся свёрнутыми, игрок
   разворачивает нужную группу; строка-заголовок ведёт себя как кнопка */
.свиток-раздел.складной { cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 6px; padding-bottom: 6px; }
.свиток-раздел.складной:hover { background: #efe9db; }
.свиток-раздел-галка { color: var(--тихо-лист); font-size: 9px; }
/* телефон: шторка снизу, в зоне большого пальца — по духу чат-шторки */
.свиток-поп.шторкой { left: 0; right: 0; bottom: 0; top: auto !important;
  max-width: none; max-height: 62vh; border-radius: 10px 10px 0 0;
  border-bottom: 0; }
.свиток-поп.шторкой .свиток-ряд { padding: 11px 16px; font-size: var(--к-база); }
.свиток-поп.шторкой .свиток-поиск { padding: 8px 10px; font-size: var(--к-база); }

/* строка выбора цели в широкой зоне карточки (Mike 2026-07-29): подпись,
   список и кнопка в один ряд; на телефоне переносится сама */
.цель-строка { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 5px; }
.цель-строка .свиток-кнопка { flex: 0 1 auto; }
.цель-строка button { padding: 2px 10px; }
/* колонка картинки: форма, кнопка и свиток занимают её ширину целиком —
   раньше нативный select и «использовать» вылезали за кромку (Mike) */
.item-pic form { width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 3px; min-width: 0; }
.item-pic .свиток-кнопка { width: 100%; }
.item-pic button { width: 100%; max-width: 100%; }


/* ── Торговое сообщение (Mike 2026-07-29) ────────────────────────────────
   Форма в левом столбце рынка и строки-ссылки в ленте чата */
.реклама-форма { display: flex; flex-direction: column; gap: 4px; }
.реклама-форма .свиток-кнопка { width: 100%; }
.реклама-форма button { padding: 3px 0; }
.msg.торговая { background: rgba(184, 134, 11, .07);
  border-left: 2px solid #b8860b; padding-left: 4px; border-radius: 2px; }
.msg.торговая .торг-ссылка { color: #6b4f0e; font-weight: bold;
  text-decoration: none; border-bottom: 1px dotted #b8860b; }
.msg.торговая .торг-ссылка:hover { color: #8d1414; border-bottom-color: #8d1414; }


/* FAQ (Mike 2026-07-29): оглавление плиткой, разделы капителью */
.фак-оглавление { display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--лист-кромка); font-size: var(--к-мелко); }
.panel h2 { font-size: var(--к-база); text-transform: uppercase;
  letter-spacing: 1px; color: #666; margin: 16px 0 6px; }

/* ── ПРИЁМЫ на «Развитии» (дизайн/12, Mike 2026-07-30) ────────────────────
   ВСЕ В ОДНУ СТРОКУ (правка Mike), как ремёсла: приёмы выбирают, сравнивая
   их между собой, а перенос на вторую строку ломает сравнение — половина
   уезжает под сгиб. Колонка узкая, поэтому длинные тексты переносятся, а не
   обрезаются: у приёма два разных смысла — чем заряжается и что даёт, — и
   оба надо читать целиком. */
/* wrap оставлен ради телефона: на широком экране он не сработает — база 0,
   карточки всегда влезают в строку */
/* ДВА РЯДА ПО ЧЕТЫРЕ (Mike 2026-07-31). Приёмов стало восемь, и flex-строка
   растягивала их в одну узкую ленту: карточка приёма высокая — в ней сводка
   вложенного и три ветки, — и на восьми колонках текст сминался в столбик по
   слову. Сетка держит ровно четыре в ряд, поэтому рядов выходит два.
   `grid` вместо `flex` ещё и выравнивает высоту рядов между собой. */
.разв-приёмы { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 7px; align-items: stretch; }
.разв-приёмы .приём { min-width: 0;
  border: 1px solid var(--рамка); border-radius: 4px; padding: 6px 8px;
  background: var(--лист); display: flex; flex-direction: column; gap: 3px; }
.разв-приёмы .приём.взят { border-color: var(--кромка-золото);
  box-shadow: inset 3px 0 0 var(--кромка-золото); }
.разв-приёмы .приём-шапка { display: flex; align-items: baseline; gap: 6px; }
.разв-приёмы .приём-значок { font-size: var(--к-акцент); line-height: 1;
  color: var(--кромка-золото); }
.разв-приёмы .fname { font-size: var(--к-мелко); line-height: 1.2; }
.разв-приёмы .приём-ступень { margin-left: auto; font-size: var(--к-метка);
  color: var(--тихо-лист); }
@media (max-width: 900px) {
  .разв-приёмы { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .разв-приёмы { grid-template-columns: 1fr; }
}
.разв-приёмы .рем-строка { font-size: var(--к-метка); line-height: 1.35;
  word-break: break-word; }
.разв-приёмы .рем-строка.сер { color: #777; }
.разв-приёмы .зел { color: var(--хорошо); }
.разв-приёмы .треб { color: var(--тревога); }
.разв-приёмы .приём-пара { font-size: var(--к-метка); line-height: 1.4; }
.разв-приёмы .приём-пара .lbl { color: var(--тихо-лист); }
.разв-приёмы .приём-зона { display: flex; align-items: center; gap: 5px;
  margin-top: 2px; }
.разв-приёмы .приём-зона select { font-size: var(--к-метка); padding: 1px 2px; }
.разв-приёмы form { margin-top: auto; }
.разв-приёмы button { width: 100%; padding: 3px 0; font-size: var(--к-метка); }
.разв-приёмы .приём-зона button { width: auto; }
/* на планшете по двое, на телефоне по одному — как у ремёсел: вчетверо
   узкая колонка на 400 px превращает карточку в столбик по слову в строке */
@media (max-width: 900px) { .разв-приёмы .приём { flex: 1 1 46%; } }
@media (max-width: 560px) { .разв-приёмы .приём { flex: 1 1 100%; } }

/* ── ДВЕ ВЕТКИ РАЗВИТИЯ ПРИЁМА (Mike 2026-07-31) ──────────────────────────
   Обе рядом и обе подписаны тем, что дадут: выбор очка — главное решение на
   этом экране, и делать его вслепую по кнопке «ступень N» нельзя. */
/* СТОЛБИКОМ, А НЕ В СТРОКУ: карточки приёмов стоят по четыре в ряд и узки —
   две ветки бок о бок в них сминаются до нечитаемого. Сверху вниз каждая
   ветка получает всю ширину карточки. */
/* СВОДКА ВЛОЖЕННОГО — три числа в строку, видны всегда, включая вершину */
.приём-вложено { margin: 7px 0; padding: 6px 8px; border-radius: 3px;
  background: var(--лист-поле); font-size: var(--к-метка);
  color: var(--тихо-лист); line-height: 1.55; }
.приём-вложено > div { display: flex; align-items: baseline; gap: 6px; }
.приём-вложено .имя { flex: 1 1 auto; }
.приём-вложено .сер { flex: 0 1 auto; text-align: right; }
/* цена следующей ступени — отдельной строкой над ветками */
.приём-цена { margin: 8px 0 4px; font-size: var(--к-метка);
  color: var(--тихо-лист); }
.приём-цена b { color: var(--чернила); }
/* переиграть — кнопки в строку, тише основных */
.приём-снять { margin-top: 8px; display: flex; flex-wrap: wrap;
  gap: 4px 6px; align-items: baseline; font-size: var(--к-метка); }
.приём-снять .lbl { flex: 1 0 100%; color: var(--тихо-лист); }
.приём-снять button.снять { font-size: var(--к-метка); padding: 2px 7px;
  opacity: .75; }
.приём-снять button.снять:hover { opacity: 1; }
.приём-вложено b { color: var(--чернила); font-weight: bold; }
.приём-вложено .итого { padding-bottom: 4px; margin-bottom: 4px;
  border-bottom: 1px solid var(--лист-кромка); }

.приём-ветки { display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; }
.приём-ветки .ветка { padding: 6px 8px;
  border: 1px solid var(--лист-кромка); border-radius: 3px;
  background: var(--лист-поле); display: flex; flex-direction: column;
  gap: 4px; align-items: flex-start; }
.приём-ветки .ветка.пусто { opacity: .45; }
/* ветка открыта, но камней нет: подпись читается, кнопка не жмётся */
.приём-ветки .ветка.не-по-карману { opacity: .6; }
.приём-ветки .ветка button[disabled] { cursor: not-allowed; }
.приём-ветки .ветка-имя { font-size: var(--к-метка); text-transform: uppercase;
  letter-spacing: .5px; color: var(--тихо-лист); }
.приём-ветки .ветка-даст { font-size: var(--к-метка); line-height: 1.4; }
.приём-ветки .ветка select { max-width: 100%; }
.приём-ветки .ветка button { margin-top: 2px; }

/* ── ПРИЁМЫ В ФОРМЕ ХОДА (дизайн/12, концепт Mike 2026-07-30) ─────────────
   Три канала, каждый о своём и потому не спорят: ИКОНКА — приём (клик
   применяет), ТЕНЬ на строке — что делал соперник, ШЁПОТ при наведении —
   тот же факт словами. Цифр в строках нет: строка несёт только тень. */
/* РЯД ДЕЛИТСЯ РОВНО ПОПОЛАМ (правка Mike 2026-07-30): половины совпадают с
   колонками «Атака» и «Защита» под ними, поэтому граница читается сама — свои
   иконки слева, чужие справа от середины. Отступ и доли те же, что у
   `.ход-колонки`, иначе середина ряда разъедется с серединой формы. */
.ход-приёмы { display: flex; gap: 14px; justify-content: center;
  margin: 0 0 10px; }
.ход-приёмы > div { flex: 1 1 0; min-width: 0; display: flex; gap: 10px;
  align-items: flex-start; flex-wrap: wrap; }
.ход-приёмы > .чужие { border-left: 1px solid var(--лист-кромка);
  padding-left: 14px; margin-left: -14px; }
.ход-приёмы > .чужие:empty { border-left: none; }
/* половины держат середину, как колонки «Атака/Защита» ниже (правка Mike
   2026-08-01): мои прижаты к центральной границе справа, чужие — слева;
   если соперник без приёмов (боты), пустой div не рендерится вовсе
   (_ход_форма) и одинокая половина встаёт по центру, а не в левый угол */
.ход-приёмы > .мои { justify-content: flex-end; }
.ход-приёмы > .чужие { justify-content: flex-start; }
.ход-приёмы > div:only-child { justify-content: center; }
.ход-приём { width: 50px; text-align: center; position: relative; }
.ход-приём .ячейка { width: 44px; height: 44px; margin: 0 auto;
  border: 1px solid var(--лист-кромка); border-radius: 3px;
  background: var(--лист-поле); display: flex; align-items: center;
  justify-content: center; font-size: var(--к-акцент); line-height: 1;
  color: var(--тихо-лист); filter: grayscale(1); opacity: .5;
  transition: .15s; }
.ход-приём .полоса { height: 3px; margin: 3px 2px 0; border-radius: 2px;
  background: var(--жёлоб); overflow: hidden; }
.ход-приём .полоса i { display: block; height: 100%;
  background: var(--тихо-лист); transition: width .25s; }
.ход-приём .счёт { display: block; font-size: var(--к-метка);
  color: var(--тихо-лист); margin-top: 2px; }
/* заряжен — цвет вернулся, кромка золотая, курсор-рука */
.ход-приём.готов { cursor: pointer; }
.ход-приём.готов .ячейка { filter: none; opacity: 1;
  border-color: var(--кромка-золото); background: #fdf6e3;
  box-shadow: 0 0 0 1px var(--кромка-золото) inset,
              0 0 7px rgba(138, 120, 80, .45); color: #5a4a22; }
.ход-приём.готов:hover .ячейка { box-shadow: 0 0 0 2px var(--кромка-золото) inset,
                                             0 0 11px rgba(138, 120, 80, .7); }
.ход-приём.готов .полоса i,
.ход-приём.выбран .полоса i { background: var(--кромка-золото); }
.ход-приём.готов .счёт { color: var(--кромка-золото); font-weight: bold; }
/* выбран кликом — ждёт отправки хода вместе с ним */
.ход-приём.выбран .ячейка { box-shadow: 0 0 0 2px var(--кромка-золото) inset,
                                        0 0 14px rgba(138, 120, 80, .9); }
.ход-приём.висит .ячейка { filter: none; opacity: .85;
  border-color: var(--хорошо); color: var(--хорошо); }
.ход-приём.чужой { opacity: .45; }
.ход-приём.чужой .ячейка { border-style: dashed; }
/* карточка условия — при наведении на иконку */
.ход-приём .условие { position: absolute; left: 0; top: 100%; margin-top: 6px;
  width: 240px; background: #221f1a; color: #f0ece2; border-radius: 3px;
  padding: 8px 10px; font-size: var(--к-метка); line-height: 1.5;
  text-align: left; opacity: 0; pointer-events: none; transition: .12s;
  z-index: 20; box-shadow: 0 3px 12px rgba(0, 0, 0, .5); }
.ход-приём:hover .условие { opacity: 1; margin-top: 4px; }
.ход-приём .условие .имя { color: #e8c877; letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 5px; }
.ход-приём .условие .пункт { display: flex; justify-content: space-between;
  gap: 10px; }
.ход-приём .условие .пункт.есть { color: #9ed19e; }
.ход-приём .условие .пункт b { font-weight: normal; color: #8f887a;
  white-space: nowrap; }
.ход-приём .условие hr { border: none; border-top: 1px solid #3a352c;
  margin: 6px 0; }
.ход-приём .условие .даёт { color: #cfc7b6; }

/* ПОДСКАЗКА ПРО ТЕНЬ — НА ЗАГОЛОВКАХ КОЛОНОК (правка Mike 2026-07-30).
   Раньше объяснение висело на каждой строке и лезло в глаза при любом
   движении мыши по форме. Заголовок — одна мишень на всю колонку: наводишь,
   когда не понял, и не спотыкаешься о подсказку, когда выбираешь ход. */
/* МИШЕНЬ — САМА НАДПИСЬ, а не вся ширина колонки: иначе мышь, идущая от
   иконок приёмов к строкам, каждый раз пересекает заголовок и подсказка
   мигает сама собой — ровно та беда, из-за которой сняли подсказки со строк. */
.ход-заголовок .с-шёпотом { position: relative; cursor: help;
  display: inline-flex; align-items: baseline; gap: 4px; }
.ход-заголовок .с-шёпотом > i { font-style: normal; font-size: var(--к-метка);
  color: var(--тихо-лист); border: 1px solid var(--лист-кромка);
  border-radius: 50%; width: 13px; height: 13px; line-height: 11px;
  text-align: center; font-weight: normal; align-self: center; }
.ход-заголовок .с-шёпотом:hover > i { color: var(--чернила);
  border-color: var(--чернила); }
.ход-заголовок .шёпот { position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); margin-top: 8px; width: 260px; max-width: 86vw;
  background: #221f1a; color: #f0ece2; border-radius: 3px; padding: 8px 10px;
  font-size: var(--к-метка); line-height: 1.5; font-weight: normal;
  letter-spacing: 0; text-transform: none; text-align: left;
  opacity: 0; pointer-events: none; z-index: 20;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  /* ПОКАЗЫВАЕМ ЧЕРЕЗ ДВЕ СЕКУНДЫ (правка Mike 2026-07-30): мгновенное
     появление резко и лезет под руку тому, кто просто ведёт мышь к строкам.
     Задержка стоит ТОЛЬКО на появлении: в правиле без :hover её нет, поэтому
     подсказка гаснет сразу, как только курсор ушёл. */
  transition: opacity .18s ease 0s, margin-top .18s ease 0s; }
.ход-заголовок .шёпот b { color: #e8c877; font-weight: normal; }
.ход-заголовок .с-шёпотом:hover .шёпот { opacity: 1; margin-top: 6px;
  transition-delay: 2s; }

/* ТЕНЬ СОПЕРНИКА — ТОНКАЯ ПОЛОСКА ПОД СТРОКОЙ (правки Mike 2026-07-30).
   Заливка во всю высоту читалась как выделение строки и спорила с текстом.
   Полоска в 3 px — подсказка на заднем плане, какой она и задумана.

   ПОД строкой, а не по её середине: по середине полоска ложится ровно на
   текст и читается ЗАЧЁРКИВАНИЕМ — «удар в голову» выглядит отменённым.
   Снизу она читается мерой под вариантом, ни с чем не спорит.

   НЕПРОЗРАЧНЕЕ прежней заливки — и это не противоречие. Площадь упала с 33 px
   высоты до трёх, то есть в одиннадцать раз; на прежних 10 % полоска не
   видна вовсе. Даже при 38 % «чернил» в ней втрое меньше, чем было в бледной
   заливке, — глазу она легче.

   НАКОПИТЕЛЬНАЯ: пять делений, каждый из пяти последних разменов красит одну
   пятую. Обе заливки — цвет и риски — рисуются градиентами на ПОЛНУЮ ширину
   строки, иначе деления масштабировались бы вместе с полоской и перестали
   бы совпадать с пятыми долями. */
.ход-строка { position: relative; overflow: hidden;
  --тень-цвет: rgba(170, 30, 25, .38); }
.ход-колонки .защита .ход-строка { --тень-цвет: rgba(30, 60, 140, .34); }
.ход-строка::before { content: ""; position: absolute; left: 0; right: 0;
  bottom: 3px; height: 3px; border-radius: 2px;
  pointer-events: none; transition: background .3s;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px),
                              rgba(0, 0, 0, .07) calc(20% - 1px) 20%),
    linear-gradient(90deg, var(--тень-цвет) 0 calc(var(--шагов, 0) * 20%),
                    transparent calc(var(--шагов, 0) * 20%) 100%); }
/* ноль разменов — полоски нет вовсе, чтобы пустые строки не рябили рисками */
.ход-строка[style*="--шагов: 0"]::before { background: none; }
.ход-строка > * { position: relative; }
/* подпись приёма в строке боя (дизайн/12): золотом, как иконка приёма —
   чтобы взгляд сразу связывал строку лога с иконкой над формой хода */
.бой-приём { color: var(--кромка-золото); font-size: var(--к-метка); }

/* ТАБЛИЦА ПРИЁМОВ В FAQ. На телефоне уезжает вбок ВНУТРИ СЕБЯ, а не тянет
   страницу — правило вёрстки проекта: горизонтально скроллится контейнер. */
.faq-табл { overflow-x: auto; margin: 8px 0 14px; }
.faq-табл table { border-collapse: collapse; min-width: 560px;
  font-size: var(--к-метка); }
.faq-табл th, .faq-табл td { border: 1px solid var(--лист-кромка);
  padding: 5px 8px; text-align: left; vertical-align: top; }
.faq-табл th { background: var(--лист-поле); font-weight: bold; }

/* ── Статистика персонажа (Mike 2026-08-02, 3-й режим экрана) ────────── */
.стата-сетка { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; align-items: start; }
.стата-плитка .cap { margin-bottom: 5px; }
.стата-плитка .effect-line b { white-space: nowrap; }
.стата-вложено span { color: #8a8a7e; padding-left: 8px; }

/* ── Кланы (Mike 2026-08-02, из прототипа в бой) ─────────────────────── */
.онлайн-клан { color: #8a6d3b; font-weight: 700; font-size: var(--к-мелко); cursor: pointer; }
.клан-девиз { color: #666; font-style: italic; margin: 4px 0 6px; }
.клан-шапка-числа { display: flex; gap: 16px; margin: 4px 0 6px; }
.клан-роль { color: #8a6d3b; font-size: var(--к-мелко); }
.клан-роль.клан-глава { font-weight: 700; }
.клан-таблица td, .клан-таблица th { padding: 3px 8px; }
.клан-приглашение { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 5px 6px; border: 1px dotted var(--кромка); margin-top: 6px; }
.клан-приглашение form { display: flex; gap: 6px; }
.клан-основание { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.клан-основание input[name="имя"] { width: 180px; }
.клан-тег-ввод { width: 80px; }
.клан-основание input[name="девиз"] { flex: 1 1 220px; }
.клан-действия { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  align-items: center; }
.клан-действия form { display: flex; gap: 6px; }
.клан-тело { flex: 1 1 100%; min-width: 0; }   /* .panel — flex: содержимому
  кланов нужен свой столбец на всю ширину, иначе блоки лягут в ряд */

/* лог на странице завершённого боя (Mike 2026-08-02) */
.бой-лог-архив { max-width: 640px; margin: 16px auto 0; text-align: left;
  max-height: 340px; overflow-y: auto; border: 1px solid var(--лист-кромка);
  background: var(--лист); padding: 8px 12px; }
.бой-лог-архив .лог-строка { padding: 1px 0; font-size: var(--к-знач); }
.бой-лог-архив .sys { color: #8a6d3b; }

/* ── Время в чате ярче (Mike 2026-08-02, «как в БК») ─────────────────── */
.msg-время { color: #5a5340; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* метка «new» в Библиотеке — вещи, открытые миру сегодня (Mike 2026-08-02) */
.метка-new { color: var(--тревога, #a33); font-size: 9px; font-weight: 700;
  letter-spacing: .5px; margin-left: 2px; text-transform: lowercase; }

/* ── Коллекции СТРОКАМИ (Mike 2026-08-02, вторая редакция) ──────────── */
.кол-строка { display: flex; align-items: center; gap: 14px; margin-top: 8px;
  padding: 8px 10px; background: var(--лист); border: 1px solid var(--лист-кромка); }
.кол-строка.кол-собрана { opacity: .72; border-color: #8a6d3b; }
.кол-шапка { flex: 0 0 130px; }
.кол-шапка .сер { display: block; font-size: var(--к-мелко); }
.кол-вещи { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.кол-вещь { width: 58px; text-align: center; }
.кол-имя { font-size: 9px; line-height: 11px; height: 22px; overflow: hidden;
  color: var(--тише-лист); }
.кол-в-руках .кол-имя { color: inherit; }
.кол-арт { height: 42px; display: flex; align-items: center; justify-content: center; }
.кол-арт img.item-art { max-width: 40px; max-height: 40px; }
.кол-вещь:not(.кол-в-руках) .кол-арт { opacity: .45; filter: grayscale(.7); }
.кол-тайна { font-size: 20px; color: #999; border: 1px dashed var(--кромка);
  width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; }
.кол-счёт { font-size: 10px; font-weight: 700; color: #999; }
.кол-счёт.есть { color: #2e7d32; }
.кол-усиление { flex: 0 0 120px; text-align: center; font-size: var(--к-знач); }
.кол-действие { flex: 0 0 110px; text-align: center; }
.кол-метка-собрана { color: #8a6d3b; font-weight: 700; }
@media (max-width: 760px) {
  .кол-строка { flex-wrap: wrap; gap: 8px; }
  .кол-вещи { flex: 1 1 100%; order: 2; justify-content: flex-start; }
  .кол-шапка { flex: 1 1 auto; order: 1; }
  .кол-усиление { flex: 0 0 auto; order: 1; text-align: left; }
  .кол-действие { flex: 0 0 auto; order: 1; margin-left: auto; }
}