/* ═══════════════════════ MATCH HISTORY PAGE ═══════════════════════ */
#tab-match-history.tab-content.active { display: flex; }

/* ── Color means one thing here ──────────────────────────────────────────────
   The page has a single job: show whether the model's call held up. So color is
   spent on that and nothing else:

     green  → the model called this game correctly
     rose   → the model missed it
     slate  → too close to count, or no call was made
     blue / red  → side identity only (BLUE team, RED team) — never a verdict
     solid ink-white chip  → what actually happened (the WIN stamp)
     teal (--gold)  → interactive only: filters, buttons, the open marker

   Anything that needs a color picks from this list. Anything that doesn't need
   one stays on the neutral ink ramp below. */
#tab-match-history {
  --mh-txt:    #eef0f5;
  --mh-dim:    rgba(238, 240, 245, .74);
  --mh-faint:  rgba(238, 240, 245, .52);
  --mh-line:   rgba(255, 255, 255, .085);
  --mh-line-2: rgba(255, 255, 255, .17);

  --mh-hit:    #3ddb9a;
  --mh-miss:   #ff6280;
  --mh-push:   #93a0b5;
  --mh-blue:   #6aa4ff;
  --mh-red:    #ff7088;

  /* Squared, tabular-figure face for everything that is a number or a data
     label — scores, percentages, game slots. Names and prose stay on --font. */
  --mh-num: 'Chakra Petch', 'Outfit', system-ui, sans-serif;

  /* Local elevation scale. The global navy tokens (--surface #1d1c20, etc.) sit
     at nearly the same lightness as this page's canvas, so panels wash out.
     Redefine them here into a darkest->lightest ramp so every layer separates:
        canvas  <  nested game cards (--bg)  <  panels (--surface)  <  headers (--surface2)
     Scoped to this page only — the rest of the app keeps the navy defaults. */
  --bg:            #101216; /* recessed / nested faces (per-game cards) */
  --surface:       #171a1f; /* raised panels: series rows, tables, bl-cards */
  --surface2:      #1e2128; /* higher surfaces: table headers, tracks */
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Canvas: one light source, top-center, over a near-black neutral ramp. Fixed
     so it overrides the body glow and holds still behind scrolling. */
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(96, 108, 132, .12) 0%, transparent 62%),
    linear-gradient(180deg, #0b0c0f 0%, #0e0f13 45%, #090a0d 100%);
  background-attachment: fixed;
}
#tab-match-history :where(.mh-score, .mh-champ-kda) { font-variant-numeric: tabular-nums; }
.mh-wrap {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 18px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: max-width .2s;
}
/* Analytics has wide side-by-side tables — use most of the page width. */
.mh-wrap.mh-wide { max-width: 1800px; }

/* ── Top bar ── */
/* Two stacked rows: the centred title, then the league filters underneath.
   Still a 1fr auto 1fr grid with the title pinned to column 2 — the Refresh
   button that used to sit in column 3 was removed 2026-08-20, and the outer
   tracks are what keep the title centred on the page either way. */
.mh-topbar { display: flex; flex-direction: column; gap: 12px; }
.mh-titlerow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mh-titlerow .mh-title { grid-column: 2; justify-self: center; text-align: center; }
.mh-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #fff4cf 0%, #fbd877 26%, #eaad3e 50%, #b9791f 68%, #f4d06d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Filters are the one place the user drives the page, so they carry the teal. */
.mh-league-bar { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mh-league-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.05);
  color: var(--mh-dim);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
