/* ROUND 30 — HUD styles. Owned by Developer A1, then Developer A2
   (src/ui/hud.js). See docs/design/round30-work-orders.md contract C10 and
   sections "Developer A1" / "Developer A2" for what belongs here versus in
   styles.css (E's file).

   Every brand-new HUD component style from A1-1 through A1-4 and from
   A2-1 through A2-4 lives here. Nothing HUD-side goes in styles.css.
   Selectors compose the shared `pb-*` vocabulary already defined in
   styles.css (--pb-ink-dim, --pb-line, --pb-panel-2, --pb-font-num, the
   existing .pb-hud__stat / .pb-hud__xplabel / .pb-levelup__subtitle /
   .pb-reel__val / .pb-reel__odds rules) rather than re-declaring it. */

/* A1-1 (proposal 2, copy doc §5.1 `hud.hp.label`) — the "HP" label inserted
   before the health numbers in the HUD top row. Sized and shadowed to match
   the existing .pb-hud__stat text it sits beside, but a notch smaller and
   dimmer so it reads as a unit, not a third stat. */
.pb-hud__unit {
  font-family: var(--pb-font-num);
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: var(--pb-ink-dim); text-shadow: 0 2px 3px rgba(0,0,0,.8);
}

/* A1-1 (proposal 2, copy doc §5.1 `hud.level.chip`) — the persistent
   "Level 3 of 50" orientation chip, on its own line under the bars. Small
   and quiet on purpose (the work order's own instruction): it is
   orientation, not decoration, so it must never compete with the HP/Amber
   bars or the timer for attention. `align-self: flex-start` keeps it sized
   to its own text inside `.pb-hud__top`'s column flex, rather than
   stretching full width like the bars above it. */
.pb-hud__levelchip {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(14,19,9,.55); border: 1px solid var(--pb-line);
  font-family: var(--pb-font-num); font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--pb-ink-dim);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* A1-1 (proposal 2, copy doc §5.1 `levelup.context`) — the Level/name/time
   line anchoring the locked "Weapon Stage N!" heading, directly above the
   existing round-13 subtitle inside `.pb-levelup__head` (a column flex with
   its own `gap: 6px` — no extra margin needed here to match). Quieter than
   the subtitle it sits above: this is orientation, the subtitle is the
   instruction. */
.pb-hud__levelupline {
  margin: 0; font-size: 12px; font-weight: 600;
  color: var(--pb-ink-dim); text-align: center; line-height: 1.3;
}

/* A1-3 (proposal 13(c), copy doc §5.8 `cache.reel.cell`) — the "1 pick" /
   "3 picks" / "5 picks" unit stacked under each reel window's big number
   (`.pb-reel__win` is a column flex — see styles.css — so DOM order between
   `.pb-reel__val` and `.pb-reel__odds` is visual order). Sized between the
   26px value and the 10.5px odds line it sits above. */
.pb-reel__unit {
  font-family: var(--pb-font-num); font-size: 9.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--pb-ink-dim); opacity: .85;
}

/* A1-3 (proposal 13(c), copy doc §5.8 `cache.reel.subtitle`) — the one-line
   caption under the reel and above the cards on the Elite Cache reveal. */
.pb-hud__reelcaption {
  margin: 2px 0 0; font-size: 11.5px; font-weight: 600;
  color: var(--pb-ink-dim); text-align: center; line-height: 1.3;
}

/* ===================================================================
   A2-1 (proposal 3, copy doc §5.2, consumes C3) — getting hit is visible.
   =================================================================== */

/* A thin wrapper around the existing `hud-hp-bar` element (hud.js mount()).
   R1 FIX (docs/qa/round30/opus-review.md §2) — this used to also anchor
   `hitToastEl` via `position: relative` + the toast's own `top: 100%`; the
   toast is now a sibling of `topBlock` instead (see its own rule below), so
   this wrapper carries no positioning of its own any more. Left in place as
   a harmless grouping node — nothing else in this file or hud.js depends on
   its layout. */
.pb-hud__hpbarwrap { }

/* The red pulse itself — added to `hud-hp-bar` on every EV.PLAYER_HIT
   (unthrottled: a swarm lands hits every half second) and removed on
   `animationend` (hud.js). A glow ring around the existing bar, never a
   recolour of its own fill — the fill's colours are tuning/art this task
   does not touch. Restarted correctly inside its own duration by hud.js's
   remove/reflow/re-add dance, so this only has to be a plain, non-looping
   keyframe. */
.pb-hp--hit { animation: pb-hp-hit-pulse .32s ease-out; }
@keyframes pb-hp-hit-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(224,63,63,.95), 0 0 16px 2px rgba(224,63,63,.75); }
  100% { box-shadow: 0 0 0 0 rgba(224,63,63,0); }
}

