/* ===========================================================================
   MONEYBALL ODDS - WhoScored-style analysis board
   Palette: the brand's own purple and gold. The two categorical slots are
   gold (home) and violet (away); the highlighter that marks the model's pick
   is gold, because gold is what the mark is made of. Status colours stay
   green/red: they mean good and bad, not Moneyball, and a brand must not
   repaint a warning. Dark is the default, since the logo is a dark purple
   piece and the page is meant to look like it.
   =========================================================================== */
:root {
  color-scheme: dark;
  /* surfaces */
  --bg:            #150c26;
  --surface-1:     #1f1435;
  --surface-2:     #281a42;
  --surface-3:     #33224f;
  --chrome:        #2e1758;
  --chrome-2:      #170b2e;
  --chrome-text:   #f4eeff;
  --chrome-muted:  #b7a3d8;
  --border:        #3b2a58;
  --border-strong: #56407a;
  /* ink */
  --text-primary:   #f6f1ff;
  --text-secondary: #c9bbe4;
  --text-muted:     #9d8cc0;
  /* categorical: home = gold, away = violet */
  --series-home:  #e3b455;
  --series-away:  #a78bfa;
  --series-home-soft: #4a3a12;
  --series-away-soft: #322554;
  /* sequential violet ramp (heatmap) */
  --seq-100: #291a4d; --seq-200: #3b2570; --seq-300: #503394;
  --seq-400: #6a49b8; --seq-500: #8a6bd4; --seq-600: #ad92e6; --seq-700: #d5c4f7;
  /* status (reserved - never a series colour) */
  --good:     #3fc76a;
  --warning:  #e3b455;
  --serious:  #cf9440;
  --critical: #f2607a;
  /* the highlighter for top picks: gold, the brand's own */
  --hl-wash:   #46340f;
  --hl-edge:   #e0ab3c;
  --hl-ink:    #ffe0a0;
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The light variant is the same brand in daylight, not a different one:
   the bar stays deep purple, the highlighter stays gold, and the gold is
   darkened until it can be read on white. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:            #f4f0fa;
  --surface-1:     #ffffff;
  --surface-2:     #faf7ff;
  --surface-3:     #f0e9fa;
  --chrome:        #2e1758;
  --chrome-2:      #170b2e;
  --chrome-text:   #f4eeff;
  --chrome-muted:  #b7a3d8;
  --border:        #e0d6ef;
  --border-strong: #c3b2dd;
  --text-primary:   #1c1130;
  --text-secondary: #55466e;
  --text-muted:     #7e6f97;
  --series-home:  #916a10;
  --series-away:  #6d28d9;
  --series-home-soft: #fbf0d4;
  --series-away-soft: #ece3fd;
  --seq-100: #ece3fd; --seq-200: #d5c4f7; --seq-300: #ad92e6;
  --seq-400: #8a6bd4; --seq-500: #6a49b8; --seq-600: #503394; --seq-700: #3b2570;
  --good:     #0f9d3a;
  --warning:  #b8860b;
  --serious:  #a9701e;
  --critical: #d03b52;
  --hl-wash:   #fcf1d6;
  --hl-edge:   #b8860b;
  --hl-ink:    #5f430a;
}

/* Someone whose machine asks for light gets it, unless they have chosen
   dark here themselves. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:#f4f0fa; --surface-1:#ffffff; --surface-2:#faf7ff; --surface-3:#f0e9fa;
    --chrome:#2e1758; --chrome-2:#170b2e; --chrome-text:#f4eeff; --chrome-muted:#b7a3d8;
    --border:#e0d6ef; --border-strong:#c3b2dd;
    --text-primary:#1c1130; --text-secondary:#55466e; --text-muted:#7e6f97;
    --series-home:#916a10; --series-away:#6d28d9;
    --series-home-soft:#fbf0d4; --series-away-soft:#ece3fd;
    --seq-100:#ece3fd; --seq-200:#d5c4f7; --seq-300:#ad92e6;
    --seq-400:#8a6bd4; --seq-500:#6a49b8; --seq-600:#503394; --seq-700:#3b2570;
    --good:#0f9d3a; --warning:#b8860b; --serious:#a9701e; --critical:#d03b52;
    --hl-wash:#fcf1d6; --hl-edge:#b8860b; --hl-ink:#5f430a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text-primary);
  font: 400 14px/1.5 var(--sans); overflow-x: hidden;
}
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--series-home); }
button { font: inherit; }

/* ------------------------------------------------------------- chrome --- */
.topbar {
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  color: var(--chrome-text); position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.topbar-inner {
  max-width: 1360px; margin: 0 auto; padding: 5px 16px;
  display: flex; align-items: center; gap: 14px; min-height: 58px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px;
  letter-spacing: .02em; text-transform: uppercase; color: inherit; text-decoration: none; }
/* The drawn mark alone up here, not the full piece: at this size the
   lettering in the artwork would be a smudge, and a header has to be
   readable. So the mark carries the picture and the wordmark beside it stays
   as type.
   The purple behind the drawing has been keyed out, so what sits on the bar
   is the gold and nothing else - no tile, no rounded box, no edge. The bar
   is deep purple in both themes, which is the one background this gold was
   drawn for, so it never has to hold up against white. */
.brand-logo {
  height: 46px; width: auto; display: block;
  flex: 0 0 auto;
}
.brand-text { display: block; }
.brand small { display:block; font-size:10px; font-weight:600; letter-spacing:.08em;
  color: var(--chrome-muted); text-transform: uppercase; }
.topbar-spacer { flex: 1; }
.chip-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip {
  background: rgba(255,255,255,.08); color: var(--chrome-text);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: rgba(255,255,255,.16); }
.chip[aria-pressed="true"] { background: var(--series-home); border-color: var(--series-home); color:#fff; }
.chip-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--chrome-muted); font-weight: 700; margin-right: 2px; }

/* The schedule chips wrapped onto three or four lines on a phone, turning
   the header into a thick block before a single match was visible. They now
   sit in one row that scrolls sideways - the strip moves, the page does
   not - with the label pinned so it stays readable while scrolling. */
.chip-row-scroll { flex-wrap: nowrap; min-width: 0; }
.chip-row-scroll .chip-label { flex: 0 0 auto; }
.chip-strip {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  min-width: 0;
  padding-bottom: 2px;
}
.chip-strip::-webkit-scrollbar { display: none; }
.chip-strip > .chip { flex: 0 0 auto; scroll-snap-align: start; }

/* ------------------------------------------------------------- layout --- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 16px; }
.panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
.panel-head {
  background: var(--chrome); color: var(--chrome-text);
  padding: 9px 13px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.panel-head .sub { font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--chrome-muted); font-size: 11px; }
.panel-body { padding: 13px; }
.grid-2 { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
/* Grid and flex children default to min-width:auto, so a scroll container
   inside one grows to its content width instead of scrolling. Every such
   child needs min-width:0 or wide tables push the whole page sideways. */
