/* BlockHeroes UI — the design system in the game: a copy of the design system's project/tokens.json
   (as CSS custom properties) and project/components/bundle.css (the .bh-* components and the
   .bh-i-<name> icons), https://claude.ai/artifact/Kee23s4rjTkeMcD299nxke. Change the design system
   first, then this file to match; lobby layout lives in bh-lobby.css. Sizes are at the 1920 x 1080
   reference; the menu scales its layers by --bh-k (src/screens.js menuScale). */

@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-800Italic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-900Italic.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
:root{--surface-0:#0c1016;--surface-1:#11161f;--surface-2:#181f2a;--surface-3:#222837;--backdrop:#3a3f5a;--line:#2d3346;--line-strong:#646b88;--scrim:rgba(8, 11, 16, 0.72);--ink:#ffffff;--ink-2:#aab0c4;--ink-3:#818a9c;--pink:#e50d96;--pink-bright:#fc25c3;--pink-tint:#2c102e;--magenta:#f904dc;--magenta-tint:#290626;--cyan:#03dfff;--cyan-tint:#08212b;--yellow:#fde02b;--on-yellow:#0b0c10;--green:#4cf45c;--red:#e8505a;--gem:#1cc4fc;--premium:#6c541c;--premium-tint:#352d1b;--premium-line:#9c7d3e;--rarity-common:#c3c8d4;--rarity-rare:#4cc4d4;--rarity-epic:#c066e0;--rarity-legendary:#e4a12a;--focus:#ffffff;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;--gutter:36px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;--shadow-panel:0 10px 30px rgba(0, 0, 0, 0.35);--border-hair:1px;--border-strong:2px;--border-select:3px;--border-cta:4px;--rail-width:172px;--nav-tile-height:100px;--topbar-height:96px;--cta-width:420px;--cta-height:120px;--control-height:56px;--icon-button:64px;--avatar-sm:44px;--avatar-md:72px;--bar-height:10px;--font-ui:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--bh-k:1}

/* ---------- foundations ---------- */
.bh-ui, .bh-ui * { box-sizing: border-box; }
.bh-ui { font-family: var(--font-ui); color: var(--ink); font-weight: 600; -webkit-font-smoothing: antialiased; }
:where(.bh-ui) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* B413 (B409 row 3): the controls carry the game's face themselves, inside a .bh-ui root or not (index.html's old button rule
   gave them the page's Inter / system sans: profile tabs, MATCH HISTORY, CLOSE, TAKE REWARDS, OK) */
:is(.bh-btn, .bh-cattab, .bh-match, .bh-tab, .bh-chip, .bh-price, .bh-play, .bh-mode, .bh-select, .bh-nav, .bh-iconbtn, .bh-hud-key) { font-family: var(--font-ui); }
.bh-num { font-variant-numeric: tabular-nums; }
.bh-ui :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* states: hover lifts a border to line-strong or darkens a fill a touch; press sinks 1px; 120ms, nothing else moves */
.bh-nav, .bh-iconbtn, .bh-tab, .bh-cattab, .bh-chip, .bh-select, .bh-btn, .bh-play, .bh-price, .bh-mode, .bh-region, .bh-skin, .bh-skin-more, .bh-party-slot, .bh-match, .bh-stepper button, .bh-field-action { transition: border-color 120ms, background-color 120ms, filter 120ms, transform 120ms; }
.bh-nav:hover, .bh-iconbtn:hover, .bh-cattab:hover, .bh-chip:hover, .bh-mode:hover, .bh-region:hover, .bh-btn-secondary:hover, .bh-btn-quiet:hover, .bh-skin-more:hover, .bh-match:hover { border-color: var(--line-strong); }
.bh-tab:hover { color: var(--ink); }
.bh-party-slot:hover { border-color: var(--ink); }
.bh-btn-primary:hover, .bh-play:hover, .bh-price:hover, .bh-nav.is-active:hover, .bh-iconbtn.is-active:hover, .bh-cattab.is-active:hover, .bh-chip.is-active:hover { filter: brightness(0.94); }
.bh-nav:active, .bh-iconbtn:active, .bh-btn:active, .bh-play:active, .bh-price:active, .bh-chip:active, .bh-cattab:active, .bh-party-slot:active, .bh-match:active { transform: translateY(1px); }
.bh-match.is-selected:hover { border-color: var(--yellow); }
.bh-btn[disabled]:hover, .bh-btn[disabled]:active { border-color: var(--line); filter: none; transform: none; }

.bh-i { display: inline-block; flex: none; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.125em; }
/* coin and gem: the rewards' 3D art (assets/rewards/icon-*.webp, baked by bake.mjs from the reveal's models; owner 26/10, B117f) */
.bh-i-coin, .bh-i-gem { background: var(--i) center / contain no-repeat; -webkit-mask: none; mask: none; }

/* Menu screens (owner 22/10, F1; the Design System card's «Schermate del menu»). A menu screen is made of opaque
   .bh-panel (--surface-1, 1px --line, --radius-lg, --shadow-panel). The scene shows only in --space-6 gutters. Never
   text, tabs or titles on the scene; never semi-transparent panels. If the screen has a title, it is .bh-screen-title
   (upright, no stroke) inside the first panel. Large art is a rendered webp; an icon is an SVG.
   web3d/tests/panels.mjs checks BATTLE PASS, STORE (FEATURED, CHAMPIONS, a champion, DIAMONDS), LEADERBOARD, FRIENDS and
   the PRIVATE entry; the private room joins it once P0-1 is merged. */
.bh-panel { background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-panel); }
.bh-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.bh-panel-title { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.bh-panel-meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-screen-title { margin: 0; font-size: 60px; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
.bh-section-head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-3); }
.bh-section-title { margin: 0; font-size: 40px; line-height: 1.05; font-weight: 900; text-transform: uppercase; }
.bh-link { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.bh-link .bh-i { font-size: 18px; }

.bh-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-2) var(--surface-0); }
.bh-scroll::-webkit-scrollbar { width: 8px; }
.bh-scroll::-webkit-scrollbar-track { background: var(--surface-0); border-radius: var(--radius-pill); }
.bh-scroll::-webkit-scrollbar-thumb { background: var(--ink-2); border-radius: var(--radius-pill); }

/* art slots: a render or portrait fills the box; the element carries the image */
.bh-art { display: block; background: var(--surface-0) center / cover no-repeat; }

/* ---------- navigation ---------- */
.bh-rail { display: flex; flex-direction: column; gap: var(--space-3); width: var(--rail-width); }
.bh-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: var(--nav-tile-height); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.bh-nav .bh-i { font-size: 40px; }
.bh-nav.is-active { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 0 var(--border-strong) var(--surface-0); }

.bh-topbar { display: flex; align-items: center; gap: var(--space-4); }
.bh-profile { display: flex; align-items: center; gap: var(--space-4); width: 420px; height: var(--topbar-height); padding: var(--space-3); background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-profile .bh-avatar { width: var(--avatar-md); height: var(--avatar-md); }
.bh-profile-body { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 2px; align-items: baseline; }
.bh-profile-name { grid-column: 1 / -1; font-size: 26px; line-height: 1.15; font-weight: 800; }
.bh-profile-level { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.bh-profile-xp { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.bh-profile .bh-bar { grid-column: 1 / -1; margin-top: var(--space-2); }

.bh-currency { display: inline-flex; align-items: center; gap: var(--space-3); height: 64px; padding: 0 var(--space-5); background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 28px; font-weight: 800; }
.bh-currency .bh-i { font-size: 32px; }
.bh-currency-amount + .bh-i { margin-left: var(--space-5); }
.bh-currency-add { margin-left: var(--space-5); display: inline-flex; font-size: 28px; }

.bh-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-button); height: var(--icon-button); background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 32px; color: var(--ink); }
.bh-iconbtn.is-active { background: var(--pink); border-color: var(--pink); }
.bh-iconbtn-sm { width: 52px; height: 52px; font-size: 24px; border-radius: var(--radius-sm); }

.bh-tabs { display: flex; align-items: flex-end; gap: var(--space-8); border-bottom: var(--border-strong) solid var(--line); }
.bh-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6) var(--space-3); font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
.bh-tab.is-active { color: var(--ink); }
.bh-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--border-strong)); height: 5px; background: var(--pink-bright); border-radius: var(--radius-pill); }
.bh-tabs-sm .bh-tab { font-size: 22px; padding-bottom: var(--space-2); }
.bh-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); background: var(--pink-bright); border-radius: var(--radius-pill); font-size: 20px; font-weight: 800; color: var(--ink); }

.bh-cattabs { display: flex; gap: var(--space-2); }
.bh-cattab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); height: 64px; background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 22px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-cattab .bh-i { font-size: 30px; }
.bh-cattab.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }

.bh-chips { display: flex; gap: var(--space-2); }
.bh-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-5); background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); font-size: 17px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-chip.is-active { background: var(--pink); border-color: var(--pink); }

.bh-select { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 52px; min-width: 164px; padding: 0 var(--space-4); background: var(--surface-0); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-sm); font-size: 20px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-select .bh-i { font-size: 22px; }

/* ---------- actions ---------- */
.bh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: var(--control-height); padding: 0 var(--space-6); border: var(--border-hair) solid transparent; border-radius: var(--radius-md); font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.bh-btn .bh-i { font-size: 28px; }
.bh-btn-primary { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.bh-btn-secondary { background: var(--surface-1); border-color: var(--line-strong); color: var(--ink); }
.bh-btn-quiet { background: var(--surface-3); border-color: var(--line); color: var(--ink-2); }
/* a negative action (LEAVE MATCH): the red token (B132) */
.bh-btn-danger { background: var(--red); border-color: var(--red); color: var(--ink); }
.bh-btn-danger:hover { filter: brightness(1.08); }
.bh-btn-lg { height: 68px; font-size: 26px; padding: 0 var(--space-8); }
.bh-btn-lg .bh-i { font-size: 32px; }
.bh-btn-sm { height: 44px; font-size: 20px; padding: 0 var(--space-5); border-radius: var(--radius-sm); }
.bh-btn-block { width: 100%; }
.bh-btn[disabled] { background: var(--surface-3); border-color: var(--line); color: var(--ink-3); cursor: default; }

.bh-play { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); width: var(--cta-width); height: var(--cta-height); background: var(--yellow); border: var(--border-cta) solid var(--on-yellow); border-radius: var(--radius-md); color: var(--on-yellow); font-size: 72px; line-height: 0.95; font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; }
.bh-play .bh-i { font-size: 52px; }
.bh-play.is-searching { font-size: 40px; }