/* The attribution toast (copy doc §5.2 `hud.hit.toast`/`hud.hit.toast.
   unnamed`) — a single reused element, shown/hidden and re-triggered
   entirely from hud.js's onPlayerHit(), never from update()'s per-frame
   cache-and-compare. A long name wraps (`white-space: normal`) rather than
   ever truncating — bug B5 is exactly a name cut short elsewhere in this
   HUD.

   R1 FIX (docs/qa/round30/opus-review.md §2) — this used to be anchored to
   `.pb-hud__hpbarwrap` via `top: 100%`, i.e. directly under the HP bar
   alone. Since `.pb-hud__top` is a column flex with a 5px gap, the AMBER
   row starts right where the HP bar ends, so that positioning put the
   toast's own box (~22px tall) on top of the AMBER label/count/bar and, at
   375px, the Level chip below it — and because the throttle (1000ms,
   hud.js) is shorter than the fade (1800ms), it stayed on screen for the
   whole of a swarm, not just a blip. Dropping the panel background alone
   would not have fixed this: the rects would still overlap, just less
   visibly. Repositioned to a SIBLING of `topBlock` (hud.js) instead, using
   the exact `--pb-top-h`/`--pb-meter-h` chain `.pb-elitetoast` already uses
   below — both variables are hud.js-published measurements (`--pb-top-h` =
   `topBlock`'s real height, `--pb-meter-h` = the streak meter's real height
   or 0 while hidden), so the toast clears the HP row, HP bar, Amber bar and
   Level chip, and the streak meter when one is up, on every viewport
   without a guessed pixel constant. Still OUT OF FLOW (`position: absolute`
   off `.pb-hud`), so it still cannot grow `--pb-top-h` itself. */
.pb-hud__hittoast {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--pb-sat) + var(--pb-top-h, 84px) + var(--pb-meter-h, 0px) + 20px);
  max-width: min(280px, 86vw);
  display: flex; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: #FFD9CC; text-shadow: 0 1px 3px rgba(0,0,0,.85);
  background: rgba(58,16,16,.8); border: 1px solid rgba(224,63,63,.55);
  border-radius: 10px; padding: 3px 10px;
  text-align: center; white-space: normal; word-break: break-word;
  pointer-events: none; opacity: 0;
}
.pb-hud__hittoast.is-on { animation: pb-hittoast-fade 1.8s ease-out forwards; }
@keyframes pb-hittoast-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===================================================================
   A2-2 (proposal 5, copy doc §3.5, consumes C5) — the long-press backstop.
   =================================================================== */

/* The full-text panel (hud.js mountLevelUp()'s fulltextEl) — a small,
   centred card showing an offer's own already-built accessible label
   verbatim, dismissed by the next tap anywhere (the capturing `root`
   listener in hud.js). Sits above the cards it explains, never covering the
   Reroll button so a long-press-then-reroll stays possible in one visit. */
.pb-levelup__fulltext {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 20; max-width: min(340px, 88vw); max-height: 70vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(10,14,7,.96); border: 2px solid var(--pb-amber);
  border-radius: var(--pb-radius); box-shadow: 0 12px 30px rgba(0,0,0,.6);
  padding: 14px 16px; font-size: 13px; line-height: 1.45; color: var(--pb-cream);
  text-align: left;
  animation: pb-callout-in .25s cubic-bezier(.2,.9,.3,1.2);
}

/* ===================================================================
   A2-3 (proposal 6, consumes C6) — the streak explainer inside the shared
   tutorial sheet.
   =================================================================== */

/* The streak-kind tutorial sheet is taller than a two-line tutorial prompt
   (title + intro + an eight-row ladder). Same max-height + internal-scroller
   technique `.pb-streakexplainer` already uses (styles.css) so `tutorial-ok`
   stays reachable on a short phone, scoped ONLY to this data-kind so the
   plain `'text'` sheet (still just a title/body pair) is untouched. */
