/* LOOTHOOD — Loadout v1 · «Снаряжение»
   ------------------------------------------------------------------
   Экран экипировки — ядро лутер-фантазии, а выглядел как форма фильтров:
   слоты были полоской текста «Bowstring · Empty», одиннадцать кнопок
   стояли колонкой во всю высоту, редкости от Common до Legendary красились
   одним зелёным, хотя палитра редкости зафиксирована в бренде, а пустое
   состояние было тупиком с фразой «No owned equipment».

   Что делаем:
     1. слоты становятся плитками с иконками предметов
     2. фильтры редкости получают свои цвета и складываются в чипы
     3. пустое состояние перестаёт быть тупиком
     4. панели и радиусы приводятся к языку Hunt

   Иконки берутся из loothood-pulls-v1.css (--lh-icon-*), он грузится
   раньше. Scoped к .hb-app. */

/* ============ 1 · СЛОТЫ ЭКИПИРОВКИ ============
   Разметка: <article data-slot-id="bowstring" title="Bowstring · Empty">.
   Слот берём из data-slot-id, пустоту — из окончания title. */

.hb-app .hb-equipped-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.hb-app .hb-equipped-strip article {
  display: grid !important;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-height: 0 !important;
  padding: 14px 10px 12px !important;
  border-radius: 13px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(20,29,25,.86), rgba(12,18,15,.86)) !important;
  white-space: normal !important;
  overflow: visible !important;
  transition: border-color 140ms var(--lh-ease-out),
              transform 140ms var(--lh-ease-out);
}

/* Иконка слота. */
.hb-app .hb-equipped-strip article::before {
  content: "";
  width: 58px;
  height: 58px;
  margin-bottom: 5px;
  background-image: var(--lh-slot-icon, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hb-app .hb-equipped-strip article[data-slot-id="bowstring"] { --lh-slot-icon: var(--lh-icon-bowstring); }
.hb-app .hb-equipped-strip article[data-slot-id="helmet"]    { --lh-slot-icon: var(--lh-icon-helm); }
.hb-app .hb-equipped-strip article[data-slot-id="chest"]     { --lh-slot-icon: var(--lh-icon-chest); }
.hb-app .hb-equipped-strip article[data-slot-id="boots"]     { --lh-slot-icon: var(--lh-icon-boots); }
.hb-app .hb-equipped-strip article[data-slot-id="legs"]      { --lh-slot-icon: var(--lh-icon-legs); }

/* Пустой слот: пунктир и приглушённая иконка — видно, что место свободно. */
.hb-app .hb-equipped-strip article[title$="Empty"] {
  border-style: dashed !important;
  border-color: var(--line2) !important;
  background: rgba(12,18,15,.6) !important;
}
.hb-app .hb-equipped-strip article[title$="Empty"]::before {
  opacity: .28;
  filter: grayscale(.55);
}

/* Занятый слот подсвечен лаймом — сразу видно, что собрано. */
.hb-app .hb-equipped-strip article:not([title$="Empty"]) {
  border-color: color-mix(in srgb, var(--lime) 32%, var(--line)) !important;
}
.hb-app .hb-equipped-strip article:not([title$="Empty"])::before {
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--lime) 35%, transparent));
}

.hb-app .hb-equipped-strip article strong {
  font-family: var(--disp);
  font-size: 15px;
  letter-spacing: .3px;
  color: var(--ivory);
}
/* Разделительная точка между названием и состоянием больше не нужна. */
.hb-app .hb-equipped-strip article span[aria-hidden="true"] { display: none; }
.hb-app .hb-equipped-strip article span {
  font-family: var(--body);
  font-size: 12px;
  color: var(--dim);
}

@media (hover: hover) and (pointer: fine) {
  .hb-app .hb-equipped-strip article:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lime) 45%, var(--line)) !important;
  }
}

