/* LOOTHOOD — Loot Pulls v1 · «Витрина добычи»
   ------------------------------------------------------------------
   Экран гачи — эмоциональный пик и точка монетизации. До этого он читался
   как страница настроек: ноль картинок, треть экрана пустая, pity нарисован
   тонкой линией с ромбиком, цвета редкости не использованы.

   Что делаем:
     1. у предметов появляются иконки (5 слотов, images/item-*-v1.png)
     2. карточки спотлайта окрашиваются по редкости
     3. pity переезжает на компонент из Hunt — полосы с градиентом редкости
     4. вкладки, кнопки и панели приводятся к языку Hunt: радиусы, поверхности

   Scoped к .hb-app. Подключается после loothood-patch-v1.css. */

.hb-app {
  --lh-icon-bowstring: url("../images/item-bowstring-v1.png?v=2");
  --lh-icon-helm: url("../images/item-helmet-v1.png?v=2");
  --lh-icon-chest: url("../images/item-chest-v1.png?v=2");
  --lh-icon-boots: url("../images/item-boots-v1.png?v=2");
  --lh-icon-legs: url("../images/item-legs-v1.png?v=2");
}

/* ============ ЗАГОЛОВОК И ВКЛАДКИ ============ */

.hb-app .hb-main[data-screen="equipment-pulls"] > h1,
.hb-app .hb-main[data-screen="equipment-pulls"] h1 {
  margin-bottom: 14px;
}

/* Вкладки Standard / Limited — сегментированный переключатель, а не две коробки. */
.hb-app .hb-gacha-tabs,
.hb-app [role="tablist"] {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hb-app [role="tablist"] > button {
  padding: 9px 20px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: var(--disp);
  font-size: 17px;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background var(--lh-dur-hover) var(--lh-ease-out),
              color var(--lh-dur-hover) var(--lh-ease-out);
}
.hb-app [role="tablist"] > button[aria-selected="true"] {
  color: #08120a;
  background: linear-gradient(180deg, #c8f85e, var(--lime) 45%, var(--lime-deep));
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--lime) 70%, transparent);
}

/* ============ КАРТОЧКИ СПОТЛАЙТА ============
   Разметка: <article class="hb-gacha-spotlight" data-legendary-effect-id="BOOTS-…">
   Слот зашит в префикс id, поэтому иконку выбираем по нему. */

.hb-app .hb-gacha-spotlight {
  --lh-rarity: var(--leg);
  --lh-item: none;
  position: relative;
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr);
  /* Четвёртая строка — пустая и гибкая, и она здесь не для красоты.
     Иконка растянута на grid-row: 1 / -1, то есть до ПОСЛЕДНЕЙ линии сетки.
     При трёх строках и align-content: start эта линия проходила там, где
     кончился текст, а не по низу карточки. У «Echoeye Hood» описание в одну
     строку против трёх у соседей — линия оказывалась выше, и вещь висела
     выше остальных, хотя карточки одной высоты.
     Гибкая строка забирает весь остаток высоты, поэтому последняя линия
     всегда упирается в низ карточки, и три вещи стоят на одной полке
     независимо от длины описания. */
  grid-template-rows: auto auto auto 1fr;
  align-content: stretch;
  gap: 2px 16px;
  padding: 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--lh-rarity) 34%, var(--line)) !important;
  border-radius: 13px;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--lh-rarity) 12%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(24,34,26,.92), rgba(14,20,16,.92)) !important;
  overflow: hidden;
  transition: transform var(--lh-dur-hover) var(--lh-ease-out),
              border-color var(--lh-dur-hover) var(--lh-ease-out);
}

/* Иконка предмета — слева, во всю высоту карточки. */
.hb-app .hb-gacha-spotlight::before {
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  /* По центру вещи вставали на разной высоте. Причина не в вёрстке: каждая
     картинка обрезана вплотную к предмету, поэтому узкие поножи заполняют всю
     высоту клетки, а широкий плащ упирается в ширину и по высоте выходит
     мельче. Центрирование разносит их по вертикали тем сильнее, чем больше
     разница пропорций. Ставим на общую нижнюю линию: три вещи в ряду читаются
     как предметы на полке, а не как случайно висящие в воздухе. */
  align-self: end;
  margin-bottom: 10px;
  /* 84 и не больше. Пробовал 112, чтобы вещь была ближе к своей исходной
     сетке в 192 пикселя, — и текст в карточке сжался до одного слова в
     строке, «Blood Accountant» разорвалось посреди слова. Карточка узкая,
     и место в ней делится между картинкой и объяснением; объяснение важнее. */
  width: 84px;
  height: 84px;
  background-image: var(--lh-item);
  background-size: contain;
  /* Прижимаем к нижнему краю коробки, а не центрируем. Выравнивания самой
     коробки мало: картинка внутри неё центрировалась, и вещь с большим полем
     снизу висела выше соседней. Теперь низ вещи у всех на одной линии, а то,
     что одна выше другой, значения не имеет — важно откуда они начинаются. */
  background-position: bottom center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--lh-rarity) 45%, transparent));
}

