/* The match HUD's painted-era leftovers (2026-09): the --br-* variables and the spray slab, the kill
   banner, the ability hints and the in-match overlays (pause, inventory, end screen). The HUD's own clusters
   moved to the design system (bh-hud.css, 2026-10-11), the reload and weapon-stand prompts too (2026-10-17). */
#hud{
 --br-ui:"BR UI","Barlow Condensed","Arial Narrow",Inter,system-ui,sans-serif;
 --br-cyan:#00d5ff;--br-pink:#ff40db;--br-yellow:#ffd000;--br-dim:#aab0c4;
 /* the painted panel: a ragged black slab, stretched to any box */
 --br-slab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 4 20 1l2 2 23-3 25 2 2-2 38 1 30-1 2 2 28-1 27 2 2 12-2 5 3 18-2 19-18 2-2-2-28 3-30-2-30 2-2-2-28 1-30-2-26 3-3-15 2-5-3-20Z' fill='%23111116' fill-opacity='.93'/%3E%3C/svg%3E");
 --br-slab-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 4 20 1l2 2 23-3 25 2 2-2 38 1 30-1 2 2 28-1 27 2 2 12-2 5 3 18-2 19-18 2-2-2-28 3-30-2-30 2-2-2-28 1-30-2-26 3-3-15 2-5-3-20Z' fill='%23161a22' fill-opacity='.96' stroke='%2300d5ff' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
 --br-fleck-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%2300d5ff'%3E%3Cpath d='M9 12c4-6 12-5 14 1 2 5-3 9-8 9-6 0-9-5-6-10Z'/%3E%3Ccircle cx='27' cy='8' r='3.6'/%3E%3Ccircle cx='30' cy='24' r='2.6'/%3E%3Ccircle cx='5' cy='28' r='2.4'/%3E%3Ccircle cx='17' cy='31' r='1.7'/%3E%3Cpath d='M14 21l1 12 2-1-1-11Z'/%3E%3C/svg%3E");
 --br-fleck-p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23ff40db'%3E%3Cpath d='M12 14c5-5 13-3 13 3 1 6-6 8-10 7-5-1-7-6-3-10Z'/%3E%3Ccircle cx='30' cy='10' r='3'/%3E%3Ccircle cx='32' cy='27' r='2.2'/%3E%3Ccircle cx='7' cy='30' r='2.8'/%3E%3C/svg%3E");
 --br-crown-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M5 14 21 47 50 5 79 47 95 14 91 59H9Z' fill='none' stroke='%23ffffff' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
 --br-crown-p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M5 14 21 47 50 5 79 47 95 14 91 59H9Z' fill='none' stroke='%23ff40db' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E");
 font-family:var(--br-ui);
}

/* ---- in-match overlays: the pause (outside #hud) ------------------------------------------------------------------
   B413 (B409 row 7, owner 03/11): the design system's own components in index.html — #pause a .bh-ui root, the panel a
   .bh-panel with a .bh-panel-title, RESUME .bh-btn-primary, SETTINGS / SWITCH TEAM / TOUCH LAYOUT .bh-btn-secondary, LEAVE
   THE MATCH .bh-btn-danger (bh-ui.css: --surface-1, --line, --radius-lg, --shadow-panel, --control-height, --button-border,
   --button-shadow; white on --red is 3.7:1 at 22 px bold, large text). Here only where they sit; the end's BACK TO THE MENU
   is a .bh-btn-primary too (bh-lobby.css places it) */
#pause{background:var(--scrim)}
#pause #pausePanel{display:flex;flex-direction:column;gap:var(--space-2);width:min(380px,90vw);max-height:calc(100vh - 24px);overflow-y:auto}
#pause #pauseTitle{margin-bottom:var(--space-3);text-align:center}
#pause #pausePanel .bh-btn{flex:none;width:100%}
#pause #pausePanel .bh-btn[hidden]{display:none}
/* where the champion changes now (owner 2026-10-16: no heroes in this menu): H, one line under the buttons */
#pause .pchamp{margin-top:var(--space-2);padding-top:var(--space-3);border-top:var(--border-hair) solid var(--line);color:var(--ink-2);
 font-size:13px;font-weight:800;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;text-align:center}

/* first-time ability hints over the F / G slots (hud_status.js abilityHints) */
#hud #abHint{position:absolute;right:0;bottom:calc(100% + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none;z-index:3}
#hud #abHint[hidden]{display:none}
#hud #abHint>div{display:flex;align-items:center;gap:8px;padding:6px 11px 6px 6px;background:rgba(12,13,18,.84);border-left:3px solid var(--br-cyan,#19c9ff);color:#f4f4f8;font:800 12px/1 var(--br-ui,ui-monospace,monospace);letter-spacing:.08em;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#hud #abHint kbd{min-width:18px;padding:0 5px;background:#f4f4f8;color:#111116;font:900 12px/17px var(--br-ui,ui-monospace,monospace);text-align:center}