/* =========================================================================
   SI Match-Card Widget — styles
   Theme-hooked via [data-theme]. Default theme: si-dark.
   Brand kit: Sports Interaction.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,600;0,800;1,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700;800&display=swap');

:root {
  /* SI brand kit */
  --si-sportsbook-orange: #FE4000;
  --si-stadium-navy: #0B2234;
  --si-off-side-teal: #027496;
  --si-yellow-card: #FFBC00;
  --si-paper-white: #FFFFFF;
  --si-off-white: #FBFAF7;
  --si-stadium-100: #F2EFE9;
  --si-stadium-200: #D7DDE2;
  --si-stadium-400: #5C6E7C;
}

/* ---- Theme: si-dark (default) ---- */
[data-theme="si-dark"] {
  --surface: var(--si-stadium-navy);
  --surface-raised: #102C42;
  --surface-2: #0E2638;
  --surface-sunken: #081A28;
  --ink: var(--si-paper-white);
  --ink-muted: #9DB0BE;
  --ink-faint: var(--si-stadium-400);
  --line: rgba(215, 221, 226, 0.16);
  --line-strong: rgba(215, 221, 226, 0.30);
  --accent: var(--si-sportsbook-orange);
  --accent-ink: #FFFFFF;
  --chip-bg: rgba(2, 116, 150, 0.22);
  --chip-ink: #6FD3EE;
  --fav-glow: rgba(var(--accent-rgb), 0.45);
  --odd-bg: #0E2839;
  --odd-bg-hover: #143449;
}

/* ---- Theme: si-light (scaffolded for future use) ---- */
[data-theme="si-light"] {
  --surface: var(--si-off-white);
  --surface-raised: #FFFFFF;
  --surface-2: #FBFAF7;
  --surface-sunken: var(--si-stadium-100);
  --ink: var(--si-stadium-navy);
  --ink-muted: #4A5B68;
  --ink-faint: var(--si-stadium-400);
  --line: rgba(11, 34, 52, 0.12);
  --line-strong: rgba(11, 34, 52, 0.22);
  --accent: var(--si-sportsbook-orange);
  --accent-ink: #FFFFFF;
  --chip-bg: rgba(2, 116, 150, 0.12);
  --chip-ink: var(--si-off-side-teal);
  --fav-glow: rgba(var(--accent-rgb), 0.30);
  --odd-bg: #FFFFFF;
  --odd-bg-hover: var(--si-stadium-100);
}

/* ---- Theme: si-brand (bold orange + navy) ---- */
[data-theme="si-brand"] {
  --surface: #0B2234;
  --surface-raised: #0E2C42;
  --surface-2: #0C263A;
  --surface-sunken: #07182532;
  --ink: #FFFFFF;
  --ink-muted: #FFD9C7;
  --ink-faint: #C98B72;
  --line: rgba(var(--accent-rgb), 0.28);
  --line-strong: rgba(var(--accent-rgb), 0.55);
  --accent: var(--si-sportsbook-orange);
  --accent-ink: #FFFFFF;
  --chip-bg: rgba(var(--accent-rgb), 0.22);
  --chip-ink: #FFBC00;
  --fav-glow: rgba(var(--accent-rgb), 0.55);
  --odd-bg: #0E2C42;
  --odd-bg-hover: #143449;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

.si-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Size variants set by data-size on .si-card */
.si-card[data-size="sm"] { max-width: 320px; }
.si-card[data-size="md"] { max-width: 420px; }
.si-card[data-size="lg"] { max-width: 520px; }

/* Top accent rule */
.si-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 2;
}