.pb-tutorial[data-kind="streak"] {
  max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ===================================================================
   A2-4 (proposal 7, copy doc §5.3, consumes C7) — announcing every elite.
   =================================================================== */

/* The mid-run elite arrival banner (hud-elite-banner) — a centred kicker/
   name pair in `.pb-bosscard`'s own spot (styles.css) plus a caption line in
   `.pb-allybanner__sub`'s own place (both E's file), but its OWN element:
   run.scratch.elite never sets run.scratch.boss.nameCardT, so it cannot
   reuse bossCardEl (see hud.js's own comment on eliteBannerEl). One-shot,
   auto-hidden by hud.js's own timer (the SPAWN_EVENT payload carries no
   duration), so this animation only ever plays once per timeout, never
   loops. */
/* ROUND 41 (fix-pass-1 R41-02 note): at 30 percent the banner (226 to 333 px
   on a 430 x 932 screen) overlapped the streak banner, STREAK LOST and the
   evolution cue at 34 percent (293 to 341 px). Two causes: `left: 50%` let an
   absolutely placed box shrink to half the screen (215 px), so a name like
   "Bannerlord Skarn" wrapped to two lines (107 px tall); and the 30 percent
   line is too close to 34. `width: max-content` keeps the name on one line
   (74 px), and the centre moves up to max(25%, 228px), between the streak
   meter (ends at 190 px) and the 34 percent line. */
.pb-elitebanner {
  position: absolute; left: 50%; top: max(25%, 228px); transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; text-align: center; width: max-content; max-width: min(86vw, 380px);
  opacity: 0;
}
.pb-elitebanner.is-on { animation: pb-elitebanner-in 2.4s cubic-bezier(.2,.9,.3,1.1) forwards; }
.pb-elitebanner__kicker {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--pb-ink-dim);
}
.pb-elitebanner__name {
  font-size: clamp(20px, 5.6vw, 34px); font-weight: 800; letter-spacing: 1.6px;
  color: #FFE9C0; text-shadow: 0 0 18px rgba(224,83,63,.85), 0 3px 0 rgba(0,0,0,.65);
  overflow-wrap: break-word;
}
.pb-elitebanner__sub {
  font-size: 12px; letter-spacing: .3px; color: rgba(242,232,208,.82);
}
@keyframes pb-elitebanner-in {
  0%   { opacity: 0; transform: translate(-50%,-58%) scale(.9); }
  12%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* The elite-defeated toast (copy doc §5.3 `hud.elite.defeated`), ~1.4s,
   same restart-on-retrigger discipline as the hit toast above. Positioned
   where `hud-boss` itself just was (the SAME `--pb-top-h`/`--pb-meter-h`
   chain, styles.css `.pb-bossbar`) — the elite's health bar disappears the
   same frame it dies, so the toast picks up exactly where the bar left off
   rather than landing somewhere unrelated. */
.pb-elitetoast {
  position: absolute; left: 50%;
  top: calc(var(--pb-sat) + var(--pb-top-h, 84px) + var(--pb-meter-h, 0px) + 20px);
  transform: translateX(-50%);
  background: rgba(10,14,7,.88); border: 1px solid var(--pb-line); border-radius: 999px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--pb-cream); text-shadow: 0 1px 2px rgba(0,0,0,.7);
  pointer-events: none; opacity: 0;
}
.pb-elitetoast.is-on { animation: pb-elitetoast-fade 1.4s ease-out forwards; }
@keyframes pb-elitetoast-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ROUND 30 PROPOSAL 5 (A3) — the smallest phones (375x548: an iPhone SE in
   Safari with its toolbars up). Measured live: a 231 px card carried a 52 px
   icon, a two-line WEAPON tag (25 px), a two-line cost line (26 px) and a
   49 px evolution row, so even a two-line description overran the card.
   This tier trims chrome, never copy, so fitCardDescriptions() in hud.js has
   four or five lines to give the description. Only viewports at most 580 px
   tall are affected; every larger phone keeps the tiers in styles.css. */
@media (max-width: 480px) and (max-height: 580px) {
  .pb-levelup__cards > .pb-card--offer { padding: 5px 4px 4px; gap: 2px; }
  .pb-levelup__cards > .pb-card--offer .pb-card__art .pb-icon { width: 44px; height: 44px; }
  .pb-levelup__cards > .pb-card--offer .pb-card__tag { font-size: 8px; padding: 1px 5px; letter-spacing: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
  .pb-levelup__cards > .pb-card--offer .pb-card__name { font-size: 13px; line-height: 1.1; }
  .pb-levelup__cards > .pb-card--offer .pb-card__step { font-size: 10px; }
  .pb-levelup__cards > .pb-card--offer .pb-card__desc { font-size: 11px; line-height: 1.15; }
  .pb-levelup__cards > .pb-card--offer .pb-card__cost { font-size: 8.5px; line-height: 1.15; margin-top: 1px; padding-top: 3px; }
  .pb-levelup__cards > .pb-card--offer .pb-card__evo { font-size: 8px; padding-top: 2px; gap: 2px; }
  .pb-levelup__cards > .pb-card--offer .pb-card__evo .pb-evo__text { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ROUND 30 PROPOSAL 2 follow-up (A3) — on 375 px wide phones the top row
   ("Weapon Stage 9", HP label, health numbers, timer, kills) wrapped onto two
   lines once the HP label joined it (measured live at 375x667: the row stood
   42 px tall and "Weapon Stage 1" broke across two lines). Two points off the
   stat size and no wrapping keep it a single line. Re-measured at 390x844:
   "Weapon Stage 10" (two digits) wrapped there too, so the rule covers every
   phone up to 400 px wide, and phones up to 480 px keep their size but never
   wrap either. */
@media (max-width: 480px) {
  .pb-hud__row { gap: 6px; }
  .pb-hud__row > .pb-hud__stat { font-size: 14px; letter-spacing: 0; white-space: nowrap; }
  .pb-hud__unit { font-size: 10px; }
}
@media (max-width: 400px) {
  .pb-hud__row > .pb-hud__stat { font-size: 13px; }
  .pb-hud__unit { font-size: 9.5px; }
}