.mh-league-btn:hover:not(:disabled):not(.active) { background: rgba(255,255,255,.10); color: var(--mh-txt); }
.mh-league-btn.active { background: var(--gold); color: #06231f; font-weight: 700; }
.mh-league-btn:disabled { opacity: .3; cursor: not-allowed; }
/* Region flag inside a league filter button. Same self-hosted PNGs as the series
   rows; the hairline keeps the white bands legible on the gold active pill too. */
.mh-btn-flag {
  width: 21px; height: auto; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
/* ── Accuracy header ──
   Two figures, one panel, hairline between them. The number leads; the label
   explains it underneath. Its color is the page's verdict green when the model
   is doing well, so the header reads with the same language as the rows. */
.mh-scoreboard {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  border: 1px solid var(--mh-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  overflow: hidden;
}
.mh-stat { width: 292px; max-width: 50vw; padding: 18px 24px 16px; text-align: center; }
.mh-stat + .mh-stat { border-left: 1px solid var(--mh-line); }
.mh-stat-val {
  font-family: var(--mh-num); font-size: 40px; font-weight: 700;
  line-height: 1; letter-spacing: -.005em; color: var(--mh-dim);
}
.mh-stat.good .mh-stat-val { color: var(--mh-hit); }
.mh-stat.mid  .mh-stat-val { color: var(--gold); }
.mh-stat.bad  .mh-stat-val { color: var(--mh-miss); }
.mh-stat-label {
  margin-top: 9px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mh-dim);
}
.mh-stat-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mh-faint); background: rgba(255,255,255,.05);
  border: 1px solid var(--mh-line); vertical-align: middle; cursor: help;
}
.mh-stat-sub { margin-top: 7px; font-size: 12.5px; color: var(--mh-faint); }
/* "N too close, not counted" note under the game-accuracy figure. */
.mh-stat-skip { display: block; margin-top: 3px; font-size: 12px; color: var(--mh-faint); cursor: help; }

.mh-note {
  font-size: 12.5px; color: var(--mh-faint);
  line-height: 1.6; text-align: center; max-width: 660px; margin: 12px auto 2px;
}

/* ── Series list ──
   One series is one line: when it happened (left), who played and the result
   (center, on the page's center axis), and how the model's calls landed (right).
   Nothing else earns a place in the collapsed row. */
.mh-list { display: flex; flex-direction: column; gap: 7px; }
.mh-series {
  background: var(--surface);
  border: 1px solid var(--mh-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .16s, background .16s;
}
.mh-series:hover { border-color: rgba(255,255,255,.15); }
.mh-series.open { border-color: rgba(255,255,255,.17); }

.mh-series-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px) 1fr;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.mh-series.is-flat .mh-series-head { cursor: default; }
.mh-series.open .mh-series-head { border-bottom: 1px solid var(--mh-line); }

/* All three blocks are pinned to row 1. Without this the teams block — the only
   one with an explicit column — pushes the left column onto a second row, since
   grid auto-placement never backtracks. That split the row in two. */
.mh-series-meta, .mh-series-teams, .mh-series-verdict { grid-row: 1; }

/* Score sits on the page-center axis regardless of team-name length; the two
   names lean in toward it so the pair reads as one unit. */