/* ---------- Header ---------- */
.si-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.si-comp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.si-comp-name {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-round-chip {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chip-ink);
  background: var(--chip-bg);
  padding: 2px 7px;
  border-radius: 3px;
}
.si-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.si-brand-logo {
  height: 18px; width: auto; display: block;
}
.si-card[data-size="sm"] .si-brand-logo { height: 15px; }
.si-card[data-size="lg"] .si-brand-logo { height: 21px; }
/* On the light theme the white logo would vanish — tint the navy card chip behind it */
[data-theme="si-light"] .si-brand-logo {
  background: var(--si-stadium-navy);
  padding: 3px 5px; border-radius: 3px;
}
.si-brand-fallback { display: inline-flex; align-items: center; gap: 6px; }
.si-brand-dot {
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--fav-glow);
}
.si-brand-name {
  font-family: 'Saira Condensed', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Matchup ---------- */
.si-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 14px;
}
.si-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.si-crest {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}
.si-card[data-size="sm"] .si-crest { width: 42px; height: 42px; font-size: 28px; }
.si-card[data-size="lg"] .si-crest { width: 60px; height: 60px; font-size: 40px; }
/* Real national-flag image fills the round crest. */
.si-crest-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Emoji / glyph fallback stays centered inside the same chip. */
.si-crest.si-crest-emoji { font-size: 30px; }
.si-card[data-size="sm"] .si-crest.si-crest-emoji { font-size: 26px; }
.si-card[data-size="lg"] .si-crest.si-crest-emoji { font-size: 36px; }
.si-crest-fallback { line-height: 1; }
.si-team-name {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
  line-height: 1.05;
  max-width: 100%;
}
.si-team-abbr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* Center column: score / kickoff */
.si-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 86px;
}
.si-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.si-vs {
  font-family: 'Saira Condensed', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 18px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.si-kick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.si-kick-date {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.si-countdown {
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.si-status-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Saira Condensed', sans-serif;
  font-style: italic; font-weight: 900;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.si-status-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: si-pulse 1.1s infinite;
}
@keyframes si-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.si-status-ft {
  font-family: 'Saira Condensed', sans-serif;
  font-style: italic; font-weight: 800;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Venue ---------- */
.si-venue {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 16px 12px;
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
}
.si-venue svg { width: 11px; height: 11px; opacity: 0.7; flex-shrink: 0; }

/* ---------- Odds ---------- */
.si-odds {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}
.si-odds-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.si-odds-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800; font-style: italic;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.si-book {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.si-odds-proxy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  color: var(--si-yellow-card);
  background: rgba(255, 188, 0, 0.14);
  padding: 1px 5px; border-radius: 3px;
  vertical-align: middle;
  cursor: help;
}
.si-odds-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.si-odd {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px;
  background: var(--odd-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  text-decoration: none;
}
.si-odd:hover { background: var(--odd-bg-hover); border-color: var(--line-strong); }
.si-odd:active { transform: translateY(1px); }
.si-odd-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-faint); text-transform: uppercase;
}
.si-odd-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 800;
  color: var(--ink);
}
.si-odd.is-fav {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.16), var(--odd-bg));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.si-odd.is-fav .si-odd-v { color: var(--accent); }
.si-odd.is-fav .si-odd-k { color: var(--accent); }

/* ---------- Variant tag (market label under the header) ---------- */
.si-variant-tag {
  align-self: flex-start;
  margin: 0 0 0 16px;
  margin-top: 10px;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 900; font-style: italic;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
/* match variant already names the market inside the odds box — hide the tag there */
.si-card[data-variant="match"] .si-variant-tag { display: none; }

/* ---------- GOALS variant: Over/Under + BTTS duos ---------- */
.si-odds-goals .si-odds-label:not(:first-child) { margin-top: 12px; }
.si-subhead {
  margin: 12px 0 8px;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800; font-style: italic;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.si-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.si-duo-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px;
  background: var(--odd-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.si-duo-cell:hover { background: var(--odd-bg-hover); border-color: var(--line-strong); }
.si-duo-cell:active { transform: translateY(1px); }
.si-duo-k {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink-muted); white-space: nowrap;
}
.si-duo-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 800; color: var(--ink);
}
.si-duo-cell.is-fav {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.16), var(--odd-bg));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.si-duo-cell.is-fav .si-duo-v,
.si-duo-cell.is-fav .si-duo-k { color: var(--accent); }

/* ---------- EXACT variant: correct-score grid ---------- */
.si-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.si-card[data-size="sm"] .si-cs-grid { grid-template-columns: repeat(2, 1fr); }
.si-cs-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 4px;
  background: var(--odd-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.si-cs-cell:hover { background: var(--odd-bg-hover); border-color: var(--line-strong); }
.si-cs-cell:active { transform: translateY(1px); }
.si-cs-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ink);
}
.si-cs-odd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; color: var(--ink-muted);
}
.si-cs-cell.is-fav {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.18), var(--odd-bg));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.si-cs-cell.is-fav .si-cs-score,
.si-cs-cell.is-fav .si-cs-odd { color: var(--accent); }

/* ---------- SCORER variant: ranked player list ---------- */
.si-sc-list { display: flex; flex-direction: column; gap: 6px; }
.si-sc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px;
  background: var(--odd-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.si-sc-row:hover { background: var(--odd-bg-hover); border-color: var(--line-strong); }
.si-sc-row:active { transform: translateY(1px); }
.si-sc-name {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800; font-size: 14px; letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.si-sc-team {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.si-sc-odd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 800; color: var(--ink); flex-shrink: 0;
}
.si-sc-row.is-fav {
  border-color: var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.16), var(--odd-bg));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.si-sc-row.is-fav .si-sc-odd { color: var(--accent); }

.si-noodds {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  text-align: center;
}
.si-noodds-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800; font-style: italic;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-muted);
}
.si-noodds-sub { font-size: 11px; color: var(--ink-faint); }

