/* The match HUD on the design system (2026-10-11, the owner's FFA reference). The components are
   bh-ui.css's .bh-hud-* (the design system); this file only places them. Every cluster is laid out at
   the 1920 x 1080 reference and scaled by the menu's --bh-k (min(w / 1920, h / 1080), src/screens.js
   menuScale) from its own corner, kept between 0.72 and 1.4 so a small window still reads it.
   Nothing here transitions or animates per frame (src/hud.js writes text and classes only on a
   change); the plates are near-opaque, no blur, no per-frame shadow. */
#hud{--hk:clamp(.72,var(--bh-k,1),1.4)}
#hud .bh-hud{position:absolute;z-index:5;pointer-events:none;font-family:var(--font-ui);font-weight:600;color:var(--ink);
 -webkit-font-smoothing:antialiased;box-sizing:border-box}
#hud .bh-hud *{box-sizing:border-box}

/* top left: the logo (160 px, was 210: owner 23/10, F38) */
#hud #hudBrand{position:absolute;left:22px;top:14px;z-index:4;width:160px;height:auto;pointer-events:none;
 transform:scale(var(--hk));transform-origin:0 0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}

/* top centre: YOU | clock | ENEMY */
/* the score header and the ability tiles at 0.8 of the reference (owner 23/10, F35: smaller); the notice line follows the header */
#hud #hScore{left:50%;top:18px;transform:translateX(-50%) scale(calc(var(--hk) * .8));transform-origin:50% 0}
#hud #hScore .bh-hud-side-label{color:var(--ink)}
#hud #hScore.is-over .bh-hud-clock-time{font-size:44px}
#hud #hScore .is-win{color:var(--yellow)} #hud #hScore .is-loss{color:var(--magenta)} #hud #hScore .is-draw{color:var(--ink-2)}

/* under the top board: the one notice line (rounds, the bomb, a player left, the party): the feed is kills only */
#hud #hNotice{left:50%;top:calc(36px + 74px * var(--hk));transform:translateX(-50%) scale(var(--hk));transform-origin:50% 0;padding:8px 18px;
 font-size:22px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;max-width:900px;overflow:hidden;text-overflow:ellipsis}
#hud #hNotice[hidden]{display:none}

/* top right: the feed */
#hud #hFeed{right:26px;top:36px;transform:scale(var(--hk));transform-origin:100% 0;max-width:640px}
#hud #hFeed .bh-hud-feed-line{max-width:640px}
#hud #hFeed .kf-n{max-width:200px;overflow:hidden;text-overflow:ellipsis}
#hud #hFeed .kf-cause{display:inline-flex;align-items:center;color:var(--ink);--iaccent:var(--yellow)}
#hud #hFeed .kf-cause.kf-gun svg{display:block}
#hud #hFeed .kf-cause.kf-ab svg{width:24px;height:24px}
#hud #hFeed .kf-hs{display:inline-flex;color:var(--ink)}
#hud #hFeed .kf-broken{display:inline-flex;color:var(--ink);--iaccent:var(--cyan)}

/* bottom left: health; the squad over it (3v3) */
#hud #hHealth{left:24px;bottom:24px;transform:scale(var(--hk));transform-origin:0 100%}
#hud #hHealth .bh-avatar{background-color:var(--surface-3)}
#hud #allyHud{left:24px;bottom:calc(24px + 132px * var(--hk));display:flex;flex-direction:column-reverse;gap:6px;
 transform:scale(var(--hk));transform-origin:0 100%}
#hud #allyHud .ally-card.self{display:none}              /* my own card: the health plate is mine */
#hud #allyHud .ally-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;row-gap:5px;width:240px;
 padding:7px 12px 8px;background:rgba(12,16,22,.9);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm)}   /* no cyan accent on the left (owner 22/10) */
#hud #allyHud .ally-card-top{display:contents}
#hud #allyHud .ally-name{font-size:19px;line-height:1;font-weight:800;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hud #allyHud .ally-hp{font-size:18px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
#hud #allyHud .ally-dead{display:none;font-style:normal;font-size:16px;font-weight:900;letter-spacing:.08em;color:var(--red)}
#hud #allyHud .ally-card-bottom{display:none}
#hud #allyHud .ally-segments{grid-column:1/-1;display:flex;gap:3px;height:6px}
#hud #allyHud .ally-segments i{flex:1;background:rgba(255,255,255,.14)}
#hud #allyHud .ally-segments i.on{background:var(--ink)}
#hud #allyHud .ally-card.low .ally-segments i.on{background:var(--red)}
#hud #allyHud .ally-card.dead{color:var(--ink-3)}
#hud #allyHud .ally-card.dead .ally-dead{display:inline}
#hud #allyHud .ally-card.dead .ally-hp{display:none}
#hud #allyHud .ally-card.dead .ally-name{text-decoration:line-through}

/* bottom centre: the abilities, and the first-time hints over them */
#hud #hAbilities{left:50%;bottom:30px;transform:translateX(-50%) scale(calc(var(--hk) * .8));transform-origin:50% 100%}
#hud #hAbilities .bh-hud-abilities{height:124px;padding-bottom:30px}
/* the ability tiles since the approved icons (2026-10-17): the icon is a neutral white silhouette and the tile's
   state is its colour (owner: no magenta tiles) — ready white on the dark plate, active (held to aim, or its effect
   running) yellow, cooling dim with the seconds over it */