.bh-price { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; min-width: 176px; padding: 0 var(--space-4); background: var(--yellow); border-radius: var(--radius-sm); color: var(--on-yellow); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-price .bh-i { font-size: 26px; }
.bh-price-lg { height: 72px; min-width: 264px; font-size: 44px; font-weight: 900; border-radius: var(--radius-md); }
.bh-price-block { display: flex; width: 100%; }

.bh-mode { display: flex; align-items: center; gap: var(--space-5); width: var(--cta-width); height: 68px; padding: 0 var(--space-6); background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 24px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; }
.bh-mode .bh-i { font-size: 36px; }
.bh-mode-name { flex: 1; }
.bh-mode .bh-i-caret-down { font-size: 26px; }

.bh-region { display: inline-flex; align-items: center; gap: var(--space-5); height: 60px; padding: 0 var(--space-6); background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 28px; font-weight: 800; }
.bh-region .bh-i { font-size: 32px; color: var(--green); }

/* Filled controls: the owner's bordered button reference, with a shallow
   darker lower edge. Shared by menu, dialogs, settings and account actions. */
:root { --button-border:#080b10; --button-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -5px 0 rgba(0,0,0,.24),0 2px 0 rgba(0,0,0,.7); }
:is(.bh-btn,.bh-play,.bh-price,.bh-nav,.bh-iconbtn,.bh-cattab,.bh-chip,.bh-mode,.bh-region,.bh-select,.bh-skin-more,.bh-stepper button,.bh-field-action) {
 border-width:2px; border-style:solid; border-color:var(--button-border);
 background-image:linear-gradient(180deg,rgba(255,255,255,.08),transparent 60%);
 box-shadow:var(--button-shadow);
}
.bh-play { border-width:4px; box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -7px 0 rgba(0,0,0,.22),0 3px 0 rgba(0,0,0,.7); }
.bh-btn-primary,.bh-cattab.is-active,.bh-chip.is-active,.bh-nav.is-active,.bh-iconbtn.is-active { border-color:var(--button-border); }
:is(.bh-btn,.bh-play,.bh-price,.bh-nav,.bh-iconbtn,.bh-cattab,.bh-chip,.bh-mode,.bh-region,.bh-select,.bh-skin-more,.bh-stepper button,.bh-field-action):active:not(:disabled) {
 transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.24),0 1px 0 rgba(0,0,0,.7);
}
:is(.bh-btn,.bh-play,.bh-price,.bh-nav,.bh-iconbtn,.bh-cattab,.bh-chip,.bh-mode,.bh-region,.bh-select,.bh-skin-more,.bh-stepper button,.bh-field-action):disabled {
 background-image:none; box-shadow:inset 0 -2px 0 rgba(0,0,0,.16); transform:none;
}

/* ---------- display ---------- */
.bh-bar { position: relative; display: block; height: 14px; background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.bh-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--pink-bright); border-radius: inherit; }
.bh-bar-yellow > i { background: var(--yellow); }
.bh-bar-sm { height: 12px; }
.bh-bar-thick { height: 32px; border-radius: var(--radius-sm); }
.bh-bar-thick > i { border-radius: 3px; }

.bh-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 19px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.bh-tag .bh-i { font-size: 20px; }
.bh-tag-yellow { background: var(--yellow); color: var(--on-yellow); }
.bh-tag-pink { background: var(--pink-bright); color: var(--ink); }
.bh-tag-legendary { background: var(--rarity-legendary); color: var(--on-yellow); letter-spacing: 0.02em; }
.bh-tag-mode { height: 40px; min-width: 56px; justify-content: center; background: var(--surface-0); border: var(--border-hair) solid var(--line); color: var(--ink); font-size: 22px; }
.bh-tag-mode.is-3v3 { color: var(--cyan); }
.bh-tag-slant { transform: skewX(-12deg); border-radius: 3px; }
.bh-tag-slant > * { transform: skewX(12deg); }
.bh-tag-season { height: 40px; padding: 0 var(--space-3); font-size: 30px; font-weight: 900; }
/* a clan's tag beside a player's name (B192, docs/CLAN.md A5): text only, no colour of its own; it takes the size of the
   line it sits in (a board row, a chat line, a friend's name). .bh-tag-clan-lg: the clan's own head in FRIENDS → CLAN */
.bh-tag-clan { display: inline-flex; align-items: center; height: 1.35em; padding: 0 0.4em; margin-left: 0.4em; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-2); font-size: max(12px, 0.72em); font-style: normal; font-weight: 800; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.1em; white-space: nowrap; }
.bh-tag-clan-lg { height: 56px; margin: 0; padding: 0 var(--space-4); font-size: 36px; font-weight: 900; color: var(--ink); border: var(--border-hair) solid var(--line-strong); }

.bh-reward { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 17px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bh-reward b { font-weight: 700; color: var(--ink); }
.bh-reward .bh-i { font-size: 22px; }
.bh-rewards { display: flex; align-items: center; gap: var(--space-8); }
.bh-xp { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-2); background: var(--surface-0); border-radius: 4px; font-size: 20px; font-weight: 900; color: var(--ink); }

.bh-avatar { display: block; flex: none; width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-sm); background: var(--surface-3) center / cover no-repeat; overflow: hidden; }
.bh-avatar-md { width: var(--avatar-md); height: var(--avatar-md); }
.bh-avatar-lg { width: 88px; height: 88px; border-radius: var(--radius-md); }

.bh-presence { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--ink-3); }
.bh-presence.is-on { background: var(--green); }
.bh-status { font-size: 20px; font-weight: 600; color: var(--ink-3); }
.bh-status.is-on { color: var(--green); }

.bh-ping { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-ping .bh-i { font-size: 24px; color: var(--green); }
.bh-ping.is-mid .bh-i { color: var(--yellow); }
.bh-ping.is-bad .bh-i { color: var(--red); }

/* ---------- inputs ---------- */
.bh-slider { -webkit-appearance: none; appearance: none; display: block; width: 350px; height: 12px; margin: 0; background: linear-gradient(to right, var(--yellow) var(--p, 50%), var(--surface-0) var(--p, 50%)); border: var(--border-hair) solid var(--line); border-radius: var(--radius-pill); cursor: pointer; }
.bh-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--ink); border: 0; }
.bh-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--ink); border: 0; }
.bh-slider::-moz-range-track { background: transparent; }

.bh-toggle { position: relative; display: inline-block; width: 64px; height: 32px; flex: none; cursor: pointer; }
.bh-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bh-toggle span { position: absolute; inset: 0; background: var(--surface-3); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-pill); pointer-events: none; }
.bh-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--ink); }
.bh-toggle input:checked + span { background: var(--yellow); border-color: var(--yellow); }
.bh-toggle input:checked + span::after { left: 35px; background: var(--on-yellow); }
.bh-toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.bh-stepper { display: inline-grid; grid-template-columns: 40px 1fr 40px; align-items: center; width: 350px; height: 36px; background: var(--surface-0); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-sm); font-size: 20px; font-weight: 600; text-align: center; }
.bh-stepper button { height: 100%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }

.bh-field { display: flex; align-items: stretch; height: 72px; background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.bh-field-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); font-size: 22px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.bh-field-body .bh-i { font-size: 28px; color: var(--ink-2); }
.bh-field-body b { color: var(--ink); font-weight: 700; }
.bh-field-action { width: 72px; display: inline-flex; align-items: center; justify-content: center; border-left: var(--border-hair) solid var(--line); background: var(--surface-1); font-size: 28px; }

/* ---------- home ---------- */
.bh-nametag { display: inline-flex; align-items: stretch; gap: var(--space-1); }
.bh-level { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 68px; padding-right: 14px; background: var(--surface-0); border-radius: var(--radius-sm); color: var(--yellow); font-size: 48px; font-weight: 900; line-height: 1; }
.bh-level .bh-i { position: absolute; right: 5px; bottom: 7px; font-size: 24px; }
.bh-nametag-body { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 var(--space-3); background: rgba(12, 16, 22, 0.72); border-radius: var(--radius-sm); }
.bh-nametag-name { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 32px; line-height: 1.05; font-weight: 800; }
.bh-nametag-name .bh-i { font-size: 22px; color: var(--yellow); }
.bh-nametag-status { font-size: 20px; font-weight: 600; color: var(--ink-2); }

.bh-party-slot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); width: 154px; height: 192px; background: rgba(12, 16, 22, 0.28); border: var(--border-strong) solid var(--ink-2); border-radius: var(--radius-sm); font-size: 20px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-party-slot .bh-i { font-size: 36px; }

.bh-skins { display: inline-flex; gap: var(--space-3); padding: var(--space-2); background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-skin { width: 104px; height: 116px; border-radius: var(--radius-sm); border: var(--border-strong) solid transparent; background: var(--surface-3) center / cover no-repeat; }
.bh-skin.is-active { border-color: var(--pink-bright); }
.bh-skin-more { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); width: 104px; height: 116px; background: var(--surface-3); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-sm); font-size: 20px; line-height: 1.05; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.bh-skin-more .bh-i { font-size: 30px; color: var(--ink-2); }