/* ============ 2 · ФИЛЬТРЫ ============
   Разметка кнопок: data-equipment-action="filter-rarity:outfitter:epic".
   Редкость и слот вытаскиваем окончанием значения. */

.hb-app .hb-equipment-filter-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  padding: 16px !important;
}
.hb-app .hb-equipment-filter-panel header strong {
  font-family: var(--disp);
  font-size: 18px;
  color: var(--ivory);
}
.hb-app .hb-equipment-filter-groups legend {
  font-family: var(--body);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 0 7px;
}

/* Чипы вместо колонки кнопок во всю ширину. */
.hb-app .hb-equipment-filter-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.hb-app .hb-equipment-filter-chips button {
  --c: var(--muted);
  min-height: 0 !important;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px !important;
  /* Было 999px, то есть полная пилюля. Такие же фильтры на экране Market
     скруглены на восемь, пункты навигации на девять, и рядом с ними пилюли
     Outfitter читались деталью из другой программы. Замер по всей игре давал
     шесть разных скруглений: 8, 9, 10, 11, 13 и пилюлю. */
  border-radius: 9px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface2) !important;
  color: var(--muted) !important;
  font-family: var(--body);
  font-size: 12.5px;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms var(--lh-ease-out),
              color 140ms var(--lh-ease-out),
              background 140ms var(--lh-ease-out);
}

/* Точка цвета редкости перед названием — то, что игрок в лутере читает
   быстрее любого текста. */
.hb-app .hb-equipment-filter-chips button[data-equipment-action*="filter-rarity"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px -1px var(--c);
  flex: none;
}
.hb-app [data-equipment-action$=":common"]    { --c: #9fb3a6; }
.hb-app [data-equipment-action$=":uncommon"]  { --c: var(--un); }
.hb-app [data-equipment-action$=":rare"]      { --c: var(--rare); }
.hb-app [data-equipment-action$=":epic"]      { --c: var(--epic); }
.hb-app [data-equipment-action$=":legendary"] { --c: var(--leg); }
.hb-app [data-equipment-action$=":all"]       { --c: var(--muted); }

.hb-app .hb-equipment-filter-chips button[aria-pressed="true"],
.hb-app .hb-equipment-filter-chips button.is-active {
  color: var(--ivory) !important;
  border-color: color-mix(in srgb, var(--c) 55%, var(--line)) !important;
  background: color-mix(in srgb, var(--c) 14%, var(--surface2)) !important;
}

@media (hover: hover) and (pointer: fine) {
  .hb-app .hb-equipment-filter-chips button:hover {
    color: var(--ivory) !important;
    border-color: color-mix(in srgb, var(--c) 45%, var(--line)) !important;
  }
}

.hb-app .hb-equipment-filter-panel header button {
  padding: 6px 11px !important;
  border-radius: 9px !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 12px;
}
.hb-app .hb-equipment-filter-panel header button:disabled { opacity: .45; }

/* ============ 3 · ИНВЕНТАРЬ ============ */

.hb-app .hb-equipment-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  padding: 16px 18px !important;
}
.hb-app .hb-outfitter-inventory-header h2,
.hb-app .hb-equipment-screen h2 {
  font-family: var(--disp);
  color: var(--ivory);
}
.hb-app .hb-outfitter-inventory-header__tools button {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface2) !important;
  color: var(--ivory) !important;
  padding: 9px 14px !important;
  font-family: var(--disp);
  font-size: 15px;
}

.hb-app .hb-outfitter-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

/* Карточка предмета: полоска редкости сверху, иконка слева. */
.hb-app .hb-outfitter-card {
  --outfitter-rarity: var(--muted);
  border: 1px solid color-mix(in srgb, var(--outfitter-rarity) 30%, var(--line)) !important;
  border-top: 2px solid var(--outfitter-rarity) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(20,29,25,.9), rgba(12,18,15,.9)) !important;
  padding: 12px 14px !important;
  transition: transform 140ms var(--lh-ease-out),
              border-color 140ms var(--lh-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hb-app .hb-outfitter-card:hover { transform: translateY(-2px); }
}