#hud #hAbilities .bh-hud-ability{border-color:rgba(255,255,255,.82);background:rgba(12,16,22,.78);color:var(--ink)}
#hud #hAbilities .bh-hud-ability.is-active{border-color:var(--yellow);background:rgba(253,224,43,.12);color:var(--yellow)}
#hud #hAbilities .bh-hud-ability.is-cooling{border-color:var(--line-strong);background:var(--surface-0);color:var(--ink-3)}
#hud #hAbilities .bh-hud-ability.is-cooling .abic-art{opacity:.55}
#hud #hAbilities .bh-hud-ability.is-heal{border-color:var(--green);background:rgba(76,244,92,.08);color:var(--green)}
#hud #hAbilities .bh-hud-ability.is-heal.is-cooling{border-color:var(--line-strong);background:var(--surface-0);color:var(--ink-3)}
#hud #abHint{right:auto;left:50%;transform:translateX(-50%);bottom:calc(100% + 10px);align-items:center;white-space:nowrap}
#hud #abHint>div{font-family:var(--font-ui);font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
 background:rgba(12,16,22,.9);border-left-color:var(--magenta)}

/* bottom right: the weapons */
#hud #hWeapons{right:22px;bottom:24px;transform:scale(var(--hk));transform-origin:100% 100%}

/* the prompts (2026-10-17, owner: "nello stile di bh-ui.css"), in two fixed slots under the crosshair, clear of
   the subtitles (bh-settings.css #subs, from 28 vh up) and of the ability hints: first the reload one
   (hud_status.js #weaponPrompt: RELOAD, RELOADING, CHAMBER NEXT ROUND, CYCLING BOLT), under it the interaction
   ones (main.js #doorPrompt: a door, the zipline; hud_status.js #vip: a weapon stand). One component
   in the HUD's language: the plate of the clusters, the key in a key-cap (yellow: press it; grey: already
   working), the action in the UI face. The reload and the bolt draw their time in a bar along the plate's foot
   (the loading bar's pink, cyan for the bolt). Written only when the state changes; the bar is a transform. */
#hud .bh-hud-prompt{position:absolute;left:50%;right:auto;bottom:auto;z-index:8;display:flex;align-items:center;gap:var(--space-3);min-width:0;
 padding:7px 20px 7px 7px;transform:translateX(-50%) scale(var(--hk));transform-origin:50% 0;
 background:rgba(12,16,22,.92);border:var(--border-strong) solid var(--line-strong);border-radius:var(--radius-md);box-shadow:0 6px 16px rgba(0,0,0,.35);
 font:800 26px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-shadow:none;white-space:nowrap;pointer-events:none}
#hud .bh-hud-prompt[hidden]{display:none}
#hud .bh-hud-prompt kbd{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;margin:0;padding:0 9px;box-sizing:border-box;
 background:var(--yellow);color:var(--on-yellow);border:0;border-radius:var(--radius-sm);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22);
 font:900 24px/1 var(--font-ui);letter-spacing:.02em;text-transform:uppercase}
#hud .bh-hud-prompt b{font-weight:900;color:var(--yellow)}
#hud .bh-hud-prompt .bh-hud-prompt-copy{display:contents}
#hud .bh-hud-prompt .bh-hud-prompt-track{display:none;position:absolute;left:8px;right:8px;bottom:5px;height:5px;border-radius:var(--radius-pill);
 background:var(--surface-3);overflow:hidden}
#hud .bh-hud-prompt .bh-hud-prompt-track i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--magenta));
 transform-origin:left center;transform:scaleX(0)}

#hud #weaponPrompt{top:calc(50% + 44px * var(--hk))}
/* no rounds left: the red frame of an empty magazine (the weapon card's red count) */
#hud #weaponPrompt[data-state="empty"]{border-color:var(--red)}
/* working: the key goes grey, the time runs along the foot */
#hud #weaponPrompt[data-state="reloading"],#hud #weaponPrompt[data-state="cycling"]{padding-bottom:17px}
#hud #weaponPrompt[data-state="reloading"] kbd,#hud #weaponPrompt[data-state="cycling"] kbd{background:var(--ink-2)}
#hud #weaponPrompt[data-state="reloading"] .bh-hud-prompt-track,#hud #weaponPrompt[data-state="cycling"] .bh-hud-prompt-track{display:block}
/* the bolt (a scoped rifle): cyan, the colour of the gun in hand */
#hud #weaponPrompt[data-state="chamber"]{border-color:var(--cyan)}
#hud #weaponPrompt[data-state="chamber"] kbd{background:var(--cyan)}
#hud #weaponPrompt[data-state="cycling"] .bh-hud-prompt-track i{background:var(--cyan)}

#hud #doorPrompt,#hud #vip{top:calc(50% + 104px * var(--hk))}
#hud #vip{gap:var(--space-2)}

/* the fps / ping chip: top left, under the logo (the feed has the top right) */
#hud #fpschip{left:24px!important;right:auto!important;top:calc(14px + 116px * var(--hk))!important}
/* MIG-ui-desktop-6 · the FPS / ping chip on the design system (hud.js writes its look inline: 'JetBrains Mono', a font the game
   never loads, so each machine drew its own monospace, and off-palette colours): the HUD's type and plate on desktop; its place,
   its display and its text stay hud.js's. Phones and tablets keep theirs (the ui-mobile session's zone) */