.mh-series-teams {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.mh-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mh-team.left  { justify-content: flex-end; }
.mh-team.right { justify-content: flex-start; }
.mh-team-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mh-team-name {
  font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--mh-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-team.winner .mh-team-name { color: var(--mh-txt); font-weight: 700; }
/* Centered, not baseline-aligned: the separator is set much smaller than the
   digits, and on a shared baseline it drops to the floor and reads as "2 _ 1". */
.mh-score {
  justify-self: center; display: flex; align-items: center; gap: 8px;
  font-family: var(--mh-num); font-size: 26px; font-weight: 700; color: var(--mh-faint);
}
.mh-score i { font-style: normal; color: rgba(255,255,255,.3); font-size: 17px; }
.mh-score .w { color: var(--mh-txt); }

/* Meta reads as one sentence of context, not three competing chips. */
.mh-series-meta {
  grid-column: 1; justify-self: start;
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: var(--mh-faint);
  white-space: nowrap; min-width: 0; overflow: hidden;
}
.mh-series-meta > span + span::before {
  content: '·'; margin-right: 8px; color: rgba(255,255,255,.22);
}
.mh-date { color: var(--mh-dim); font-weight: 600; flex-shrink: 0; }
.mh-bo { flex-shrink: 0; }
/* Long split names give way first — the date and format matter more at a glance.
   Only shown as a fallback now; the league chip below took this slot. */
.mh-split { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* League + region flag, in the slot the split name used to hold. Brighter and
   bolder than the rest of the meta line — it's the one part read at a glance. */
.mh-league {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mh-dim); font-weight: 700; letter-spacing: .2px;
  flex-shrink: 0;
}
.mh-flag {
  width: 21px; height: auto; display: block; border-radius: 2px;
  /* A hairline keeps the white bands of the KR/US flags off the dark row. */
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* Holds the expand arrow. The numbered call strip that used to sit beside it went
   out with the prediction model (2026-08-06). */
.mh-series-verdict { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* Per-game prediction scorecard on the series head — visible collapsed, which
   is the point: one glance says how the model handled the series. */
.mh-series-preds { display: inline-flex; align-items: center; gap: 4px; }
.mh-gp {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; cursor: help;
  font-family: var(--mh-num); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
  border: 1px solid var(--mh-line-2); color: var(--mh-faint);
  background: rgba(255, 255, 255, .03);
}
.mh-gp.hit {
  color: #06120d; border-color: transparent;
  background: linear-gradient(180deg, #4ee8a8, var(--mh-hit));
  box-shadow: 0 0 10px rgba(61, 219, 154, .30);
}
.mh-gp.miss {
  color: #1a0509; border-color: transparent;
  background: linear-gradient(180deg, #ff7f96, var(--mh-miss));
  box-shadow: 0 0 10px rgba(255, 98, 128, .28);
}

@media (max-width: 720px) {
  .mh-gp { width: 19px; height: 19px; font-size: 11px; }
}

.mh-expand {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--mh-faint); font-size: 15px; line-height: 1;
  transition: transform .22s, color .16s;
}
.mh-series.open .mh-expand { transform: rotate(180deg); color: var(--gold); }

/* ── Expanded games ── */
.mh-series-games { display: none; padding: 6px; flex-direction: column; gap: 5px; }
.mh-series.open .mh-series-games { display: flex; }

.mh-game {
  background: var(--bg);
  border: 1px solid var(--mh-line);
  border-radius: 10px;
  padding: 6px 7px;
}
.mh-game-bar { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; }

/* Per-game prediction (local-only). Absolutely centred on the bar rather than
   flowed, so it sits in the middle of the box whatever the game number, the
   clock and the button are doing on either side of it. */
.mh-game-pred {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px; border-radius: 8px; white-space: nowrap; cursor: help;
  font-family: var(--mh-num); font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--mh-line-2); background: rgba(255, 255, 255, .03);
}
.mh-game-pred .pb { color: var(--blue); }
.mh-game-pred .pr { color: var(--red); }
.mh-game-pred .pm { font-style: normal; font-size: 13px; font-weight: 800; }
.mh-game-pred.hit  { border-color: rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .10); }
.mh-game-pred.miss { border-color: rgba(251, 90, 113, .45); background: rgba(251, 90, 113, .10); }
.mh-game-pred.hit  .pm { color: var(--green); }
.mh-game-pred.miss .pm { color: var(--red); }

/* Narrow bars have no middle to spare — let it flow with everything else. */
@media (max-width: 780px) {
  .mh-game-pred { position: static; transform: none; }
}
.mh-game-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mh-num); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mh-txt);
}
.mh-game-len {
  font-family: var(--mh-num); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--mh-txt);
  padding: 2px 8px; border-radius: 7px;
  border: 1px solid var(--mh-line-2); background: rgba(255,255,255,.03);
  white-space: nowrap;
}
.mh-load-sim {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 7px;
  /* Reads as "already hovered" on purpose — it's the one action on a game row,
     so it stays lit in the blue side-identity colour instead of hiding until
     the pointer finds it. */
  border: 1px solid var(--mh-blue);
  background: rgba(106, 164, 255, .07);
  color: var(--mh-blue);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s, color .16s, background .16s;
}
.mh-load-sim:hover { border-color: #9cc4ff; color: #c2daff; background: rgba(106, 164, 255, .18); }

.mh-draft-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: stretch; }

/* Side panels: a 2px rail at the top is the whole side-identity treatment — no
   wash of color behind the champions. The winner is simply the brighter panel. */