/* ============ 4 · ПУСТОЕ СОСТОЯНИЕ ============
   Было: «No owned equipment.» одной строкой в углу. Тупик — игрок не
   понимает, что делать дальше. Даём воздух, иконку и подсказку, откуда
   вообще берётся снаряжение. Текст английский — интерфейс игры на нём. */

.hb-app .hb-equipment-empty {
  display: grid !important;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 260px;
  padding: 32px 24px !important;
  border: 1px dashed var(--line2) !important;
  border-radius: 13px;
  background: rgba(12,18,15,.45) !important;
  color: var(--muted) !important;
  font-family: var(--body);
  font-size: 14px;
  text-align: center;
}
.hb-app .hb-equipment-empty::before {
  content: "";
  width: 84px;
  height: 84px;
  margin-bottom: 10px;
  background-image: var(--lh-icon-chest);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .3;
  filter: grayscale(.5);
}
.hb-app .hb-equipment-empty::after {
  content: "Gear comes from Loot Pulls and from hunt runs.";
  display: block;
  margin-top: 4px;
  max-width: 42ch;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
}


/* ============ 5 · СТАТ-ФИЛЬТРЫ ============
   Семь характеристик стояли колонкой кнопок во всю ширину рейла и
   выдавливали остальное за экран. Те же чипы, что у слотов и редкостей. */

.hb-app .hb-equipment-stat-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.hb-app .hb-equipment-stat-grid button,
.hb-app .hb-equipment-filter-stats button {
  min-height: 0 !important;
  width: auto !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface2) !important;
  color: var(--muted) !important;
  font-family: var(--body) !important;
  font-size: 12px !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .hb-app .hb-equipment-stat-grid button:hover {
    color: var(--ivory) !important;
    border-color: color-mix(in srgb, var(--lime) 40%, var(--line)) !important;
  }
}
.hb-app .hb-equipment-stat-grid button[aria-pressed="true"] {
  color: #08120a !important;
  border-color: transparent !important;
  background: linear-gradient(180deg, #c8f85e, var(--lime) 45%, var(--lime-deep)) !important;
}

/* ============ 6 · ПРАВАЯ ПАНЕЛЬ ============
   Заголовки на этом экране остались золотыми, хотя на Hunt все заголовки
   цвета слоновой кости. Ловим их шире — они лежат вне .hb-main. */

.hb-app .hb-equipment-screen h1,
.hb-app .hb-equipment-screen h2,
.hb-app .hb-equipment-screen h3 {
  color: var(--ivory) !important;
  font-family: var(--disp);
}

/* Пустое состояние занимает всю ширину инвентаря, а не жмётся в угол. */
.hb-app .hb-outfitter-grid:has(.hb-equipment-empty),
.hb-app .hb-equipment-empty {
  grid-column: 1 / -1;
  width: 100%;
}

/* ============ 7 · СПРАЙТЫ ПО РЕДКОСТЯМ ============
   Пять слотов на пять редкостей — 25 спрайтов. Материалы растут вместе
   с редкостью: тусклое серое дерево и кожа на Common, зелёная краска
   на Uncommon, холодная сталь с бирюзой на Rare, фиолетовый кристалл на
   Epic, золото со свечением на Legendary. Игрок опознаёт ценность
   выпавшего до того, как прочитает название.

   Карточка предмета несёт data-slot и data-rarity, поэтому нужный
   спрайт подставляется без единой строки JS в момент отрисовки. */

.hb-app .hb-outfitter-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 3px 13px;
}
.hb-app .hb-outfitter-card::before {
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  width: 62px;
  height: 62px;
  background-image: var(--lh-card-icon, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--outfitter-rarity) 45%, transparent));
}
.hb-app .hb-outfitter-card > * { grid-column: 2; }