.si-sample-flag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--si-yellow-card);
}

/* ---------- CTA ---------- */
.si-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 16px 16px;
  padding: 11px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  border-radius: 3px;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 900; font-style: italic;
  font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  transition: filter 120ms ease, transform 80ms ease;
}
.si-cta:hover { filter: brightness(1.08); }
.si-cta:active { transform: translateY(1px); }
.si-cta svg { width: 14px; height: 14px; }

/* ---------- States ---------- */
.si-state {
  padding: 40px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.si-state-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800; font-style: italic;
  font-size: 16px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink);
}
.si-state-sub { font-size: 12px; color: var(--ink-muted); max-width: 260px; line-height: 1.5; }

.si-skeleton { animation: si-shimmer 1.3s ease-in-out infinite; }
@keyframes si-shimmer { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
.si-sk-bar {
  background: var(--surface-raised);
  border-radius: 3px;
  height: 14px;
}

/* Footer note (only shown for sample/offline) */
.si-foot {
  padding: 8px 16px 10px;
  border-top: 1px solid var(--line);
  font-size: 9px;
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: 0.02em;
}

@media (max-width: 380px) {
  .si-team-name { font-size: 13px; }
  .si-score { font-size: 26px; }
}

/* =========================================================================
   COMPUTER PICKS family — picks-game / picks-board / picks-share
   AI model predictions card. Shares the .si-card shell + theme tokens.
   ========================================================================= */

/* ---- shared picks header ---- */
.si-pk-card { padding-bottom: 14px; }
.si-pk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
  background: radial-gradient(420px 120px at 100% -40%, var(--fav-glow), transparent 60%), var(--surface-raised);
}
.si-pk-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.si-pk-sub {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 17px; text-transform: uppercase; color: var(--ink); margin-top: 2px; line-height: 1;
}
.si-pk-logo { height: 24px; width: auto; flex-shrink: 0; opacity: 0.96; }

/* ---- picks-game: predicted-score hero ---- */
.si-pk-matchup {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 16px 16px 6px;
}
.si-pk-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.si-pk-crest-lg { width: 44px; height: 44px; object-fit: contain; }
.si-pk-crest { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.si-pk-crest-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.si-pk-abbr {
  font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-muted);
}
.si-pk-side.win .si-pk-abbr { color: var(--ink); }
.si-pk-score-wrap { text-align: center; }
.si-pk-score-label {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.si-pk-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.si-pk-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--ink); letter-spacing: -0.02em;
}
.si-pk-num.win { color: var(--accent); }
.si-pk-dash { font-family: 'JetBrains Mono', monospace; font-size: 20px; color: var(--ink-faint); }
.si-pk-likely { font-size: 10.5px; color: var(--ink-muted); margin-top: 6px; }
.si-pk-likely strong { color: var(--ink); font-family: 'JetBrains Mono', monospace; }

/* Divider under the predicted-score hero, before the pick block. */
.si-pk-game .si-pk-matchup { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.si-pk-pick {
  margin: 12px 16px 0; padding: 10px 12px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 5px;
}
.si-pk-pick-head { display: flex; align-items: center; gap: 8px; }
.si-pk-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent); padding: 2px 6px; border-radius: 3px;
}
.si-pk-market { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.si-pk-sel {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 20px; line-height: 1.05; color: var(--ink); margin-top: 5px;
}
.si-pk-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.si-pk-prob { color: var(--accent); font-weight: 700; }
.si-pk-sep, .si-pk-line-sep { color: var(--ink-faint); }
.si-pk-odds { color: var(--ink-muted); }

.si-pk-line { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin: 10px 16px 0; }
.si-pk-line strong { color: var(--ink); font-family: 'JetBrains Mono', monospace; }

.si-pk-why { margin: 11px 16px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.si-pk-why-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}
.si-pk-why-body { font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); }
.si-pk-why-body strong { color: var(--ink); }
/* "Full analysis →" trigger inside the picks-game card */
.si-pk-why-more {
  margin-top: 9px; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px;
  padding: 6px 13px; min-height: 32px; cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.si-pk-why-more:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.si-pk-why-more span { font-style: normal; transition: transform 120ms ease; }
.si-pk-why-more:hover span { transform: translateX(2px); }
/* Clickable picks-game card affordance */
.si-pk-clickable { cursor: pointer; }
.si-pk-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.si-pk-conf { margin: 12px 16px 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.si-pk-conf-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.si-pk-conf-lbl { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.si-pk-conf-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink); }
.si-pk-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.si-pk-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--si-yellow-card), var(--accent)); border-radius: 3px; }

