/*
 * Zilla Engine · B+ match centre (#15 · boards 48–51) and shot chart (#16 · boards 52–53)
 * ───────────────────────────────────────────────────────────────────────────────────────
 * Builds on bplus.css (hero, crest, section header, momentum, leaders, highlight tiles).
 * Colours only from tokens.css; team colours arrive inline as --tc / --tc-h / --tc-a.
 */

/* ═══════════════ Hero (match centre) ═══════════════ */
.bp-mc .bp-hero { height: 440px; }
.bp-mc .bp-hero__team { top: 62px; }
.bp-mc .bp-hero__center { top: 52px; }
.bp-mc .bp-hero__info { margin-top: 14px; font-size: 16px; }
.bp-mc .bp-hero__score .is-lose { color: rgba(255,255,255,.42); }
.bp-mc__tag--final { background: var(--white); }
.bp-mc__tag--final > span { color: var(--black); }
.bp-mc__tag--off { background: var(--surface-3); }
.bp-mc .bp-hero__count--lbl { font-size: 120px; gap: 22px; }
.bp-mc__grid3 .bp-sh { flex-wrap: wrap; }
.bp-mc__grid3 .bp-sh__plate { max-width: 100%; }
.bp-mc__grid3 .bp-sh__title { white-space: normal; font-size: 36px; line-height: .95; }
.bp-mc__vs { font-size: 140px; line-height: 1; margin-top: 8px; color: rgba(255,255,255,.85); }

/* Tab bar under the hero (overlaps its bottom edge on desktop) */
.bp-mc-tabs {
  position: relative; z-index: 2; margin-top: -58px; height: 58px;
  display: flex; align-items: stretch; background: rgba(0,0,0,.82);
}
.bp-mc-tabs__list { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bp-mc-tabs__list::-webkit-scrollbar { display: none; }
.bp-mc-tab {
  display: flex; align-items: center; padding: 0 26px; flex: none; font-size: 17px; color: var(--sub);
  background: none; border: 0; cursor: pointer; transform: skewX(-12deg); margin-left: -6px;
}
.bp-mc-tab > span { transform: skewX(12deg); }
.bp-mc-tab:first-child { margin-left: -14px; padding-left: 40px; }
.bp-mc-tab:hover { color: var(--text); }
.bp-mc-tab .s { display: none; }
.bp-mc-tab.is-active { background: var(--league-accent); color: var(--ink); }
.bp-mc-tabs__cta {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 230px; padding: 0 26px 0 40px; font-size: 18px; background: var(--white); color: var(--black);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); border: 0; cursor: pointer;
}
.bp-mc-tabs__cta--dark { background: var(--surface-3); color: var(--text); min-width: 150px; margin-left: -18px; }
.bp-mc-tabs__cta svg { flex: none; }

/* Anchored sections clear the sticky navbar */
.bp-mc [id^="mc-"] { scroll-margin-top: 88px; }

/* ═══════════════ Layout ═══════════════ */
.bp-mc__grid3 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 400px; gap: 32px; }
.bp-mc__grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
.bp-mc__grid2 > *, .bp-mc__grid3 > * { min-width: 0; }
.bp-mc__first { margin-top: 34px; }
.bp-mc__first > * > .bp-sh:first-child, .bp-mc__first > .bp-sh:first-child { margin-top: 0; }

