/* ============================================================
   ОХОТА — реестр Гильдии: на кого выдан допуск
   ============================================================
   Разбор аналогов (HoYoWiki Character Archive, genshin.gg, список
   операторов Arknights, промо-страница Honkai: Star Rail) дал три вывода:

   • ФИЛЬТРЫ — ВИДИМЫЕ РЯДЫ переключателей с подписью слева, а не выпадающие
     списки. У HoYoWiki так, и это сразу показывает таксономию каталога:
     видно, из чего вообще состоит набор. Список прячет её за кликом.
     Нам это подходит вдвойне: ряд рангов — одновременно фильтр и легенда
     шкалы жетонов.
   • ПОИСК ПО ИМЕНИ нужен наравне с фильтрами (genshin.gg): в каталоге на
     сотню имён перебор фильтрами проигрывает трём буквам.
   • ЗАКРЫТОЕ НЕ ГАСЯТ МОЛЧА — показывают требование. И различают не только
     цветом: приглушённый портрет плюс печать словами, а не серый квадрат.

   Промо-страница HSR (одна героиня во весь экран на карте звёзд) —
   контрпример: так выглядит витрина, а не рабочий каталог. Отсюда развод:
   АТМОСФЕРА от зала гильдии, РАБОТА от каталога.

   Материал — картотека Гильдии (`.cell` из components.css: гнездо, вырез в
   дереве). Это НЕ пробковая доска инвентаря: там что у тебя есть, здесь —
   на кого выдан допуск. Два разных экрана обязаны выглядеть по-разному.
   ============================================================ */

.hunt-page {
  padding-bottom: var(--s-20);
}


/* ── Колонтитул раздела ─────────────────────────────────────────────────────
   Это заголовок документа, а не панель сайта: ни липкости, ни лака. */
.hunt-mast {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-14) 0 var(--s-8);
  text-align: center;
}
.hunt-mast__seal {
  display: block;
  width: var(--s-10);
  height: var(--s-10);
  color: var(--brass);
  opacity: 0.75;
}
.hunt-mast__seal svg { width: 100%; height: auto; display: block; fill: currentColor; }
.hunt-mast__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-5);
  font-weight: var(--w-normal);
  line-height: var(--lh-tight);
}
.hunt-mast__lede {
  margin: 0;
  max-width: 56ch;
  font-size: var(--t-1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* ── Отбор ─────────────────────────────────────────────────────────────────
   Ряды «подпись — варианты». Значения видны без раскрытия: каталог сразу
   сообщает, из чего состоит. */

.sift {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-raised);
  box-shadow: var(--sh-brass-rule);
}
.sift__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-4);
}
.sift__key {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.sift__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
}

/* Ранг выбирается жетоном: тот же предмет, что на карточке и в переписи
   топов, — фильтр читается как «мне нужен вот такой металл». */
.rankpick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-1) var(--s-2);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: var(--lh-flat);
}
.rankpick .guild-token { width: var(--s-5); height: var(--s-5); font-size: var(--t--2); }
@media (hover: hover) {
  .rankpick:hover { color: var(--ink-2); }
}
.rankpick.is-active {
  color: var(--accent-text);
  border-color: var(--accent-line);
  background: var(--accent-1);
}

.sift__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}
.sift__search {
  flex: 1 1 220px;
  min-width: 0;
}
.sift__search input,
.sift__sort select {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  color: var(--ink);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: var(--lh-body);
}
.sift__search input::placeholder { color: var(--ink-4); }
.sift__search input:focus-visible,
.sift__sort select:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.sift__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: 0;
  color: var(--ink-4);
}
.sift__reset {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  background: transparent;
  border: 0;
  padding: var(--s-1) var(--s-0);
  cursor: pointer;
}

/* Гостю каталог не гасят: он не «не дотянулся», он не представился. Одна
   строка вместо серой витрины. */
.hunt-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-0) var(--s-0) var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.hunt-guest[hidden] { display: none; }

/* ── Ящик картотеки ────────────────────────────────────────────────────────
   Гнездо (`.cell`) даёт вырез в дереве, портрет лежит внутри. Карточка не
   «плитка с тенью», а место в ящике, из которого карту выдают. */

.drawer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 190px));
  justify-content: start;
  gap: var(--s-6) var(--s-5);
  margin: var(--s-0);
  padding: var(--s-0);
  list-style: none;
}
.slot__link {
  display: grid;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
}
.slot__socket { position: relative; display: block; }
.slot__socket .cell { display: block; }
/* Жетон приколот к углу гнезда: ранг допуска читается раньше имени —
   именно он решает, доступна карта или нет. */
.slot__token {
  position: absolute;
  right: calc(-1 * var(--s-2));
  bottom: calc(-1 * var(--s-2));
  z-index: var(--z-sticky);
}
.slot__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-1);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.slot__sub {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t--1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.slot__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.slot__reward {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: 0;
  color: var(--accent-text);
}
.slot__tag {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
@media (hover: hover) {
  .slot__link:hover .slot__name { color: var(--accent-text); }
  .slot__link:hover .cell { box-shadow: var(--sh-cell-hot); }
}
.slot__link:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
}

/* Закрытая карта: портрет приглушён И поперёк гнезда идёт печать с
   требованием. Различие не только по цвету — есть надпись и есть лента,
   то есть состояние читается и без восприятия оттенков. */
.slot--locked .slot__socket img {
  filter: grayscale(0.85) brightness(0.55);
}
.slot__seal {
  position: absolute;
  left: var(--s-0);
  right: var(--s-0);
  bottom: var(--s-5);
  z-index: var(--z-sticky);
  padding: var(--s-2) var(--s-3);
  background-image: linear-gradient(180deg, #d8b184, #a97c4c 55%, #7d5a2c);
  box-shadow: var(--sh-brass);
  color: var(--accent-ink);
  font-family: var(--font-label);
  font-size: var(--t--2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-flat);
  text-align: center;
}

/* ── Хвост списка ──────────────────────────────────────────────────────── */

.hunt-more {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-top: var(--s-10);
}
.hunt-empty {
  margin: var(--s-0);
  padding: var(--s-10) var(--s-6);
  text-align: center;
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-3);
  background: var(--bg-panel);
  border: 1px solid var(--line-subtle);
}

@media (max-width: 760px) {
  /* Колонтитул на телефоне занимал пол-экрана: до карточек приходилось
     доскроллиться, хотя за ними и пришли. */
  .hunt-mast { padding: var(--s-8) 0 var(--s-5); }
  .hunt-mast__seal { width: var(--s-8); height: var(--s-8); }

  .sift { padding: var(--s-4) var(--s-4); }
  /* Ряд рангов в одну строку: на 375px девять подписанных кнопок занимали
     четыре строки. Подпись не удаляем, а прячем от глаза — диктор её
     по-прежнему читает, и кнопка не превращается в одинокую букву. */
  .rankpick__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rankpick { padding: var(--s-1); }
  .sift__opts { gap: var(--s-2) var(--s-3); }
  .sift__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .drawer {
    grid-template-columns: repeat(auto-fill, minmax(0, 150px));
    gap: var(--s-5) var(--s-4);
  }
}