.si-pk-game .si-cta, .si-pk-board .si-cta { margin: 14px 16px 0; }

/* coverImageUrl hook for picks-game (optional cover mode) */
.si-pk-cover {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.16; pointer-events: none; z-index: 0;
}
.si-pk-game > *:not(.si-pk-cover) { position: relative; z-index: 1; }

/* ---- picks-board: scannable list ---- */
.si-pk-blist { padding: 8px 12px 4px; display: flex; flex-direction: column; }
.si-pk-brow {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 7px 10px; padding: 11px 4px; border-bottom: 1px solid var(--line);
}
.si-pk-brow:last-child { border-bottom: 0; }
.si-pk-bteams { display: flex; align-items: center; gap: 5px; min-width: 0; }
.si-pk-babbr { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--ink); }
.si-pk-bat { color: var(--ink-faint); font-size: 11px; margin: 0 1px; }
.si-pk-bpick { display: flex; align-items: baseline; gap: 8px; justify-self: end; }
.si-pk-bsel {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 14px; color: var(--accent); white-space: nowrap;
}
.si-pk-bprob { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: var(--ink); }
.si-pk-bbar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.si-pk-bbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--si-yellow-card), var(--accent)); border-radius: 2px; }

/* ---- picks-share: image-forward social card ---- */
.si-pk-share {
  position: relative; min-height: 484px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--accent-rgb),0.35), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(2,116,150,0.40), transparent 55%),
    linear-gradient(155deg, #0B2234 0%, #0E2C42 55%, #07151F 100%);
  background-size: cover; background-position: center;
}
.si-pk-share::before { display: none; }

/* Per-team brand panels behind the crests — a diagonal split that tints each
   half with the club color. Vivid under "Do for me", subtle otherwise. */
.si-pk-share-panels { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.si-pk-share-panel { position: absolute; top: 0; bottom: 0; width: 62%; opacity: 0.30; }
.si-pk-share-panel.away {
  left: 0;
  background: linear-gradient(105deg, var(--away-color, #FE4000) 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 72%);
}
.si-pk-share-panel.home {
  right: 0;
  background: linear-gradient(255deg, var(--home-color, #027496) 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 72%);
}
.si-pk-share.has-autobg .si-pk-share-panel { opacity: 0.5; }

.si-pk-share-scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(7,21,31,0.34) 0%, rgba(7,21,31,0.06) 34%, rgba(7,21,31,0.80) 100%);
}
.si-pk-share-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 18px 18px 20px; gap: 2px; }
.si-pk-share-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.si-pk-share-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #FFBC00;
}
.si-pk-share-logo { height: 22px; width: auto; opacity: 0.96; }

/* ---- crests with brand rings + favorite emphasis ---- */
.si-pk-share-crests { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.si-pk-share-crest { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 160ms ease; }
.si-pk-share-crest-ring {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.16), rgba(7,21,31,0.55));
  border: 1.5px solid rgba(255,255,255,0.16);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}