/* ═══════════════ Head-to-head ═══════════════ */
.bp-h2h__tally { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.bp-h2h__n { font-size: 52px; color: var(--tc-h); }
.bp-h2h__n--a { color: var(--tc-a); }
.bp-h2h__bar { flex: 1; display: flex; gap: 4px; height: 14px; }
.bp-h2h__bar i { display: block; transform: skewX(-12deg); background: var(--tc-h); }
.bp-h2h__bar i + i { background: var(--tc-a); }
.bp-h2h__row {
  position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr) 70px minmax(0,1fr);
  align-items: center; gap: 10px; height: 50px; margin-top: 6px; padding: 0 16px 0 18px; background: var(--surface);
}
.bp-h2h__row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.bp-h2h__row:hover { background: var(--surface-2); }
.bp-h2h__date { font-size: 12px; color: var(--muted); }
.bp-h2h__t { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.bp-h2h__t--a { text-align: left; }
.bp-h2h__t.is-lose { color: var(--dim); }
.bp-h2h__sc { font-size: 22px; text-align: center; }

/* ═══════════════ Comparison bars (season / live stats) ═══════════════ */
.bp-cmp { margin-top: 4px; }
.bp-cmp__row { padding: 10px 0 0; }
.bp-cmp__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.bp-cmp__v { font-size: 30px; min-width: 70px; }
.bp-cmp__v--a { text-align: right; }
.bp-cmp__v.is-better { color: var(--league-accent); }
.bp-cmp__lbl { font-size: 13px; color: var(--sub); padding-bottom: 4px; text-align: center; }
.bp-cmp__bars { display: flex; gap: 6px; height: 10px; margin-top: 6px; }
.bp-cmp__bars i { display: block; transform: skewX(-12deg); background: var(--tc-h); transition: flex-basis .4s ease; min-width: 4px; }
.bp-cmp__bars i + i { background: var(--tc-a); }

/* ═══════════════ Form strip ═══════════════ */
.bp-formrow {
  display: grid; grid-template-columns: minmax(0,1fr) repeat(5, 34px); align-items: center; gap: 10px;
  height: 60px; padding: 0 18px; margin-top: 6px; background: var(--surface);
}
.bp-formrow__name { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-formrow .bp-form { width: 26px; height: 26px; justify-self: center; }
.bp-formrow .bp-form--D { background: var(--muted); }

/* ═══════════════ Side panels (who wins / game info / officials) ═══════════════ */
.bp-mc-panel { background: var(--panel); border-top: 4px solid var(--league-accent); padding: 18px 16px 16px; }
.bp-mc-panel + .bp-mc-panel { margin-top: 12px; }
.bp-mc-panel__title { font-size: 28px; margin-bottom: 14px; }
.bp-pick { display: flex; height: 40px; }
.bp-pick > span { display: flex; align-items: center; padding: 0 12px; font-size: 19px; white-space: nowrap; overflow: hidden; }
.bp-pick__h { background: var(--tc-h); }
.bp-pick__a { background: var(--tc-a); justify-content: flex-end; }
.bp-mc-panel__note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.bp-info { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bp-info:last-child { border-bottom: 0; }
.bp-info__k { font-size: 12px; color: var(--muted); flex: none; }
.bp-info__v { font-size: 18px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.bp-mc-preview { margin-top: 10px; padding: 18px 20px; background: var(--surface); border-left: 4px solid var(--league-accent); color: var(--sub); font-size: 15px; line-height: 1.6; }
.bp-mc-preview p + p { margin-top: 10px; }

/* Lineups (before + on court) */
.bp-lineup { margin-top: 6px; }
.bp-lineup__row {
  position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px 0 18px; margin-top: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, transparent), var(--surface) 45%);
}
.bp-lineup__row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.bp-lineup__n { width: 34px; font-size: 18px; color: var(--muted); }
.bp-lineup__name { flex: 1; min-width: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-lineup__tag { font-size: 11px; color: var(--league-accent); }
.bp-lineup__pts { font-size: 20px; }
.bp-lineup__team { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-top: 14px; }
.bp-lineup__team .bp-crest { --s: 26px; }

/* ═══════════════ Momentum panel (live + after) ═══════════════ */
.bp-mc-mo {
  display: flex; align-items: center; gap: 24px; margin-top: 34px; padding: 26px 22px 12px;
  background: var(--panel); border-top: 4px solid var(--live);
}
.bp-mc-mo--after { border-top-color: var(--line-2); margin-top: 8px; }
.bp-mc-mo__chart { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; }
.bp-mc-mo__chart .bp-mo { flex: 1 1 auto; min-width: 0; }
.bp-mc-mo .bp-mo { width: 100%; max-width: 860px; }
.bp-mc-mo .bp-mo__blocks { gap: 1px; }
.bp-mc-mo [data-run]:empty { display: none; }

/* ═══════════════ Play-by-play ═══════════════ */
.bp-pbp__q { display: flex; gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; }
.bp-pbp__q button { font-size: 13px; min-height: 28px; padding: 5px 12px; }
.bp-pbp__q button.is-on { background: var(--league-accent); color: var(--ink); }
.bp-pbp__sep { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.bp-pbp__sep::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.bp-pbp__row {
  position: relative; display: grid; grid-template-columns: 58px 28px minmax(0,1fr) auto 76px;
  align-items: center; gap: 12px; height: 54px; margin-top: 4px; padding: 0 16px 0 18px; background: var(--surface);
}
.bp-pbp__row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.bp-pbp__row.is-new { background: linear-gradient(90deg, color-mix(in srgb, var(--live) 18%, var(--surface)), var(--surface) 50%); }
.bp-pbp__row.is-miss { opacity: .72; }
.bp-pbp__clock { font-size: 19px; color: var(--muted); }
.bp-pbp__row .bp-crest { --s: 26px; font-size: 10px; }
.bp-pbp__who { min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; white-space: nowrap; }
.bp-pbp__name { font-size: 21px; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.bp-pbp__what { font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.bp-pbp__in { color: var(--win); }
.bp-pbp__pts { min-width: 40px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; transform: skewX(-12deg); background: var(--tc); font-size: 13px; color: var(--white); }
.bp-pbp__pts > span { transform: skewX(12deg); }
.bp-pbp__pts--none { background: none; color: var(--dim); }
.bp-pbp__score { font-size: 21px; text-align: right; }
.bp-pbp__empty { margin-top: 6px; }
.bp-pbp__list { max-height: 780px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }

/* ═══════════════ Stream + sidebar (Feed / Stats / Chat) ═══════════════ */
.bp-stream { display: grid; grid-template-columns: minmax(0,1fr) 360px; margin-top: 24px; background: var(--panel); border-top: 4px solid var(--live); }
.bp-stream__video { position: relative; aspect-ratio: 16 / 9; background: var(--black); overflow: hidden; }
.bp-stream__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-stream__overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: flex-start; pointer-events: none; }
.bp-stream__alert { display: inline-flex; padding: 10px 18px; transform: skewX(-12deg); background: var(--tc, var(--live)); animation: bp-mc-pop .3s ease both; }
.bp-stream__alert > span { transform: skewX(12deg); font-size: 19px; color: var(--white); }
@keyframes bp-mc-pop { from { opacity: 0; transform: skewX(-12deg) translateY(10px); } }
.bp-stream__side { display: flex; flex-direction: column; min-height: 0; max-height: 100%; border-left: 1px solid var(--line); }
.bp-stream__tabs { display: flex; flex: none; border-bottom: 1px solid var(--line); }
.bp-stream__tab { flex: 1; height: 44px; background: none; border: 0; color: var(--sub); font-size: 15px; cursor: pointer; }
.bp-stream__tab.is-on { color: var(--text); box-shadow: inset 0 -3px 0 var(--league-accent); }
.bp-stream__body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 10px; }
.bp-feed__item { display: grid; grid-template-columns: 52px 34px minmax(0,1fr) 44px; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.bp-feed__sc { font-size: 15px; color: var(--sub); }
.bp-feed__team { font-size: 11px; color: var(--tc); }
.bp-feed__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-feed__txt b { font-weight: 700; }
.bp-feed__ck { text-align: right; color: var(--muted); font-size: 12px; }
.bp-feed__item.is-score .bp-feed__sc { color: var(--text); }
.bp-chat__msg { padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.bp-chat__who { font-size: 12px; color: var(--league-accent); margin-right: 6px; }
.bp-chat__time { font-size: 11px; color: var(--dim); margin-left: 6px; }
.bp-chat__form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); flex: none; }
.bp-chat__form input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: 14px; }
.bp-chat__note { padding: 8px 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); flex: none; }
.bp-chat__note a, .bp-chat__note button { color: var(--league-accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ═══════════════ Mini shot chart (court) ═══════════════ */
.bp-court { position: relative; background: var(--panel); border: 1px solid var(--line); }
.bp-court svg { display: block; width: 100%; height: auto; }
.bp-court__line { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 2; }
.bp-court__rim { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2; }
.bp-court__made { stroke: var(--white); stroke-width: 2; }
.bp-court__miss { fill: none; stroke: var(--live); stroke-width: 3; stroke-linecap: round; }
.bp-court__legend { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--sub); flex-wrap: wrap; align-items: center; }
.bp-court__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); background: var(--surface-3); vertical-align: -1px; margin-right: 6px; }
.bp-court__legend .x { color: var(--live); margin-right: 6px; font-style: normal; }
.bp-court__link { margin-left: auto; color: var(--league-accent); }

/* ═══════════════ Recap card + periods ═══════════════ */
.bp-recap { position: relative; padding: 22px 26px 24px; background: linear-gradient(110deg, color-mix(in srgb, var(--tc) 22%, var(--panel)), var(--panel) 60%); border-top: 4px solid var(--league-accent); }
.bp-recap__kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--champion); }
.bp-recap__title { font-size: 46px; margin-top: 12px; overflow-wrap: anywhere; }
.bp-recap__lead { font-size: 15px; color: var(--sub); line-height: 1.6; margin-top: 12px; max-width: 70ch; }
.bp-recap__more { margin-top: 10px; font-size: 15px; color: var(--sub); line-height: 1.6; max-width: 70ch; }
.bp-recap__more p + p { margin-top: 10px; }
.bp-recap .bp-btn { margin-top: 16px; }