html:not(.bh-touch,.bh-phone,.bh-tablet) #hud #fpschip{font:700 max(12px,calc(14px * var(--hk)))/1 var(--font-ui)!important;font-variant-numeric:tabular-nums!important;
 letter-spacing:.04em!important;color:var(--ink-2)!important;background:rgba(12,16,22,.9)!important;border:var(--border-hair) solid var(--line)!important;
 border-radius:var(--radius-sm)!important;padding:max(4px,calc(5px * var(--hk))) max(6px,calc(9px * var(--hk)))!important}

/* spectating: the player's own clusters give way to the card of the one watched (hud.js spectator) */
#hud.is-spectating #hHealth,#hud.is-spectating #hAbilities,#hud.is-spectating #hWeapons,
#hud.no-self #hHealth,#hud.no-self #hAbilities,#hud.no-self #hWeapons,#hud.no-self #allyHud{display:none}
/* (F14, owner 22/10) the design system's parts: .bh-hud-plate, .bh-avatar framed like my own, .bh-hud-hp, ten .bh-hud-segs,
   .bh-hud-key; the portrait framed cyan for a teammate, magenta for an enemy (the admin's WATCH); no accent on the left (owner 22/10,
   «HUD: spettatore» round 1 note), and the watched teammate's own card in the strip gives way (his name only once) */
#hud #spectatorHud{position:absolute;left:50%;bottom:28px;z-index:5;display:none;padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2);
 transform:translateX(-50%) scale(var(--hk));transform-origin:50% 100%;
 font-family:var(--font-ui);color:var(--ink);pointer-events:none;white-space:nowrap}
#hud #spectatorHud.is-on{display:block}
#hud.is-spectating #allyHud .ally-card.watched{display:none}
/* B117: no crosshair while spectating, phone and PC (it aimed nothing; it supersedes Mobile M1 round 2 «the watched one's crosshair») */
#hud.is-spectating #xh{display:none!important}
#hud #spectatorHud .spect-main{display:flex;align-items:center;gap:var(--space-4)}
#hud #spectatorHud .bh-avatar{width:var(--avatar-md);height:var(--avatar-md);border:var(--border-select) solid var(--cyan)}
#hud #spectatorHud.is-foe .bh-avatar{border-color:var(--magenta)}
#hud #spectatorHud .spect-who{display:flex;flex-direction:column;gap:2px;min-width:150px}
#hud #spectatorHud .spect-kicker{font-size:16px;line-height:1;font-weight:800;letter-spacing:.08em;color:var(--yellow)}
#hud #spectatorHud .spect-name{font-size:32px;line-height:1;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
#hud #spectatorHud .spect-role{font-size:16px;line-height:1;font-weight:800;letter-spacing:.06em;color:var(--ink-2)}
#hud #spectatorHud .spect-vit{display:flex;flex-direction:column;gap:var(--space-2)}
#hud #spectatorHud .bh-hud-hp{font-size:34px}
#hud #spectatorHud .bh-hud-hp .bh-i{font-size:26px}
#hud #spectatorHud .bh-hud-segs{gap:4px}
#hud #spectatorHud .bh-hud-segs i{width:20px;height:16px;border-radius:3px}
#hud #spectatorHud.is-low .bh-hud-hp{color:var(--red)}
#hud #spectatorHud.is-low .bh-hud-segs i:not(.is-off){background:var(--red)}
#hud #spectatorHud .spect-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-6);margin-top:var(--space-2);font-size:16px;font-weight:800;letter-spacing:.06em;color:var(--ink-2)}
#hud #spectatorHud .spect-next{display:inline-flex;align-items:center;gap:var(--space-2)}
#hud #spectatorHud .bh-hud-key{position:static;transform:none;height:26px;font-size:15px;letter-spacing:.04em}
#hud #spectatorHud .spect-count{color:var(--ink);font-variant-numeric:tabular-nums}
#hud #spectatorHud .spect-count:empty{display:none}

/* the round verdict between rounds (hud.js roundResult): the design system's banner */
#hud #roundResult{position:absolute;left:50%;top:24%;z-index:7;display:none;flex-direction:column;align-items:center;
 transform:translateX(-50%) scale(var(--hk));transform-origin:50% 0;pointer-events:none;font-family:var(--font-ui);color:var(--ink)}
#hud #roundResult .bh-banner-title > span{font-size:60px}
#hud #roundResult.is-won .bh-banner-title > span{color:var(--yellow)}
#hud #roundResult.is-lost .bh-banner-title > span{color:var(--magenta)}
#hud #roundResult .bh-banner-sub > span{font-size:26px}
#hud #hWeapons .bh-hud-weapon:not(.is-active) .bh-hud-mag em{color:var(--ink-2)}

/* bottom left, over the squad: the chat (src/chat.js; our servers only). The lines fade after a while;
   ENTER / T opens the box (then the last lines show again and the field takes the keys) */
#hud #hChat{left:24px;bottom:calc(24px + 250px * var(--hk));width:560px;display:flex;flex-direction:column;gap:6px;
 transform:scale(var(--hk));transform-origin:0 100%}
#hud #hChat[hidden]{display:none}
#hud #hChat .bh-chat-lines{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-height:214px;overflow:hidden}
#hud #hChat .bh-chat-line{flex:none;max-width:100%;padding:3px 10px 4px;background:rgba(12,16,22,.74);border-radius:var(--radius-sm);
 font-size:19px;line-height:1.25;font-weight:700;letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere;transition:opacity .8s}