.bh-quests { width: 486px; }
.bh-quest { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-5); row-gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-quest + .bh-quest { margin-top: var(--space-3); }
.bh-quest-text { grid-column: 1 / -1; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.bh-quest-count { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- match: banner, timer, boards, feed, HUD ---------- */
.bh-banner { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.bh-banner-title { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-6); background: var(--surface-0); transform: skewX(-8deg); border-radius: var(--radius-sm); }
.bh-banner-title > span { transform: skewX(8deg); font-size: 56px; line-height: 1; font-weight: 900; font-style: italic; text-transform: uppercase; }
.bh-banner-sub { margin-top: -6px; padding: var(--space-1) var(--space-8); background: var(--yellow); color: var(--on-yellow); transform: skewX(-8deg); border-radius: var(--radius-sm); }
.bh-banner-sub > span { display: block; transform: skewX(8deg); font-size: 36px; line-height: 1.05; font-weight: 900; text-transform: uppercase; }
.bh-banner-tag { padding: 0 var(--space-3); background: var(--yellow); color: var(--on-yellow); border-radius: var(--radius-sm); }

.bh-timer { display: inline-flex; align-items: center; gap: var(--space-4); height: 96px; padding: 0 var(--space-6); background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-timer > .bh-i { font-size: 36px; color: var(--ink-2); }
.bh-timer-body { display: flex; flex-direction: column; align-items: center; }
.bh-timer-label { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-timer-time { font-size: 44px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-timer-compact { height: 80px; padding: 0 var(--space-6); border-left: 5px solid var(--magenta); }

.bh-board { width: 1190px; padding: var(--space-3) var(--space-4) var(--space-4); }
.bh-board-grid { display: grid; grid-template-columns: 64px 56px minmax(0, 1fr) 120px 150px 140px 150px 120px; align-items: center; column-gap: var(--space-4); }
.bh-board-head { height: 52px; padding: 0 var(--space-3); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-board-row { height: 54px; margin-top: 6px; padding: 0 var(--space-3); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-board-grid > :nth-child(1), .bh-board-grid > :nth-child(n+4) { text-align: center; }
.bh-board-grid > :nth-child(8) { justify-self: center; }
.bh-board-name { font-size: 26px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-board-lvl { font-size: 20px; font-weight: 600; color: var(--ink-2); }
.bh-board-row.is-self { background: var(--pink-tint); border: var(--border-select) solid var(--magenta); color: var(--magenta); }
.bh-board-row.is-self .bh-board-lvl { color: var(--magenta); }
.bh-board-row .bh-avatar { width: 48px; height: 48px; }

.bh-team { width: 1190px; border: var(--border-select) solid var(--team); border-radius: var(--radius-md); background: var(--surface-1); overflow: hidden; }
.bh-team-alpha { --team: var(--magenta); --team-tint: var(--magenta-tint); }
.bh-team-bravo { --team: var(--cyan); --team-tint: var(--cyan-tint); }
.bh-team-head { display: flex; align-items: center; gap: var(--space-6); height: 68px; padding-left: var(--space-5); background: var(--team-tint); border-bottom: var(--border-hair) solid var(--team); }
.bh-team-head > .bh-i { font-size: 44px; color: var(--team); }
.bh-team-name { flex: 1; font-size: 40px; font-weight: 800; text-transform: uppercase; }
.bh-team-bravo .bh-team-name { color: var(--cyan); }
.bh-team-label { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-team-score { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 100%; padding: 0 var(--space-4); background: var(--team); color: var(--on-yellow); font-size: 52px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bh-team-body { padding: var(--space-1) var(--space-4) var(--space-4); }
.bh-team .bh-board-row { height: 62px; }
.bh-team .bh-board-row.is-self { background: var(--surface-2); border: var(--border-select) solid var(--yellow); color: var(--ink); }
.bh-team .bh-board-row.is-self .bh-board-lvl { color: var(--ink-2); }
.bh-team .bh-board-row.is-self .bh-board-score { color: var(--yellow); }

.bh-feed { display: inline-flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-1); border-radius: var(--radius-md); font-size: 20px; font-weight: 700; }
.bh-feed-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); }
.bh-feed-line > :first-child { text-align: right; }
.bh-feed-line .bh-i { font-size: 34px; color: var(--ink); }
.bh-feed .is-self, .bh-feed .is-alpha { color: var(--magenta); }
.bh-feed .is-bravo { color: var(--cyan); }

.bh-minimap { position: relative; width: 196px; height: 196px; background: var(--surface-1) center / cover no-repeat; border: var(--border-strong) solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; }
.bh-minimap.is-round { border-radius: var(--radius-pill); }
.bh-minimap-name { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1) var(--space-2); background: var(--scrim); font-size: 17px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- social ---------- */
.bh-friend { display: grid; grid-template-columns: var(--avatar-md) 16px minmax(0, 190px) 1fr auto; align-items: center; column-gap: var(--space-5); height: 84px; padding: 0 var(--space-4) 0 var(--space-5); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); }
.bh-friend + .bh-friend { margin-top: var(--space-2); }
.bh-friend-name { font-size: 26px; line-height: 1.1; font-weight: 700; }
.bh-friend-level { font-size: 18px; font-weight: 600; color: var(--ink-2); }
.bh-friend-actions { display: inline-flex; gap: var(--space-4); }

.bh-invite { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); width: 586px; }
.bh-invite .bh-field { grid-column: 1 / -1; }

.bh-steps { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); width: 586px; }
.bh-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bh-step-tile { width: 90px; height: 90px; margin-bottom: var(--space-3); background: var(--surface-2) center / 80% no-repeat; border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-sm); }
.bh-step.is-current .bh-step-tile { border: var(--border-strong) solid var(--pink-bright); }
.bh-step-node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface-0); border: var(--border-strong) solid var(--line-strong); border-radius: var(--radius-pill); font-size: 19px; font-weight: 800; color: var(--ink-2); }
.bh-step-node .bh-i { font-size: 20px; }
.bh-step::before { content: ""; position: absolute; top: calc(90px + var(--space-3) + 15px); left: -50%; width: 100%; height: 6px; background: var(--line); }
.bh-step:first-child::before { display: none; }
.bh-step.is-done::before, .bh-step.is-current::before { background: var(--pink-bright); }
.bh-step.is-done .bh-step-node, .bh-step.is-current .bh-step-node { background: var(--pink-bright); border-color: var(--pink-bright); color: var(--ink); }
.bh-step.is-current .bh-step-node { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--pink-bright); }
.bh-step-label { margin-top: var(--space-2); font-size: 22px; line-height: 1.1; font-weight: 800; }
.bh-step-label small { display: block; font-size: 17px; font-weight: 600; color: var(--ink-2); }

.bh-goal { display: grid; grid-template-columns: 150px 1fr auto; column-gap: var(--space-5); align-items: center; width: 586px; padding: var(--space-3) var(--space-5) var(--space-4) var(--space-3); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-goal .bh-art { grid-row: 1 / span 3; width: 150px; height: 120px; border-radius: var(--radius-sm); }
.bh-goal-title { font-size: 20px; font-weight: 700; }
.bh-goal-sub { grid-column: 2 / -1; font-size: 20px; font-weight: 600; color: var(--ink-2); }
.bh-goal-count { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-goal .bh-bar { grid-column: 2 / -1; margin-top: var(--space-3); height: 18px; }

/* ---------- battle pass ---------- */
.bh-season { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "title title . buy" "meta meta . buy" "level bar count buy"; align-items: center; column-gap: var(--space-5); row-gap: var(--space-2); width: 1195px; }
.bh-season-title { grid-area: title; display: flex; align-items: center; gap: var(--space-5); }
.bh-season-meta { grid-area: meta; display: flex; align-items: center; gap: var(--space-5); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.bh-season-meta .bh-panel-meta { font-size: 20px; }
.bh-season .bh-lv { grid-area: level; }
.bh-season .bh-bar { grid-area: bar; }
.bh-season-count { grid-area: count; font-size: 20px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bh-season .bh-btn { grid-area: buy; align-self: end; }
.bh-lv { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-3); background: var(--surface-0); border-radius: var(--radius-sm); font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

.bh-track { display: grid; grid-template-columns: 118px 1fr; gap: var(--space-3) var(--space-4); width: 1195px; }
.bh-lane-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 22px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.bh-lane-label .bh-i { font-size: 44px; color: var(--ink-2); }
.bh-lane-label.is-premium { background: var(--premium); border-color: var(--premium); }
.bh-lane-label.is-premium .bh-i { color: var(--yellow); }
.bh-lane { display: grid; grid-template-columns: repeat(var(--n, 7), 120px); column-gap: 24px; row-gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.bh-lane.is-premium { background: var(--premium-tint); }
.bh-rtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); height: 120px; background: var(--surface-2) center / cover no-repeat; border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-size: 20px; font-weight: 800; }
.bh-rtile > .bh-i { font-size: 48px; }
.bh-lane.is-premium .bh-rtile { background-color: var(--surface-1); border-color: var(--premium-line); }
.bh-rtile.is-current { border: var(--border-strong) solid var(--yellow); }
.bh-lane.is-premium .bh-rtile.is-current { border-color: var(--yellow); }
.bh-rtile-badge { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); font-size: 16px; }
.bh-rtile.is-claimed .bh-rtile-badge { background: var(--green); color: var(--on-yellow); }
.bh-rtile.is-locked .bh-rtile-badge { top: 4px; right: 4px; background: none; color: var(--ink); font-size: 20px; }
.bh-nodes { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(var(--n, 7), 120px); column-gap: 24px; justify-items: center; }
.bh-nodes::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 6px; margin-top: -3px; background: linear-gradient(to right, var(--track, var(--pink-bright)) var(--p, 0%), var(--line) var(--p, 0%)); border-radius: var(--radius-pill); }
.bh-lane.is-premium .bh-nodes { --track: var(--yellow); }
.bh-node { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface-0); border: var(--border-strong) solid var(--line-strong); border-radius: var(--radius-pill); font-size: 19px; font-weight: 800; color: var(--ink-2); }
.bh-node .bh-i { font-size: 20px; }
.bh-node.is-done, .bh-node.is-reached { background: var(--pink-bright); border-color: var(--pink-bright); color: var(--ink); }
.bh-node.is-current, .bh-lane.is-premium .bh-node.is-reached { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }

.bh-showcase { position: relative; display: flex; flex-direction: column; width: 400px; height: 596px; background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.bh-showcase .bh-art { flex: 1; }
.bh-showcase > .bh-tag { position: absolute; top: var(--space-3); left: var(--space-3); height: 44px; padding: 0 var(--space-4); font-size: 22px; }
.bh-showcase-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.bh-showcase-name { font-size: 36px; line-height: 1.05; font-weight: 900; text-transform: uppercase; }
.bh-showcase-kind { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); font-size: 22px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.02em; }

