/* In-match HUD in the main menu's design language (menu.css): flat frosted panels with a thin border instead of skewed
   amber plates, the pale khaki selection colour (--hl) instead of orange, the menu's condensed type, small grey labels,
   thin white bars. PAINT ONLY - no positions or sizes change here, so the desktop and touch layouts in style.css stay as
   they are. Loaded last (after brand.css); every rule is prefixed with #hud to win over the older HUD layers. */
#hud {
  --acc: #d9d29a; --acc2: #ece5b4; --acc-a: rgba(217, 210, 154, .18);   /* every amber accent in the HUD -> menu khaki */
  --hh: #d9d29a; --hb: rgba(255, 255, 255, .14); --hlab: #a5a29a; --hcond: 'Barlow Condensed', 'Rajdhani', sans-serif;
  --hdots: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.3px) 0 0 / 5px 5px;
}

/* ---- plates (points + health, weapon + ammo): the menu's card ---- */
#hud #hBR::before, #hud .hpplate::before {
  transform: none; border: 1px solid var(--hb);
  background: linear-gradient(180deg, rgba(40, 40, 42, .56), rgba(18, 18, 20, .5));
  box-shadow: inset 2px 0 0 var(--hh), 0 10px 28px rgba(0, 0, 0, .32);
  backdrop-filter: blur(10px) saturate(110%); -webkit-backdrop-filter: blur(10px) saturate(110%);
}
#hud #hBR.up::before { box-shadow: inset 2px 0 0 var(--wc), inset 14px 0 18px -12px color-mix(in srgb, var(--wc) 45%, transparent), 0 10px 28px rgba(0, 0, 0, .32); }   /* forged gun: its tier colour on the edge */
#hud .hpplate::after { display: none; }                       /* (the amber corner tab) */
#hud #hBR::after { transform: none; background: var(--hh); box-shadow: 0 0 10px rgba(217, 210, 154, .6); }   /* reload progress line */

/* ---- type: menu condensed, white numerals, grey labels ---- */
#hud #hBL, #hud #hBR, #hud #hTL, #hud #hEquip, #hud #hPrompt, #hud #hReload { font-family: var(--hcond); }
#hud #hPoints { font-family: var(--hcond); font-weight: 700; color: #fff; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#hud .plab { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--hlab); }
#hud #hHp { font-family: var(--hcond); font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
#hud #hHp small { color: var(--hlab); letter-spacing: .04em; }
#hud #hHp .hpi { color: var(--hh); filter: none; }
#hud #hMag b { font-family: var(--hcond); font-weight: 700; letter-spacing: 0; }
#hud #hMag b:not(.warn):not(.red) { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
#hud #hMag small { font-family: var(--hcond); font-weight: 600; color: var(--hlab); }
#hud #hWeapon .wn { font-family: var(--hcond); font-weight: 700; font-size: 16px; letter-spacing: .06em; }
#hud #hBR:not(.up) #hWeapon .wn { color: #ece8de; }
#hud #hBR:not(.up) #hWeapon img { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }

/* ---- health: one thin bar, like the armory stat bars (red only when it is low) ---- */
#hud .hp-track { height: 4px; background: rgba(255, 255, 255, .16); box-shadow: none; overflow: visible; }
#hud .hp-track::after { display: none; }
#hud #hHpBar { background: #fff; box-shadow: none; }
#hud #hHpBar.low { background: #e0574b; box-shadow: 0 0 8px rgba(224, 87, 75, .6); }
#hud #hHpTrail { background: rgba(224, 87, 75, .75); }

/* ---- magazine pips ---- */
#hud #hMag .pips u { background: #ece8de; box-shadow: none; }
#hud #hMag .pips u.o { background: rgba(255, 255, 255, .14); }
#hud #hMag .pips.low u:not(.o) { background: #e0574b; box-shadow: 0 0 4px rgba(224, 87, 75, .7); }

/* ---- weapon slots: the menu's list rows; the gun in hand = the selected row (khaki glow + dot texture) ---- */
#hud .slot { background: rgba(255, 255, 255, .04); border: 1px solid var(--hb); box-shadow: none; }
#hud .slot.empty { background: rgba(0, 0, 0, .14); border: 1px dashed rgba(255, 255, 255, .2); }
#hud .slot > span { font-family: var(--hcond); font-weight: 700; background: rgba(255, 255, 255, .1); color: #cfcbc2; border-radius: 0; }
#hud .slot.on { background: var(--hdots), linear-gradient(90deg, rgba(217, 210, 154, .34), rgba(217, 210, 154, .08)); border-color: rgba(217, 210, 154, .6); box-shadow: none; }
#hud .slot.on > span { background: var(--hh); color: #111; }
#hud .slot.on::after { left: -1px; right: auto; top: -1px; bottom: -1px; width: 2px; height: auto; background: var(--hh); box-shadow: 0 0 10px rgba(217, 210, 154, .7); }