#hud #hChat .bh-chat-line.is-old{opacity:0}
#hud #hChat .bh-chat-who{margin-right:6px;font-weight:900;color:var(--ink-2);white-space:nowrap}
#hud #hChat .bh-chat-who .nm{display:inline-block;unicode-bidi:isolate;max-width:60%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}   /* B192: a long name, then the tag */
#hud #hChat .bh-chat-who.is-me,#hud #hChat .bh-chat-who.is-ally{color:var(--cyan)}
#hud #hChat .bh-chat-who.is-foe{color:var(--magenta)}
#hud #hChat .bh-chat-who.is-party,#hud #hChat .bh-chat-tag.is-party{color:var(--yellow)}
#hud #hChat .bh-chat-tag{margin-right:6px;font-weight:900;letter-spacing:.04em}
#hud #hChat .bh-chat-tag.is-team{color:var(--cyan)}
#hud #hChat .bh-chat-line.is-system{color:var(--ink-2);font-style:italic;text-transform:uppercase;font-size:16px;letter-spacing:.03em}
#hud #hChat .bh-chat-line.is-bad{color:var(--yellow);border-left:3px solid var(--yellow)}
#hud #hChat .bh-chat-row{display:none;align-items:center;gap:10px;height:46px;padding:0 12px;background:rgba(12,16,22,.92);
 border:var(--border-hair) solid var(--line-strong);border-left:4px solid var(--ink-2);border-radius:var(--radius-sm)}
#hud #hChat.is-open .bh-chat-row{display:flex;pointer-events:auto}
#hud #hChat.is-open.is-team .bh-chat-row{border-left-color:var(--cyan)}
#hud #hChat.is-open .bh-chat-line.is-old{opacity:.9;transition:none}
#hud #hChat.is-open .bh-chat-lines{max-height:300px;overflow-y:auto;pointer-events:auto;scrollbar-width:thin}
#hud #hChat .bh-chat-ch{font-size:17px;font-weight:900;letter-spacing:.06em;color:var(--ink-2)}
#hud #hChat.is-team .bh-chat-ch{color:var(--cyan)}
#hud #hChat .bh-chat-input{flex:1;min-width:0;height:100%;padding:0;background:none;border:0;outline:0;color:var(--ink);
 font:700 20px/1 var(--font-ui);letter-spacing:.01em}
#hud #hChat .bh-chat-input::placeholder{color:var(--ink-3)}
/* what the filter will do with the line, as it is typed (src/chat.js hint): starred out, or not sent */
#hud #hChat .bh-chat-hint{align-self:flex-start;max-width:100%;padding:3px 10px;border-radius:var(--radius-sm);background:rgba(12,16,22,.92);
 font-size:15px;line-height:1.25;font-weight:800;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
#hud #hChat .bh-chat-hint[hidden],#hud #hChat:not(.is-open) .bh-chat-hint{display:none}
#hud #hChat .bh-chat-row.is-masked{border-left-color:var(--yellow)}
#hud #hChat .bh-chat-row.is-masked~.bh-chat-hint{color:var(--yellow)}
#hud #hChat .bh-chat-row.is-blocked{border-left-color:var(--red)}
#hud #hChat .bh-chat-row.is-blocked~.bh-chat-hint{color:var(--red)}
#hud #hChat .bh-chat-line.is-pending{opacity:.75}
/* B259 (docs/CHAT-CLAN.md): the clan's channel (--green) and the box's tabs MATCH · PARTY · CLAN (the menu's .bh-tabs-sm,
   smaller), one tab's lines while the box is open (closed: every line, with its tag) */
#hud #hChat .bh-chat-tag.is-clan,#hud #hChat .bh-chat-who.is-clan,#hud #hChat.is-clan .bh-chat-ch{color:var(--green)}
#hud #hChat .bh-chat-who.is-party,#hud #hChat.is-party .bh-chat-ch{color:var(--yellow)}
#hud #hChat.is-open.is-clan .bh-chat-row{border-left-color:var(--green)}
#hud #hChat.is-open.is-party .bh-chat-row{border-left-color:var(--yellow)}
#hud #hChat .bh-chat-tabs{display:none;gap:var(--space-5);margin:0;padding:4px 12px 0;background:rgba(12,16,22,.92);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;pointer-events:auto}
#hud #hChat.is-open .bh-chat-tabs:not([hidden]){display:flex}
#hud #hChat .bh-chat-tabs .bh-tab{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:800 17px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:6px 0 7px;border-bottom:3px solid transparent}
#hud #hChat .bh-chat-tabs .bh-tab::before,#hud #hChat .bh-chat-tabs .bh-tab::after{display:none}
#hud #hChat .bh-chat-tabs .bh-tab.is-active{color:var(--ink);border-bottom-color:var(--ink)}
#hud #hChat .bh-chat-tabs .bh-tab[data-tab=party].is-active{color:var(--yellow);border-bottom-color:var(--yellow)}
#hud #hChat .bh-chat-tabs .bh-tab[data-tab=clan].is-active{color:var(--green);border-bottom-color:var(--green)}
#hud #hChat .bh-chat-tabs .bh-count{min-width:20px;height:20px;margin:-2px 0;padding:0 5px;font-size:13px}   /* (no taller than the label: a count never moves the tabs or the lines) */
#hud #hChat.is-open[data-tab=match] .bh-chat-line:not([data-tab=match]),#hud #hChat.is-open[data-tab=party] .bh-chat-line:not([data-tab=party]),
#hud #hChat.is-open[data-tab=clan] .bh-chat-line:not([data-tab=clan]){display:none}

