/* =====================================================================================================================
   BAR Fight 2.0: design system and app shell (bf.css). Ported from the reviewed prototype (proto.css) with the same class names.
   Brand: Command HUD (dark steel, cyan / red / amber, Chakra Petch + IBM Plex Sans + JetBrains Mono, chamfered corners,
   bracketed frames, caps eyebrows, glow). Fonts are the self-hosted files in /assets/fonts. The pages send style-src 'self':
   no <style> element, no style="" attribute in server markup (bf.js applies the few dynamic values with the CSS object model).
   Sections: 1 fonts  2 tokens  3 base  4 layout  5 type  6 buttons  7 cards  8 header and nav  9 One Box  10 phone bars
             11 footer  12 chips  13 pills and filters  14 tabs  15 tables  16 tiles and evidence  17 data viz  18 overlays
             19 states  20 utilities  21 start-position map  22 map context  23 production additions. Components: see docs in assets/v2/README.md.
   ===================================================================================================================== */

/* 1 ---------- fonts (self-hosted, OFL licences next to the files) */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-cyrillic-ext-400-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-cyrillic-ext-500-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-greek-500-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-cyrillic-ext-600-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-greek-600-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2 ---------- tokens */
:root {
  color-scheme: dark;
  /* steel */
  --bg: #060a10; --bg-2: #090f17; --panel: #0c141e; --panel-2: #101b27; --panel-3: #152333;
  --line: #1c2d3d; --line-2: #2a4358; --line-3: #4a7089;
  --text: #e7f0f6; --text-2: #bdcddb; --muted: #93a9ba; --faint: #7d94a6;
  /* signal colours */
  --cyan: #3cc6f4; --cyan-hi: #8fe3fb; --cyan-lo: #1d7a98; --cyan-tint: #0b2733; --on-cyan: #03141c;
  --amber: #fdc04c; --amber-hi: #ffd079; --amber-tint: #2a200f; --on-amber: #1a1100;
  --red: #ff6b5b; --red-hi: #ffa89c; --red-tint: #2e1513;
  --gold: #fdc04c; --silver: #b4c5d3; --bronze: #d58a60;
  --focus: #ffd079;
  --discord: #5865F2;      /* Discord's own blurple: used on the Discord logo mark only (3.8:1 on --panel-2, the non-text minimum is 3:1) */
  --a: var(--cyan); --a-hi: var(--cyan-hi); --a-tint: var(--cyan-tint);   /* player A */
  --b: var(--red);  --b-hi: var(--red-hi);  --b-tint: var(--red-tint);    /* player B */
  /* evidence */
  --ev-solid: var(--cyan); --ev-fair: var(--amber); --ev-thin: #8a9cab;
  /* OS bands (BAR's own guidance: above 20 capable, above 30 very strong). Neutral steel to bright cyan, never red or green. */
  --os-0: #5b7388; --os-1: #3f93b4; --os-2: #3cc6f4; --os-3: #8fe3fb;
  /* the 8 Supreme Isthmus positions (mirrored pairs share one colour) */
  --pos-geo-sea: #35d0c0; --pos-tech: #fdc04c; --pos-air: #b79bff; --pos-pond: #3cc6f4;
  --pos-front-suicide: #ff6b5b; --pos-front-second: #ff8fc0; --pos-geo-tech: #8fdc5a; --pos-beach-sea: #6c9bff;
  /* the four official start roles (BAR's own titles). Front is steel so the most common role stays calm and the rare ones stand out. Not cyan or red: those are player A and B. */
  --role-front: #d3e3ee; --role-tech: #fdc04c; --role-air: #b79bff; --role-sea: #5f9bff;
  /* type */
  --display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-hero: clamp(2.5rem, 1.2rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.125rem, 1.2rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  --fs-body: 1rem; --fs-small: .875rem; --fs-cap: .75rem;
  --fs-num: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* layout */
  --max: 1240px; --gutter: clamp(16px, 4vw, 32px);
  --header-min: 72px; --header-h: 72px; --tabbar-h: 64px;
  --cut: 8px;
  /* frame recipes (from the live site: cyan bracket top left, steel bracket bottom right, luminous top edge) */
  --frame: linear-gradient(90deg, rgba(60,198,244,.65), rgba(60,198,244,0) 44%) top left/100% 1px no-repeat,
           linear-gradient(var(--cyan), var(--cyan)) top left/16px 2px no-repeat,
           linear-gradient(var(--cyan), var(--cyan)) top left/2px 16px no-repeat,
           linear-gradient(var(--line-3), var(--line-3)) bottom right/16px 2px no-repeat,
           linear-gradient(var(--line-3), var(--line-3)) bottom right/2px 16px no-repeat,
           repeating-linear-gradient(0deg, rgba(150,210,255,.016) 0 1px, transparent 1px 3px);
  --frame-b: linear-gradient(90deg, rgba(255,107,91,.7), rgba(255,107,91,0) 44%) top left/100% 1px no-repeat,
             linear-gradient(var(--red), var(--red)) top left/16px 2px no-repeat,
             linear-gradient(var(--red), var(--red)) top left/2px 16px no-repeat,
             linear-gradient(var(--line-3), var(--line-3)) bottom right/16px 2px no-repeat,
             linear-gradient(var(--line-3), var(--line-3)) bottom right/2px 16px no-repeat;
  --frame-amber: linear-gradient(90deg, rgba(253,192,76,.7), rgba(253,192,76,0) 44%) top left/100% 1px no-repeat,
             linear-gradient(var(--amber), var(--amber)) top left/16px 2px no-repeat,
             linear-gradient(var(--amber), var(--amber)) top left/2px 16px no-repeat,
             linear-gradient(var(--line-3), var(--line-3)) bottom right/16px 2px no-repeat,
             linear-gradient(var(--line-3), var(--line-3)) bottom right/2px 16px no-repeat;
  --glow: inset 0 1px 0 rgba(143,227,251,.05), inset 0 0 44px rgba(60,198,244,.025);
  --shadow-pop: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(60,198,244,.16);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* 3 ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 38% at 8% -4%, rgba(60,198,244,.12), transparent 70%),
    radial-gradient(ellipse 50% 30% at 100% 0%, rgba(253,192,76,.045), transparent 70%),
    linear-gradient(rgba(120,190,230,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,190,230,.032) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px; background-attachment: fixed;
  scrollbar-color: var(--line-3) var(--bg); scrollbar-width: thin; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text); background: transparent;
  font: 400 var(--fs-body)/1.6 var(--body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { flex: 1 0 auto; display: block; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--cyan-hi); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--s-5) 0; }
small { font-size: max(12px, .85em); }   /* the browser default (83%) can fall under 12px */
code, kbd, samp { font-family: var(--mono); font-size: .92em; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--line-3); border-bottom-width: 2px; border-radius: 3px; background: var(--panel-2); color: var(--text-2); font-size: 12px; line-height: 1.4; text-align: center; }
::selection { background: rgba(60,198,244,.35); color: #fff; }
.bf-skip { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px; background: var(--amber); color: var(--on-amber); font: 700 14px var(--display); text-decoration: none; }
.bf-skip:focus { top: 12px; }
body.bf-noscroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { * , *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* 4 ---------- layout */
.bf-container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.bf-main { padding-block: var(--s-6) var(--s-8); }
.bf-section { margin-top: var(--s-8); }
.bf-section:first-child { margin-top: 0; }
.bf-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.bf-sh h2 { margin: 0; }
.bf-sh .bf-caption { margin-top: var(--s-2); max-width: 62ch; }
.bf-more { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--cyan); white-space: nowrap; }
.bf-more::after { content: "\2192"; transition: transform .2s var(--ease); }
.bf-more:hover::after { transform: translateX(4px); }
.bf-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); }
.bf-grid > * { min-width: 0; }
.bf-cols-2 { --cols: 2; } .bf-cols-3 { --cols: 3; } .bf-cols-4 { --cols: 4; }
.bf-split { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.bf-split--rail { grid-template-columns: minmax(0, 1fr) 320px; }
.bf-stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); }
.bf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-3)); }
.bf-row--between { justify-content: space-between; }
.bf-scroll-x { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bf-scroll-x::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .bf-cols-4 { --cols: 2; } .bf-split, .bf-split--rail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .bf-main { padding-block: var(--s-5) var(--s-7); }
  .bf-section { margin-top: var(--s-7); }
  .bf-cols-2, .bf-cols-3 { --cols: 1; }
  .bf-sh { align-items: flex-start; flex-direction: column; gap: 0; margin-bottom: var(--s-4); }
  .bf-sh .bf-more { min-height: 36px; margin-top: 2px; }
}

