/* Live dashboard, dense scorigami watch board. Consumes the site design
   tokens from site.css (--paper, --surface, --ink, --accent, fonts, etc.).
   Sharp corners, hairline borders, mono for every number. No gradients. */

.dashwrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; width: 100%; }

.dash-empty { color: var(--muted); font-size: 14px; padding: 40px 0; }
.dash-empty .dash-refresh { margin-left: 10px; }

/* ---------- top strip ---------- */
.dash-top {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "counts headline" "counts spot";
  gap: 6px 28px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.dash-counts { grid-area: counts; display: flex; gap: 22px; }
.dash-count { display: flex; flex-direction: column; }
.dash-count b {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 40px;
  line-height: 0.95;
}
.dash-count span {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 3px;
}
.dash-headline {
  grid-area: headline;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 34px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.03;
}
.dash-spot {
  grid-area: spot;
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: var(--surface);
  padding: 10px 14px;
  max-width: 640px;
}
.dash-spot-lab {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.dash-spot-game { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-decoration: none; margin-top: 2px; }
.dash-spot-match { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: .02em; }
@media (hover: hover) { .dash-spot-game:hover .dash-spot-match { color: var(--accent); } }
.dash-spot-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dash-spot-p { font-size: 13px; color: var(--ink2); margin-top: 4px; }
.dash-spot-p b { font-family: var(--mono); color: var(--accent-deep); font-size: 15px; }
.dash-spot-p .mono { font-family: var(--mono); color: var(--ink); }

/* ---------- controls ---------- */
.dash-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  position: sticky;
  top: 54px;
  background: var(--paper);
  z-index: 12;
}
.dash-filterrow { display: flex; align-items: center; gap: 8px; }
.dash-select {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--base);
  padding: 5px 8px;
  cursor: pointer;
  max-width: 220px;
}
@media (hover: hover) { .dash-select:hover { border-color: var(--ink2); } }
.dash-filterrow label.flabel { cursor: default; }
.dash-status { margin-left: auto; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* Desktop: the filter rows sit inline as always; the collapse toggle is a
   phone-only control. display:contents keeps the wrapper out of the flex flow. */
.dash-filtbtn { display: none; }
.dash-filters { display: contents; }
.dash-cd b { color: var(--ink2); }
.dash-refresh {
  border: 1px solid var(--base);
  background: none;
  color: var(--ink2);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
}
@media (hover: hover) { .dash-refresh:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); } }
.dash-refresh:disabled { opacity: .5; cursor: default; }

