/* PONSLOOT — Loadout v1 · "Equipment"
   ------------------------------------------------------------------
   The equipment screen is the core of the looter fantasy, yet it looked like a
   filter form: the slots were a strip of text reading "Bowstring · Empty",
   eleven buttons stood in a full-height column, rarities from Common to
   Legendary were all painted the same green even though the rarity palette is
   fixed in the brand, and the empty state was a dead end reading "No owned
   equipment".

   What we do:
     1. slots become tiles with item icons
     2. rarity filters get their own colours and fold into chips
     3. the empty state stops being a dead end
     4. panels and radii are brought into the Hunt language

   The icons come from loothood-pulls-v1.css (--lh-icon-*), which is loaded
   earlier. Scoped to .hb-app. */

/* ============ 1 · EQUIPMENT SLOTS ============
   Markup: <article data-slot-id="bowstring" title="Bowstring · Empty">.
   The slot comes from data-slot-id, the emptiness from the end of the 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);
}

/* Slot icon. */
.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); }

/* Empty slot: a dashed border and a muted icon — it is clear the place is free. */
.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);
}

/* An occupied slot is lit lime — what has been assembled is visible at a glance. */
.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);
}
/* The separator dot between the name and the state is no longer needed. */
.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 · FILTERS ============
   Button markup: data-equipment-action="filter-rarity:outfitter:epic".
   Rarity and slot are pulled out of the end of the value. */

.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;
}

/* Chips instead of a column of full-width buttons. */
.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;
  /* It used to be 999px, i.e. a full pill. The same filters on the Market
     screen are rounded by eight and the navigation items by nine, and next to
     them the Outfitter pills read as a detail from a different program. A survey
     across the whole game gave six different radii: 8, 9, 10, 11, 13 and a pill. */
  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);
}

/* A rarity-coloured dot before the name — the thing a player in a looter reads
   faster than any text. */
.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 · INVENTORY ============ */

.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;
}

/* Item card: a rarity strip on top, the icon on the left. */
.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 · EMPTY STATE ============
   It used to be "No owned equipment." on a single line in the corner. A dead
   end — the player does not understand what to do next. We give it air, an icon
   and a hint about where equipment comes from in the first place. The text is in
   English — that is the language of the game's interface. */

.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 the Shop, and drops at the end of a run.";
  display: block;
  margin-top: 4px;
  max-width: 42ch;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
}


/* ============ 5 · STAT FILTERS ============
   Seven stats stood as a column of buttons spanning the full width of the rail
   and pushed everything else off screen. The same chips as the slots and
   rarities. */

.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 · RIGHT PANEL ============
   The headings on this screen stayed gold even though on Hunt every heading is
   ivory. We match them more broadly — they live outside .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);
}

/* The empty state takes the full width of the inventory rather than huddling in a corner. */
.hb-app .hb-outfitter-grid:has(.hb-equipment-empty),
.hb-app .hb-equipment-empty {
  grid-column: 1 / -1;
  width: 100%;
}

/* ============ 7 · SPRITES BY RARITY ============
   Five slots times five rarities — 25 sprites. The materials escalate with
   rarity: dull grey wood and leather at Common, green paint at Uncommon,
   cold steel with teal at Rare, purple crystal at Epic, glowing gold at
   Legendary. The player recognizes the value of a drop before reading its
   name.

   The item card carries data-slot and data-rarity, so the right sprite is
   substituted at render time without a single line of 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"); }

/* The card border colour is taken from the same rarity. */
.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); }

/* Когда всё надето, объяснение «где взять шмот» не к месту: он у человека уже
   есть, просто лежит не в этой сетке. */
.hb-app .hb-equipment-empty.is-all-equipped::after { content: none; }