/* HUD sizing.
 *
 * Everything up to here is fixed pixels, tuned against one desktop window. On a
 * 1280-wide laptop the round numeral ate the corner; on a landscape phone the
 * ammo block overlapped the fire button; on a 4K display the whole HUD sat in a
 * postage stamp.
 *
 * This is the last stylesheet loaded, so it overrides the earlier `!important`
 * sizes with clamp() instead. clamp() rather than breakpoints deliberately: the
 * HUD then scales continuously with the window rather than snapping between
 * three fixed layouts, and there is no width at which it looks half-resized.
 *
 * The vw middles are chosen so a 1600px window reproduces the original sizes
 * almost exactly — this is a generalisation of the tuned layout, not a new one.
 * The floors are set by legibility: below about 26px the round numeral stops
 * reading at a glance, which is the one number you check mid-fight.
 */

/* --- round tally, bottom left ------------------------------------------- */
#round-num {
  font-size: clamp(40px, 4.8vw, 76px) !important;
}
#round-box {
  left: clamp(12px, 1.95vw, 31px) !important;
  bottom: clamp(12px, 1.5vw, 24px) !important;
}
#round-tally { transform: rotate(-2deg) scale(clamp(.62, .055vw + .55, 1)) !important; }

/* --- points, right side above the ammo ---------------------------------- */
#points-box {
  right: clamp(11px, 1.4vw, 22px) !important;
  bottom: clamp(96px, 10.4vw, 166px) !important;
  width: clamp(132px, 12.9vw, 206px) !important;
  height: clamp(44px, 4.25vw, 68px) !important;
}
#points { font-size: clamp(20px, 1.94vw, 31px) !important; }

/* --- ammo, bottom right -------------------------------------------------- */
#ammo-box {
  right: clamp(14px, 2vw, 32px) !important;
  bottom: clamp(12px, 1.5vw, 24px) !important;
}
#ammo-mag { font-size: clamp(27px, 2.75vw, 44px) !important; }
#ammo-res { font-size: clamp(18px, 1.88vw, 30px) !important; }
#wpn-name { font-size: clamp(11px, .94vw, 15px) !important; }

#nade-box {
  right: clamp(14px, 2vw, 32px);
  bottom: clamp(70px, 6.9vw, 110px);
}
#nade-icon { width: clamp(14px, 1.19vw, 19px); height: clamp(14px, 1.19vw, 19px); }
#nade-count { font-size: clamp(13px, 1.06vw, 17px); }

/* --- perks, left of the points ------------------------------------------- */
#perks {
  left: clamp(14px, 2.25vw, 36px) !important;
  bottom: clamp(80px, 8.25vw, 132px) !important;
  gap: clamp(4px, .38vw, 6px) !important;
}
.perk-chip {
  width: clamp(24px, 2.13vw, 34px) !important;
  height: clamp(24px, 2.13vw, 34px) !important;
  font-size: clamp(10px, .88vw, 14px) !important;
}

/* --- centre-screen furniture --------------------------------------------- */
.ppop { font-size: clamp(16px, 1.56vw, 25px) !important; }
#banner-main { font-size: clamp(22px, 2.6vw, 42px) !important; }
#banner-sub  { font-size: clamp(11px, 1vw, 16px) !important; }
#prompt-text { font-size: clamp(12px, 1.06vw, 17px) !important; }
#signal-subtitle { font-size: clamp(11px, 1vw, 16px) !important; }
#mission-title { font-size: clamp(14px, 1.31vw, 21px) !important; }

/* --- short viewports ------------------------------------------------------
   A landscape phone is wide but only ~380px tall, so the vw-driven clamps above
   stay near their maximum while the vertical space they need has gone. Height
   is the constraint here, not width. */
@media (max-height: 560px) {
  #round-num { font-size: clamp(30px, 9vh, 52px) !important; }
  #points { font-size: clamp(17px, 4.4vh, 24px) !important; }
  #ammo-mag { font-size: clamp(22px, 6.2vh, 34px) !important; }
  #ammo-res { font-size: clamp(15px, 4.2vh, 23px) !important; }
  .perk-chip { width: clamp(20px, 5.2vh, 28px) !important; height: clamp(20px, 5.2vh, 28px) !important; }
  #banner-main { font-size: clamp(18px, 6vh, 32px) !important; }

  /* Below ~560px of height the bottom corners cannot hold a stack. The round
     tally and the ammo block each want ~75px and both must stay at the bottom
     where the eye expects them, which leaves nothing for the points, grenades
     and perks to sit on top of — they collided at 844x390.

     Shuffling the offsets only moves the collision around, because the blocks
     they have to clear scale too. So the secondary readouts move to the top
     edge instead, where there is nothing to collide with at any height. */
  #points-box { top: max(8px, env(safe-area-inset-top)) !important; bottom: auto !important;
                height: clamp(34px, 9vh, 46px) !important; }
  #nade-box   { top: calc(max(8px, env(safe-area-inset-top)) + clamp(38px, 10vh, 52px));
                bottom: auto; }
  #perks      { top: max(8px, env(safe-area-inset-top)) !important; bottom: auto !important;
                flex-direction: row !important; }
}

/* --- notches and rounded corners -----------------------------------------
   Phones and some laptops inset the usable area. Without this the round numeral
   sits under the home indicator and the points box under a camera cutout. */
@supports (padding: max(0px)) {
  #round-box  { left:  max(clamp(12px, 1.95vw, 31px), env(safe-area-inset-left)) !important;
                bottom: max(clamp(12px, 1.5vw, 24px), env(safe-area-inset-bottom)) !important; }
  #ammo-box   { right: max(clamp(14px, 2vw, 32px), env(safe-area-inset-right)) !important;
                bottom: max(clamp(12px, 1.5vw, 24px), env(safe-area-inset-bottom)) !important; }
  #points-box { right: max(clamp(11px, 1.4vw, 22px), env(safe-area-inset-right)) !important; }
  #perks      { left:  max(clamp(14px, 2.25vw, 36px), env(safe-area-inset-left)) !important; }
}

/* --- very wide displays ---------------------------------------------------
   Past about 2200px the vw terms would keep growing past the point where the
   HUD is comfortable to read; the clamp maxima already stop that, but the
   corners drift a long way apart, so pull them back toward a readable column. */
@media (min-width: 2200px) {
  #round-box  { left: 3.4vw !important; }
  #ammo-box   { right: 3.4vw !important; }
  #points-box { right: 3.1vw !important; }
  #nade-box   { right: 3.4vw; }
  #perks      { left: 3.7vw !important; }
}

/* Perk chips are painted emblems now, not letters — the art carries its own
   disc and ring, so the chip is just a sized frame. */
#perks .perk-chip {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
#perks .perk-chip img {
  display: block;
  width: 100%; height: 100%;
  image-rendering: auto;
}