/* ---- top left: zombies left ---- */
#hud #hLeft { background: linear-gradient(90deg, rgba(24, 24, 26, .6), rgba(24, 24, 26, .28) 70%, transparent); border-left: 2px solid var(--hh); color: #cfcbc2; }
#hud #hLeft b { color: #fff; font-weight: 700; }
#hud #hLeft span:not(.gr) { color: var(--hlab); letter-spacing: .14em; }
#hud #hLeft .hli { color: var(--hh); }
#hud #hLeft .cd { font-family: var(--hcond); font-weight: 700; color: var(--hh); text-shadow: none; }

/* ---- class ability rows (G / H): menu rows with a filled key cap; the class colour stays on the edge + cooldown line ---- */
#hud #hEquip .eq-row { font-family: var(--hcond); font-size: 15px; letter-spacing: .06em; background: rgba(28, 28, 30, .55); border: 1px solid var(--hb); border-left: 2px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#hud #hEquip .eq-row.ready, #hud #hEquip .eq-row.act { border-left-color: var(--c); }
#hud #hEquip .eq-row kbd { font: 700 12px var(--hcond); min-width: 18px; text-align: center; padding: 1px 5px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .16); color: #fff; }
#hud #hEquip .eq-row.ready kbd { background: var(--hh); color: #111; }
#hud #hEquip .eq-row .eq-v { font-size: 13px; letter-spacing: .1em; }
#hud #hEquip .eq-row.ready .eq-v { color: var(--hh); }
#hud #hEquip small { font: 600 11px var(--hcond); letter-spacing: .14em; color: var(--hlab); opacity: 1; }

/* ---- reload hint ---- */
#hud #hReload { color: var(--hh); text-shadow: 0 1px 4px #000; letter-spacing: .16em; }
#hud #hReload kbd { font-family: var(--hcond); font-weight: 700; background: var(--hh); color: #111; border-radius: 0; }

/* ================= GAME OVER: same language (flat cards, khaki highlight, condensed type). The red round tally and
   digit stay - red is the game's one alarm colour (logo, health) - but the glows, amber plates and corner brackets go. */
#gameover { --acc: #d9d29a; --acc2: #ece5b4; --gh: #d9d29a; --gb: rgba(255, 255, 255, .13); --glab: #a5a29a; --gcond: 'Barlow Condensed', 'Rajdhani', sans-serif;
  --gdots: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.3px) 0 0 / 5px 5px; --gcard: linear-gradient(180deg, rgba(58, 58, 56, .4), rgba(30, 30, 30, .36)); }
