/*
 * Forge multisport (basketball) public pages — platform-shared, theme-neutral.
 *
 * Everything is namespaced `ms-*` and scoped under `.ms-root`, so it can sit
 * inside any theme's base.html without leaking. Colours/radius/font are
 * `--ms-*` custom properties declared at zero specificity (`:where(:root)`),
 * so a theme overrides them with a plain `:root { --ms-accent: … }` (or on
 * `.ms-root`) regardless of stylesheet order. Dark by default.
 */

:where(:root) {
  --ms-bg: #0e1621;
  --ms-surface: #16212e;
  --ms-surface-2: #1c2a3a;
  --ms-line: #243446;
  --ms-text: #e8edf3;
  --ms-muted: #8a9bb0;
  --ms-soft: #c9d4e0;
  --ms-accent: #ff4b2b;
  --ms-accent-contrast: #fff;
  --ms-accent-2: #ffb020;
  --ms-away: #3b82f6;
  --ms-live: #ff3355;
  --ms-win: #22c55e;
  --ms-loss: #ef4444;
  --ms-zone-1: var(--ms-win);
  --ms-zone-2: #3b82f6;
  --ms-zone-3: var(--ms-accent-2);
  --ms-hero-glow: #233a52;
  --ms-promo-from: #2b1408;
  --ms-promo-to: #3a1a0a;
  --ms-promo-text: #e7c9b5;
  --ms-radius: 10px;
  --ms-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --ms-max: 1120px;
}

/* ---------- root / reset (scoped) ---------- */
.ms-root {
  background: var(--ms-bg);
  color: var(--ms-text);
  font: 14px/1.45 var(--ms-font);
  max-width: var(--ms-max);
  margin: 0 auto 32px;
  padding: 16px;
  border-radius: var(--ms-radius);
  text-align: left;
}
.ms-root *, .ms-root *::before, .ms-root *::after { box-sizing: border-box; }
.ms-root a { color: inherit; text-decoration: none; }
.ms-root a:hover { text-decoration: none; }
.ms-root h1, .ms-root h2, .ms-root h3 { color: var(--ms-text); font-family: var(--ms-font); letter-spacing: 0; text-transform: none; }
.ms-root h2, .ms-root h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.ms-root img { max-width: 100%; }
.ms-root table { margin: 0; }
.ms-root p { color: inherit; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.ms-grid > * { min-width: 0; }
@media (max-width: 900px) { .ms-grid { grid-template-columns: 1fr; } }

/* ---------- shared components ---------- */
.ms-card { background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden; margin-bottom: 16px; }
/* Themes style bare headings hard (display fonts, clamp() sizes, colours,
   ::after underlines). Our card headers are h1/h2 for the outline only, so
   re-assert the ms look with enough specificity to beat theme rules like
   ".theme-x main h2" / ".theme-x .content h2". */
.ms-root.ms-root.ms-root :is(h1, h2, h3).ms-card-h {
  font-family: var(--ms-font); font-size: 13px; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ms-text);
  margin: 0; background: var(--ms-surface-2); border: 0; border-bottom: 1px solid var(--ms-line);
  text-shadow: none; -webkit-text-stroke: 0;
}
.ms-root.ms-root.ms-root :is(h1, h2, h3).ms-card-h::before,
.ms-root.ms-root.ms-root :is(h1, h2, h3).ms-card-h::after { content: none; display: none; }
.ms-root.ms-root.ms-root :is(h1, h2, h3).ms-card-h .ms-sub { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ms-muted); }
.ms-root.ms-root.ms-root .ms-head h1, .ms-root.ms-root.ms-root .ms-hero h1 {
  font-family: var(--ms-font); color: var(--ms-text); text-transform: none; letter-spacing: -.01em; margin: 0;
  text-shadow: none;
}
.ms-root.ms-root.ms-root .ms-head h1::after, .ms-root.ms-root.ms-root .ms-hero h1::after { content: none; display: none; }
.ms-root.ms-root.ms-root .ms-hero-top h1 { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ms-muted); letter-spacing: 0; }
/* standings: long tables (NCAA ~360 teams) show 30 rows until expanded */
.ms-std tr.ms-extra { display: none; }
.ms-std .ms-std-t:checked ~ .ms-scroll tr.ms-extra { display: table-row; }
.ms-std-more { display: block; padding: 10px 14px; text-align: center; font-weight: 700; font-size: 13px; color: var(--ms-muted); cursor: pointer; border-top: 1px solid var(--ms-line); }
.ms-std-more:hover { color: var(--ms-text); }
.ms-std .ms-std-hide, .ms-std .ms-std-t:checked ~ .ms-std-more .ms-std-show { display: none; }
.ms-std .ms-std-t:checked ~ .ms-std-more .ms-std-hide { display: inline; }
.ms-card-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ms-surface-2); border-bottom: 1px solid var(--ms-line); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--ms-text); }
.ms-card-h .ms-sub { margin-left: auto; font-weight: 500; text-transform: none; color: var(--ms-muted); letter-spacing: 0; }
.ms-card-h a.ms-sub:hover { color: var(--ms-text); }
.ms-empty { padding: 16px 14px; color: var(--ms-muted); margin: 0; }
.ms-note { padding: 8px 14px; color: var(--ms-muted); font-size: 12px; margin: 0; }

