/* Экран «Профиль»: четыре вкладки — Автор, Снаряжение, Наказ, Медали.
   Собран из прежних public/ui/hero.css и public/ui/orders.css: разметка
   переехала как есть, поэтому и префиксы классов остались прежними
   (hero- и ord-). На них завязан светлый слой public/dtf-theme.css, а менять
   имена классов ради косметики запрещено (UI-DTF-HANDOFF.md).

   Общее (.win, .grid, .tabs, .bar, .btn, .medal) живёт в public/styles.css —
   здесь только своё. Нутро панели светлое (береста), поэтому и краски тёмные:
   чернила #221c14, приглушённый #6b5c43, золото #c9a227, кровь #8f1f1a. */

/* Своего --line здесь больше нет, и это нарочно. Слой public/dtf-theme.css
   держит одну линию на весь сайт (--line в :root) и с 11.08.2026 не
   переопределяет её у .hero/.ord — а прежнее берестяное #a89670 стояло раньше
   темы и перебивало её: линии в Профиле были бурыми, когда везде они серые.
   Берестяной запас никуда не делся, он переехал в само место применения:
   var(--line, #a89670). */
.hero,
.ord {
  --ink: #221c14;
  --dim: #6b5c43;
  --gold-ink: #7a5f12;
  --blood: #8f1f1a;
  --life: #3d6323;
  --energy: #2f5580;
  --sheet: rgba(255, 253, 246, .45);
}

.hero b,
.ord b { color: var(--ink); }
.hero .muted,
.ord .muted { color: var(--dim); }
.ord p { line-height: 1.55; }

/* Белая карточка вместо серой заливки («слишком много серого», владелец
   11.08.2026) — это делает слой public/dtf-theme.css: там плитки Профиля и
   Наказа уже сведены к белому фону с линией --line. Своего правила здесь нет
   нарочно, чтобы две краски не спорили; берестяной запас (--sheet выше)
   остаётся на случай, когда слой темы не подключён. */

.hero h4 {
  margin: 14px 0 6px;
  color: #4a3d29;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 11px;
}
.hero h4:first-child { margin-top: 0; }

/* ── Вкладки профиля ───────────────────────────────────────────────────────── */
/* Сами вкладки — общие .tabs/.tab; здесь только счётчик рядом с подписью. */

.prof-tabs .tab .muted { font-size: inherit; opacity: .75; }

/* Строка «подпись — значение»: ею собраны и карточка, и расчётные строки. */
.hero-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(34, 28, 20, .22);
}
.hero-row:last-child { border-bottom: none; }
.hero-row-key { color: var(--dim); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.hero-row-val { min-width: 0; }

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

.hero-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }

.hero-face { text-align: center; }
.hero-face .avatar {
  border: 1px solid #6f5c3c;
  box-shadow: inset 0 0 0 1px rgba(255, 252, 240, .5), 0 2px 8px rgba(0, 0, 0, .35);
}
.hero-profile {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #33507d;
}
.hero-profile:hover { color: var(--blood); }

.hero-about { min-width: 0; }