/* ---------- sections ---------- */
.dash-sec { margin-top: 26px; }
.dash-sec-h {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dash-sec-n { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 400; }

/* ---------- live cards ---------- */
.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.lg-card {
  border: 1px solid var(--hair);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lg-card.is-scori { border-color: var(--cat2); border-left-width: 3px; }
/* A high scorigami chance outranks "currently a scorigami" for the card outline:
   declared after is-scori so a card that is BOTH shows the blue high-chance edge. */
.lg-card.is-hot { border-color: var(--accent); border-left-width: 3px; }
.lg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hair);
}
.lg-league { font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.lg-clock { font-family: var(--mono); font-size: 11px; color: var(--cat3); }
.lg-card.is-scori .lg-clock { color: var(--cat2); }
.lg-card.is-hot .lg-clock { color: var(--accent); }

.lg-teams { padding: 11px 14px 9px; }
.lg-team { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.lg-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
.lg-rank { font-family: var(--mono); font-size: 9.5px; color: var(--muted); border: 1px solid var(--base); padding: 0 3px; flex: none; }
.lg-abbr { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink2); min-width: 34px; }
.lg-name { font-size: 14px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-score { margin-left: auto; font-family: var(--disp); font-weight: 800; font-size: 30px; line-height: 1; }
.lg-team.win .lg-name, .lg-team.win .lg-abbr { color: var(--ink); }
.lg-team.win .lg-score { color: var(--ink); }
.lg-team:not(.win) .lg-score { color: var(--ink2); }

.lg-venue { padding: 0 12px 8px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* the scorigami math, emotional centre of the card */
.lg-odds { padding: 14px; border-top: 1px solid var(--hair); background: var(--paper); }
.lg-odds-none { color: var(--muted); font-size: 12px; }
.lg-p-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lg-p-lab { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); max-width: 60%; line-height: 1.3; }
.lg-p-val { font-family: var(--disp); font-weight: 800; font-size: 34px; line-height: 1; white-space: nowrap; }

.odds-meter { height: 8px; background: var(--surface); border: 1px solid var(--hair); margin: 9px 0 4px; }
.odds-meter i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.odds-meter.warm i { background: var(--cat3); }
.odds-meter.hot i { background: var(--cat2); }

/* "Scorigami today": the day's landings as a quiet editorial results list at
   the top of the live board, not a boxed widget. A hairline rule sets it off;
   the score carries the one bit of color (orange = landed, site-wide). */
.dash-count.is-scori b { color: var(--cat2); }
.dash-today { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--hair); }
.dash-today-h {
  margin: 0 0 4px;
  font: 700 14px/1.2 var(--disp);
  letter-spacing: .01em;
  color: var(--ink);
}
.dash-today-list { list-style: none; margin: 0; padding: 0; }
.dash-today-list li { border-top: 1px solid var(--hair); }
.dash-today-list li:first-child { border-top: 0; }
.dash-today-list a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 8px 0; text-decoration: none;
}
.dash-today-score {
  flex: none; min-width: 62px;
  font: 700 18px var(--disp); color: var(--cat2);
}
.dash-today-teams {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 14px var(--body); color: var(--ink2);
}
@media (hover: hover) { .dash-today-list a:hover .dash-today-teams { color: var(--ink); } }
.dash-today-meta { flex: none; font: 400 12px var(--body); color: var(--muted); }
@media (max-width: 520px) {
  .dash-today-list a { flex-wrap: wrap; gap: 4px 12px; }
  .dash-today-meta { flex-basis: 100%; }
}

/* Match timeline (game centre, supporter). The section is data-pro, so the
   standard pro-locked treatment greys and locks it for free visitors. */
.gc-tl { margin: 0 18px 18px; }
.gc-tl-sub { font: 400 12px var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.gc-tl-body { display: flex; flex-direction: column; gap: 10px; }
.gc-tl-note { font: 400 13px/1.5 var(--body); color: var(--muted); }
.gc-tl-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 12.5px var(--body); color: var(--ink2); }
.gc-tl-stats b { font-family: var(--mono); }
.gc-tl-up { color: color-mix(in srgb, var(--cat2) 72%, var(--ink)); }
.gc-tl-down { color: var(--accent-deep); }
.gc-tl-canvas { display: block; width: 100%; border: 1px solid var(--hair); border-radius: 4px; background: var(--surface); }
.gc-tl-scrub { width: 100%; height: 32px; accent-color: var(--accent); cursor: pointer; }
.gc-tl-canvas { cursor: pointer; }
.gc-tl-read { font-size: 12px; color: var(--ink2); }
.gc-tl-read b { color: var(--ink); }

/* The two status chips are a matched set: one shape, one type treatment, aligned
   on the same baseline. They read as siblings, distinguished only by hue —
   orange states a fact about the score now, blue flags a likely new finish. */