.bh-challenge { display: grid; grid-template-columns: 1fr 150px auto 72px 40px; align-items: center; column-gap: var(--space-3); padding: var(--space-2) var(--space-5); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); }
.bh-challenge + .bh-challenge { margin-top: var(--space-1); }
.bh-challenge-text { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.bh-challenge .bh-bar { grid-column: 1; margin-top: var(--space-1); }
.bh-challenge-count { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-left: var(--space-3); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-challenge .bh-xp { grid-column: 3; grid-row: 1 / span 2; }
.bh-challenge-amount { grid-column: 4; grid-row: 1 / span 2; font-size: 22px; font-weight: 700; }
.bh-challenge > .bh-i { grid-column: 5; grid-row: 1 / span 2; font-size: 30px; }

/* ---------- settings ---------- */
.bh-setlist { display: flex; flex-direction: column; gap: 2px; }
.bh-setrow { display: flex; align-items: center; gap: var(--space-5); min-height: 44px; padding: 0 var(--space-5); background: var(--surface-2); border-radius: 4px; font-size: 22px; font-weight: 600; }
.bh-setrow-label { flex: 1; }
.bh-setrow-value { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- store ---------- */
.bh-featured { display: grid; grid-template-columns: 420px 1fr 300px; width: 1540px; height: 340px; border: var(--border-strong) solid var(--pink-bright); border-radius: var(--radius-lg); background: var(--surface-1) right center / cover no-repeat; overflow: hidden; }
.bh-featured-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.bh-featured-kicker { font-size: 34px; line-height: 1; font-weight: 900; text-transform: uppercase; }
.bh-featured-name { margin: var(--space-1) 0 0; font-size: 52px; line-height: 0.92; font-weight: 900; text-transform: uppercase; }
.bh-featured-name span { display: block; color: var(--magenta); }
.bh-featured-text { max-width: 330px; margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; }
.bh-featured-items { display: flex; gap: var(--space-3); margin-top: auto; }
.bh-featured-items .bh-art { width: 90px; height: 64px; border: var(--border-strong) solid var(--rarity, var(--line-strong)); border-radius: var(--radius-sm); }
.bh-featured-side { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-5); background: var(--surface-1); border-left: var(--border-hair) solid var(--line); }
.bh-featured-side h4 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); }
.bh-featured-side ul { margin: 0 0 auto; padding: 0; list-style: none; font-size: 20px; line-height: 1.45; font-weight: 600; }
.bh-featured-side li { display: flex; align-items: center; gap: var(--space-3); }
.bh-featured-side li::before { content: ""; width: 14px; height: 14px; background: var(--pink-bright); border-radius: 2px; }

.bh-rarity-common { --rarity: var(--rarity-common); }
.bh-rarity-rare { --rarity: var(--rarity-rare); }
.bh-rarity-epic { --rarity: var(--rarity-epic); }
.bh-rarity-legendary { --rarity: var(--rarity-legendary); }
.bh-rarity-word { color: var(--rarity); }

.bh-skincard { position: relative; display: flex; flex-direction: column; width: 290px; height: 168px; padding: var(--space-3) var(--space-3) var(--space-2); background: var(--surface-2) right bottom / auto 100% no-repeat; border: var(--border-strong) solid var(--rarity, var(--line-strong)); border-radius: var(--radius-lg); overflow: hidden; }
.bh-skincard-name { position: relative; font-size: 22px; line-height: 1.05; font-weight: 800; text-transform: uppercase; }
.bh-skincard-kind { position: relative; font-size: 17px; font-weight: 600; color: var(--ink-2); }
.bh-skincard .bh-price { position: relative; margin-top: auto; }

.bh-pack { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-4); width: 320px; height: 96px; padding: var(--space-4) var(--space-4) 0; background: var(--surface-2) left 16px bottom -10px / 150px auto no-repeat; border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.bh-pack-amount { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-pack-amount .bh-i { font-size: 26px; }
.bh-pack .bh-price { justify-self: end; min-width: 144px; }
.bh-pack > .bh-tag { position: absolute; top: 0; right: 0; height: 28px; border-radius: 0 0 0 var(--radius-sm); }

/* ---------- match history ---------- */
.bh-match { display: grid; grid-template-columns: 142px 56px 170px 150px 160px 1fr 32px; align-items: center; column-gap: var(--space-4); height: 84px; padding: 0 var(--space-5) 0 var(--space-2); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); }
.bh-match + .bh-match { margin-top: var(--space-2); }
.bh-match.is-selected { border: var(--border-select) solid var(--yellow); }
.bh-match .bh-art { width: 142px; height: 72px; border-radius: var(--radius-sm); }
/* B354-r2 (Design System rule 14: small labels in capitals): the match row's mode, map and when, and the detail's line */
.bh-match-mode { font-size: 20px; font-weight: 700; text-transform: uppercase; }
.bh-match-map { font-size: 17px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; }
.bh-result { display: flex; flex-direction: column; align-items: center; }
.bh-result-word { font-size: 26px; line-height: 1.05; font-weight: 900; text-transform: uppercase; color: var(--yellow); }
.bh-result.is-defeat .bh-result-word { color: var(--red); }
.bh-result-score { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-kda { display: flex; flex-direction: column; align-items: center; }
.bh-kda-value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-kda-label { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-2); }
.bh-match-when { font-size: 20px; font-weight: 600; color: var(--ink-2); text-align: center; text-transform: uppercase; }
.bh-match > .bh-i { font-size: 26px; }

.bh-detail { width: 586px; padding: var(--space-3); background: var(--surface-1); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); }
.bh-detail-map { position: relative; height: 222px; border-radius: var(--radius-md); overflow: hidden; }
.bh-detail-map .bh-art { position: absolute; inset: 0; }
.bh-detail-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; padding: var(--space-2) var(--space-4); background: var(--scrim); }
.bh-detail-cap b { grid-column: 1 / -1; font-size: 30px; font-weight: 800; text-transform: uppercase; }
.bh-detail-cap span { font-size: 20px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; }
.bh-detail-result { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-4) var(--space-2); font-size: 48px; line-height: 1; font-weight: 900; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.bh-detail-result.is-victory > :first-child { color: var(--yellow); }
.bh-detail-result.is-defeat > :first-child { color: var(--red); }
.bh-detail-result em { font-style: normal; color: var(--ink-2); }
.bh-miniteam { margin-top: var(--space-3); border-left: 5px solid var(--team); border-radius: var(--radius-sm); background: var(--surface-1); }
.bh-miniteam.bh-team-alpha { --team: var(--magenta); }
.bh-miniteam.bh-team-bravo { --team: var(--cyan); }
/* B413 (B409 row 8): by side, as in the HUD and the match's end, where the match says which side was mine (myTeam:
   profileui.js board, screens.js detail): mine --cyan, theirs --enemy-ui (--magenta unless a colour-blind setting moves
   it); a match without it keeps ALPHA / BRAVO's colours above */