.bp-periods { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-top: 14px; }
.bp-periods th { font-size: 12px; color: var(--muted); text-align: center; padding: 0 6px 2px; font-weight: 700; }
.bp-periods th:first-child { text-align: left; padding-left: 6px; }
.bp-periods td { height: 50px; background: var(--surface); text-align: center; font-size: 22px; }
.bp-periods td:first-child { position: relative; text-align: left; padding-left: 18px; }
.bp-periods td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.bp-periods td.is-win { color: var(--league-accent); }

/* ═══════════════ Box score ═══════════════ */
.bp-box { overflow-x: auto; margin-top: 6px; scrollbar-width: thin; }
.bp-box table { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0 4px; }
.bp-box th { font-size: 12px; color: var(--muted); font-weight: 700; padding: 6px 8px; text-align: center; white-space: nowrap; }
.bp-box th:first-child { text-align: left; }
.bp-box td { height: 46px; padding: 0 8px; background: var(--surface); text-align: center; font-size: 20px; white-space: nowrap; }
.bp-box td:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; min-width: 210px; max-width: 240px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, var(--surface)), var(--surface));
  padding-left: 18px;
}
.bp-box td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.bp-box__p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-box__p .bp-crest { --s: 28px; font-size: 10px; }
.bp-box__p > span { display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.bp-box__n { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.bp-box__j { font-size: 11px; color: var(--muted); white-space: nowrap; flex: none; }
.bp-box td.bp-box__pts { color: var(--league-accent); }
.bp-box tr.is-total td { background: var(--surface-2); color: var(--text); }
.bp-box tr.is-total td:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 35%, var(--surface-2)), var(--surface-2)); }
.bp-box__team { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 24px; }
.bp-box__team .bp-crest { --s: 30px; }
.bp-box__team small { font-size: 13px; color: var(--muted); }