.mh-draft-side {
  position: relative;
  border-radius: 10px;
  padding: 6px 7px 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--mh-line);
  overflow: hidden;
}
.mh-draft-side::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
}
.mh-draft-side.blue::before { background: linear-gradient(90deg,  var(--mh-blue), rgba(106,164,255,.12)); }
.mh-draft-side.red::before  { background: linear-gradient(270deg, var(--mh-red),  rgba(255,112,136,.12)); }
.mh-draft-side.win  { background: rgba(61,219,154,.05); border-color: rgba(61,219,154,.45); }
.mh-draft-side.win::before { background: linear-gradient(90deg, var(--mh-hit), rgba(61,219,154,.15)) !important; }
/* The losing draft steps back but stays readable — it's still half the matchup. */
.mh-draft-side.loss { opacity: .72; }

.mh-side-tag { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.mh-draft-side.red .mh-side-tag { justify-content: flex-end; }
.mh-side-label {
  font-family: var(--mh-num); font-size: 10px; font-weight: 700; letter-spacing: .16em;
}
.mh-draft-side.blue .mh-side-label { color: var(--mh-blue); }
.mh-draft-side.red  .mh-side-label { color: var(--mh-red); }
.mh-side-team { font-weight: 700; color: var(--mh-txt); font-size: 12.5px; letter-spacing: .01em; }
.mh-side-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
/* Big green stamp = who actually won; the model no longer owns green here. */
.mh-win-badge {
  font-size: 13px; font-weight: 900; letter-spacing: .12em;
  background: var(--mh-hit); color: #0b0d11; padding: 3px 10px; border-radius: 6px;
  box-shadow: 0 0 14px rgba(61,219,154,.45);
}

.mh-champs { display: flex; gap: 5px; }
.mh-draft-side.red .mh-champs { flex-direction: row-reverse; }
.mh-champ { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mh-champ .champ-portrait, .mh-champ .champ-portrait-placeholder { width: 36px; height: 36px; border-radius: 7px; }
.mh-champ-role {
  font-family: var(--mh-num); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--mh-faint);
}
.mh-champ-name { font-size: 11px; font-weight: 600; color: var(--mh-txt); text-align: center; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mh-champ-player { font-size: 10px; color: var(--mh-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Height is reserved even when a game has no K/D/A, so the five tiles in a draft
   keep a level baseline instead of raggedly ending at different points. */
.mh-champ-kda { font-size: 11px; font-weight: 700; color: var(--mh-dim); white-space: nowrap; min-height: 13px; }
.mh-champ-kda i { font-style: normal; color: rgba(255,255,255,.25); margin: 0 2px; }
/* K, D and A all read in the same ink — deaths used to carry --mh-red, which made
   every line look like a verdict. Only the slashes are dimmed. */
.mh-champ-kda .d,
.mh-champ-kda .a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .mh-series, .mh-expand, .mh-load-sim, .mh-league-btn { transition: none; }
}

/* ── Sub-page tabs (Series / Analytics) ── */
.mh-subtab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--mh-line);
}
.mh-subtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mh-faint);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 9px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.mh-subtab:hover { color: var(--mh-txt); }
.mh-subtab.active { color: var(--mh-txt); border-bottom-color: var(--gold); font-weight: 700; }

/* ── Analytics view ── */
.mh-an-meta {
  font-size: 12px; color: var(--mh-dim); font-family: var(--mono);
  letter-spacing: .02em;
}
.mh-an-meta b { color: var(--text); font-weight: 700; }

.mh-an-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mh-an-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--mh-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.mh-an-tab:hover { border-color: var(--gold); color: var(--text); }
.mh-an-tab.active { background: var(--gold-dim); border-color: var(--gold); color: #06231f; }

.mh-an-panel { margin-top: 4px; }

/* ── Prio sections ── */
.mh-an-prio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.mh-an-section { margin-bottom: 0; }
.mh-an-section-title {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--text); margin-bottom: 8px;
}
.mh-an-section-sub { font-size: 11px; font-weight: 500; color: var(--mh-faint); font-family: var(--mono); letter-spacing: .02em; }