.hero-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .5px;
}
.hero-name b { color: #3b2c14; }
.hero-level { color: var(--gold-ink); font-weight: bold; }
.hero-alias { font-size: 13px; color: #5f5138; font-style: italic; }

.hero-former { font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.hero-former span { color: #5f5138; }

.hero-cap { color: var(--gold-ink); font-weight: bold; }

/* Числа автора — плитками, чтобы читались с одного взгляда. */
.hero-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin: 10px 0 8px;
}
.hero-num {
  display: block;
  padding: 5px 8px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
  border-radius: 2px;
}
.hero-num i { display: block; font-style: normal; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.hero-num b { font-size: 14px; }

/* Уровень экипировки — одно число с подписью, и всё. Ступень («крепкая») и
   лесенка ступеней ушли отсюда 10.08.2026 по просьбе владельца: числу они
   ничего не добавляли, а строку растягивали на три. Классов .hero-tiers и
   .hero-tier здесь больше нет — разметка их не рисует. */
.hero-gear-line { padding: 6px 8px; background: var(--sheet); border: 1px solid var(--line, #a89670); }
.hero-gear-line b { color: var(--gold-ink); }

/* ── Характеристики ────────────────────────────────────────────────────────── */

.hero-points {
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(201, 162, 39, .16);
  border-left: 3px solid var(--gold-ink);
}
.hero-points--empty { background: rgba(120, 96, 56, .1); border-left-color: #a89670; color: var(--dim); }

.hero-plus { color: var(--life); font-weight: bold; }

/* ── Ровный список: строка, числа в столбик, три строки подробностей ───────── */
/*
   Один и тот же кирпич собирает характеристики и приёмы с сериями. Правила
   владельца (11.08.2026) записаны прямо в этих строчках:
     «зашёл, увидел и понял» — в строке ОДНА мысль и числа, всё остальное
       раскрывается нажатием и не длиннее трёх строк;
     «одна сетка на экран» — колонки заданы один раз, --mv-cols, и шапка стоит
       ровно над своими числами;
     «серого меньше» — заливки нет вовсе: строки делит тонкая линия --line,
       а раскрытая подсказка держится левой чертой;
     «тише — кеглем и насыщенностью» — второй голос это 12–13 кегль и вес 400
       при плотной краске, а не бледный серый.

   Числа моноширинные (tabular-nums): столбик не должен дёргаться от того, что
   в соседней строке цифра шире. */

.mv-list {
  --mv-cols: minmax(110px, 1.15fr) minmax(0, 2fr) 62px 78px minmax(96px, .95fr);
  --mv-gap: 12px;
  --mv-side: 0px;
  margin: 6px 0 10px;
}

/* Столбец под кнопку, что стоит ЗА строкой («+» у характеристики): кнопку в
   кнопку не вложить, поэтому она отдельная ячейка. Ширина столбца задана
   числом, и ровно на неё отодвинута шапка — иначе подпись встала бы не над
   своим числом. Зазора между строкой и этим столбцом нет: он уже внутри
   ширины (34 на кнопку и 8 на отступ). */
.mv-list--stats {
  --mv-cols: minmax(110px, 1.1fr) minmax(0, 1.6fr) 62px 62px 62px;
  --mv-side: 42px;
}

.mv-head,
.mv-line {
  display: grid;
  grid-template-columns: var(--mv-cols);
  column-gap: var(--mv-gap);
  align-items: baseline;
}

.mv-head {
  padding: 0 2px 6px;
  margin-right: var(--mv-side);
  color: var(--dim);
  font-size: 12px;
  font-weight: 400;
  border-bottom: 1px solid var(--line, #a89670);
}

/* Строка: сама она и есть кнопка раскрытия, поля у всех одни, высота одна. */
.mv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mv-side);
  align-items: center;
  border-bottom: 1px solid var(--line, #a89670);
}
.mv-row:last-child { border-bottom: 0; }

.mv-line {
  width: 100%;
  min-height: 38px;
  padding: 8px 2px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-inner, 8px);
  cursor: pointer;
}
.mv-line:hover { background: var(--dtf-hover, rgba(201, 162, 39, .12)); }
.mv-line:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

.mv-name { color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
/* Не изучено — не бледнее, а легче: краска остаётся плотной, меняется вес. */
.mv-row--dim .mv-name { font-weight: 500; }

.mv-say,
.mv-word,
.mv-state { font-size: 12px; }
.mv-say { color: var(--ink-soft, var(--dim)); overflow-wrap: anywhere; }
.mv-word { color: var(--ink-soft, var(--dim)); }
.mv-state { text-align: right; }

.mv-num {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mv-num b { color: var(--ink); }
/* Подпись колонки едет вместе с числом, но видна только на узком экране —
   там шапки со столбцами уже нет, и голое число было бы загадкой. */
.mv-num i { display: none; }
.mv-none { color: var(--dim); }

.mv-have { color: var(--life-ink); }
.mv-buy { color: var(--ink-soft, var(--dim)); cursor: help; }

/* «Плюсик» ровно по своему столбцу: общая кнопка шире (у неё свои поля под
   слово), а тут в ней один знак, и вылезать на соседнее число она не должна. */
.mv-side { display: flex; justify-content: flex-end; }
.mv-side .btn {
  width: 34px;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/* Раскрытая подсказка: ровно три строки словаря и ссылка на полный разбор.
   Ни заливки, ни рамки — только левая черта: плашки внутри плашки тут нет. */
.mv-brief {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0 0 10px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--link);
}
.mv-key { color: var(--ink-soft, var(--dim)); font-size: 12px; font-style: normal; }
.mv-val { color: var(--ink); font-size: 13px; line-height: 1.45; }
.mv-more { grid-column: 2; font-size: 12px; }

/* Счётчик у заголовка списка: «изучено 4 из 15». Тише кеглем и весом. */
.mv-count { margin-left: 8px; color: var(--dim); font-size: 12px; font-weight: 400; }

.mv-note {
  margin-top: 8px;
  color: var(--ink-soft, var(--dim));
  font-size: 12px;
  line-height: 1.5;
}

/* ── Сброс характеристик: одна строка ──────────────────────────────────────── */
/* Стоит на вкладке «Автор», сразу под таблицей очков — там же, где их и
   раскладывают. Всё, что раньше лежало здесь абзацем и списком на пять пунктов
   (951 знак, 390 px), уехало в вопрос ask(): его всё равно задают перед каждым
   сбросом, и прочитать написанное придётся ровно тогда, когда оно нужно.
   На экране осталось: что это, сколько вернётся, кнопка. Цену называет сервер —
   здесь её не считают и не показывают.
   Заголовка у плитки нет вовсе: название стоит в самой строке, и второй раз
   писать его над ней незачем. */

.hero-strip .win-body { padding-top: var(--s3, 12px); padding-bottom: var(--s3, 12px); }

.hero-reset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.hero-reset-name { color: var(--ink); }
/* Второй голос — кеглем и краской, а не бледностью: число читают точно. */
.hero-reset-what { color: var(--ink-soft, var(--dim)); font-size: 13px; }
/* Кнопка прижата к правому краю строки: искать её взглядом не нужно. */
.hero-reset .btn { margin-left: auto; }

/* ── Свёрнутая плитка ──────────────────────────────────────────────────────── */
/* Расчётные строки боя свёрнуты: это «пойти свериться», а не «увидеть с
   порога». Свёрнутая плитка — только шапка с заголовком и переключателем;
   пустое тело убираем совсем, иначе от него остались бы поля. */

.hero-fold-btn { font-size: 12px; }
.hero-fold--off .win-body { display: none; }
.hero-fold--off .win-title { padding-bottom: var(--s3, 10px); }

/* ── Расчётные строки боя ──────────────────────────────────────────────────── */

.hero-zones { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.hero-zone {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 7px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
  border-radius: 2px;
}
.hero-zone i { font-style: normal; font-size: 10.5px; color: var(--dim); }

.hero-chances {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 252, 240, .32);
  border: 1px solid var(--line, #a89670);
}
.hero-chances-head {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.hero-chances-head .muted { text-transform: none; letter-spacing: 0; }
.hero-chances .hero-row-val b { color: var(--gold-ink); }

/* ── Двенадцать слотов ─────────────────────────────────────────────────────── */

/* Плитка стала шире прежних 230px: в узкой колонке (120px под название)
   каталожные имена рвались посреди слова, и по-другому их не спасти — слово
   «Двенадцатикнопочный» в 120px просто не помещается. При 300px названию
   достаётся около 200px, а это два ряда на самое длинное имя каталога
   («Штатив вертикального превосходства»). min() бережёт узкий телефон: на
   экране уже 300px колонка не вылезает за край, а сжимается вместе с ним. */
.hero-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
/* Содержимое прижато к верху, а не к середине. При центрировании подпись слота
   и название стояли у каждой плитки на своей высоте (в ряду из четырёх —
   четыре разные вертикали, разброс до 36px): виноваты были разной длины
   название и приписка. От верха же всё стоит по одной линии всегда. */
.hero-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
  border-radius: 2px;
}
.hero-slot--empty { background: rgba(120, 96, 56, .12); border-style: dashed; }
.hero-slot--empty .hero-slot-icon { opacity: .38; }
/* Сама коробка под иконку задана ниже, в разделе про редкость: её размер держит
   кант, и разводить это по двум местам было бы враньём. */
.hero-slot-text { min-width: 0; }
.hero-slot-label { display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); }

/* НАЗВАНИЕ ВЕЩИ НЕ ЛОМАЕТСЯ ПОСРЕДИ СЛОВА. overflow-wrap: anywhere отсюда снят
   11.08.2026: он резал «Двенадцатикнопочный зверь» на «Двенадцатикно/почный».
   Длинным никам в .win-body он по-прежнему нужен и там остаётся — а каталожное
   имя переносится только по пробелам.
   Высота названия закреплена двумя рядами: в ряду плиток названия стоят по
   одной линии и приписка под ними не пляшет от того, что у соседа имя короче.
   Третий ряд не вырастет — его срежет многоточием, а имя целиком покажет
   подсказка. При 1280 и 375 точках в два ряда влезает весь каталог (мерено:
   самое длинное имя, «Штатив вертикального превосходства», занимает ровно
   39 px — те же два ряда), поэтому срез там не случается вовсе. */
.hero-slot-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.3;
  min-height: 2.6em;
  font-weight: bold;
  color: #3b2c14;
}
/* А вот на совсем узком экране (320 точек, старый маленький телефон) в два ряда
   не помещаются три имени каталога, и многоточие съедало бы у них хвост молча:
   подсказку по наведению на телефоне не прочесть. Даём им третий ряд — высота
   у всех названий по-прежнему одна, просто она там больше. */
@media (max-width: 360px) {
  .hero-slot-name {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: 3.9em;
  }
}

/* Приписка тоже в два ряда, чтобы нижний край плиток совпадал. */
.hero-slot-props {
  display: block;
  min-height: 2.8em;
  font-size: 10.5px;
  line-height: 1.4;
}

/* ── Корзина ───────────────────────────────────────────────────────────────── */

.hero-items td { vertical-align: top; }
/* 64 = рамка редкости 40 (см. .hero-item-pic) + поля ячейки 12+12. Число
   написано честное, а не «сколько-нибудь»: заниженная ширина в таблице ничего
   не ломает, только пока содержимое несжимаемо, — а стоит рисунку стать
   сжимаемым (общее «img { max-width: 100% }» из adaptive.css), как таблица
   поверит объявленному числу и раздавит картинку. Ровно это и случилось на
   витрине Магазина, см. записку у .shop-icon в public/ui/shop.css. */
.hero-item-icon { width: 64px; line-height: 0; }
/* Столбец действий стал шире прежних 178px: у стака под ним живут ещё поле
   «сколько штук» и две кнопки продажи. Уже — и они встают по одной в строку,
   а строка вещи вытягивается на четыре яруса вместо двух. */
.hero-item-act { width: 264px; text-align: right; white-space: nowrap; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-bottom: 3px; }

/* ── Стаки: одинаковые вещи одной строкой ──────────────────────────────────── */
/* Просьба владельца: «если вещей одинаковых много — пусть стакаются, при продаже
   можно выбрать продать все или определённое кол-во». Число стоит прямо у
   названия — это первое, что надо увидеть, и на телефоне тоже. Краска плотная
   (--ink): это число, а не приписка, и читать его придётся точно. */

.hero-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  background: rgba(201, 162, 39, .22);
  border: 1px solid var(--line, #a89670);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: baseline;
}

/* Продажа из стака: «сколько штук», «продать за N» и «все N за M». Стоят одной
   строкой и не двигаются — в них целятся пальцем (см. .claude/skills/arena-motion). */
.hero-sell-many {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 3px;
  white-space: normal;
}

.hero-sell-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-soft);
}
.hero-sell-num input {
  width: 58px;
  padding: 1px 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── «Продать всё» ─────────────────────────────────────────────────────────── */
/* Одна кнопка на весь хлам. Стоит НАД списком, а не под ним: внизу длинной
   корзины её пришлось бы искать прокруткой, а это ровно та жалоба про «нажимать
   продать и подниматься выше», из-за которой продажу и перенесли в профиль.
   Сама кнопка не красится в основную: она уводит разом всё, и торопить с ней
   некого — подтверждение всё равно спросят. */

.hero-bag-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
  border-radius: 2px;
}
.hero-bag-all-text { flex: 1 1 240px; min-width: 0; }
.hero-bag-all-text b { display: block; color: var(--ink); }
.hero-bag-all-text span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.hero-bag-all-btn { flex: 0 0 auto; white-space: nowrap; }

/* Кнопка продажи стоит рядом с «надеть», и цена на ней должна читаться целиком:
   переносить «продать за 250» посередине нельзя — получится обрубок. */
.hero-sell { white-space: nowrap; }

/* Цена под кнопкой: не число (оно уже на кнопке), а напоминание, что скупка
   берёт ровно половину. Тихо, но читаемо — это подпись, а не второе
   предложение.

   Цвет с 10.08.2026 --ink-soft, а не --dim. На светлом слое dtf-theme у .hero
   --dim это #8a8a8a, и на белой панели он давал 3,45 : 1 — для обычного текста
   в 11px мало (норма 4,5 : 1), приписку попросту не прочесть. --ink-soft берёт
   6,29 : 1 на белом и 5,82 : 1 на сером #f6f6f6, а в бересте (#4a3d29 на
   #ded0ae) — 6,9 : 1. Тем же путём в этот заход ушли соседние экраны. */
.hero-sell-note { font-size: 11px; color: var(--ink-soft); }
.hero-lore { font-size: 11px; color: #5f5138; font-style: italic; line-height: 1.45; }
.hero-tagline {
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-req { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--dim); }

/* ── Редкость вещи ─────────────────────────────────────────────────────────── */
/* Редкость приходит из lib/items.mjs и на бой не влияет никак — это витрина.
   Здесь у неё одна работа: помочь выхватить взглядом стоящую вещь среди
   двенадцати слотов и длинной корзины.

   Имена классов и все до одного цвета — те же, что на витрине Магазина
   (public/ui/shop.css): одна и та же вещь обязана краситься одинаково на обоих
   экранах. Пока это две копии одной палитры — свести их в общее место стоит,
   но лезть в чужой файл ради этого нельзя.

   Правила писаны только под свою разметку (.hero-slot-icon, .hero-item-pic,
   .hero-rar): голых `.rar-legend` тут нет нарочно, чтобы два файла не спорили
   за общие имена. Движения нет никакого: редкость — это метка, а не праздник. */

/* Три токена на ступень: чернила плашки, кант и подложка. Обычная ступень
   бесцветна — если красить всё подряд, различать становится нечего.

   Кант с 10.08.2026 темнее прежнего. Пастельные канты (#8cc59a, #8fb6e8,
   #d8ab4f, #b193e0) на светлой плитке слота давали контраст 1.9–2.5:1 при
   норме 3:1 для нетекстового указателя — цветную рамку попросту не было видно.
   Новые тона держат 3:1 и на бересте (.hero, --sheet), и на белом слое
   dtf-theme (#f6f6f6). Подложка --rar-back осталась прежней: она фон, а не
   указатель, и с неё спрос другой.

   ВАЖНО: те же пять строк живут в public/ui/shop.css (.shop .rar-*), и одна
   вещь обязана краситься одинаково на обоих экранах. Пока канты там прежние —
   их надо поправить теми же значениями. */
.hero .rar-common { --rar-ink: var(--dim); --rar-edge: transparent; --rar-back: transparent; }
.hero .rar-uncommon { --rar-ink: #2c6b34; --rar-edge: #3f8a4f; --rar-back: #edf7ef; }
.hero .rar-rare { --rar-ink: #0b4fae; --rar-edge: #2f6fbf; --rar-back: #e9f2ff; }
/* Как и на витрине: тёплая подложка у значка и у плашки со словом остаётся,
   заливки строки нет (решение владельца 11.08.2026). */
.hero .rar-legend { --rar-ink: #8a5a06; --rar-edge: #9c7210; --rar-back: #fff6e2; }
.hero .rar-unique { --rar-ink: #5f34a0; --rar-edge: #7f57c6; --rar-back: #f4edff; }

/* Коробка под иконку одна на все вещи — и на пустой слот тоже. Кант у неё есть
   всегда, просто у обычной вещи он прозрачный: иначе редкая находка раздвигала
   бы соседей на пару точек и ровный ряд слотов пошёл бы волнами. */
.hero-slot-icon,
.hero-item-pic {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  /* Строчный ящик по СЕРЕДИНЕ, а не по опорной линии: опорную линию inline-flex
     берёт у содержимого, а у тонких значков оно крупнее коробки (лишнее срезано
     overflow) — и строка корзины от этого становилась выше соседних. */
  vertical-align: middle;
  border: 2px solid var(--rar-edge, transparent);
  border-radius: 8px;
  background: var(--rar-back, transparent);
}

/* ОБЕ КОРОБКИ ОДНОГО РАЗМЕРА, 40×40. Раньше они были разные (38 у слота, 34
   у корзины), и рисунки внутри тоже: 34 у пустого слота, 28 у надетой вещи,
   26 в корзине — одна и та же вещь показывалась в трёх размерах на одном
   экране, а в ряду из двенадцати слотов пустые значки были заметно крупнее
   надетых. Размер задан здесь, в стилях, а не разметкой: разметка Профиля
   зовёт itemArt с прежними числами (28 и 26), и переписывать её не наше дело.

   ОТКУДА 40. У всех 28 файлов рисунок занимает 224 точки из 256 — своё
   прозрачное поле в 6,25 % с каждой стороны у него уже есть. 34 (рисунок)
   + 4 (кант по 2) + 2 (запас на крупные тонкие значки, см. ниже) = 40,
   и кант отстоит от чернил на 3,1 точки — ровно как на витрине Магазина
   (public/ui/shop.css, .shop-art): одна вещь обязана выглядеть одинаково
   на обоих экранах. */
.hero-slot-icon,
.hero-item-pic { width: 40px; height: 40px; }

.hero-slot-icon > .art-item,
.hero-item-pic > .art-item {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  max-width: none;
}

/* ТОНКИЕ ПРЕДМЕТЫ — ЧУТЬ КРУПНЕЕ ОСТАЛЬНЫХ (то же и в Магазине, там же разбор).
   Стилус, линейка, паяльник, резак и штатив нарисованы длинным узким штрихом
   наискось: чернил в квадрате 10–25 % против 40–55 % у прочих. Перерисовывать
   их нельзя, взять места неоткуда — длинная сторона и так упирается в 224 из
   256. Отдаём им собственное прозрачное поле файла: рисунок 38 вместо 34,
   чернила 33,3 вместо 29,8 (+11,8 %). Занятое место не меняется: коробка выше
   жёсткая, лишнее (только прозрачное) снимает overflow, ряд слотов и строки
   корзины стоят на прежних местах. */
.hero-slot-icon > .art-item--stylus,
.hero-slot-icon > .art-item--ruler,
.hero-slot-icon > .art-item--soldering,
.hero-slot-icon > .art-item--blade,
.hero-slot-icon > .art-item--stick,
.hero-item-pic > .art-item--stylus,
.hero-item-pic > .art-item--ruler,
.hero-item-pic > .art-item--soldering,
.hero-item-pic > .art-item--blade,
.hero-item-pic > .art-item--stick {
  width: 38px;
  height: 38px;
}

/* Рисунок внутри — не мишень для мыши: у него своя всплывашка («Наушники»),
   и она перебивала бы подсказку про редкость, которая висит на рамке.
   Ткнуть в картинку всё равно некуда.
   ВАЖНО: правило было писано на один svg и после перехода на рисованные
   картинки перестало работать для 28 ключей из 28 — теперь оно на .art-item,
   а этот класс носят обе разновидности значка, и картинка, и svg. */
.hero-slot-icon .art-item,
.hero-item-pic .art-item { pointer-events: none; }

/* Плашка у названия в корзине. В слотах её нет: там для неё нет места, а кант
   и так виден. Обычной вещи плашку не рисуем вовсе — в корзине таких вещей
   большинство, и слово «обычная» на каждой второй строке только рябит. */
.hero-rar {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  color: var(--rar-ink, var(--dim));
  border: 1px solid var(--rar-edge);
  border-radius: 3px;
  background: var(--rar-back);
  font-size: 10px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: .2px;
  vertical-align: 1px;
  white-space: nowrap;
  cursor: help;
}

/* Уникальная — единственная с залитой плашкой (так же, как в Магазине): такую
   вещь не покупают, её выдают, и спутать её с легендарной нельзя. */
.hero-rar.rar-unique { color: #fff; border-color: #5f34a0; background: #6c40b0; }

/* Слово редкости в слоте — приписка к подписи слота: «ГАДЖЕТ · легендарная».
   Появилась 10.08.2026: до неё редкость надетой вещи держалась на одном канте
   иконки, а цвет — плохой рассказчик, особенно если различаешь его иначе.
   Подпись слота набрана прописными и в разрядку, слово редкости — нет:
   оно читается как слово, а не как ярлык. */
.hero-slot-rar {
  margin-left: 6px;
  padding: 0 4px;
  color: var(--rar-ink, var(--dim));
  border: 1px solid var(--rar-edge);
  border-radius: 3px;
  background: var(--rar-back);
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: help;
}

/* Уникальная и здесь заливается целиком — ровно как плашка в корзине. */
.hero-slot-rar.rar-unique { color: #fff; border-color: #5f34a0; background: #6c40b0; }

/* ── Приёмы и серии ────────────────────────────────────────────────────────── */
/* Своей раскладки у них больше нет: оба списка собраны общим кирпичом .mv-*
   выше, тем же, что и характеристики. Прежние правила (.hero-abils, .hero-dim,
   .hero-move-desc, .hero-move-line) убраны вместе с таблицей, в которой один
   приём занимал семь строк серого текста. */

/* ── Наказ: таблицы долей ──────────────────────────────────────────────────── */

.ord-table td { vertical-align: middle; }
.ord-name { min-width: 150px; }
.ord-name b { color: #3b2c14; }
/* Строка под названием приёма — «взгляд» из словаря: три-шесть слов и число.
   Цена стоит отдельным числом в конце, а не внутри фразы: так её видно, не
   вчитываясь, и она не растворяется в предложении. */
.ord-line { color: var(--ink-soft, var(--dim)); font-size: 12px; }
.ord-cost {
  margin-left: 8px;
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ord-field { width: 96px; }
.ord-field input { width: 100%; text-align: center; }
.ord-share { width: 56px; text-align: right; font-weight: bold; color: var(--gold-ink); }
.ord-graph { width: 40%; }
.ord-order { width: 32px; text-align: center; color: var(--dim); }
.ord-when { width: 210px; }
.ord-when select { width: 100%; }
.ord-move { width: 108px; text-align: right; white-space: nowrap; }
.ord-dim td { opacity: .74; }

/* Полоска доли: не .bar из общей темы — здесь она тонкая и на светлом. */
.ord-bar {
  display: block;
  height: 8px;
  background: rgba(60, 45, 25, .16);
  border: 1px solid #b7a67e;
  border-radius: 2px;
  overflow: hidden;
}
.ord-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(#c9a227, #8a6f18);
}

.ord-total { margin-top: 8px; }
.ord-total b { color: var(--gold-ink); }

/* ── Наказ: порог лечения ──────────────────────────────────────────────────── */

.ord-heal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
}
.ord-heal input[type="range"] { flex: 1 1 220px; min-width: 160px; accent-color: var(--blood); }
.ord-heal input[type="number"] { width: 76px; text-align: center; }
.ord-heal-say { color: #4a3d29; }
.ord-heal-say b { color: var(--blood); }

/* ── Наказ: приёмы и серии ─────────────────────────────────────────────────── */

.ord-count { margin: 8px 0 6px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); }

.ord-adds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ord-add { display: inline-flex; align-items: center; gap: 4px; }
.ord-add i { font-size: 10px; font-style: normal; color: var(--dim); }
.ord-add--dim .btn { opacity: .8; }

/* ── Наказ: настрой и манера ───────────────────────────────────────────────── */

.ord-morale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ord-morale label { display: inline; }
.ord-morale select { min-width: 220px; }

.ord-manners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 10px 0 8px;
}
.ord-manner {
  display: block;
  padding: 8px 10px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
  border-radius: 2px;
  cursor: pointer;
}
.ord-manner:hover { border-color: var(--blood); }
.ord-manner b { display: inline; color: #3b2c14; letter-spacing: .4px; }
.ord-manner span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: #4a3d29; }
.ord-manner.is-picked {
  background: linear-gradient(rgba(201, 162, 39, .22), rgba(201, 162, 39, .1));
  border-color: var(--gold-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 240, .5);
}

/* ── Наказ: словами и кнопки ───────────────────────────────────────────────── */

.ord-say {
  padding: 8px 10px;
  background: var(--sheet);
  border: 1px solid var(--line, #a89670);
}
.ord-say p { margin-bottom: .4em; }
.ord-say p:last-child { margin-bottom: 0; }

.ord-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }

.ord-dirty {
  padding: 6px 10px;
  font-size: 11.5px;
  color: #7c1f14;
  background: rgba(143, 31, 26, .12);
  border-left: 3px solid var(--blood);
}

/* ── Медали ────────────────────────────────────────────────────────────────── */
/* Прежде медали лежали россыпью таблеток (.medals-line + .medal), и по ней было
   не понять, за что медаль дают. Теперь это ровная сетка одинаковых плиток,
   разбитая на разделы: у каждой плитки значок, название, условие получения и
   ход к цели. Классы новые (.medal-*), старые .medal и .medals-line остаются
   за итогом боя (public/ui/fight.js) и не трогаются. */

.medals {
  /* Золото у медалей своё: синий акцент DTF занят ссылками и полосами, а
     полученную медаль нужно узнавать с одного взгляда. Тона взяты из
     светлой темы (--dtf-amber-*), но записаны числами — чтобы вкладка
     выглядела одинаково и без слоя public/dtf-theme.css. */
  --medal-gold: #e0a33a;
  --medal-gold-ink: #96650a;
  --medal-gold-soft: #fff6e0;
}

/* Общий счёт над разделами — одной строкой словами. Полосы под ним больше
   нет (11.08.2026): она повторяла то же число третьим голосом, а на нуле
   лежала серой лентой во всю ширину панели. Правила .medals .bar убраны
   вместе с ней — рисовать нечего. */

.medals-sum-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.medals-sum-line b { font-size: 15px; }
.medals-sum-line .medals-left { color: var(--dim); }

/* Ровная сетка: все плитки одной ширины (auto-fit от 220px) и одной высоты
   (grid-auto-rows: 1fr) — длинное название не поднимает соседей. */
.medal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}

/* Плитка медали — белая карточка с тонкой линией (заливку сняли 11.08.2026,
   см. правило выше): серым в панели делить нечего, для этого есть линия. */
.medal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r-inner, 8px);
}

/* Полученная — золотой кант и тёплая подложка. Цветная заливка тут по праву:
   она означает состояние («взята»), а не просто делит плитки.
   Селектор в два класса нарочно: белую карточку задаёт слой темы правилом
   .medal-card, и оно подключается позже — коротким селектором его не перебить,
   и все медали стали бы одинаково белыми. */
.hero .medal-card--got {
  background: var(--medal-gold-soft);
  border-color: var(--medal-gold);
  box-shadow: inset 0 0 0 1px var(--medal-gold);
}

/* Незаработанная приглушена подложкой и значком, но текст остаётся в полную
   силу: главное на плитке — прочитать, что нужно сделать. */
.medal-card--todo .medal-pic { opacity: .55; }

.medal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Значок один на все медали и одного размера: рисунок «Значок» из
   public/art/items.js, поверх — галочка у полученной. Своей коробки у значка
   больше нет: плашка внутри плашки внутри плашки запрещена, а рисунок и без
   рамки читается. */
.medal-pic {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  line-height: 0;
}

/* Галочка в углу значка. Сама галка нарисована currentColor, поэтому цвет
   задаётся здесь: белым по золотому. */
.medal-tick {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: inline-flex;
  padding: 2px;
  color: #fff;
  line-height: 0;
  background: var(--medal-gold);
  border: 1px solid #fff;
  border-radius: 999px;
}

.medal-name {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Условие получения — тот самый ответ на вопрос «а за что её дают».
   Цвет нарочно не приглушённый серый (--dim): у незаработанной медали это
   главная строка на плитке, и читаться она должна с первого взгляда. */
.medal-need {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.45;
  color: #555;
}
.medal-card--got .medal-need { color: var(--medal-gold-ink); }

/* Низ плитки: у полученной — подпись, у остальных — полоска и счёт под ней.
   Столбцом, а не строкой: длинная подпись («12 из 30 побед» или «ход к цели
   не считается») тогда переносится по словам и не выпирает за край плитки. */
.medal-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  min-width: 0;
}

.medal-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--medal-gold-ink);
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
.medal-done svg { flex: 0 0 auto; }

.medal-bar {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: rgba(60, 45, 25, .16);
  border-radius: 999px;
}
.medal-bar-fill {
  display: block;
  height: 100%;
  background: var(--gold-ink);
}

.medal-count {
  min-width: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.medals-about { margin-bottom: 8px; }
.medals-note { margin-top: 10px; }

/* ── Узкий экран ───────────────────────────────────────────────────────────── */

/* Список на узком экране. Пяти столбцов в 375 точек не бывает, поэтому строка
   складывается в три яруса одинакового вида у всех строк: название · взгляд ·
   числа с подписями и состояние. Шапка со столбцами уходит совсем — вместо
   неё подпись едет при каждом числе (.mv-num i), иначе «4» и «1» подряд
   ничего не значат. «Пляшет» ровно то, что у одних строк ярусов больше, чем
   у других, — здесь их всегда три. */
@media (max-width: 700px) {
  .mv-head { display: none; }

  .mv-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 10px 2px;
  }
  .mv-name,
  .mv-say { flex: 1 1 100%; }
  .mv-num,
  .mv-word,
  .mv-state { flex: 0 0 auto; text-align: left; }
  .mv-num i {
    display: inline;
    margin-right: 4px;
    color: var(--dim);
    font-style: normal;
  }

  .mv-brief { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mv-key { font-weight: 700; }
  .mv-val { margin-bottom: 4px; }
  .mv-more { grid-column: 1; }

  .hero-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-about { text-align: left; width: 100%; }
  .hero-row { grid-template-columns: 1fr; gap: 2px; }
  .hero-item-act { width: auto; }
  .hero-acts { justify-content: flex-start; }
  .hero-sell-many { justify-content: flex-start; }
  .hero-stats-note { font-size: 10.5px; }

  /* Кнопка «Продать всё» на узком встаёт под свой же текст, во всю ширину:
     иначе она жмётся в правый угол и промахнуться по ней проще, чем попасть.
     Тексту при этом сбрасываем основу: в столбце flex-basis — это ВЫСОТА, и
     240px превращались в пустую полосу под словами. */
  .hero-bag-all { flex-direction: column; align-items: stretch; }
  .hero-bag-all-text { flex: 0 0 auto; }
  .hero-bag-all-btn { width: 100%; }
  /* Строка сброса на узком складывается в два яруса: сверху что это и сколько
     вернётся, снизу кнопка во всю ширину — по ней попадают пальцем. */
  .hero-reset .btn { width: 100%; margin-left: 0; }
  .hero-reset-what { flex: 1 1 100%; }

  .ord-graph { display: none; }
  .ord-when { width: auto; }
  .ord-move { width: auto; }
  .ord-buttons .btn { flex: 1 1 auto; }
}

/* На телефоне корзина перестаёт быть таблицей. Три столбца в 375 точек не
   помещаются: у стака под кнопками живут ещё поле «сколько» и «все 5 за 35», и
   столбец действий отъедал у названия половину строки — название рассыпалось в
   лесенку по два слова. Теперь строка складывается в два яруса: сверху значок и
   название, снизу — все кнопки во всю ширину, где по ним удобно попасть пальцем.
   Правило писано только под свою таблицу (.hero-items — это корзина и ничего
   больше), общий .grid не трогает. */
@media (max-width: 560px) {
  table.grid.hero-items,
  table.grid.hero-items tbody { display: block; }

  table.grid.hero-items tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
    padding: 8px 0;
    border-top: 1px solid var(--line, #a89670);
  }
  table.grid.hero-items tr:first-child { border-top: 0; padding-top: 0; }

  /* Два класса против «table.grid td» из общей темы: у той рамка снизу и свои
     поля, и в два яруса они рисуют обрывки линий поперёк строки. */
  table.grid.hero-items td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  table.grid.hero-items .hero-item-icon { grid-column: 1; grid-row: 1; width: auto; }
  table.grid.hero-items td:nth-child(2) { grid-column: 2; grid-row: 1; }

  table.grid.hero-items .hero-item-act {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    margin-top: 8px;
    text-align: left;
    white-space: normal;
  }
  .hero-acts,
  .hero-sell-many { justify-content: flex-start; }
  .hero-sell-note { margin-top: 2px; }
}

@media (max-width: 480px) {
  /* Иконки вещей на телефоне мельче: столбец под картинку в корзине съедает
     ширину у названия, а кант при этом никуда не девается — он и на мелкой
     коробке читается. Ужимаем сам рисунок (прямой потомок), рамку не трогаем.

     Селектор был писан на один svg и после перехода на рисованные картинки
     МОЛЧА ПЕРЕСТАЛ РАБОТАТЬ: у 28 ключей из 28 значок теперь <img>, правило
     мимо, и на телефоне рисунок оставался во всю коробку — кант ложился прямо
     на чернила. Теперь по .art-item: этот класс носят обе разновидности значка.
     Числа прежние, те самые, что тут и задумывались (26 и 22). */
  .hero-slot-icon { width: 34px; height: 34px; }
  .hero-slot-icon > .art-item { width: 26px; height: 26px; }
  .hero-item-pic { width: 30px; height: 30px; }
  .hero-item-pic > .art-item { width: 22px; height: 22px; }
  /* Тонким пятерым и на телефоне отдаём прозрачное поле файла — соотношение
     то же, что на большом экране (рисунок во всю ширину просвета рамки). */
  .hero-slot-icon > .art-item--stylus,
  .hero-slot-icon > .art-item--ruler,
  .hero-slot-icon > .art-item--soldering,
  .hero-slot-icon > .art-item--blade,
  .hero-slot-icon > .art-item--stick { width: 30px; height: 30px; }
  .hero-item-pic > .art-item--stylus,
  .hero-item-pic > .art-item--ruler,
  .hero-item-pic > .art-item--soldering,
  .hero-item-pic > .art-item--blade,
  .hero-item-pic > .art-item--stick { width: 26px; height: 26px; }
  /* Столбец значка в корзине — по мелкой рамке (30) плюс поля ячейки. */
  .hero-item-icon { width: 54px; }
  .hero-rar { margin-left: 4px; }
  /* Число стака на телефоне не прячем и не ужимаем до нечитаемого: 375px —
     это основной экран, и «× 5» тут главнее всех приписок. */
  .hero-count { margin-left: 4px; padding: 0 6px; font-size: 11.5px; }
  .hero-sell-num input { width: 52px; }
  /* Слово редкости в слоте на телефоне жмётся к подписи слота, но не прячется:
     это единственный способ прочитать редкость надетой вещи глазами. */
  .hero-slot-rar { margin-left: 4px; }

  /* На телефоне медаль встаёт по одной в ряд: значок мельче, поля теснее.
     Ужимается только сам значок (прямой потомок): галочка в углу лежит внутри
     своего кружка, и её размер трогать нельзя — она закроет собой весь значок. */
  .medal-grid { grid-template-columns: minmax(0, 1fr); }
  .medal-card { padding: 8px 10px; }
  .medal-pic { width: 32px; height: 32px; }
  /* По .art-item, а не по svg: значок медали («Значок») теперь тоже картинка,
     и правило на svg до него не доставало. */
  .medal-pic > .art-item { width: 26px; height: 26px; }
}