.si-pk-share-crest.away .si-pk-share-crest-ring { box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 0 0 2px color-mix(in srgb, var(--away-color, #FE4000) 55%, transparent); }
.si-pk-share-crest.home .si-pk-share-crest-ring { box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 0 0 2px color-mix(in srgb, var(--home-color, #027496) 55%, transparent); }
.si-pk-share-crest .si-pk-crest-lg { width: 50px; height: 50px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.si-pk-share-crest-name {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 16px; text-transform: uppercase; color: #fff; letter-spacing: 0.02em;
}
/* favorite gets a glowing ring + a small badge cue */
.si-pk-share-crest.is-fav { transform: scale(1.07); }
.si-pk-share-crest.is-fav .si-pk-share-crest-ring {
  border-color: var(--fav-color, var(--si-sportsbook-orange));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fav-color, #FE4000) 80%, transparent),
              0 0 28px color-mix(in srgb, var(--fav-color, #FE4000) 60%, transparent),
              0 8px 22px rgba(0,0,0,0.5);
}
.si-pk-share-crest.is-fav .si-pk-share-crest-name { color: var(--si-yellow-card); }

/* center "VS" lockup between the crests */
.si-pk-share-vs {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; align-self: flex-start; margin-top: 18px;
  border-radius: 50%; background: rgba(7,21,31,0.55); border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.si-pk-share-vs span {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 14px; color: #fff; letter-spacing: 0.02em;
}

/* ---- predicted score ---- */
.si-pk-share-score { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 18px; }
.si-pk-share-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 62px; line-height: 1;
  color: rgba(255,255,255,0.78); letter-spacing: -0.02em; text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.si-pk-share-num.win { color: #fff; text-shadow: 0 0 26px color-mix(in srgb, var(--fav-color, #FE4000) 55%, transparent), 0 4px 20px rgba(0,0,0,0.5); }
.si-pk-share-dash { font-family: 'JetBrains Mono', monospace; font-size: 30px; color: var(--si-sportsbook-orange); }
.si-pk-share-scorelbl {
  text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 6px;
}

/* ---- divider + pick box ---- */
.si-pk-share-divider {
  width: 100%; height: 1px; margin: 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 20%, rgba(255,255,255,0.22) 80%, transparent);
}
.si-pk-share-pickbox {
  position: relative; margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; align-items: center;
}
.si-pk-share-pick-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--si-stadium-navy);
  background: var(--si-yellow-card); padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,188,0,0.35); margin-bottom: 8px;
}
.si-pk-share-headline {
  text-align: center; font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 30px; line-height: 1.02; text-transform: uppercase; color: var(--si-sportsbook-orange);
  text-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 0 30px rgba(var(--accent-rgb),0.25);
}
.si-pk-share-meta {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #fff;
  background: rgba(7,21,31,0.42); border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 12px; border-radius: 999px;
}
.si-pk-share-prob { color: #FFBC00; font-weight: 700; }
.si-pk-share-conf { color: #6FD3EE; font-weight: 700; }
.si-pk-share-odds { color: rgba(255,255,255,0.92); font-weight: 700; }
.si-pk-share-mdot { color: rgba(255,255,255,0.35); }
/* CTA lives inside .si-pk-share-inner (which already has 18px side padding),
   so zero the inherited side margins to keep it centered + full-width. */
.si-pk-share-cta { margin: 16px 0 0; justify-content: center; width: 100%; }

/* "Do for me" advanced background: stronger scrim so brand colors never
   compromise text legibility. */
.si-pk-share.has-autobg .si-pk-share-scrim {
  background: linear-gradient(180deg, rgba(7,21,31,0.42) 0%, rgba(7,21,31,0.10) 30%, rgba(7,21,31,0.84) 100%);
}

.si-pk-card[data-size="sm"] { max-width: 320px; }
.si-pk-card[data-size="lg"] { max-width: 520px; }

/* =========================================================================
   picks-today — full board with a List / Detailed toggle (embeddable)
   ========================================================================= */
.si-td-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 16px 10px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-faint);
}
.si-td-sum-stat strong { color: var(--ink); font-weight: 700; }
.si-td-sum-sep { color: var(--ink-faint); }

.si-td-viewtoggle {
  display: flex; gap: 4px; margin: 12px 16px 2px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 7px; padding: 3px;
}
.si-td-vt {
  flex: 1; padding: 7px 10px; min-height: 32px;
  background: transparent; color: var(--ink-muted, #9DB0BE);
  border: 0; border-radius: 5px; cursor: pointer;
  font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background 120ms ease, color 120ms ease;
}
.si-td-vt:hover { color: var(--ink); }
.si-td-vt.active { background: var(--accent); color: var(--accent-ink); }

/* ---- List view ---- */
.si-td-list { padding: 8px 12px 4px; max-height: 420px; overflow-y: auto; }
.si-td-list::-webkit-scrollbar { width: 7px; }
.si-td-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.si-td-lrow {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 6px; min-height: 46px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  text-align: left; cursor: pointer; color: var(--ink);
  transition: background 110ms ease;
}
.si-td-lrow:last-child { border-bottom: 0; }
.si-td-lrow:hover { background: var(--surface-2); }
.si-td-lteams { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 auto; }
.si-td-labbr { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--ink); }
.si-td-lat { color: var(--ink-faint); font-size: 11px; margin: 0 1px; }
.si-td-lmid { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 0 0 auto; max-width: 38%; }
.si-td-lpick {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 14px; line-height: 1.05; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.si-td-lresult { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin-left: 5px; }
.si-td-lresult.won { color: #2ED47A; }
.si-td-lresult.lost { color: #FF5A5F; }
.si-td-lscore { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-muted, #9DB0BE); }
.si-td-lright { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; width: 54px; }
.si-td-lwin { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink); }
.si-td-lbar { width: 54px; height: 4px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.si-td-lbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--si-yellow-card), var(--accent)); border-radius: 2px; }
.si-td-lchev { flex: 0 0 auto; color: var(--ink-faint); font-size: 18px; line-height: 1; }

/* ---- Detailed view ---- */
.si-td-cards { padding: 10px 12px 4px; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.si-td-cards::-webkit-scrollbar { width: 7px; }
.si-td-cards::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.si-td-card {
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 12px; background: var(--surface-2);
}
.si-td-card-focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.si-td-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; margin-bottom: 0; border-bottom: 1px solid var(--line);
}
.si-td-match { display: flex; align-items: center; gap: 7px; min-width: 0; }
.si-td-teams { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--ink); }
.si-td-at { color: var(--ink-faint); }
.si-td-status {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--ink-faint); white-space: nowrap;
}
.si-td-status.live { color: var(--accent); }
.si-td-status.final { color: var(--ink-muted, #9DB0BE); }
.si-td-pred { text-align: center; padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.si-td-pred-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.si-td-pred-score { display: flex; align-items: center; justify-content: center; gap: 12px; }
.si-td-pred-team { display: flex; align-items: center; gap: 6px; }
.si-td-pred-abbr { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--ink-faint); }
.si-td-pred-num { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 30px; line-height: 1; color: var(--ink); }
.si-td-pred-team.win .si-td-pred-num, .si-td-pred-team.win .si-td-pred-abbr { color: var(--accent); }
.si-td-pred-dash { font-family: 'JetBrains Mono', monospace; font-size: 20px; color: var(--ink-faint); }
.si-td-pred-likely { font-size: 10px; color: var(--ink-faint); margin-top: 5px; }
.si-td-pick {
  border-left: 3px solid var(--accent); border-radius: 5px;
  background: var(--surface-sunken); padding: 9px 11px; margin-bottom: 8px;
}
.si-td-pick-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.si-td-pick-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent); padding: 2px 6px; border-radius: 3px;
}
.si-td-pick-market { font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.si-td-result { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin-left: auto; }
.si-td-result.won { color: #2ED47A; }
.si-td-result.lost { color: #FF5A5F; }
.si-td-pick-sel { font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 18px; text-transform: uppercase; color: var(--ink); }
.si-td-pick-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-faint); }
.si-td-pick-prob { color: var(--accent); font-weight: 700; }
.si-td-line { font-size: 11px; color: var(--ink-muted, #9DB0BE); margin-bottom: 8px; }
.si-td-line strong { color: var(--ink); }
.si-td-line-sep { color: var(--ink-faint); }
.si-td-why { margin-bottom: 8px; }
.si-td-why-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.si-td-why-list { margin: 0; padding-left: 16px; font-size: 11px; color: var(--ink-muted, #9DB0BE); line-height: 1.45; }
.si-td-why-list strong { color: var(--ink); }
.si-td-conf-top { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-bottom: 4px; border-top: 1px solid var(--line); }
.si-td-conf-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.si-td-conf-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: var(--ink); }
.si-td-bar { width: 100%; height: 5px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.si-td-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--si-yellow-card), var(--accent)); border-radius: 3px; }

.si-td-card-wrap .si-cta { margin: 14px 16px 0; }

@media (max-width: 380px) {
  .si-pk-num { font-size: 28px; }
  .si-pk-share-num { font-size: 52px; }
  .si-pk-share-headline { font-size: 25px; }
  .si-pk-sel { font-size: 18px; }
  .si-td-lmid { max-width: 32%; }
  .si-td-lchev { display: none; }
  .si-td-pred-num { font-size: 26px; }
}

/* =========================================================================
   AI ANALYSIS MODAL (embedded variant) — scoped INSIDE the widget root
   Overlay is absolute within the (position:relative) root, so it works in an
   iframe without touching document.body. Background scroll is locked on the
   root via .si-am-locked. Shared .si-am-* markup with the standalone page.
   All charts are inline SVG / CSS. Sections omitted when data is missing.
   ========================================================================= */
.si-am-locked { overflow: hidden !important; }

/* The overlay is a child of the widget root (never document.body), but uses
   fixed positioning so it fills the IFRAME viewport — fixed is scoped to the
   embedding iframe's own document, so it can't escape onto the host page, yet
   it never gets clipped when the card/root box is shorter than the modal. */
.si-am-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  opacity: 0; visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.si-am-overlay.open { opacity: 1; visibility: visible; }
.si-am-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 12, 19, 0.78);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.si-am-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 440px; max-height: 96%;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong, var(--line)); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  overflow: hidden;
  transform: translateY(8px) scale(0.97);
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.si-am-overlay.open .si-am-panel { transform: translateY(0) scale(1); }

.si-am-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 11px;
  background:
    radial-gradient(420px 120px at 100% -40%, var(--fav-glow, rgba(var(--accent-rgb),0.30)), transparent 60%),
    var(--surface-raised, var(--surface-sunken));
  border-bottom: 1px solid var(--line);
}
.si-am-head-match { display: flex; align-items: center; gap: 9px; min-width: 0; }
.si-am-head-team { display: inline-flex; align-items: center; gap: 7px; }
.si-am-head-team .si-pk-crest, .si-am-head-team img, .si-am-head-team .si-pk-crest-emoji {
  width: 28px; height: 28px; font-size: 18px; object-fit: contain;
}
.si-am-head-abbr {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 17px; text-transform: uppercase; color: var(--ink);
}
.si-am-head-at { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 14px; color: var(--ink-faint); }
.si-am-close {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.si-am-close:hover { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.si-am-close svg { width: 15px; height: 15px; }
.si-am-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.si-am-subhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px 11px; border-bottom: 1px solid var(--line);
  background: var(--surface-raised, var(--surface-sunken));
}
.si-am-pickbadge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  font-size: 14px; text-transform: uppercase; color: var(--ink);
}
.si-am-pickbadge-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; font-style: normal;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink, #fff);
  background: var(--accent); padding: 3px 7px; border-radius: 3px;
}
.si-am-pickbadge-odds {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-style: normal;
  font-weight: 700; color: var(--si-yellow-card);
}
.si-am-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; }

.si-am-body { overflow-y: auto; padding: 2px 14px 6px; }
.si-am-body::-webkit-scrollbar { width: 7px; }
.si-am-body::-webkit-scrollbar-thumb { background: var(--line-strong, var(--line)); border-radius: 4px; }
.si-am-sec { padding: 13px 0; border-bottom: 1px solid var(--line); }
.si-am-sec:last-child { border-bottom: 0; }
.si-am-h {
  margin: 0 0 9px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}

/* win probability */
.si-am-wp-bar {
  display: flex; width: 100%; height: 24px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-sunken);
}
.si-am-wp-away { background: linear-gradient(90deg, var(--chip-ink, #6FD3EE), color-mix(in srgb, var(--chip-ink, #6FD3EE) 65%, #000)); }
.si-am-wp-home { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #000), var(--accent)); margin-left: auto; }
.si-am-wp-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.si-am-wp-side { display: inline-flex; align-items: center; gap: 6px; }
.si-am-wp-side .si-pk-crest, .si-am-wp-side img, .si-am-wp-side .si-pk-crest-emoji {
  width: 20px; height: 20px; font-size: 14px; object-fit: contain;
}
.si-am-wp-abbr { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 12px; text-transform: uppercase; color: var(--ink-muted); }
.si-am-wp-pct { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 15px; }
.si-am-wp-pct.away { color: var(--chip-ink, #6FD3EE); }
.si-am-wp-pct.draw { color: var(--si-yellow-card, #FFBC00); }
.si-am-wp-pct.home { color: var(--accent); }

/* 3-way (soccer) win-probability in the analysis modal: away | draw | home */
.si-am-wp-draw { background: linear-gradient(90deg, color-mix(in srgb, var(--si-yellow-card, #FFBC00) 78%, #000), var(--si-yellow-card, #FFBC00)); }
.si-am-wp-legend3 { gap: 6px; }
.si-am-wp-legend3 .si-am-wp-side { flex: 1; justify-content: center; }
.si-am-wp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.si-am-wp-dot.away { background: var(--chip-ink, #6FD3EE); }
.si-am-wp-dot.draw { background: var(--si-yellow-card, #FFBC00); }
.si-am-wp-dot.home { background: var(--accent); }

/* 3-way win-probability bar on picks-game + picks-today detailed cards */
.si-pk-wp3 { margin: 2px 0 12px; }
.si-pk-wp3-bar {
  display: flex; width: 100%; height: 16px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-sunken);
}
.si-pk-wp3-seg { height: 100%; min-width: 0; }
.si-pk-wp3-seg.away { background: linear-gradient(90deg, var(--chip-ink, #6FD3EE), color-mix(in srgb, var(--chip-ink, #6FD3EE) 65%, #000)); }
.si-pk-wp3-seg.draw { background: linear-gradient(90deg, color-mix(in srgb, var(--si-yellow-card, #FFBC00) 80%, #000), var(--si-yellow-card, #FFBC00)); }
.si-pk-wp3-seg.home { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #000), var(--accent)); }
.si-pk-wp3-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 4px; }
.si-pk-wp3-item {
  display: inline-flex; align-items: center; gap: 5px; flex: 1; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; color: var(--ink-muted);
  white-space: nowrap;
}
.si-pk-wp3-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.si-pk-wp3-dot.away { background: var(--chip-ink, #6FD3EE); }
.si-pk-wp3-dot.draw { background: var(--si-yellow-card, #FFBC00); }
.si-pk-wp3-dot.home { background: var(--accent); }

/* projected score */
.si-am-proj { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.si-am-proj-bars { display: flex; align-items: flex-end; justify-content: center; gap: 16px; height: 90px; width: 100%; }
.si-am-proj-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; width: 38px; }
.si-am-proj-bar { width: 24px; border-radius: 4px 4px 0 0; min-height: 8px; }
.si-am-proj-bar.away { background: linear-gradient(180deg, var(--chip-ink, #6FD3EE), color-mix(in srgb, var(--chip-ink, #6FD3EE) 50%, #000)); }
.si-am-proj-bar.home { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.si-am-proj-abbr { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 11px; text-transform: uppercase; color: var(--ink-faint); }
.si-am-proj-hero { display: flex; align-items: baseline; gap: 9px; padding-bottom: 20px; }
.si-am-proj-num { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 40px; line-height: 1; color: var(--ink-muted); letter-spacing: -0.02em; }
.si-am-proj-num.win { color: var(--accent); }
.si-am-proj-dash { font-family: 'JetBrains Mono', monospace; font-size: 22px; color: var(--ink-faint); }
.si-am-stats { display: flex; gap: 7px; width: 100%; }
.si-am-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 6px;
}
.si-am-stat-v { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 15px; color: var(--ink); }
.si-am-stat-l { font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

/* confidence gauge */
.si-am-gauge { display: flex; align-items: center; gap: 15px; }
.si-am-gauge-svg { flex-shrink: 0; }
.si-am-gauge-track { fill: none; stroke: var(--surface-sunken); stroke-width: 8; }
.si-am-gauge-fill { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 600ms ease; }
.si-am-gauge-txt { fill: var(--ink); font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 18px; }
.si-am-gauge-lbl { font-size: 11.5px; color: var(--ink-muted); }
.si-am-gauge-edge { margin-top: 5px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-muted); }
.si-am-gauge-edge strong { color: #2ED47A; }

/* injuries */
.si-am-inj { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.si-am-inj-col { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.si-am-inj-collabel { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 12px; text-transform: uppercase; color: var(--ink); margin-bottom: 7px; }
.si-am-inj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.si-am-inj-row { display: flex; flex-direction: column; gap: 4px; }
.si-am-inj-player { font-size: 11.5px; color: var(--ink); }
.si-am-inj-pos { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--ink-faint); }
.si-am-inj-none { font-size: 10.5px; color: var(--ink-faint); font-style: italic; }
.si-am-inj-chip {
  position: relative; display: inline-flex; align-items: center; align-self: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px; overflow: hidden;
}
.si-am-inj-chip.neg { color: #FF5C5C; background: rgba(255, 92, 92, 0.14); }
.si-am-inj-chip.pos { color: #2ED47A; background: rgba(46, 212, 122, 0.14); }
.si-am-inj-chipbar { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0.2; }
.si-am-inj-chip.neg .si-am-inj-chipbar { background: #FF5C5C; }
.si-am-inj-chip.pos .si-am-inj-chipbar { background: #2ED47A; }

/* the read */
.si-am-read { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); }

/* key drivers */
.si-am-drv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.si-am-drv-row { padding-left: 11px; border-left: 2px solid var(--accent); }
.si-am-drv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.si-am-drv-label { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 13px; color: var(--ink); }
.si-am-drv-detail { margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); }
.si-am-drv-chip { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.si-am-drv-chip.neg { color: #FF5C5C; background: rgba(255, 92, 92, 0.14); }
.si-am-drv-chip.pos { color: #2ED47A; background: rgba(46, 212, 122, 0.14); }

/* footer */
.si-am-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--line);
  background: var(--surface-raised, var(--surface-sunken));
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.04em;
}
.si-am-foot strong { color: var(--ink-muted); }
.si-am-foot-model { color: var(--ink-muted); }

/* mobile: bottom sheet */
@media (max-width: 440px) {
  .si-am-overlay { padding: 0; align-items: flex-end; }
  .si-am-panel { max-width: 100%; max-height: 100%; border-radius: 14px 14px 0 0; transform: translateY(100%); }
  .si-am-overlay.open .si-am-panel { transform: translateY(0); }
  .si-am-proj-num { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-am-overlay, .si-am-panel, .si-am-gauge-fill { transition: none !important; }
}