/* Compact tables inside the Prio columns */
.mh-an-prio-grid .mh-an-table thead th { padding: 7px 10px; font-size: 10px; }
.mh-an-prio-grid .mh-an-table tbody td { padding: 6px 10px; font-size: 12px; }
.mh-an-prio-grid .mh-an-entity img,
.mh-an-prio-grid .mh-an-entity .champ-portrait,
.mh-an-prio-grid .mh-an-entity .champ-portrait-placeholder,
.mh-an-prio-grid .mh-an-entity .mh-an-logo { width: 22px; height: 22px; }
.mh-an-prio-grid .mh-an-pair .champ-portrait,
.mh-an-prio-grid .mh-an-pair .champ-portrait-placeholder { width: 20px; height: 20px; }
.mh-an-prio-grid .mh-an-empty { padding: 24px; }

@media (max-width: 860px) {
  .mh-an-prio-grid { grid-template-columns: 1fr; }
}

/* Analytics tables */
.mh-an-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.mh-an-table thead th {
  position: sticky; top: 0;
  background: var(--surface2);
  color: var(--mh-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mh-an-table thead th.lft { text-align: left; }
.mh-an-table thead th[data-sort] { cursor: pointer; user-select: none; transition: color .15s; }
.mh-an-table thead th[data-sort]:hover { color: var(--text); }
.mh-an-table thead th[data-sort].sorted { color: var(--gold); }
.mh-an-sort-arrow { display: inline-block; margin-left: 5px; font-size: 9px; opacity: .3; }
.mh-an-table thead th[data-sort].sorted .mh-an-sort-arrow { opacity: 1; }
.mh-an-table tbody td {
  padding: 9px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px;
  font-family: var(--mono);
  text-align: right;
  color: var(--text);
  white-space: nowrap;
}
.mh-an-table tbody td.lft { text-align: left; font-family: var(--font); }
/* Win-rate color classes (wr-green/blue/yellow/red) must beat the default td color above. */
.mh-an-table tbody td.wr-green  { color: #4ade80; }
.mh-an-table tbody td.wr-blue   { color: #60a5fa; }
.mh-an-table tbody td.wr-yellow { color: #ffff00; }
.mh-an-table tbody td.wr-red    { color: #fb7185; }
.mh-an-table tbody tr:hover { background: rgba(255,255,255,.03); }
.mh-an-rank { color: var(--mh-faint); width: 36px; }

.mh-an-entity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mh-an-entity img, .mh-an-entity .champ-portrait, .mh-an-entity .champ-portrait-placeholder {
  width: 26px; height: 26px; border-radius: 6px; object-fit: contain; flex-shrink: 0;
}
.mh-an-entity .mh-an-logo { width: 26px; height: 26px; object-fit: contain; }
.mh-an-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.mh-an-pair { display: flex; align-items: center; gap: 7px; }
.mh-an-pair .champ-portrait, .mh-an-pair .champ-portrait-placeholder { width: 24px; height: 24px; border-radius: 5px; }
.mh-an-pair-x { color: var(--mh-faint); font-family: var(--mono); font-size: 11px; }

.mh-wr-na   { color: var(--mh-faint); }
.mh-an-small { color: var(--mh-faint); font-size: 11px; }

.mh-an-empty { padding: 40px; text-align: center; color: var(--mh-faint); font-family: var(--mono); }

@media (max-width: 720px) {
  .mh-an-table thead th, .mh-an-table tbody td { padding: 8px 8px; font-size: 12px; }
}

@media (max-width: 860px) {
  .mh-scoreboard { flex-direction: column; }
  .mh-stat { width: 100%; max-width: none; }
  .mh-stat + .mh-stat { border-left: 0; border-top: 1px solid var(--mh-line); }
}
@media (max-width: 760px) {
  .mh-draft-row { grid-template-columns: 1fr; }
  /* Stack the row: teams first (the headline), then context, then the calls. The
     grid-row pin that keeps them on one line on desktop has to be released here,
     or all three land on top of each other in the single column. */
  .mh-series-head { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 14px; }
  .mh-series-teams, .mh-series-meta, .mh-series-verdict { grid-column: 1; grid-row: auto; justify-self: center; }
  .mh-series-teams { order: 1; width: 100%; }
  .mh-series-meta { order: 2; flex-wrap: wrap; justify-content: center; }
  .mh-series-verdict { order: 3; }
}

/* ─── Bet Lines Dashboard ─────────────────────────────────────────────────── */
.bl-dash {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 4px 0 12px;
}
@media (max-width: 960px) { .bl-dash { grid-template-columns: 1fr; } }

.bl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.bl-card:hover { border-color: var(--border-strong); }

.bl-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.bl-card-icon { font-size: 18px; }
.bl-card-title {
  font-size: 13.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--text);
}
.bl-card-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--gold); font-family: var(--mono);
  background: rgba(45,212,191,.1); padding: 2px 7px; border-radius: 5px;
}
.bl-card-line {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mh-faint); font-family: var(--mono);
}

.bl-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 600; color: var(--mh-faint);
}
.bl-leg-item { display: flex; align-items: center; gap: 5px; }
.bl-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.bl-dot-under { background: #4ade80; }
.bl-dot-on    { background: #60a5fa; }
.bl-dot-over  { background: #fb5a71; }
.bl-dot-m53   { background: #fff; width: 2px; height: 10px; border-radius: 2px; opacity: .5; }
.bl-leg-marker { color: rgba(255,255,255,.45); }

.bl-rows { padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 8px; }

.bl-row {
  display: grid;
  grid-template-columns: 56px 36px 1fr auto;
  align-items: center;
  gap: 10px;
}

.bl-league {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mh-dim); font-family: var(--mono);
}
.bl-total {
  font-size: 10.5px; color: var(--mh-faint); font-family: var(--mono);
  text-align: right;
}

.bl-bar-wrap { position: relative; height: 12px; }
.bl-bar-track {
  position: relative; display: flex; height: 10px; border-radius: 5px;
  overflow: visible; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.bl-seg {
  height: 100%;
  transition: width .55s cubic-bezier(.4,0,.2,1);
}
.bl-seg-under { background: #4ade80; }
.bl-seg-on    { background: #60a5fa; }
.bl-seg-over  { background: #fb5a71; }

/* 53% threshold white dashed line */
.bl-marker53 {
  position: absolute; top: -1px; bottom: -1px;
  width: 2px; background: rgba(255,255,255,.75);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(255,255,255,.5);
}

.bl-nums {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-family: var(--mono); white-space: nowrap;
}
.bl-num { font-weight: 700; letter-spacing: .02em; }
.bl-num-under { color: #4ade80; }
.bl-num-on    { color: #60a5fa; }
.bl-num-over  { color: #fb5a71; }
.bl-num.bl-hot {
  font-size: 12px;
  text-shadow: 0 0 10px currentColor;
  filter: brightness(1.15);
}

/* Edge badge — shown only when one side beats 53% */
.bl-edge {
  font-size: 10.5px; font-weight: 900; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.bl-edge-over {
  color: #fb5a71; background: rgba(251,90,113,.15);
  border: 1px solid rgba(251,90,113,.4);
  text-shadow: 0 0 8px rgba(251,90,113,.6);
}
.bl-edge-under {
  color: #4ade80; background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.4);
  text-shadow: 0 0 8px rgba(74,222,128,.5);
}

/* ── Series game-position analysis ─────────────────────────────────────────── */
.mh-ss-meta {
  font-size: 12.5px; color: var(--mh-dim); margin-bottom: 12px; line-height: 1.5;
}
.mh-ss-meta b { color: var(--text); }

/* Auto-insights callout */
.mh-ss-insights {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(96,165,250,.05); border: 1px solid rgba(96,165,250,.25);
}
.mh-ss-ins-head {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #60a5fa; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.mh-ss-ins-head span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mh-faint); font-size: 11px; }
.mh-ss-ins {
  display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.05); font-size: 12.5px;
}
.mh-ss-ins:first-of-type { border-top: 0; }
.mh-ss-ins-bucket {
  flex: 0 0 118px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--gold); white-space: nowrap;
}
.mh-ss-ins-txt { flex: 1; color: var(--mh-dim); }
.mh-ss-ins-txt b { color: var(--text); }
.mh-ss-ins-txt b.over  { color: #fb5a71; }
.mh-ss-ins-txt b.under { color: #4ade80; }
.mh-ss-ins-d {
  font-family: var(--mono); font-size: 10.5px; color: #60a5fa;
  background: rgba(96,165,250,.12); padding: 1px 6px; border-radius: 5px; margin-left: 4px;
}
.mh-ss-ins-n { font-family: var(--mono); font-size: 11px; color: var(--mh-faint); white-space: nowrap; }
.mh-ss-noins { font-size: 12.5px; color: var(--mh-faint); margin-bottom: 14px; }

/* Bucket cards */
.mh-ss-hero { margin-bottom: 14px; }
.mh-ss-groups { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .mh-ss-groups { grid-template-columns: 2fr 3fr; } }
.mh-ss-group-head {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mh-dim); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px;
}
.mh-ss-group-head span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mh-faint); }
.mh-ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.mh-ss-card {
  padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08);
}
.mh-ss-card.hero { background: rgba(227,178,60,.05); border-color: rgba(227,178,60,.3); }
.mh-ss-favsec { margin-top: 18px; }
.mh-ss-card.fav-coin { background: rgba(96,165,250,.05); border-color: rgba(96,165,250,.28); }
.mh-ss-card.fav-coin .mh-ss-label { color: #60a5fa; }
.mh-ss-card.fav-sfav { background: rgba(251,90,113,.05); border-color: rgba(251,90,113,.3); }
.mh-ss-card.fav-sfav .mh-ss-label { color: #fb5a71; }

/* Game position × favoritism heatmap */
.mh-ss-pfsec { margin-top: 18px; }
.mh-ss-pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mh-ss-pf-card {
  padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08);
}
.mh-ss-pf-head {
  font-weight: 800; font-size: 13px; color: var(--text); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.mh-ss-pf-head span { font-weight: 500; font-size: 11px; color: var(--mh-faint); font-family: var(--mono); }
.mh-ss-pf-tbl { width: 100%; border-collapse: collapse; }
.mh-ss-pf-tbl th {
  font-size: 13px; font-weight: 600; color: var(--mh-dim); padding: 2px 3px; text-align: center;
}
.mh-ss-hr { font-size: 11.5px; color: var(--text); padding: 3px 6px 3px 0; white-space: nowrap; }
.mh-ss-hn { font-family: var(--mono); font-size: 10px; color: var(--mh-faint); padding: 3px 6px 3px 0; white-space: nowrap; }
tr.coin .mh-ss-hr { color: #60a5fa; }
tr.sfav .mh-ss-hr { color: #fb5a71; }
.mh-ss-hc {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-align: center;
  padding: 3px 0; border-radius: 5px; min-width: 34px; color: #e7e7ea;
}
.mh-ss-hc.hot   { background: rgba(251,90,113,.28); color: #fecdd3; }
.mh-ss-hc.neu   { background: rgba(96,165,250,.14); color: #bfdbfe; }
.mh-ss-hc.cold  { background: rgba(74,222,128,.24); color: #bbf7d0; }
.mh-ss-hc.empty { background: transparent; color: var(--mh-faint); font-weight: 400; }
.mh-ss-card-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.mh-ss-label { font-weight: 800; font-size: 13.5px; color: var(--text); }
.mh-ss-card.hero .mh-ss-label { color: var(--gold); }
.mh-ss-sub { font-size: 11px; color: var(--mh-faint); flex: 1; }
.mh-ss-n { font-family: var(--mono); font-size: 11px; color: var(--mh-dim); white-space: nowrap; }

.mh-ss-mrow { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.04); }
.mh-ss-mrow:first-of-type { border-top: 0; }
.mh-ss-mrow.empty { opacity: .5; }
.mh-ss-mrow-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.mh-ss-mk {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text);
  display: flex; align-items: center; gap: 5px;
}
.mh-ss-mk-icon { font-size: 13px; flex: 0 0 auto; }
.mh-ss-mk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ss-none { font-size: 11px; color: var(--mh-faint); font-family: var(--mono); flex: 0 0 auto; }
.mh-ss-nums { flex: 0 0 auto; display: flex; gap: 8px; }
.mh-ss-num {
  font-family: var(--mono); font-size: 11px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
}
.mh-ss-num.under { color: #4ade80; }
.mh-ss-num.over  { color: #fb5a71; }
.mh-ss-mrow-bot { display: flex; align-items: center; gap: 8px; }
.mh-ss-avg {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: var(--mh-faint);
  white-space: nowrap; min-width: 46px;
}
.mh-ss-bar {
  flex: 1; min-width: 24px; height: 7px; border-radius: 4px; overflow: hidden;
  display: flex; background: rgba(255,255,255,.06);
}
.mh-ss-seg { height: 100%; }
.mh-ss-seg.under { background: #4ade80; }
.mh-ss-seg.over  { background: #fb5a71; }
.mh-ss-delta {
  font-size: 9px; padding: 0 3px; border-radius: 4px; font-weight: 700; margin-left: 1px;
}
.mh-ss-delta.up   { color: #fb7185; background: rgba(251,113,133,.14); }
.mh-ss-delta.down { color: #4ade80; background: rgba(74,222,128,.14); }
.mh-ss-num.under .mh-ss-delta.up   { color: #4ade80; background: rgba(74,222,128,.14); }
.mh-ss-num.under .mh-ss-delta.down { color: var(--mh-faint); background: rgba(255,255,255,.06); }
.mh-ss-num.over  .mh-ss-delta.down { color: var(--mh-faint); background: rgba(255,255,255,.06); }
.mh-ss-foot {
  margin-top: 14px; font-size: 11px; color: var(--mh-faint); line-height: 1.5;
}

/* ── Load more button ── */
.mh-load-more-container {
  display: flex;
  justify-content: center;
  margin: 20px 0 4px;
}
.mh-load-more-btn {
  background: transparent;
  border: 1px solid var(--mh-line-2);
  color: var(--mh-dim);
  font-family: var(--font);
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.mh-load-more-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(45,212,191,.07);
}



/* ═══════════ Prediction accuracy (leak-free, local-only) ═══════════
   Centred card under the league bar, stripped to the number itself. The tier
   (how far above a coin flip the model is running) no longer says its name —
   it picks the colour, the glow and the edge hairline instead. The sample, the
   window and the edge in points are all in the card's tooltip. */
.mh-acc {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin: 0 0 16px;
}
.mh-acc:empty { display: none; }
.mh-acc.loading { opacity: .5; }

.mh-acc-card {
  --acc: var(--mh-dim);
  --acc-soft: rgba(255, 255, 255, .10);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 168px; padding: 14px 26px; cursor: help;
  background:
    radial-gradient(130% 110% at 50% -25%, var(--acc-soft), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid var(--mh-line-2); border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
}
/* Hairline of the tier colour along the top edge — the card's only tell. */
.mh-acc-card::before {
  content: ''; position: absolute; left: 20%; right: 20%; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  border-radius: 2px;
}
.mh-acc-card.elite  { --acc: #3ddc97; --acc-soft: rgba(61, 220, 151, .16); border-color: rgba(61, 220, 151, .30); }
.mh-acc-card.strong { --acc: #4fd1c5; --acc-soft: rgba(79, 209, 197, .14); border-color: rgba(79, 209, 197, .26); }
.mh-acc-card.slim   { --acc: #e8c15a; --acc-soft: rgba(232, 193, 90, .13); border-color: rgba(232, 193, 90, .24); }
.mh-acc-card.flat   { --acc: #9aa7bd; --acc-soft: rgba(154, 167, 189, .12); }
.mh-acc-card.poor   { --acc: #fb5a71; --acc-soft: rgba(251, 90, 113, .14); border-color: rgba(251, 90, 113, .26); }

.mh-acc-pct {
  font-family: var(--mh-num); font-size: 38px; font-weight: 800; line-height: 1;
  letter-spacing: -1px; color: var(--acc); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px var(--acc-soft);
}
.mh-acc-pct span { font-size: 19px; font-weight: 700; margin-left: 2px; opacity: .75; }

.mh-acc-leagues { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mh-acc-chip {
  display: inline-flex; align-items: baseline; gap: 5px; cursor: help;
  font-size: 13px; font-weight: 700; color: var(--mh-dim);
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--mh-line-2);
  font-variant-numeric: tabular-nums;
}
.mh-acc-chip em { font-style: normal; font-weight: 800; color: var(--mh-faint); letter-spacing: .4px; }
.mh-acc-none { font-size: 12.5px; font-weight: 600; color: var(--mh-faint); }