.grid-2 > *, .tray > * { min-width: 0; }
.panel, .panel-body { min-width: 0; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
/* the two-up chart row collapses on narrow screens */
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.grid-split > * { min-width: 0; }
@media (max-width: 720px) { .grid-split { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- notice -- */
.notice {
  border-left: 4px solid var(--warning); background: var(--surface-2);
  padding: 12px 14px; border-radius: var(--radius); margin-bottom: 14px;
  border-top: 1px solid var(--border); border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.notice.bad { border-left-color: var(--critical); }
.notice.ok  { border-left-color: var(--good); }
.notice h3 { font-size: 13px; margin-bottom: 5px; display:flex; align-items:center; gap:7px; }
.notice p { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
.notice .fig { font-family: var(--mono); font-weight: 700; color: var(--text-primary); }

/* ------------------------------------------------------- fixture list -- */
.fx-list { max-height: 640px; overflow-y: auto; }
.fx-group { background: var(--surface-3); padding: 6px 12px; font-size: 10px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary); position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border); }
.fx-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 9px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
  background: none; border-left: 3px solid transparent; width: 100%; text-align: left;
  color: inherit; font: inherit;
}
.fx-row:hover { background: var(--surface-2); }
.fx-row[aria-current="true"] { background: var(--hl-wash); border-left-color: var(--hl-edge); }
.fx-time { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.fx-teams { font-size: 13px; font-weight: 600; line-height: 1.35; }
.fx-teams em { font-style: normal; color: var(--text-muted); font-weight: 400; }
.fx-badge { font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; background: var(--surface-3);
  color: var(--text-secondary); white-space: nowrap; }
.fx-badge.prime { background: var(--hl-wash); color: var(--hl-ink); }

/* --------------------------------------------------------- match centre - */
.mc-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center; padding: 16px 13px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); }
.mc-team { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.mc-team.away { justify-content: flex-end; text-align: right; }
.mc-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mc-lam { text-align: center; }
.mc-lam .big { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.mc-lam .cap { font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 700; }

/* probability strip */
.prob-strip { display: flex; height: 26px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--border); margin: 0 0 4px; }
.prob-seg { display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; font-family: var(--mono); min-width: 0; }
.prob-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px;
  color: var(--text-secondary); }
.prob-legend span { display: inline-flex; align-items: center; gap: 5px; }
.prob-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------- stat compare --- */
.statbar { display: grid; grid-template-columns: 1fr 108px 1fr; gap: 8px;
  align-items: center; padding: 5px 0; }
.statbar + .statbar { border-top: 1px solid var(--surface-3); }
.statbar-name { text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.statbar-track { display: flex; align-items: center; gap: 7px; }
.statbar-track.left { flex-direction: row-reverse; }
.statbar-fill { height: 11px; border-radius: 0 4px 4px 0; min-width: 2px; }
.statbar-track.left .statbar-fill { border-radius: 4px 0 0 4px; }
.statbar-val { font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 38px; }
.statbar-track.left .statbar-val { text-align: right; }
.stat-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* ------------------------------------------------------------ tables --- */
table.mb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mb th {
  background: var(--chrome); color: var(--chrome-text); text-align: left;
  padding: 7px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
table.mb td { padding: 6px 9px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.mb tbody tr:nth-child(even) { background: var(--surface-2); }
table.mb tbody tr:hover { background: var(--surface-3); }
table.mb td.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; overflow-y: auto; max-height: 560px; max-width: 100%; }
.table-scroll table.mb { min-width: 560px; }

/* value tiers - the highlighter */
tr.tier-prime, tr.tier-prime:nth-child(even) {
  background: var(--hl-wash); box-shadow: inset 3px 0 0 var(--hl-edge);
}
tr.tier-prime td { color: var(--hl-ink); font-weight: 600; }
tr.tier-value, tr.tier-value:nth-child(even) { box-shadow: inset 3px 0 0 var(--warning); }
tr.tier-avoid td.ev { color: var(--critical); }
tr.tier-suspect, tr.tier-suspect:nth-child(even) { box-shadow: inset 3px 0 0 var(--serious); }
tr.is-top, tr.is-top:nth-child(even) { background: var(--hl-wash); }
tr.is-top td:first-child::before {
  content: ""; position: absolute; inset: 2px auto 2px 2px; width: 0;
}
.ring {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid var(--hl-edge); border-radius: 999px; color: var(--hl-ink);
  font-size: 10px; font-weight: 800; font-family: var(--mono); flex: none;
}
.tier-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block;
  margin-right: 6px; vertical-align: middle; }
.tier-dot.prime { background: var(--hl-edge); }
.tier-dot.value { background: var(--warning); }
.tier-dot.neutral { background: var(--text-muted); }
.tier-dot.avoid { background: var(--critical); }
.tier-dot.suspect { background: var(--serious); }
.badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.badge.q { background: var(--surface-3); color: var(--serious); border:1px solid var(--serious); }
.badge.h { background: var(--surface-3); color: var(--good); border:1px solid var(--good); }
.badge.w { background: var(--surface-3); color: var(--text-secondary); border:1px solid var(--border-strong); }

/* confidence meter */
.meter { display: flex; align-items: center; gap: 6px; }
.meter-track { width: 46px; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--seq-400); }
.meter-num { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); min-width: 20px; }

/* --------------------------------------------------------------- forms - */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px,1fr)); gap: 9px; }
.field label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }
.field input, .field select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong);
  border-radius: 4px; background: var(--surface-1); color: var(--text-primary);
  font-family: var(--mono); font-size: 13px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--series-home); outline-offset: -1px; }
.btn {
  background: var(--series-home); color: #fff; border: none; border-radius: 4px;
  padding: 8px 15px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.slider-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slider-row input[type=range] { flex: 1; min-width: 150px; accent-color: var(--series-home); }

/* --------------------------------------------------------------- charts - */
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.tip {
  position: fixed; pointer-events: none; z-index: 60; opacity: 0;
  background: var(--chrome-2); color: var(--chrome-text); border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 7px 9px; font-size: 12px; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); max-width: 240px; transition: opacity .1s;
}
.tip .t-title { font-weight: 700; margin-bottom: 3px; }
.tip .t-row { font-family: var(--mono); font-size: 11px; color: var(--chrome-muted); }
.heat-cell { stroke: var(--surface-1); stroke-width: 2; cursor: pointer; }
.ax { font-size: 10px; fill: var(--text-muted); font-family: var(--mono); }
.grid-line { stroke: var(--border); stroke-width: 1; }

/* ---------------------------------------------------------- parlay tray - */
.tray { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .tray { grid-template-columns: 1fr; } }
.leg { display: grid; grid-template-columns: 26px minmax(0,1fr) auto auto; gap: 9px;
  align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--border); font-size: 13px; }