.lg-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin: 6px 0 2px;
}
.lg-flag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 2px;
}
.lg-flag-now {
  color: var(--cat2);
  border-color: color-mix(in srgb, var(--cat2) 60%, transparent);
  background: color-mix(in srgb, var(--cat2) 12%, transparent);
}
.lg-flag-hot {
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* A landed scorigami is the site's headline moment: the one solid chip. */
.lg-flag-landed { color: var(--paper); background: var(--cat2); border-color: var(--cat2); }

/* Just-landed scorigami card: stays on the live board for a while after the
   final, celebrated but in the same voice as the live cards. */
.lg-card.is-landed { border-color: var(--cat2); border-left-width: 3px; }
.lg-card.is-landed .lg-clock { color: var(--cat2); }
.lg-landed-note {
  margin: 2px 0 0;
  font: 400 13px/1.5 var(--body);
  color: var(--ink2);
}
.lg-card.is-landed .lg-gridlink { margin-top: 2px; }
.lg-tops-h { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 13px 0 5px; }
.lg-tops { list-style: none; }
.lg-tops li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; }
.lg-tops li + li { border-top: 1px solid var(--hair); }
.lg-tops li a { text-decoration: none; }
.lg-tops-s { font-size: 16px; font-weight: 700; }
@media (hover: hover) { .lg-tops li a:hover .lg-tops-s { color: var(--accent); } }
.lg-tops-p { font-family: var(--mono); font-size: 12px; color: var(--ink2); white-space: nowrap; }
.lg-noscori { font-size: 13px; color: var(--ink2); margin: 2px 0; }

.lg-factors { list-style: none; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.lg-factors li {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink2);
  border: 1px solid var(--hair);
  padding: 3px 7px;
  background: var(--surface);
}
.lg-gridlink {
  display: block;
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-deep);
  text-decoration: none;
  border-top: 1px solid var(--hair);
  padding-top: 11px;
}
@media (hover: hover) { .lg-gridlink:hover { color: var(--accent); } }

.mono { font-family: var(--mono); }

/* ---------- upcoming ---------- */
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.up-group { border: 1px solid var(--hair); background: var(--surface); }
.up-head { padding: 9px 12px; border-bottom: 1px solid var(--hair); }
.up-league { font-family: var(--disp); font-weight: 800; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; display: block; }
.up-teaser { font-family: var(--body); font-size: 11.5px; color: var(--ink2); display: block; margin-top: 3px; }
.up-teaser .mono { color: var(--accent-deep); }
.up-list { list-style: none; padding: 4px 12px 10px; }
.up-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dotted var(--hair); }
.up-row a { text-decoration: none; }
.up-open { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; min-height: 36px; cursor: pointer; text-align: left; font: inherit; }
.up-logo { width: 16px; height: 16px; object-fit: contain; flex: none; }
.up-match { font-size: 13px; font-weight: 600; color: var(--ink2); }
@media (hover: hover) { .up-open:hover .up-match { color: var(--accent); text-decoration: underline; } }
.gc-grid { text-decoration: none; }
.up-time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.up-more { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 6px; }

/* ---------- recent finals ---------- */
.fin-list { list-style: none; }
.fin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.fin-row a { text-decoration: none; }
.fin-score { font-family: var(--disp); font-weight: 800; font-size: 22px; }
@media (hover: hover) { .fin-row a:hover .fin-score { color: var(--accent); } }
.fin-match { font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.fin-meta { font-size: 12px; color: var(--muted); }
.fin-new .fin-score { color: var(--cat2); }
.fin-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--cat2);
  padding: 2px 6px;
}

/* ---------- fullscreen active board ---------- */
#dash:fullscreen {
  background: var(--paper);
  overflow-y: auto;
  padding: 20px 26px 40px;
}
#dash:-webkit-full-screen { background: var(--paper); overflow-y: auto; padding: 20px 26px 40px; }
#dash:fullscreen .dashwrap { max-width: 1600px; }
#dash:fullscreen .lg-grid { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 20px; }
#dash:fullscreen .lg-league { font-size: 18px; }
#dash:fullscreen .lg-score { font-size: 42px; }
#dash:fullscreen .lg-name { font-size: 16px; }
#dash:fullscreen .lg-abbr { font-size: 14px; }
#dash:fullscreen .lg-p-lab { font-size: 12px; }
#dash:fullscreen .lg-p-val { font-size: 46px; }
#dash:fullscreen .lg-tops-s { font-size: 18px; }
#dash:fullscreen .dash-headline { font-size: clamp(26px, 3vw, 40px); }

