/* ============================================================
   ЕДИНЫЙ ЯЗЫК ЭЛЕМЕНТОВ УПРАВЛЕНИЯ
   ------------------------------------------------------------
   Замер по экранам показал одиннадцать разных радиусов скругления
   и пять на одном только Market: 999 у фильтров, 10 у системного
   списка, 9 у вкладок, 8 у плюс-минуса, 0 у сброса. Из-за этого
   экран читается как собранный из чужих кусков.

   Шкала сведена к трём значениям и больше ни к каким:
     12px — панель, карточка, крупный контейнер
      8px — элемент управления: вкладка, фильтр, поле, мелкая кнопка
      0px — пиксельная кнопка на 9-slice: у неё рамка нарисована

   Файл подключается последним и работает поверх остальных.
   Правки точечные: трогаем только радиус, рамку и заливку, размеры
   и раскладку не двигаем — иначе поедет вёрстка, которую никто
   не просил менять.
   ============================================================ */
.hb-app{
  --ctl-radius:8px;
  --ctl-border:var(--line,#28352f);
  --ctl-bg:var(--surface2,#16201c);
  --ctl-bg-hover:var(--surface3,#1c2a24);
}

/* ---- фильтры и чипы: были пилюли 999px ---- */
.hb-app .hb-filter-chip,
.hb-app .hb-loadout-filters button,
.hb-app .hb-market-filters button,
.hb-app .hb-market-stat-filter button,
.hb-app .hb-bounty-chip{
  border-radius:var(--ctl-radius) !important;
}

/* ---- выпадающие списки ---------------------------------------------
   В loothood-market-v1 у списка уже своя стрелка и своя заливка, там
   всё в языке — расходился только радиус (10 против 8). Поэтому здесь
   трогаем ровно радиус: перерисовывать стрелку заново значило бы
   получить две. Для списков без своего оформления гасим системный вид.
   Специфичность поднята под .hb-app .hb-market-view select — (0,3,1),
   одного .hb-app select с !important не хватало. */
.hb-app select,
.hb-app .hb-market-view select,
.hb-app .hb-market-panel select{
  border-radius:var(--ctl-radius) !important;
}
.hb-app select:not([class]):not(.hb-market-view select){
  -webkit-appearance:none; appearance:none;
}
.hb-app select:focus-visible{outline:1px solid var(--lime,#b7f24a); outline-offset:1px;}

/* ---- сегментные вкладки: активная — единственная яркая ---- */
.hb-app .hb-market-tabs button,
.hb-app .hb-gacha-tabs button,
.hb-app [role="tablist"] button{
  border-radius:var(--ctl-radius) !important;
}

/* ---- мелкие квадратные кнопки плюс-минус ---- */
.hb-app .hb-market-stat-filter button{
  border-radius:var(--ctl-radius) !important;
  background:var(--ctl-bg) !important;
  border:1px solid var(--ctl-border) !important;
}
.hb-app .hb-market-stat-filter button:hover{background:var(--ctl-bg-hover) !important;}

/* ---- поля ввода в одну линию с остальным ---- */
.hb-app input[type="text"],
.hb-app input[type="number"],
.hb-app input[type="search"]{
  border-radius:var(--ctl-radius) !important;
  border:1px solid var(--ctl-border) !important;
  background:var(--ctl-bg) !important;
  color:var(--ivory,#eaf5ee) !important;
  font-family:var(--body,"PixelOperator",monospace) !important;
}

/* ---- панель правил забега: осталась пергаментной -------------------
   Замер: у article.hb-prepare-rules фон rgb(207,227,214) — светло-серый
   лист, 402x457, тогда как все три соседние панели почти чёрные. Это
   пергамент из исходной сборки: main-menu-foundation-v1 красит её
   переменными --hb-parchment и --hb-parchment-ink, и рескин её не
   накрыл. На тёмном экране она выглядит как забытая заплата.
   ------------------------------------------------------------------- */
.hb-app .hb-prepare-rules{
  background:linear-gradient(180deg,var(--surface2,#16201c),var(--surface,#0f1613)) !important;
  color:var(--ivory,#eaf5ee) !important;
  border:1px solid var(--line,#28352f) !important;
  border-radius:12px !important;
}
.hb-app .hb-prepare-rules::after{border-color:transparent !important;}
.hb-app .hb-prepare-rules h2{color:var(--ivory,#eaf5ee) !important;}
.hb-app .hb-prepare-rules dt{color:var(--muted,#8ea89b) !important;}
.hb-app .hb-prepare-rules dd,
.hb-app .hb-prepare-rules dl > div{color:var(--ivory,#eaf5ee) !important;}
.hb-app .hb-prepare-rules .hb-value{color:var(--lime,#b7f24a) !important;}
/* остальной текст панели тоже был пергаментным: заголовок режима
   «P0 · Standard Hunt» на тёмном фоне читался как пустая строка */
.hb-app .hb-prepare-rules h3,
.hb-app .hb-prepare-rules strong,
.hb-app .hb-prepare-rules p,
.hb-app .hb-prepare-rules span,
.hb-app .hb-prepare-rules small{color:var(--ivory,#eaf5ee) !important;}
.hb-app .hb-prepare-rules p,
.hb-app .hb-prepare-rules small{color:var(--muted,#8ea89b) !important;}

/* переключатель престижа внутри неё был на песочной заливке */
.hb-app .hb-prestige-selector{
  background:var(--surface3,#1c2a24) !important;
  border:1px solid var(--line,#28352f) !important;
  color:var(--ivory,#eaf5ee) !important;
  border-radius:var(--ctl-radius) !important;
}
.hb-app .hb-prestige-selector > span,
.hb-app .hb-prestige-selector select{color:var(--ivory,#eaf5ee) !important;}

/* ---- фоны вкладок было не видно ------------------------------------
   Замер: в правой трети Loot Pulls средняя яркость 7 при разбросе 5 —
   ровное чёрное, хотя сам файл фона имеет яркость 32. Ни скрим, ни
   фон экрана тут ни при чём: их отключение ничего не меняло. Закрывали
   панели содержимого — они залиты rgb(15,22,19) наглухо и занимают до
   45% площади каждая, так что арту просто негде проступить.

   Панели становятся полупрозрачными с лёгким размытием: текст на них
   остаётся читаемым, потому что размытие гасит детали под ним, а арт
   читается между блоками и по краям.
   -------------------------------------------------------------------- */
.hb-app [data-screen="equipment-pulls"] .hb-equipment-panel,
.hb-app [data-screen="equipment-pulls"] .hb-gacha-standard,
.hb-app [data-screen="outfitter"] .hb-equipment-panel,
.hb-app [data-screen="outfitter"] .hb-equipment-filter-panel,
.hb-app [data-screen="marketplace"] .hb-market-panel,
.hb-app [data-screen="marketplace"] .hb-market-tabs,
.hb-app [data-screen="bounties"] .hb-bounty-strip,
.hb-app [data-screen="bounties"] .hb-bounty-locked{
  background-color:rgba(15,22,19,.78) !important;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* ---- кнопки аккаунта и звука: пиксельная рамка ----------------------
   Они оставались единственными в верхней панели с обычной плашкой и
   скруглением, тогда как всё остальное на пиксельных спрайтах.
   Спрайт взят малый, 16 пикселей со срезом 6: у кнопки сторона 38, и
   обычная рамка в 12 съела бы почти всё поле под иконку.
   -------------------------------------------------------------------- */
.hb-app .hb-add,
.hb-app .hb-audio-toggle{
  --btn9s:url("../images/btn9s-neutral-v1.png?r11");
  --btn9sh:url("../images/btn9s-neutral-hover-v1.png?r11");
  --btn9sp:url("../images/btn9s-neutral-pressed-v1.png?r11");
  border:6px solid transparent !important;
  border-image:var(--btn9s) 6 fill stretch !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  image-rendering:pixelated;
  padding:0 !important;
}
.hb-app .hb-add:hover,
.hb-app .hb-audio-toggle:hover{
  border-image-source:var(--btn9sh) !important;
  background:none !important; filter:none !important;
}
.hb-app .hb-add:active,
.hb-app .hb-audio-toggle:active{
  border-image-source:var(--btn9sp) !important;
}

/* ---- пустые слоты иконок ломают сетку ----------------------------
   icon-slot-bounty, icon-slot-equipment-stat, icon-slot-foundation и
   icon-slot-status — все четыре PNG прозрачны на сто процентов. Рисуют они
   ничего, а место в раскладке занимают, и там, где строка объявлена сеткой в
   одну колонку, лишний элемент уносит текст на строку ниже. Так в списке
   READY на экране подготовки охоты галочка у «Loadout Selected» и «Foundation
   Selected» оказывалась над подписью, а не рядом с ней.

   Правило снимать, когда в спрайты положат картинки. */
.hb-app .hb-icon-slot,
.desktop-main-menu .hb-icon-slot {
  display: none !important;
}

/* Мало спрятать слот: строки списка READY объявлены как .hb-metadata-line, а
   у того в тематическом файле сетка в одну колонку. Галочка из ::before и
   подпись остаются двумя элементами и всё равно встают друг под друга.
   Возвращаем им ту же пару колонок, что у обычного пункта списка. */
.desktop-main-menu .hb-prepare-state li.hb-metadata-line {
  grid-template-columns: clamp(20px, 1.6cqw, 27px) minmax(0, 1fr);
}

/* ---- узкое окно: меню не должно разъезжаться ----------------------
   .hb-shell-body — сетка «боковая панель плюс содержимое», и у неё
   min-width: auto. Это значит, что ужаться ниже минимально-содержательной
   ширины она не может: на окне в 430 пикселей она оставалась 889, вылезала
   за край, и правая часть каждого экрана просто обрезалась.

   Мобильный медиазапрос в main-menu-mobile-transpose-v3.css существует, но
   писался под прежнюю мобильную разметку и до нового десктопного меню
   (body.desktop-menu-active) не достаёт.

   Тут не переверстка, а именно снятие распорки: разрешаем сетке ужиматься,
   боковой панели — сузиться до иконок, содержимому — занять остальное. */
@media (max-width: 980px) {
  /* Распорку держала не боковая панель, а верхняя: шесть фишек ресурсов с
     запретом переноса задают минимальную ширину около 890 пикселей, и вся
     сетка растягивалась под них. Шесть фишек в 430 пикселей не помещаются
     никак, поэтому строка ресурсов становится прокручиваемой вбок. */
  .hb-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .hb-app .hb-topbar,
  .hb-app .hb-resources {
    min-width: 0;
    max-width: 100%;
  }
  .hb-app .hb-resources {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hb-app .hb-resources::-webkit-scrollbar { display: none; }

  .hb-app .hb-shell-body {
    min-width: 0;
    grid-template-columns: clamp(58px, 20vw, 154px) minmax(0, 1fr);
  }
  .hb-app .hb-sidebar,
  .hb-app .hb-shell-body > * {
    min-width: 0;
  }
  /* На такой ширине подпись пункта не помещается рядом с иконкой и рвётся
     на две строки. Оставляем иконку, название доступно с клавиатуры и
     экранному диктору через aria-label самой кнопки. */
  .hb-app .hb-sidebar .hb-nav-item span:not(.hb-nav-ic) {
    display: none;
  }
  .hb-app .hb-sidebar .hb-nav-group-label {
    font-size: 9px;
    letter-spacing: .04em;
  }
}

/* ---- окно про переполнение склада --------------------------------
   Единственное окно, до которого не дошли руки: рамки в один пиксель, кнопки
   без пиксельных спрайтов, типографика от прежней игры. Рядом с остальным
   интерфейсом оно читалось как чужое.

   Оформляем тем же набором, что и подтверждение выхода из забега: тёмная
   панель, наши шрифты, лаймовая кнопка для безопасного действия и красная
   для рискованного. Предупреждение о потере ресурсов красное не для красоты —
   это единственное место, где игрок может молча лишиться добытого. */

.hb-app #storehouseRiskModal,
body.desktop-menu-active #storehouseRiskModal {
  background: color-mix(in srgb, #010804 78%, transparent) !important;
}

body.desktop-menu-active #storehouseRiskModal .storehouse-risk__panel {
  max-width: 560px;
  padding: 26px 28px 24px !important;
  border: 1px solid var(--line, #22302a) !important;
  border-radius: 14px !important;
  background: var(--surface, #0e1512) !important;
  box-shadow: 0 28px 70px -34px #000 !important;
}

body.desktop-menu-active #storehouseRiskModal .storehouse-risk__panel > p:first-of-type {
  margin: 0 0 4px;
  color: var(--lime, #b7f24a);
  font-family: var(--body, "Pixel Operator", monospace);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.desktop-menu-active #storehouseRiskModal h2 {
  margin: 0 0 10px !important;
  font-family: var(--disp, "Alagard", serif) !important;
  font-size: 26px !important;
  line-height: 1.12;
  color: var(--ivory, #eaf5ee) !important;
  text-shadow: none !important;
}

body.desktop-menu-active #storehouseRiskModal #storehouseRiskDescription,
body.desktop-menu-active #storehouseRiskModal strong {
  display: block;
  margin: 0 0 14px;
  max-width: 56ch;
  color: var(--muted, #8ea89b) !important;
  font-family: var(--body, "Pixel Operator", monospace);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Строка про уничтожение добытого — единственная, которую нельзя пролистать
   глазами, поэтому она и единственная светлая. */
body.desktop-menu-active #storehouseRiskModal strong {
  color: var(--ivory, #eaf5ee) !important;
  font-weight: 400;
}

body.desktop-menu-active #storehouseRiskModal .storehouse-risk__resource {
  border: 1px solid var(--line, #22302a) !important;
  border-radius: 10px !important;
  background: var(--surface2, #141d18) !important;
}

body.desktop-menu-active #storehouseRiskModal .storehouse-risk__resource[data-at-risk="true"] {
  border-color: color-mix(in srgb, #ff6b6b 55%, var(--line, #22302a)) !important;
}

body.desktop-menu-active #storehouseRiskModal .storehouse-risk__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

body.desktop-menu-active #storehouseRiskModal .storehouse-risk__actions button {
  min-height: 46px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line, #22302a) !important;
  background: var(--surface2, #141d18) !important;
  color: var(--ivory, #eaf5ee) !important;
  font-family: var(--disp, "Alagard", serif) !important;
  font-size: 16px !important;
  letter-spacing: .3px;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 140ms var(--lh-ease-out, cubic-bezier(.16,1,.3,1)),
              border-color 140ms var(--lh-ease-out, cubic-bezier(.16,1,.3,1));
}

body.desktop-menu-active #storehouseRiskModal #reviewStorehouseRisk {
  border-color: color-mix(in srgb, var(--lime, #b7f24a) 45%, var(--line, #22302a)) !important;
  color: var(--lime, #b7f24a) !important;
}

body.desktop-menu-active #storehouseRiskModal .button--danger {
  border-color: color-mix(in srgb, #ff6b6b 50%, var(--line, #22302a)) !important;
  background: color-mix(in srgb, #ff6b6b 12%, var(--surface2, #141d18)) !important;
  color: #ff8f8f !important;
}

@media (hover: hover) and (pointer: fine) {
  body.desktop-menu-active #storehouseRiskModal #reviewStorehouseRisk:hover {
    background: var(--lime, #b7f24a) !important;
    color: #08120a !important;
  }
  body.desktop-menu-active #storehouseRiskModal .button--danger:hover {
    background: #ff6b6b !important;
    color: #160a0a !important;
  }
}

/* Крестик круглым быть не должен: во всём остальном интерфейсе он квадратный
   со скруглением, как любая другая кнопка. */
body.desktop-menu-active #storehouseRiskModal .storehouse-risk__close {
  border-radius: 10px !important;
  border: 1px solid var(--line, #22302a) !important;
  background: var(--surface2, #141d18) !important;
  color: var(--muted, #8ea89b) !important;
}

/* ---- заголовки и крестики во всех окнах ---------------------------
   Замер по всем окнам сразу показал две вещи, которые глазом ловятся плохо,
   а числами сразу.

   Первое: заголовок окна итогов забега рисовался шрифтом Courier New, а
   заголовки окна сборки и настроек — просто serif. Своего шрифта они не
   объявляют, а body в styles.css задаёт монопространственный запасной набор,
   и они его наследовали. То есть три окна из десяти показывали заголовок
   шрифтом браузера.

   Второе: крестик закрытия круглый в шести окнах и скруглённый на 10-12
   пикселей в остальных. Круг тут не несёт смысла: это такая же кнопка, как
   любая другая.

   Правило намеренно широкое и без !important там, где можно: оно должно
   доставать до окон, которых мы ещё не переделывали, и уступать тем, что
   уже оформлены. */

.hb-outcome__title,
.stats-modal__head h2,
.utility-modal__panel h2,
#runSummaryModal h2,
#runBuildModalTitle,
#desktopSettingsTitle,
#statsModalTitle,
#inventoryModalTitle {
  font-family: var(--disp, "Alagard"), Georgia, serif !important;
}

.stats-modal__close,
.utility-modal__close,
.tutorial-guide__close,
#closeRunBuildModal,
#closeStatsModal,
#closeInventoryModal,
#closeTutorialGuide,
[class*="__close"] {
  border-radius: 10px !important;
}

/* ---- мобильное окно справочника -----------------------------------
   На десктопе справочник стал экраном, но на узких экранах он остаётся
   окном, и его нижние кнопки сохранили прежний вид: прямые углы, рамка в
   один пиксель. Боевые окна такой беды не знают — там правила висят на
   body[data-view="run"] и всё уже оформлено, — а это окно открывается из
   меню и мимо тех правил проходит. */

.tutorial-guide-modal .stats-modal__footer button,
.tutorial-guide-modal .utility-modal__back,
#replayTutorial,
#closeTutorialGuideFooter {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px !important;
  border: 1px solid var(--line, #22302a) !important;
  background: var(--surface2, #141d18) !important;
  color: var(--ivory, #eaf5ee) !important;
  font-family: var(--disp, "Alagard"), Georgia, serif !important;
  font-size: 15.5px;
  letter-spacing: .3px;
  text-shadow: none !important;
  box-shadow: none !important;
}

#replayTutorial {
  border-color: color-mix(in srgb, var(--lime, #b7f24a) 45%, var(--line, #22302a)) !important;
  color: var(--lime, #b7f24a) !important;
}

@media (hover: hover) and (pointer: fine) {
  .tutorial-guide-modal .stats-modal__footer button:hover,
  #replayTutorial:hover {
    background: var(--surface3, #1b2620) !important;
  }
}

/* ---- окно аккаунта: больше места содержимому -----------------------
   Замер на окне 1280x720: панель 1180x677, а прокручиваемой области досталось
   374 пикселя при нужных 438. Листать приходилось почти всегда, хотя само
   окно занимает экран целиком.

   Съедала высоту служебная обвязка: шапка минимум 92 пикселя, полоса вкладок
   ещё 54, подвал 66, и всё с щедрыми полями. Ужимаем обвязку, а не содержимое:
   заголовок «Account & Settings» не станет хуже от того, что вокруг него будет
   двадцать пикселей вместо тридцати пяти, а вот пропавшая полоса прокрутки
   меняет ощущение от окна целиком.

   Плюс сама панель поднимается почти во весь экран: она и так модальная, и
   оставлять по краям пустое поле незачем. */

.hb-account-settings__panel {
  height: min(920px, 97vh) !important;
}

.hb-account-settings__head {
  min-height: 0 !important;
  padding: 14px clamp(16px, 2.4vw, 32px) 12px !important;
}

.hb-account-settings__tabs {
  padding: 0 clamp(10px, 2.4vw, 28px) !important;
}

.hb-account-settings__tabs button {
  min-height: 44px !important;
}

.hb-account-settings__foot {
  min-height: 0 !important;
  padding-block: 12px !important;
}

/* Крестик был бледной точкой в крупной рамке: сам знак мелкий, цвет тусклый.
   Кнопка должна читаться как кнопка. */
.hb-account-settings__close {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-width: 1px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}