/* LOOTHOOD — Bounty Board v1 · «Доска заказов»
   ------------------------------------------------------------------
   Ретеншн-поверхность: её открывают каждую неделю. Выглядела как самый
   старый экран в игре — коричнево-янтарные полосы прогресса из палитры,
   от которой мы ушли, прямые углы, и шесть текстовых элементов в каждой
   карточке одинаковой громкости: тег WEEKLY, задача, слово REWARD,
   награда, «REPEATABLE UNTIL WEEKLY CAP» и «Rewarded 0× this week».
   Читать это невозможно — глазу не за что зацепиться.

   Что делаем:
     1. полосы прогресса переводим в лайм с градиентом и свечением
     2. в карточке остаётся одна главная строка — сама задача
     3. награда становится компактным чипом, а не блоком в рамке
     4. служебные приписки уходят в тихий низ карточки
     5. панель и карточки получают радиусы и поверхности Hunt

   Полосы — это <meter>, поэтому красим и трек, и заливку. */

/* ============ ПАНЕЛЬ ============ */

.hb-app .utility-modal__panel,
.utility-modal__panel {
  border: 1px solid var(--line, #28352f) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(17,25,21,.98), rgba(11,16,14,.98)) !important;
  box-shadow: 0 40px 90px -40px #000 !important;
  padding: 26px 28px !important;
}

.utility-modal__panel .stats-modal__head {
  margin-bottom: 18px;
}
.utility-modal__panel .stats-modal__head > div > p {
  margin: 0 0 3px;
  font-family: var(--body, monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dim, #63776b);
}
.utility-modal__panel .stats-modal__head h2 {
  margin: 0;
  font-family: var(--disp, serif);
  font-size: 30px;
  letter-spacing: .4px;
  color: var(--ivory, #eaf5ee) !important;
}
/* Ромбовидная линейка — язык старого меню. */
.utility-modal__panel .hb-diamond-rule { display: none !important; }

/* Кнопка закрытия была «X» в лаймовой рамке — слишком громко для служебного
   действия, поэтому она стала тихой. Круглой она была тоже: тогда заказы были
   единственным окном, и круг ни с чем не спорил.

   Теперь спорит. В остальном интерфейсе каждый управляющий элемент скруглён
   на 10-12 пикселей, и крестик, оставшийся кругом в шести окнах из десяти,
   читается как деталь из другой программы. Форма приведена к общей. */
.utility-modal__panel .stats-modal__close {
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, #28352f) !important;
  background: var(--surface2, #141d19) !important;
  color: var(--muted, #93ab9e) !important;
  font-size: 15px;
  line-height: 1;
  text-transform: none;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .utility-modal__panel .stats-modal__close:hover {
    color: var(--ivory, #eaf5ee) !important;
    border-color: color-mix(in srgb, var(--lime, #b7f24a) 45%, var(--line, #28352f)) !important;
    background: var(--surface3, #1b2620) !important;
  }
}

/* ============ ПОЛОСЫ ПРОГРЕССА ============
   Были коричневые. Тот же вид, что у недельной полосы на Hunt и у
   pity-полос: трек с рамкой, заливка градиентом изумруд→лайм, свечение. */

.utility-modal__panel meter {
  width: 100%;
  height: 9px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line2, #1b2621);
  border-radius: 5px;
  background: var(--surface3, #1b2620);
  overflow: hidden;
}
.utility-modal__panel meter::-webkit-meter-bar {
  background: var(--surface3, #1b2620);
  border: none;
  border-radius: 5px;
}
.utility-modal__panel meter::-webkit-meter-optimum-value,
.utility-modal__panel meter::-webkit-meter-suboptimum-value,
.utility-modal__panel meter::-webkit-meter-even-less-good-value {
  border-radius: 5px;
  background: linear-gradient(90deg, var(--emerald, #2be28a), var(--lime, #b7f24a));
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--lime, #b7f24a) 70%, transparent);
}
.utility-modal__panel meter::-moz-meter-bar {
  border-radius: 5px;
  background: linear-gradient(90deg, var(--emerald, #2be28a), var(--lime, #b7f24a));
}

/* ============ НЕДЕЛЬНАЯ ПОЛОСА БИЛЕТОВ ============ */

.utility-modal__panel .weekly-ticket-progress {
  border: 1px solid color-mix(in srgb, var(--lime, #b7f24a) 20%, var(--line, #28352f)) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(24,34,26,.7), rgba(14,20,16,.7)) !important;
  padding: 15px 17px !important;
  margin-bottom: 14px;
}
.utility-modal__panel .weekly-ticket-progress__head strong {
  font-family: var(--body, monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lime, #b7f24a);
}
.utility-modal__panel .weekly-ticket-progress__head span {
  color: var(--dim, #63776b);
  font-size: 12px;
}
.utility-modal__panel .weekly-ticket-progress > b {
  display: block;
  margin: 6px 0 8px;
  font-family: var(--disp, serif);
  font-size: 22px;
  color: var(--ivory, #eaf5ee);
}
.utility-modal__panel .weekly-ticket-progress p {
  margin: 9px 0 0;
  color: var(--dim, #63776b);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Балансы сверху — чипы, как ресурсы в шапке. */
.utility-modal__panel .bounty-balances > * {
  border: 1px solid var(--line, #28352f) !important;
  border-radius: 999px !important;
  background: var(--surface2, #141d19) !important;
  padding: 7px 14px !important;
  color: var(--muted, #93ab9e) !important;
  font-size: 12.5px;
}

.utility-modal__panel .bounty-section__head strong,
.utility-modal__panel .bounty-section__head h3 {
  font-family: var(--disp, serif);
  font-size: 19px;
  color: var(--ivory, #eaf5ee) !important;
}

/* ============ КАРТОЧКА ЗАКАЗА ============ */

.utility-modal__panel .bounty-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 11px;
}

.utility-modal__panel .bounty {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--line, #28352f) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(20,29,25,.85), rgba(12,18,15,.85)) !important;
  padding: 14px 16px 13px !important;
  transition: border-color 140ms var(--lh-ease-out, ease-out),
              transform 140ms var(--lh-ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .utility-modal__panel .bounty:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lime, #b7f24a) 38%, var(--line, #28352f)) !important;
  }
}

/* Шапка: тег слева, счётчик справа. Тег больше не кричит лаймом. */
.utility-modal__panel .bounty__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--body, monospace);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim, #63776b) !important;
}
.utility-modal__panel .bounty__head > :last-child {
  color: var(--ivory, #eaf5ee);
  letter-spacing: .5px;
  font-size: 12.5px;
}

/* Задача — единственная громкая строка в карточке. */
.utility-modal__panel .bounty__title {
  margin: 0;
  font-family: var(--disp, serif);
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: .2px;
  color: var(--ivory, #eaf5ee) !important;
}

/* Награда: был блок в рамке со словом REWARD над значением. Схлопываем
   в один чип — слово «награда» игроку не нужно, нужен сам билет. */
.utility-modal__panel .bounty__rewards {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
.utility-modal__panel .bounty__rewards > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--leg, #ffd24a) 26%, var(--line, #28352f)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--leg, #ffd24a) 9%, transparent) !important;
  padding: 5px 11px !important;
  color: var(--leg, #ffd24a) !important;
  font-family: var(--body, monospace);
  font-size: 12.5px;
  letter-spacing: .2px;
}
/* Подпись «REWARD» внутри чипа лишняя. */
.utility-modal__panel .bounty__rewards dt,
.utility-modal__panel .bounty__rewards > * > :first-child:not(:only-child) {
  display: none !important;
}

/* Служебные приписки — тихий низ карточки. */
.utility-modal__panel .bounty__repeatable,
.utility-modal__panel .bounty__weekly-limit {
  margin: 0 !important;
  color: var(--dim, #63776b) !important;
  font-family: var(--body, monospace);
  font-size: 11.5px;
  letter-spacing: .3px;
  text-transform: none !important;
}

.utility-modal__panel .bounty-empty {
  color: var(--dim, #63776b) !important;
  font-size: 13px;
}

/* ============================================================
   ЭКРАН ЗАКАЗОВ  (был модальный диалог из клиента друга)
   Правило одно: одна задача — одна строка. Абзацы читать никто
   не будет, а на этот экран заходят каждый день. Строка идёт
   слева направо в порядке вопросов игрока: сделано ли · что
   делать · сколько осталось · что дадут.
   ============================================================ */
.hb-app .hb-bounties-screen{
  display:flex; flex-direction:column; gap:18px;
  padding:26px 30px 34px; min-height:0; overflow:auto;
}
.hb-app .hb-bounties-heading{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
.hb-app .hb-bounties-heading h1{margin:0; font-family:var(--disp); font-size:44px; letter-spacing:.5px; color:var(--ivory);}
.hb-app .hb-bounties-heading dl{display:flex; gap:26px; margin:0;}
.hb-app .hb-bounties-heading dt{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted);}
.hb-app .hb-bounties-heading dd{margin:2px 0 0; font-family:var(--body); font-size:19px; font-weight:700; color:var(--ivory);}

/* недельная цепочка — отдельной полосой сверху: это единственная
   награда с потолком, и игрок должен видеть, сколько ещё влезет */
.hb-app .hb-bounty-strip{
  display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
}
.hb-app .hb-bounty-strip__head{display:flex; align-items:baseline; gap:12px;}
.hb-app .hb-bounty-strip__head h2{margin:0; font-family:var(--disp); font-size:20px; color:var(--ivory);}
.hb-app .hb-bounty-strip__head span{font-size:12.5px; color:var(--muted);}
.hb-app .hb-bounty-strip>strong{font-family:var(--body); font-size:22px; color:var(--lime); justify-self:end;}
.hb-app .hb-bounty-strip__bar{
  grid-column:1/-1; height:8px; border-radius:99px; background:var(--surface3);
  border:1px solid var(--line2); overflow:hidden; display:block;
}
.hb-app .hb-bounty-strip__bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--em),var(--lime));}
.hb-app .hb-bounty-strip>p{grid-column:1/-1; margin:0; font-size:12.5px; color:var(--muted);}
.hb-app .hb-bounty-strip[data-cap="reached"] .hb-bounty-strip__bar>i{background:var(--leg);}

.hb-app .hb-bounty-group>header{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:0 2px 8px; border-bottom:1px solid var(--line2); margin-bottom:2px;
}
.hb-app .hb-bounty-group h2{margin:0; font-family:var(--disp); font-size:21px; color:var(--ivory);}
.hb-app .hb-bounty-group header span{font-size:12.5px; color:var(--muted);}
.hb-app .hb-bounty-list{list-style:none; margin:0; padding:0;}

.hb-app .hb-bounty-row{
  display:grid; align-items:center; gap:14px;
  /* колонка счётчика по самому длинному значению: «3,000 / 3,000» */
  grid-template-columns:18px minmax(0,1fr) 140px 108px auto;
  padding:11px 2px; border-bottom:1px solid var(--line2);
}
.hb-app .hb-bounty-row__dot{
  width:17px; height:17px; background-repeat:no-repeat; background-position:center;
  background-size:contain; image-rendering:pixelated;
}
.hb-app .hb-bounty-row__dot[data-bounty-state="open"]{background-image:url("../images/bounty-dot-open-v1.png"); opacity:.75;}
.hb-app .hb-bounty-row__dot[data-bounty-state="progress"]{background-image:url("../images/bounty-dot-progress-v1.png");}
.hb-app .hb-bounty-row__dot[data-bounty-state="done"]{background-image:url("../images/bounty-dot-done-v1.png");
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--lime) 55%,transparent));}
.hb-app .hb-bounty-row__dot[data-bounty-state="paid"]{background-image:url("../images/bounty-dot-done-v1.png"); opacity:.35;}

.hb-app .hb-bounty-row__label{display:flex; flex-direction:column; gap:2px; min-width:0;
  font-family:var(--disp); font-size:16px; color:var(--ivory); letter-spacing:.2px;}
.hb-app .hb-bounty-row__label small{font-family:var(--body); font-size:11.5px; color:var(--muted); letter-spacing:0;}
.hb-app .hb-bounty-row__bar{height:7px; border-radius:99px; background:var(--surface3); border:1px solid var(--line2); overflow:hidden;}
.hb-app .hb-bounty-row__bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--em),var(--lime));}
.hb-app .hb-bounty-row>b{font-family:var(--body); font-size:14px; color:var(--muted);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.hb-app .hb-bounty-row__rewards{display:flex; gap:6px; justify-content:flex-end;}
.hb-app .hb-bounty-chip{
  display:inline-flex; align-items:baseline; gap:5px; padding:3px 9px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface2);
  font-size:11.5px; color:var(--muted); white-space:nowrap;
}
.hb-app .hb-bounty-chip strong{font-size:13px; color:var(--ivory);}

/* выполненная строка гасит свой текст: взгляд должен цепляться за
   незакрытые, а не пересчитывать сделанное заново */
.hb-app .hb-bounty-row[data-state="done"] .hb-bounty-row__label{color:var(--muted);}
.hb-app .hb-bounty-row[data-state="done"]>b{color:var(--lime);}
.hb-app .hb-bounty-row[data-state="paid"]{opacity:.5;}
.hb-app .hb-bounty-row[data-state="paid"] .hb-bounty-row__label{font-style:italic;}

.hb-app .hb-bounty-locked{
  padding:18px; border:1px dashed var(--line); border-radius:12px; background:var(--surface2);
}
.hb-app .hb-bounty-locked strong{display:block; font-family:var(--disp); font-size:19px; color:var(--ivory); margin-bottom:4px;}
.hb-app .hb-bounty-locked p{margin:0; font-size:13px; color:var(--muted);}

/* ---- узкое окно ---------------------------------------------------
   Строка заказа держит две фиксированные колонки: полосу прогресса в 140
   пикселей и счётчик в 108. На окне в 430 подписи оставалось около сотни, и
   она рвалась по одному слову на строку: «Complete / a / full / Stage / 15».
   Разносим строку на два ряда — сверху подпись во всю ширину, снизу полоса
   и счёт. */
@media (max-width: 980px) {
  .hb-app .hb-bounty-row{
    grid-template-columns:18px minmax(0,1fr) auto;
    row-gap:8px;
  }
  .hb-app .hb-bounty-row__label{ grid-column:2 / -1; }
  .hb-app .hb-bounty-row__bar{ grid-column:2; min-width:0; }
}