/* ---- HUD da PC (owner 2026-10-18, docs/ui-refs/2026-10-18/hud-pc-oggi.png; his picks in Revisioni UI «HUD da PC», round 1:
   weapons B, health A, teammates A, guide A) ------------------------------------------------------------------------------
   Smaller weapons and health, the teammates' portraits, no lines over the abilities (the F / G tiles alone at the bottom
   centre), the abilities guide on F1. Every rule that changes the match HUD is a desktop one (html:not(.bh-touch)): the
   phone's HUD is bh-touch.css's. Static rules only: nothing transitions or runs per frame. */
#hud #allyHud .ally-pic{display:none}

/* the weapons: ammo first — the gun in hand as its count, big; the others as small chips with their key */
html:not(.bh-touch) #hud #hWeapons{gap:6px;padding:6px;align-items:stretch}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon{grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;
 grid-template-areas:"slot name mag" "icon icon mag";column-gap:10px;width:240px;height:74px;padding:6px 12px 6px 8px;border-width:2px}
/* the 1 / 2 keys in the F / G keys' style (.bh-hud-key: ink-2 key, on-yellow digit, line-strong rim; owner 23/10, F39), at the
   F / G keys' size on screen (32 px x 0.8) */
html:not(.bh-touch) #hud #hWeapons .bh-hud-slot{grid-area:slot;min-width:24px;height:24px;padding:0 4px;font-size:16px;font-weight:900;
 border:var(--border-strong) solid var(--line-strong);border-radius:4px;background:var(--ink-2);color:var(--on-yellow)}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon-name{grid-area:name;align-self:center;font-size:15px;color:var(--ink-2)}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon-icon{grid-area:icon;justify-self:start;width:92px;height:30px}
html:not(.bh-touch) #hud #hWeapons .bh-hud-mag{grid-area:mag;align-self:center;font-size:46px}
html:not(.bh-touch) #hud #hWeapons .bh-hud-mag .res{font-size:22px;color:var(--ink-2)}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon.is-active{order:2}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon:not(.is-active){grid-template-columns:1fr;grid-template-rows:auto 1fr;
 grid-template-areas:"slot" "icon";width:72px;padding:6px;background:var(--surface-0)}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon:not(.is-active) .bh-hud-weapon-name,
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon:not(.is-active) .bh-hud-mag{display:none}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon:not(.is-active) .bh-hud-weapon-icon{justify-self:center;width:58px;height:24px;color:var(--ink-2)}

/* the health: the plate, smaller (the squad's place over it follows: --hhh) */
html:not(.bh-touch) #hud{--hhh:94px}
html:not(.bh-touch) #hud #hHealth{height:80px;gap:12px;padding:6px 14px 6px 6px}
html:not(.bh-touch) #hud #hHealth .bh-avatar{width:66px;height:66px;border-width:2px}
html:not(.bh-touch) #hud #hHealth .bh-hud-health-body{gap:5px}
html:not(.bh-touch) #hud #hHealth .bh-hud-hp{font-size:31px;gap:8px}
html:not(.bh-touch) #hud #hHealth .bh-hud-hp .bh-i{font-size:24px}
html:not(.bh-touch) #hud #hHealth .bh-hud-segs{gap:4px}
html:not(.bh-touch) #hud #hHealth .bh-hud-segs i{width:22px;height:18px;border-radius:3px}
html:not(.bh-touch) #hud #hHealth .bh-hud-segs.is-armor i{height:7px}
html:not(.bh-touch) #hud #allyHud{bottom:calc(24px + var(--hhh,132px) * var(--hk))}

/* teammates: the portrait like mine, smaller, in the ally's cyan; a dead one greyed and struck through in red */
html:not(.bh-touch) #hud #allyHud .ally-pic{display:block;position:relative;width:40px;height:40px;border:2px solid var(--cyan);border-radius:4px}
html:not(.bh-touch) #hud #allyHud .ally-card.dead .ally-pic{border-color:var(--line-strong);filter:grayscale(1) brightness(.5)}
html:not(.bh-touch) #hud #allyHud .ally-card.dead .ally-pic::after{content:"";position:absolute;inset:0;
 background:linear-gradient(135deg,transparent 44%,var(--red) 44%,var(--red) 56%,transparent 56%)}
/* the teammates: portrait + name + bar, a column over the health */
html:not(.bh-touch) #hud #allyHud{gap:5px}
html:not(.bh-touch) #hud #allyHud .ally-card{grid-template-columns:40px 1fr auto;column-gap:9px;row-gap:5px;width:216px;padding:5px 10px 5px 5px;border-left-width:var(--border-hair)}
html:not(.bh-touch) #hud #allyHud .ally-pic{grid-row:1 / span 2}
html:not(.bh-touch) #hud #allyHud .ally-name{font-size:17px}
html:not(.bh-touch) #hud #allyHud .ally-hp{font-size:16px}
html:not(.bh-touch) #hud #allyHud .ally-dead{font-size:14px}
html:not(.bh-touch) #hud #allyHud .ally-segments{grid-column:2 / -1;height:5px;gap:2px}
/* the keys in the guide */
#hud #abGuide kbd{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;margin:0;padding:0 6px;
 background:var(--yellow);color:var(--on-yellow);border:0;border-radius:4px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);font:900 16px/1 var(--font-ui)}

