/* NPL live + profiles. Surfaces, ink and fonts come from theme.css; this adds team colours and ball colours. */
:root {
  --team: #7d0f22;
  --team-accent: #e8891a;
  --team-3: #ffffff;
  --out: #d23a2c;
  --four: #0f7c6e;
  --six: #b5179e;
  --extra: #a35f00;
  --good: #1f8a4c;
  --bad: #c2410c;
}

/* Block titles: sentence case in the display face (theme.css sets the family). */
h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -.005em; }
h2 .muted { font-family: var(--body); font-stretch: 100%; font-size: .85rem; font-weight: 500; }
.est {
  display: inline-block; padding: 0 5px; border-radius: 4px; vertical-align: 2px;
  font-family: var(--body); font-size: .7rem; font-weight: 600; font-stretch: 100%;
  border: 1px dashed currentColor; opacity: .85;
}
.ic { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 0; flex: none; }
.ic path { fill: none; }

/* Team colours belong to the score bar, the main scoreboard and the event popups only.
   Everything below the scoreboard (crease, overs, charts, commentary) uses the neutral app palette. */
.grid, .comms { --team: var(--ink-2); --team-accent: var(--brand-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    /* Alpenglow: team colour up top, warm sunset light just above the peaks. */
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, #e8735a 26%, transparent) 86%, color-mix(in srgb, #f0a35a 34%, transparent) 100%),
    radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--team) 70%, white) 0%, transparent 55%),
    linear-gradient(170deg, var(--team) 40%, color-mix(in srgb, var(--team) 72%, var(--team-shade, #000)) 100%);
  background-color: var(--team); color: var(--team-ink, #fff);
  padding: 18px 16px 36px;
  border-radius: 0 0 28px 28px;
  transition: background-color .5s ease;
}
/* Team symbol as a faded watermark behind the score. */
.watermark {
  position: absolute; z-index: -1; right: -24px; top: 56px; width: min(44vw, 190px); height: auto; aspect-ratio: 1;
  color: var(--team-ink, #fff); opacity: .1; pointer-events: none;
}
/* Neutral hero (before play, innings break): full-bleed league backdrop (lib/backdrops.js). */
.backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.backdrop--map { opacity: .6; }
.hero--neutral.hero--simple { min-height: 210px; }
.hero--board .backdrop { opacity: .5; }
.hero--board .backdrop--map { opacity: .35; }
/* Prayer flags across the top, Himalayan ridge along the bottom. */
.flags { position: absolute; top: 0; left: 0; width: 100%; height: 20px; color: color-mix(in srgb, var(--team-ink, #fff) 35%, transparent); opacity: .7; pointer-events: none; }
.ridge { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; pointer-events: none; }
.ridge-back { fill: color-mix(in srgb, #f3b08a 60%, var(--team)); opacity: .32; }
.ridge-snow { fill: #ffe6d2; opacity: .45; }
.ridge-front { fill: color-mix(in srgb, var(--team) 60%, black); opacity: .55; }

/* Scorebug: the top bar, pinned. Top row: other games + Simple/Expert. Then a panel per team with
   Live · innings · over between them, and the equation (need X off Y) underneath. */
.scorebug {
  position: sticky; top: 0; z-index: 40;
  padding: 6px 10px 8px; padding-top: max(6px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--team) 88%, black); color: var(--team-ink, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.sb-topbar { padding: 6px 10px; background: color-mix(in srgb, var(--team) 88%, black); color: var(--team-ink, #fff); }
.sb-top { display: flex; align-items: center; gap: 8px; max-width: 980px; margin: 0 auto; }
/* Hidden above the screen until the scoreboard's team cards scroll away (both modes). */
.scorebug { position: fixed; left: 0; right: 0; transform: translateY(-110%); transition: transform .25s ease; }
.scorebug.is-stuck { transform: none; }
@media (prefers-reduced-motion: reduce) { .scorebug { transition: none; } }
.sb-games {
  display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.sb-games::-webkit-scrollbar { display: none; }
.gm {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px;
  color: color-mix(in srgb, var(--team-ink, #fff) 78%, transparent); text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-stretch: var(--narrow); font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--team-ink, #fff) 8%, transparent); border: 1px solid transparent;
}
.gm:hover { color: var(--team-ink, #fff); background: color-mix(in srgb, var(--team-ink, #fff) 14%, transparent); }
.gm:focus-visible { outline: none; box-shadow: var(--focus); }
.gm[aria-current="page"] { color: var(--team); background: #fff; }
.gm--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; }
.gm[aria-current="page"].gm--live::before { background: var(--out); }
.gm-v { opacity: .55; font-weight: 600; }
.gm b { font-weight: 900; margin-left: 2px; }
.sb-mid { display: grid; justify-items: center; gap: 3px; min-width: 64px; text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sb-mid .pill { padding: 2px 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.pill--break, .pill--done { background: var(--team-accent); color: #0e1a33; }
.sb-inn { font-size: .72rem; font-weight: 700; opacity: .8; white-space: nowrap; }
.sb-over { font-size: .72rem; font-weight: 600; opacity: .9; white-space: nowrap; }
.sb-over b { font-family: var(--display); font-stretch: var(--narrow); font-size: 1.1rem; font-weight: 900; }
.sb-over small { opacity: .7; }
.sb-line { max-width: 980px; margin: 7px auto 0; text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; opacity: .95; }
.sb-line b { font-family: var(--display); font-stretch: var(--narrow); font-weight: 900; color: var(--team-accent); font-size: 1rem; }
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; max-width: 980px; margin: 0 auto; }
.sb-team {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 14px;
  background: var(--team); color: var(--team-ink, #fff); border: 1px solid color-mix(in srgb, var(--team-ink, #fff) 14%, transparent);
  opacity: .7; transition: opacity .3s;
}
.sb-team--right { flex-direction: row-reverse; text-align: right; }
.sb-team.is-batting { opacity: 1; border-color: var(--team-accent); box-shadow: 0 0 0 1px var(--team-accent), 0 6px 18px rgba(0, 0, 0, .25); }
.sb-team.is-won { background: linear-gradient(120deg, var(--team), color-mix(in srgb, var(--team-accent) 35%, var(--team))); }
.crest--sb { width: 36px; height: 36px; border-radius: 10px; font-size: .78rem; }
.sb-id { display: grid; min-width: 0; gap: 1px; }
.sb-name { min-width: 0; font-size: .95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-full { display: none; }
.sb-note { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-team--right .sb-note { justify-content: flex-end; }
.sb-note b { color: var(--team-accent); font-weight: 900; }
.sb-note .ic { width: 12px; height: 12px; flex: none; }
.sb-score { display: grid; justify-items: end; margin-left: auto; font-family: var(--display); font-stretch: var(--narrow); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.sb-team--right .sb-score { justify-items: start; margin-left: 0; margin-right: auto; }
.sb-score b { font-size: 1.9rem; font-weight: 900; letter-spacing: -.01em; }
.sb-score b small { font-size: 1.05rem; opacity: .75; }
.sb-ov { margin-top: 2px; font-size: .78rem; font-weight: 700; opacity: .8; }
.sb-ov small { font-weight: 600; }
/* A score that just changed pulses once (red flash for a wicket). */
.sb-bump b { display: inline-block; animation: sb-bump .7s cubic-bezier(.2, 1.6, .4, 1); }
.sb-bump--wkt b { animation: sb-bump .7s cubic-bezier(.2, 1.6, .4, 1), sb-wkt 1.4s ease-out; }
@keyframes sb-bump { 30% { transform: scale(1.18); color: var(--team-accent); } }
@keyframes sb-wkt { 0%, 40% { color: #ff8a7a; } }
.sb-tag { display: none; }
.scorebug.is-stuck { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
@media (max-width: 599px) {
  .scorebug { padding: 6px 8px 8px; }
  .sb-row { gap: 5px; }
  .sb-mid { min-width: 56px; }
  .sb-team { gap: 7px; padding: 6px 8px; border-radius: 12px; }
  .crest--sb { width: 28px; height: 28px; border-radius: 8px; font-size: .66rem; }
  .sb-name { font-size: .85rem; }
  .sb-note { font-size: .66rem; }
  .sb-note .ic { display: none; }
  .sb-score b { font-size: 1.6rem; }
  .sb-score b small { font-size: .9rem; }
  .sb-ov { font-size: .68rem; }
}
@media (max-width: 380px) {
  .sb-team .crest--sb { display: none; }
}
.slogan {
  display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--team-ink, #fff) 12%, transparent); color: var(--team-ink, #fff);
  font-family: var(--display); font-stretch: var(--narrow); font-size: .8rem; font-weight: 900;
}

/* Situation (headline) beside the batters and bowler. */
.hero-main { display: grid; gap: 14px; }
.situation { min-width: 0; }
.hcrease { padding: 6px 4px 8px; border-radius: 16px; background: rgba(0, 0, 0, .18); border: 1px solid color-mix(in srgb, var(--team-ink, #fff) 10%, transparent); }
.hcrease ul { list-style: none; margin: 0; padding: 0; }
.hc-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; }
.hc-row + .hc-row { border-top: 1px solid color-mix(in srgb, var(--team-ink, #fff) 8%, transparent); }
.hc-row .ic { width: 18px; height: 18px; opacity: .6; }
.hc-row.is-strike { background: color-mix(in srgb, var(--team-ink, #fff) 10%, transparent); }
.hc-row.is-strike .ic { opacity: 1; }
.hc-row--empty { opacity: .7; font-style: italic; }
.hc-row--bowl { margin-top: 2px; }
.hc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-weight: 700; font-size: .9rem; }
.hc-tag { padding: 0 6px; border-radius: 999px; background: #fff; color: var(--team); font-size: .66rem; font-weight: 800; }
.hc-fig { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-fig b { font-family: var(--display); font-stretch: var(--narrow); font-size: 1.2rem; font-weight: 900; }
.hc-fig small { font-size: .72rem; opacity: .75; }
.hcrease .pips { gap: 3px; }
.hcrease .pip { width: 10px; height: 4px; background: color-mix(in srgb, var(--team-ink, #fff) 22%, transparent); }
.hcrease .pip--used { background: #fff; }
.hcrease .pip--part { background: linear-gradient(90deg, #fff 50%, color-mix(in srgb, var(--team-ink, #fff) 22%, transparent) 50%); }
.hc-part { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; font-size: .8rem; opacity: .85; }
.hc-part .ic { width: 16px; height: 16px; opacity: .6; }

/* Overs timeline inside the hero: mobile only (desktop shows it beside This over). */
.hero-timeline { margin-top: 16px; padding: 10px 10px 4px; border-radius: 16px; background: rgba(0, 0, 0, .18); }
.ht-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .78rem; font-weight: 800; opacity: .85; }
.ht-label span { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .7; }
.hero-timeline .cells { height: 38px; }
.hero-timeline .cell .bar { background: color-mix(in srgb, var(--team) 40%, white); box-shadow: none; opacity: .9; }
.hero-timeline .cell--todo { background: color-mix(in srgb, var(--team-ink, #fff) 15%, transparent); }
.hero-timeline .stot small, .hero-timeline .axis span { color: color-mix(in srgb, var(--team-ink, #fff) 65%, transparent); }
.hero-timeline .cell.is-on .bar { box-shadow: 0 0 0 2px #fff; }
.hero--loading { min-height: 240px; display: grid; place-items: center; opacity: .8; }
.hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; font-weight: 700; margin-bottom: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 0; color: inherit;
  background: color-mix(in srgb, var(--team-ink, #fff) 18%, transparent); font-size: .8rem; font-weight: 800;
}
.pill--live { background: #fff; color: var(--out); }
.pill--live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--out);
  animation: pulse 1.6s ease-in-out infinite;
}
.pill--offline { background: #ffe1d6; color: var(--bad); }
@keyframes pulse { 50% { opacity: .25; } }
.vs { display: inline-flex; align-items: center; gap: 6px; }
.vs-v { opacity: .6; font-weight: 600; }
.inn { margin-left: auto; opacity: .75; font-weight: 600; }
.crest {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 10px; background: var(--c); color: var(--team-ink, #fff);
  font-family: var(--display); font-stretch: var(--narrow); font-size: .7rem; font-weight: 900;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--team-ink, #fff) 55%, transparent);
}
.crest--sm { width: 28px; height: 22px; border-radius: 7px; font-size: .62rem; }
.crest--xs { width: 24px; height: 18px; border-radius: 6px; font-size: .56rem; }
.crest--ghost { visibility: hidden; }

.headline {
  font-family: var(--display); font-stretch: var(--narrow); font-weight: 700; font-size: clamp(1.55rem, 6.4vw, 2.3rem);
  line-height: 1.12; letter-spacing: -.015em;
}
.headline b { font-weight: 900; color: var(--team-accent); }
.headline { font-size: clamp(1.4rem, 5.6vw, 2.1rem); }
.sub { margin-top: 8px; font-size: .95rem; opacity: .92; }
.trend { font-weight: 800; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--team-ink, #fff) 16%, transparent); }
.mood {
  margin-top: 12px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem;
  background: #fff; color: var(--ink);
}
.mood::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.mood--0 { color: var(--good); }
.mood--1 { color: #2f6f2f; }
.mood--2 { color: var(--bad); }
.mood--3 { color: var(--out); }
.mood .est { color: var(--muted); }
.mood [lang="ne"] { font-size: .95rem; }
.mood-en { font-weight: 600; font-size: .72rem; color: var(--muted); }

.explain {
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: #fff; color: var(--ink); font-size: .9rem;
}

.classic { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-family: var(--display); font-stretch: var(--narrow); }
.classic-score { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.classic-ov { font-size: 1.1rem; font-weight: 700; }
.classic-ov small { opacity: .7; font-weight: 500; }
.classic-other { margin-left: auto; font-weight: 700; opacity: .85; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.stats div { display: flex; gap: 6px; align-items: baseline; }
.stats dt { font-size: .78rem; font-weight: 700; opacity: .75; }
.stats dd { margin: 0; font-weight: 800; font-size: 1.05rem; }

/* ---------- Scoreboard pulse row (both modes): balls / wickets rings + chase strip or run-rate race ---------- */
.mb-pulse {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px;
  padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid color-mix(in srgb, var(--team-ink, #fff) 8%, transparent);
}
.pl-rings { display: flex; gap: 14px; }
.pl-ring { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--team-ink, #fff); cursor: pointer; }
.ring-wrap { position: relative; display: grid; place-items: center; width: 84px; aspect-ratio: 1; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; }
.ring-track { stroke: color-mix(in srgb, var(--team-ink, #fff) 14%, transparent); stroke-width: 2.5; }
.ring-left { stroke: var(--team-ink, #fff); stroke-width: 9; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--team-ink, #fff) 35%, transparent)); }
.ring-tick { stroke: color-mix(in srgb, var(--team-ink, #fff) 55%, transparent); stroke-width: 2; }
.ring-head { fill: var(--team); stroke: var(--team-ink, #fff); stroke-width: 3; }
.ring-lost { fill: #ff8a75; opacity: .75; }
.pl-ring--wickets .ring-left { stroke: var(--team-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--team-accent) 60%, transparent)); }
.pl-ring--wickets .ring-head { stroke: var(--team-accent); }
.ring-num { display: grid; justify-items: center; line-height: 1; }
.ring-num b { font-family: var(--display); font-stretch: var(--narrow); font-size: 1.85rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ring-num small { margin-top: 3px; font-size: .64rem; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.pl-label { font-size: .7rem; font-weight: 800; letter-spacing: .03em; opacity: .85; white-space: nowrap; }
.pl-ring.is-warn .ring-left { stroke: #ff8a75; filter: drop-shadow(0 0 4px rgba(255, 138, 117, .6)); }
.pl-ring.is-warn .ring-head { stroke: #ff8a75; }
.pl-ring.is-warn b { color: #ffb4a6; }
.pl-ring.is-open .pl-label { text-decoration: underline; text-underline-offset: 3px; }
.pl-side { min-width: 0; }
/* Inside the pulse row the chase strip loses its own box. */
.mb-pulse .mb-chase { padding: 0; background: none; }
.board .explain { margin: 0; }

/* Run-rate race (first innings): scoring against par, plus the last few overs. */
.rt { display: grid; gap: 7px; min-width: 0; font-size: .8rem; font-weight: 700; }
.rt-head { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.rt-row { display: grid; grid-template-columns: 4.6em 1fr 2.8em; align-items: center; gap: 8px; }
.rt-k { opacity: .75; white-space: nowrap; }
.rt-k .est { font-size: .55rem; }
.rt-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--team-ink, #fff) 12%, transparent); overflow: hidden; }
.rt-bar i { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width .6s ease; }
.rt-row--vs .rt-bar i { background: color-mix(in srgb, var(--team-ink, #fff) 45%, transparent); }
.rt.is-ahead .rt-row--now .rt-bar i { background: var(--team-accent); }
.rt.is-behind .rt-row--vs .rt-bar i { background: #ff8a75; }
.rt-row b { text-align: right; font-family: var(--display); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; font-weight: 600; opacity: .8; }
.rt-foot .est { font-size: .55rem; }
.rt-recent b { font-weight: 800; }
@media (max-width: 560px) {
  .mb-pulse { grid-template-columns: 1fr; justify-items: stretch; padding: 10px 12px; }
  .pl-rings { justify-content: space-around; }
  .ring-wrap { width: 76px; }
}
/* Simple: the mood badge under the headline */
.situation .mood { margin-top: 10px; }

/* Team identity chip in the hero's top row. */
.ident { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: .7rem; font-weight: 800; color: var(--team-accent); white-space: nowrap; overflow: hidden; }
.ident > span { overflow: hidden; text-overflow: ellipsis; }
.ident-sym { width: 18px; height: 18px; flex: none; color: var(--team-3); }

/* Simple crease: one card, a two-line row per batter and for the bowler. */
.crease-s h2 { margin-bottom: 8px; }
.cr { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cr-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 1px 10px;
  padding: 8px 12px; border-top: 1px solid var(--line-2);
}
.cr-row:first-child { border-top: 0; }
.cr-row > .ic { width: 16px; height: 16px; color: var(--muted); grid-row: span 2; }
.cr-row.is-strike { background: color-mix(in srgb, var(--team-accent) 10%, var(--paper)); }
.cr-row.is-strike > .ic { color: var(--team-accent); }
.cr-row--empty { color: var(--muted); font-style: italic; }
.cr-row--empty > .ic { grid-row: auto; }
.cr-row--bowl { background: color-mix(in srgb, var(--team-accent) 7%, var(--paper)); border-top-color: var(--line); }
.cr-row--bowl > .ic { color: var(--team-accent); }
.cr-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.crease-s .hc-tag { background: var(--brand-2); color: #fff; }
.cr-fig { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-fig b { font-family: var(--display); font-stretch: var(--narrow); font-size: 1.45rem; font-weight: 800; line-height: 1.05; }
.cr-fig small { font-size: .82rem; color: var(--muted); }
.cr-note { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-note b { color: var(--ink); font-weight: 700; }
.cr-note .pips { display: inline-flex; gap: 3px; }
.cr-note .pip { width: 12px; height: 5px; border-radius: 2px; background: var(--line); }
.cr-note .pip--used { background: var(--team-accent); }
.cr-note .pip--part { background: linear-gradient(90deg, var(--team-accent) 50%, var(--line) 50%); }
.cs-near { color: var(--brand); }
/* This over's balls in the bowler row. */
.cr-over { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.cr-over small { margin-right: 3px; }
.mini {
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; display: inline-grid; place-items: center;
  font-family: var(--display); font-size: .74rem; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.mini--dot { color: var(--muted); }
.mini--four { background: var(--four); border-color: var(--four); color: #fff; }
.mini--six { background: var(--six); border-color: var(--six); color: #fff; }
.mini--out { background: var(--out); border-color: var(--out); color: #fff; }
.mini--extra { border-style: dashed; color: var(--extra); border-color: var(--extra); }

/* Player style tag and every-ball tiles (dots grey, boundaries coloured, out red). */
.persona { display: inline-flex; align-items: baseline; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.persona small { font-size: .72rem; opacity: .8; }
.persona--blaze, .persona--attack { color: var(--loss); }
.persona--stuck { color: var(--muted); }
.persona--lethal { color: var(--brand); }
.persona--miser { color: var(--win); }
.persona--expensive { color: var(--loss); }
.xt-name + .persona { margin-left: 6px; }
.dna { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.dna i { width: 6px; height: 10px; border-radius: 2px; background: var(--line); }
.dna .dna--run { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.dna .dna--four { background: var(--four); }
.dna .dna--six { background: var(--six); }
.dna .dna--out { background: var(--out); }
.dna .dna-more { width: auto; height: auto; background: none; font-style: normal; font-size: .7rem; }

/* ---------- Expert: denser, scorecard-like ---------- */
.hero--board { padding-bottom: 56px; border-radius: 0 0 18px 18px; }
.hero--board .watermark { opacity: .05; }
.hero--board .headline { font-size: 1.05rem; font-weight: 800; letter-spacing: 0; }
.hero--board .sub { font-size: .82rem; margin-top: 4px; }
.board {
  display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1);
}
.board .classic { margin: 0; }
.board .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; margin: 0; }
.board .stats div { display: grid; gap: 1px; }
.board .stats dd { font-size: 1rem; }
.hcrease--x { padding: 8px 10px; }
.xtab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .84rem; }
.xtab th, .xtab td { padding: 5px 4px; text-align: right; }
.xtab th:first-child { text-align: left; width: 44%; }
.xtab thead th { font-size: .7rem; font-weight: 800; opacity: .7; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.xtab thead th .crest { vertical-align: middle; margin-right: 4px; }
.xtab tbody + thead th { padding-top: 12px; }
.xtab tbody th { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.xtab abbr { text-decoration: none; color: var(--team-accent); margin-left: 2px; }
.xtab tr.is-strike th, .xtab tr.is-strike td { background: rgba(255, 255, 255, .07); }
.xtab td b { font-weight: 900; }
.hcrease--x .hc-part { padding: 6px 4px 0; }

/* ---------- Content blocks ---------- */
main { max-width: 1100px; margin: 0 auto; }
.grid { display: grid; gap: 0; padding: 4px 16px 0; }
.block { padding: 18px 0; border-bottom: 1px solid var(--line); }
.block h2 { margin-bottom: 12px; }

/* Ball slots */
.slots { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0; padding: 0; }
.slot { display: grid; justify-items: center; gap: 3px; }
.ball {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--display); font-stretch: var(--narrow); font-weight: 900; font-size: 1rem;
  background: var(--paper); border: 2px solid var(--line); color: var(--ink);
}
.ball--dot { color: var(--muted); }
.ball--four { background: var(--four); border-color: var(--four); color: #fff; }
.ball--six { background: var(--six); border-color: var(--six); color: #fff; }
.ball--out { background: var(--out); border-color: var(--out); color: #fff; }
.ball--extra { color: var(--extra); border-color: var(--extra); border-style: dashed; font-size: .78rem; }
.ball--todo { background: transparent; border-style: dashed; }
.ball--corrected { outline: 2px dotted var(--extra); outline-offset: 2px; }
.slot-word { font-size: .68rem; font-weight: 600; color: var(--muted); }
.slot.is-new .ball { animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.over-sum { margin-top: 10px; font-size: .88rem; color: var(--ink-2); }

/* ---------- Every over (timeline) ---------- */
.strip { display: grid; gap: 12px; }
.srow { display: grid; gap: 4px; }
.shead { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.shead .muted { margin-left: auto; font-size: .74rem; font-variant-numeric: tabular-nums; }
.cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 64px; }
.cell {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; border-radius: 3px;
}
.cell.is-pp, .cell--todo.is-pp, .axis .is-pp { background: color-mix(in srgb, var(--team-accent) 12%, transparent); }
.cell::before { content: ""; position: absolute; inset: -4px -1px; } /* larger tap target */
.cell .rn { display: block; font-style: normal; font-size: .58rem; font-weight: 700; line-height: 1.3; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cell.is-big .rn { color: var(--ink); font-weight: 900; }
.cell .bar {
  position: relative; display: block; height: calc(var(--h) * .62); min-height: 3px;
  background: var(--team); border-radius: 3px 3px 1px 1px; opacity: .78;
}
.cell .marks { display: flex; justify-content: center; gap: 1px; height: 8px; margin-top: 2px; }
.cell .wk, .wk-inline { width: 6px; height: 6px; border-radius: 50%; background: var(--out); }
.six-cap, .six-inline { display: block; height: 3px; border-radius: 2px; background: var(--six); }
.six-cap { position: absolute; top: -5px; left: 0; right: 0; }
.wk-inline, .six-inline, .pp-inline { display: inline-block; vertical-align: middle; }
.six-inline { width: 12px; }
.pp-inline { width: 12px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--team-accent) 25%, transparent); }
.cell:hover .bar { opacity: 1; }
.cell.is-on .bar { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.cell.is-live .bar { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .4; } }
.cell--todo { position: relative; border-radius: 3px; }
.cell--todo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; border-radius: 2px; background: var(--line); }
.stot { font-family: var(--display); font-stretch: var(--narrow); font-weight: 900; font-size: 1rem; font-variant-numeric: tabular-nums; }
.stot small { font-size: .78rem; color: var(--muted); font-weight: 700; }
.srow--axis .cells { height: auto; }
.axis span { font-size: .6rem; color: var(--muted); text-align: center; border-radius: 3px; font-variant-numeric: tabular-nums; }

/* ---------- Event popups: a broadcast-style moment card per big ball ----------
   Team colours with an event colour (four blue, six magenta, wicket red) for the burst ring and art. */
.sticker-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.pop {
  --ev: var(--team-accent);
  position: absolute; left: 50%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
  width: min(92vw, 420px); padding: 12px 18px 12px 12px; border-radius: 20px; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team) 92%, white) 0%, var(--team) 45%, color-mix(in srgb, var(--team) 70%, black) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 4px color-mix(in srgb, var(--ev) 55%, transparent), 0 22px 50px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
  animation: pop-in .55s cubic-bezier(.18, 1.5, .4, 1), pop-out .35s ease-in 2.35s forwards;
}
.pop--four { --ev: var(--four); }
.pop--six { --ev: var(--six); }
.pop--wicket { --ev: var(--out); }
.pop--win { animation: pop-in .6s cubic-bezier(.18, 1.5, .4, 1), pop-out .4s ease-in 3.7s forwards; }
.pop:not(.pop--major) { grid-template-columns: 1fr; width: auto; max-width: 92vw; padding: 8px 16px; border-radius: 14px; animation: pop-in .4s cubic-bezier(.18, 1.5, .4, 1), pop-out .3s ease-in 1.65s forwards; }
.pop--extra { background: var(--paper); color: var(--ink); --ev: var(--extra); }
/* Burst: a ring in the event colour expanding behind the card */
.pop-burst { position: absolute; z-index: -1; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--ev); animation: pop-burst .9s ease-out .1s both; }
.pop-text { display: grid; gap: 1px; min-width: 0; }
.pop-big { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-stretch: var(--narrow); font-weight: 900; line-height: .9; font-size: clamp(2.6rem, 12vw, 3.4rem); letter-spacing: -.02em; }
.pop-big small { font-size: .78rem; font-weight: 800; letter-spacing: .14em; opacity: .85; }
.pop--major .pop-big { color: #fff; text-shadow: 0 3px 0 color-mix(in srgb, var(--ev) 70%, black); }
.pop:not(.pop--major) .pop-big { font-size: 1.5rem; }
/* Devanagari: no letter-spacing (it breaks conjuncts) and the Nepali face first. */
.pop-big, .pop-team { font-family: var(--deva), var(--display); letter-spacing: 0; }
.pop-big small { letter-spacing: 0; font-size: .95rem; }
.sb-topbar[hidden] { display: none; }
.pop-slogan { font-size: .82rem; font-weight: 800; font-style: italic; color: var(--team-accent); }
.pop-slogan[lang="ne"] { font-family: var(--deva); font-style: normal; font-size: .95rem; }
.pop-ne { font-family: var(--deva), var(--display); font-size: 1.15rem; font-weight: 800; }
.pop-team { margin-top: 2px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.pop-winner { font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.05; }
.pop-cap { margin-top: 3px; font-size: .78rem; font-weight: 600; opacity: .9; }
.pop-logo { position: absolute; top: -14px; right: -10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--team); box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0, 0, 0, .35); animation: pop-logo .6s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.pop-logo svg { width: 78%; height: 78%; }
@keyframes pop-in { from { transform: translateX(-50%) translateY(-18px) scale(.6) rotate(-4deg); opacity: 0; } }
@keyframes pop-out { to { transform: translateX(-50%) translateY(-12px) scale(.9); opacity: 0; } }
@keyframes pop-burst { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35, 1.8); opacity: 0; } }
@keyframes pop-logo { from { transform: scale(0) rotate(-40deg); } }

/* Scene art (popArt in app.js) */
.pop-art { width: 104px; height: 62px; overflow: visible; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.pa-ground { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.pa-trail { stroke: color-mix(in srgb, var(--ev) 70%, white); stroke-width: 2.4; stroke-dasharray: 4 5; stroke-dashoffset: 200; animation: pa-draw .9s ease-out forwards; }
.pa-ball { fill: #fff; stroke: none; offset-rotate: 0deg; animation: pa-fly .9s cubic-bezier(.3, .6, .4, 1) forwards; }
.pa-ball--six { offset-path: path('M12 64Q62 -30 112 26'); }
.pa-ball--four { offset-path: path('M10 60Q40 66 60 62T104 62'); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
.pa-ball--wkt { offset-path: path('M0 58Q30 54 56 46'); animation-duration: .45s; }
.pa-spark { stroke: var(--ev); stroke-width: 2.6; opacity: 0; animation: pa-spark .5s ease-out .8s forwards; transform-origin: 112px 26px; }
.pa-rope { stroke: var(--ev); stroke-width: 3; transform-origin: 106px 48px; animation: pa-rope .5s ease-out .75s; }
.pa-st { fill: #fff; stroke: none; transform-box: fill-box; transform-origin: bottom; }
.pa-st--1 { animation: pa-st1 .5s ease-out .42s forwards; }
.pa-st--2 { animation: pa-st2 .5s ease-out .42s forwards; }
.pa-bail { fill: var(--ev); stroke: none; transform-box: fill-box; transform-origin: center; }
.pa-bail--1 { animation: pa-bail1 .8s cubic-bezier(.2, .7, .4, 1) .42s forwards; }
.pa-bail--2 { animation: pa-bail2 .8s cubic-bezier(.2, .7, .4, 1) .42s forwards; }
.pa-cup { stroke: #fff; stroke-width: 3; transform-origin: 60px 40px; animation: pa-cup .7s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
@keyframes pa-draw { to { stroke-dashoffset: 0; } }
@keyframes pa-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes pa-spark { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes pa-rope { 40% { transform: scaleX(1.5) translateX(3px); } }
@keyframes pa-st1 { to { transform: rotate(-22deg); } }
@keyframes pa-st2 { to { transform: rotate(14deg) translateX(2px); } }
@keyframes pa-bail1 { to { transform: translate(-22px, -26px) rotate(-260deg); opacity: .2; } }
@keyframes pa-bail2 { to { transform: translate(26px, -30px) rotate(300deg); opacity: .2; } }
@keyframes pa-cup { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }

/* Win: prayer-flag confetti over the whole screen */
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 14px; background: var(--c); transform: rotate(var(--r)); animation: confetti 3.2s cubic-bezier(.3, .2, .5, 1) var(--d) forwards; }
@keyframes confetti { to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }

@media (prefers-reduced-motion: reduce) {
  .pop, .pop--win, .pop:not(.pop--major) { animation: pop-out .3s ease-in 2.4s forwards; }
  .pop-burst, .pa-trail, .pa-ball, .pa-spark, .pa-rope, .pa-st, .pa-bail, .pa-cup, .pop-logo { animation: none; }
  .pa-ball { offset-distance: 100%; }
  .confetti { display: none; }
}

@media (min-width: 900px) {
  .grid--x { padding: 18px 0 0; }
  .ph { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Expert mode ---------- */
[data-mode="expert"] .ball { width: 36px; height: 36px; font-size: .9rem; }

/* ---------- Wider screens ---------- */
@media (min-width: 900px) {
  main { padding: 0 20px; }
  .hero { border-radius: 0 0 32px 32px; padding: 30px 28px 76px; }
  .hero-main { grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
  .hero-timeline { display: none; }
  .grid { grid-template-columns: 1fr 1.25fr; gap: 0 36px; padding: 4px 8px 0; }
  .sb-short { display: none; }
  .sb-full { display: inline; }
  .watermark { right: 4%; top: 24px; width: 230px; }
  .cells { height: 72px; }
}

/* Dark theme (data-theme set by theme-init.js from the toggle or the system setting) */
:root[data-theme="dark"] {
    --four: #3fbfa8;
    --six: #e05ad0;
    --out: #ef5b4c;
    --extra: #f0a54a;
  }
:root[data-theme="dark"] .mood, :root[data-theme="dark"] .explain { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .cell .bar { background: color-mix(in srgb, var(--team) 65%, white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
[data-mode="expert"] .moments summary::after { color: var(--team-accent); }
[data-mode="expert"] .moments summary > .muted { font-size: .78rem; }
/* Dark theme (data-theme set by theme-init.js from the toggle or the system setting) */
:root[data-theme="dark"] .persona--attack { color: #f59a6b; }
:root[data-theme="dark"] .persona--anchor, :root[data-theme="dark"] .persona--steady { color: #8ab8f0; }
:root[data-theme="dark"] .persona--stuck { color: #a8bccd; }

/* Scoreboard numerals: condensed display face, the one loud thing on the page. */
.ring-num b, .classic-score, .classic-ov, .sb-score b, .cs-fig b, .hc-fig b, .stot, .headline b, .sb-line b {
  font-family: var(--display); font-stretch: var(--narrow); font-weight: 800;
}

/* ---------- Simple, phones: score, crease and timeline on one screen ---------- */
@media (max-width: 899px) {
  /* Columns dissolve so the timeline can sit straight under the crease. */
  .grid--simple .col { display: contents; }
  /* The ball just bowled first, then who's in, then the over-by-over story. */
  .grid--simple .crease-s { order: 2; }
  .grid--simple .overs { order: 3; }
  .grid--simple .moments { order: 4; }
  .grid--simple .block { padding: 12px 0; }
  .grid--simple .overs .hint { font-size: .78rem; }
  .grid--simple .cells { height: 52px; }

  .hero--simple { padding: 10px 14px 12px; border-radius: 0 0 20px 20px; }
  .hero--simple .hero-top { margin-bottom: 8px; }
  .hero--simple .ridge { height: 34px; }
  .pagebar-in { padding-top: 6px; padding-bottom: 6px; }

  /* Live, innings and over are in the top bar; the slogan row only earns its space on wider screens. */
  .hero--simple .hero-top { display: none; }

  .crease-s h2 { margin-bottom: 6px; font-size: 1.05rem; }
  .crease-s h2 .muted { font-size: .78rem; }
  .cr-row { padding: 6px 12px; }
  .cr-fig b { font-size: 1.3rem; }
  .grid--simple .overs h2 { margin-bottom: 6px; font-size: 1.05rem; }
  .grid--simple .strip { gap: 6px; }
  .grid--simple .cells { height: 44px; }
}

/* Scorer commentary (scored NPL matches) */
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.cm-ov { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ======================================================================
   Restored: over detail, key moments, tooltip and the Expert analysis
   panels (charts, tables, wagon wheels). These rules went missing in a
   refactor, which left the worm as a black box and the wheels unstyled.
   ====================================================================== */
.hint { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.hint .dna { display: inline-flex; margin: 0 2px; vertical-align: -1px; }

.over-detail { margin-top: 12px; padding: 12px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: .88rem; }
.close { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: var(--paper-2); font-size: 1.1rem; line-height: 1; }
.od-events { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; color: var(--ink-2); }
.od-events b { font-variant-numeric: tabular-nums; margin-right: 4px; color: var(--ink); }

/* Key moments */
.moments summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.moments summary::-webkit-details-marker { display: none; }
.moments summary h2 { margin: 0; }
.moments summary::after { content: "Show"; margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--brand-2); }
.moments[open] summary::after { content: "Hide"; }
.mo-list { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.mo-list li { min-width: 0; }
.moment {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: baseline; gap: 4px 10px; width: 100%; padding: 9px 12px; text-align: left; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper);
}
@media (max-width: 420px) { .moment { grid-template-columns: 1fr; } }
.moment--wicket { border-color: color-mix(in srgb, var(--out) 45%, var(--line)); }
.mo-top { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.mo-ic { display: inline-grid; place-items: center; min-width: 20px; color: var(--ink); font-size: .8rem; }
.mo-ic .ic { width: 16px; height: 16px; color: var(--out); }
.mo-word { font-family: var(--deva); font-size: .8rem; font-weight: 700; color: var(--ink); }
.mo-text { font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.mo-shout { color: var(--out); font-weight: 800; }
.mo-ic--x { min-width: 26px; padding: 0 5px; border-radius: 6px; font-family: var(--mono, inherit); font-weight: 800; font-size: .72rem; background: var(--paper-2); color: var(--ink); }
.moment--wicket .mo-ic--x { background: var(--out); color: #fff; }

/* Shared floating tooltip for chart marks. */
.tip {
  position: fixed; z-index: 60; top: 0; left: 0; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: #0b1222; color: #eef2f8; font-size: .78rem; font-weight: 600; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transition: opacity .12s;
  font-variant-numeric: tabular-nums;
}
.tip.is-on { opacity: 1; }

/* ---------- Expert: analyst panels on the app's own surfaces (light and dark) ---------- */
body[data-mode="expert"] {
  --panel: var(--paper); --panel-2: var(--paper-2); --pb: var(--muted);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.grid--x { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 16px 0; }
.grid--x .col { display: grid; gap: 14px; align-content: start; min-width: 0; }
/* Expert rows: related panels side by side on wide screens (scorecard + scoring areas; predict + what if +
   projected), stacked on phones. A lone panel takes the whole row. */
.xrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .xrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .xrow--bat { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .xrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xrow > .col:only-child { grid-column: 1 / -1; }
}
[data-mode="expert"] .block { border-bottom: 0; }
.panel, [data-mode="expert"] .grid--x .col > .block {
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
}
[data-mode="expert"] .block h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 1.05rem; }
[data-mode="expert"] .grid--x .tabs { padding: 0; border: 0; box-shadow: none; background: none; }
[data-mode="expert"] .cell .bar { background: color-mix(in srgb, var(--team) 55%, white); }
.x-note { margin-top: 8px; font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.up { color: var(--good); }
.down { color: var(--bad); }

/* Legends and swatches: one slot per innings, used by every chart. */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; font-size: .78rem; color: var(--ink-2); }
.legend small { color: var(--muted); font-variant-numeric: tabular-nums; }
.lg, .key { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; flex: none; }
.sw--s1 { background: var(--s1); }
.sw--s2 { background: var(--s2); }
.sw--pb { background: var(--pb, var(--muted)); }
.sw--px { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 4px); }
.sw--wkt { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--panel, var(--paper)); }
.sw--tgt { height: 0; border-top: 2px dashed var(--muted); }
.sw--need { height: 0; border-top: 2px dotted var(--s2); }
.sw--req { height: 0; border-top: 2px dashed var(--ink-2); }
.sw--gap-up { height: 10px; background: color-mix(in srgb, var(--good) 45%, transparent); }
.sw--gap-down { height: 10px; background: color-mix(in srgb, var(--bad) 45%, transparent); }
.sw--pp { height: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* Charts */
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--body); }
.ch-grid { stroke: var(--line-2); stroke-width: 1; }
.ch-base { stroke: var(--muted); stroke-width: 1; }
.ch-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-pp { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.ch-pp-label { fill: var(--muted); font-size: 10px; font-weight: 700; }
.ch-target { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch-target-label { fill: var(--ink-2); font-size: 11px; font-weight: 700; }
.ch-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.s1 .ch-line { stroke: var(--s1); }
.s2 .ch-line { stroke: var(--s2); }
.ch-wkt { fill: var(--ink); stroke: var(--panel, var(--paper)); stroke-width: 2; cursor: help; }
.s1 .ch-wkt { fill: var(--s1); }
.s2 .ch-wkt { fill: var(--s2); }
.ch-end { fill: var(--ink); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--panel, var(--paper)); stroke-width: 4px; stroke-linejoin: round; }
.ch-col rect { fill: transparent; }
.ch-col line { stroke: var(--ink-2); stroke-width: 1; opacity: 0; }
.ch-col:hover rect { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.ch-col:hover line { opacity: .6; }
/* Chase overlay on the worm: ahead/behind band and the straight path still needed. */
.ch-gap { stroke: none; }
.ch-gap--up { fill: color-mix(in srgb, var(--good) 38%, transparent); }
.ch-gap--down { fill: color-mix(in srgb, var(--bad) 38%, transparent); }
.ch-need { stroke: var(--s2); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }
.ch-now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.worm .ch-line { stroke-dasharray: 2000; stroke-dashoffset: 0; animation: worm-draw 1.1s ease-out; }
@keyframes worm-draw { from { stroke-dashoffset: 2000; } }

/* Manhattan (both innings overlapped) */
.mh-bar { cursor: pointer; }
.mh-bar path { transition: opacity .15s; }
.mh-bar.s1 path { fill: var(--s1); }
.mh-bar.s2 path { fill: var(--s2); }
.mh-hit { fill: transparent; }
.mh-wkt { fill: var(--ink); stroke: var(--panel, var(--paper)); stroke-width: 1.5; }
.manhattan:hover .mh-bar path { opacity: .55; }
.manhattan .mh-bar:hover path, .mh-bar.is-on path { opacity: 1; }
.mh-bar.is-on path { stroke: var(--ink); stroke-width: 1.5; }

/* Run-rate race */
.ch-req { fill: none; stroke: var(--ink-2); stroke-width: 1.75; stroke-dasharray: 5 4; }
.rr-pt { fill: transparent; cursor: help; }
.rr-pt:hover { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.ch-end--s1 { fill: var(--ink); }
.ch-end--req { fill: var(--ink-2); font-weight: 600; }

/* Tables: projections + scorecards */
.xt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .86rem; }
.xt th, .xt td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.xt thead th { font-size: .74rem; font-weight: 700; color: var(--muted); border-bottom-color: var(--line); }
.xt th:first-child { text-align: left; }
.xt tbody th { font-weight: 600; }
.xt small { color: var(--muted); font-weight: 600; }
.xt tfoot th, .xt tfoot td { border-bottom: 0; padding-top: 8px; font-size: .82rem; color: var(--ink-2); }
.pj th:first-child { width: 22%; }
.pj td:nth-child(3) { width: 12%; }
.pj td:nth-child(4) { width: 18%; }
.pj td { vertical-align: middle; }
.pj-bar { position: relative; text-align: left !important; }
.pj-bar > i:first-child { display: block; height: 10px; border-radius: 0 4px 4px 0; transition: width .4s ease; }
.pj tr.is-now th, .pj tr.is-now td b { color: var(--brand-2); }
.pj tr:not(.is-now) .pj-bar > i:first-child { opacity: .5; }
.pj-goal { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed var(--ink); }
.pj-key { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.pj-key .pj-goal { position: static; display: inline-block; height: 10px; }
.pj-bar .sw--s1, .pj-bar .sw--s2 { height: 10px; }

/* Phases */
.ph { display: grid; gap: 8px; }
.ph-tile { padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper-2); }
.ph-head { margin-bottom: 4px; font-size: .8rem; font-weight: 700; }
/* Name, score and rate on one line, the rate bar full width under them (tiles are narrow on desktop). */
.ph-line { display: grid; grid-template-columns: 14px auto 1fr auto; grid-template-areas: "sw tm sc rr" ". bar bar bar"; align-items: center; gap: 2px 8px; padding: 3px 0; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ph-line > .sw { grid-area: sw; }
.ph-line > span:not(.ph-rr) { grid-area: tm; }
.ph-line > b { grid-area: sc; }
.ph-line small { grid-area: rr; text-align: right; color: var(--ink-2); }
.ph-rr { grid-area: bar; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ph-rr i { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.ph-line--todo { grid-template-areas: "sw tm sc rr"; opacity: .6; }
.ph-line--todo > span.muted { grid-area: sc; }

/* Innings tabs + chips */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab, .chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
}
.tab small, .chip small { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tab[aria-pressed="true"], .chip[aria-pressed="true"] { border-color: var(--ink-2); color: var(--ink); background: var(--paper-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { padding: 4px 10px; font-size: .78rem; }
.chip--reset { border-style: dashed; }

/* Scorecard rows */
.xt .xt-name { font-weight: 700; color: var(--ink); }
.xt abbr { text-decoration: none; color: var(--brand); margin-left: 2px; }
.xt-how { display: block; font-size: .74rem; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-how em { color: var(--good); font-style: normal; font-weight: 700; }
.xt tbody th .dna { display: flex; margin-top: 4px; }
.xt tbody th .dna i { width: 5px; height: 8px; }
.xt tr[data-wheel] { cursor: pointer; }
.xt tr[data-wheel]:hover th, .xt tr[data-wheel]:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.xt tr.is-sel th { box-shadow: inset 3px 0 0 var(--brand-2); }
.xt tr.is-out .xt-name { color: var(--ink-2); }
.xt tr.is-strike th, .xt tr.is-strike td { background: color-mix(in srgb, var(--brand-2) 9%, transparent); }
.xt-sr { position: relative; width: 16%; }
.srbar { position: absolute; right: 4px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ink-2); opacity: .45; max-width: calc(100% - 8px); }
.aura-row--blaze .srbar { background: var(--loss); opacity: 1; height: 3px; }
.aura-row--expensive .srbar--econ { background: var(--bad); opacity: 1; }
.aura-row--miser .srbar--econ { background: var(--good); opacity: 1; }
.xtab .xt-empty th, .xtab .xt-empty td { opacity: .6; font-style: italic; }

/* Partnerships */
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "wkt names tot" ". bar bar"; gap: 3px 8px; align-items: baseline; font-size: .82rem; font-variant-numeric: tabular-nums; }
.pt-wkt { grid-area: wkt; color: var(--muted); font-size: .74rem; }
.pt-names { grid-area: names; display: flex; justify-content: space-between; gap: 8px; min-width: 0; color: var(--ink-2); }
.pt-names > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-names small, .pt-tot small { color: var(--muted); font-weight: 600; margin-left: 2px; }
.pt-tot { grid-area: tot; }
.pt-bar { grid-area: bar; display: flex; gap: 2px; height: 8px; transform-origin: left; animation: grow-x .6s ease-out; }
.pt-bar i { display: block; height: 100%; min-width: 0; }
.pt-bar i:first-child { border-radius: 4px 0 0 4px; }
.pt-bar i:last-child { border-radius: 0 4px 4px 0; }
.pt-x { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 4px); }
.pt-b { background: var(--pb, var(--muted)); }
@keyframes grow-x { from { transform: scaleX(0); } }

/* Fall of wickets */
.fow-tick { stroke: var(--muted); }
.fow-mark circle { fill: var(--out); stroke: var(--panel, var(--paper)); stroke-width: 2; }
.fow-mark text { fill: #fff; font-size: 10px; font-weight: 800; }
.fow-mark { cursor: help; }
.fow { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.fow li { padding: 3px 8px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); }
.fow b { color: var(--ink); }
.fow small { color: var(--muted); }

/* Wagon wheels */
.wheels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wheel { margin: 0; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.wheel figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: .84rem; }
.wheel figcaption small { color: var(--muted); }
.wagon { max-width: 200px; margin: 6px auto 0; }
.ww-field { fill: color-mix(in srgb, #1f8a4c 14%, var(--paper)); stroke: var(--line); }
.ww-ring { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-dasharray: 3 3; }
.ww-wedge { fill: color-mix(in oklab, var(--s2) calc(var(--k) * 90%), transparent); stroke: var(--paper); stroke-width: 2; cursor: help; transition: fill .3s; }
.ww-wedge.is-best { stroke: var(--six); }
.ww-wedge:hover { filter: brightness(1.15); }
.ww-runs { fill: var(--ink); font-size: 11px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.ww-pitch { fill: #c9b48a; }
.ww-side { fill: var(--muted); font-size: 8px; font-weight: 700; }
.wheel-sum { margin-top: 6px; font-size: .78rem; color: var(--ink-2); }
.wheel-sum b { color: var(--ink); }
.wheel-sum small { display: block; color: var(--muted); }
.wheel-split { display: block; height: 4px; margin: 4px 0 2px; border-radius: 2px; background: var(--pb, var(--muted)); overflow: hidden; }
.wheel-split i { display: block; height: 100%; background: var(--s2); border-right: 2px solid var(--paper); }

/* Commentary */
.comms { max-width: var(--wrap); margin: 14px auto 0; padding: 14px 16px; }

/* ---------- Expert match board: both teams' scorecards in the hero ---------- */
.mb { gap: 12px; }
.mb-teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mb-team {
  position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 10px 12px 12px;
  border-radius: 12px; background: color-mix(in srgb, var(--team-ink, #fff) 6%, transparent); border: 1px solid color-mix(in srgb, var(--team-ink, #fff) 10%, transparent);
}
.mb-team.is-bat { background: color-mix(in srgb, var(--team-ink, #fff) 11%, transparent); border-color: var(--team-accent); }
.mb-team.is-won { border-color: var(--team-accent); box-shadow: 0 0 24px -8px var(--team-accent); }
.mb-team.is-wait { opacity: .8; }
/* Each side keeps its own symbol and colour behind its card all game. */
.mb-team { overflow: hidden; isolation: isolate; background: linear-gradient(135deg, color-mix(in srgb, var(--team) var(--team-tint, 55%), transparent), color-mix(in srgb, var(--team-ink, #fff) 5%, transparent)); color: var(--team-ink, #fff); }
.mb-team.is-bat { background: linear-gradient(135deg, color-mix(in srgb, var(--team) var(--team-tint, 70%), transparent), color-mix(in srgb, var(--team-ink, #fff) 10%, transparent)); }
.mb-mark { position: absolute; z-index: -1; right: -14px; top: 50%; width: 120px; height: auto; aspect-ratio: 1; transform: translateY(-50%); color: var(--team-ink, #fff); opacity: .12; pointer-events: none; }
.mb-team.is-wait .mb-mark { opacity: .09; }
.mb-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mb-name { min-width: 0; font-family: var(--display); font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--team-accent); color: #0e1a33; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.mb-tag .ic { width: 12px; height: 12px; }
.mb-tag--won { background: #fff; }
.mb-score { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-stretch: var(--narrow); font-variant-numeric: tabular-nums; }
.mb-score b { font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 800; line-height: 1; }
.mb-score b small { font-size: .55em; opacity: .75; }
.mb-score span { font-size: 1rem; font-weight: 700; }
.mb-score span small { font-size: .75rem; opacity: .7; font-weight: 600; }
.mb-wk { display: flex; align-items: center; gap: 8px; font-size: .72rem; opacity: .85; }
.mb-pips { display: inline-flex; gap: 2px; }
.mb-pips i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--team-ink, #fff) 85%, transparent); }
.mb-pips i.is-lost { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--team-ink, #fff) 35%, transparent); }
.mb-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .78rem; opacity: .9; font-variant-numeric: tabular-nums; }
.mb-facts b, .mb-stars b { font-family: var(--display); font-weight: 800; }
.mb-facts > span { white-space: nowrap; }
.mb-facts > span b { margin-left: 3px; }
.mb-stars { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--team-ink, #fff) 10%, transparent); font-size: .78rem; }
.mb-stars span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-stars .ic { width: 13px; height: 13px; opacity: .7; }
.mb-stars small { opacity: .7; }
.mb-wait { font-size: .9rem; opacity: .85; padding: 6px 0; }
.mb-wait b { font-family: var(--display); font-size: 1.3rem; color: var(--team-accent); }

.mb-chase { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.mb-chase-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: .92rem; }
.mb-chase-top b { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--team-accent); }
.mb-rates { display: inline-flex; gap: 12px; font-size: .8rem; }
.mb-rates b { font-size: 1rem !important; color: var(--team-ink, #fff) !important; }
.mb-rrr { padding: 0 6px; border-radius: 6px; }
.mb-rrr--up { background: rgba(76, 194, 131, .25); }
.mb-rrr--even { background: rgba(240, 185, 74, .25); }
.mb-rrr--down { background: rgba(240, 90, 70, .3); }
.mb-track { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.mb-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--team-accent); transition: width .6s ease; }
.mb-then { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); cursor: help; }
.mb-chase-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; opacity: .85; font-variant-numeric: tabular-nums; }
.mb-chase-foot .up { color: #7fe0a8; }
.mb-chase-foot .down { color: #ff9c86; }
.mb-stats { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important; }
.mb-stats dd small { font-size: .7em; opacity: .7; margin-left: 1px; }

@media (min-width: 900px) {
  .ph { grid-template-columns: repeat(3, 1fr); }
  .grid--x { padding: 18px 0 0; }
}
@media (max-width: 420px) {
  .mb-teams { gap: 6px; }
  .mb-team { padding: 8px 9px 10px; }
  .mb-pips i { width: 5px; height: 5px; }
  .mb-wk small { display: none; }
}

/* ---------- Expert: win chance, momentum, what-if, next over, spells, season, predict ---------- */
.wp-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 2px 0 8px; }
.wp-team { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.wp-pct { font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.wp-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.wp-bar i { display: block; height: 100%; transition: width .5s ease; }
.wp-bar i:last-child { flex: 1; }
.wp-mid { stroke: var(--muted); stroke-dasharray: 3 3; }
.wp-break { stroke: var(--muted); stroke-width: 1; }
.wp-fill { stroke: none; }
.wp-fill.s1 { fill: color-mix(in srgb, var(--s1) 22%, transparent); }
.wp-fill.s2 { fill: color-mix(in srgb, var(--s2) 22%, transparent); }
.wp-line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; }
.wp-now { fill: var(--ink); stroke: var(--panel, var(--paper)); stroke-width: 2; }
.wp-side { font-size: 10px; font-weight: 700; }
.wp-side.s1 { fill: var(--s1); }
.wp-side.s2 { fill: var(--s2); }
.wp-col { fill: transparent; cursor: help; }
.wp-col:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent); }

.momo-body { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 14px; align-items: center; }
.gauge { max-width: 220px; }
.gg-arc { fill: none; stroke-width: 12; stroke-linecap: round; }
.gg-arc.s1 { stroke: color-mix(in srgb, var(--s1) 70%, transparent); }
.gg-arc.s2 { stroke: color-mix(in srgb, var(--s2) 70%, transparent); }
.gg-tick { stroke: var(--muted); stroke-width: 1.5; }
.gg-needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: all .5s; }
.gg-hub { fill: var(--ink); }
.gg-end { fill: var(--ink-2); font-size: 12px; font-weight: 800; }
.momo-who { font-size: 1.15rem; }
.momo-who small { font-size: .74rem; color: var(--muted); font-weight: 600; }
.momo-facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.momo-facts b { color: var(--ink); }
.momo-alerts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mo-alert { padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.mo-alert--up { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.mo-alert--down { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }

.wi-row { display: grid; grid-template-columns: 8em 1fr 3em; align-items: center; gap: 10px; margin: 6px 0; font-size: .84rem; color: var(--ink-2); }
.wi-row b { text-align: right; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wi-row input { width: 100%; accent-color: var(--brand-2); }
.wi-marks { display: flex; gap: 14px; font-size: .76rem; color: var(--muted); margin: 0 0 6px; }
.wi-marks b { color: var(--ink-2); }
.wi-out { padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper-2); }
.wi-verdict { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wi-verdict small { color: var(--muted); font-weight: 600; }
.wi-real { margin-top: 6px; font-size: .8rem; color: var(--ink-2); }
.wi-tag { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.wi-tag--up { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.wi-tag--even { background: var(--paper-2); color: var(--ink); }
.wi-tag--down { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }

.nx td { vertical-align: middle; }
.nx td.no-h2h { text-align: left; font-size: .76rem; }
.nx td.no-h2h span { display: block; white-space: nowrap; color: var(--ink-2); }

.sp-name { fill: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.sp-cell { cursor: pointer; }
.sp-cool { fill: color-mix(in srgb, var(--good) calc(20% + var(--k) * 60%), var(--paper-2)); }
.sp-hot { fill: color-mix(in srgb, var(--bad) calc(15% + var(--k) * 65%), var(--paper-2)); }
.sp-runs { fill: var(--ink); font-size: 11.5px; font-weight: 800; pointer-events: none; font-variant-numeric: tabular-nums; }
.sp-w { fill: var(--ink); font-size: 10px; }
.sp-cell:hover rect, .sp-cell.is-on rect { stroke: var(--ink); stroke-width: 1.5; }
.sw--cool { height: 10px; background: color-mix(in srgb, var(--good) 60%, var(--paper-2)); }
.sw--hot { height: 10px; background: color-mix(in srgb, var(--bad) 60%, var(--paper-2)); }

.ch-avg { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.ch-end--avg { fill: var(--ink-2); font-weight: 600; }
.ssn { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 0; }
.ssn > div { padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper-2); }
.ssn dt { font-size: .72rem; font-weight: 700; color: var(--muted); }
.ssn dd { margin: 0; font-variant-numeric: tabular-nums; }
.ssn dd > b { display: block; font-size: 1.1rem; color: var(--ink); }
.ssn dd small { font-size: .74rem; color: var(--ink-2); }

.pg-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--paper-2); font-size: .84rem; color: var(--ink-2); }
.pg-score b { font-size: 1.3rem; color: var(--ink); margin-left: 4px; font-variant-numeric: tabular-nums; }
.pg-score > span:last-child { text-align: right; }
.pg-lead { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pg-over { margin: 10px 0 4px; font-size: .84rem; font-weight: 800; }
.pg-over small { font-weight: 700; margin-left: 6px; }
.pg-q { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 5px 0; border-bottom: 1px solid var(--line-2); font-size: .82rem; }
.pg-q small { color: var(--muted); font-weight: 600; }
.pg-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.pg .chip { position: relative; }
.pg .chip.is-on { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 14%, var(--paper)); color: var(--ink); }
.pg-sys { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--panel, var(--paper)); }
.pg-final { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; }
.pg-final label { font-weight: 800; }
.pg-final input { width: 5.5em; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; }
.pg-final small { color: var(--muted); }
.pg-final-res { margin-top: 10px; font-size: .84rem; color: var(--ink-2); }
.pg-final-res span { margin-left: 6px; font-weight: 800; }
.pg-last { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .74rem; font-variant-numeric: tabular-nums; }
.pg-last li { display: grid; grid-template-columns: auto auto auto; gap: 4px; align-items: baseline; padding: 3px 8px; border-radius: 8px; background: var(--paper-2); color: var(--muted); }
.pg-last b { color: var(--ink); }
.pg-last small { color: var(--muted); }
@media (max-width: 480px) {
  .momo-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .momo-facts, .momo-alerts { justify-content: center; }
  .wi-row { grid-template-columns: 6.5em 1fr 2.6em; }
}

/* Expert hero extras: this over + win chance under the headline. */
.hx-over, .hx-wp { margin-top: 14px; }
.hx-k { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.hx-k small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.hx-over .slots { justify-content: flex-start; }
.hx-wp .wp-head { max-width: 420px; margin: 0; }
.hx-wp .wp-pct { color: inherit; font-size: 1.1rem; }
.hx-wp .wp-team { gap: 6px; }

/* ---------- Big-moment banner: fifty, hundred, five-for, hat-trick, maiden ---------- */
.banner-layer { position: fixed; z-index: 55; left: 0; right: 0; top: 80px; display: grid; justify-items: center; padding: 0 10px; pointer-events: none; }
.banner {
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: min(100%, 640px); padding: 26px 18px 16px; border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--team-accent) 30%, var(--team)) 0%, var(--team) 55%, color-mix(in srgb, var(--team) 70%, black) 100%);
  color: #fff; border: 2px solid var(--team-accent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 4px color-mix(in srgb, var(--team-accent) 25%, transparent);
  animation: bn-in .55s cubic-bezier(.2, 1.4, .4, 1), bn-out .4s ease-in 4.8s forwards;
}
.banner .flags { top: 0; height: 16px; opacity: .9; }
.banner::after { /* light sweep across the card */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%);
  transform: translateX(-100%); animation: bn-shine 1.4s .35s ease-out;
}
.bn-sym { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .1); color: var(--team-accent); }
.bn-sym svg { width: 80%; height: 80%; }
.bn-text { min-width: 0; }
.bn-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; line-height: 1; }
.bn-ne { font-family: var(--display); font-size: clamp(2rem, 8vw, 3rem); font-weight: 900; color: var(--team-accent); text-shadow: 2px 3px 0 rgba(0, 0, 0, .3); animation: bn-pop .6s .15s cubic-bezier(.2, 1.8, .4, 1) both; }
.bn-en { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; opacity: .9; }
.bn-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 1.15rem; }
.bn-who .ic { width: 18px; height: 18px; color: var(--team-accent); }
.bn-who b { font-weight: 900; }
.bn-team { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; opacity: .85; }
.bn-fig { margin-top: 4px; font-size: .9rem; font-variant-numeric: tabular-nums; opacity: .95; }
.bn-fig b { font-family: var(--display); font-stretch: var(--narrow); font-size: 1.25rem; font-weight: 900; color: var(--team-accent); }
.bn-close { align-self: start; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
/* Each kind gets its own edge glow. */
.banner--hundred { border-color: var(--six); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 36px color-mix(in srgb, var(--six) 60%, transparent); }
.banner--hundred .bn-ne { color: var(--six); }
.banner--five, .banner--hattrick { box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 4px color-mix(in srgb, var(--out) 45%, transparent); }
.banner--maiden .bn-ne { font-size: clamp(1.7rem, 7vw, 2.4rem); }
@keyframes bn-in { from { transform: translateY(-30px) scale(.9); opacity: 0; } }
@keyframes bn-out { to { transform: translateY(-16px) scale(.96); opacity: 0; } }
@keyframes bn-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes bn-shine { to { transform: translateX(100%); } }
@media (max-width: 520px) {
  .banner { grid-template-columns: auto 1fr; gap: 10px; padding: 22px 12px 12px; border-radius: 16px; }
  .bn-sym { width: 46px; height: 46px; border-radius: 14px; }
  .bn-close { position: absolute; top: 20px; right: 8px; width: 26px; height: 26px; }
  .bn-who { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .banner { animation: bn-out .3s ease-in 4.8s forwards; }
}