/* PONSLOOT — 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 ============ */
/* The height is computed from the real header height, and this matters more than
   it looks. Legacy sets the body to height: calc(100% - max(7.6cqh, 54px)) — that
   is, it treats the header as a fraction of the window height. Our header is
   exactly 72 pixels, always. As long as the window is taller than 947 pixels,
   7.6% exceeds 72 and the discrepancy is invisible. Below that the body becomes
   longer than the window: by fourteen pixels at 768, by seventeen at 720. That is
   exactly how much was being clipped off the bottom of whatever sat there — the
   Claim Resources button in the village, for example.

   min-height is kept: it holds the body up when there is little content. */
.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;
  /* window shorter than the content: without scrolling the bottom (the Pull button) is clipped by .hb-app's overflow */
  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));
  /* The height is flexible but never below its own content — hence 1 0 rather
     than 1 1. With shrinking allowed, in a 768-tall window the scene collapsed
     to 275 pixels, the panel did not fit inside it, and the Start Hunt button
     fell out of its card downwards, underneath the Seasonal Hunt card. The
     game's main button could not be pressed on the most common laptop
     resolution. Better to let the bottom of the screen scroll:
     .hb-main[data-screen=hunt] already has scrolling. */
  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;
  /* It used to be 72% 42%. The campfire in the key art falls at roughly half the
     height of the source image, and at this window size only its top was
     visible. We lower the window so the fire fits into the frame whole. */
  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}}
/* The hero content must sit ABOVE the scrim: otherwise the semi-transparent
   gradient lands on top of the buttons and produces gradient banding over bright
   fills. */
/* The firefly layer is excluded from the list deliberately. It sits in the hero
   as an equally direct child, and this rule switched it to position:relative —
   at which point inset:0 means nothing and the layer becomes an ordinary flex
   item with no content, i.e. of zero width. Nine dots were dutifully flying
   inside a strip zero pixels wide: the animation ran, there was nowhere to show
   it. */
.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 — the card does not shrink. min-height:0 allowed it to become
     shorter than its own content, and the content spilled out: the card ended
     at 257 while the button inside it was drawn from 272 to 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 (it was "too green") */
.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;}
/* A pixel arrow in a dark socket. The glow is only visible against dark: the
   button itself is the brightest spot on the screen, anything light disappears
   on it, while anything dark reads as a shadow rather than as light. The socket
   is what gives the arrow that darkness. */
.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;
}
/* it brightens under the cursor — the glow as a response, not as decoration;
   we do not add a separate pulse, the button already pulses as a whole
   (lh-pulse), and a second unsynchronized pulse would read as a twitch */
.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;}
}

/* ============ SHORT WINDOW ============
   The scene no longer shrinks below its own content — otherwise the Start Hunt
   button fell outside. But since the scene will not give up height, it has to be
   found elsewhere: by squeezing the panel itself. Otherwise on a 1366x768 laptop
   the bottom half of the screen, with the bounties and the banner, slides past
   the edge.

   The queries are on height rather than width: height is what gets in the way. A
   wide, short monitor suffers just as much as a narrow one.

   The thresholds come from measurement rather than from the eye. At 900, 42
   pixels did not fit without squeezing; at 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;}
}

/* ============ ICON IN THE FEATURED BANNER ============
   The banner advertises a specific item, but until now it was text only.
   The slot and the rarity are set in the markup, and the sprite is
   substituted by the same rules as on the Loadout cards. */
.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"); }

/* The depth record is shown only to someone who has gone past stage fifteen:
   before that the line would read "Deepest: Stage 12" and land as a reproach. */
.hb-app .hb-hunt-record{
  color:var(--lime) !important;
  letter-spacing:.04em;
}