/* Слот определяется префиксом id легендарки. */
.hb-app .hb-gacha-spotlight[data-legendary-effect-id^="BOWSTRING"] { --lh-item: var(--lh-icon-bowstring); }
.hb-app .hb-gacha-spotlight[data-legendary-effect-id^="HELM"]      { --lh-item: var(--lh-icon-helm); }
.hb-app .hb-gacha-spotlight[data-legendary-effect-id^="CHEST"]     { --lh-item: var(--lh-icon-chest); }
.hb-app .hb-gacha-spotlight[data-legendary-effect-id^="BOOTS"]     { --lh-item: var(--lh-icon-boots); }
.hb-app .hb-gacha-spotlight[data-legendary-effect-id^="LEGS"]      { --lh-item: var(--lh-icon-legs); }

.hb-app .hb-gacha-spotlight > span {
  grid-column: 2;
  font-family: var(--body);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lh-rarity);
}
.hb-app .hb-gacha-spotlight > h3 {
  grid-column: 2;
  margin: 1px 0 4px;
  font-family: var(--disp);
  font-size: 21px;
  line-height: 1.06;
  letter-spacing: .3px;
  color: var(--ivory);
}
.hb-app .hb-gacha-spotlight > p {
  grid-column: 2;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .hb-app .hb-gacha-spotlight:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lh-rarity) 60%, var(--line)) !important;
  }
}

/* ============ PITY ============
   Переиспользуем язык полос с экрана Hunt: трек + заливка градиентом
   редкости + свечение. Тонкая линия с ромбиком не читалась вообще. */

.hb-app .hb-gacha-pity {
  --lh-rarity: var(--epic);
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb, var(--lh-rarity) 26%, var(--line)) !important;
  border-radius: 12px;
  background: var(--surface2) !important;
}
.hb-app .hb-gacha-pity:last-of-type { --lh-rarity: var(--leg); }

.hb-app .hb-gacha-pity > span:first-child {
  color: var(--lh-rarity);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-size: 11px;
}
.hb-app .hb-gacha-pity progress,
.hb-app .hb-gacha-pity .hb-pity-track {
  width: 100%;
  height: 9px;
  border-radius: 5px;
  border: 1px solid var(--line2);
  background: var(--surface3);
  overflow: hidden;
  appearance: none;
}
.hb-app .hb-gacha-pity progress::-webkit-progress-bar {
  background: var(--surface3);
}
.hb-app .hb-gacha-pity progress::-webkit-progress-value {
  border-radius: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--lh-rarity) 55%, #000), var(--lh-rarity));
  box-shadow: 0 0 10px -2px var(--lh-rarity);
}
.hb-app .hb-gacha-pity progress::-moz-progress-bar {
  border-radius: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--lh-rarity) 55%, #000), var(--lh-rarity));
}

/* ============ ПАНЕЛИ И БАЛАНСЫ ============ */

.hb-app .hb-gacha-standard,
.hb-app .hb-equipment-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  background: var(--surface) !important;
}

/* Заголовки правой колонки были золотыми — на Hunt они цвета слоновой кости. */
.hb-app .hb-main[data-screen="equipment-pulls"] h2 {
  color: var(--ivory);
  font-family: var(--disp);
}

/* Строки балансов — как строки баунти на Hunt: тонкая линия, значение справа. */
.hb-app .hb-equipment-panel li,
.hb-app .hb-equipment-panel dl > div {
  border-top: 1px solid var(--line2);
  padding: 11px 0;
}

/* ============ СПИСОК ПУЛА ============
   Карточка пула строилась без картинки: полсотни одинаковых прямоугольников,
   по которым не понять, что именно выпадает. Своя картинка приходит инлайном
   из --lh-item, здесь только место под неё и запасной вариант по слоту.

   Префикса .hb-app тут быть не должно: диалог пула выносится в оверлей
   .hb-gacha-pool-dialog за пределы приложения, и правило с этим префиксом
   до него не достаёт. */

.hb-gacha-pool-dialog .hb-gacha-pool-item {
  --lh-rarity: var(--leg, #d9a441);
  --lh-item: none;
  position: relative;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: start;
}
.hb-gacha-pool-dialog .hb-gacha-pool-item::before {
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  /* та же общая нижняя линия, что и в спотлайте */
  align-self: end;
  margin-bottom: 8px;
  width: 64px;
  height: 64px;
  background-image: var(--lh-item);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--lh-rarity) 42%, transparent));
}
.hb-gacha-pool-dialog .hb-gacha-pool-item[data-legendary-effect-id^="BOWSTRING"] { --lh-item: var(--lh-icon-bowstring); }
.hb-gacha-pool-dialog .hb-gacha-pool-item[data-legendary-effect-id^="HELM"]      { --lh-item: var(--lh-icon-helm); }
.hb-gacha-pool-dialog .hb-gacha-pool-item[data-legendary-effect-id^="CHEST"]     { --lh-item: var(--lh-icon-chest); }
.hb-gacha-pool-dialog .hb-gacha-pool-item[data-legendary-effect-id^="BOOTS"]     { --lh-item: var(--lh-icon-boots); }
.hb-gacha-pool-dialog .hb-gacha-pool-item[data-legendary-effect-id^="LEGS"]      { --lh-item: var(--lh-icon-legs); }
/* текст встаёт во вторую колонку */
.hb-gacha-pool-dialog .hb-gacha-pool-item > :is(span, h3, strong, p, button) { grid-column: 2; }