/* ---------- team records + colour accents + expand ---------- */
.lg-head-r { display: flex; align-items: center; gap: 8px; }
.lg-expand {
  border: 1px solid var(--base);
  background: none;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1;
  width: 26px; height: 24px;
  padding: 0;
  cursor: pointer;
  flex: none;
  position: relative;
}
/* enlarge the effective tap target to ~44px without growing the visible box */
.lg-expand::after { content: ""; position: absolute; inset: -10px; }
@media (hover: hover) { .lg-expand:hover { border-color: var(--accent); color: var(--accent-deep); } }
.lg-teamtext { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lg-line { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lg-rec { font-size: 10px; color: var(--muted); line-height: 1.1; }

/* ---------- game centre overlay ---------- */
body.gc-open { overflow: hidden; }
.gc-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  overflow-y: auto;
  overflow-x: hidden;
  /* A pull-down at scrollTop 0 must not become pull-to-refresh on the page
     underneath (it reloads the dashboard and destroys the overlay). */
  overscroll-behavior: contain;
}
.gc-overlay:fullscreen, .gc-overlay:-webkit-full-screen { background: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.gc {
  max-width: 1180px; margin: 0 auto;
  padding-bottom: 60px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
.gc-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  /* viewport-fit=cover: keep the Close control out of the landscape notch. */
  padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.gc-bar-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.gc-blg { font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.gc-bstate { font-family: var(--mono); font-size: 12px; color: var(--cat3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-bar-r { display: flex; gap: 8px; flex: none; }

.gc-body {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px;
  padding: 24px 20px 0;
  padding: 24px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.gc-info { min-width: 0; }

.gc-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair);
}
.gc-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 3px solid var(--tc, var(--base));
  min-width: 0;
}
.gc-logo { width: 58px; height: 58px; object-fit: contain; }
.gc-tname { font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: .02em; line-height: 1.04; }
.gc-trec { font-size: 11px; color: var(--muted); }
.gc-scoreline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; padding-top: 6px; }
.gc-score { font-family: var(--disp); font-weight: 800; font-size: 50px; line-height: 1; color: var(--ink2); }
.gc-score.win { color: var(--ink); }
.gc-dash { font-family: var(--disp); font-weight: 700; font-size: 30px; color: var(--muted); }
.gc-clk { flex-basis: 100%; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--cat3); margin-top: 8px; }

.gc-meta { list-style: none; margin-top: 16px; display: grid; gap: 7px; }
.gc-meta li { display: flex; gap: 12px; font-size: 13px; color: var(--ink2); align-items: baseline; }
.gc-mk { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); min-width: 50px; flex: none; }

.gc-block { margin-top: 22px; }
.gc-h { font-family: var(--mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 10px; }
.gc-leaders { list-style: none; display: grid; gap: 0; }
.gc-leaders li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--hair); }
.gc-lcat { font-size: 11px; color: var(--accent-deep); min-width: 32px; }
.gc-lwho { font-size: 13px; color: var(--ink); }
.gc-lteam { font-size: 10px; color: var(--muted); }
.gc-lval { font-size: 13px; color: var(--ink); text-align: right; white-space: nowrap; }