/* 5 ---------- type */
.bf-hero-title { font: 700 var(--fs-hero)/1.02 var(--display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.bf-h1 { font: 700 var(--fs-h1)/1.06 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.bf-h2 { font: 700 var(--fs-h2)/1.12 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.bf-h3 { font: 600 var(--fs-h3)/1.25 var(--display); letter-spacing: .005em; }
.bf-h1::after, .bf-hero-title::after { content: ""; display: block; width: 84px; height: 4px; margin-top: 18px; background: linear-gradient(90deg, var(--cyan) 0 60px, transparent 60px 68px, var(--amber) 68px); }
.bf-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.bf-eyebrow { font: 600 12px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s-2); display: flex; align-items: center; gap: 10px; }
.bf-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; flex: none; }
.bf-eyebrow--amber { color: var(--amber); } .bf-eyebrow--red { color: var(--red-hi); }
.bf-caption { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); max-width: 70ch; text-wrap: pretty; }
.bf-cap { font-size: var(--fs-cap); line-height: 1.4; color: var(--faint); }
.bf-muted { color: var(--muted); } .bf-faint { color: var(--faint); } .bf-text-2 { color: var(--text-2); }
.bf-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bf-big { font: 700 var(--fs-num)/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bf-caps { font: 600 12px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.bf-prose p + p { margin-top: var(--s-3); }
.bf-prose { max-width: 68ch; color: var(--text-2); }
.bf-prose strong { color: var(--text); font-weight: 600; }

/* 6 ---------- buttons (chamfered, caps; the live site's recipe) */
.bf-chamfer, .bf-btn, .bf-pill, .bf-chip, .bf-fresh, .bf-me, .bf-tag, .bf-mapchip {
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--edge, var(--line-3)) calc(50% - .5px), var(--edge, var(--line-3)) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--edge, var(--line-3)) calc(50% - .5px), var(--edge, var(--line-3)) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top left, bottom right; background-size: var(--cut) var(--cut); background-repeat: no-repeat; background-origin: border-box;
}
.bf-chamfer:focus-visible, .bf-btn:focus-visible, .bf-pill:focus-visible, .bf-chip:focus-visible, .bf-fresh:focus-visible, .bf-me:focus-visible, .bf-mapchip:focus-within { clip-path: none; }
.bf-btn { --cut: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent;
  font: 600 13px/1.2 var(--display); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.bf-btn svg { width: 18px; height: 18px; flex: none; }
.bf-btn--primary { --edge: var(--cyan-hi); background-color: var(--cyan); border-color: var(--cyan-hi); color: var(--on-cyan); }
.bf-btn--primary:hover { background-color: var(--cyan-hi); color: var(--on-cyan); }
.bf-btn--secondary { --edge: var(--line-3); background-color: var(--panel-2); border-color: var(--line-3); color: var(--text); }
.bf-btn--secondary:hover { --edge: var(--cyan); border-color: var(--cyan); color: var(--cyan-hi); background-color: var(--cyan-tint); }
.bf-btn--amber { --edge: var(--amber-hi); background-color: var(--amber); border-color: var(--amber-hi); color: var(--on-amber); }
.bf-btn--amber:hover { background-color: var(--amber-hi); color: var(--on-amber); }
.bf-btn--quiet { --edge: transparent; background-color: transparent; border-color: transparent; color: var(--cyan); padding-inline: 10px; }
.bf-btn--quiet:hover { color: var(--cyan-hi); background-color: var(--cyan-tint); }
.bf-btn--lg { min-height: 52px; padding-inline: 28px; font-size: 14px; }
.bf-btn--sm { min-height: 44px; padding: 6px 14px; }
.bf-btn--block { width: 100%; }
.bf-btn[disabled], .bf-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.bf-btn--b { --edge: var(--red-hi); background-color: var(--red-tint); border-color: var(--red); color: var(--red-hi); }
.bf-btn--b:hover { background-color: var(--red); color: #1a0705; }
.bf-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-3); background: var(--panel-2); color: var(--text-2); }
.bf-icon-btn:hover { border-color: var(--cyan); color: var(--cyan-hi); }
.bf-icon-btn svg { width: 22px; height: 22px; }

/* 7 ---------- cards and panels (bracket frames) */
.bf-card { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel) 38%); border: 1px solid var(--line-2); box-shadow: var(--glow); min-width: 0; }
.bf-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--frame); }
.bf-card--b::before { background: var(--frame-b); }
.bf-card--amber::before { background: var(--frame-amber); }
.bf-card--flat::before { display: none; }
.bf-card--pad { padding: var(--s-5); }
.bf-card--tight { padding: var(--s-4); }
.bf-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.bf-card__title { font: 600 15px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
a.bf-card, .bf-card--link { display: block; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s, background .2s; }
a.bf-card:hover, .bf-card--link:hover { border-color: var(--cyan-lo); transform: translateY(-2px); box-shadow: var(--glow), 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(60,198,244,.2); color: inherit; }
.bf-card--glass { background: rgba(9,15,23,.72); backdrop-filter: blur(10px); }
.bf-divider { height: 1px; background: var(--line); border: 0; margin: var(--s-4) 0; }

/* 8 ---------- header and desktop nav */
.bf-header { position: sticky; top: 0; z-index: 60; background: rgba(6,10,16,.84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line-2); }
.bf-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 220px; height: 2px; background: linear-gradient(90deg, var(--cyan) 0 150px, rgba(60,198,244,0)); pointer-events: none; }
.bf-header__in { display: flex; align-items: center; gap: 18px; min-height: var(--header-min); flex-wrap: nowrap; }
.bf-brand { display: inline-flex; align-items: center; gap: .5em; flex: none; min-height: 44px; color: var(--text); text-decoration: none; font: 700 23px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; font-synthesis: none; }
.bf-brand::before { content: ""; flex: none; width: 17px; height: 17px; margin-right: 2px; background: var(--cyan); clip-path: polygon(0 0, 68% 0, 100% 32%, 100% 100%, 32% 100%, 0 68%); filter: drop-shadow(0 0 8px rgba(60,198,244,.6)); }
.bf-brand span { color: var(--cyan); }
.bf-brand:hover { color: var(--text); }
.bf-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.bf-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 11px; color: var(--text-2); text-decoration: none; font: 600 13px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bf-nav a:hover { color: #fff; }
.bf-nav a[aria-current="page"], .bf-nav a.is-here { color: var(--cyan-hi); background: linear-gradient(180deg, rgba(60,198,244,.14), rgba(60,198,244,.02)); }
.bf-nav a[aria-current="page"]::after, .bf-nav a.is-here::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 3px; background: var(--cyan); }
.bf-header__tools { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.bf-me { --cut: 7px; --edge: var(--line-3); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--line-3); background-color: var(--panel-2); color: var(--text); text-decoration: none; font: 600 13px/1 var(--display); letter-spacing: .06em; }
.bf-me:hover { --edge: var(--cyan); border-color: var(--cyan); color: var(--cyan-hi); }
.bf-me__av { display: grid; place-items: center; width: 32px; height: 32px; background: var(--panel-3); color: var(--cyan-hi); font: 700 15px/1 var(--display); border: 1px solid var(--line-3); }
.bf-me__av svg { width: 18px; height: 18px; }
.bf-me--on .bf-me__av { background: var(--cyan); color: var(--on-cyan); border-color: var(--cyan-hi); }
.bf-me__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: .02em; font-size: 14px; }
.bf-me--off .bf-me__name { color: var(--muted); }
.bf-menu { position: absolute; z-index: 90; min-width: 230px; padding: 6px; background: var(--panel); border: 1px solid var(--line-3); box-shadow: var(--shadow-pop); }
.bf-menu a, .bf-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--text-2); text-align: left; text-decoration: none; font: 500 14px/1.3 var(--body); }
.bf-menu a:hover, .bf-menu button:hover { background: var(--cyan-tint); color: #fff; }
.bf-menu .bf-menu__head { padding: 10px 12px 6px; font: 600 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
body.bf-home-hero .bf-header .bf-onebox--header { opacity: 0; pointer-events: none; transform: translateY(-4px); }
@media (max-width: 1239px) and (min-width: 761px) {   /* two rows: the one-row header needs its full 1240px (it holds the Discord button too; search is never narrower than 223px) */
  .bf-header__in { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .bf-nav { order: 5; width: 100%; margin-inline: -11px; overflow-x: auto; scrollbar-width: none; }
  .bf-nav::-webkit-scrollbar { display: none; }
  .bf-header__tools { order: 3; }
  .bf-header .bf-onebox--header { flex-basis: 220px; }   /* brand, search and the tools (with Discord) stay on the first row down to 761px */
}

/* 9 ---------- One Box (search) */
.bf-onebox { position: relative; flex: 1 1 280px; min-width: 220px; max-width: 560px; transition: opacity .2s, transform .2s var(--ease); }
.bf-onebox__form { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 14px; background: var(--bg-2); border: 1px solid var(--line-3); transition: border-color .15s, box-shadow .15s, background .15s; }
.bf-onebox__form::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: linear-gradient(var(--cyan), var(--cyan)) top left/12px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left/2px 12px no-repeat, linear-gradient(var(--line-3), var(--line-3)) bottom right/12px 2px no-repeat, linear-gradient(var(--line-3), var(--line-3)) bottom right/2px 12px no-repeat; }
.bf-onebox:focus-within .bf-onebox__form, .bf-onebox.is-open .bf-onebox__form { border-color: var(--cyan); background: var(--panel); box-shadow: 0 0 0 1px rgba(60,198,244,.3), 0 0 28px rgba(60,198,244,.16); }
.bf-onebox--header:focus-within .bf-onebox__form, .bf-onebox--inline:focus-within .bf-onebox__form { outline: 2px solid var(--focus); outline-offset: 2px; }   /* hero and big boxes already glow cyan */
.bf-onebox__ico { flex: none; width: 20px; height: 20px; color: var(--cyan); }
.bf-onebox__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 15px/1 var(--body); }
.bf-onebox__input::placeholder { color: var(--faint); opacity: 1; }
.bf-onebox__input::-webkit-search-cancel-button { display: none; }
.bf-onebox__kbd { flex: none; }
.bf-onebox__close { display: none; flex: none; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--cyan); font: 600 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.bf-onebox__panel { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; right: 0; max-height: min(72vh, 620px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line-3); box-shadow: var(--shadow-pop); overscroll-behavior: contain; }
.bf-onebox__panel[hidden] { display: none; }
.bf-onebox--header .bf-onebox__panel { min-width: min(560px, 90vw); }
.bf-og { padding: 6px 0 8px; }
.bf-og + .bf-og { border-top: 1px solid var(--line); }
.bf-og__h { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; font: 600 12px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.bf-og__h a { font-size: 12px; letter-spacing: .06em; text-transform: none; color: var(--muted); }
.bf-opt { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; color: var(--text-2); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; }
.bf-opt:hover, .bf-opt[aria-selected="true"] { background: linear-gradient(90deg, rgba(60,198,244,.14), rgba(60,198,244,.02)); border-left-color: var(--cyan); color: #fff; }
.bf-opt__ico { display: grid; place-items: center; width: 36px; height: 36px; background: var(--panel-3); border: 1px solid var(--line-2); overflow: hidden; font: 700 14px/1 var(--display); color: var(--cyan-hi); }
.bf-opt__ico img { width: 100%; height: 100%; object-fit: cover; }
.bf-opt__ico i.bf-dot { width: 14px; height: 14px; }
.bf-opt__main { min-width: 0; }
.bf-opt__t { display: block; font: 600 15px/1.25 var(--body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-opt__t mark { background: none; color: var(--cyan-hi); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(60,198,244,.55); text-underline-offset: 3px; }
.bf-opt__s { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-opt__r { font: 500 12px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.bf-opt--go .bf-opt__ico { background: var(--cyan); color: var(--on-cyan); border-color: var(--cyan-hi); }
.bf-onebox__foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 12px; color: var(--faint); }
.bf-onebox__foot kbd { margin-right: 4px; }
.bf-onebox__empty { padding: 20px 16px; color: var(--muted); font-size: 14px; }
/* hero version */
.bf-onebox--hero { max-width: 760px; flex: none; width: 100%; }
.bf-onebox--hero .bf-onebox__form { height: 68px; padding: 0 14px 0 20px; gap: 14px; background: rgba(6,10,16,.88); border-color: var(--cyan-lo); box-shadow: 0 0 0 1px rgba(60,198,244,.12), 0 14px 44px rgba(0,0,0,.5), 0 0 60px rgba(60,198,244,.12); }
.bf-onebox--hero .bf-onebox__ico { width: 26px; height: 26px; }
.bf-onebox--hero .bf-onebox__input { font-size: clamp(16px, 1.1rem + .3vw, 20px); font-weight: 500; }
.bf-onebox--hero .bf-onebox__go { display: inline-flex; }
.bf-onebox__go { display: none; flex: none; }
.bf-onebox--hero .bf-onebox__panel { top: calc(100% + 10px); }
.bf-onebox--big { max-width: 720px; }
.bf-onebox--inline .bf-onebox__panel, .bf-onebox[data-mode="picker"] .bf-onebox__panel { position: static; margin-top: 10px; max-height: none; box-shadow: none; border-color: var(--line-2); }
.bf-onebox[data-mode="picker"] { max-width: none; flex: none; }
.bf-onebox[data-mode="picker"] .bf-onebox__panel { max-height: min(50vh, 420px); }
@media (max-width: 760px) {
  .bf-onebox--header { display: none; position: fixed; inset: 0; z-index: 200; max-width: none; min-width: 0; flex: none; padding: 12px var(--gutter) 0; background: var(--bg); overflow-y: auto; }
  .bf-onebox--header.is-open { display: block; }
  .bf-onebox--header .bf-onebox__form { height: 52px; }
  .bf-onebox--header .bf-onebox__close { display: block; }
  .bf-onebox--header .bf-onebox__kbd { display: none; }
  .bf-onebox--header .bf-onebox__panel { position: static; max-height: none; margin-top: 12px; border: 0; box-shadow: none; background: transparent; min-width: 0; }
  .bf-onebox--header .bf-onebox__foot { display: none; }
  .bf-onebox--hero .bf-onebox__form { height: 60px; padding-left: 14px; }
  .bf-onebox--hero .bf-onebox__kbd { display: none; }
  .bf-onebox--hero .bf-onebox__go { display: none; }
  .bf-onebox--hero .bf-onebox__panel { position: absolute; max-height: 62vh; }
  body.bf-home-hero .bf-header .bf-onebox--header { opacity: 1; pointer-events: auto; transform: none; }
}

/* 10 ---------- phone bars */
.bf-tabbar { display: none; }
.bf-searchbtn { display: none; }
@media (max-width: 760px) {
  :root { --header-min: 56px; --header-h: 56px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .bf-header__in { gap: 8px; }
  .bf-brand { font-size: 19px; }
  .bf-brand::before { width: 14px; height: 14px; }
  .bf-nav, .bf-header .bf-compare, .bf-header .bf-fresh { display: none; }
  .bf-header__tools { gap: 6px; }
  .bf-me { padding: 4px 6px; }
  .bf-me__name { display: none; }
  .bf-searchbtn { display: inline-grid; }
  .bf-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(6,10,16,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); }
  .bf-tabbar::before { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 2px; background: linear-gradient(90deg, var(--cyan) 0 80px, rgba(60,198,244,0)); }
  .bf-tabbar a, .bf-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; border: 0; background: none; color: var(--muted); text-decoration: none; font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
  .bf-tabbar svg { width: 24px; height: 24px; }
  .bf-tabbar a[aria-current="page"], .bf-tabbar a.is-here { color: var(--cyan-hi); }
  .bf-tabbar a[aria-current="page"]::before, .bf-tabbar a.is-here::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--cyan); box-shadow: 0 0 12px rgba(60,198,244,.7); }
}

/* 11 ---------- footer */
.bf-footer { margin-top: var(--s-8); border-top: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(9,15,23,0), var(--bg-2) 60%); color: var(--muted); }
.bf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
.bf-footer p { font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 36ch; margin-top: var(--s-3); }
.bf-footer h3 { font: 600 12px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s-2); }
.bf-footer li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.bf-footer li a:hover { color: var(--cyan-hi); text-decoration: underline; text-underline-offset: 4px; }
.bf-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-4) var(--s-5); border-top: 1px solid var(--line); font-size: 13px; }
.bf-footer__base a { color: var(--cyan-hi); text-underline-offset: 3px; }
.bf-fresh { --cut: 6px; --edge: var(--line-3); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px 4px 12px; border: 1px solid var(--line-3); background-color: var(--panel-2); color: var(--text-2); font: 500 13px/1.2 var(--mono); letter-spacing: 0; }
.bf-fresh:hover { --edge: var(--cyan); border-color: var(--cyan); color: #fff; }
.bf-fresh__dot { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: bf-pulse 2.4s ease-in-out infinite; flex: none; }
.bf-fresh b { color: #fff; font-weight: 600; }
@keyframes bf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 1000px) { .bf-footer__grid { grid-template-columns: 1fr 1fr; } .bf-footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .bf-footer { margin-top: var(--s-7); } .bf-footer__grid { gap: var(--s-5); padding-block: var(--s-6) var(--s-4); } .bf-footer__base { flex-direction: column; align-items: flex-start; } }

/* 12 ---------- entity chips: player, position, unit, map (all links, one style each) */
.bf-ec { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 12px 0 0; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); text-decoration: none; font: 600 14px/1.1 var(--body); vertical-align: middle; transition: border-color .15s, background .15s, color .15s; }
a.bf-ec::after, button.bf-ec::after { content: ""; position: absolute; inset: -4px 0; }   /* 44px hit area */
a.bf-ec:hover, button.bf-ec:hover { border-color: var(--cyan); background: var(--cyan-tint); color: #fff; }
.bf-ec > :first-child { flex: none; }
.bf-ec__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ec__s { flex: none; font: 500 12px/1 var(--mono); color: var(--muted); }
.bf-pchip { padding-left: 0; }
.bf-pchip__band { align-self: stretch; width: 4px; background: var(--os-0); }
.bf-pchip[data-band="1"] .bf-pchip__band { background: var(--os-1); }
.bf-pchip[data-band="2"] .bf-pchip__band { background: var(--os-2); box-shadow: 0 0 10px rgba(60,198,244,.45); }
.bf-pchip[data-band="3"] .bf-pchip__band { background: var(--os-3); box-shadow: 0 0 12px rgba(143,227,251,.6); }
.bf-pchip__av { display: grid; place-items: center; width: 28px; height: 28px; background: var(--panel-3); border: 1px solid var(--line-2); font: 700 13px/1 var(--display); color: var(--cyan-hi); text-transform: uppercase; }
.bf-pchip--me { border-color: var(--cyan-lo); background: linear-gradient(90deg, var(--cyan-tint), var(--panel-2)); }
.bf-pchip--a { border-color: var(--cyan-lo); } .bf-pchip--b { border-color: #8b3a32; }
.bf-pchip--lg { min-height: 44px; font-size: 16px; padding-right: 16px; }
.bf-poschip { padding-left: 10px; }
.bf-dot { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--pc, var(--cyan)); box-shadow: 0 0 8px var(--pc, var(--cyan)); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }
.bf-uchip { padding-left: 4px; }
.bf-uchip img { width: 28px; height: 28px; object-fit: contain; background: var(--bg); border: 1px solid var(--line); }
.bf-uchip b { color: var(--cyan-hi); font: 700 13px/1 var(--mono); }
.bf-mchip { padding-left: 4px; }
.bf-mchip__thumb { width: 28px; height: 28px; background: var(--bg) center/cover no-repeat; border: 1px solid var(--line); }
.bf-ec--sm { min-height: 28px; font-size: 13px; }
.bf-ec--sm img, .bf-ec--sm .bf-mchip__thumb { width: 20px; height: 20px; }
.bf-ec--static { pointer-events: none; }
.bf-os { display: inline-block; padding: 2px 7px; min-width: 3.4em; text-align: center; font: 600 13px/1.3 var(--mono); border: 1px solid var(--os-0); color: #c4d3de; background: rgba(91,115,136,.14); }
.bf-os[data-band="1"] { border-color: var(--os-1); color: #8fcde6; background: rgba(63,147,180,.14); }
.bf-os[data-band="2"] { border-color: var(--os-2); color: var(--cyan); background: rgba(60,198,244,.13); }
.bf-os[data-band="3"] { border-color: var(--os-3); color: var(--cyan-hi); background: rgba(143,227,251,.14); }
.bf-tag { --cut: 5px; --edge: var(--line-3); display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border: 1px solid var(--line-3); background-color: var(--panel-2); color: var(--text-2); font: 600 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bf-tag--cyan { --edge: var(--cyan-lo); border-color: var(--cyan-lo); color: var(--cyan-hi); background-color: var(--cyan-tint); }
.bf-tag--amber { --edge: #8a6a2a; border-color: #8a6a2a; color: var(--amber-hi); background-color: var(--amber-tint); }
.bf-tag--red { --edge: #8b3a32; border-color: #8b3a32; color: var(--red-hi); background-color: var(--red-tint); }
.bf-tag--lost { --edge: var(--line-3); border-color: var(--line-3); color: var(--text-2); background-color: var(--panel-3); }
.bf-tag--quiet { --edge: var(--line-2); border-color: var(--line-2); color: var(--muted); background-color: rgba(9,15,23,.86); }
.bf-tag--solid { --edge: var(--cyan-hi); border-color: var(--cyan-hi); background-color: var(--cyan); color: var(--on-cyan); }
.is-me { --me-edge: var(--cyan); }
.bf-pchip.is-me { border-color: var(--cyan-lo); background: linear-gradient(90deg, var(--cyan-tint), var(--panel-2)); }
.bf-pchip.is-me .bf-ec__t::after { content: "YOU"; margin-left: 8px; padding: 1px 6px; background: var(--cyan); color: var(--on-cyan); font: 700 12px/1.5 var(--display); letter-spacing: .1em; vertical-align: 1px; }
.bf-podium__i.is-me { border-color: var(--cyan); box-shadow: 0 0 24px rgba(60,198,244,.2); }
tr.is-me td:first-child, .bf-card.is-me { box-shadow: inset 3px 0 0 var(--cyan); }
tr.is-me { background: linear-gradient(90deg, rgba(60,198,244,.14), rgba(60,198,244,.03)); }
.bf-youtag { margin-left: 8px; padding: 1px 7px; background: var(--cyan); color: var(--on-cyan); font: 700 12px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }

/* 13 ---------- filter pills (read like a sentence), segmented control, phone bottom-sheet version */
.bf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bf-pill { --cut: 6px; --edge: var(--line-3); position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 14px; border: 1px solid var(--line-3); background-color: var(--panel-2); color: var(--text); font: 600 14px/1.2 var(--body); text-align: left; transition: border-color .15s, background-color .15s; }
.bf-pill:hover, .bf-pill[aria-expanded="true"] { --edge: var(--cyan); border-color: var(--cyan); background-color: var(--cyan-tint); }
.bf-pill__k { font: 600 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bf-pill__v { white-space: nowrap; }
.bf-pill::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex: none; }
.bf-pill--changed { --edge: var(--cyan-lo); border-color: var(--cyan-lo); }
.bf-pill--summary { display: none; width: 100%; max-width: 100%; justify-content: space-between; }
.bf-pill__sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-filters__sentence { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.bf-filters__sentence b { color: var(--text-2); font-weight: 600; }
.bf-filters__reset { color: var(--muted); }
.bf-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line-3); background: var(--panel); overflow-x: auto; scrollbar-width: none; }
.bf-seg::-webkit-scrollbar { display: none; }
.bf-seg button { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-right: 1px solid var(--line-2); background: none; color: var(--muted); font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bf-seg button:last-child { border-right: 0; }
.bf-seg button:hover { color: #fff; background: var(--panel-2); }
.bf-seg button[aria-pressed="true"], .bf-seg button[aria-selected="true"] { background: var(--cyan-tint); color: var(--cyan-hi); box-shadow: inset 0 -3px 0 var(--cyan); }
.bf-optlist { display: flex; flex-direction: column; }
.bf-optlist label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 16px; }
.bf-optlist input { width: 20px; height: 20px; accent-color: var(--cyan); flex: none; }
.bf-optlist small { margin-left: auto; color: var(--muted); font: 500 13px var(--mono); }
.bf-field-h { margin: var(--s-4) 0 var(--s-1); font: 600 12px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
@media (max-width: 760px) {
  .bf-filters .bf-pill:not(.bf-pill--summary) { display: none; }
  .bf-filters .bf-pill--summary { display: flex; }
  .bf-podium { gap: 6px; } .bf-podium__i { padding-inline: 6px; } .bf-podium__v { font-size: 22px; } .bf-podium__n { font-size: 14px; }
  .bf-filters__sentence { font-size: 13px; }
}

/* shared form fields: use on select, input (text, search, number, date) and textarea */
.bf-field { display: grid; gap: 6px; min-width: 0; }
.bf-label { display: block; font: 600 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bf-hint { font-size: 13px; line-height: 1.4; color: var(--muted); }
.bf-input, .bf-select { width: 100%; min-height: 44px; padding: 0 12px; background-color: var(--bg-2); border: 1px solid var(--line-3); border-radius: 0; color: var(--text); font: 500 15px/1.2 var(--body); transition: border-color .15s, background-color .15s; }
textarea.bf-input { padding: 10px 12px; min-height: 120px; line-height: 1.5; resize: vertical; }
.bf-input::placeholder { color: var(--faint); opacity: 1; }
.bf-input:hover, .bf-select:hover { border-color: var(--cyan-lo); }
.bf-input:focus, .bf-select:focus { border-color: var(--cyan); background-color: var(--panel); }
.bf-input[aria-invalid="true"], .bf-select[aria-invalid="true"] { border-color: var(--red); }
.bf-input[type="number"] { font-family: var(--mono); }
.bf-input[type="date"], .bf-input[type="time"] { color-scheme: dark; }
.bf-select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393a9ba' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.bf-select option { background: #0c141e; color: #e7f0f6; }
.bf-input[disabled], .bf-select[disabled] { opacity: .5; cursor: not-allowed; }

/* 14 ---------- tabs (deep-link with #hash), icon tabs */
.bf-tabs__list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-2); margin-bottom: var(--s-5); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bf-tabs__list::-webkit-scrollbar { display: none; }
.bf-tab { position: relative; flex: none; min-height: 52px; padding: 0 20px; border: 0; background: none; color: var(--muted); font: 600 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; scroll-snap-align: start; }
.bf-tab:hover { color: #fff; }
.bf-tab[aria-selected="true"] { color: var(--cyan-hi); background: linear-gradient(180deg, rgba(60,198,244,.12), rgba(60,198,244,0)); }
.bf-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cyan); box-shadow: 0 0 14px rgba(60,198,244,.7); }
.bf-tab small { font: 600 12px/1 var(--mono); color: var(--faint); letter-spacing: 0; }
.bf-tabpanel[hidden] { display: none; }
.bf-tabpanel:focus { outline: none; }
.bf-itabs { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.bf-itabs::-webkit-scrollbar { display: none; }
.bf-itab { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 92px; min-height: 84px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); font: 600 12px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; text-align: center; text-decoration: none; transition: border-color .15s, background .15s; }
.bf-itab img { width: 40px; height: 40px; object-fit: contain; }
.bf-itab:hover { border-color: var(--cyan-lo); color: #fff; }
.bf-itab[aria-selected="true"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--cyan-hi); box-shadow: 0 0 22px rgba(60,198,244,.2), inset 0 -3px 0 var(--cyan); }
@media (max-width: 760px) {
  .bf-tabs__list, .bf-itabs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .bf-tab { padding: 0 16px; }
}

/* 15 ---------- ranking table (cards on phone) */
.bf-table-wrap { position: relative; overflow-x: auto; background: var(--panel); border: 1px solid var(--line-2); }
.bf-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bf-table caption { padding: 12px 16px; text-align: left; font-size: 13px; color: var(--muted); caption-side: bottom; border-top: 1px solid var(--line); }
.bf-table th { position: sticky; top: 0; padding: 0 14px; text-align: left; background: var(--panel-2); color: var(--muted); font: 600 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.bf-table th button { all: unset; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: inherit; }
.bf-table th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bf-table th[aria-sort="ascending"] button::after { content: "\2191"; color: var(--cyan); } .bf-table th[aria-sort="descending"] button::after { content: "\2193"; color: var(--cyan); }
.bf-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bf-table tbody tr { transition: background .12s; }
.bf-table tbody tr:hover { background: rgba(60,198,244,.06); }
.bf-table tbody tr:last-child td { border-bottom: 0; }
.bf-table .num, .bf-table td.c-val { text-align: right; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-table th.num { text-align: right; }
.bf-table td.c-val b { font: 700 18px/1 var(--display); color: var(--text); }
.bf-table td.c-metaall { display: none; }
.bf-table th.bf-only-phone, .bf-table td.bf-only-phone { display: none; }
.bf-rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; font: 700 14px/1 var(--display); color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line-2); }
.bf-rank[data-r="1"] { background: rgba(253,192,76,.14); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(253,192,76,.25); }
.bf-rank[data-r="2"] { background: rgba(180,197,211,.12); border-color: var(--silver); color: var(--silver); }
.bf-rank[data-r="3"] { background: rgba(213,138,96,.14); border-color: var(--bronze); color: var(--bronze); }
.bf-table--mini { font-size: 14px; }
.bf-table--mini th { display: none; }
.bf-table--mini td { padding: 8px 10px; }
.bf-table--mini td:first-child { padding-left: 14px; width: 1%; }
.bf-table--mini td:last-child { padding-right: 14px; }
@media (max-width: 760px) {
  .bf-table-wrap.bf-table-wrap--cards { overflow: visible; background: none; border: 0; }
  .bf-table--cards, .bf-table--cards tbody { display: block; }
  .bf-table--cards thead, .bf-table--cards caption { display: none; }
  .bf-table--cards tr { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "rank name val" "rank meta val"; align-items: center; gap: 2px 12px; margin-bottom: 10px; padding: 14px 14px 14px 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); }
  .bf-table--cards tr:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
  .bf-table--cards td { display: block; padding: 0; border: 0; }
  .bf-table--cards td.bf-only-phone { display: block; }
  .bf-table--cards td.c-rank { grid-area: rank; align-self: center; }
  .bf-table--cards td.c-name { grid-area: name; min-width: 0; font-size: 16px; font-weight: 600; }
  .bf-table--cards td.c-val { grid-area: val; text-align: right; align-self: center; }
  .bf-table--cards td.c-val b { font-size: 22px; }
  .bf-table--cards td.c-metaall { grid-area: meta; display: block; font-size: 13px; color: var(--muted); min-width: 0; }
  .bf-table--cards td.c-meta { display: none; }
  .bf-table--cards td.c-x { display: none; grid-column: 1 / -1; }
  .bf-table--cards tr.is-open td.c-x { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
  .bf-table--cards td.c-x::before { content: attr(data-label); color: var(--muted); font: 600 12px/1.6 var(--display); letter-spacing: .1em; text-transform: uppercase; }
  .bf-table--cards tr.is-me { background: linear-gradient(90deg, rgba(60,198,244,.16), var(--panel)); border-color: var(--cyan-lo); }
  .bf-table--mini tr { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px 12px; margin-bottom: 0; }
}

/* 16 ---------- stat tiles, tip button, evidence badge, verdict */
.bf-tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bf-tile { position: relative; padding: var(--s-4) var(--s-4) var(--s-4) 20px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); min-width: 0; }
.bf-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tile-accent, var(--cyan)); box-shadow: 0 0 14px var(--tile-accent, var(--cyan)); }
.bf-tile--amber { --tile-accent: var(--amber); } .bf-tile--red { --tile-accent: var(--red); } .bf-tile--grey { --tile-accent: var(--line-3); }
.bf-tile__label { display: flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bf-tile__value { margin-top: 8px; font: 700 var(--fs-num)/1 var(--display); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.bf-tile__value small { font-size: max(12px, .5em); font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.bf-tile__sub { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
a.bf-tile { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .2s var(--ease); }
a.bf-tile:hover { border-color: var(--cyan-lo); transform: translateY(-2px); color: inherit; }
.bf-tip { display: inline-grid; place-items: center; flex: none; position: relative; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-3); border-radius: 50%; background: var(--panel-2); color: var(--muted); font: 700 12px/1 var(--mono); text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; }
.bf-tip::after { content: ""; position: absolute; inset: -12px; }   /* 44px hit area */
.bf-tip:hover, .bf-tip[aria-expanded="true"] { border-color: var(--cyan); color: var(--cyan-hi); background: var(--cyan-tint); }
.bf-ev { --edge: var(--ev-c, var(--cyan)); --cut: 5px; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 11px 3px 9px; border: 1px solid var(--ev-c, var(--cyan)); background-color: var(--ev-bg, var(--cyan-tint)); color: var(--ev-t, var(--cyan-hi)); font: 600 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.bf-ev small { font: 500 12px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.bf-ev__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bf-ev__bars i { width: 3px; background: currentColor; opacity: .28; } .bf-ev__bars i:nth-child(1) { height: 5px; } .bf-ev__bars i:nth-child(2) { height: 8px; } .bf-ev__bars i:nth-child(3) { height: 12px; }
.bf-ev--solid .bf-ev__bars i { opacity: 1; }
.bf-ev--fair { --ev-c: var(--amber); --ev-bg: var(--amber-tint); --ev-t: var(--amber-hi); }
.bf-ev--fair .bf-ev__bars i:nth-child(-n+2) { opacity: 1; }
.bf-ev--thin { --ev-c: #5b6e7d; --ev-bg: #121b24; --ev-t: #aebccb; }
.bf-ev--thin .bf-ev__bars i:nth-child(1) { opacity: 1; }
.bf-verdict { position: relative; padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 4px); background: linear-gradient(90deg, rgba(253,192,76,.09), rgba(253,192,76,.015) 60%); border: 1px solid #4a3a18; }
.bf-verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); box-shadow: 0 0 16px rgba(253,192,76,.5); }
.bf-verdict__k { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 12px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.bf-verdict__t { font: 500 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.55 var(--body); color: var(--text); text-wrap: pretty; max-width: 80ch; }
.bf-verdict__t b, .bf-verdict__t strong { font-weight: 600; color: #fff; }
.bf-verdict__f { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* 17 ---------- data viz: range bar, mini histogram, tug of war, podium, opener row */
.bf-range { --lo: 0; --hi: 1; --med: .5; position: relative; padding: 26px 0 0; }
.bf-range__track { position: relative; height: 12px; background: var(--bg-2); border: 1px solid var(--line-2); }
.bf-range__track::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(120,190,230,.1) calc(10% - 1px) 10%); }
.bf-range__band { position: absolute; top: -1px; bottom: -1px; left: calc(var(--lo) * 100%); width: calc((var(--hi) - var(--lo)) * 100%); background: linear-gradient(180deg, var(--rc, var(--cyan)), color-mix(in srgb, var(--rc, var(--cyan)) 55%, #000)); opacity: .9; }
.bf-range__med { position: absolute; top: -7px; bottom: -7px; left: calc(var(--med) * 100% - 2px); width: 4px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); }
.bf-range__lbl { position: relative; height: 18px; margin-top: 10px; font: 500 13px/1 var(--mono); color: var(--muted); }
.bf-range__q { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.bf-range__q--lo { left: min(max(calc(var(--lo) * 100%), 1.7em), calc(100% - 1.7em)); }
.bf-range__q--hi { left: min(max(calc(var(--hi) * 100%), 1.7em), calc(100% - 1.7em)); }
.bf-range--narrow .bf-range__q--lo { transform: translateX(calc(-100% + 3px)); }
.bf-range--narrow .bf-range__q--hi { transform: translateX(-3px); }
.bf-range__top { position: absolute; top: 0; left: min(max(calc(var(--med) * 100%), 1.9em), calc(100% - 1.9em)); transform: translateX(-50%); font: 700 14px/1 var(--mono); color: #fff; white-space: nowrap; }
.bf-hist { position: relative; display: flex; align-items: flex-end; gap: 2px; height: var(--h, 64px); padding-bottom: 1px; border-bottom: 1px solid var(--line-3); }
.bf-hist i { flex: 1; min-width: 2px; height: calc(var(--v) * 100%); min-height: 2px; background: linear-gradient(180deg, var(--cyan), var(--cyan-lo)); opacity: .75; }
.bf-hist i.is-on { background: linear-gradient(180deg, var(--amber-hi), var(--amber)); opacity: 1; }
.bf-hist__mark { position: absolute; bottom: -1px; top: -8px; left: calc(var(--x) * 100%); width: 2px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.bf-tug { display: grid; gap: 6px; }
.bf-tug__label { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.bf-tug__row { display: grid; grid-template-columns: minmax(64px, auto) 1fr minmax(64px, auto); align-items: center; gap: 12px; }
.bf-tug__v { font: 600 16px/1 var(--mono); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-tug__v--a { text-align: right; } .bf-tug__v--b { text-align: left; }
.bf-tug__v.is-lead { color: #fff; font-weight: 700; }
.bf-tug__bars { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 18px; background: var(--bg-2); }
.bf-tug__bars::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--line-3); z-index: 2; }
.bf-tug__bars > div { position: relative; overflow: hidden; }
.bf-tug__bars i { position: absolute; top: 3px; bottom: 3px; width: var(--w, 0%); transition: width .6s var(--ease); }
.bf-tug__bars .a i { right: 0; background: linear-gradient(270deg, var(--a), #1d7a98); opacity: .55; box-shadow: 0 0 14px rgba(60,198,244,.25); }
.bf-tug__bars .b i { left: 0; background: linear-gradient(90deg, var(--b), #a2392d); opacity: .55; box-shadow: 0 0 14px rgba(255,107,91,.25); }
.bf-tug__bars .a.is-lead i, .bf-tug__bars .b.is-lead i { opacity: 1; }
.bf-tug__note { text-align: center; font-size: 12px; color: var(--faint); }
.bf-podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s-3); align-items: end; }
.bf-podium__i { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-4) var(--s-3) var(--s-4); text-align: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s var(--ease); }
.bf-podium__i:hover { border-color: var(--cyan); transform: translateY(-3px); color: inherit; }
.bf-podium__i[data-r="1"] { padding-top: var(--s-6); border-color: #6b5320; background: linear-gradient(180deg, rgba(253,192,76,.14), var(--panel) 70%); box-shadow: 0 0 40px rgba(253,192,76,.1); }
.bf-podium__i[data-r="2"] { padding-top: var(--s-5); } .bf-podium__i[data-r="3"] { padding-top: var(--s-4); }
.bf-podium__i .bf-rank { width: 40px; height: 40px; font-size: 20px; }
.bf-podium__n { display: block; width: 100%; max-width: 100%; font: 700 17px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-podium__v { font: 700 28px/1 var(--display); color: #fff; }
.bf-podium__s { font-size: 13px; color: var(--muted); }
.bf-openers { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.bf-opener { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; padding: 12px 8px 10px; background: var(--panel); border: 1px solid var(--line-2); text-align: center; }
.bf-opener img { width: 56px; height: 56px; object-fit: contain; }
.bf-opener__n { font: 600 13px/1.2 var(--body); color: var(--text-2); }
.bf-opener__p { font: 700 20px/1 var(--display); color: var(--cyan-hi); }
.bf-opener__t { font: 500 12px/1 var(--mono); color: var(--muted); }
.bf-opener:first-child { border-color: var(--cyan-lo); background: linear-gradient(180deg, var(--cyan-tint), var(--panel)); }
.bf-bar { position: relative; height: 6px; background: var(--bg-2); overflow: hidden; }
.bf-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: linear-gradient(90deg, var(--cyan-lo), var(--cyan)); }

/* 18 ---------- overlays: scrim, sheet, drawer, tip popover, toast */
.bf-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(2,5,9,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: bf-fade .18s ease-out; }
.bf-dialog { position: fixed; z-index: 310; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-3); box-shadow: var(--shadow-pop); max-height: 92vh; }
.bf-dialog::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--frame); }
.bf-dialog--sheet { left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); transform: translate(-50%, -50%); animation: bf-pop .2s var(--ease); }
.bf-dialog--drawer { right: 0; top: 0; bottom: 0; width: min(460px, 100vw); max-height: none; animation: bf-slide .24s var(--ease); }
.bf-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.bf-dialog__title { font: 700 18px/1.2 var(--display); letter-spacing: .04em; }
.bf-dialog__body { padding: 16px 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
.bf-dialog__foot { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg-2); }
.bf-dialog__foot .bf-btn { flex: 1; }
.bf-grab { display: none; width: 44px; height: 4px; margin: 8px auto 0; background: var(--line-3); }
@keyframes bf-fade { from { opacity: 0; } }
@keyframes bf-pop { from { opacity: 0; transform: translate(-50%, -46%); } }
@keyframes bf-slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes bf-up { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 760px) {
  .bf-dialog--sheet, .bf-dialog--drawer { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 88vh; transform: none; animation: bf-up .26s var(--ease); border-bottom: 0; }
  .bf-dialog--drawer { max-height: 92vh; }
  .bf-grab { display: block; }
}
.bf-pop { position: absolute; z-index: 320; width: min(320px, calc(100vw - 24px)); padding: 12px 14px 14px; background: var(--panel-2); border: 1px solid var(--cyan-lo); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.5; color: var(--text); animation: bf-fade .12s ease-out; }
.bf-pop__t { margin-bottom: 4px; font: 700 13px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.bf-pop__more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.bf-pop a { font-size: 13px; }
.bf-toasts { position: fixed; z-index: 400; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.bf-toast { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--panel-3); border: 1px solid var(--cyan); box-shadow: var(--shadow-pop), 0 0 24px rgba(60,198,244,.2); font: 500 15px/1.4 var(--body); color: #fff; animation: bf-up .24s var(--ease); pointer-events: auto; }
.bf-toast--warn { border-color: var(--amber); } .bf-toast--error { border-color: var(--red); }
.bf-toast::before { content: ""; width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex: none; }
.bf-toast--warn::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .bf-toast--error::before { background: var(--red); box-shadow: 0 0 10px var(--red); }
@media (max-width: 760px) { .bf-toasts { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); } }

/* 19 ---------- states: needs-new-data ribbon, empty, skeleton, error, banner */
.bf-needs { position: relative; border: 1px dashed #8a6a2a !important; background-image: repeating-linear-gradient(135deg, rgba(253,192,76,.045) 0 10px, transparent 10px 20px); }
.bf-ribbon { --cut: 5px; --edge: var(--amber); display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 3px 12px; border: 1px solid var(--amber); background-color: var(--amber-tint); color: var(--amber-hi); font: 700 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bf-ribbon::before { content: ""; width: 7px; height: 7px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.bf-needs > .bf-ribbon, .bf-ribbon--corner { position: absolute; top: -1px; right: -1px; z-index: 3; }
.bf-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-5); text-align: center; background: var(--panel); border: 1px dashed var(--line-3); }
.bf-empty__ico { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-3); background: var(--panel-2); color: var(--cyan); }
.bf-empty__ico svg { width: 28px; height: 28px; }
.bf-empty h3 { font: 700 20px/1.3 var(--display); }
.bf-empty p { max-width: 46ch; color: var(--muted); font-size: 15px; }
.bf-skel { position: relative; overflow: hidden; background: var(--panel-2); min-height: 16px; }
.bf-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(143,227,251,.08), transparent); animation: bf-shim 1.4s infinite; }
@keyframes bf-shim { to { transform: translateX(100%); } }
.bf-skel--line { height: 14px; margin: 8px 0; } .bf-skel--title { height: 28px; width: 55%; } .bf-skel--tile { height: 96px; } .bf-skel--card { height: 180px; }
.bf-error { padding: var(--s-4) var(--s-5); border: 1px solid #8b3a32; background: var(--red-tint); color: var(--red-hi); }
.bf-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--panel-2); border: 1px solid var(--line-2); }

/* 20 ---------- utilities */
.bf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bf-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bf-nowrap { white-space: nowrap; }
.bf-mt-2 { margin-top: var(--s-2); } .bf-mt-3 { margin-top: var(--s-3); } .bf-mt-4 { margin-top: var(--s-4); } .bf-mt-5 { margin-top: var(--s-5); } .bf-mt-6 { margin-top: var(--s-6); }
.bf-right { margin-left: auto; }
.bf-center { text-align: center; }
.bf-a { color: var(--a); } .bf-b { color: var(--b-hi); }
.bf-hide-phone { } .bf-show-phone { display: none !important; }
@media (max-width: 760px) { .bf-hide-phone { display: none !important; } .bf-show-phone { display: revert !important; } }
@media (min-width: 761px) { .bf-hide-desktop { display: none !important; } }

/* 21 ---------- start-position map (real minimap crop, colour-coded clickable dots) */
.bf-ico { width: 1.25em; height: 1.25em; flex: none; }
.bf-map { margin: 0; }
.bf-map__stage { position: relative; width: 100%; background: #06141f; border: 1px solid var(--line-3); }
.bf-map__stage > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8) contrast(1.06); }
.bf-map__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 35% 40%, rgba(6,10,16,0) 30%, rgba(6,10,16,.55)), linear-gradient(rgba(120,190,230,.05) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(120,190,230,.05) 1px, transparent 1px) 0 0/48px 48px; }
.bf-map__stage::before { content: ""; position: absolute; inset: -1px; z-index: 6; pointer-events: none; background: linear-gradient(var(--cyan), var(--cyan)) top left/18px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left/2px 18px no-repeat, linear-gradient(var(--line-3), var(--line-3)) bottom right/18px 2px no-repeat, linear-gradient(var(--line-3), var(--line-3)) bottom right/2px 18px no-repeat; }
.bf-map__dot { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 44px; height: 44px; transform: translate(-50%, -50%); color: #fff; text-decoration: none; }
.bf-map__dot:hover, .bf-map__dot:focus-visible { z-index: 9; color: #fff; }
.bf-map__pt { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: var(--pc); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); box-shadow: 0 0 18px var(--pc); transition: transform .2s var(--ease); }
.bf-map__pt::before { content: ""; position: absolute; inset: 3px; background: rgba(6,10,16,.55); clip-path: inherit; }
.bf-map__dot::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--pc); opacity: .5; animation: bf-ping 2.8s ease-out infinite; }
a.bf-map__dot:hover .bf-map__pt, a.bf-map__dot:focus-visible .bf-map__pt { transform: scale(1.35); }
.bf-map__dot.is-current .bf-map__pt { transform: scale(1.3); }
.bf-map__dot.is-current::before { opacity: 1; animation: none; inset: 3px; }
@keyframes bf-ping { 0% { transform: scale(.7); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.bf-map__lbl { position: absolute; left: calc(100% - 8px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; white-space: nowrap; background: rgba(6,10,16,.88); border: 1px solid color-mix(in srgb, var(--pc) 55%, #000); border-left: 3px solid var(--pc); font: 600 13px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; transition: background .15s, border-color .15s; }
.bf-map__dot.is-flip .bf-map__lbl { left: auto; right: calc(100% - 8px); }
a.bf-map__dot:hover .bf-map__lbl, a.bf-map__dot:focus-visible .bf-map__lbl { background: var(--pc); color: #04101a; border-color: var(--pc); }
.bf-map__card { display: none; position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); width: 230px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--pc); box-shadow: var(--shadow-pop); font: 400 13px/1.45 var(--body); text-transform: none; letter-spacing: 0; text-align: left; pointer-events: none; }
.bf-map__card b { display: block; font: 700 14px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc); margin-bottom: 2px; }
.bf-map__card span { display: block; color: var(--text-2); }
.bf-map__dot.is-flip .bf-map__card { left: auto; right: 0; transform: none; }
.bf-map__dot.is-below .bf-map__card { bottom: auto; top: calc(100% - 2px); }
@media (hover: hover) { .bf-map__dot:hover .bf-map__card, .bf-map__dot:focus-visible .bf-map__card { display: block; } }
.bf-map figcaption { margin-top: 8px; }
@media (max-width: 760px) {
  .bf-map__lbl { font-size: 12px; padding: 3px 8px; letter-spacing: .04em; }
  .bf-map__pt { width: 14px; height: 14px; }
}
/* 22 ---------- map context: the map chip and sheet, start roles, the starts picture, calm notes */
button.bf-more { padding: 0; border: 0; background: none; cursor: pointer; }
.bf-mapnote { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: var(--s-3); padding: 6px 14px; background: rgba(16,27,39,.62); border: 1px solid var(--line-2); border-left: 3px solid var(--line-3); font-size: 14px; color: var(--text-2); }
[data-mapnote]:empty { display: none; }
[data-mapnote] { margin-bottom: var(--s-4); }
[data-mapnote] .bf-mapnote { margin-top: 0; }

/* map art stand-in (contour lines) for thumbnails of maps that have no picture */
.bf-mapart { background: repeating-radial-gradient(circle at 32% 42%, rgba(120,190,230,.28) 0 1px, transparent 1px 7px), linear-gradient(135deg, #0d1c2a, #08111a); }

/* the map chip in the header and its sheet */
.bf-mapchip { --cut: 7px; --edge: var(--line-3); position: relative; display: inline-flex; align-items: stretch; flex: none; min-height: 44px; border: 1px solid var(--line-3); background-color: var(--panel-2); color: var(--text); }
.bf-mapchip:hover, .bf-mapchip:focus-within { --edge: var(--cyan); border-color: var(--cyan); }
.bf-mapchip__main { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: -1px 0 -1px -1px; padding: 3px 8px 3px 5px; border: 0; background: none; color: inherit; text-align: left; }
.bf-mapchip__main:hover { color: var(--cyan-hi); }
.bf-mapchip__main::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.bf-mapchip__thumb { display: grid; place-items: center; flex: none; width: 32px; height: 32px; background: var(--panel-3) center / cover no-repeat; border: 1px solid var(--line-3); color: var(--cyan-hi); }
.bf-mapchip__thumb svg { width: 18px; height: 18px; }
.bf-mapchip__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bf-mapchip__k { font: 500 12px/1.2 var(--body); color: var(--muted); }
.bf-mapchip__v { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.25 var(--body); }
.bf-mapchip__x { position: relative; flex: none; width: 34px; border: 0; border-left: 1px solid var(--line-2); background: none; color: var(--muted); display: grid; place-items: center; }
.bf-mapchip__x::after { content: ""; position: absolute; inset: -4px -5px; }
.bf-mapchip__x:hover { color: var(--cyan-hi); background: var(--cyan-tint); }
.bf-mapchip__x svg { width: 14px; height: 14px; }
.bf-maplist { display: flex; flex-direction: column; margin-top: var(--s-3); }
.bf-maprow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 8px 6px 10px; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; background: none; color: var(--text); text-align: left; }
.bf-maprow:hover { background: linear-gradient(90deg, rgba(60,198,244,.12), rgba(60,198,244,.02)); }
.bf-maprow.is-cur { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(60,198,244,.16), rgba(60,198,244,.03)); }
.bf-maprow__img { display: block; width: 52px; height: 40px; background: var(--panel-3) center / cover no-repeat; border: 1px solid var(--line-2); overflow: hidden; }
.bf-maprow__img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.85); }
.bf-maprow__img svg { width: 20px; height: 20px; margin: 9px 15px; color: var(--cyan); }
.bf-maprow__n { display: block; font: 600 15px/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-maprow__s { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); }
.bf-mapsheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: var(--s-3); }
.bf-mapchip:has(.bf-mapchip__x) .bf-mapchip__main::after { display: none; }   /* the x replaces the arrow once a map is picked */
@media (min-width: 761px) {   /* the desktop header is full with the map chip in it: Compare keeps its icon (its label stays as the accessible name), search and the Me name give a little */
  .bf-header .bf-compare { padding-inline: 12px; }
  .bf-compare__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bf-header .bf-onebox--header { min-width: 160px; }
  .bf-header .bf-me__name { max-width: 96px; }
}
@media (min-width: 1240px) {   /* one row: a little less air between the nav links so search keeps its room */
  .bf-header__in { gap: 14px; }
  .bf-nav a { padding-inline: 8px; }
  .bf-nav a[aria-current="page"]::after, .bf-nav a.is-here::after { left: 8px; right: 8px; }
}
@media (max-width: 1000px) {   /* tablet and phone: the chip is just its picture (the sheet has the name) */
  .bf-mapchip { min-width: 44px; justify-content: center; }
  .bf-mapchip__main { min-width: 44px; margin: -1px; padding: 3px; gap: 0; justify-content: center; }
  .bf-mapchip__main::after, .bf-mapchip__txt, .bf-mapchip__x { display: none; }
  .bf-mapchip__thumb { width: 34px; height: 34px; }
}

/* start roles: the symbol (a chamfered tile, one colour per role, two halves for a mix), the chip and the dots */
.bf-rm { --rm: 28px; --rc: var(--role-front); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--rm); height: var(--rm); vertical-align: middle; }
.bf-rm::before, .bf-rm::after { content: ""; position: absolute; }
.bf-rm::before { inset: 0; background: linear-gradient(135deg, var(--rc) 50%, var(--rc2, var(--rc)) 50%); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.bf-rm::after { inset: 1.5px; background: linear-gradient(var(--tint, transparent), var(--tint, transparent)), rgba(6,10,16,.92); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.bf-rm__g { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1px; }
.bf-rm svg { display: block; width: calc(var(--rm) * .6); height: calc(var(--rm) * .6); color: var(--rc); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.bf-rm--duo svg { width: calc(var(--rm) * .4); height: calc(var(--rm) * .4); }
.bf-rm--duo svg:last-child { color: var(--rc2); }
.bf-rolechip { --rm: 24px; padding: 0 12px 0 5px; gap: 8px; min-height: 34px; border-color: color-mix(in srgb, var(--rc, var(--role-front)) 40%, var(--line-2)); cursor: default; }
.bf-rolechip.bf-ec--sm { --rm: 20px; min-height: 28px; padding-right: 10px; }
.bf-rolechip--bare { min-height: 0; padding: 0; gap: 6px; border-color: transparent; background: none; font-weight: 500; color: var(--text-2); }
.bf-roledots { display: inline-flex; align-items: center; gap: 3px; }
.bf-roledots i { display: block; width: 9px; height: 9px; background: var(--rc); box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 60%, transparent); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }

/* the starts picture: the real map picture with every start drawn as a role symbol */
.bf-sm { margin: 0; }
.bf-sm__stage { position: relative; width: min(100%, calc(var(--mh, 560px) * var(--ar, 1))); aspect-ratio: var(--ar, 1); margin-inline: auto; background: #06141f; border: 1px solid var(--line-3); }
.bf-sm__stage > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8) contrast(1.06); }
.bf-sm__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% 45%, rgba(6,10,16,0) 35%, rgba(6,10,16,.5)), linear-gradient(rgba(120,190,230,.05) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(120,190,230,.05) 1px, transparent 1px) 0 0/48px 48px; }
.bf-sm__stage::before { content: ""; position: absolute; inset: -1px; z-index: 6; pointer-events: none; background: linear-gradient(var(--cyan), var(--cyan)) top left/18px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left/2px 18px no-repeat, linear-gradient(var(--line-3), var(--line-3)) bottom right/18px 2px no-repeat, linear-gradient(var(--line-3), var(--line-3)) bottom right/2px 18px no-repeat; }
.bf-sm__m { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 0; background: none; display: grid; place-items: center; }
.bf-sm__m .bf-rm { --rm: 28px; transition: transform .15s var(--ease); }
.bf-sm__m[data-side="0"] .bf-rm { --tint: rgba(60,198,244,.2); }
.bf-sm__m[data-side="1"] .bf-rm { --tint: rgba(255,107,91,.2); }
.bf-sm__m:hover, .bf-sm__m:focus-visible { z-index: 9; }
.bf-sm__m:hover .bf-rm, .bf-sm__m.is-sel .bf-rm { transform: scale(1.18); }
.bf-sm__m.is-sel { z-index: 9; }
.bf-sm__m.is-sel .bf-rm::before { background: #fff; }
.bf-sm__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.bf-sm__sides { display: inline-flex; align-items: center; gap: 6px 12px; margin-left: 6px; font-size: 12px; color: var(--muted); }
.bf-sm__sides i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }
.bf-sm__sides i.a { background: rgba(60,198,244,.55); border: 1px solid var(--cyan); } .bf-sm__sides i.b { background: rgba(255,107,91,.5); border: 1px solid var(--red); }
.bf-sm__sel { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 10px 14px 10px 12px; background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--rc, var(--line-3)); font-size: 14px; line-height: 1.45; color: var(--text-2); }
.bf-sm__sel[hidden] { display: none; }
.bf-sm__sel b { color: var(--text); font: 700 16px/1.3 var(--display); letter-spacing: .02em; }
.bf-sm__sel small { display: block; font-size: 12px; color: var(--muted); }
.bf-sm figcaption { margin-top: 8px; }

/* radar boot-up: one sweep line across the picture, then the starts ping in one by one. Under 1.2 s, never loops, off with reduced motion. */
.bf-radar__sweep { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; opacity: 0; }
.bf-radar__sweep::before { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(60,198,244,0) calc(100% - 110px), rgba(60,198,244,.22) calc(100% - 3px), var(--cyan-hi) calc(100% - 3px)); filter: drop-shadow(0 0 6px rgba(60,198,244,.7)); }
@keyframes bf-sweep-x { to { transform: translateX(0); } }
@keyframes bf-sweep-op { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bf-rm-in { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.22); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bf-rm-ring { 0% { opacity: 0; transform: scale(.55); } 25% { opacity: .85; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes bf-rm-vis { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .is-armed:not(.is-boot) [data-rm] { opacity: 0; }
  .is-boot .bf-radar__sweep { animation: bf-sweep-op .55s linear both; }
  .is-boot .bf-radar__sweep::before { animation: bf-sweep-x .55s cubic-bezier(.45, .05, .3, 1) both; }
  .is-boot .bf-sm__m .bf-rm { animation: bf-rm-in .26s var(--ease) var(--d, .42s) backwards; }
  .is-boot .bf-sm__m::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid var(--rc, var(--cyan)); animation: bf-rm-ring .3s ease-out var(--d, .42s) backwards; pointer-events: none; }
  .is-boot .bf-map__dot[data-rm] { animation: bf-rm-vis .01s linear var(--d, .42s) backwards; }
  .is-boot .bf-map__dot[data-rm] .bf-map__pt { animation: bf-rm-in .26s var(--ease) var(--d, .42s) backwards; }
}

/* 23 ---------- production additions */
/* Shown only when JavaScript is off: the shell is built by bf.js, so the server sends a plain list of links instead. */
.bf-noscript { max-width: var(--max); margin: 0 auto; padding: var(--s-4) var(--gutter); }
.bf-noscript nav, .bf-noscript p { margin: 0 0 var(--s-3); }
.bf-noscript ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bf-noscript a { display: inline-flex; align-items: center; min-height: 44px; }
/* The optional analytics cookie button (assets/analytics) sits above the phone tab bar instead of on top of it. */
@media (max-width: 760px) {
  html body #bf-cookie-settings { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); }
}

/* The community Discord (the invitation is set once, in site_v2_links.py; the header button, the More sheet row and the footer link are drawn by bf.js, the Community hero button
   by the server). The logo alone is Discord's blurple. The button is a .bf-btn--secondary like Compare: same height, cut corners and focus ring. Where the header has no room for
   the word "Discord" (see the media query below) only the logo shows, and title and aria-label carry the name. */
.bf-discord { gap: 8px; min-width: 44px; padding-inline: 11px; }
.bf-discord .bf-discord__logo { width: 20px; height: 20px; color: var(--discord); }
.bf-discord__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bf-opt--discord { border-bottom: 1px solid var(--line); }   /* the More sheet's other rows get this and their sub-line wrapping from inline styles in bf.js; this row needs no style attribute */
.bf-opt--discord .bf-opt__s { white-space: normal; }
.bf-opt--discord .bf-discord__logo { width: 22px; height: 22px; color: var(--discord); }
.bf-footer li a.bf-footer__discord { min-height: 44px; margin-block: -4px; }   /* a 44px target that keeps the list's 36px rhythm */
/* With the Discord button in it the one-row header's search is 223px, not 277px: the placeholder is cut with an ellipsis instead of mid-letter (the original header already did this when the Me name was long). */
.bf-onebox--header .bf-onebox__input { text-overflow: ellipsis; }
/* The word "Discord" next to the logo has no room in the header: the one-row header is at its full 1240px (search is 223px with the icon, 150px with the word), and
   below 1240 the extra row only helps the nav. To show the word where a header has room, un-hide .bf-discord__t in a media query for that width. */
@media (max-width: 384px) and (min-width: 355px) {   /* small phones: the top bar also holds the Discord icon (44px, next to Me), so a little less air keeps it all on screen (390 and wider need none) */
  .bf-header__tools { gap: 4px; }
  .bf-brand { font-size: 17px; letter-spacing: .08em; }
  .bf-me { padding: 4px 5px; }
}
@media (max-width: 354px) { .bf-header .bf-discord { display: none; } }   /* too narrow for another button: the More sheet has the "Join our Discord" row */