.bh-miniteam.is-mine { --team: var(--cyan); }
.bh-miniteam.is-theirs { --team: var(--enemy-ui, var(--magenta)); }
.bh-miniteam-head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-1) var(--space-3); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--team); }
.bh-miniteam-head b { font-size: 36px; font-weight: 900; }
.bh-mini-grid { display: grid; grid-template-columns: 40px 40px minmax(0, 1fr) 50px 50px 50px 76px; align-items: center; column-gap: var(--space-3); padding: 0 var(--space-3); }
.bh-mini-grid > :nth-child(1), .bh-mini-grid > :nth-child(n+4) { text-align: center; }
.bh-mini-head { height: 34px; font-size: 17px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-mini-row { height: 46px; margin: 0 var(--space-2) var(--space-1); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-mini-row.is-self { border: var(--border-select) solid var(--yellow); }
.bh-mini-row.is-self > :last-child { color: var(--yellow); }
.bh-mini-row .bh-avatar { width: 36px; height: 36px; border-radius: 4px; }

/* ---------- icons: .bh-i-<name> (masks take currentColor; coin and gem keep their colours) ---------- */
.bh-i-info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 1.8a10.2 10.2 0 1 1 0 20.4 10.2 10.2 0 0 1 0-20.4Zm0 2.4a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6Z'/%3E%3Ccircle fill='%23ffffff' cx='12' cy='7.6' r='1.5'/%3E%3Crect fill='%23ffffff' x='10.7' y='10.2' width='2.6' height='7.4' rx='.6'/%3E%3C/svg%3E")}
.bh-i-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M12 2.8 1.8 11.6h3.1V21h5.6v-6h3v6h5.6v-9.4h3.1Z'/%3E%3C/svg%3E")}
.bh-i-crown{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M2.5 6.5 7.4 11 12 3.8 16.6 11l4.9-4.5-1.7 11.2H4.2Z'/%3E%3Crect fill='%23ffffff' x='4.2' y='19' width='15.6' height='2.2' rx='.6'/%3E%3C/svg%3E")}
.bh-i-store{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M1.5 2.5h3.9l.9 2.4H22l-2.6 9.4a1.6 1.6 0 0 1-1.5 1.2H8.6a1.6 1.6 0 0 1-1.5-1.1L3.8 4.8H1.5Z'/%3E%3Ccircle fill='%23ffffff' cx='9.2' cy='19.6' r='1.9'/%3E%3Ccircle fill='%23ffffff' cx='17.4' cy='19.6' r='1.9'/%3E%3C/svg%3E")}
.bh-i-quests{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M9 3.2a3 3 0 0 1 6 0h2.2A1.8 1.8 0 0 1 19 5v15.2a1.8 1.8 0 0 1-1.8 1.8H6.8A1.8 1.8 0 0 1 5 20.2V5a1.8 1.8 0 0 1 1.8-1.8Zm-.8 6.4v1.9h7.6V9.6Zm0 3.7V15h7.6v-1.7Zm0 3.6v1.8h5v-1.8Z'/%3E%3C/svg%3E")}
.bh-i-friends{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle fill='%23ffffff' cx='8.6' cy='7.6' r='3.4'/%3E%3Cpath fill='%23ffffff' d='M2 20.4c0-3.8 2.9-6.6 6.6-6.6s6.6 2.8 6.6 6.6v.8H2Z'/%3E%3Ccircle fill='%23ffffff' cx='16.8' cy='8.6' r='2.8'/%3E%3Cpath fill='%23ffffff' d='M16.2 13.8c.3 0 .6-.1.9-.1 2.8 0 4.9 2.3 4.9 5.2v.9h-4.9v-.4c0-2.2-.4-4-.9-5.6Z'/%3E%3C/svg%3E")}
.bh-i-settings{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12.00 4.40 L13.99 2.00 L15.90 2.58 L16.22 5.68 L17.37 6.63 L20.48 6.33 L21.42 8.10 L19.45 10.52 L19.60 12.00 L22.00 13.99 L21.42 15.90 L18.32 16.22 L17.37 17.37 L17.67 20.48 L15.90 21.42 L13.48 19.45 L12.00 19.60 L10.01 22.00 L8.10 21.42 L7.78 18.32 L6.63 17.37 L3.52 17.67 L2.58 15.90 L4.55 13.48 L4.40 12.00 L2.00 10.01 L2.58 8.10 L5.68 7.78 L6.63 6.63 L6.33 3.52 L8.10 2.58 L10.52 4.55Z M15.3 12 a3.3 3.3 0 1 0 -6.6 0 a3.3 3.3 0 1 0 6.6 0Z'/%3E%3C/svg%3E")}
.bh-i-chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M4 3.5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9.4L4.6 21v-3.5H4a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E")}
.bh-i-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle fill='%23ffffff' cx='12' cy='7.6' r='4.4'/%3E%3Cpath fill='%23ffffff' d='M3.4 20.6c0-4.2 3.8-7.3 8.6-7.3s8.6 3.1 8.6 7.3v.9H3.4Z'/%3E%3C/svg%3E")}
.bh-i-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M10.4 3.5h3.2v6.9h6.9v3.2h-6.9v6.9h-3.2v-6.9H3.5v-3.2h6.9Z'/%3E%3C/svg%3E")}
.bh-i-chevron-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M4.2 8.6 6.6 6.2l5.4 5.4 5.4-5.4 2.4 2.4-7.8 7.8Z'/%3E%3C/svg%3E")}
.bh-i-chevron-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M15.4 4.2 17.8 6.6l-5.4 5.4 5.4 5.4-2.4 2.4L7.6 12Z'/%3E%3C/svg%3E")}
.bh-i-chevron-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M8.6 4.2 6.2 6.6l5.4 5.4-5.4 5.4 2.4 2.4L16.4 12Z'/%3E%3C/svg%3E")}
.bh-i-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M6.5 3.8v16.4a.9.9 0 0 0 1.4.8l12.6-8.2a.9.9 0 0 0 0-1.6L7.9 3a.9.9 0 0 0-1.4.8Z'/%3E%3C/svg%3E")}
.bh-i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M9.4 15.6 4.8 11 2.6 13.2l6.8 6.8L21.4 8l-2.2-2.2Z'/%3E%3C/svg%3E")}
.bh-i-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M7 10V7.6a5 5 0 0 1 10 0V10h.6A1.9 1.9 0 0 1 19.5 12v8a1.9 1.9 0 0 1-1.9 1.9H6.4A1.9 1.9 0 0 1 4.5 20v-8A1.9 1.9 0 0 1 6.4 10Zm2.6 0h4.8V7.6a2.4 2.4 0 0 0-4.8 0Zm1.2 4v4h2.4v-4Z'/%3E%3C/svg%3E")}
.bh-i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Zm-1.2 2h2.4v5l3.6 2.2-1.2 2-4.8-2.9Z'/%3E%3C/svg%3E")}
.bh-i-reset{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' d='M19.4 13.2A7.6 7.6 0 1 1 16.7 6'/%3E%3Cpath fill='%23ffffff' d='M14.2 2.6 21 3.4l-2.2 6.4Z'/%3E%3C/svg%3E")}
.bh-i-pencil{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M3.5 16.9V20.5h3.6L17.6 10 14 6.4Z'/%3E%3Cpath fill='%23ffffff' d='m15.3 5.1 1.8-1.8a1.3 1.3 0 0 1 1.8 0l1.8 1.8a1.3 1.3 0 0 1 0 1.8l-1.8 1.8Z'/%3E%3C/svg%3E")}
.bh-i-more{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle fill='%23ffffff' cx='5' cy='12' r='2.3'/%3E%3Ccircle fill='%23ffffff' cx='12' cy='12' r='2.3'/%3E%3Ccircle fill='%23ffffff' cx='19' cy='12' r='2.3'/%3E%3C/svg%3E")}
.bh-i-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' d='M10.2 13.8a4.2 4.2 0 0 0 5.9 0l3.1-3.1a4.2 4.2 0 0 0-5.9-5.9l-1.2 1.2M13.8 10.2a4.2 4.2 0 0 0-5.9 0l-3.1 3.1a4.2 4.2 0 0 0 5.9 5.9l1.2-1.2'/%3E%3C/svg%3E")}
.bh-i-copy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M8 2.5h11.2A2.3 2.3 0 0 1 21.5 4.8V16h-2.6V5.1H8Z'/%3E%3Crect fill='%23ffffff' x='2.5' y='7' width='14' height='14.5' rx='2.2'/%3E%3C/svg%3E")}
.bh-i-share{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' d='M17.5 5.5 6.5 12l11 6.5'/%3E%3Ccircle fill='%23ffffff' cx='17.8' cy='5.2' r='3.2'/%3E%3Ccircle fill='%23ffffff' cx='6.2' cy='12' r='3.2'/%3E%3Ccircle fill='%23ffffff' cx='17.8' cy='18.8' r='3.2'/%3E%3C/svg%3E")}
.bh-i-signal{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Crect fill='%23ffffff' x='2.5' y='15' width='3.6' height='6' rx='.8'/%3E%3Crect fill='%23ffffff' x='7.7' y='11' width='3.6' height='10' rx='.8'/%3E%3Crect fill='%23ffffff' x='12.9' y='7' width='3.6' height='14' rx='.8'/%3E%3Crect fill='%23ffffff' x='18.1' y='3' width='3.6' height='18' rx='.8'/%3E%3C/svg%3E")}
.bh-i-team{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle fill='%23ffffff' cx='12' cy='6.6' r='3.2'/%3E%3Ccircle fill='%23ffffff' cx='5' cy='8.4' r='2.5'/%3E%3Ccircle fill='%23ffffff' cx='19' cy='8.4' r='2.5'/%3E%3Cpath fill='%23ffffff' d='M6.6 20.5v-2.2c0-3.2 2.4-5.6 5.4-5.6s5.4 2.4 5.4 5.6v2.2Z'/%3E%3Cpath fill='%23ffffff' d='M1 20.5v-1.6c0-2.6 1.7-4.5 4-4.5.6 0 1.1.1 1.6.3a7.6 7.6 0 0 0-1.5 4.3v1.5ZM23 20.5v-1.6c0-2.6-1.7-4.5-4-4.5-.6 0-1.1.1-1.6.3a7.6 7.6 0 0 1 1.5 4.3v1.5Z'/%3E%3C/svg%3E")}
.bh-i-gamepad{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M7 6h10a5 5 0 0 1 4.9 4l.9 5.4A2.9 2.9 0 0 1 17.8 18l-2.3-2.4H8.5L6.2 18a2.9 2.9 0 0 1-5-2.6L2.1 10A5 5 0 0 1 7 6Zm-.7 3.3v1.8H4.5v1.8h1.8v1.8h1.8v-1.8h1.8v-1.8H8.1V9.3Zm10.2.4a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Zm-2.4 2.4a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E")}
.bh-i-monitor{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M3.8 3.5h16.4a1.8 1.8 0 0 1 1.8 1.8v10.4a1.8 1.8 0 0 1-1.8 1.8H3.8A1.8 1.8 0 0 1 2 15.7V5.3a1.8 1.8 0 0 1 1.8-1.8Zm.6 2.4V15h15.2V5.9Z'/%3E%3Cpath fill='%23ffffff' d='M9.6 17.5h4.8l.8 2.6h2.3v1.9H6.5v-1.9h2.3Z'/%3E%3C/svg%3E")}
.bh-i-speaker{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M3 9h4l5.4-4.5v15L7 15H3Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M15.6 8.6a4.8 4.8 0 0 1 0 6.8M18.4 5.8a8.8 8.8 0 0 1 0 12.4'/%3E%3C/svg%3E")}
.bh-i-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M12.00 2.40 L14.47 9.00 L21.51 9.31 L15.99 13.70 L17.88 20.49 L12.00 16.60 L6.12 20.49 L8.01 13.70 L2.49 9.31 L9.53 9.00Z'/%3E%3C/svg%3E")}
.bh-i-team-alpha{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M12 3.2 22.2 20.8H1.8Z'/%3E%3C/svg%3E")}
.bh-i-team-bravo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 1.8 22.2 12 12 22.2 1.8 12Zm0 4.4L6.2 12l5.8 5.8 5.8-5.8Z'/%3E%3C/svg%3E")}
.bh-i-grenade{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle fill='%23ffffff' cx='10.5' cy='14.5' r='7'/%3E%3Cpath fill='%23ffffff' d='M8.6 5.6h4.2v2.6H8.6Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M12.8 6.4c2.6-2.9 5.8-2.4 7.2-.3'/%3E%3C/svg%3E")}
.bh-i-clipboard-list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M9 3.2a3 3 0 0 1 6 0h2.2A1.8 1.8 0 0 1 19 5v15.2a1.8 1.8 0 0 1-1.8 1.8H6.8A1.8 1.8 0 0 1 5 20.2V5a1.8 1.8 0 0 1 1.8-1.8Zm-.8 6.4v1.9h7.6V9.6Zm0 3.7V15h7.6v-1.7Zm0 3.6v1.8h5v-1.8Z'/%3E%3C/svg%3E")}
.bh-i-caret-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M4.5 8h15L12 16.8Z'/%3E%3C/svg%3E")}
.bh-i-rifle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M1 9.2h4.6l.6-1h9.6V9h7.2v1.8h-7.2v1.4h-2.2l1 4.8h-2.6l-1.2-4.6h-.8l-.9 3.6H6.6l.8-3.6H5.6l-.4 3.3H1.6Z'/%3E%3Crect fill='%23ffffff' x='9' y='6.4' width='4.4' height='1.4' rx='.4'/%3E%3C/svg%3E")}
.bh-i-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M12 2 20 5v6c0 5.5-3.4 9.4-8 11-4.6-1.6-8-5.5-8-11V5Z'/%3E%3C/svg%3E")}
.bh-i-crosshair{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' d='M12 4.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Z'/%3E%3Cpath fill='%23ffffff' d='M10.8 1h2.4v6h-2.4Zm0 16h2.4v6h-2.4ZM1 10.8h6v2.4H1Zm16 0h6v2.4h-6Z'/%3E%3Ccircle fill='%23ffffff' cx='12' cy='12' r='1.6'/%3E%3C/svg%3E")}
.bh-i-coin{--i:url("assets/rewards/icon-coin.webp")}
.bh-i-gem{--i:url("assets/rewards/icon-gem.webp")}

/* ================= profile (2026-10-11, the owner's PROFILE reference) ================= */
/* a modal over the home: crown + title, a close button; its body is the page's */
.bh-modal { display: flex; flex-direction: column; background: var(--surface-1); border: var(--border-strong) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); overflow: hidden; }
.bh-modal-head { display: flex; align-items: center; gap: var(--space-4); height: 88px; padding: 0 var(--space-3) 0 var(--space-6); background: var(--surface-0); border-bottom: var(--border-hair) solid var(--line); }
.bh-modal-head > .bh-i { font-size: 48px; color: var(--yellow); }
.bh-modal-title { flex: 1; margin: 0; font-size: 52px; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
.bh-close { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--pink-bright); border-radius: var(--radius-sm); font-size: 40px; color: var(--ink); transition: filter 120ms, transform 120ms; }
.bh-close:hover { filter: brightness(0.94); }
.bh-close:active { transform: translateY(1px); }
/* a stat: icon, label, value; .bh-stat-center stacks them (RECENT PERFORMANCE) */
.bh-stats { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--space-3); }
.bh-stat { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center; min-width: 0; height: 100px; padding: 0 var(--space-4); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-stat > .bh-i { grid-row: 1 / span 2; font-size: 48px; color: var(--stat, var(--ink)); }
.bh-stat-label { align-self: end; font-size: 17px; line-height: 1.1; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-stat-value { align-self: start; font-size: 40px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-stat-value small { font-size: 24px; color: var(--ink-2); }
.bh-stat-center { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; row-gap: var(--space-1); height: 132px; padding: var(--space-3); text-align: center; }
.bh-stat-center > .bh-i { grid-row: auto; font-size: 40px; }
.bh-stat-center .bh-stat-label { align-self: auto; }
.bh-stat.is-empty .bh-stat-value { color: var(--ink-3); }
/* stat colours (the reference's): kills pink, headshots magenta, assists and accuracy cyan, wins/MVP/score yellow */
.bh-stat-pink { --stat: var(--pink-bright); } .bh-stat-cyan { --stat: var(--cyan); } .bh-stat-yellow { --stat: var(--yellow); } .bh-stat-gem { --stat: var(--gem); } .bh-stat-magenta { --stat: var(--magenta); }
/* a champion card: portrait, name, role, one line */
.bh-champcard { display: grid; grid-template-columns: 128px 1fr; column-gap: var(--space-5); align-items: center; }
.bh-champcard .bh-art { width: 128px; height: 136px; border: var(--border-select) solid var(--yellow); border-radius: var(--radius-sm); background-color: var(--surface-3); }
.bh-champcard-name { font-size: 40px; line-height: 1; font-weight: 800; }
.bh-champcard-role { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-champcard-role .bh-i { font-size: 22px; color: var(--pink-bright); }
.bh-champcard-text { font-size: 19px; line-height: 1.2; font-weight: 600; color: var(--ink-2); }
/* a champion's line in the CHAMPIONS tab */
.bh-champrow { display: grid; grid-template-columns: 88px 200px repeat(6, 1fr); align-items: center; column-gap: var(--space-4); height: 104px; padding: 0 var(--space-5) 0 var(--space-2); background: var(--surface-2); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.bh-champrow + .bh-champrow { margin-top: var(--space-2); }
.bh-champrow .bh-art { width: 88px; height: 88px; border-radius: var(--radius-sm); background-color: var(--surface-3); }
.bh-champrow.is-fav { border-color: var(--yellow); }
.bh-champrow.is-unplayed { color: var(--ink-3); }
.bh-champrow-name { font-size: 30px; line-height: 1; font-weight: 800; }
.bh-champrow-role { font-size: 17px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.bh-champrow-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 30px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-champrow-cell small { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
/* an empty or unreachable state inside a panel */
.bh-note { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); text-align: center; color: var(--ink-2); font-size: 22px; font-weight: 600; }
.bh-note b { font-size: 30px; font-weight: 800; text-transform: uppercase; color: var(--ink); }

/* ================= the in-match HUD (2026-10-11, the owner's FFA reference) ================= */
/* The match HUD in code, at the 1920 x 1080 reference (the HUD scales each cluster by --bh-k from its
   own corner). Plates are near-opaque surface-0 with a line-strong rim: they read over sky and wall
   alike without a blur. Nothing here animates per frame: the HUD writes text and classes only when a
   value changes. Colours: YOU cyan, the enemy / leader magenta, abilities magenta, the gun in hand cyan. */
.bh-hud-plate { background: rgba(12, 16, 22, 0.9); border: var(--border-strong) solid var(--line-strong); border-radius: var(--radius-md); }
/* top centre: YOU | clock | ENEMY (a team mode: the teams; free for all: me and the leader) */
.bh-hud-score { display: grid; grid-template-columns: 136px 2px minmax(220px, auto) 2px 136px; align-items: center; min-height: 92px; padding: var(--space-2); }
.bh-hud-score > i { width: 2px; height: 56px; background: var(--ink-3); }
.bh-hud-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bh-hud-side-label { font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-hud-side-value { font-size: 46px; line-height: 0.95; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--cyan); }
.bh-hud-side.is-foe .bh-hud-side-value { color: var(--magenta); }
.bh-hud-clock { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 var(--space-5); }
.bh-hud-clock-time { font-size: 54px; line-height: 0.95; font-weight: 900; font-variant-numeric: tabular-nums; }
.bh-hud-clock-sub { font-size: 18px; line-height: 1.1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.bh-hud-clock-sub b { color: var(--cyan); font-weight: 800; }
.bh-hud-clock-sub em { font-style: normal; color: var(--magenta); }
.bh-hud-clock-label { font-size: 18px; line-height: 1; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.bh-hud-score.is-freeze { border-color: var(--yellow); }
.bh-hud-score.is-freeze .bh-hud-clock-time { color: var(--yellow); }
/* the round dots under a side (elimination, control): won rounds lit */
.bh-hud-rounds { display: flex; gap: 4px; height: 8px; }
.bh-hud-rounds i { width: 14px; height: 6px; border-radius: 2px; background: var(--line-strong); }
.bh-hud-rounds i.is-won { background: currentColor; }
/* CONTROL's header (B366, src/hud.js cpHeader, Overwatch's control point as the model): my percentage big on the left with
   its bar and my rounds as dots, theirs on the right; in the middle the clock, the point's icon (the holder's colour) inside
   the capture ring (the capturer's colour; yellow while contested), the state under it. Mine --cyan, theirs --enemy-ui (--magenta unless a colour-blind setting moves it),
   neutral --ink-2, the lock, contested and overtime --yellow */
.bh-hud-score.is-cp { grid-template-columns: 150px 2px minmax(150px, auto) 2px 150px; }
.bh-hud-score.is-cp .bh-hud-side-value { font-size: 40px; }
.bh-hud-cpbar { width: 100px; height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.bh-hud-cpbar > i { display: block; height: 100%; width: 0; background: var(--cyan); }
.bh-hud-side.is-foe .bh-hud-cpbar > i { background: var(--enemy-ui, var(--magenta)); }
.bh-hud-cpc { gap: 3px; padding: 0 var(--space-3); }
.bh-hud-score.is-cp .bh-hud-clock-time { font-size: 30px; }
.bh-hud-cpring { position: relative; display: grid; place-items: center; width: 52px; height: 52px; --own: var(--ink-2); --take: var(--ink-2); }
.bh-hud-cpring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bh-hud-cpring circle { fill: none; stroke-width: 5; }
.bh-hud-cpring .bg { stroke: var(--line); }
.bh-hud-cpring .fg { stroke: var(--take); stroke-dasharray: 0 100; stroke-linecap: butt; }
.bh-hud-cpring > i { width: 20px; height: 20px; background: var(--own); border: 3px solid var(--surface-0); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 0 2px var(--own); }
.bh-hud-cpring.own-you { --own: var(--cyan); } .bh-hud-cpring.own-foe { --own: var(--enemy-ui, var(--magenta)); }
.bh-hud-cpring.take-you { --take: var(--cyan); } .bh-hud-cpring.take-foe { --take: var(--enemy-ui, var(--magenta)); } .bh-hud-cpring.take-contested { --take: var(--yellow); }
.bh-hud-cpring.take-contested { --cp: var(--yellow); }
.bh-hud-cpring.take-contested > i { animation: bh-cp-pulse 0.8s ease-in-out infinite alternate; }
.bh-hud-cpring.is-locked > i { opacity: 0.45; }
.bh-hud-cpstate { font-size: 17px; line-height: 1; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); }
.bh-hud-cpstate.is-you { color: var(--cyan); } .bh-hud-cpstate.is-foe { color: var(--enemy-ui, var(--magenta)); } .bh-hud-cpstate.is-key { color: var(--yellow); }
.bh-hud-score.is-ot { border-color: var(--yellow); }
.bh-hud-score.is-ot .bh-hud-clock-sub { color: var(--yellow); }
/* where the control point is (B366, src/hud_point.js): a diamond over the point (or on the screen's edge with an arrow
   towards it), the state under it, the metres; see-through over the crosshair. Moved by its transform only. Neutral --ink-2,
   mine --cyan, theirs --magenta, contested and the lock --yellow */
#hud .bh-hud-cpmark { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 6; will-change: transform; --cp: var(--ink-2); }
#hud .bh-hud-cpmark.is-you { --cp: var(--cyan); } #hud .bh-hud-cpmark.is-foe { --cp: var(--enemy-ui, var(--magenta)); } #hud .bh-hud-cpmark.is-contested { --cp: var(--yellow); }
#hud .bh-hud-cpmark-box { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -24px) scale(var(--hk, 1));
 transform-origin: 50% 24px; font-family: var(--font-ui); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); transition: opacity 0.15s; }
#hud .bh-hud-cpmark-icon { position: relative; width: 30px; height: 30px; margin: 9px 0 6px; background: var(--cp); border: 3px solid var(--surface-0); border-radius: 4px; transform: rotate(45deg);
 box-shadow: 0 0 0 2px var(--cp); }
#hud .bh-hud-cpmark-icon > span { display: none; }
#hud .bh-hud-cpmark-icon::after { content: ""; position: absolute; inset: 7px; background: var(--surface-0); border-radius: 2px; }
#hud .bh-hud-cpmark-state { font-size: 18px; line-height: 1; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--cp); }
#hud .bh-hud-cpmark-m { font-size: 16px; line-height: 1; font-weight: 800; color: var(--ink); }
#hud .bh-hud-cpmark-arrow { display: none; position: absolute; left: 50%; top: 24px; width: 0; height: 0; }
#hud .bh-hud-cpmark-arrow::before { content: ""; position: absolute; left: 30px; top: -9px; border: 9px solid transparent; border-left: 13px solid var(--cp); border-right: 0; }
#hud .bh-hud-cpmark.is-edge .bh-hud-cpmark-arrow { display: block; }
#hud .bh-hud-cpmark.is-aim .bh-hud-cpmark-box { opacity: 0.35; }
#hud .bh-hud-cpmark.is-contested .bh-hud-cpmark-icon { animation: bh-cp-pulse 0.8s ease-in-out infinite alternate; }
@keyframes bh-cp-pulse { from { box-shadow: 0 0 0 2px var(--cp); } to { box-shadow: 0 0 0 6px var(--cp); } }
/* the round's start: «CAPTURE THE POINT», an arrow to it, how far (under the score header) */
#hud .bh-hud-cpgo { position: absolute; left: 50%; top: calc(30px + 130px * var(--hk, 1) * 0.8); transform: translateX(-50%) scale(calc(var(--hk, 1) * 0.8)); transform-origin: 50% 0;
 display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-4); border-color: var(--yellow); pointer-events: none; z-index: 6; --cp: var(--ink-2); }
#hud .bh-hud-cpgo.is-you { --cp: var(--cyan); } #hud .bh-hud-cpgo.is-foe { --cp: var(--magenta); } #hud .bh-hud-cpgo.is-contested { --cp: var(--yellow); }
#hud .bh-hud-cpgo > b { font-size: 24px; line-height: 1; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; }
#hud .bh-hud-cpgo-m { font-size: 20px; line-height: 1; font-weight: 800; color: var(--ink); }
#hud .bh-hud-cpgo-arrow { position: relative; width: 26px; height: 26px; }
#hud .bh-hud-cpgo-arrow::before { content: ""; position: absolute; left: 3px; top: 0; border: 10px solid transparent; border-bottom: 22px solid var(--cp); border-top: 0; }
/* top right: the feed, one plate a line; a keyword in colour, the rest white */
.bh-hud-feed { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bh-hud-feed-line { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); font-size: 21px; line-height: 1; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.bh-hud-feed-line .is-you, .bh-hud-feed-line .is-ally { color: var(--cyan); }
.bh-hud-feed-line .is-foe { color: var(--magenta); }
.bh-hud-feed-line .is-key { color: var(--yellow); }
.bh-hud-feed-line.is-mine { border-color: var(--yellow); }
.bh-hud-feed-line.is-mydeath { border-color: var(--red); }
.bh-hud-feed-line img, .bh-hud-feed-line svg { height: 22px; width: auto; }
/* bottom left: portrait, health number, the health in ten segments */
.bh-hud-health { display: flex; align-items: center; gap: var(--space-5); height: 116px; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); }
.bh-hud-health .bh-avatar { width: 100px; height: 100px; border: var(--border-select) solid var(--magenta); border-radius: var(--radius-sm); }
.bh-hud-health-body { display: flex; flex-direction: column; gap: var(--space-2); }
.bh-hud-hp { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 46px; line-height: 0.95; font-weight: 900; font-variant-numeric: tabular-nums; }
.bh-hud-hp .bh-i { font-size: 36px; }
.bh-hud-segs { display: flex; gap: 6px; }
.bh-hud-segs i { width: 34px; height: 30px; border-radius: 4px; background: var(--ink); }
.bh-hud-segs i.is-off { background: rgba(255, 255, 255, 0.14); }
.bh-hud-health.is-low .bh-hud-segs i:not(.is-off), .bh-hud-health.is-low .bh-hud-hp { color: var(--red); background-color: transparent; }
.bh-hud-health.is-low .bh-hud-segs i:not(.is-off) { background: var(--red); }
.bh-hud-segs.is-armor i { height: 12px; background: var(--cyan); }
/* bottom centre: the abilities, a tile each with its key under it */
.bh-hud-abilities { display: flex; gap: var(--space-6); padding: var(--space-3) var(--space-5) 0; height: 112px; }
.bh-hud-ability { position: relative; display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; background: var(--magenta-tint); border: var(--border-select) solid var(--magenta); border-radius: var(--radius-sm); color: var(--magenta); }
.bh-hud-ability svg { width: 52px; height: 52px; }
.bh-hud-key { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border: var(--border-strong) solid var(--line-strong); border-radius: 4px; background: var(--ink-2); color: var(--on-yellow); font-size: 20px; font-weight: 900; }
.bh-hud-ability-count { position: absolute; top: 2px; right: 4px; font-size: 17px; font-weight: 900; color: var(--ink); }
.bh-hud-ability.is-cooling { border-color: var(--line-strong); background: var(--surface-0); color: var(--ink-3); }
.bh-hud-ability.is-cooling .bh-hud-ability-count { top: auto; right: auto; font-size: 30px; color: var(--ink); }
/* bottom right: the weapon slots; the one in hand framed cyan */
.bh-hud-weapons { display: flex; gap: var(--space-2); padding: var(--space-2); }
.bh-hud-weapon { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; width: 260px; height: 124px; padding: var(--space-2) var(--space-3); border: var(--border-select) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); }
/* the gun in hand: a white rim (owner 11/11: «il bordo dell'arma a destra voglio che diventi bianco invece dell'azzurro»); the tint under it stays */
.bh-hud-weapon.is-active { border-color: var(--ink); background: var(--cyan-tint); }
.bh-hud-slot { display: inline-flex; align-items: center; justify-content: center; align-self: start; width: 30px; height: 32px; border: var(--border-strong) solid var(--ink-2); border-radius: 3px; font-size: 20px; font-weight: 900; }
.bh-hud-weapon-icon { justify-self: center; align-self: center; width: 150px; height: 56px; color: var(--ink); }
.bh-hud-weapon-icon svg { width: 100%; height: 100%; }
.bh-hud-weapon-name { align-self: end; font-size: 20px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-hud-mag { align-self: end; justify-self: end; font-size: 34px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.bh-hud-mag em { font-style: normal; color: var(--cyan); }
.bh-hud-weapon:not(.is-active) .bh-hud-mag { font-size: 26px; color: var(--ink-2); }
.bh-hud-weapon:not(.is-active) .bh-hud-weapon-name { color: var(--ink-2); }
.bh-hud-weapon.is-empty .bh-hud-mag { color: var(--red); }

/* icons (2026-10-11) */
.bh-i-swords{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M3 3h4l9 9-4 4-9-9z'/%3E%3Cpath fill='%23ffffff' d='M21 3h-4l-9 9 4 4 9-9z'/%3E%3Cpath fill='%23ffffff' d='M18 11.5 19.5 13 13 19.5 11.5 18z'/%3E%3Cpath fill='%23ffffff' d='M16 17l1-1 4 4-1 1z'/%3E%3Cpath fill='%23ffffff' d='M6 11.5 4.5 13 11 19.5 12.5 18z'/%3E%3Cpath fill='%23ffffff' d='M8 17l-1-1-4 4 1 1z'/%3E%3C/svg%3E")}
.bh-i-trophy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M6 3h12v5.5a6 6 0 0 1-12 0z'/%3E%3Cpath fill='%23ffffff' d='M2.5 4H6v2H4.5c0 1.6 1 2.6 2.2 3l-.6 1.8C3.9 10.2 2.5 8.3 2.5 6z'/%3E%3Cpath fill='%23ffffff' d='M21.5 4H18v2h1.5c0 1.6-1 2.6-2.2 3l.6 1.8c2.2-.6 3.6-2.5 3.6-4.8z'/%3E%3Cpath fill='%23ffffff' d='M10.5 14h3v3.5h-3z'/%3E%3Cpath fill='%23ffffff' d='M7 18h10v3H7z'/%3E%3C/svg%3E")}
.bh-i-skull{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 2.5c-5 0-8.5 3.4-8.5 8 0 2.6 1.2 4.6 3 5.8V21h2.5v-2h2v2h2v-2h2v2H17v-4.7c1.8-1.2 3-3.2 3-5.8 0-4.6-3.5-8-8-8zM7 11a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm6 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm-1 2.6 1.2 1.9h-2.4z'/%3E%3C/svg%3E")}
.bh-i-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 2a10 10 0 1 0 .01 0zm0 2.4a7.6 7.6 0 1 1-.01 0zm0 2.4a5.2 5.2 0 1 0 .01 0zm0 2.6a2.6 2.6 0 1 1-.01 0z'/%3E%3C/svg%3E")}
.bh-i-headshot{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 3a9 9 0 1 0 .01 0zm0 2.2a6.8 6.8 0 1 1-.01 0z'/%3E%3Cpath fill='%23ffffff' d='M11 .5h2v5h-2zm0 18h2v5h-2zM.5 11h5v2h-5zm18 0h5v2h-5z'/%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 7.2c-2.3 0-3.9 1.6-3.9 3.7 0 1.2.5 2.1 1.4 2.7v1.9h5v-1.9c.9-.6 1.4-1.5 1.4-2.7 0-2.1-1.6-3.7-3.9-3.7zm-1.6 3.1a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zm3.2 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E")}
.bh-i-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M5 3.6 12 10.6 19 3.6 20.4 5 13.4 12l7 7-1.4 1.4-7-7-7 7L3.6 19l7-7-7-7z'/%3E%3C/svg%3E")}
.bh-i-bolt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 2 4 14h6.5l-1.5 8L19 9.5h-6.5z'/%3E%3C/svg%3E")}
.bh-i-health{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M9 2.5h6v6.5h6.5v6H15v6.5H9V15H2.5V9H9z'/%3E%3C/svg%3E")}
.bh-i-handshake{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M1 7h4l3 1.5L11 7h3l5 4.5 1-1V7h3v8h-3.5l-1 1L13.5 20a1.6 1.6 0 0 1-2.3 0l-.4-.4-.5.5a1.6 1.6 0 0 1-2.3 0l-.6-.6a1.6 1.6 0 0 1-2.2-.2 1.6 1.6 0 0 1-.1-2.1L4.5 16H1zm9.4 2.3L8 11.6a1.2 1.2 0 0 0 1.7 1.7l2.3-2.1 5.4 4.8.6-.6-6.3-5.6z'/%3E%3C/svg%3E")}
/* B449 (the admin, owner 06/11): the admin's action and section icons the set lacked, drawn as the set is (24 x 24, solid one-colour,
   strokes 2.2-3.4 with round caps, currentColor): ban hammer, mute speaker-off, back undo, watch eye, report flag, maintenance wrench, metrics chart */
.bh-i-hammer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.6 2.4 21.6 10.4 18.4 13.6 10.4 5.6Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' d='M13.2 10.8 3.8 20.2'/%3E%3C/svg%3E")}
.bh-i-speaker-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M3 9h4l5.4-4.5v15L7 15H3Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' d='M15.6 9.2l5.6 5.6M21.2 9.2l-5.6 5.6'/%3E%3C/svg%3E")}
.bh-i-undo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' d='M8.6 7H15a5.6 5.6 0 0 1 0 11.2H8'/%3E%3Cpath fill='%23ffffff' d='M2.6 7 9.6 2.4v9.2Z'/%3E%3C/svg%3E")}
.bh-i-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 5C6.6 5 2.6 9.2 1.4 12c1.2 2.8 5.2 7 10.6 7s9.4-4.2 10.6-7C21.4 9.2 17.4 5 12 5Zm0 3.4a3.6 3.6 0 1 1 0 7.2 3.6 3.6 0 0 1 0-7.2Z'/%3E%3Ccircle fill='%23ffffff' cx='12' cy='12' r='1.7'/%3E%3C/svg%3E")}
.bh-i-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' d='M5 21.2V3'/%3E%3Cpath fill='%23ffffff' d='M6.2 3.4h13.4l-3.2 4.8 3.2 4.8H6.2Z'/%3E%3C/svg%3E")}
.bh-i-wrench{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M15.6 2.6a5.8 5.8 0 0 0-5.4 7.9l-1.6 1.6 3.3 3.3 1.6-1.6a5.8 5.8 0 0 0 7.9-5.4c0-.5 0-1-.2-1.4l-3.4 3.4-3.2-.8-.8-3.2 3.4-3.4c-.5-.3-1-.4-1.6-.4Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' d='M10 13.8 4 19.8'/%3E%3C/svg%3E")}
.bh-i-chart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M2.6 19.4h18.8v2.2H2.6ZM4.4 11.4h3.6v6.6H4.4Zm5.8-5h3.6v11.6h-3.6Zm5.8 3h3.6v8.6H16Z'/%3E%3C/svg%3E")}
/* B456: EXPORT FOR ANALYSIS, the admin's download (same style) */
.bh-i-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' d='M12 2.8v10.4'/%3E%3Cpath fill='%23ffffff' d='M6.4 10.6h11.2L12 17.2Z'/%3E%3Cpath fill='%23ffffff' d='M2.8 16.6h3v2.6h12.4v-2.6h3v5.4H2.8Z'/%3E%3C/svg%3E")}
.bh-i-chat-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M3.2 2.6L21.4 20.8' stroke='%23000' stroke-width='5.4'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23m)' fill='%23ffffff' d='M4 3.5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9.4L4.6 21v-3.5H4a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' d='M3.2 2.6L21.4 20.8'/%3E%3C/svg%3E")}   /* B448b: the chat off for everybody (admin, CHAT) */

/* B273 · --f11d: the desktop's labels' floor, 11.2 px real whatever --bh-k (the twin of the touch screens' --f11, bh-phone.css;
   the labels' floor of tests/mobile_lib.mjs audit). Used as max(the 1920 size, var(--f11d)) by the screens' B273 blocks */
html:not(.bh-touch){--f11d:calc(11.2px / var(--bh-k,1))}

/* ================= B413 · the UI audit B409, approved by the owner 03/11 («Ok tutte»): the screens' fixes ================
   Placed here (the screens' own sheets load after this one: the selectors carry one class or element more to win).
   Rows of docs/test-runs/b409/README.md; the before / after in docs/test-runs/b413/. */
/* row 2 · the spectator's BACK: NEXT's circle, mirrored on the stick's side (touchlayout.js), the SPECTATING card free */
#bhTouch .bt-btn.bt-sprev { width: 72px; height: 72px; border-width: var(--border-select); }
/* row 4 · MATCH HISTORY: the mode is never cut — a long one («TEAM DEATHMATCH» on a narrow row) wraps over the map */
#profile .pf-histlist .pf-match > span:nth-child(3) { white-space: normal; text-overflow: clip; }
#profile .pf-histlist .pf-match .bh-match-mode { white-space: normal; line-height: 1.05; }
/* row 5 · the profile's name: over 10 letters one step down the titles' scale (40 → 32; the phone's 28 → 22), whole up to 12 */
#profile .pf-names .pf-name.is-long { font-size: 32px; }
html.bh-phone #profile .pf-names .pf-name.is-long { font-size: 22px; }
/* row 6 · STORE: the champion's role in a chip on the card (--ink on --surface-0), readable on a locked grey card too */
#m.bh .sto-card .sto-card-role { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink); }
/* row 8 · the boards of TAB and of the match's end (hud.js board: my side first): by side as in the HUD — mine --cyan,
   theirs --enemy-ui (the Design System's «Io e alleati in ciano»); my team's name stays --ink */
.bhboard .bh-team-alpha { --team: var(--cyan); --team-tint: var(--cyan-tint); }
.bhboard .bh-team-bravo { --team: var(--enemy-ui, var(--magenta)); --team-tint: color-mix(in srgb, var(--team) 17%, #000); }   /* (≈ --magenta-tint by default: rgb(42,1,37) for #290626) */
.bhboard .bh-team-bravo .bh-team-name { color: var(--team); }
/* row 10 · champion select: the ‹ › arrows only when the cards do not all fit in the row (champselect.js cs-fits) */
#champsel.cs-fits .cs-row .cs-nav { display: none; }
/* row 11 · SETTINGS → GENERAL: the diagnostics' COPY at the touch screens' 44 px like the page's other buttons */
html:is(.bh-touch, .bh-phone, .bh-tablet) #settings #setDiagCopy { height: var(--t44); min-width: var(--t44); }
html:not(.bh-touch, .bh-phone, .bh-tablet) #settings #setDiagCopy { font-size: max(20px, var(--f11d)); }   /* (a small desktop window: 11.2 px real, B273's floor) */
/* row 12 · the teammates' cards on a touch screen: as wide as the longest name needs (up to 360 at the reference); the name
   takes the room, an ally bot's ★ stays after a cut (hud.js .ally-nm / .ally-star) */
html.bh-touch #hud #allyHud .ally-card { width: auto; min-width: 240px; max-width: 360px; }
#hud #allyHud .ally-name { display: flex; min-width: 0; }
#hud #allyHud .ally-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud #allyHud .ally-star { flex: none; font-style: normal; white-space: pre; }
/* row 13 · the profile's level: the number clear of the crown (the crown's 24 px and its 5 px inset, then --space-1) */
#profile .pf-lvl > span.bh-level { width: auto; min-width: 72px; padding-left: var(--space-2); padding-right: calc(29px + var(--space-1)); }
#profile .pf-lvl > span.bh-level.is-wide { padding-right: calc(29px + var(--space-1)); }
/* row 14 · small contrasts: the friends' badge on --pink in large text (white on --pink 4.35:1: 20 px bold, as the open tab);
   the picker's skin name on a --scrim chip over the champion's colour; the reward cards' label in --ink */
#m.bh .bh-count.frbadge { background: var(--pink); font-size: 20px; }
html.bh-phone #m.bh #frBadgeNav.frbadge { font-size: max(20px, var(--f11)); }
#m.bh .pk-s > span { padding: var(--space-1); border-radius: var(--radius-sm); background: var(--scrim); }
.rwlv-cards .rwlv-card b { color: var(--ink); }

/* ---------- info button + popover (B391m, owner 06/11: an (i) by the invite ladder that explains its steps) ----------
   .bh-info: a round icon button, 44 px (a real 44 on touch screens, inside the menu's scaled layers too), ink-2 at rest, ink and
   line-strong on hover, focus or open. .bh-pop: its explanation on surface-2 with a line-strong hair and the panel shadow, an
   arrow to the button; on <body> while open (src/infopop.js), sized by --bh-k with a floor that stays readable on a phone, never
   wider than the screen less 8 px a side. Opens on hover, focus and tap; Escape or a tap elsewhere closes it. */
.bh-info { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; background: var(--surface-0); border: var(--border-hair) solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); font-size: 26px; cursor: pointer; transition: border-color 120ms, color 120ms; }
.bh-info:hover, .bh-info:focus-visible, .bh-info[aria-expanded="true"] { border-color: var(--line-strong); color: var(--ink); }
html:is(.bh-touch, .bh-phone) .bh-info { width: calc(44px / var(--bh-k)); height: calc(44px / var(--bh-k)); font-size: calc(26px / var(--bh-k)); }
.bh-pop { position: fixed; left: 0; top: 0; z-index: 2000; box-sizing: border-box; width: max(260px, calc(560px * var(--bh-k))); padding: max(12px, calc(var(--space-5) * var(--bh-k)));
	background: var(--surface-2); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-panel);
	font: 600 max(15px, calc(21px * var(--bh-k)))/1.3 var(--font-ui); color: var(--ink-2); text-align: left; text-transform: uppercase; letter-spacing: 0.02em; pointer-events: auto; }
.bh-pop[hidden] { display: none; }
/* B492: the popover takes presses (pointer-events: auto in the rule above: the mouse can rest on it to read). It never stays over another
   control: a press outside closes it, it closes when its button leaves the view, and with no room under the button its column
   scrolls the button up and the popover opens under it (src/infopop.js) */
.bh-pop::before { content: ""; position: absolute; left: calc(var(--arrow-x, 50%) - 7px); top: -8px; width: 14px; height: 14px; background: var(--surface-2); border: inherit; border-width: var(--border-hair) 0 0 var(--border-hair); transform: rotate(45deg); }
.bh-pop.is-above::before { top: auto; bottom: -8px; border-width: 0 var(--border-hair) var(--border-hair) 0; }
.bh-pop-title { display: block; margin: 0 0 0.5em; font-weight: 800; color: var(--ink); }
.bh-pop ol { margin: 0; padding: 0 0 0 1.3em; }
.bh-pop li { margin: 0.35em 0 0; }
.bh-pop li::marker { color: var(--yellow); font-weight: 800; }
.bh-pop b { color: var(--ink); font-weight: 800; }