/* Team comparison extras + timeline */
.bp-adv { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.bp-adv__c { padding: 12px 14px; background: var(--surface); }
.bp-adv__k { font-size: 12px; color: var(--muted); }
.bp-adv__v { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 26px; }
.bp-adv__v .h { color: var(--tc-h); }
.bp-adv__v .a { color: var(--tc-a); }
.bp-tl { margin-top: 6px; padding: 16px 16px 10px; background: var(--panel); }
.bp-tl svg { display: block; width: 100%; height: 120px; }
.bp-tl__h { fill: none; stroke: var(--tc-h); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.bp-tl__a { fill: none; stroke: var(--tc-a); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.bp-tl__keys { display: flex; gap: 18px; font-size: 13px; margin-top: 8px; }
.bp-tl__keys span::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--k); }

/* Photos (reuses .bp-hl tiles) */
.bp-mc .bp-hls { padding: 0; }
.bp-mc a.bp-hl { cursor: pointer; }

/* ═══════════════ Shot chart page (#16) ═══════════════ */
.bp-sc__head { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; padding-top: 30px; }
.bp-sc__title { font-size: 84px; }
.bp-sc__sub { font-size: 17px; color: var(--sub); padding-bottom: 10px; }
.bp-sc__back { display: inline-flex; margin-top: 18px; font-size: 14px; color: var(--league-accent); }
.bp-sc__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.bp-sc__bar .grow { flex: 1; }
.bp-sc__sel { position: relative; display: inline-flex; transform: skewX(-12deg); background: var(--surface-2); }
.bp-sc__sel select {
  transform: skewX(12deg); appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--white);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 16px;
  padding: 9px 34px 9px 18px; cursor: pointer; max-width: 260px;
}
.bp-sc__sel select option, .bp-sc__sel select optgroup { background: var(--surface-2); color: var(--text); }
.bp-sc__sel::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) skewX(12deg); color: var(--muted); pointer-events: none; font-size: 12px; }
.bp-sc__seg .bp-btn { min-height: 36px; }
.bp-sc__seg .bp-btn.is-on { background: var(--league-accent); color: var(--ink); }
.bp-sc__seg { display: inline-flex; gap: 4px; }
.bp-sc__grid { display: grid; grid-template-columns: 700px minmax(0,1fr); gap: 60px; margin-top: 24px; align-items: start; }
.bp-sc__grid > * { min-width: 0; }
.bp-sc__court { position: relative; }
.bp-sc__tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 6px 10px; background: var(--black);
  border: 1px solid var(--line-2); font-size: 13px; white-space: nowrap; pointer-events: none; z-index: 3;
}
.bp-sc__tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.bp-sc__tile { padding: 16px 16px 14px; background: var(--surface); border-top: 4px solid var(--league-accent); min-width: 0; }
.bp-sc__tile b { display: block; font-size: 52px; white-space: nowrap; }
.bp-sc__tile span { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.bp-zone { display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(80px,160px) 64px; align-items: center; gap: 16px; height: 50px; padding: 0 14px; margin-top: 4px; background: var(--surface); }
.bp-zone__n { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-zone__c { font-size: 13px; color: var(--muted); text-align: right; }
.bp-zone__bar { height: 8px; background: var(--surface-3); }
.bp-zone__bar i { display: block; height: 100%; background: var(--league-accent); transition: width .3s; }
.bp-zone__p { font-size: 24px; text-align: right; }
.bp-best { position: relative; padding: 20px 22px; background: linear-gradient(110deg, var(--surface-2), var(--surface) 60%); margin-top: 6px; overflow: hidden; }
.bp-best b { display: block; font-size: 40px; }
.bp-best span { display: block; font-size: 12px; color: var(--sub); margin-top: 6px; }
.bp-sc__zone { transition: fill-opacity .3s; }
.bp-sc__zlbl { font-family: var(--font-display); font-weight: 800; font-style: italic; fill: var(--white); }

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 1280px) {
  .bp-mc__grid3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .bp-mc__grid3 > :last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .bp-mc__grid3 > :last-child .bp-mc-panel + .bp-mc-panel { margin-top: 0; }
  .bp-sc__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
}
@media (max-width: 1100px) {
  .bp-stream { grid-template-columns: minmax(0,1fr); }
  .bp-stream__side { border-left: 0; border-top: 1px solid var(--line); height: 360px; }
}
@media (max-width: 900px) {
  .bp-mc__grid2, .bp-mc__grid3, .bp-sc__grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .bp-mc__grid3 > :last-child { display: block; }
  .bp-mc__grid3 > :last-child .bp-mc-panel + .bp-mc-panel { margin-top: 12px; }
  .bp-adv { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .bp-mc .bp-hero { height: 240px; }
  .bp-mc .bp-hero__center { top: 50%; transform: translate(-50%, -55%); }
  .bp-mc .bp-hero__score { font-size: 76px; }
  .bp-mc .bp-hero__score .bp-crest { --s: 52px; }
  .bp-mc .bp-hero__count--lbl { font-size: 54px; gap: 12px; }
  .bp-mc .bp-hero__count--lbl small { font-size: 10px; margin-top: 4px; }
  .bp-mc__countrow { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .bp-mc__countrow .bp-crest { --s: 48px; }
  .bp-mc__vs { font-size: 60px; }
  .bp-mc__grid3 .bp-sh__title { font-size: 26px; }
  .bp-mc .bp-sh__rule { display: none; }
  .bp-mc .bp-sh__link { margin-left: auto; font-size: 12px; }
  .bp-mc .bp-sh { gap: 10px; }
  .bp-mc-mo .bp-mo__lbl { display: none; }
  .bp-mc-tab .l { display: none; }
  .bp-mc-tab .s { display: inline; }
  .bp-mc .bp-hero__info { display: block; font-size: 11px; margin-top: 8px; color: rgba(255,255,255,.7); padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bp-mc .bp-hero__mnames { display: flex !important; justify-content: space-between; max-width: 340px; margin: 6px auto 0; font-size: 16px; color: var(--text); padding: 0 8px; }

  .bp-mc-tabs { margin-top: 0; height: 46px; background: var(--strip); }
  .bp-mc-tabs__list { overflow: visible; }
  .bp-mc-tab { flex: 1 1 0; justify-content: center; padding: 0 4px; font-size: 13px; transform: none; margin: 0; min-width: 0; }
  .bp-mc-tab:first-child { margin: 0; padding: 0 4px; }
  .bp-mc-tab > span { transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bp-mc-tabs__cta { display: none; }

  .bp-mc__first { margin-top: 18px; }
  .bp-mc .bp-sh__title { font-size: 26px; }
  .bp-h2h__n { font-size: 36px; }
  .bp-h2h__row { grid-template-columns: 54px minmax(0,1fr) 62px minmax(0,1fr); gap: 6px; padding: 0 10px 0 14px; height: 44px; }
  .bp-h2h__t { font-size: 17px; }
  .bp-h2h__sc { font-size: 18px; }
  .bp-h2h__date { font-size: 10px; }
  .bp-cmp__v { font-size: 22px; min-width: 50px; }
  .bp-cmp__lbl { font-size: 11px; }
  .bp-formrow { grid-template-columns: minmax(0,1fr) repeat(5, 26px); gap: 6px; height: 52px; padding: 0 12px; }
  .bp-formrow__name { font-size: 18px; }
  .bp-formrow .bp-form { width: 22px; height: 22px; }

  .bp-mc-mo { margin-top: 0; padding: 18px 10px 8px; gap: 10px; }
  .bp-mc-mo__chart { gap: 8px; }
  .bp-pbp__list { max-height: 560px; }
  .bp-mc-mo .bp-mo { height: 54px; }
  .bp-mc-mo .bp-mo__team { display: none; }
  .bp-mc-mo .bp-mo__run { padding: 6px 12px; }
  .bp-mc-mo .bp-mo__run > span { font-size: 14px; }

  .bp-pbp__row { grid-template-columns: 44px minmax(0,1fr) auto 58px; gap: 8px; height: 48px; padding: 0 10px 0 14px; }
  .bp-pbp__row .bp-crest { display: none; }
  .bp-pbp__who { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bp-pbp__name { font-size: 17px; max-width: 100%; }
  .bp-pbp__what { font-size: 10px; max-width: 100%; }
  .bp-pbp__clock { font-size: 15px; }
  .bp-pbp__score { font-size: 17px; }
  .bp-pbp__pts { min-width: 30px; font-size: 11px; padding: 0 5px; }

  .bp-recap { padding: 16px 16px 18px; }
  .bp-recap__title { font-size: 28px; }
  .bp-periods td { height: 42px; font-size: 18px; }
  .bp-box table { min-width: 860px; }
  .bp-box td { font-size: 17px; height: 42px; }
  .bp-box td:first-child { min-width: 150px; max-width: 160px; }
  .bp-box__n { font-size: 17px; }
  .bp-adv__v { font-size: 22px; }

  .bp-sc__title { font-size: 46px; }
  .bp-sc__head { padding-top: 16px; gap: 2px 14px; }
  .bp-sc__sub { font-size: 13px; padding-bottom: 4px; }
  .bp-sc__sel select { font-size: 13px; padding: 7px 28px 7px 12px; max-width: 170px; }
  .bp-sc__seg .bp-btn { min-height: 30px; padding: 6px 10px; font-size: 13px; }
  .bp-sc__tiles { gap: 4px; }
  .bp-sc__tile { padding: 10px 8px; text-align: center; }
  .bp-sc__tile b { font-size: 24px; }
  .bp-sc__tile span { font-size: 10px; }
  .bp-zone { grid-template-columns: minmax(0,1fr) 46px 52px; gap: 10px; height: 44px; }
  .bp-zone__bar { display: none; }
  .bp-zone__n { font-size: 18px; }
  .bp-zone__p { font-size: 20px; }
  .bp-best b { font-size: 28px; }
}