/* LOOTHOOD — Hunt screen redesign v1 · "Trailhead HUD"
   The forest key-art is the scene; the UI is a HUD over it; one luminous action
   (Prepare Hunt) is the focal moment; the shelf below is retention hooks.
   Scoped to .hb-app. Committed world: Emerald Lime + Alagard/PixelOperator. */

.hb-app{
  --bg:#080b0a; --surface:#0f1613; --surface2:#141d19; --surface3:#1b2620;
  --line:#28352f; --line2:#1b2621; --ivory:#eaf5ee; --muted:#93ab9e; --dim:#789082;
  --lime:#b7f24a; --lime-deep:#7fae2a; --emerald:#2be28a; --danger:#ff6b6b; --ember:#ff9d3d;
  --leg:#ffd24a; --rare:#46d8e0; --epic:#b48cff; --un:#4be08a;
  --disp:'Alagard',serif; --body:'PixelOperator','PixelOperator8',monospace;
  --r:14px;
  background:var(--bg); color:var(--ivory); font-family:var(--body);
  image-rendering:pixelated;
  min-height:100vh;
}
.hb-app *{box-sizing:border-box;}

/* ============ TOP BAR ============ */
.hb-app .hb-topbar{
  display:flex; align-items:center; gap:20px; height:72px; padding:0 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0c130f,#080b0a);
  position:relative; z-index:5;
}
.hb-app .hb-brand-lockup{display:flex; align-items:center; gap:13px; min-width:0;}
.hb-app .hb-wordmark{height:30px; width:auto; image-rendering:pixelated;}
.hb-app .hb-brand-divider{width:1px; height:30px; background:var(--line); display:inline-block;}
.hb-app .hb-prestige-stack{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.hb-app .hb-prestige{font-family:var(--disp); font-size:19px; letter-spacing:.3px; color:var(--ivory);}
.hb-app .hb-version-label{font-size:11px; color:var(--muted); letter-spacing:.2px;}
.hb-app .hb-resources{display:flex; align-items:center; gap:9px; margin-left:auto;}
.hb-app .hb-resource{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  border-radius:10px; border:1px solid var(--line); background:var(--surface2);
  font-family:var(--body); font-size:14px; font-weight:700; color:var(--ivory);
}
.hb-app .hb-resource__icon{width:18px; height:18px; object-fit:contain; image-rendering:pixelated;}
/* premium currency (limited tickets) subtly elevated — the ownership thread */
.hb-app .hb-resource--limited{
  border-color:color-mix(in srgb,var(--leg) 40%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--leg) 12%,var(--surface2)),var(--surface2));
  color:var(--leg);
}
/* account + audio: quiet HUD utilities, set apart from the resource chips by a hairline */
.hb-app .hb-add{margin-left:6px; position:relative;}
.hb-app .hb-add::before{
  content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--line);
}
.hb-app .hb-add,.hb-app .hb-audio-toggle{
  width:36px !important; height:36px !important; display:grid !important; place-items:center;
  border-radius:10px !important; padding:0 !important;
  border:1px solid var(--line) !important; background:var(--surface2) !important;
  color:var(--muted) !important; cursor:pointer; box-shadow:none !important;
  transition:color .15s, background .15s, border-color .15s;
}
/* legacy drew an inset gold/green border via ::after — remove it so the two match */
.hb-app .hb-add::after,.hb-app .hb-audio-toggle::after{display:none !important; content:none !important;}
.hb-app .hb-add:hover,.hb-app .hb-audio-toggle:hover,
.hb-app .hb-audio-toggle:focus-visible{
  color:var(--ivory) !important; background:var(--surface3) !important;
  border-color:color-mix(in srgb,var(--lime) 45%,var(--line)) !important; outline:none !important;
}
/* muted state = quieter, not a theme switch to gold */
.hb-app .hb-audio-toggle[aria-pressed="false"]{
  color:var(--dim) !important; border-color:var(--line) !important; background:var(--surface2) !important;
}
.hb-app .hb-audio-toggle[aria-pressed="false"] svg{opacity:1 !important;}
.hb-app .hb-add svg,.hb-app .hb-audio-toggle svg{
  width:19px !important; height:19px !important; fill:none !important; stroke:currentColor !important;
  stroke-width:2.4 !important; stroke-linecap:round; stroke-linejoin:round;
}