#gameover .go-wrap { font-family: var(--gcond); }
#gameover :is(.go-tag, .go-lab, .gs b, .go-party .gpn, .go-party b, .gpb-row b, .gpb-row span, .gpb-new b, .gpb-prev, .go-lv b, .go-lv em, .gpb-d, .go-wait) { font-family: var(--gcond); font-weight: 700; }
#gameover :is(.go-lab small, .gpb-prev small, .gs span, .go-pb small, .go-pb em, .go-party small) { font-family: var(--gcond); font-weight: 600; color: var(--glab); }
#gameover .go-left > .go-tag { color: #e0574b; text-shadow: none; }
#gameover .go-right > .go-tag { color: #fff; }
#gameover .go-lab { text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
#gameover .go-lab .gl-a { color: #d8d4cb; }
#gameover .go-lab .gl-b b { text-shadow: none; }
#gameover .go-rule { background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .06) 60%, transparent); }
/* stat tiles + personal best + level-up: menu cards */
#gameover .gs, #gameover .go-pb, #gameover .go-fav { background: var(--gcard); border: 1px solid var(--gb); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#gameover .gs b { color: #fff; }
#gameover .gs .gsi { color: #cfcbc2; }
#gameover .gs.gold { border-color: rgba(217, 210, 154, .55); background: var(--gdots), linear-gradient(90deg, rgba(217, 210, 154, .3), rgba(217, 210, 154, .06)); }
#gameover .gs.gold b { color: var(--gh); text-shadow: none; }
#gameover .gs.gold .gsi { color: var(--gh); }
#gameover .gpb-row i { background: rgba(255, 255, 255, .14); }
#gameover .gpb-row i u { background: #fff; box-shadow: none; }
#gameover .go-pb.new { border-color: rgba(217, 210, 154, .55); background: var(--gdots), linear-gradient(90deg, rgba(217, 210, 154, .26), rgba(217, 210, 154, .05)); }
#gameover .go-pb.new small { color: var(--gh); }
#gameover .gpb-new b { text-shadow: none; }
#gameover .gpb-d { background: var(--gh); color: #111; box-shadow: none; }
#gameover .go-lv { background: var(--gdots), linear-gradient(90deg, rgba(217, 210, 154, .26), rgba(217, 210, 154, .05)); border: 1px solid rgba(217, 210, 154, .55); border-left: 2px solid var(--gh); }
#gameover .go-lv em { background: var(--gh); color: #111; box-shadow: none; }
#gameover .go-lvb svg { fill: rgba(217, 210, 154, .2); stroke: var(--gh); filter: none; }
/* match report: one frosted panel, hairline rows */
#gameover .go-right { --cb: transparent; background: var(--gcard); border: 1px solid var(--gb); box-shadow: none; backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); }
#gameover .go-right::before, #gameover .go-right::after { display: none; }
#gameover .go-right li { font-family: var(--gcond); font-weight: 600; color: #cfcbc2; border-color: rgba(255, 255, 255, .08); }
#gameover .go-right li b { font-weight: 700; color: #fff; }
#gameover .go-party div { background: rgba(255, 255, 255, .05); }
#gameover .pav { font-family: var(--gcond); font-weight: 700; background: var(--gh); color: #111; box-shadow: none; border-radius: 0; }
/* buttons: the menu's khaki primary + glass secondary */
#gameover .done.big { font-family: var(--gcond) !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #111 !important; background: var(--gh) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; text-shadow: none !important; }
#gameover .done.big:hover { background: #efe8b6 !important; }
#gameover .done.big::before, #gameover .done.big::after { display: none !important; }

/* ================= PAUSE / MATCH MENU: a menu card with operation rows (Resume = the lobby's Deploy row) ================= */
#pause { --acc: #d9d29a; --acc2: #ece5b4; --zh: #d9d29a; --zb: rgba(255, 255, 255, .13); --zlab: #a5a29a; --zcond: 'Barlow Condensed', 'Rajdhani', sans-serif; }
#pause .pz { --cb: transparent; font-family: var(--zcond); background: linear-gradient(180deg, rgba(58, 58, 56, .46), rgba(28, 28, 28, .42)); border: 1px solid var(--zb); box-shadow: 0 18px 50px rgba(0, 0, 0, .4); backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); }
#pause .pz::before, #pause .pz::after { display: none; }
#pause .pz-tag { font-family: var(--zcond); font-weight: 600; color: var(--zlab); }
#pause h1 { font-family: var(--zcond); font-weight: 700; color: #f2eee6; }
#pause p { font-family: var(--zcond); color: var(--zlab); }
#pause .mi { font-family: var(--zcond); font-weight: 600; color: #cfcbc2; clip-path: none; box-shadow: none; }
#pause .mi .mt { font-family: var(--zcond); }
#pause .mi::before { background: var(--zh); box-shadow: 0 0 12px rgba(217, 210, 154, .6); }
#pause .mi:hover:not(.primary), #pause .mi:focus-visible:not(.primary) { background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 70%, transparent); color: #fff; }
#pause .mi:hover .mic, #pause .mi:focus-visible .mic { color: #fff; }
#pause .mi.primary { color: var(--zh); background: linear-gradient(90deg, rgba(217, 210, 154, .24), rgba(217, 210, 154, .08) 50%, transparent 92%); clip-path: none; box-shadow: inset 2px 0 0 var(--zh); text-shadow: none; }
#pause .mi.primary .mic { color: var(--zh); }
#pause .mi.primary::after { display: none; }
#pause .mi.primary:hover, #pause .mi.primary:focus-visible { background: linear-gradient(90deg, rgba(232, 224, 160, .36), rgba(217, 210, 154, .12) 55%, transparent 94%); }
#pause .pz-info { background: rgba(0, 0, 0, .18); font-family: var(--zcond); }
#pause .pz-info small { font-weight: 600; color: var(--zlab); }
#pause .pzi-round b, #pause .pzn, #pause .pzi-m b, #pause .pzi-pts { font-family: var(--zcond); font-weight: 700; }
#pause .pzi-round span { color: var(--zlab); }
#pause .pzi-pts { color: #fff; text-shadow: none; }
#pause .pzi-m { background: rgba(255, 255, 255, .05); }
#pause .pzi-m.me { background: linear-gradient(90deg, rgba(217, 210, 154, .2), rgba(217, 210, 154, .04)); }
#pause .pzi-m b { color: #fff; }
#pause .pav { font-family: var(--zcond); font-weight: 700; background: var(--zh); color: #111; box-shadow: none; border-radius: 0; }