.hb-app .hb-outfitter-card[data-slot="bowstring" i][data-rarity="common" i] { --lh-card-icon: url("../images/item-bowstring-common-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="bowstring" i][data-rarity="uncommon" i] { --lh-card-icon: url("../images/item-bowstring-uncommon-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="bowstring" i][data-rarity="rare" i] { --lh-card-icon: url("../images/item-bowstring-rare-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="bowstring" i][data-rarity="epic" i] { --lh-card-icon: url("../images/item-bowstring-epic-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="bowstring" i][data-rarity="legendary" i] { --lh-card-icon: url("../images/item-bowstring-legendary-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="helmet" i][data-rarity="common" i] { --lh-card-icon: url("../images/item-helmet-common-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="helmet" i][data-rarity="uncommon" i] { --lh-card-icon: url("../images/item-helmet-uncommon-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="helmet" i][data-rarity="rare" i] { --lh-card-icon: url("../images/item-helmet-rare-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="helmet" i][data-rarity="epic" i] { --lh-card-icon: url("../images/item-helmet-epic-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="helmet" i][data-rarity="legendary" i] { --lh-card-icon: url("../images/item-helmet-legendary-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="chest" i][data-rarity="common" i] { --lh-card-icon: url("../images/item-chest-common-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="chest" i][data-rarity="uncommon" i] { --lh-card-icon: url("../images/item-chest-uncommon-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="chest" i][data-rarity="rare" i] { --lh-card-icon: url("../images/item-chest-rare-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="chest" i][data-rarity="epic" i] { --lh-card-icon: url("../images/item-chest-epic-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="chest" i][data-rarity="legendary" i] { --lh-card-icon: url("../images/item-chest-legendary-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="boots" i][data-rarity="common" i] { --lh-card-icon: url("../images/item-boots-common-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="boots" i][data-rarity="uncommon" i] { --lh-card-icon: url("../images/item-boots-uncommon-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="boots" i][data-rarity="rare" i] { --lh-card-icon: url("../images/item-boots-rare-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="boots" i][data-rarity="epic" i] { --lh-card-icon: url("../images/item-boots-epic-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="boots" i][data-rarity="legendary" i] { --lh-card-icon: url("../images/item-boots-legendary-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="legs" i][data-rarity="common" i] { --lh-card-icon: url("../images/item-legs-common-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="legs" i][data-rarity="uncommon" i] { --lh-card-icon: url("../images/item-legs-uncommon-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="legs" i][data-rarity="rare" i] { --lh-card-icon: url("../images/item-legs-rare-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="legs" i][data-rarity="epic" i] { --lh-card-icon: url("../images/item-legs-epic-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="legs" i][data-rarity="legendary" i] { --lh-card-icon: url("../images/item-legs-legendary-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="bowstring" i] { --lh-card-icon: url("../images/item-bowstring-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="helmet" i] { --lh-card-icon: url("../images/item-helmet-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="chest" i] { --lh-card-icon: url("../images/item-chest-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="boots" i] { --lh-card-icon: url("../images/item-boots-v1.png"); }
.hb-app .hb-outfitter-card[data-slot="legs" i] { --lh-card-icon: url("../images/item-legs-v1.png"); }

/* Цвет рамки карточки берётся из той же редкости. */
.hb-app .hb-outfitter-card[data-rarity="common" i] { --outfitter-rarity: #9fb3a6; }
.hb-app .hb-outfitter-card[data-rarity="uncommon" i] { --outfitter-rarity: var(--un); }
.hb-app .hb-outfitter-card[data-rarity="rare" i] { --outfitter-rarity: var(--rare); }
.hb-app .hb-outfitter-card[data-rarity="epic" i] { --outfitter-rarity: var(--epic); }
.hb-app .hb-outfitter-card[data-rarity="legendary" i] { --outfitter-rarity: var(--leg); }