.leg-main { min-width: 0; }
.leg-main strong, .leg-main span { overflow-wrap: anywhere; }
.leg:nth-child(even) { background: var(--surface-2); }
.leg-num { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.leg-main strong { display: block; font-size: 13px; }
.leg-main span { font-size: 11px; color: var(--text-muted); }
.kpi { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 8px; }
.kpi .cap { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 700; }
.kpi .val { font-family: var(--mono); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.kpi .val.good { color: var(--good); } .kpi .val.bad { color: var(--critical); }
.kpi .note { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

details.method { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); padding: 0; margin-bottom: 10px; }
details.method > summary { padding: 10px 13px; cursor: pointer; font-weight: 700; font-size: 13px; }
details.method > div { padding: 0 13px 13px; font-size: 13px; color: var(--text-secondary); }
details.method code { font-family: var(--mono); font-size: 12px; background: var(--surface-3);
  padding: 1px 4px; border-radius: 3px; color: var(--text-primary); }
.method-list { margin: 6px 0 0; padding-left: 20px; }
.method-list li { margin-bottom: 5px; }
/* The logo again at the bottom of the page, which is where a reader looks
   to see whose work this is. Full width of the column and unclipped, so it
   reads as the piece he drew rather than as a cropped icon. */
.site-foot { margin-top: 34px; background: var(--chrome-2); color: var(--chrome-text); font-family: var(--sans); }
.mf-top, .mf-bottom { max-width: 1240px; margin: 0 auto; padding: 34px 16px;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
.mf-bottom-wrap { border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .22); }
.mf-bottom { padding: 22px 16px 30px; }
.foot-logo {
  display: block; width: min(220px, 70%); height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 26px rgba(0,0,0,.35);
}
.mf-tag { margin: 16px 0 0; font-size: 22px; font-weight: 800; line-height: 1.3; max-width: 360px; }
.mf-links { display: flex; flex-direction: column; gap: 12px; }
.mf-links a { color: var(--chrome-text); font-size: 18px; font-weight: 700; text-decoration: none; }
.mf-links a:hover { color: #e3b455; }
.mf-members h4 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.mf-members p { margin: 0 0 16px; color: var(--chrome-muted); font-size: 14px; line-height: 1.5; }
.mf-auth { display: flex; gap: 10px; flex-wrap: wrap; }
.mf-btn { display: inline-block; padding: 10px 22px; border-radius: 999px; border: 1px solid #e3b455; background: transparent;
  color: #e3b455; font: 800 14px var(--sans); text-decoration: none; cursor: pointer; }
.mf-btn-gold { background: #e3b455; color: #1c1130; }
.mf-btn:hover { filter: brightness(1.1); }
.mf-copy { margin: 0; font-weight: 700; font-size: 14px; }
.mf-legal { grid-column: span 2; }
.site-foot .foot-links { margin: 0 0 8px; font-size: 14px; }
.site-foot .foot-links a { color: var(--chrome-text); margin: 0 4px 0 0; text-decoration: none; }
.site-foot .foot-links a:hover { color: #e3b455; text-decoration: underline; }
.foot { color: var(--chrome-muted); font-size: 12px; margin: 0 0 6px; line-height: 1.6; max-width: 560px; }
@media (max-width: 760px) {
  .mf-top, .mf-bottom { grid-template-columns: 1fr; gap: 22px; }
  .mf-legal { grid-column: auto; }
  .mf-tag { font-size: 19px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* ------------------------------------------------- narrow-screen guard -- */
@media (max-width: 560px) {
  .wrap { padding: 12px 16px; }
  .topbar-inner { padding: 7px 12px; gap: 7px; min-height: 0; }
  /* On a phone the header is pure overhead: every pixel it takes is a pixel
     of fixtures the reader does not see. Keep the name, drop the strapline,
     and let the format controls sit beside it instead of below. */
  .brand { font-size: 13px; }
  .brand small { display: none; }
  .chip { padding: 4px 10px; font-size: 12px; }
}

/* On the narrowest phones the word FORMAT alone is what pushes the odds
   selector onto a line of its own. The select says what it is. */
@media (max-width: 420px) {
  .chip-row:not(.chip-row-scroll) .chip-label { display: none; }
  /* On a phone the schedule strip takes the full width of its own line, so
     it can scroll instead of pushing the format controls off the row. */
  .topbar-spacer { display: none; }
  .chip-row-scroll { flex: 1 1 100%; order: 3; }
  .chip-strip { padding-bottom: 4px; }
  .mc-head { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .mc-team, .mc-team.away { justify-content: center; }
  .statbar { grid-template-columns: 1fr 84px 1fr; }
  .statbar-name { font-size: 10px; }
  .kpi .val { font-size: 18px; }
}


/* neutral rows must not inherit a stale tier colour */
tr.tier-neutral { box-shadow: none; }

/* ===================================================== wide board =====
   A full-width fixture board: one row per match, club crest beside each
   name, every price right-aligned so columns of digits line up and can be
   compared down the page rather than read one at a time.
   ==================================================================== */
.board-scroll { overflow-x: auto; }
.board { min-width: 880px; }
.board-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.board-head, .board-row {
  display: grid;
  grid-template-columns: 58px minmax(210px, 1.4fr) 132px 132px 150px minmax(150px, 1fr);
  gap: 0;
  align-items: center;
}
.board-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-3);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}
.board-head > span, .board-row > * { padding: 7px 10px; min-width: 0; }
.board-head .num, .board-row .num { text-align: right; }

.board-group {
  background: var(--surface-3);
  padding: 6px 12px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  border-top: 1px solid var(--border-strong);
}
.board-row {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit;
}
.board-row:hover { background: var(--surface-2); }
/* The row being looked at is violet, NOT gold. Gold is the highlighter and
   means one thing only: the model rates this leg. The selected row used to
   borrow the same gold, so on a board with no recommendations at all one
   row still lit up exactly like a pick - and was followed as one. */
.board-row[aria-current="true"] { background: var(--series-away-soft); border-left-color: var(--series-away); }

.board-time { font-family: var(--mono); font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.board-teams { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.board-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.board-team span {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A crest is a generated monogram unless a licensed image is supplied per
   team, so the board looks finished without shipping anyone's trademark. */
.crest {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: -.02em;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  object-fit: contain; background-size: cover;
}

.board-cell { font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.board-cell .line { color: var(--text-muted); font-size: 10px; }
.board-cell b { font-weight: 600; }
.board-pick { font-size: 12px; line-height: 1.4; }
.board-pick .lbl { font-weight: 600; }
.board-pick .meta { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.board-pick.hl {
  background: var(--hl-wash);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--hl-edge);
}
.board-pick.hl .lbl { color: var(--hl-ink); }

@media (max-width: 720px) {
  .board { min-width: 760px; }
}

/* On a phone the board stops being a spreadsheet.
   Six columns at 880px means a reader either pinches out or swipes right
   to reach the one column worth reading - the model's pick - which is
   exactly the column that never got seen. So below 640px the handicap,
   over/under and 1X2 prices are dropped and each fixture becomes two
   lines: who is playing, and what the model would take. The prices are
   all still there, one tap away, in the match centre the row opens. */
@media (max-width: 640px) {
  .board-scroll { overflow-x: visible; }
  .board { min-width: 0; }
  .board-head { display: none; }

  .board-row {
    grid-template-columns: 1fr;
    row-gap: 2px;
    padding: 9px 2px;
    align-items: start;
  }
  .board-row > * { padding: 0 10px; }
  /* Handicap, over/under and 1X2: the columns that forced the scroll. */
  .board-row .board-cell { display: none; }

  .board-time { font-size: 10px; }
  .board-team span { font-size: 14px; }

  .board-pick {
    margin-top: 3px;
    border-left: 3px solid var(--border-strong);
    padding-top: 4px; padding-bottom: 4px;
  }
  /* The recommendation, which is the reason to look at the row at all. */
  .board-pick.hl {
    border-left-color: var(--hl-edge);
    background: var(--hl-wash);
    border-radius: 0 5px 5px 0;
  }
  .board-pick .lbl { font-size: 13px; }
  .board-pick .meta { font-size: 11px; }
}

/* Fetched crest vs generated monogram: same box either way, so a failed
   image never shifts the row it sits in. */
.crest-img { background: rgba(255,255,255,.06); }
.crest-mono { line-height: 1; }

/* ============================================ top team statistics =====
   Several small leaderboards side by side, as on a stats site. Each row
   carries where its number came from, because most of this file is still
   placeholder and a ranking that hides that would be a lie.
   ==================================================================== */
.tt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}
.tt-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px 8px;
  min-width: 0;
}
.tt-card h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 0 0 7px;
}
.tt-row {
  display: grid;
  grid-template-columns: 16px 20px 1fr auto;
  align-items: center; gap: 7px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.tt-row:first-of-type { border-top: 0; }
.tt-rank { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.tt-name {
  font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tt-val { font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: right; }
.tt-seed .tt-name, .tt-seed .tt-val { color: var(--text-muted); font-weight: 500; }
.tt-seed .tt-name::after {
  content: 'contoh';
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  border: 1px solid var(--border-strong); border-radius: 3px;
  padding: 0 4px; margin-left: 6px; vertical-align: 1px;
}

/* ================================================= football news =====
   Rows of four with the picture on top, broken every third row by a row of
   two wide cards with the picture beside the text. A grid where every card
   is identical reads as a list; changing the rhythm is what makes the panel
   look edited rather than generated.

   Every card carries a picture frame whether or not a photograph arrived.
   Without one it shows the club crest on a tinted tile - a deliberate
   placeholder, not a hole in the row.
   ==================================================================== */
.news-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.news-row.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-row:last-child { margin-bottom: 0; }

.news-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.news-card:hover { border-color: var(--border-strong); background: var(--surface-3); }

/* Wide cards put the picture beside the text and get room for a summary. */
.news-card.wide {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: stretch;
}
.news-card.wide .news-shot { height: 100%; min-height: 150px; }
.news-card.wide .news-body { align-self: center; }

.news-body { display: block; padding: 12px 14px; min-width: 0; }
.news-card h4 { margin: 6px 0; font-size: 14px; line-height: 1.35; font-weight: 600; }
.news-card h3 { margin: 6px 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.news-summary {
  margin: 0 0 8px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary);
}

.news-shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
}
.news-card.tall .news-shot { aspect-ratio: 16 / 9; }
.news-shot .news-photo {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.news-shot-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .5;
}
.news-shot-fallback .crest,
.news-shot-fallback .mono {
  width: 46px; height: 46px; flex: 0 0 46px; font-size: 18px;
}
.news-card.wide .news-shot-fallback .crest,
.news-card.wide .news-shot-fallback .mono {
  width: 58px; height: 58px; flex: 0 0 58px; font-size: 22px;
}
.news-shot.has-img .news-shot-fallback { display: none; }

.news-teams { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.news-teams .crest { width: 18px; height: 18px; flex: 0 0 18px; font-size: 8px; }
.news-club {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-meta {
  font-size: 11px; color: var(--text-muted);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.news-meta .dot { opacity: .5; }

@media (max-width: 900px) {
  .news-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-row.wide { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .news-row, .news-row.wide { grid-template-columns: 1fr; }
  /* One column is too narrow to read a picture beside text. */
  .news-card.wide { grid-template-columns: 1fr; }
  .news-card.wide .news-shot { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}

/* ------------------------------------------------------ date navigator --- */
/* One date with an arrow either side, a calendar under it - in place of a
   row of every schedule ever entered. */
.date-nav { position: relative; display: flex; align-items: center; gap: 4px; }
.date-nav .dn-arrow { padding: 4px 10px; font-size: 16px; line-height: 1; }
.date-nav .dn-arrow:disabled { opacity: .35; cursor: default; }
.dn-label { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 14px; min-width: 176px;
  justify-content: center; }
.dn-date { font-size: 13px; font-weight: 800; }
.dn-state { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--chrome-muted); }
.dn-state.dn-today, .dn-state.dn-upcoming { color: var(--series-home); }
.dn-caret { font-size: 10px; color: var(--chrome-muted); }
.dn-cal {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 300px; max-width: calc(100vw - 32px); z-index: 60;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 12px;
}
.dn-cal[hidden] { display: none; }
.dn-cal-head { display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.dn-m { background: var(--surface-3); color: var(--text-primary); border: 0; border-radius: 999px;
  width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; }
.dn-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dn-wd { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; }
.dn-day { background: none; border: 0; border-radius: 999px; height: 34px; font-size: 13px;
  color: var(--text-muted); opacity: .55; position: relative; }
.dn-day.has-matches { color: var(--text-primary); opacity: 1; font-weight: 800; cursor: pointer; }
.dn-day.has-matches::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--series-home); }
.dn-day.has-matches.is-past { color: var(--text-secondary); }
.dn-day.has-matches.is-past::after { background: var(--text-muted); }
.dn-day.has-matches:hover { background: var(--surface-3); }
.dn-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dn-day.is-selected { background: var(--series-away-soft); box-shadow: inset 0 0 0 2px var(--series-away); }
.dn-list-head { margin: 10px 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); }
.dn-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
.dn-list .dn-slate { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-radius: 6px; background: var(--surface-2); color: var(--text-primary); border-color: var(--border); }
.dn-list .dn-slate small { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.dn-list .dn-slate.dn-finished { color: var(--text-secondary); }
.dn-list .dn-slate[aria-pressed="true"] { background: var(--series-away-soft); border-color: var(--series-away);
  color: var(--text-primary); }
.nav-link { text-decoration: none; }
@media (max-width: 560px) {
  .dn-label { min-width: 0; }
  .dn-cal { position: fixed; top: 64px; left: 16px; right: 16px; transform: none; width: auto; }
}

/* ------------------------------------------------------- stats centre --- */
/* A statistics page's layout - leaderboards three to a row, a goal share
   table, a best XI on a pitch - in this site's purple and gold. Gold marks
   ratings, the one number a reader looks for first; every other value is a
   violet bar whose length is its share of the board's leader. */
.sc-wrap { max-width: 1180px; }
.sc-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 4px 0 14px; }
.sc-titlebar h1 { font-size: 22px; }
.sc-select { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.sc-select select { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 6px 10px; font: inherit; min-width: 210px; }
.sc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 13px 0; }
.sc-section-head h2 { font-size: 18px; font-weight: 600; }
.sc-view { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.sc-toggles { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sc-toggle { background: var(--surface-3); color: var(--text-secondary); border: 1px solid transparent;
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.sc-toggle[aria-pressed="true"] { background: var(--series-away-soft); color: var(--text-primary);
  border-color: var(--series-away); font-weight: 700; }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
@media (max-width: 900px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sc-grid, .sc-grid-2 { grid-template-columns: 1fr; } }
.sc-mini { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sc-mini-head { background: var(--chrome); color: var(--chrome-text); font-weight: 700; font-size: 13px;
  padding: 6px 10px; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px;
  border-top: 1px solid var(--border); }
.sc-row:nth-child(odd) { background: var(--surface-2); }
.sc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-team { flex: 0 1 40%; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; }
.sc-apps { width: 24px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* A bar on a track: the number sits at the track's right end, readable
   however short the bar is. */
.sc-pill { flex: 0 0 72px; position: relative; font-weight: 700; font-size: 12px; color: var(--text-primary);
  font-variant-numeric: tabular-nums; padding: 2px 6px; z-index: 0; text-align: right;
  background: var(--series-away-soft); border-radius: 3px; }
.sc-pill::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 100%);
  background: var(--series-away); opacity: .55; border-radius: 3px; z-index: -1; }
.sc-pill-rating { flex-basis: 48px; text-align: center; color: #1c1130; background: var(--series-home); }
.sc-pill-rating::before { display: none; }
:root[data-theme="light"] .sc-pill-rating { color: #fff; }
.sc-cards { display: inline-flex; gap: 4px; }
.sc-card { min-width: 26px; text-align: center; font-weight: 700; font-size: 12px; border-radius: 3px; padding: 1px 5px;
  font-variant-numeric: tabular-nums; }
.sc-yellow { background: #e9c74a; color: #2a2205; }
.sc-red { background: var(--critical); color: #fff; }
.sc-crest { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; }
.sc-crest img { width: 100%; height: 100%; object-fit: contain; }
.sc-crest-text { background: var(--surface-3); color: var(--text-secondary); font-size: 9px; font-weight: 800; }
.sc-empty, .sc-note { color: var(--text-muted); font-size: 13px; padding: 8px 10px; margin: 0; }
.sc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.sc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-table th { background: var(--chrome); color: var(--chrome-text); text-align: left; padding: 7px 10px;
  font-weight: 700; white-space: nowrap; }
.sc-table td { padding: 7px 10px; border-top: 1px solid var(--border); }
.sc-table tr:nth-child(even) td { background: var(--surface-2); }
.sc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sc-strong { font-weight: 600; }
.sc-muted { color: var(--text-muted); }
.sc-bar-col { width: 40%; min-width: 180px; }
.sc-share { display: flex; align-items: center; background: var(--series-away-soft); border-radius: 3px;
  height: 20px; position: relative; font-size: 12px; font-weight: 700; }
.sc-share-fill { background: var(--series-home); color: #1c1130; height: 100%; display: flex; align-items: center;
  padding-left: 6px; border-radius: 3px; min-width: 22px; }
.sc-share-total { margin-left: auto; padding-right: 8px; color: var(--text-secondary); }
.sc-xi-range { text-align: center; font-size: 20px; font-weight: 700; margin: 2px 0 12px; }
.sc-pitch { position: relative; max-width: 720px; margin: 0 auto; border-radius: 8px; overflow: hidden;
  padding: 16px 8px 34px; display: flex; flex-direction: column; gap: 14px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 44px, transparent 44px 88px),
    linear-gradient(180deg, #3a1f6e 0%, #241345 100%);
  border: 2px solid rgba(227,180,85,.55); }
.sc-pitch-box { position: absolute; top: -2px; left: 30%; right: 30%; height: 80px;
  border: 2px solid rgba(227,180,85,.35); border-top: 0; }
.sc-pitch-half { position: absolute; left: 0; right: 0; bottom: 22%; border-top: 2px solid rgba(227,180,85,.25); }
.sc-pitch-circle { position: absolute; left: 50%; bottom: calc(22% - 60px); width: 120px; height: 120px; margin-left: -60px;
  border: 2px solid rgba(227,180,85,.25); border-radius: 50%; }
.sc-line { position: relative; display: flex; justify-content: space-around; gap: 4px; z-index: 1; }
.sc-player { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; max-width: 24%;
  text-align: center; }
.sc-player-team { font-size: 11px; color: #d8c9f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sc-player-name { font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
.sc-player-rating { background: var(--series-home); color: #1c1130; font-weight: 800; font-size: 12px;
  padding: 1px 6px; border-radius: 3px; }
.sc-player .sc-crest { background: rgba(255,255,255,.08); }
.sc-pitch-mark { position: absolute; right: 12px; bottom: 8px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-size: 12px; color: rgba(227,180,85,.75); }
.sc-foot { color: var(--text-muted); font-size: 12px; font-style: italic; margin: 10px 0 0; }
.nav-link[aria-current="page"] { background: var(--series-home); border-color: var(--series-home); color: #1c1130; }
@media (max-width: 600px) {
  .sc-player { width: auto; }
  .sc-player-name { font-size: 11px; }
  .sc-select select { min-width: 0; }
}

/* Stats Centre: section tabs and the full sortable tables. */
.sc-pages { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin: 0 0 14px; overflow-x: auto; }
.sc-pages a { padding: 9px 16px; font-weight: 700; font-size: 14px; color: var(--text-secondary); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.sc-pages a:hover { color: var(--text-primary); }
.sc-pages a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--series-home); }
.sc-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.sc-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.sc-filters select, .sc-filters input { background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 10px; font: 400 13px var(--sans);
  text-transform: none; letter-spacing: 0; min-width: 160px; }
.sc-search input { min-width: 220px; }
.sc-full th, .sc-full td { white-space: nowrap; }
.sc-full th.num { text-align: right; padding: 0; }
.sc-full .sc-left { text-align: left; }
.sc-sort { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
  padding: 7px 10px; width: 100%; text-align: right; }
.sc-sort:hover { text-decoration: underline; }
.sc-full th.is-sorted { background: var(--seq-500); }
.sc-full th.is-sorted .sc-sort::after { content: " \25BE"; font-size: 10px; }
.sc-full th[aria-sort="ascending"] .sc-sort::after { content: " \25B4"; }
.sc-full td.is-sorted { background: color-mix(in srgb, var(--series-away-soft) 70%, transparent); font-weight: 700; }
.sc-rank { color: var(--text-muted); width: 32px; }
.sc-teamcell { display: inline-flex; align-items: center; gap: 8px; }
.sc-playercell { display: flex; flex-direction: column; line-height: 1.25; }
.sc-sub { font-size: 11px; color: var(--text-muted); }
.sc-rt { display: inline-block; min-width: 40px; text-align: center; background: var(--series-home); color: #1c1130;
  font-weight: 800; border-radius: 3px; padding: 1px 6px; }
:root[data-theme="light"] .sc-rt { color: #fff; }
.sc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.sc-pager .sc-toggle:disabled { opacity: .4; cursor: default; }
.sc-pager-at { font-size: 13px; color: var(--text-secondary); }
@media (max-width: 600px) { .sc-hide-sm { display: none; } .sc-search input { min-width: 0; } }
.tt-club { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.tt-val small { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.tt-row.tt-row-player { grid-template-columns: 16px 1fr auto; }
.sc-home { margin-bottom: 14px; scroll-margin-top: 70px; }
.sc-title { font-size: 22px; }

/* ------------------------------------------------- live match centre --- */
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--critical); display: inline-block;
  animation: lv-blink 1.4s infinite; }
@keyframes lv-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .lv-dot { animation: none; } }
.lv-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 13px; border-bottom: 1px solid var(--border);
  scrollbar-width: thin; }
.lv-chip { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font: 600 12px var(--sans); cursor: pointer; }
.lv-chip[aria-pressed="true"] { border-color: var(--series-home); background: var(--series-home-soft); }
.lv-chip-clock { font-family: var(--mono); color: var(--text-muted); }
.lv-chip.is-live .lv-chip-clock { color: var(--critical); }
.lv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 13px; }
.lv-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lv-away { justify-content: flex-end; text-align: right; }
.lv-name { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.lv-crest { display: inline-flex; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--surface-3); }
.lv-crest img { width: 100%; height: 100%; object-fit: contain; }
.lv-score { text-align: center; }
.lv-league { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.lv-goals { font: 800 34px var(--mono); line-height: 1.1; }
.lv-clock { font: 700 13px var(--mono); color: var(--text-secondary); }
.lv-clock.is-live { color: var(--critical); }
.lv-ht { font-size: 11px; color: var(--text-muted); }
.lv-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); padding: 0 13px; overflow-x: auto; }
.lv-tab { background: none; border: 0; color: var(--text-secondary); font: 700 13px var(--sans); padding: 10px 14px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; }
.lv-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--series-home); }
.lv-body { max-height: 620px; overflow-y: auto; }
.lv-empty, .lv-note { color: var(--text-muted); font-size: 13px; }
.lv-updated { font-size: 11px; color: var(--text-muted); padding: 0 13px 10px; margin: 0; }
.lv-stat { padding: 7px 0; border-bottom: 1px solid var(--border); }
.lv-stat-label { text-align: center; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.lv-stat-line { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; }
.lv-stat-v { font: 700 13px var(--mono); text-align: center; }
.lv-stat-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.lv-bar-home { background: var(--series-home); }
.lv-bar-away { background: var(--series-away); }
.lv-forms { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 8px; }
.lv-pitch { position: relative; aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #2c1856 0 8.33%, #26144b 8.33% 16.66%); border: 2px solid rgba(227,180,85,.45); }
.lv-pitch i { position: absolute; border: 2px solid rgba(227,180,85,.3); }
.lv-halfway { left: 50%; top: 0; bottom: 0; border-width: 0 0 0 2px !important; }
.lv-circle { left: 50%; top: 50%; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.lv-box { top: 25%; height: 50%; width: 14%; }
.lv-box-l { left: -2px; } .lv-box-r { right: -2px; }
.lv-player { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  width: 90px; text-align: center; z-index: 1; }
.lv-shirt { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--mono);
  border: 2px solid #fff; }
.lv-home .lv-shirt { background: var(--series-home); color: #1c1130; }
.lv-away .lv-shirt { background: var(--series-away); color: #fff; }
.lv-pname { font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.lv-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; font-size: 12px; }
.lv-bench h5 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); }
.lv-sub { padding: 2px 0; }
.lv-half { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); background: var(--surface-2); padding: 4px; margin: 6px 0; }
.lv-ev { display: grid; grid-template-columns: 1fr 26px 56px 26px 1fr; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.lv-ev-home .lv-ev-who { text-align: right; }
.lv-ev-who { display: flex; flex-direction: column; }
.lv-ev-main { font-weight: 700; }
.lv-ev-sub { font-size: 11px; color: var(--text-muted); }
.lv-ev-min { text-align: center; font: 700 12px var(--mono); color: var(--series-home); display: flex; flex-direction: column; }
.lv-ev-res { font-size: 11px; color: var(--text-secondary); }
.lv-card { width: 12px; height: 16px; border-radius: 2px; justify-self: center; }
.lv-card-y { background: #e9c74a; } .lv-card-r { background: var(--critical); }
.lv-card-yr { background: linear-gradient(135deg, #e9c74a 50%, var(--critical) 50%); }
.lv-ball, .lv-subicon { justify-self: center; }
.lv-subicon { color: var(--good); font-weight: 800; }
.lv-com { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; }
.lv-com.is-goal { background: var(--series-home-soft); font-weight: 700; border-left: 3px solid var(--series-home); }
.lv-com.is-key { font-weight: 600; }
.lv-com-min { font: 700 12px var(--mono); color: var(--series-home); text-align: center; }
.lv-xg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.lv-xg-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center; }
.lv-xg-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; }
.lv-xg-val { font: 800 22px var(--mono); }
.lv-pchart { width: 100%; height: auto; background: var(--surface-2); border-radius: 6px; }
.lv-axis { stroke: var(--border-strong); } .lv-ht-line { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.lv-p-home { fill: var(--series-home); } .lv-p-away { fill: var(--series-away); }
.lv-p-goal { font-size: 12px; }
.lv-h2h-tot { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-bottom: 10px; }
.lv-h2h-tot b { display: block; font: 800 28px var(--mono); }
.lv-h2h-tot span { font-size: 12px; color: var(--text-muted); }
.lv-h2h-row { display: grid; grid-template-columns: 90px 1fr 56px 1fr; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; align-items: center; }
.lv-h2h-row > :nth-child(2) { text-align: right; }
.lv-h2h-date { color: var(--text-muted); font-family: var(--mono); font-size: 12px; }
.lv-h2h-score { text-align: center; font: 700 13px var(--mono); }
@media (max-width: 600px) {
  .lv-name { font-size: 13px; } .lv-goals { font-size: 26px; }
  .lv-player { width: 60px; } .lv-pname { font-size: 8px; max-width: 60px; } .lv-shirt { width: 20px; height: 20px; font-size: 9px; }
  .lv-pitch { aspect-ratio: 1.4 / 1; }
}
.sc-xi-controls { flex-wrap: wrap; gap: 12px; }
.sc-xi-controls select { min-width: 190px; }
.lv-badge { display: flex; flex-direction: column; align-items: center; margin-top: 3px; line-height: 1.15; }
.lv-badge b { font: 800 13px var(--mono); color: var(--text-primary); }
.lv-badge span { font: 700 10px var(--mono); color: var(--critical); }
.lv-badge.is-over span { color: var(--text-muted); }
.board-row.is-live { box-shadow: inset 3px 0 0 var(--critical); }
#mc-block .lv-panel { margin-bottom: 14px; }
#mc-block { scroll-margin-top: 70px; }

/* --------------------------------------------------------------- comments */
.cm-order { display: flex; gap: 6px; margin-bottom: 12px; }
.cm-gate { border: 1px solid var(--border); border-radius: 6px; padding: 14px; background: var(--surface-2); margin-bottom: 12px; font-size: 14px; }
.cm-signin { background: var(--series-home); color: #1c1130; border: 0; border-radius: 6px; padding: 7px 14px; font: 700 13px var(--sans); cursor: pointer; }
.cm-me { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.cm-compose { margin-bottom: 14px; }
.cm-text { width: 100%; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 8px 10px; font: 400 14px var(--sans); resize: vertical; }
.cm-compose-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.cm-count { font-size: 11px; color: var(--text-muted); }
.cm-post { background: var(--series-away); color: #fff; border: 0; border-radius: 6px; padding: 6px 16px; font: 700 13px var(--sans); cursor: pointer; }
.cm-post:disabled { opacity: .5; }
.cm-item { border-top: 1px solid var(--border); padding: 10px 0; }
.cm-item.cm-reply { margin-left: 28px; border-top-style: dashed; }
.cm-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cm-avatar { width: 22px; height: 22px; border-radius: 50%; }
.cm-name { color: var(--series-home); }
.cm-when { color: var(--text-muted); font-size: 12px; }
.cm-textline { margin: 4px 0 6px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-acts { display: flex; gap: 12px; }
.cm-link { background: none; border: 0; padding: 0; color: var(--text-secondary); font: 600 12px var(--sans); cursor: pointer; }
.cm-link:disabled { cursor: default; opacity: .7; }
.cm-like.is-on { color: var(--good); }
.cm-del { color: var(--critical); }
.cm-note { color: var(--text-muted); font-size: 13px; }
.cm-error { color: var(--critical); font-size: 13px; }
.cm-report { color: var(--text-muted); }
.cm-reportbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding: 8px; border: 1px dashed var(--border-strong); border-radius: 6px; }
.cm-report-q { font-size: 12px; color: var(--text-secondary); margin-right: 4px; }
.cm-flags { font-size: 11px; color: var(--critical); font-weight: 700; }
.cm-notice { color: var(--good); font-size: 13px; }

/* --------------------------------------- characteristics, forecast, votes */
select.chip option, select.chip optgroup { background: var(--surface-1); color: var(--text-primary); }
.mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .mx-grid { grid-template-columns: 1fr; } }
.mx-col h4 { font-size: 15px; margin: 12px 0 6px; text-align: center; }
.mx-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.mx-grade { font: 700 12px var(--sans); padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.mx-very-strong, .mx-very-likely { background: var(--good); color: #fff; }
.mx-strong { background: color-mix(in srgb, var(--good) 70%, var(--surface-1)); color: #fff; }
.mx-likely { background: var(--series-home); color: #1c1130; }
.mx-weak { background: var(--serious); color: #fff; }
.mx-very-weak { background: var(--critical); color: #fff; }
.mx-none { color: var(--text-muted); font-size: 13px; }
.mx-foot { color: var(--text-muted); font-size: 12px; font-style: italic; margin: 8px 0 0; }
.mx-h { font-size: 18px; font-weight: 600; margin: 18px 0 6px; }
.mx-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mx-odd { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-2); font-size: 13px; color: var(--text-secondary); }
.mx-odd b { font: 800 20px var(--mono); color: var(--text-primary); }
.vt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .vt-grid { grid-template-columns: 1fr; } }
.vt-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px; background: var(--surface-2); }
.vt-card h4 { margin: 0 0 10px; font-size: 15px; text-align: center; }
.vt-opts { display: flex; gap: 6px; margin-bottom: 10px; }
.vt-opt { flex: 1; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 6px; font: 700 12px var(--sans); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-opt[aria-pressed="true"] { background: var(--series-home); color: #1c1130; border-color: var(--series-home); }
.vt-score { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; }
.vt-team { font-weight: 700; }
.vt-sel { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 5px; padding: 4px 6px; }
.vt-wide { flex: 1; min-width: 0; }
.vt-go { background: var(--series-away); color: #fff; border: 0; border-radius: 5px; padding: 5px 12px; font: 700 12px var(--sans); cursor: pointer; }
.vt-bars { display: flex; flex-direction: column; gap: 6px; }
.vt-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) 2fr 40px; align-items: center; gap: 8px; font-size: 12px; }
.vt-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-track { height: 14px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.vt-fill { display: block; height: 100%; background: var(--serious); }
.vt-pct { font: 700 12px var(--mono); text-align: right; }

/* ------------------------------------------------- header sign in / up --- */
.auth-box { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.auth-link { background: none; border: 0; padding: 2px 2px; color: var(--chrome-text); font: 700 13px var(--sans); cursor: pointer; }
.auth-link:hover { color: var(--series-home); }
.auth-under { text-decoration: underline; text-underline-offset: 3px; color: var(--series-home); }
.auth-sep { color: var(--chrome-muted); }
.auth-me { display: inline-flex; align-items: center; gap: 6px; color: var(--chrome-text); font: 700 13px var(--sans); }
.auth-avatar { width: 24px; height: 24px; border-radius: 50%; }
.cm-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cm-gate-link { color: var(--series-home); font-size: 14px; text-decoration: underline; }
.cm-gate .cm-signin { margin-left: auto; }

/* ---------- Sign In / Sign Up window ---------- */
.au-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px; background: rgba(10, 4, 22, .72); overflow-y: auto; }
.au-modal[hidden] { display: none; }
.au-card { position: relative; width: 100%; max-width: 420px; background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-top: 4px solid var(--series-home); border-radius: 8px;
  padding: 22px 22px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); font-family: var(--sans); }
.au-card h3 { margin: 0 28px 16px 0; font-size: 18px; font-weight: 800; }
.au-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.au-close:hover { background: var(--surface-3); color: var(--text-primary); }
.au-field { display: block; margin-bottom: 12px; }
.au-field span { display: block; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; }
.au-field input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: 15px var(--sans);
  color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px; }
.au-field input:focus { outline: 2px solid var(--series-home); outline-offset: 0; border-color: var(--series-home); }
.au-hint { margin: -6px 0 12px; font-size: 12px; color: var(--text-muted); }
.au-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 11px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.au-check input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--series-home); }
.au-check a { color: var(--series-home); font-weight: 700; }
.au-error { margin: 4px 0 12px; padding: 8px 10px; border-radius: 6px; font-size: 13px;
  background: var(--series-home-soft); color: var(--hl-ink); border: 1px solid var(--hl-edge); }
.au-error[hidden] { display: none; }
.au-primary { display: block; width: 100%; padding: 12px; margin: 4px 0 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--series-home); color: #1c1130; font: 800 15px var(--sans); }
.au-primary:hover { filter: brightness(1.08); }
.au-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 12px;
  margin: 0 0 12px; border: 1px solid #dadce0; border-radius: 999px; cursor: pointer;
  background: #ffffff; color: #3c4043; font: 700 15px var(--sans); }
.au-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); }
.au-google svg { flex: none; }
.au-link { background: none; border: 0; padding: 0; color: var(--series-home); font: 700 13px var(--sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-alt { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); }
.au-benefits { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.au-benefits h4 { margin: 0 0 8px; font-size: 14px; color: var(--series-home); }
.au-benefits ul { margin: 0; padding: 0; list-style: none; }
.au-benefits li { position: relative; padding-left: 20px; margin-bottom: 5px; font-size: 13px; color: var(--text-secondary); }
.au-benefits li::before { content: "\2713"; position: absolute; left: 0; color: var(--good); font-weight: 800; }

/* ---------- Privacy Policy and Terms ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 26px 16px 10px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.legal h1 { color: var(--text-primary); font-size: 30px; margin: 0 0 4px; }
.legal h2 { color: var(--series-home); font-size: 19px; margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.legal h3 { color: var(--text-primary); font-size: 15px; margin: 18px 0 6px; }
.legal strong { color: var(--text-primary); }
.legal a { color: var(--series-home); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal-date { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 10px; border: 1px solid var(--border); }
.legal-table th { background: var(--surface-3); color: var(--text-primary); }
@media (max-width: 600px) { .legal h1 { font-size: 24px; } .legal-table { font-size: 13px; } }
.mf-check { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; color: var(--chrome-muted); cursor: pointer; }
.mf-check b { color: var(--chrome-text); }
.mf-check input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: #e3b455; }
.mf-note { margin: 10px 0 0 !important; font-size: 13px !important; }
.mf-left { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mf-follow { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: var(--chrome-text); font: 700 14px var(--sans); text-decoration: none; }
.mf-follow:hover { background: rgba(255, 255, 255, .18); }
.mf-follow svg { flex: none; }
.topbar a.chip { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Premium ---------- */
.auth-premium { padding: 4px 11px; border-radius: 999px; background: #e3b455; color: #1c1130 !important;
  font: 800 12px var(--sans); text-decoration: none; margin-right: 4px; }
.auth-premium:hover { filter: brightness(1.08); }
.auth-pro { margin-left: 4px; padding: 1px 7px; border-radius: 4px; background: #e3b455; color: #1c1130; font: 800 10px var(--sans); letter-spacing: .06em; }
.pm-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 9px 14px; background: var(--series-home-soft); color: var(--hl-ink); border-bottom: 1px solid var(--hl-edge); font-size: 13px; font-weight: 600; }
.pm-cta { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e3b455; color: #1c1130 !important;
  font: 800 13px var(--sans); text-decoration: none; white-space: nowrap; }
.pm-cta:hover { filter: brightness(1.08); }
.board-pick.pm-blur { position: relative; overflow: hidden; }
.pm-fake { display: block; filter: blur(5px); opacity: .75; user-select: none; pointer-events: none; }
.pm-tag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 800 13px var(--sans); color: var(--series-home); letter-spacing: .02em; }
.pm-lock { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px dashed var(--hl-edge);
  border-radius: 8px; background: var(--series-home-soft); color: var(--hl-ink); }
.pm-lock b { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text-primary); }
.pm-lock p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.pm-lock-icon { font-size: 26px; line-height: 1; }
.pm-lock-line { margin: 0; padding: 12px 0; font-size: 13px; color: var(--text-secondary); }
.pm-lock-line a { color: var(--series-home); font-weight: 800; }
#mc-block.is-locked .slider-row, #mc-block.is-locked #tilt-note, #mc-block.is-locked #mw-note { display: none; }

.pm-home { margin: 22px 0; padding: 26px 24px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, var(--chrome) 0%, var(--chrome-2) 100%); color: var(--chrome-text); }
.pm-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: center; }
.pm-kicker { display: inline-block; font: 800 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #e3b455; }
.pm-pitch h2 { margin: 8px 0 10px; font-size: 30px; line-height: 1.15; font-weight: 800; }
.pm-pitch p { margin: 0 0 10px; color: var(--chrome-muted); font-size: 15px; line-height: 1.6; }
.pm-pitch strong { color: var(--chrome-text); }
.pm-small { font-size: 13px !important; }
.pm-example { background: rgba(0, 0, 0, .28); border: 1px solid rgba(227, 180, 85, .4); border-radius: 10px; padding: 16px 18px; }
.pm-ex-tag { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--chrome-muted); }
.pm-ex-match { display: block; margin: 6px 0 10px; font-size: 16px; }
.pm-example dl { margin: 0; }
.pm-example dl div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.pm-example dt { color: var(--chrome-muted); }
.pm-example dd { margin: 0; font-family: var(--mono); font-weight: 700; }
.pm-ev dd { color: #3fc76a; }
.pm-billing { display: inline-flex; margin: 22px 0 16px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.pm-bill { border: 0; background: transparent; color: var(--chrome-text); padding: 8px 18px; border-radius: 999px;
  font: 700 14px var(--sans); cursor: pointer; }
.pm-bill[aria-pressed="true"] { background: #e3b455; color: #1c1130; }
.pm-save { margin-left: 4px; font-size: 11px; font-weight: 800; color: #3fc76a; }
.pm-bill[aria-pressed="true"] .pm-save { color: #14532d; }
.pm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pm-plan { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 10px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); }
.pm-pro { border: 2px solid #e3b455; background: rgba(227, 180, 85, .08); }
.pm-badge { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; background: #e3b455;
  color: #1c1130; font: 800 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.pm-plan h3 { margin: 0 0 6px; font-size: 18px; }
.pm-price { margin: 0; font-size: 15px; color: var(--chrome-muted); }
.pm-price b { font-size: 34px; color: var(--chrome-text); margin-right: 4px; }
.pm-idr { margin: 2px 0 12px; font-size: 13px; color: var(--chrome-muted); }
.pm-plan ul { margin: 0 0 16px; padding: 0; list-style: none; flex: 1; }
.pm-plan li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 14px; line-height: 1.45; color: var(--chrome-text); }
.pm-plan li::before { content: "\2713"; position: absolute; left: 0; color: #e3b455; font-weight: 800; }
.pm-go { width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer; background: #e3b455; color: #1c1130; font: 800 15px var(--sans); }
.pm-go:disabled { opacity: .7; cursor: default; }
.pm-go-free { background: transparent; color: #e3b455; border: 1px solid #e3b455; }
.pm-note { margin: 8px 0 0; min-height: 1em; font-size: 13px; color: var(--chrome-muted); }
.pm-fine { margin: 14px 0 0; font-size: 12px; color: var(--chrome-muted); }
.pm-fine a { color: #e3b455; }
@media (max-width: 760px) {
  .pm-hero, .pm-plans { grid-template-columns: 1fr; }
  .pm-pitch h2 { font-size: 24px; }
  .pm-home { padding: 20px 16px; }
}

/* ---------- Section pages: one menu, one page per section ---------- */
.site-nav { background: var(--chrome-2); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.site-nav-inner::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; padding: 11px 14px; color: var(--chrome-muted); font: 700 14px var(--sans); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--chrome-text); }
.site-nav a[aria-current="page"] { color: #e3b455; border-bottom-color: #e3b455; }
.page-title { margin: 18px 0 4px; font-size: 26px; font-weight: 800; color: var(--text-primary); }
.page-lead { margin: 0 0 14px; color: var(--text-secondary); font-size: 14px; max-width: 760px; }
.mc-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; margin-bottom: 14px; }
.mc-picker[hidden] { display: none; }
.mc-picker label { font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mc-picker select { flex: 1 1 260px; max-width: 520px; }

/* On a section page only that section shows; the home page shows them all. */
body[data-page="board"] main.wrap > :not(.page-head):not(#live-panel):not(#board-panel):not(#premium):not(#mc-block):not(#reality):not(#parlay-panel),
body[data-page="news"] main.wrap > :not(.page-head):not(#news-panel),
body[data-page="stats"] main.wrap > :not(.page-head):not(#stats-centre),
body[data-page="match-centre"] main.wrap > :not(.page-head):not(#mc-block),
body[data-page="comments"] main.wrap > :not(.page-head):not(#mc-block),
body[data-page="method"] main.wrap > :not(.page-head):not(#method-panel),
body[data-page="comments"] #mc-block > div > :not(#vt-panel):not(#cm-panel) { display: none !important; }