/* ================= PERK PICK: menu cards; each perk keeps its category colour as a thin top line, tag and icon ============ */
#perkPick { --acc: #d9d29a; --acc2: #ece5b4; --ph: #d9d29a; --pb: rgba(255, 255, 255, .13); --plab: #a5a29a; --pcond: 'Barlow Condensed', 'Rajdhani', sans-serif; font-family: var(--pcond); }
#perkPick .pp-head small { font-family: var(--pcond); font-weight: 600; color: var(--ph); text-shadow: none; }
#perkPick .pp-head h2 { font-family: var(--pcond); font-weight: 700; color: #f2eee6; }
#perkPick .pp-head p { font-family: var(--pcond); color: var(--plab); }
#perkPick .pp-card { --cb: transparent; font-family: var(--pcond); border: 1px solid var(--pb); border-top: 2px solid var(--pc); border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 9%, transparent), transparent 34%), linear-gradient(180deg, rgba(58, 58, 56, .5), rgba(26, 26, 26, .5));
  box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#perkPick .pp-card::before, #perkPick .pp-card::after { display: none; }
#perkPick .pp-card:hover, #perkPick .pp-card:focus-visible { border-color: rgba(255, 255, 255, .3); border-top-color: var(--pc); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 14%, transparent), transparent 40%), linear-gradient(180deg, rgba(70, 70, 68, .56), rgba(30, 30, 30, .54)); }
#perkPick .pp-card kbd, #perkPick .pp-keys kbd { font-family: var(--pcond); font-weight: 700; background: rgba(255, 255, 255, .12); border: 0; border-radius: 0; color: #fff; box-shadow: none; }
#perkPick .pp-tag { font-family: var(--pcond); font-weight: 700; }
#perkPick .pp-hex { filter: none; }
#perkPick .pp-ic .glyph { filter: none; }
#perkPick .pp-card h3 { font-family: var(--pcond); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
#perkPick .pp-card p { font-family: var(--pcond); color: var(--plab); }
#perkPick .pp-stat b, #perkPick .pp-stat span, #perkPick .pp-chips span, #perkPick .pp-keys { font-family: var(--pcond); }
#perkPick .pp-stat span, #perkPick .pp-keys { color: var(--plab); }
#perkPick .pp-chips span { border-radius: 0; }
#perkPick .pp-cta { font-family: var(--pcond); font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); border-radius: 0; }
#perkPick .pp-card:hover .pp-cta, #perkPick .pp-card:focus-visible .pp-cta, #perkPick .pp-card.picked .pp-cta { background: var(--ph); border-color: var(--ph); color: #111; }
#perkPick .pp-card.picked { border-color: var(--ph); border-top-color: var(--pc); box-shadow: 0 0 0 1px var(--ph), 0 0 30px rgba(217, 210, 154, .25); }

/* ================= DOWNED: same type; the red stays (it is the alarm), the heavy glows go ================= */
#hud #downPanel { font-family: var(--hcond); }
#hud #dpT { font-family: var(--hcond); font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
#hud #dpN, #hud #dpS { font-family: var(--hcond); font-weight: 600; }
#hud .dp-fg { filter: none; }
#hud .dp-skull { filter: drop-shadow(0 2px 2px #000); }
#hud .dp-track { height: 4px; background: rgba(255, 255, 255, .16); box-shadow: none; }
#hud #downPanel.rev #dpT { text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }

/* phone HUD: a long weapon name wraps to a second line instead of ending in "..." */
body.phone #hud .wn { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1 !important; font-size: max(9.5px, .7rem) !important; letter-spacing: .02em !important; overflow-wrap: break-word; }

/* big screens: the match HUD scales like the menus (it stayed 1080p-sized on 1440p / 4K) */
#hud { zoom: var(--z, 1); }

/* perk screen pre-draw at match start (game.js): painted once so its first real showing does not hitch, but never seen */
#perkPick.warm { animation: none !important; opacity: .001 !important; pointer-events: none !important; }
#perkPick.warm * { animation: none !important; }