.gc-sit { font-size: 13px; color: var(--ink2); }
.gc-sit-bb { display: flex; gap: 18px; align-items: center; }
.diamond { position: relative; width: 60px; height: 60px; flex: none; }
.diamond .b { position: absolute; width: 16px; height: 16px; border: 1px solid var(--base); background: var(--surface); transform: rotate(45deg); }
.diamond .b2 { top: 4px; left: 22px; }
.diamond .b1 { top: 22px; left: 40px; }
.diamond .b3 { top: 22px; left: 4px; }
.diamond .b.on { background: var(--accent); border-color: var(--accent); }
.gc-count { color: var(--ink); }
.gc-runners { color: var(--ink2); margin-top: 2px; }
.gc-lastplay { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.gc-dd { font-family: var(--mono); font-size: 14px; color: var(--ink); margin-bottom: 4px; }

.gc-odds-col { min-width: 0; border-left: 1px solid var(--hair); padding-left: 26px; }
.gc-odds-col .lg-odds { border-top: 0; padding: 0; background: none; }
.gc-odds-col .lg-p-val { font-size: 42px; }
.gc-odds-col .lg-p-lab { max-width: 62%; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .gc-body { grid-template-columns: 1fr; gap: 20px; }
  .gc-odds-col { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; padding-top: 20px; }
}
@media (max-width: 700px) {
  .dash-top { grid-template-columns: 1fr; grid-template-areas: "counts" "headline" "spot"; gap: 12px; }
  .dash-counts { gap: 28px; }
  .dash-count b { font-size: 34px; }
  /* Tighter filter strip: the stacked five-row version cost 289px of a 390px
     screen before the first game appeared. */
  .dash-controls { position: static; gap: 8px 12px; padding: 10px 0; }
  /* Phones: every filter hides behind one 44px toggle (the button shows the
     active picks); open, the rows stack full width so nothing crams or clips. */
  .dash-filtbtn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: 44px; padding: 10px 12px;
    font: 700 13px var(--body); color: var(--ink);
    background: none; border: 1px solid var(--hair); cursor: pointer;
  }
  .dash-filton { font: 500 12px var(--body); color: var(--accent); }
  .dash-filters { display: none; }
  .dash-controls.filters-open .dash-filters {
    display: block; padding: 12px; border: 1px solid var(--hair); border-top: 0;
    /* Flex item: without these it sizes to the chip rows' max-content and the
       selects inherit a wider-than-viewport box. */
    flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  .dash-controls.filters-open .dash-filterrow { display: block; margin: 0 0 12px; }
  .dash-controls.filters-open .dash-filterrow:last-child { margin-bottom: 0; }
  .dash-controls.filters-open .flabel { display: block; margin: 0 0 6px; }
  .dash-controls.filters-open .dash-select { width: 100%; }
  /* Status line: hide the desktop fullscreen button (the game centre has its
     own) so as-of, countdown, and Refresh fit one clean row. */
  #dash-fs { display: none; }
  .dash-status { margin-left: 0; flex-basis: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
  .dash-status .dash-asof { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* League + Sort share one row as two half-width columns (browsers without
     :has() keep the stacked full-width rows). */
  /* (the old 50/50 select row cramming is gone; the panel stacks rows) */
  .lg-grid, .up-grid, .dash-skelgrid { grid-template-columns: 1fr; }
  /* League + Sort selects: real 44px controls that fill the row. */
  .dash-select { min-height: 44px; padding: 8px 12px; flex: 1; max-width: none; }
  /* Phones see live content first: the supporter teaser is a body-level
     sibling ABOVE #dash in the DOM, and body is already a column flex, so
     order drops it below the board (footer stays last). */
  body > .sup-teaser { order: 5; margin: 0 auto 18px; }
  body > footer { order: 6; }
  /* min-width:0 / max-width:100% defeat the flex min-width:auto default, so
     the chips row shrinks to the viewport and actually scrolls (without them
     the 7-chip Sport row sat at content width, clipped and unswipeable). */
  .dash-filterrow { align-items: flex-start; min-width: 0; max-width: 100%; }
  /* Sport / view chips: one swipeable row each instead of wrapping to three
     rows and pushing the games far down the page. */
  .dash-filterrow .chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
    min-width: 0; max-width: 100%;
  }
  .dash-filterrow .chips::-webkit-scrollbar { display: none; }
  .dash-filterrow .chips .chip { flex: none; }
  /* Upcoming rows: matchup owns line 1, chance + time drop to line 2.
     (High specificity so it beats the later base .up-meta margin-left:auto.) */
  .up-row { flex-wrap: wrap; }
  .up-row .up-open { flex-basis: 100%; min-height: 44px; }
  .up-row .up-meta { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
  /* Game-centre top bar: keep the game status visible, make Close the big,
     obvious control; the grid link already lives lower in the panel. */
  .gc-bar { flex-wrap: wrap; }
  .gc-bar-l { flex-basis: 100%; }
  .gc-bstate { overflow: visible; }
  .gc-bar-r { width: 100%; justify-content: flex-end; }
  .gc-grid { display: none; }
  .gc-bar-r .dash-refresh { min-height: 40px; }
  .gc-close { order: 2; font-weight: 700; }
}
@media (max-width: 380px) {
  .dashwrap { padding: 18px 14px 60px; }
  .lg-name { display: none; }
  .gc-match { gap: 8px; }
  .gc-logo { width: 44px; height: 44px; }
  .gc-tname { font-size: 16px; }
  .gc-score { font-size: 38px; }
  .gc-bar {
    padding: 10px 14px;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }
  .gc-body {
    padding: 18px 14px 0;
    padding: 18px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }
}

/* ---------- loading skeleton ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Mirror the real board: a stat strip, the spotlight bar, a control row, then
   game cards with two team lines and a chance chip. */
.dash-skelstrip { display: flex; gap: 10px; margin: 6px 0 14px; }
.dash-skelstrip .dsk-stat { height: 52px; flex: 1; border-radius: 8px; }
.dash-skelspot { height: 70px; border-radius: 10px; margin-bottom: 16px; }
.dash-skelctl { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dash-skelctl .dsk-chip { height: 30px; width: 74px; border-radius: 999px; }
.dash-skelctl .dsk-sel { height: 30px; width: 130px; border-radius: 6px; margin-left: auto; }
.dash-skelgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
/* Match .lg-card exactly: sharp corners, hairline-divided header/teams/odds. */
.dash-skelcard {
  border: 1px solid var(--hair); background: var(--surface);
  display: flex; flex-direction: column; min-width: 0;
}
.dash-skelcard .pf-skel { border-radius: 2px; }
/* header */
.dsk-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
.dsk-head .dsk-league { height: 15px; width: 82px; }
.dsk-head-r { display: inline-flex; align-items: center; gap: 8px; }
.dsk-head .dsk-clock { height: 11px; width: 52px; }
.dsk-head .dsk-exp { height: 18px; width: 18px; }
/* team rows */
.dsk-teams { padding: 11px 14px 9px; }
.dsk-team-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.dsk-team-row .dsk-logo { width: 22px; height: 22px; flex: none; }
.dsk-teamtext { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dsk-team-row .dsk-name { height: 13px; width: 132px; }
.dsk-team-row .dsk-name2 { width: 98px; }
.dsk-team-row .dsk-rec { height: 9px; width: 50px; }
.dsk-team-row .dsk-score { height: 26px; width: 34px; margin-left: auto; flex: none; }
/* analytics block */
.dsk-odds { padding: 14px; border-top: 1px solid var(--hair); background: var(--paper); }
.dsk-p-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dsk-p-row .dsk-p-lab { height: 12px; width: 150px; max-width: 60%; }
.dsk-p-row .dsk-p-val { height: 30px; width: 62px; flex: none; }
.dsk-odds .dsk-meter { display: block; height: 8px; width: 100%; margin: 11px 0 10px; }
.dsk-odds .dsk-tops-h { display: block; height: 10px; width: 118px; margin: 6px 0 9px; }
.dsk-tops { display: flex; flex-direction: column; gap: 8px; }
.dsk-top { display: flex; justify-content: space-between; gap: 10px; }
.dsk-top .dsk-top-s { height: 13px; width: 54px; }
.dsk-top .dsk-top-p { height: 13px; width: 58px; }
.dsk-factors { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 11px; }
.dsk-factors .dsk-fac { height: 15px; width: 92px; }
.dsk-odds .dsk-gridlink { display: block; height: 12px; width: 72%; }

/* pre-game scorigami chance, per upcoming game, quiet and to the right */
.up-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; flex: none; }
.up-chance { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.up-chance-p { color: var(--accent-deep); font: 800 12.5px/1 var(--mono); }
.up-chance-lab {
  color: var(--muted); font: 600 9px/1 var(--body);
  text-transform: uppercase; letter-spacing: .07em;
}