.ms-crumbs { color: var(--ms-muted); font-size: 12px; margin: 0 0 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; list-style: none; padding: 0; }
.ms-crumbs li { display: inline-flex; gap: 6px; align-items: center; }
.ms-crumbs li + li::before { content: "›"; }
.ms-crumbs a:hover { color: var(--ms-text); }
.ms-crumbs b { color: var(--ms-text); font-weight: 600; }

.ms-root .ms-logo { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #334, #556); color: #fff; display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; flex: none; overflow: hidden; letter-spacing: -.02em; }
.ms-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff0; }
.ms-root .ms-logo.ms-has-img { background: transparent; border-radius: 0; }
.ms-root .ms-logo.ms-lg { width: 72px; height: 72px; font-size: 20px; }
.ms-root .ms-logo.ms-md { width: 40px; height: 40px; font-size: 12px; }
.ms-root .ms-logo.ms-c1 { background: linear-gradient(135deg, #f5b400, #b37d00); color: #111; }
.ms-root .ms-logo.ms-c2 { background: linear-gradient(135deg, #d71920, #7a0d12); }
.ms-root .ms-logo.ms-c3 { background: linear-gradient(135deg, #1d4ed8, #0b2472); }
.ms-root .ms-logo.ms-c4 { background: linear-gradient(135deg, #f97316, #9a3b06); }
.ms-root .ms-logo.ms-c5 { background: linear-gradient(135deg, #10b981, #065f46); }
.ms-root .ms-logo.ms-c6 { background: linear-gradient(135deg, #7c3aed, #3b1480); }
.ms-root .ms-logo.ms-c7 { background: linear-gradient(135deg, #64748b, #1e293b); }
.ms-root .ms-logo.ms-c8 { background: linear-gradient(135deg, #ec4899, #831843); }

.ms-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ms-line); background: var(--ms-surface); overflow-x: auto; margin: 0; padding: 0; }
.ms-tabs a { padding: 12px 16px; color: var(--ms-muted); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.ms-tabs a:hover { color: var(--ms-text); }
.ms-tabs a.ms-on { color: var(--ms-text); border-bottom-color: var(--ms-accent); }
.ms-hero .ms-tabs { background: transparent; border-bottom: 0; margin: 0 -18px; padding: 0 8px; border-top: 1px solid var(--ms-line); }

/* Tab panes: all visible without JS; with JS only the active one shows. */
.ms-js [data-ms-pane][hidden] { display: none; }

.ms-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--ms-surface-2); color: var(--ms-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ms-pill.ms-live { background: color-mix(in srgb, var(--ms-live) 15%, transparent); color: var(--ms-live); }
.ms-pill.ms-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ms-live); animation: ms-blink 1.2s infinite; }
.ms-pill.ms-w { background: color-mix(in srgb, var(--ms-win) 15%, transparent); color: var(--ms-win); }
.ms-pill.ms-l { background: color-mix(in srgb, var(--ms-loss) 15%, transparent); color: var(--ms-loss); }
.ms-pill.ms-dead { background: color-mix(in srgb, var(--ms-loss) 12%, transparent); color: var(--ms-loss); }
@keyframes ms-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .ms-pill.ms-live::before { animation: none; } }

.ms-form { display: flex; gap: 3px; }
.ms-form i { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font: 700 10px var(--ms-font); font-style: normal; }
.ms-form .ms-w { background: var(--ms-win); color: #04210f; }
.ms-form .ms-l { background: var(--ms-loss); color: #2a0606; }

.ms-cta { display: inline-block; background: var(--ms-accent); color: var(--ms-accent-contrast) !important; font-weight: 700; border-radius: 6px; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.ms-cta:hover { filter: brightness(1.08); }

/* ---------- game hero ---------- */
.ms-hero { background: radial-gradient(120% 140% at 50% 0%, var(--ms-hero-glow) 0%, var(--ms-surface) 60%); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 18px 18px 0; margin-bottom: 16px; overflow: hidden; }
.ms-hero-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ms-muted); font-size: 12px; margin-bottom: 14px; }
.ms-hero-top a:hover { color: var(--ms-text); }
.ms-hero h1 { font-size: 13px; font-weight: 600; margin: 0; color: var(--ms-muted); }
.ms-hero-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 16px; }
.ms-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ms-team .ms-name { font-weight: 700; font-size: 17px; line-height: 1.2; }
.ms-team:hover .ms-name { color: var(--ms-accent-2); }
.ms-team .ms-rec { color: var(--ms-muted); font-size: 12px; }
.ms-score { text-align: center; min-width: 170px; }
.ms-score .ms-big { font: 800 46px/1 var(--ms-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ms-score .ms-big .ms-dash { color: var(--ms-muted); margin: 0 8px; }
.ms-score .ms-big .ms-lose { color: var(--ms-muted); }
.ms-score .ms-big.ms-livec { color: var(--ms-text); }
.ms-score .ms-when { font: 700 30px/1 var(--ms-font); }
.ms-score .ms-date { color: var(--ms-muted); font-size: 12px; margin-top: 6px; }
.ms-score .ms-st { margin-top: 8px; }
.ms-count { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.ms-count span { background: var(--ms-surface-2); border: 1px solid var(--ms-line); border-radius: 6px; padding: 4px 7px; font: 700 13px var(--ms-font); min-width: 38px; }
.ms-count small { display: block; color: var(--ms-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; }
@media (max-width: 640px) {
  .ms-score { min-width: 0; }
  .ms-score .ms-big { font-size: 32px; }
  .ms-score .ms-when { font-size: 22px; }
  .ms-team .ms-name { font-size: 14px; }
  .ms-root .ms-logo.ms-lg { width: 52px; height: 52px; font-size: 15px; }
  .ms-hero { padding: 14px 12px 0; }
  .ms-hero .ms-tabs { margin: 0 -12px; }
}

/* ---------- linescore ---------- */
.ms-scroll { overflow-x: auto; }
.ms-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ms-lines th, .ms-lines td { padding: 9px 10px; text-align: center; border: 0; border-bottom: 1px solid var(--ms-line); background: transparent; color: var(--ms-text); }
.ms-lines th { color: var(--ms-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ms-lines td:first-child, .ms-lines th:first-child { text-align: left; }
.ms-lines td.ms-tot { font-weight: 800; font-size: 15px; }
.ms-lines tr.ms-win td.ms-tot { color: var(--ms-accent-2); }
.ms-lines td.ms-hi { color: var(--ms-win); font-weight: 700; }
.ms-lines td.ms-na { color: var(--ms-muted); }
.ms-teamcell { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- odds ---------- */
.ms-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.ms-odds.ms-two { grid-template-columns: 1fr 1fr; }
.ms-odd { background: var(--ms-surface-2); border: 1px solid var(--ms-line); border-radius: 8px; padding: 10px; text-align: center; transition: border-color .15s; display: block; }
a.ms-odd:hover { border-color: var(--ms-accent); }
.ms-odd small { display: block; color: var(--ms-muted); font-size: 11px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-odd b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ms-odd.ms-best { border-color: var(--ms-accent-2); }
.ms-odd.ms-best b { color: var(--ms-accent-2); }
.ms-bk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ms-line); }
.ms-bk .ms-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; flex: 1; }
.ms-bk .ms-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-bk .ms-brand img { width: 56px; height: 24px; object-fit: contain; border-radius: 4px; background: var(--ms-surface-2); flex: none; }
.ms-bk .ms-brand i { width: 34px; height: 22px; border-radius: 4px; display: inline-block; background: var(--ms-surface-2); flex: none; }
.ms-bk .ms-cells { display: flex; gap: 6px; }
.ms-bk .ms-cells span { min-width: 58px; text-align: center; background: var(--ms-surface-2); border: 1px solid var(--ms-line); border-radius: 6px; padding: 6px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-bk .ms-cells span.ms-best { color: var(--ms-accent-2); border-color: var(--ms-accent-2); }
.ms-bk .ms-cta-slot { width: 76px; text-align: right; flex: none; }
.ms-bk-head { color: var(--ms-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ms-bk-head .ms-cells span { background: transparent; border-color: transparent; padding-top: 0; padding-bottom: 0; }
.ms-mkt { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--ms-line); }
.ms-mkt > div { padding: 12px 14px; border-right: 1px solid var(--ms-line); }
.ms-mkt > div:last-child { border-right: 0; }
.ms-mkt small { color: var(--ms-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 6px; }
.ms-mkt .ms-r { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.ms-mkt .ms-r b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ms-bk { flex-wrap: wrap; }
  .ms-bk .ms-cells span { min-width: 48px; }
  .ms-odd b { font-size: 16px; }
}

/* ---------- comparison bars ---------- */
.ms-cmp { padding: 6px 14px 14px; }
.ms-cmp .ms-r { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; align-items: center; margin-top: 10px; }
.ms-cmp .ms-lbl { grid-column: 1 / -1; text-align: center; color: var(--ms-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: -4px; }
.ms-cmp .ms-v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ms-muted); }
.ms-cmp .ms-v.ms-lead { color: var(--ms-text); }
.ms-cmp .ms-v.ms-r2 { text-align: right; }
.ms-cmp-teams { display: flex; justify-content: space-between; padding: 10px 14px 0; font-weight: 700; font-size: 12px; }
.ms-cmp-teams span:first-child { color: var(--ms-accent); }
.ms-cmp-teams span:last-child { color: var(--ms-away); }
.ms-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--ms-surface-2); gap: 2px; }
.ms-bar .ms-h { background: var(--ms-accent); }
.ms-bar .ms-a { background: var(--ms-away); margin-left: auto; }

/* ---------- game list rows ---------- */
.ms-lg { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--ms-surface-2); border-bottom: 1px solid var(--ms-line); font-weight: 700; font-size: 13px; }
.ms-lg .ms-ctry { color: var(--ms-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.ms-lg a.ms-lgname:hover { color: var(--ms-accent-2); }
.ms-lg .ms-more { margin-left: auto; color: var(--ms-muted); font-weight: 600; font-size: 12px; }
.ms-lg .ms-more:hover { color: var(--ms-text); }
.ms-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--ms-line); color: var(--ms-text); }
.ms-row:last-child { border-bottom: 0; }
a.ms-row:hover { background: rgba(255, 255, 255, .03); }
.ms-row .ms-t { color: var(--ms-muted); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.3; }
.ms-row .ms-t.ms-live { color: var(--ms-live); font-weight: 800; }
.ms-row .ms-t.ms-dead { color: var(--ms-loss); }
.ms-row .ms-teams > div { display: flex; align-items: center; gap: 8px; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row .ms-teams .ms-lose { color: var(--ms-muted); }
.ms-row .ms-sc { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; }
.ms-row .ms-sc > div { padding: 2px 0; }
.ms-row .ms-sc .ms-lose { color: var(--ms-muted); font-weight: 600; }
.ms-row .ms-sc.ms-live { color: var(--ms-live); }
.ms-row .ms-q { display: flex; gap: 10px; color: var(--ms-muted); font-size: 12px; font-variant-numeric: tabular-nums; align-items: center; }
.ms-row .ms-q > div > div { padding: 2px 0; min-width: 18px; text-align: center; }
.ms-row .ms-odds-mini { display: flex; gap: 4px; }
.ms-row .ms-odds-mini span { min-width: 46px; text-align: center; background: var(--ms-surface-2); border: 1px solid var(--ms-line); border-radius: 5px; padding: 4px 6px; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ms-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .ms-row .ms-q, .ms-row .ms-odds-mini { display: none; }
}

/* ---------- date strip + filter ---------- */
.ms-dates { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ms-line); overflow-x: auto; }
.ms-dates a { flex: none; text-align: center; padding: 6px 12px; border-radius: 8px; color: var(--ms-muted); font-weight: 600; font-size: 12px; border: 1px solid transparent; text-transform: capitalize; }
.ms-dates a:hover { border-color: var(--ms-line); }
.ms-dates a b { display: block; color: var(--ms-text); font-size: 14px; }
.ms-dates a.ms-on { background: var(--ms-accent); color: var(--ms-accent-contrast); border-color: var(--ms-accent); }
.ms-dates a.ms-on b { color: var(--ms-accent-contrast); }
.ms-filter { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ms-line); flex-wrap: wrap; }
.ms-filter a { padding: 5px 12px; border-radius: 99px; background: var(--ms-surface-2); color: var(--ms-muted); font-weight: 700; font-size: 12px; }
.ms-filter a:hover { color: var(--ms-text); }
.ms-filter a.ms-on { background: var(--ms-text); color: var(--ms-bg); }
.ms-filter a .ms-n { opacity: .7; margin-left: 4px; }

/* ---------- standings ---------- */
.ms-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.ms-tbl th { color: var(--ms-muted); font-size: 11px; text-transform: uppercase; font-weight: 700; padding: 8px; text-align: center; border: 0; border-bottom: 1px solid var(--ms-line); background: transparent; white-space: nowrap; }
.ms-tbl td { padding: 8px; text-align: center; border: 0; border-bottom: 1px solid var(--ms-line); background: transparent; color: var(--ms-text); }
.ms-tbl td.ms-tm, .ms-tbl th.ms-tm { text-align: left; }
.ms-tbl td.ms-tm a, .ms-tbl td.ms-tm > span { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.ms-tbl td.ms-tm a:hover { color: var(--ms-accent-2); }
.ms-tbl .ms-rk { width: 26px; height: 22px; border-radius: 5px; display: inline-grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--ms-surface-2); }
.ms-tbl .ms-rk.ms-z1 { background: var(--ms-zone-1); color: #04210f; }
.ms-tbl .ms-rk.ms-z2 { background: var(--ms-zone-2); color: #fff; }
.ms-tbl .ms-rk.ms-z3 { background: var(--ms-zone-3); color: #1a1200; }
.ms-tbl tr.ms-hl td { background: color-mix(in srgb, var(--ms-accent) 9%, transparent); }
.ms-tbl td.ms-pct { font-weight: 800; }
.ms-tbl td.ms-pos { color: var(--ms-win); }
.ms-tbl td.ms-neg { color: var(--ms-loss); }
.ms-tbl .ms-grp td { background: var(--ms-surface-2); color: var(--ms-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; text-align: left; }
@media (max-width: 640px) { .ms-tbl .ms-opt { display: none; } }
.ms-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 14px; color: var(--ms-muted); font-size: 12px; }
.ms-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ms-legend .ms-z1 { background: var(--ms-zone-1); }
.ms-legend .ms-z2 { background: var(--ms-zone-2); }
.ms-legend .ms-z3 { background: var(--ms-zone-3); }

/* ---------- league / team head ---------- */
.ms-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px; background: radial-gradient(120% 160% at 0% 0%, var(--ms-hero-glow) 0%, var(--ms-surface) 60%); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); margin-bottom: 16px; }
.ms-head h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; }
.ms-head .ms-meta { color: var(--ms-muted); font-size: 13px; margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.ms-head .ms-meta a:hover { color: var(--ms-text); }
.ms-head .ms-stats { margin-left: auto; display: flex; gap: 18px; text-align: center; }
.ms-head .ms-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.ms-head .ms-stats small { color: var(--ms-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
@media (max-width: 640px) { .ms-head .ms-stats { margin-left: 0; width: 100%; justify-content: space-around; } }

/* ---------- h2h ---------- */
.ms-h2h-sum { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 16px; text-align: center; }
.ms-h2h-sum b { font-size: 30px; font-variant-numeric: tabular-nums; }
.ms-h2h-sum small { display: block; color: var(--ms-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }

/* ---------- sidebar ---------- */
.ms-side-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--ms-line); }
.ms-side-item:last-child { border-bottom: 0; }
a.ms-side-item:hover { background: rgba(255, 255, 255, .03); }
.ms-side-item .ms-sub { margin-left: auto; color: var(--ms-muted); font-size: 12px; white-space: nowrap; }
.ms-promo { padding: 16px; background: linear-gradient(135deg, var(--ms-promo-from), var(--ms-promo-to)); }
.ms-promo-brand { display: flex; align-items: center; gap: 10px; }
.ms-promo-brand img { height: 28px; width: auto; max-width: 110px; object-fit: contain; }
.ms-promo b { font-size: 16px; }
.ms-promo p { margin: 6px 0 12px; color: var(--ms-promo-text); font-size: 13px; }
.ms-info { padding: 4px 14px 12px; }
.ms-info .ms-r { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--ms-line); }
.ms-info .ms-r:last-child { border: 0; }
.ms-info .ms-r span { color: var(--ms-muted); }
.ms-info .ms-r b { text-align: right; }
.ms-text { padding: 14px; color: var(--ms-soft); line-height: 1.65; }
.ms-text p { margin: 0 0 10px; }