/* the abilities guide (hud_guide.js; F1): a card at the centre over a dimmed match, like Overwatch's hero info */
html:not(.bh-touch) #hud #abGuide:not([hidden]){position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
 background:rgba(6,9,14,.6);pointer-events:none;font-family:var(--font-ui);color:var(--ink);text-transform:none}
#hud #abGuide .abg-card{width:1140px;flex:none;transform:scale(var(--hk));padding:20px;background:rgba(12,16,22,.95);border:var(--border-strong) solid var(--line-strong);border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(0,0,0,.45)}
#hud #abGuide .abg-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
#hud #abGuide .abg-pic{width:84px;height:84px;border:var(--border-select) solid var(--magenta)}
#hud #abGuide .abg-who{display:flex;flex-direction:column;gap:3px}
#hud #abGuide .abg-kicker{font-size:16px;font-weight:800;letter-spacing:.1em;color:var(--yellow)}
#hud #abGuide .abg-name{font-size:46px;line-height:.95;font-weight:900;letter-spacing:.02em}
#hud #abGuide .abg-role{font-size:18px;font-weight:800;letter-spacing:.06em;color:var(--ink-2)}
#hud #abGuide .abg-hold{margin-left:auto;align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:.05em;color:var(--ink-3)}
#hud #abGuide .abg-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
#hud #abGuide .abg-ab{display:flex;gap:16px;padding:14px 16px 16px 14px;background:var(--surface-1);border:var(--border-strong) solid var(--line);border-radius:var(--radius-sm)}
#hud #abGuide .abg-ic{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin-bottom:14px;
 background:rgba(12,16,22,.78);border:var(--border-select) solid rgba(255,255,255,.82);border-radius:var(--radius-sm)}
#hud #abGuide .abg-ic svg{width:56px;height:56px}
#hud #abGuide .abg-ic kbd{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%)}
#hud #abGuide .is-passive .abg-ic{color:var(--cyan);border-color:var(--cyan)}
#hud #abGuide .is-passive .abg-ic svg{width:40px;height:40px}
#hud #abGuide .is-passive .abg-ic kbd{background:var(--cyan);font-size:12px;letter-spacing:.06em}
#hud #abGuide .abg-body{display:flex;flex-direction:column;gap:7px;min-width:0}
#hud #abGuide .abg-title{font-size:28px;line-height:1;font-weight:900;letter-spacing:.03em}
#hud #abGuide .abg-what{margin:0;font-size:20px;line-height:1.22;font-weight:600;color:var(--ink)}
#hud #abGuide .abg-how{margin:0;font-size:17px;line-height:1.25;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--yellow)}
#hud #abGuide .abg-facts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
#hud #abGuide .abg-facts li{padding:3px 8px;border:var(--border-hair) solid var(--line-strong);border-radius:4px;font-size:15px;font-weight:800;letter-spacing:.05em;color:var(--ink-2)}

/* the low-health warning (B146, variant A, 27/10): --red edges from the four sides, the centre and the crosshair clear;
   opacity only (the compositor's work, 0 draws); Reduce flashing effects and the system's reduced motion hold it still */
#hud #lowhp{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;--d:14%;
 background:linear-gradient(to right,var(--red),transparent var(--d)),linear-gradient(to left,var(--red),transparent var(--d)),
 linear-gradient(to bottom,var(--red),transparent var(--d)),linear-gradient(to top,var(--red),transparent var(--d))}