/* ============ SHELL ============ */
/* Высота считается от настоящей высоты шапки, и это важнее, чем кажется.
   Легаси задаёт телу height: calc(100% - max(7.6cqh, 54px)) — то есть считает
   шапку долей от высоты окна. Наша шапка ровно 72 пикселя всегда. Пока окно
   выше 947 пикселей, 7.6% больше 72 и расхождения не видно. Ниже — тело
   становится длиннее окна: при 768 на четырнадцать пикселей, при 720 на
   семнадцать. Ровно на столько снизу и срезалось всё, что там стояло, —
   например кнопка Claim Resources в деревне.

   min-height оставлен: он держит тело, когда содержимого мало. */
.hb-app .hb-shell-body{
  display:grid; grid-template-columns:214px 1fr; align-items:stretch;
  height:calc(100% - 72px); min-height:calc(100vh - 72px);
}

/* ============ NAV (quiet — lets the hunt lead) ============ */
.hb-app .hb-sidebar{
  display:flex; flex-direction:column; gap:2px; padding:16px 12px;
  border-right:1px solid var(--line); background:#0a100d;
}
.hb-app .hb-nav-group{
  font-family:var(--body); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--dim); padding:13px 10px 4px;
}
.hb-app .hb-nav-group:first-child{padding-top:2px;}
.hb-app .hb-nav-item{
  --c:var(--lime);
  display:flex; align-items:center; width:100%; text-align:left; gap:11px;
  padding:8px 10px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--muted);
  font-family:var(--disp); font-size:19px; letter-spacing:.4px; transition:.13s;
}
.hb-app .hb-nav-item span:last-child{flex:1; min-width:0;}
.hb-app .hb-nav-ic{
  width:30px; height:30px; flex:none; border-radius: 9px; display:grid; place-items:center;
  color:var(--c); background:color-mix(in srgb,var(--c) 14%,var(--surface2));
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
}
.hb-app .hb-nav-ic svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}
.hb-app .hb-nav-item:hover{background:var(--surface); color:var(--ivory);}
.hb-app .hb-nav-item.is-active{
  background:color-mix(in srgb,var(--c) 12%,var(--surface));
  color:var(--ivory); border-color:color-mix(in srgb,var(--c) 34%,transparent);
  box-shadow:inset 3px 0 0 var(--c);
}

/* ============ MAIN STAGE ============ */
.hb-app .hb-main[data-screen="hunt"]{
  display:flex; flex-direction:column; gap:16px; padding:20px 24px 24px; min-width:0;
  /* окно ниже контента: без прокрутки низ (кнопка Pull) обрезается overflow'ом .hb-app */
  overflow-y:auto; min-height:0;
}
.hb-app .hb-diamond-rule{display:none;}

/* ---- Hero stage: forest scene + panel ---- */
.hb-app .hb-hunt-hero{
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid color-mix(in srgb,var(--lime) 22%,var(--line));
  /* Высота гибкая, но не ниже собственного содержимого — отсюда 1 0 вместо
     1 1. Со сжатием сцена при окне высотой 768 садилась до 275 пикселей,
     панель в неё не влезала, и кнопка Start Hunt выпадала из своей карточки
     вниз, под карточку Seasonal Hunt. Главную кнопку игры на самом ходовом
     ноутбучном разрешении нельзя было нажать. Пусть лучше низ экрана
     прокручивается: у .hb-main[data-screen=hunt] прокрутка уже есть. */
  min-height:240px; flex:1 0 auto; display:flex;
  box-shadow:0 24px 60px -34px #000, inset 0 0 0 1px rgba(255,255,255,.02);
}
.hb-app .hb-promo-art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  /* Было 72% 42%. Костёр в ключевом арте приходится примерно на половину
     высоты исходника, и при таком окне от него была видна лишь верхушка.
     Опускаем окно, чтобы огонь попал в кадр целиком. */
  object-position:72% 80%;
  filter:saturate(1.05) contrast(1.03); z-index:0;
  animation:lh-driftIn 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lh-driftIn{from{transform:scale(1.06);opacity:.4}to{transform:scale(1);opacity:1}}
