/* New for the soccer mock. Header/footer shell mirrors sharpmodels.com's
   structure (sticky header, dark gradient, footer link grid) but the
   sport-pill strip is replaced with a search-first country/competition
   nav, since a flat pill row doesn't work past a handful of leagues. */

.ssm-scope .sm-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: linear-gradient(180deg, #0b2545 0%, #081a35 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ssm-scope .sm-header__top {
  max-width: var(--sm-container-max);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ssm-scope .sm-header__brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ssm-scope .sm-header__brand-mark { width: 30px; height: 30px; }
.ssm-scope .sm-header__brand-title { font-family: var(--sm-font-heading); font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; }
.ssm-scope .sm-header__brand-title--accent,
.ssm-scope .sm-footer__brand-title--accent { color: var(--sm-color-brand-accent); }
.ssm-scope .sm-header__brand-sub { font-family: var(--sm-font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #cdeff5; margin-left: 2px; }

.ssm-scope .sm-header__search {
  flex: 1 1 auto;
  max-width: 420px;
}

.ssm-scope .sm-header__search input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
}

.ssm-scope .sm-header__search input::placeholder { color: #a9d4bb; }

.ssm-scope .sm-header__quicklinks {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 18, 40, 0.96);
}

.ssm-scope .sm-header__quicklinks-inner {
  max-width: var(--sm-container-max);
  margin: 0 auto;
  padding: 7px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.ssm-scope .sm-header__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: #132746;
  color: #e5ecf7;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ssm-scope .sm-header__pill:hover { background: #18325b; }
.ssm-scope .sm-header__pill.is-active { background: var(--sm-color-brand-accent); color: #04111f; }
.ssm-scope .sm-header__pill--browse { background: transparent; border: 1px solid rgba(229,236,247,0.4); }
.ssm-scope .sm-header__pill--browse:hover { background: rgba(229,236,247,0.12); border-color: rgba(229,236,247,0.6); }
.ssm-scope .sm-flag { display: inline-block; margin-right: 6px; border-radius: 2px; flex: 0 0 auto; }

/* --- Subnav: scoped to one competition at a time, so its width is bounded
   regardless of how many competitions exist overall. --- */
.ssm-scope .sm-header__subnav {
  background: #09172e;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  overflow-x: auto;
}

.ssm-scope .sm-header__subnav-inner {
  max-width: var(--sm-container-max);
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  gap: 20px;
  white-space: nowrap;
}

.ssm-scope .sm-header__subnav-link {
  color: #c7d5f5;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  padding-bottom: 4px;
}

.ssm-scope .sm-header__subnav-link:hover { color: #ffffff; }
.ssm-scope .sm-header__subnav-link.is-active { color: #ffffff; font-weight: 700; }
.ssm-scope .sm-header__subnav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: var(--sm-color-brand-accent);
}

/* --- Footer (colors match sharpmodels.com's real #13233a footer exactly;
   only the link/hover accent changes to purple) --- */
.ssm-scope .sm-footer { background: #13233a; color: #dbe6f3; margin-top: 48px; border-top: 1px solid rgba(255,255,255,0.06); }
.ssm-scope .sm-footer__inner { max-width: var(--sm-container-max); margin: 0 auto; padding: 36px 16px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.ssm-scope .sm-footer__brand { font-family: var(--sm-font-heading); color: #fff; font-size: 20px; margin: 0 0 10px; }
.ssm-scope .sm-footer__text { font-size: 13px; line-height: 1.6; color: #c6d4e6; margin: 0 0 10px; }
.ssm-scope .sm-footer__heading { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; margin: 0 0 12px; }
.ssm-scope .sm-footer__col a { display: block; color: #dbe6f3; text-decoration: none; font-size: 13.5px; padding: 3px 0; font-weight: 700; }
.ssm-scope .sm-footer__col a:hover { color: #ffffff; text-decoration: underline; }
.ssm-scope .sm-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.08); padding: 14px 16px; text-align: center; font-size: 12.5px; color: #9fb3cc; }
.ssm-scope .sm-footer__sister { display: block; margin-top: 4px; }
.ssm-scope .sm-footer__sister a { color: var(--sm-color-brand-accent); text-decoration: underline; }

@media (max-width: 900px) {
  .ssm-scope .sm-footer__inner { grid-template-columns: 1fr 1fr; }
  .ssm-scope .sm-header__search { display: none; }
}

/* --- Two-column league layout, ported from sharpmodels.com's container-grid
   (main content + sticky sidebar). Only applied on competition-scoped
   pages -- home/rankings/country-hub stay single column.

   280px, not 340px: sharpmodels-unified-v19.css itself defines
   .container-grid's sidebar column many times over (once per page
   section, leftover "layered patch history" the file's own later
   comment admits to -- "these come last so repeated page CSS is
   normalised"), and un-scoped rules of equal specificity resolve by
   file order, so whichever real NFL page loads that one file gets
   whatever value happens to be declared last in it. Checked live via
   CDP across seven different real NFL page types (Standings, Teams,
   Team Detail, Results, Schedule, Ratings, Archive, H2H index) rather
   than trusting any single .container-grid declaration in isolation --
   all seven measured exactly 280px. (Strength of Schedule and its
   Playoff Chances family are the one exception, at 320px -- they load
   an additional page-specific stylesheet after the shared file that
   overrides it again; soccer's own Strength of Schedule page already
   matches that via .sm-page-shell--narrow-sidebar below.) Was
   previously (wrongly) set to 340px here -- base.css's OWN written
   default, which turns out to never actually be what a real page
   renders once the shared file's later rules are loaded on top. */
.ssm-scope .sm-page-shell.container-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  /* Was 1520px, wider than the header/nav's var(--sm-container-max)
     (1360px) -- both centered via margin:0 auto but at different
     widths, so their left edges didn't line up. Matched to the header
     so content and nav share the same left edge, like the NFL
     reference. */
  max-width: var(--sm-container-max);
  padding: 28px 16px 60px;
  align-items: start;
}
.ssm-scope .sm-page-shell.container-grid .left { min-width: 0; }

/* Strength of Schedule: NFL's own version of this page (dense,
   many-column sortable table) narrows its sidebar to 320px via
   nfl-playoff-chances-page.css's own .container-grid override --
   soccer's page otherwise falls back to the generic 340px default
   above, giving its wide table 20px less room than NFL's equivalent
   gets. Matched here rather than loading that NFL-specific stylesheet
   wholesale (it also carries its own .sm-playoff-hero/tab-switcher
   rules this page doesn't use). */
.ssm-scope .sm-page-shell--narrow-sidebar.container-grid { grid-template-columns: minmax(0, 1fr) 320px; }

.ssm-scope .sm-league-sidepanel { position: sticky; top: 20px; }
.ssm-scope .sm-league-sidepanel__card { background: #fff; border: 1px solid #d7e0eb; border-radius: 14px; box-shadow: var(--sm-shadow-card); padding: 18px; }
.ssm-scope .sm-league-sidepanel__title { margin: 0 0 18px; font-family: var(--sm-font-heading); font-size: 1.5rem; color: #13233a; }
.ssm-scope .sm-league-sidepanel__group + .sm-league-sidepanel__group { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e3eaf3; }
.ssm-scope .sm-league-sidepanel__label { margin-bottom: 12px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5a6b82; font-weight: 800; }
.ssm-scope .sm-league-sidepanel__link { display: block; padding: 4px 0; margin: 0 0 10px; text-decoration: none; color: var(--sm-link-color); font-weight: 700; line-height: 1.4; }
.ssm-scope .sm-league-sidepanel__link:hover { text-decoration: underline; }

@media (max-width: 1040px) {
  .ssm-scope .sm-page-shell.container-grid { grid-template-columns: 1fr; }
  .ssm-scope .sm-league-sidepanel { position: static; }
}

/* --- Ghost buttons ("Full Schedule ->", "Matchup page ->") --- */
.ssm-scope .sm-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--sm-link-color);
  background: #fff; color: var(--sm-link-color);
  font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.ssm-scope .sm-btn-ghost:hover { background: #e6ecf5; color: var(--sm-link-color-hover); }
.ssm-scope .sm-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ssm-scope .sm-page-header-row .sm-page-title { margin-bottom: 0; }

/* --- Hero / breadcrumbs --- */
.ssm-scope .sm-breadcrumbs { font-size: 13px; color: var(--sm-color-text-soft); margin-bottom: 14px; }
.ssm-scope .sm-breadcrumbs a { color: var(--sm-link-color); text-decoration: none; }
.ssm-scope .sm-breadcrumbs__back { color: var(--sm-color-text-soft) !important; margin-right: 4px; }
.ssm-scope .sm-breadcrumbs a:hover { text-decoration: underline; }

/* White card, matching sharpmodels.com's real .sm-league-hero exactly --
   only the kicker chip and rating figure pick up the purple accent. */
.ssm-scope .sm-hero {
  background: #ffffff;
  border: 1px solid #d7e0eb;
  border-radius: var(--sm-radius-md);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
  padding: 22px 26px;
  margin-bottom: 26px;
}

.ssm-scope .sm-hero__kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #e0f7fa; color: #0b2545; border: 1px solid #a6e8f2; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.ssm-scope .sm-hero__title { font-family: var(--sm-font-heading); font-size: 2.5rem; margin: 0 0 8px; line-height: 1; color: #13233a; }
.ssm-scope .sm-hero__summary { color: #46566d; max-width: 640px; line-height: 1.5; margin: 0; }
.ssm-scope .sm-hero__summary a { color: var(--sm-link-color); font-weight: 700; }

/* --- Country hub competition cards --- */
.ssm-scope .sm-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 30px; }
.ssm-scope .sm-comp-card { display: block; background: #fff; border: 1px solid var(--sm-color-border); border-radius: var(--sm-radius-md); padding: 16px 18px; text-decoration: none; box-shadow: var(--sm-shadow-card); }
.ssm-scope .sm-comp-card__tier { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-color-brand-accent); font-weight: 800; }
.ssm-scope .sm-comp-card__name { font-family: var(--sm-font-heading); font-size: 1.3rem; color: #1a0a2e; margin: 4px 0 6px; }
.ssm-scope .sm-comp-card__meta { font-size: 13px; color: var(--sm-color-text-soft); }

/* --- Zone legend chips reused across standings pages --- */
.ssm-scope .sm-zone-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }


/* --- Team page --- */
.ssm-scope .sm-team-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ssm-scope .sm-team-hero__identity { display: flex; align-items: center; gap: 16px; }
.ssm-scope .sm-team-hero__jersey { flex: 0 0 auto; }
.ssm-scope .sm-team-hero__rating { text-align: right; }
.ssm-scope .sm-team-hero__rating-value { font-family: var(--sm-font-heading); font-size: 2.4rem; color: var(--sm-color-brand-accent); }
.ssm-scope .sm-team-hero__rating-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #67778f; }

.ssm-scope .sm-season-history { list-style: none; margin: 0; padding: 0; }
.ssm-scope .sm-season-history li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sm-color-line); font-size: 14px; }
.ssm-scope .sm-season-history li:last-child { border-bottom: none; }
.ssm-scope .sm-season-history__season { font-weight: 800; width: 90px; flex: 0 0 auto; color: #1a0a2e; }
.ssm-scope .sm-season-history__comp { color: var(--sm-link-color); font-weight: 700; }
.ssm-scope .sm-season-history__result { color: var(--sm-color-text-soft); }

/* --- Matchup page --- */
.ssm-scope .sm-matchup-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 24px; }
.ssm-scope .sm-matchup-team { text-align: center; }
.ssm-scope .sm-matchup-team__name { font-family: var(--sm-font-heading); font-size: 1.5rem; color: #1a0a2e; }
.ssm-scope .sm-matchup-team__rating { color: var(--sm-color-text-soft); font-size: 13px; margin-top: 4px; }
.ssm-scope .sm-matchup-team__form { color: var(--sm-color-text-soft); font-size: 12px; letter-spacing: 0.06em; margin-top: 3px; font-weight: 700; }
.ssm-scope .sm-matchup-team__nav { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.ssm-scope .sm-matchup-vs__mid { font-family: var(--sm-font-heading); font-size: 1.1rem; color: var(--sm-color-text-soft); }

.ssm-scope .sm-final-score-badge { display: inline-block; background: #eef2ff; color: #163f78; font-weight: 800; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }

.ssm-scope .sm-pill-btn { display: inline-block; border: 1px solid #d5dce6; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: #163f78; text-decoration: none; background: #fff; }
.ssm-scope .sm-pill-btn:hover { background: #eafcfe; border-color: var(--sm-color-brand-accent); }

.ssm-scope .sm-chart { width: 100%; height: auto; }
.ssm-scope .sm-chart__gridline { stroke: #e8eef6; stroke-width: 1; }
.ssm-scope .sm-chart__axis-label { font-size: 10.5px; fill: #7c8ba1; }
.ssm-scope .sm-chart__end-label { font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
.ssm-scope .sm-chart__end-value { font-size: 13px; font-weight: 800; font-family: var(--sm-font-heading); }
.ssm-scope .sm-chart__crosshair { stroke: #b8c4d4; stroke-width: 1; stroke-dasharray: 3 3; }
.ssm-scope .sm-chart__hit-area { cursor: crosshair; }
.ssm-scope .sm-chart__tooltip {
  position: absolute; z-index: 5; background: #13233a; color: #fff;
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5;
  pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.25); min-width: 140px;
}
.ssm-scope .sm-chart__tooltip-date { font-weight: 800; margin-bottom: 3px; color: #9fd7ff; }
.ssm-scope .sm-probbar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin: 6px 24px 22px; }
.ssm-scope .sm-probbar__seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12.5px; font-weight: 800; }
.ssm-scope .sm-probbar__seg--home { background: var(--sm-color-brand-accent); }
.ssm-scope .sm-probbar__seg--draw { background: #94a3b8; }
.ssm-scope .sm-probbar__seg--away { background: #0f172a; }

/* --- Rankings page --- */
.ssm-scope .sm-rank-badge { text-align: right; font-weight: 800; color: var(--sm-color-text-soft); }
.ssm-scope .sm-lite-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; background: #e0f7fa; color: #0b2545; padding: 2px 7px; border-radius: 999px; margin-left: 6px; font-weight: 800; }

/* --- Teams directory grid --- */
.ssm-scope .sm-team-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ssm-scope .sm-team-directory__link { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--sm-color-border); border-radius: 10px; padding: 12px 14px; color: #13233a; text-decoration: none; background: #fff; }
.ssm-scope .sm-team-directory__link:hover { border-color: var(--sm-color-brand-accent); }
.ssm-scope .sm-team-directory__name { font-weight: 700; }
.ssm-scope .sm-team-directory__meta { color: var(--sm-color-text-soft); font-size: 12.5px; }

/* --- Head-to-head links grid --- */
.ssm-scope .sm-h2h-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ssm-scope .sm-h2h-links__item { display: block; border: 1px solid var(--sm-color-border); border-radius: 10px; padding: 14px 16px; color: #13233a; font-weight: 700; text-decoration: none; background: #fff; }
.ssm-scope .sm-h2h-links__item:hover { border-color: var(--sm-color-brand-accent); }
.ssm-scope .sm-h2h-summary { display: flex; gap: 18px; padding: 18px 24px; border-top: 1px solid var(--sm-color-line); }
.ssm-scope .sm-h2h-stat { text-align: center; }
.ssm-scope .sm-h2h-stat__value { font-family: var(--sm-font-heading); font-size: 1.6rem; color: #1a0a2e; }
.ssm-scope .sm-h2h-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sm-color-text-soft); }

/* Renamed from .sm-h2h-record* (was a naming collision with the real
   site's own unscoped .sm-h2h-record* -- that's NFL's per-team
   vertical badge/name block, `flex-direction: column`, used inside
   its own 3-column hero grid. Same class name, different meaning: our
   scoped rule only overrode display/align/justify/gap, so the
   cascade fell through to NFL's `flex-direction: column` for the one
   property we didn't set, stacking the whole row vertically instead
   of leaving it as one horizontal row. Renaming avoids the collision
   outright instead of chasing every leaked property one at a time. */
.ssm-scope .ssm-h2h-record { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 40px; margin-bottom: 22px; }
.ssm-scope .ssm-h2h-record__team { text-align: center; font-weight: 700; color: #1a0a2e; }
.ssm-scope .ssm-h2h-record__mid { text-align: center; }
.ssm-scope .ssm-h2h-record__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-color-text-soft); font-weight: 800; }
.ssm-scope .ssm-h2h-record__value { font-family: var(--sm-font-heading); font-size: 2.6rem; color: #1a0a2e; line-height: 1.1; }
.ssm-scope .ssm-h2h-record__caption { color: var(--sm-color-text-soft); font-size: 13px; }

@media (max-width: 480px) {
  .ssm-scope .ssm-h2h-record { gap: 16px; }
  .ssm-scope .ssm-h2h-record__value { font-size: 2rem; }
}

.ssm-scope .sm-h2h-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; border-top: 1px solid var(--sm-color-line); padding-top: 18px; }
.ssm-scope .sm-h2h-chip { background: #f7faf9; border-radius: 10px; padding: 10px 12px; text-align: center; }
.ssm-scope .sm-h2h-chip__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sm-color-text-soft); font-weight: 800; margin-bottom: 3px; }
.ssm-scope .sm-h2h-chip__value { font-family: var(--sm-font-heading); font-size: 1.3rem; color: #1a0a2e; }
.ssm-scope .sm-h2h-chip__caption { font-size: 11px; color: var(--sm-color-text-soft); }

.ssm-scope .sm-h2h-correct { color: var(--sm-table-pos-text, #1b653d); font-weight: 700; }
.ssm-scope .sm-h2h-wrong { color: var(--sm-color-text-soft); }

.ssm-scope .sm-h2h-search { border-top: 1px solid var(--sm-color-line); padding-top: 16px; margin-top: 4px; }
.ssm-scope .sm-h2h-search__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-color-text-soft); font-weight: 800; margin-bottom: 8px; }
.ssm-scope .sm-h2h-search__row { display: flex; gap: 10px; }
.ssm-scope .sm-h2h-search__row input { flex: 1 1 auto; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--sm-color-border); font-size: 14px; }
.ssm-scope .sm-h2h-search__row input:focus { outline: 2px solid var(--sm-color-brand-accent); outline-offset: -1px; }

.ssm-scope .sm-h2h-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.ssm-scope .sm-h2h-sort:hover { color: var(--sm-link-color); }
.ssm-scope .sm-h2h-sort.is-active { color: var(--sm-link-color); }
.ssm-scope .sm-h2h-sort__arrows { font-size: 8px; opacity: 0.5; letter-spacing: -2px; }

.ssm-scope .sm-h2h-list-link { color: inherit; text-decoration: none; font-weight: 700; display: block; }
.ssm-scope .sm-h2h-list-link:hover { color: var(--sm-link-color); }

/* --- Match round tiles: ported directly from sharpmodels.com's real
   matchup-tile-grid.css structure (meta -> title -> 3-col hero with a
   .ssm-scope centred label+bar-row -> button). Two departures from the NFL version,
   both deliberate: the bar is 3-segment (home/draw/away, draw an unlabelled
   grey gap, only home%/away% shown, no score prediction line), and the
   two colored segments use each team's own kit color, matching how the
   real site colors bars/helmets from sidebar_builder.py's team_colors
   dict rather than one fixed brand accent. --- */
.ssm-scope .sm-matchup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ssm-scope .sm-matchup-tile { border: 1px solid var(--sm-color-border); border-radius: 12px; background: #fff; padding: 14px; }
.ssm-scope .sm-matchup-tile__meta { color: #5a6b82; font-size: 0.84rem; margin-bottom: 8px; }
.ssm-scope .sm-matchup-tile__title { margin: 0 0 10px 0; font-family: var(--sm-font-heading); font-size: 1.4rem; line-height: 1; }
.ssm-scope .sm-matchup-tile__title a { color: #13233a; text-decoration: none; }
.ssm-scope .sm-matchup-tile__title a:hover { text-decoration: underline; }

.ssm-scope .sm-matchup-tile__hero { display: grid; grid-template-columns: 52px 1fr 52px; gap: 12px; align-items: center; margin-bottom: 10px; }
.ssm-scope .sm-matchup-tile__team { text-align: center; min-width: 0; }
.ssm-scope .sm-matchup-tile__jersey { margin: 0 auto 4px auto; }
/* Long team names ("Manchester City", "Manchester Utd") were wrapping
   to a second line inside this fixed-width column and visually
   colliding with the probability number next to it -- NFL's own
   reference tiles never have this problem because they truncate long
   names with an ellipsis ("Buccaneers" -> "Bucca...") instead of
   letting them wrap. Same fix here. */
.ssm-scope .sm-matchup-tile__team-name { font-size: 0.78rem; font-weight: 700; color: #163f78; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.ssm-scope .sm-matchup-tile__center { text-align: center; }
.ssm-scope .sm-matchup-tile__label { margin-bottom: 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5a6b82; font-weight: 800; }

.ssm-scope .sm-matchup-tile__bar-row { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
.ssm-scope .sm-matchup-tile__pct { font-family: var(--sm-font-heading); font-size: 1.3rem; line-height: 1; }
.ssm-scope .sm-matchup-tile__pct--left { text-align: right; }
.ssm-scope .sm-matchup-tile__pct--right { text-align: left; }

.ssm-scope .sm-matchup-nav { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 26px; font-size: 13px; }
.ssm-scope .sm-matchup-nav__team { display: flex; flex-direction: column; gap: 4px; }
.ssm-scope .sm-matchup-nav__team a { color: var(--sm-link-color); font-weight: 700; text-decoration: none; }
.ssm-scope .sm-matchup-nav__team a:hover { text-decoration: underline; }

.ssm-scope .sm-form-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; margin-right: 4px; }
.ssm-scope .sm-form-badge--win { background: #16a34a; }
.ssm-scope .sm-form-badge--draw { background: #94a3b8; }
.ssm-scope .sm-form-badge--loss { background: #dc2626; }

/* min-width:0 on the grid items is required, not decorative -- without
   it a wide table (long opponent names) forces its grid track past
   1fr's natural content-based floor, overflowing the hero-width
   container into the sidebar column next to it. */
.ssm-scope .sm-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 30px; }
.ssm-scope .sm-form-grid > .sm-table-wrap { min-width: 0; }
@media (max-width: 780px) { .ssm-scope .sm-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Overrides .sm-table's global min-width:620px (right for wide tables
   like standings, wrong for this simple 3-column one sitting inside a
   ~half-hero-width grid column) -- table-layout:fixed + explicit %
   widths let it shrink to fit without a horizontal scrollbar. */
.ssm-scope .sm-table--form { min-width: 0; table-layout: fixed; }
.ssm-scope .sm-table--form th:nth-child(1), .ssm-scope .sm-table--form td:nth-child(1) { width: 30%; }
.ssm-scope .sm-table--form th:nth-child(2), .ssm-scope .sm-table--form td:nth-child(2) { width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssm-scope .sm-table--form th:nth-child(3), .ssm-scope .sm-table--form td:nth-child(3) { width: 28%; }

.ssm-scope .sm-form-row-link { color: inherit; text-decoration: none; display: block; }
.ssm-scope .sm-table--form td:nth-child(2) .sm-form-row-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssm-scope .sm-table--form tr:hover td { background: var(--sm-table-hover); }
.ssm-scope .sm-form-row-link:hover { color: var(--sm-link-color); }

/* Position-probability heatmap -- up to 24 numeric columns (League Two),
   so each cell needs to be much tighter than the site's normal table
   padding to keep the whole grid from forcing a huge horizontal scroll. */
.ssm-scope .sm-table--posgrid th, .ssm-scope .sm-table--posgrid td { padding: 6px 4px; }
.ssm-scope .sm-table--posgrid th:first-child, .ssm-scope .sm-table--posgrid td:first-child { padding-left: 14px; min-width: 160px; }
.ssm-scope .sm-posgrid-cell { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: #0b2545; min-width: 34px; }

.ssm-scope .sm-matchup-tile__bar { display: flex; width: 100%; height: 12px; border-radius: 999px; overflow: hidden; background: #e8eef6; }
.ssm-scope .sm-matchup-tile__bar-draw { background: #cbd5e1; }

.ssm-scope .sm-matchup-tile__score { font-family: var(--sm-font-heading); font-size: 1.6rem; text-align: center; color: var(--sm-color-brand-accent); margin: 6px 0; }
.ssm-scope .sm-matchup-tile__footer { margin-top: 12px; display: flex; justify-content: flex-end; }

@media (max-width: 780px) {
  .ssm-scope .sm-matchup-grid { grid-template-columns: 1fr; }
  .ssm-scope .sm-matchup-tile__hero { grid-template-columns: 44px 1fr 44px; gap: 8px; }
}

/* --- Simulator console --- */
.ssm-scope .sm-sim-console { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; flex-wrap: wrap; }
.ssm-scope .sm-sim-console__btn { background: var(--sm-color-brand-accent); color: #fff; border: none; border-radius: 999px; padding: 12px 22px; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.ssm-scope .sm-sim-console__btn:hover { opacity: 0.85; }
.ssm-scope .sm-sim-console__note { color: var(--sm-color-text-soft); font-size: 13px; }
.ssm-scope .sm-sim-console__btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ssm-scope .sm-sim-panel { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.ssm-scope .sm-sim-panel__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ssm-scope .sm-sim-panel__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sm-color-text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.ssm-scope .sm-sim-panel__field select, .ssm-scope .sm-sim-panel__field input { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--sm-color-border); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: #13233a; min-width: 160px; }
.ssm-scope .sm-sim-panel__meta { font-size: 13px; color: var(--sm-color-text-soft); font-weight: 700; margin-right: auto; }

.ssm-scope .sm-sim-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 30px; }
.ssm-scope .sm-sim-game { background: #fff; border: 1px solid var(--sm-color-border); border-radius: 12px; padding: 14px; box-shadow: var(--sm-table-shadow); }
.ssm-scope .sm-sim-game__meta { font-size: 11px; color: var(--sm-color-text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.ssm-scope .sm-sim-game__matchup { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.ssm-scope .sm-sim-game__team { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #163f78; text-align: center; flex: 1 1 0; min-width: 0; }
.ssm-scope .sm-sim-game__team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ssm-scope .sm-sim-game__at { font-size: 11px; color: var(--sm-color-text-soft); font-weight: 700; }
.ssm-scope .sm-sim-game__picks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.ssm-scope .sm-sim-pick { border: 2px solid transparent; border-radius: 8px; padding: 7px 4px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: var(--sm-font-heading); }
.ssm-scope .sm-sim-pick.is-picked { border-color: currentColor; }
.ssm-scope .sm-sim-game__clear { display: block; text-align: center; font-size: 11px; color: var(--sm-color-text-soft); margin-top: 8px; text-decoration: underline; }
.ssm-scope .sm-sim-game__clear:hover { color: var(--sm-link-color); }

/* --- Zone probability table cells --- */
.ssm-scope .sm-zone-pct { font-variant-numeric: tabular-nums; }
.ssm-scope .sm-zone-pct--dominant { font-weight: 800; }

/* --- Season Impact (match.html): the real site's own
   .sm-matchup__results-grid is a fixed 2-column grid, sized for
   NFL/MLB's single "Make Playoffs" metric column -- soccer's version
   has up to 4 zone columns per team (Champions League/Europa/
   Conference/Relegation), which don't fit two tables side by side at
   that width. Stacked to one column per row instead, scoped to
   soccer only so NFL/MLB's own matchup pages (1 metric, side-by-side
   is fine there) are untouched. --- */
.ssm-scope .sm-matchup__results-grid { grid-template-columns: 1fr; }

/* .smsim-btn (Simulate/Reset/Show Results/view-toggle -- all real
   <button> elements) opts into simulator-console.css's own Oswald
   display font, but base.css's own accessibility reset
   (".ssm-scope button, ...  { font: inherit }", one class + the
   "button" element = higher specificity than .smsim-btn's single
   class) silently won regardless of stylesheet order, so soccer's
   buttons were falling back to plain Open Sans while NFL/MLB's own
   simulator buttons (no such reset on those pages) kept Oswald.
   Re-declared here at matching specificity to opt these buttons back
   out of that reset -- confirmed via computed-style diff against
   /nfl/simulator's own .smsim-btn before this fix. */
.ssm-scope .smsim-btn { font-family: 'Oswald', sans-serif; font-weight: 600; }

/* Simulator (simulator-console.css, shared with /nfl/simulator and
   /mlb/simulator): its .smsim-week-grid tile min-width (240px) was
   sized for short NFL/MLB team names -- "Manchester City",
   "Nottingham Forest" etc. need more room so the two team names don't
   crowd each other. Scoped to soccer only, same reasoning as the
   results-grid override above. */
.ssm-scope .smsim-week-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* User asked for 4 tiles per row instead of 3 -- auto-fill(300px)
   only fits 3 across the page's ~1137-1232px content width. Force 4
   at desktop widths wide enough for a 4th ~270px+ tile to stay
   readable; narrower than that, fall back to the auto-fill above
   (still handles tablet/mobile fine on its own, per the comment
   above -- a 300px min just naturally collapses to fewer columns). */
@media (min-width: 1280px) {
  .ssm-scope .smsim-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Long club names ("Crystal Palace", "Nottingham Forest") wrapped to
   a second line inside the tile instead of fitting -- especially
   cramped now that tiles can be 4-wide. Same ellipsis-on-overflow
   treatment .sm-matchup-tile__team-name already uses elsewhere on
   soccer's own tiles, applied here to the simulator's team names too
   (a slightly smaller font first, so most names never need to
   truncate at all; only names that still don't fit get the "..."). */
.ssm-scope .smsim-game-tile__matchup { gap: 6px; }
.ssm-scope .smsim-game-tile__team { min-width: 0; flex: 1 1 0; font-size: 0.85rem; }
.ssm-scope .smsim-game-tile__team span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The "Number of simulations" input's default 70px (simulator-console.css)
   fits NFL/MLB's 300-ish default fine but clips soccer's 5-digit
   default (10000, up to 20000) -- widened, scoped to soccer only. */
.ssm-scope .smsim-controls input[type="number"] { width: 110px; }

/* --- Results page stat cards, adapted from nfl-results-page.css's
   .sm-results-hero/.sm-results-stat* (2026-08-28 standardization).
   Copied in as scoped rules rather than loading that file wholesale:
   it also redefines the *unscoped* .container-grid/.left/.right
   (NFL's own results page doesn't use soccer's .sm-page-shell wrapper
   at all), which would be a real risk to load globally even though
   soccer's own higher-specificity rules should still win on paper. --- */
.ssm-scope .sm-results-hero {
  background: #ffffff; border: 1px solid #d7e0eb; border-radius: 14px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05); padding: 22px 24px; margin-bottom: 24px;
}
.ssm-scope .sm-results-hero__main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.ssm-scope .sm-results-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ssm-scope .sm-results-stat {
  border: 1px solid #dce5ef; border-radius: 12px; background: #fbfdff; padding: 12px 14px;
  min-width: 0; display: grid; grid-template-rows: minmax(34px, auto) auto; align-content: start;
}
.ssm-scope .sm-results-stat__label { color: #5a6b82; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; line-height: 1.2; margin: 0 0 6px 0; }
.ssm-scope .sm-results-stat__value { color: #13233a; font-family: var(--sm-font-heading); font-size: 1.75rem; line-height: 1.05; }

@media (max-width: 780px) {
  .ssm-scope .sm-results-hero { padding: 16px; }
  .ssm-scope .sm-results-hero__main { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Recent Results (matchup page): NFL's .sm-matchup__result-row only
   ships --win/--loss variants since NFL games can't draw -- add a
   neutral --draw tint here, scoped to soccer only. --- */
.ssm-scope .sm-matchup__result-row--draw { background: #f4f6f9; border-color: #dde4ec; }