#hud #lowhp.is-low{--lo:.22;--hi:.42;animation:bhLowhp 1.3s ease-in-out infinite}
#hud #lowhp.is-crit{--d:20%;--lo:.42;--hi:.72;animation:bhLowhp .75s ease-in-out infinite}
@keyframes bhLowhp{0%,100%{opacity:var(--lo)}50%{opacity:var(--hi)}}
body.reduce-flash #hud #lowhp:is(.is-low,.is-crit){animation:none;opacity:var(--lo)}
@media (prefers-reduced-motion:reduce){#hud #lowhp:is(.is-low,.is-crit){animation:none;opacity:var(--lo)}}
/* B154: where the hits come from (hud.js updateArcs): a wedge round the crosshair in --red with a dark rim (it reads on
   sky and on wall alike) and a point outward; JS writes each arc's rotation and opacity, the pop-in is CSS (none with
   reduce-flash or reduced motion). The radius follows the HUD's --hk (84-130 px). */
#hud #ddir{position:absolute;top:50%;left:50%;width:0;height:0;z-index:5;pointer-events:none;--dk:clamp(.84,var(--hk),1.3)}
#hud #ddir .arc{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity;pointer-events:none}
#hud #ddir .arc svg{position:absolute;left:-130px;top:-130px;width:260px;height:260px;overflow:visible;transform:scale(var(--dk));animation:bhArcIn .16s ease-out}
#hud #ddir .arc path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#hud #ddir .arc .rim{stroke:rgba(8,11,16,.7);stroke-width:13}
#hud #ddir .arc .col{stroke:var(--red);stroke-width:8}
@keyframes bhArcIn{from{transform:scale(calc(var(--dk) * 1.2))}}
body.reduce-flash #hud #ddir .arc svg{animation:none}
@media (prefers-reduced-motion:reduce){#hud #ddir .arc svg{animation:none}}

/* B273 · CrazyGames' small desktop windows (821×462, 907×510): the HUD's small texts never under ~11 px real (--hk stops at
   0.72, the score header draws at 0.8 of it). 1920 and touch screens unchanged */
html:not(.bh-touch) #hud #hScore .bh-hud-clock-sub{font-size:max(18px,calc(11.2px / (var(--hk) * .8)))}
html:not(.bh-touch) #hud #hWeapons .bh-hud-weapon-name{font-size:max(15px,calc(11.2px / var(--hk)))}

/* B273b · the match's chat box under B273's rule (CrazyGames' small desktop windows): its MATCH · PARTY · CLAN tabs' counts
   and its hint never under ~11 px real (the box scales by --hk, 0.72 at least); 1920 and touch screens unchanged */
html:not(.bh-touch) #hud #hChat .bh-chat-tabs .bh-count{font-size:max(13px,calc(11.2px / var(--hk)));min-width:max(20px,calc(11.2px / var(--hk) + 7px));height:max(20px,calc(11.2px / var(--hk) + 7px))}
html:not(.bh-touch) #hud #hChat .bh-chat-hint{font-size:max(15px,calc(11.2px / var(--hk)))}
html:not(.bh-touch) #hud #hChat .bh-chat-who .bh-tag-clan{font-size:max(12px,.72em,calc(11.2px / var(--hk)))}   /* (B273c: the clan's tag in a line, 9.7 px at 821) */

/* B273c (the owner on B273b's round 2: «the chat is huge, it takes half the screen; much more sober and narrow; the labels
   over it attached to it»; «why is FIRST TO 50 so big at 821×462?»). The match's chat: at most a third of the window's width
   and its lines at most 30 % of its height (about 6), at every size (the reference's 560 x 214 / 300 px stay where they are
   less: 1920 x 1080 and 1280 x 720 unchanged). In CrazyGames' small desktop windows (under 1195 x 672, the B273 tabs'
   breakpoint) the open box is one block: the tabs, the lines and the field on one plate, no gaps; the goal that takes the
   clock's place in an online TDM («FIRST TO 50», hud.js is-goal) one line at a label's size, not the clock's */
html:not(.bh-touch) #hud #hChat{width:min(560px,calc(100vw / 3 / var(--hk)))}
html:not(.bh-touch) #hud #hChat .bh-chat-lines{max-height:min(214px,calc(30vh / var(--hk)))}
html:not(.bh-touch) #hud #hChat.is-open .bh-chat-lines{max-height:min(300px,calc(30vh / var(--hk)))}
@media (max-width:1194px),(max-height:671px){
 html:not(.bh-touch) #hud #hChat.is-open{gap:0;background:rgba(12,16,22,.92);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm)}
 html:not(.bh-touch) #hud #hChat.is-open .bh-chat-tabs{background:none;border-bottom:var(--border-hair) solid var(--line);border-radius:0}
 html:not(.bh-touch) #hud #hChat.is-open .bh-chat-lines{padding:6px 0 4px}
 html:not(.bh-touch) #hud #hChat.is-open .bh-chat-line{background:none}
 html:not(.bh-touch) #hud #hChat.is-open .bh-chat-row{background:none;border-width:var(--border-hair) 0 0 4px;border-radius:0}   /* (the left edge keeps its channel's colour) */
 html:not(.bh-touch) #hud #hScore.is-goal .bh-hud-clock-time{font-size:34px;white-space:nowrap}
}

/* B383 (owner 02/11, tests/responsive.mjs): the spectator's card on the smallest phones (568 × 320) and its CLICK key on a
   laptop keep the Design System's floor, 11.2 px real for a label and 12.2 for the count (the HUD's rule: 11,2 px / --hk);
   where they were bigger they stay as they were */
#hud #spectatorHud :is(.spect-kicker,.spect-role){font-size:max(16px,calc(11.2px / var(--hk,1)))}
#hud #spectatorHud .spect-count{font-size:max(1em,calc(12.2px / var(--hk,1)))}
#hud #spectatorHud .spect-controls .bh-hud-key{font-size:max(15px,calc(11.2px / var(--hk,1)))}
html.bh-touch #hud #spectatorHud :is(.spect-kicker,.spect-role){font-size:max(16px,calc(11.2px / (var(--tk,1) * 1.5)))}   /* (a touch screen scales the card by --tk × 1.5, bh-touch.css) */
html.bh-touch #hud #spectatorHud .spect-count{font-size:max(1em,calc(12.2px / (var(--tk,1) * 1.5)))}
html:not(.bh-touch) #hud #hScore .bh-hud-clock-label{font-size:max(18px,calc(11.2px / (var(--hk) * .8)))}   /* (MATCH STARTS IN at 1366 × 768: 10.4 px; the rule of .bh-hud-clock-sub just above) */

/* B487 (owner 07/11): the feedback while my health climbs (hud_heal.js) — any heal: my own regen, a medkit, an ability.
   --green edges like the low-health warning's (#lowhp), lighter and thinner, the centre and the crosshair clear; they
   pulse while it lasts (opacity only: the compositor's work); Reduce flashing effects and reduced motion hold them still.
   (Round 2, the owner 07/11: «troppo forte l'effetto»: variant A «leggero» — 6 % of the edge instead of 9, opacity about
   half (0.07-0.16 instead of 0.14-0.34), a slower pulse, 2.2 s instead of 1.1)
   The health plate: its segments glow, the one growing turns --green; «+N» by the number; my kit mending a team-mate:
   a chip over the ability tiles (the abilities' line, #abHint, in --green) */
#hud #healfx{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s ease-out;--d:6%;
 background:linear-gradient(to right,var(--green),transparent var(--d)),linear-gradient(to left,var(--green),transparent var(--d)),
 linear-gradient(to bottom,var(--green),transparent var(--d)),linear-gradient(to top,var(--green),transparent var(--d))}
#hud #healfx.is-on{opacity:.1;animation:bhHealfx 2.2s ease-in-out infinite}
@keyframes bhHealfx{0%,100%{opacity:.07}50%{opacity:.16}}
body.reduce-flash #hud #healfx.is-on{animation:none;opacity:.1}
@media (prefers-reduced-motion:reduce){#hud #healfx.is-on{animation:none;opacity:.1}}
#hud #hHealth.is-healing .bh-hud-segs i:not(.is-off){box-shadow:0 0 10px color-mix(in srgb,var(--green) 60%,transparent)}
#hud #hHealth.is-healing .bh-hud-segs i.is-gain{background:var(--green)}
#hud #hHealth .bh-hud-heal-gain{font-size:30px;font-weight:900;color:var(--green);opacity:0;transition:opacity .35s ease-out;
 text-shadow:0 2px 0 color-mix(in srgb,var(--surface-0) 85%,transparent)}
#hud #hHealth .bh-hud-heal-gain.is-on{opacity:1;transition:none}
#hud #healGive{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;
 padding:6px 12px;border-left:4px solid var(--green);background:color-mix(in srgb,var(--surface-0) 90%,transparent);white-space:nowrap;
 font-family:var(--font-ui);font-size:23px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
#hud #healGive[hidden]{display:none}
#hud #healGive .bh-i{font-size:26px}
html.bh-touch #hud>#healGive{top:calc(66px + env(safe-area-inset-top,0px));bottom:auto;padding:4px 10px;font-size:15px;z-index:5}
html.bh-touch #hud>#healGive .bh-i{font-size:17px}
/* B487 round 3 (owner 07/11: «puoi anche mettere dei "+" ai lati dello schermo?»): --green «+» by each side edge (twelve since round 4),
   rising slowly and fading, one after the other (2.4 s each, staggered): the edges' variant A in symbols, discreet, the centre
   and the crosshair clear. display:none outside a heal (no layer, no work); transform and opacity only while it lasts.
   Reduce flashing effects and reduced motion: still and faint */
#hud #healplus{position:absolute;inset:0;z-index:4;pointer-events:none;display:none}
#hud #healplus.is-on{display:block}
#hud #healplus i{position:absolute;font:900 56px/1 var(--font-ui);font-style:normal;color:var(--green);opacity:0;
 text-shadow:0 2px 0 color-mix(in srgb,var(--surface-0) 70%,transparent);animation:bhHealPlus 2.4s ease-out infinite}