/* Контент hero обязан быть ВЫШЕ скрима: иначе полупрозрачный градиент
   ложится поверх кнопок и даёт полосы (gradient banding) по ярким заливкам. */
/* Слой светлячков из списка исключён намеренно. Он лежит в hero таким же
   прямым потомком, и это правило переводило его в position:relative — а
   тогда inset:0 не значит ничего, и слой становился обычным флекс-элементом
   без содержимого, то есть нулевой ширины. Девять точек честно летали внутри
   полоски шириной ноль пикселей: анимация шла, показать её было негде. */
.hb-app .hb-hunt-hero > *:not(.hb-promo-art):not(.hb-fireflies){position:relative; z-index:2;}
/* scrim: keeps the bottom-left panel legible while the forest breathes top-right */
.hb-app .hb-hunt-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,11,10,.94) 0%, rgba(8,11,10,.7) 34%, rgba(8,11,10,.12) 62%, transparent 80%),
    linear-gradient(0deg, rgba(8,11,10,.92) 0%, rgba(8,11,10,.35) 34%, transparent 60%);
}
/* the panel that holds the heading + hunt cards, anchored bottom-left */
.hb-app .hb-hunt-panel{
  position:relative; z-index:2; align-self:flex-end;
  display:flex; flex-direction:column; gap:16px;
  width:min(560px,64%); padding:28px 30px 30px;
}
.hb-app .hb-screen-heading{display:flex; align-items:baseline; gap:12px; margin:0;}
.hb-app .hb-screen-heading h1{
  margin:0; font-family:var(--disp); font-size:56px; line-height:.9; letter-spacing:.5px;
  color:var(--ivory); text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 34px color-mix(in srgb,var(--lime) 30%,transparent);
}

/* Standard Hunt = the hero card + focal CTA */
.hb-app .hb-hunt-card{
  display:flex !important; align-items:center; justify-content:space-between; gap:18px;
  /* flex:0 0 auto — карточка не сжимается. min-height:0 разрешал ей стать
     ниже своего содержимого, и содержимое вываливалось наружу: карточка
     кончалась на 257, а кнопка внутри неё рисовалась с 272 по 320. */
  width:100%; flex:0 0 auto; min-height:min-content; height:auto; overflow:visible; container-type:normal;
  padding:18px 20px; border-radius:13px; cursor:pointer; transition:.15s;
  background:linear-gradient(180deg, rgba(20,29,25,.82), rgba(12,18,15,.82));
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hb-app .hb-hunt-card::before,.hb-app .hb-hunt-card::after{display:none !important;}
.hb-app .hb-hunt-card__icon{display:none;}
.hb-app .hb-hunt-card__copy{flex:1 1 auto; min-width:0;}
.hb-app .hb-hunt-card__copy h2{
  margin:0 0 5px; font-family:var(--disp); font-size:27px; letter-spacing:.4px; color:var(--ivory); white-space:normal;
}
.hb-app .hb-hunt-card__copy p{margin:2px 0; font-size:13px; color:var(--muted);}
.hb-app .hb-hunt-card.is-selected{
  flex-direction:column !important; align-items:stretch; gap:15px; padding:20px 22px 22px;
  border-color:color-mix(in srgb,var(--lime) 40%,var(--line));
  background:linear-gradient(180deg, rgba(24,34,26,.9), rgba(14,20,16,.88));
}
.hb-app .hb-hunt-card:hover{transform:translateY(-1px); border-color:color-mix(in srgb,var(--lime) 55%,var(--line));}

/* the focal button */
.hb-app .hb-hunt-card > button{
  position:static; bottom:auto; width:auto; height:auto; min-height:0; grid-column:auto; align-self:auto;
  display:inline-flex; align-items:center; gap:11px; flex:none; cursor:pointer; text-transform:none;
  padding:15px 26px; border:none; border-radius:12px;
  font-family:var(--disp); font-size:22px; letter-spacing:.6px; color:#08120a;
  background:linear-gradient(180deg,#c8f85e,var(--lime) 40%,var(--lime-deep));
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--lime) 70%,transparent),
             0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .14s, box-shadow .14s, filter .14s;
}
.hb-app .hb-hunt-card > button::after{display:none !important;}
.hb-app .hb-hunt-card__action-label,.hb-app .hb-hunt-card__action-arrow{grid-column:auto; position:static;}
.hb-app .hb-hunt-card__action-arrow{color:#08120a; font-size:18px;}
/* hero CTA spans the full card width for an unmistakable "go" */
.hb-app .hb-hunt-card.is-selected > button{width:100%; justify-content:center; font-size:23px; padding:16px 22px;}
.hb-app .hb-hunt-card.is-selected > button{
  animation:lh-pulse 2.6s ease-in-out infinite;
}
@keyframes lh-pulse{
  0%,100%{box-shadow:0 14px 30px -10px color-mix(in srgb,var(--lime) 60%,transparent),0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 18px 40px -8px color-mix(in srgb,var(--lime) 92%,transparent),0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55)}
}
.hb-app .hb-hunt-card > button:hover{transform:translateY(-2px); filter:brightness(1.05);}
.hb-app .hb-hunt-card > button:active{transform:translateY(0);}