/* (round 4, owner 07/11: «mettine anche di più, di varie dimensioni»): twelve, six a side, in three sizes (L 56, M 42, S 30
   px), spread over the edge's lower two thirds and over the 2.4 s, so a few show at once, never a rain */
#hud #healplus i:nth-child(3n+2){font-size:42px}
#hud #healplus i:nth-child(3n){font-size:30px}
#hud #healplus i:nth-child(1){left:2.2%;bottom:20%;animation-delay:0s}
#hud #healplus i:nth-child(2){left:4.6%;bottom:31%;animation-delay:.4s}
#hud #healplus i:nth-child(3){left:1.4%;bottom:41%;animation-delay:.8s}
#hud #healplus i:nth-child(4){left:3.6%;bottom:52%;animation-delay:1.2s}
#hud #healplus i:nth-child(5){left:1.8%;bottom:62%;animation-delay:1.6s}
#hud #healplus i:nth-child(6){left:5%;bottom:26%;animation-delay:2s}
#hud #healplus i:nth-child(7){right:2.2%;bottom:24%;animation-delay:.2s}
#hud #healplus i:nth-child(8){right:4.6%;bottom:35%;animation-delay:.6s}
#hud #healplus i:nth-child(9){right:1.4%;bottom:46%;animation-delay:1s}
#hud #healplus i:nth-child(10){right:3.6%;bottom:56%;animation-delay:1.4s}
#hud #healplus i:nth-child(11){right:1.8%;bottom:66%;animation-delay:1.8s}
#hud #healplus i:nth-child(12){right:5%;bottom:30%;animation-delay:2.2s}
@keyframes bhHealPlus{0%{opacity:0;transform:translateY(0) scale(.85)}25%{opacity:.6}100%{opacity:0;transform:translateY(-80px) scale(1)}}
body.reduce-flash #hud #healplus i{animation:none;opacity:.35}
@media (prefers-reduced-motion:reduce){#hud #healplus i{animation:none;opacity:.35}}
html.bh-phone #hud #healplus i{font-size:40px}
html.bh-phone #hud #healplus i:nth-child(3n+2){font-size:32px}
html.bh-phone #hud #healplus i:nth-child(3n){font-size:24px}