/* Seasonal Hunt = slim ranked secondary line */
.hb-app .hb-hunt-card:not(.is-selected){
  padding:13px 18px; background:rgba(12,18,15,.7);
}
.hb-app .hb-hunt-card:not(.is-selected) h2{font-size:20px;}
.hb-app .hb-hunt-card:not(.is-selected) > button{
  background:var(--surface2); color:var(--ivory); font-size:16px; padding:11px 18px;
  border:1px solid color-mix(in srgb,var(--leg) 32%,var(--line));
  box-shadow:none; animation:none;
}
.hb-app .hb-hunt-card:not(.is-selected) .hb-hunt-card__action-arrow{color:var(--leg);}

/* ============ SHELF: retention hooks ============ */
.hb-app .hb-dashboard{display:grid; grid-template-columns:1.05fr 1fr; gap:16px; flex-shrink:0;}
.hb-app .hb-bounties,.hb-app .hb-featured{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px;
}
.hb-app .hb-panel-heading,.hb-app .hb-featured__heading{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.hb-app .hb-bounties h2,.hb-app .hb-featured h2{margin:0 0 3px; font-family:var(--disp); font-size:21px; color:var(--ivory);}
.hb-app .hb-bounties p,.hb-app .hb-featured p{margin:0; font-size:14px; color:var(--muted);}
.hb-app .hb-bounties p .hb-value{font-size:15px;}
.hb-app .hb-value{color:var(--lime); font-weight:700;}
/* urgency timer chip */
.hb-app .hb-reset{
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap;
  color:var(--ember); background:color-mix(in srgb,var(--ember) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ember) 30%,transparent);
}
/* weekly progress — juicy earned segments */
.hb-app .hb-progress{display:flex; gap:5px; margin:12px 0 14px;}
.hb-app .hb-progress span{flex:1; height:9px; border-radius:5px; background:var(--surface3); border:1px solid var(--line2);}
.hb-app .hb-progress span.is-earned{
  background:linear-gradient(90deg,var(--emerald),var(--lime)); border-color:transparent;
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--lime) 70%,transparent);
}
.hb-app .hb-bounty-list{margin:0; display:flex; flex-direction:column;}
.hb-app .hb-bounty-list>div{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line2);}
.hb-app .hb-bounty-list dt{font-size:15.5px; color:var(--ivory); letter-spacing:.2px;}
.hb-app .hb-bounty-list dd{margin:0; font-size:14.5px; font-weight:700; color:var(--muted);}
.hb-app .hb-bounty-list>div{justify-content:flex-start; gap:11px;}
.hb-app .hb-bounty-list dt{padding-left:0;}
.hb-app .hb-bounty-list dd{margin-left:auto;}
.hb-app .hb-bounty-list .hb-icon-slot{
  display:inline-block; width:15px; height:15px; flex:none; margin:0; border-radius:0; background-image:none;
  background-color:color-mix(in srgb,var(--lime) 66%,var(--muted));
  -webkit-mask:var(--ic-bounty) center/contain no-repeat; mask:var(--ic-bounty) center/contain no-repeat;
  --ic-bounty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 100 22 11 11 0 000-22zm0 3.2a7.8 7.8 0 110 15.6 7.8 7.8 0 010-15.6z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

/* featured equipment — loot tease + pity hook */
.hb-app .hb-featured__name h3{margin:0 0 2px; font-family:var(--disp); font-size:22px; color:var(--leg);}
.hb-app .hb-featured__effect{margin:11px 0 4px;}
.hb-app .hb-featured__effect strong{color:var(--ivory);}
.hb-app .hb-featured__rolls{display:flex; align-items:center; font-size:12.5px; color:var(--muted); margin-top:8px;}
.hb-app .hb-featured__rolls .hb-icon-slot{display:none;}
.hb-app .hb-featured__footer{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:16px;}
/* pity = the gacha "so close" hook: clean rarity-tinted counters, no boxy border */
/* gacha pity — progress toward the guaranteed rarity, the shape gacha players read instantly */
.hb-app .hb-pity{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  justify-content:flex-start !important; gap:9px; font-size:12.5px; width:100%;
  border:none !important; background:transparent !important; padding:0 !important; margin:0;
}
.hb-app .hb-pity-row{display:flex; align-items:center; gap:10px; width:100%;}
.hb-app .hb-pity-label{flex:0 0 84px; font-weight:700; letter-spacing:.3px;}
.hb-app .hb-pity-track{flex:1; height:8px; border-radius:5px; background:var(--surface3); border:1px solid var(--line2); overflow:hidden;}
.hb-app .hb-pity-track i{display:block; height:100%; border-radius:5px;}
.hb-app .hb-value{color:var(--lime); font-weight:700;}
.hb-app .hb-pity-row .hb-value{flex:0 0 auto; min-width:38px; text-align:right;}
.hb-app .hb-pity--epic{color:var(--epic);} .hb-app .hb-pity--epic .hb-value{color:var(--epic);}
.hb-app .hb-pity--epic .hb-pity-track i{background:linear-gradient(90deg,color-mix(in srgb,var(--epic) 55%,#000),var(--epic)); box-shadow:0 0 10px -2px var(--epic);}
.hb-app .hb-pity--legendary{color:var(--leg);} .hb-app .hb-pity--legendary .hb-value{color:var(--leg);}
.hb-app .hb-pity--legendary .hb-pity-track i{background:linear-gradient(90deg,color-mix(in srgb,var(--leg) 55%,#000),var(--leg)); box-shadow:0 0 10px -2px var(--leg);}
.hb-app .hb-featured__footer>button,.hb-app .hb-ledger-button{
  cursor:pointer; border-radius:10px; padding:11px 16px; font-family:var(--disp); font-size:16px;
  background:var(--surface2); border:1px solid var(--line); color:var(--ivory); transition:.14s;
}
.hb-app .hb-ledger-button.is-primary{
  border:none; color:#08120a; background:linear-gradient(180deg,var(--lime),var(--lime-deep));
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--lime) 70%,transparent);
}
.hb-app .hb-featured__footer>button:hover,.hb-app .hb-ledger-button:hover{border-color:color-mix(in srgb,var(--lime) 45%,var(--line)); color:var(--ivory);}

/* ---- reset the legacy container-query / absolute layout on the shelf cards ---- */
.hb-app .hb-bounties,.hb-app .hb-featured{
  container-type:normal !important; overflow:visible !important; position:relative;
  display:flex; flex-direction:column;
}
/* kill BOTH legacy corner brackets (::before = bottom-right, ::after = top-left)
   on shelf panels — they detach from our rounded panels and read as stray lines */
.hb-app .hb-bounties::before,.hb-app .hb-bounties::after,
.hb-app .hb-featured::before,.hb-app .hb-featured::after{
  display:none !important; content:none !important; border-width:0 !important;
}
.hb-app .hb-featured__heading,.hb-app .hb-featured__name,
.hb-app .hb-featured__effect,.hb-app .hb-featured__rolls{
  position:static; z-index:auto; width:auto; margin-left:0; margin-right:0; text-align:left;
}
.hb-app .hb-featured__name{margin:6px 0 2px;}
.hb-app .hb-featured__footer{
  position:static !important; left:auto; right:auto; bottom:auto;
  display:flex; flex-direction:column; align-items:stretch; gap:13px; margin-top:auto; padding-top:16px;
}
.hb-app .hb-featured__footer button::after{display:none !important;}
/* the summon/pull CTA — full-width, unmistakable, gacha-standard */
.hb-app .hb-featured__footer>button{
  min-height:0; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 20px; border:none; border-radius:12px; cursor:pointer; text-transform:none;
  font-family:var(--disp); font-size:20px; letter-spacing:.5px; color:#08120a;
  background:linear-gradient(180deg,#c8f85e,var(--lime) 42%,var(--lime-deep));
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--lime) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .14s, filter .14s;
}
.hb-app .hb-featured__footer>button:hover{transform:translateY(-1px); filter:brightness(1.04);}
/* FIX: legacy `.hb-featured__footer button span{color:var(--hb-gold-bright);float:right}`
   painted the "Pull" / "»" text gold on our lime button — invisible. Force dark, no float. */
.hb-app .hb-featured__footer>button span{
  float:none !important; margin:0 !important; color:#08120a !important; font-weight:inherit;
}
/* also calm the neon a touch so the dark label reads cleanly (was "слишком зелёная") */
.hb-app .hb-featured__footer>button{
  background:linear-gradient(180deg,#a9e63f,var(--lime) 46%,#6fa024) !important;
  box-shadow:0 10px 22px -14px color-mix(in srgb,var(--lime) 55%,transparent), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* ---- mobile-style action pair: dominant battle button + themed secondary ---- */
.hb-app .hb-hunt-actions{display:flex; gap:12px; align-items:stretch;}
.hb-app .hb-hunt-primary{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:12px; cursor:pointer;
  padding:16px 24px; border:none; border-radius:12px; text-transform:none;
  font-family:var(--disp); font-size:23px; letter-spacing:.6px; color:#08120a;
  background:linear-gradient(180deg,#c8f85e,var(--lime) 40%,var(--lime-deep));
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--lime) 70%,transparent),0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .14s, filter .14s; animation:lh-pulse 2.6s ease-in-out infinite;
}
.hb-app .hb-hunt-primary svg{width:24px; height:24px; flex:none; fill:none; stroke:#08120a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.hb-app .hb-hunt-primary svg.hb-play{fill:none; stroke:none;}
/* Пиксельная стрелка в тёмном гнезде. Свечение видно только на тёмном: сама
   кнопка — самое яркое пятно экрана, на ней светлое пропадает, а тёмное
   читается тенью, а не светом. Гнездо и даёт стрелке эту темноту. */
.hb-app .hb-play__socket{fill:#08120a;}
.hb-app .hb-play__arrow{
  fill:var(--lime);
  filter:drop-shadow(0 0 1.4px color-mix(in srgb,var(--lime) 85%,#fff));
  transition:filter .18s ease-out, fill .18s ease-out;
}
/* разгорается под курсором — свечение как отклик, а не как украшение;
   отдельный пульс не добавляем, кнопка уже пульсирует целиком (lh-pulse),
   и вторая несинхронная пульсация читалась бы дёрганьем */
.hb-app .hb-hunt-primary:hover .hb-play__arrow{
  fill:#d4ff7a;
  filter:drop-shadow(0 0 3.2px color-mix(in srgb,var(--lime) 90%,#fff))
         drop-shadow(0 0 6px color-mix(in srgb,var(--lime) 45%,transparent));
}
@media (prefers-reduced-motion:reduce){
  .hb-app .hb-play__arrow{transition:none;}
}
.hb-app .hb-hunt-primary:hover{transform:translateY(-2px); filter:brightness(1.05);}
.hb-app .hb-hunt-primary:active{transform:translateY(0);}
.hb-app .hb-hunt-armoury{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:16px 20px; border-radius:12px; text-transform:none;
  font-family:var(--disp); font-size:19px; letter-spacing:.4px; color:var(--ivory);
  background:var(--surface2); border:1px solid color-mix(in srgb,var(--leg) 24%,var(--line));
  transition:.14s;
}
.hb-app .hb-hunt-armoury svg{width:20px; height:20px; flex:none; fill:none; stroke:color-mix(in srgb,var(--leg) 82%,var(--ivory)); stroke-width:1.8; stroke-linejoin:round;}
.hb-app .hb-hunt-armoury:hover{border-color:color-mix(in srgb,var(--leg) 50%,var(--line)); background:var(--surface3);}

.hb-app .hb-featured__eyebrow{
  display:block; font-family:var(--body); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--dim); margin-bottom:3px;
}

@media (prefers-reduced-motion:reduce){
  .hb-app .hb-promo-art{animation:none;}
  .hb-app .hb-hunt-card.is-selected > button,.hb-app .hb-hunt-primary{animation:none;}
}

/* ============ НЕВЫСОКОЕ ОКНО ============
   Сцена больше не сжимается ниже своего содержимого — иначе кнопка Start Hunt
   выпадала наружу. Но раз сцена не отдаёт высоту, её надо отдать по-другому:
   ужать саму панель. Иначе на ноутбуке 1366x768 нижняя половина экрана с
   заказами и баннером уезжает под край.

   Запросы по высоте, а не по ширине: мешает именно высота. Широкий и низкий
   монитор страдает так же, как узкий.

   Пороги выбраны по замеру, а не на глаз. При 900 без ужимки не влезало
   42 пикселя, при 768 — 164. */
@media (max-height:940px){
  .hb-app .hb-hunt-panel{gap:12px; padding:20px 26px 22px;}
  .hb-app .hb-screen-heading h1{font-size:42px;}
  .hb-app .hb-hunt-card.is-selected{gap:11px; padding:15px 18px 16px;}
  .hb-app .hb-hunt-card__copy h2{font-size:23px;}
}
@media (max-height:820px){
  .hb-app .hb-hunt-panel{gap:9px; padding:14px 22px 16px;}
  .hb-app .hb-screen-heading h1{font-size:34px;}
  .hb-app .hb-hunt-card.is-selected{gap:9px; padding:12px 16px 13px;}
  .hb-app .hb-hunt-card__copy h2{font-size:20px;}
  .hb-app .hb-hunt-card > button{padding:11px 20px; font-size:19px;}
  .hb-app .hb-hunt-hero{min-height:200px;}
}

/* ============ ИКОНКА В FEATURED BANNER ============
   Баннер показывает конкретный предмет, но до сих пор был текстом.
   Слот и редкость проставлены в разметке, спрайт подставляется
   по тем же правилам, что и на карточках в Loadout. */
.hb-app .hb-featured__name {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 2px 14px;
}
.hb-app .hb-featured__name::before {
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  width: 64px;
  height: 64px;
  background-image: var(--lh-featured-icon, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 14px color-mix(in srgb, var(--leg) 45%, transparent));
}
.hb-app .hb-featured__name > * { grid-column: 2; }
.hb-app .hb-featured__name[data-slot="bowstring" i][data-rarity="legendary" i] { --lh-featured-icon: url("../images/item-bowstring-legendary-v1.png"); }
.hb-app .hb-featured__name[data-slot="helmet" i][data-rarity="legendary" i]    { --lh-featured-icon: url("../images/item-helmet-legendary-v1.png"); }
.hb-app .hb-featured__name[data-slot="chest" i][data-rarity="legendary" i]     { --lh-featured-icon: url("../images/item-chest-legendary-v1.png"); }
.hb-app .hb-featured__name[data-slot="boots" i][data-rarity="legendary" i]     { --lh-featured-icon: url("../images/item-boots-legendary-v1.png"); }
.hb-app .hb-featured__name[data-slot="legs" i][data-rarity="legendary" i]      { --lh-featured-icon: url("../images/item-legs-legendary-v1.png"); }

/* Рекорд глубины показывается только тому, кто уходил за пятнадцатую: до
   этого строка сообщала бы «Deepest: Stage 12» и читалась как упрёк. */
.hb-app .hb-hunt-record{
  color:var(--lime) !important;
  letter-spacing:.04em;
}