/* ===========================================================================
   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], .au-error:empty { 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="live"] main.wrap > :not(.page-head):not(#live-panel):not(#live-none),
body[data-page="comments"] #mc-block > div > :not(#vt-panel):not(#cm-panel) { display: none !important; }

/* ---------- Header: main links top right, settings behind a gear ---------- */
.top-links { display: flex; align-items: center; gap: 4px; }
.top-links a { padding: 8px 10px; color: var(--chrome-text); font: 800 14px var(--sans); text-decoration: none;
  border-radius: 8px; white-space: nowrap; }
.top-links a:hover { background: rgba(255, 255, 255, .08); }
.top-links a[aria-current="page"] { color: #e3b455; }
.settings { position: relative; }
.settings-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08);
  color: var(--chrome-text); cursor: pointer; padding: 0; }
.settings-btn:hover, .settings-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .18); color: #e3b455; }
.settings-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 240px; padding: 12px;
  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); display: flex; flex-direction: column; gap: 10px; }
.settings-menu[hidden] { display: none; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 700 13px var(--sans); color: var(--text-secondary); }
.settings-menu .chip { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }
/* The schedule only matters where there are matches to choose. */
body[data-page="news"] .date-nav, body[data-page="stats"] .date-nav, body[data-page="method"] .date-nav,
body[data-page="live"] .date-nav { display: none; }

}

/* ---------- News, laid out like a sports front page ---------- */
.nw-top, .nw-block { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 18px; }
#news-body > .nw-top:last-child { margin-bottom: 0; }
.nw-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; }
.nw-hero { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--surface-3);
  color: var(--text-primary); text-decoration: none; }
.nw-hero-shot { aspect-ratio: 16 / 9; }
.nw-hero-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.nw-hero-body h3 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; }
.nw-hero:hover h3, .nw-row:hover h4, .nw-feature:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nw-side { display: flex; flex-direction: column; min-width: 0; }
.nw-side-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.nw-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 128px; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--border); color: var(--text-primary); text-decoration: none; }
.nw-list .nw-row { grid-template-columns: minmax(0, 1fr) 128px; }
.nw-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: #e3b455; color: #1c1130; font: 800 12px var(--sans); align-self: start; margin-top: 2px; }
.nw-row-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nw-row h4 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; }
.nw-thumb { width: 128px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.nw-more { align-self: flex-start; margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  color: #e3b455; font: 800 14px var(--sans); text-decoration: none; }
.nw-more:hover { text-decoration: underline; }
.nw-block-title { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.nw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px;
  border-radius: 50%; background: var(--chrome); color: #e3b455; font: 800 12px var(--sans); letter-spacing: .02em;
  border: 2px solid rgba(227, 180, 85, .5); }
.nw-block-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.nw-block-grid.flip .nw-list { order: 2; }
.nw-list { display: flex; flex-direction: column; min-width: 0; }
.nw-list .nw-row:last-of-type { border-bottom: 0; }
.nw-feature { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; color: #fff; text-decoration: none; min-height: 100%; }
.nw-feature-shot { aspect-ratio: 16 / 10; }
.nw-feature-body { flex: 1; padding: 18px 20px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.nw-feature-body h3 { margin: 0; font-size: 24px; line-height: 1.22; font-weight: 800; }
.nw-feature .news-meta { color: rgba(255, 255, 255, .8); }
.nw-tone-0 .nw-feature-body { background: #3d1a6e; }
.nw-tone-1 .nw-feature-body { background: #1f3c88; }
.nw-tone-2 .nw-feature-body { background: #5a1f4f; }
.nw-tone-3 .nw-feature-body { background: #6b4a0e; }
.nw-hero-shot, .nw-feature-shot, .nw-thumb { position: relative; background: var(--surface-3); }
.nw-hero-shot .news-photo, .nw-feature-shot .news-photo, .nw-thumb .news-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .nw-top, .nw-block-grid { grid-template-columns: 1fr; gap: 16px; }
  .nw-block-grid.flip .nw-list { order: 0; }
  .nw-top, .nw-block { padding: 14px; border-radius: 12px; }
  .nw-hero-body h3 { font-size: 20px; }
  .nw-feature-body h3 { font-size: 19px; }
  .nw-row, .nw-list .nw-row { grid-template-columns: auto minmax(0, 1fr) 96px; gap: 10px; }
  .nw-list .nw-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .nw-thumb { width: 96px; }
  .nw-row h4 { font-size: 14px; }
}
/* The front-page pieces share .news-card for their picture handling, not its box. */
.news-card.nw-row { display: grid; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; overflow: visible; }
.news-card.nw-row:hover { background: none; }
.news-card.nw-hero, .news-card.nw-feature { display: flex; border: 0; }
.news-card.nw-hero { background: var(--surface-3); }
.news-card.nw-feature:hover { background: none; }
.news-card.nw-row h4, .news-card.nw-hero h3, .news-card.nw-feature h3 { margin: 0; }
.lv-none[hidden] { display: none; }
.lv-next { display: flex; flex-direction: column; }
.lv-next-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--border); color: var(--text-primary); text-decoration: none; }
.lv-next-row:last-child { border-bottom: 0; }
.lv-next-when { font: 700 12px var(--mono); color: var(--series-home); }
.lv-next-teams { font-weight: 700; font-size: 14px; }
.lv-next-league { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* ---------- The header tools: a row on a desktop, a drawer on a phone ---------- */
.tb-tools { display: flex; align-items: center; gap: 14px; }
.m-links, .live-pill, .menu-btn { display: none; }
.live-pill { align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  color: var(--chrome-text); font: 800 13px var(--sans); text-decoration: none; }
.live-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fc76a; box-shadow: 0 0 0 3px rgba(63, 199, 106, .25); }
.menu-btn { position: relative; z-index: 95; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px;
  padding: 0 9px; border: 0; background: none; cursor: pointer; }
.menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--chrome-text); transition: transform .2s, opacity .2s; }
.topbar.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.topbar.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  /* One slim line: the name, Live, and the menu. Everything else - the
     sections, the schedule, the account, odds format and theme - is behind
     the three lines, as on the big football sites. */
  .topbar { position: sticky; }
  .topbar-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; min-height: 54px; }
  .brand { gap: 8px; font-size: 14px; min-width: 0; }
  .brand-logo { height: 32px; }
  .brand small { display: none; }
  .topbar-spacer { display: block; flex: 1; }
  .live-pill, .menu-btn { display: inline-flex; }
  .site-nav { display: none; }
  .tb-tools { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(340px, 88vw);
    flex-direction: column; align-items: stretch; gap: 18px; padding: 70px 20px 28px; overflow-y: auto;
    background: var(--chrome-2); box-shadow: -12px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(105%); transition: transform .25s ease; visibility: hidden; }
  .topbar.menu-open .tb-tools { transform: none; visibility: visible; }
  .topbar.menu-open::before { content: ""; position: fixed; inset: 0; z-index: 80; background: rgba(8, 3, 18, .6); }
  .tb-tools .auth-box { order: -2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
  .tb-tools .auth-box .auth-sep, .tb-tools .auth-box .auth-under { display: inline; }
  .m-links { order: -1; display: flex; flex-direction: column; }
  .m-links a { padding: 13px 2px; color: var(--chrome-text); font: 800 17px var(--sans); text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .m-links a[aria-current="page"] { color: #e3b455; }
  .tb-tools .top-links { display: none; }
  .tb-tools .date-nav { justify-content: flex-start; flex-wrap: wrap; }
  .tb-tools .dn-cal { position: static; transform: none; width: 100%; margin-top: 8px; }
  .tb-tools .settings-btn { display: none; }
  .tb-tools .settings-menu, .tb-tools .settings-menu[hidden] { display: flex; position: static; min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none; }
  .tb-tools .settings-row { color: var(--chrome-muted); }
  .tb-tools .settings-menu .chip { background: rgba(255, 255, 255, .08); color: var(--chrome-text); border-color: rgba(255, 255, 255, .18); }
}

/* ---------- Match previews ---------- */
.pv-crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.pv-crumbs a { color: var(--text-secondary); }
.pv .pv-lead { font-size: 17px; line-height: 1.6; color: var(--text-primary); }
.pv-played { padding: 10px 12px; border-radius: 8px; background: var(--surface-3); color: var(--text-secondary); font-size: 14px; }
.pv-card { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.pv-card h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: 19px; color: var(--text-primary); }
.pv-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.pv-odds div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 10px; background: var(--surface-3); text-align: center; }
.pv-odds span { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.pv-odds b { font: 800 22px var(--mono); color: var(--text-primary); }
.pv-odds small { font-size: 12px; color: var(--series-home); font-weight: 700; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-table th, .pv-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.pv-table .num { text-align: right; font-family: var(--mono); }
.pv-vs th[scope="row"] { text-align: center; color: var(--text-secondary); font-weight: 600; }
.pv-vs td.num:first-child { text-align: left; }
.pv-note { font-size: 12px; color: var(--text-muted); }
.pv-cta { border-color: var(--hl-edge); background: var(--series-home-soft); }
.pv-cta p { color: var(--text-secondary); }
.pv-link { margin-left: 12px; font-weight: 700; }
.pv-more { list-style: none; padding: 0; margin: 0; }
.pv-more li { padding: 8px 0; border-bottom: 1px solid var(--border); margin: 0; }
.pv-more li:last-child { border-bottom: 0; }
.pv-more a { font-weight: 700; }
.pv-more span { display: block; font-size: 12px; color: var(--text-muted); }
@media (max-width: 560px) { .pv-odds b { font-size: 18px; } .pv-card { padding: 14px; } }
.pv-vs thead th:first-child { text-align: left; }

/* ---------- Scouting Players Research ---------- */
/* Only the Scouting page shows the scouting section; every other page,
   the home page included, keeps it out of the way. */
body:not([data-page="scouting"]) #scouting { display: none !important; }
body[data-page="scouting"] main.wrap > :not(.page-head):not(#scouting) { display: none !important; }
body[data-page="scouting"] .date-nav { display: none; }

.sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 14px; }
.sp-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.sp-field select, .sp-field input, .sp-in {
  background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; min-width: 0; }
.sp-field select:focus, .sp-in:focus { outline: 2px solid var(--series-away); outline-offset: 1px; }
.sp-modes { display: inline-flex; gap: 6px; }
.sp-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 14px; align-items: start; }
.sp-layout > * { min-width: 0; }
.sp-filters .panel-body { display: grid; gap: 12px; }
.sp-f { display: grid; gap: 5px; font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.sp-f .sp-in { width: 100%; }
.sp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-leagues { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-count { font-size: 22px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sp-count small { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sp-clear { justify-self: start; }
.sp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-table th { position: sticky; top: 0; background: var(--surface-3); color: var(--text-secondary); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 8px; white-space: nowrap; cursor: pointer; }
.sp-table th[aria-sort] { color: var(--text-primary); }
.sp-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.sp-table tbody tr { cursor: pointer; }
.sp-table tbody tr:hover { background: var(--surface-2); }
.sp-table tr[aria-selected="true"] { background: var(--series-away-soft); }
.sp-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.sp-who { display: flex; flex-direction: column; min-width: 150px; }
.sp-who b { color: var(--text-primary); font-weight: 700; }
.sp-who span { font-size: 11px; color: var(--text-muted); }
.sp-role { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 4px;
  background: var(--surface-3); color: var(--text-primary); font-weight: 700; font-size: 11px; }
.sp-inferred { opacity: .75; font-style: italic; }
.sp-score { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--series-away); font-weight: 800; font-size: 12px; color: var(--text-primary); }
.sp-score.hi { border-color: var(--series-home); }
.sp-score.lo { border-color: var(--border-strong); color: var(--text-secondary); }
.sp-pct { position: relative; display: inline-block; min-width: 46px; padding: 2px 6px; border-radius: 4px;
  font-weight: 700; font-size: 12px; text-align: center; color: var(--text-primary); background: var(--surface-3); }
.sp-pct.t5 { background: #1f6b3a; color: #eafff0; }
.sp-pct.t4 { background: #2f8a4e; color: #eafff0; }
.sp-pct.t3 { background: var(--series-home-soft); color: var(--hl-ink); }
.sp-pct.t2 { background: #6b3b1f; color: #ffe9dc; }
.sp-pct.t1 { background: #7a2333; color: #ffe3e8; }
.sp-up { color: var(--good); font-weight: 800; }
.sp-down { color: var(--critical); font-weight: 800; }
.sp-locked { filter: blur(4px); user-select: none; }
.sp-pick { width: 16px; height: 16px; accent-color: var(--series-home); }
.sp-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-secondary); }
.sp-pager button:disabled { opacity: .4; cursor: default; }
.sp-empty { padding: 22px; text-align: center; color: var(--text-muted); }

.sp-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border); }
.sp-head h2 { margin: 0; font-size: 20px; }
.sp-head p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.sp-head .sp-score { width: 54px; height: 54px; font-size: 18px; border-width: 4px; }
.sp-head img { width: 34px; height: 34px; object-fit: contain; }
.sp-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
.sp-grid > * { min-width: 0; }
.sp-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface-2); }
.sp-card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.sp-card p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.sp-big { font: 800 26px var(--sans); color: var(--text-primary); }
.sp-big small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.sp-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; margin: 0; }
.sp-kv dt { color: var(--text-secondary); }
.sp-kv dd { margin: 0; text-align: right; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sp-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.sp-traits li { padding: 3px 9px; border-radius: 999px; background: var(--series-away-soft); color: var(--text-primary); font-size: 12px; font-weight: 600; }
.sp-radar { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.sp-radar .bg { fill: var(--surface-3); }
.sp-radar .w5 { fill: #3fc76a; } .sp-radar .w4 { fill: #7bd389; } .sp-radar .w3 { fill: var(--series-home); }
.sp-radar .w2 { fill: #cf9440; } .sp-radar .w1 { fill: #f2607a; }
.sp-radar text { fill: var(--text-secondary); font-size: 9px; font-family: var(--sans); }
.sp-radar .mid { fill: var(--text-primary); font-size: 22px; font-weight: 800; }
.sp-metrics { width: 100%; border-collapse: collapse; font-size: 12px; }
.sp-metrics td { padding: 5px 4px; border-bottom: 1px solid var(--border); }
.sp-metrics td:last-child { text-align: right; }
.sp-style td:nth-child(2), .sp-style td:nth-child(3) { text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.sp-match { color: var(--good); }
.sp-clash { color: var(--critical); }
.sp-sim-list { display: grid; gap: 6px; }
.sp-sim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 6px 8px;
  border-radius: 6px; background: var(--surface-1); font-size: 13px; cursor: pointer; border: 1px solid transparent; }
.sp-sim-row:hover { border-color: var(--border-strong); }
.sp-sim-row.best { border-color: var(--hl-edge); background: var(--hl-wash); }
.sp-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--hl-ink);
  background: var(--hl-wash); border: 1px solid var(--hl-edge); border-radius: 4px; padding: 1px 6px; }

.sp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.sp-tab { flex: 1 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--text-secondary);
  padding: 11px 14px; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.sp-tab[aria-selected="true"] { color: var(--series-home); border-bottom-color: var(--series-home); }
.sp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 14px; }
.sp-col { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--surface-2); min-width: 0; }
.sp-col h3 { margin: 0 0 2px; font-size: 16px; color: var(--text-primary); }
.sp-col .sp-move { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.sp-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.sp-terms label { display: grid; gap: 3px; font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.sp-rings { display: flex; justify-content: space-around; gap: 6px; margin: 8px 0 12px; text-align: center; font-size: 11px; color: var(--text-muted); }
.sp-rings .sp-score { width: 46px; height: 46px; font-size: 15px; margin: 0 auto 4px; }
.sp-rings .sp-overall .sp-score { width: 62px; height: 62px; font-size: 21px; border-color: var(--series-home); }
.sp-chart { width: 100%; height: auto; display: block; }
.sp-chart .ax { stroke: var(--border-strong); stroke-width: 1; }
.sp-chart text { fill: var(--text-muted); font-size: 10px; font-family: var(--sans); }
.sp-chart .l0 { stroke: #e3b455; } .sp-chart .l1 { stroke: #a78bfa; } .sp-chart .l2 { stroke: #3fc76a; }
.sp-chart .d0 { fill: #e3b455; } .sp-chart .d1 { fill: #a78bfa; } .sp-chart .d2 { fill: #3fc76a; }
.sp-chart polyline { fill: none; stroke-width: 2.5; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 14px 12px; font-size: 12px; color: var(--text-secondary); }
.sp-legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sp-note { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 0 2px; }
.sp-note b { color: var(--text-secondary); }
.sp-ev-pos { color: var(--good) !important; }
.sp-ev-neg { color: var(--critical) !important; }
@media (max-width: 960px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-bar { gap: 8px; }
  .sp-field { width: 100%; justify-content: space-between; }
  .sp-field select { flex: 1; }
  .sp-head h2 { font-size: 17px; }
  .sp-terms { grid-template-columns: 1fr 1fr; }
}
.sp-f[hidden], .sp-home [hidden] { display: none !important; }
.sp-ftoggle { display: none; margin-left: auto; text-transform: none; letter-spacing: 0; }
@media (max-width: 960px) {
  .sp-ftoggle { display: inline-block; }
  .sp-filters:not(.open) .panel-body > :not(.sp-count) { display: none !important; }
}
.sp-headbtn { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; }
.sp-headbtn + .sp-headbtn { margin-left: 0; }
.sp-star { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-muted); padding: 2px 4px; }
.sp-star[aria-pressed="true"] { color: var(--series-home); }
.sp-pad { padding: 12px; }
.sp-flash { padding: 10px 14px; border: 1px dashed var(--hl-edge); border-radius: 8px; margin: 0 0 12px; }
.sp-bars { display: flex; gap: 14px; align-items: flex-end; justify-content: center; margin: 12px 0; }
.sp-dbar { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; text-align: center; }
.sp-dbar b { font-size: 15px; color: var(--text-primary); }
.sp-dbar small { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.sp-barcol { height: 110px; width: 34px; display: flex; align-items: flex-end; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.sp-barcol span { display: block; width: 100%; background: #3fc76a; border-radius: 4px 4px 0 0; }
.sp-barcol span.old { background: var(--series-away); }
.sp-barcol span.next { background: repeating-linear-gradient(45deg, #3fc76a, #3fc76a 5px, #2f8a4e 5px, #2f8a4e 10px); }
.sp-pairs td:nth-child(n+3) { text-align: center; color: var(--good); font-weight: 800; }
.sp-pair { font-weight: 700; border-radius: 3px; }
.sp-pair.p4 { background: #1f6b3a; color: #eafff0; }
.sp-pair.p3 { background: #2f8a4e; color: #eafff0; }
.sp-pair.p2 { background: var(--series-home-soft); color: var(--hl-ink); }
.sp-pair.p1 { background: #7a2333; color: #ffe3e8; }
.sp-pair { white-space: nowrap; }
.sp-pairs thead td { color: var(--text-secondary) !important; font-weight: 600 !important; font-size: 11px; }
.sp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.sp-chips .chip-label { color: var(--text-muted); }
.sp-chip { background: var(--series-away-soft); color: var(--text-primary); border: 1px solid var(--series-away); border-radius: 999px;
  padding: 3px 10px; font: 600 12px var(--sans); cursor: pointer; }
.sp-chip:hover { border-color: var(--critical); }
.sp-bars { flex-wrap: wrap; }
.sp-dbar { width: 64px; }
.sp-wide { padding: 0 14px 14px; }
.sp-cmp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 8px; }
.sp-cmp > * { min-width: 0; }
.sp-spider { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.sp-spider .ring { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.sp-spider circle.ring:nth-of-type(odd) { fill: rgba(167, 139, 250, .05); }
.sp-spider .spoke { stroke: var(--border); stroke-width: 1; }
.sp-spider .tick { fill: var(--text-muted); font-size: 8px; font-family: var(--mono); }
.sp-spider .axis { fill: var(--text-secondary); font-size: 10px; font-weight: 600; font-family: var(--sans); }
.sp-spider .me { fill: rgba(227, 180, 85, .28); stroke: #e3b455; stroke-width: 2; }
.sp-spider .me-dot { fill: #e3b455; }
.sp-spider .bench { fill: rgba(167, 139, 250, .14); stroke: #a78bfa; stroke-width: 2; stroke-dasharray: 5 4; }
.sp-spider .bench-dot { fill: #a78bfa; }
.sp-spider .me-key { stroke: #e3b455; stroke-width: 3; }
.sp-spider .bench-key { stroke: #a78bfa; stroke-width: 3; stroke-dasharray: 5 4; }
.sp-report { display: block; width: calc(100% - 28px); margin: 12px 14px 0; font: 12px/1.5 var(--mono); background: var(--surface-2);
  color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px; }
@media (max-width: 760px) { .sp-cmp { grid-template-columns: 1fr; } }
/* Print: the profile alone, on white paper. */
@media print {
  :root { --bg: #fff; --surface-1: #fff; --surface-2: #fff; --surface-3: #f2eef8; --border: #ddd; --border-strong: #bbb;
          --text-primary: #111; --text-secondary: #333; --text-muted: #666; --chrome: #2e1758; --chrome-text: #fff; }
  body.sp-printing { background: #fff; }
  body.sp-printing .topbar, body.sp-printing .site-nav, body.sp-printing .page-head, body.sp-printing .sp-bar,
  body.sp-printing .sp-filters, body.sp-printing #sp-short, body.sp-printing #sp-chips, body.sp-printing #sp-flash,
  body.sp-printing .sp-main > section:not(#sp-profile), body.sp-printing .sp-head-actions, body.sp-printing .site-foot,
  body.sp-printing #sp-note, body.sp-printing .sp-wide select { display: none !important; }
  body.sp-printing .sp-layout { display: block; }
  body.sp-printing .sp-card, body.sp-printing .panel { break-inside: avoid; }
}
.sp-pillar-top { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.sp-avg { width: 92px; height: 92px; border-radius: 50%; border: 6px solid var(--series-home); display: grid; place-content: center;
  text-align: center; flex: 0 0 auto; }
.sp-avg b { font-size: 26px; line-height: 1; color: var(--text-primary); }
.sp-avg span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 4px; }
.sp-pillars { display: grid; gap: 8px; margin-bottom: 10px; }
.sp-pillar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 13px; }
.sp-pillar b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sp-track { position: relative; height: 12px; background: var(--surface-3); border-radius: 6px; }
.sp-track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7bd389, #3fc76a); border-radius: 6px; }
.sp-track em { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #a78bfa; border-radius: 2px; }
.sp-warn { color: var(--warning) !important; font-weight: 800; }
.sp-metrics .sp-num { white-space: nowrap; }
.sp-done { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: #1f6b3a; color: #eafff0;
  font-size: 12px; font-weight: 700; }
.sp-wheel { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.sp-wheel .ring { fill: none; stroke: var(--border); stroke-width: 1; }
.sp-wheel .bg { fill: var(--surface-3); }
.sp-wheel .hub { fill: var(--surface-1); stroke: var(--border-strong); stroke-width: 2; }
.sp-wheel .mid { fill: var(--text-primary); font: 800 22px var(--sans); }
.sp-wheel .cap { fill: var(--text-muted); font: 700 7px var(--sans); letter-spacing: .06em; }
.sp-wheel .tick { fill: var(--text-muted); font: 9px var(--mono); }
.sp-wheel text.name { fill: var(--text-secondary); font: 600 11.5px var(--sans); letter-spacing: .01em; }
.sp-phys .sp-wheel { max-width: 440px; }
/* Physical tests: the wheel, then the five groups and every test by name,
   in thin ruled rows. */
.sp-phys { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
.sp-phys-side { display: grid; gap: 14px; }
.sp-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.sp-tcol { display: flex; flex-direction: column; }
.sp-tcol b { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px;
  border-bottom: 2px solid currentColor; background: none !important; }
.sp-tcol b.c0 { color: #2dd4bf; } .sp-tcol b.c1 { color: #e3b455; } .sp-tcol b.c2 { color: #a78bfa; }
.sp-tcol b.c3 { color: #60a5fa; } .sp-tcol b.c4 { color: #3fc76a; }
.sp-tcol span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px; }
.sp-tcol span i { font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .sp-phys { grid-template-columns: 1fr; } }
.sp-wheel .c0, .sp-track i.c0 { fill: #2dd4bf; background: #2dd4bf; }
.sp-wheel .c1, .sp-track i.c1 { fill: #e3b455; background: #e3b455; }
.sp-wheel .c2, .sp-track i.c2 { fill: #a78bfa; background: #a78bfa; }
.sp-wheel .c3, .sp-track i.c3 { fill: #60a5fa; background: #60a5fa; }
.sp-wheel .c4, .sp-track i.c4 { fill: #3fc76a; background: #3fc76a; }
.sp-pillar { grid-template-columns: 120px minmax(0, 1fr) 36px; }
/* Faces: the Sportmonks photo, initials while there is none. */
.sp-face { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; background: linear-gradient(135deg, var(--series-away-soft), var(--surface-3)); border: 2px solid var(--series-away); }
.sp-face b { font: 800 12px var(--sans); color: var(--text-primary); }
.sp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.sp-face-sm { width: 30px; height: 30px; }
.sp-face-sm b { font-size: 11px; }
.sp-face-md { width: 44px; height: 44px; }
.sp-face-big { width: 112px; height: 112px; border: 4px solid #3fc76a; box-shadow: 0 0 0 6px rgba(63, 199, 106, .18), 0 0 0 12px rgba(63, 199, 106, .08); }
.sp-face-big b { font-size: 32px; }
.sp-whorow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-photo { position: relative; flex: 0 0 auto; padding: 8px; }
.sp-photo .sp-score { position: absolute; right: -4px; bottom: -2px; width: 44px; height: 44px; font-size: 15px; background: var(--surface-1); }
.sp-who-big h2 { margin: 0 0 6px; font-size: 24px; color: #3fc76a; letter-spacing: .02em; text-transform: uppercase; }
.sp-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.sp-facts dt { color: #e3b455; font-weight: 700; text-align: right; }
.sp-facts dd { margin: 0; color: var(--text-primary); }
.sp-sumbox { flex: 1 1 320px; display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.sp-sumrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.sp-sumtitle { color: #e3b455; font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; text-align: right; padding-top: 2px; }
.sp-sumrow .sp-kv dd { background: var(--surface-3); padding: 1px 8px; border-radius: 3px; }
.sp-crest { width: 46px !important; height: 46px !important; align-self: flex-start; }
.sp-cardline { margin: 0; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.sp-acts-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; margin: 0; }
.sp-ptabs { margin-top: 0; }
.sp-career td { white-space: nowrap; }
.sp-career thead td { color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.sp-career .sp-total td { font-weight: 800; color: var(--text-primary); border-top: 2px solid var(--border-strong); }
.sp-err { position: absolute; top: 3px; bottom: 3px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 3px; }
.sp-chart .future { fill: rgba(167, 139, 250, .08); }
.sp-chart .grid { stroke: var(--border); stroke-width: 1; }
.sp-chart .avg { stroke: #e3b455; stroke-width: 1; stroke-dasharray: 6 4; }
.sp-chart .dot { fill: #2dd4bf; opacity: .75; cursor: pointer; }
.sp-chart .dot:hover { opacity: 1; }
.sp-chart .me { fill: #3fc76a; stroke: #fff; stroke-width: 2; }
.sp-chart .name { fill: var(--text-secondary); font-size: 9px; }
.sp-chart .mename { fill: #3fc76a; font-size: 11px; font-weight: 800; }
.sp-chart .quad { fill: #3fc76a; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.sp-chart .bubble { fill: rgba(45, 212, 191, .55); stroke: #2dd4bf; stroke-width: 1; cursor: pointer; }
.sp-chart .bubble:hover { fill: rgba(63, 199, 106, .8); }
.sp-suit-title { margin: 0 0 8px; font-size: 14px; color: #3fc76a; text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.sp-arcs { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto 6px; }
.sp-arcs .track { fill: none; stroke: var(--surface-3); stroke-width: 10; stroke-linecap: round; }
.sp-arcs .a0, .sp-arcs .a1, .sp-arcs .a2 { fill: none; stroke-width: 10; stroke-linecap: round; }
.sp-arcs .a0 { stroke: #e04fd1; } .sp-arcs .a1 { stroke: #f08a24; } .sp-arcs .a2 { stroke: #2dd4bf; }
.sp-arcs .a0k { fill: #e04fd1; } .sp-arcs .a1k { fill: #f08a24; } .sp-arcs .a2k { fill: #2dd4bf; }
.sp-arcs .lab { fill: var(--text-secondary); font: 600 10px var(--sans); }
.sp-arcs .mid { fill: var(--text-primary); font: 800 34px var(--sans); }
@media (max-width: 760px) { .sp-face-big { width: 84px; height: 84px; } .sp-sumrow { grid-template-columns: 80px minmax(0, 1fr); } }
.sp-track em.sp-err { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .55); top: 2px; bottom: 2px; margin-left: 0; border-radius: 3px; }
.sp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-dbar { width: 54px; }
.sp-bars { gap: 8px; flex-wrap: nowrap; }
/* Four plans side by side where there is room. */
.pm-plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pm-scout { border-color: #3fc76a; box-shadow: 0 0 0 1px #3fc76a inset; }
.pm-scout .pm-badge { background: #3fc76a; color: #0c2414; }
.pm-club .pm-price b { font-size: 26px; }

/* ---------- Scouting on the home page ---------- */
body[data-page] #scout-promo { display: none; }
.sx-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: center; margin: 0 0 16px;
  padding: 22px; border-radius: 14px; border: 1px solid #2f8a4e;
  background: radial-gradient(circle at 85% 20%, rgba(63, 199, 106, .16), transparent 55%), linear-gradient(135deg, #10251a, var(--surface-1) 60%); }
:root[data-theme="light"] .sx-promo { background: linear-gradient(135deg, #e6f7ec, #fff 60%); }
.sx-promo h2 { margin: 6px 0 10px; font-size: 28px; line-height: 1.2; color: var(--text-primary); }
.sx-promo p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.sx-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.sx-list li { font-size: 14px; line-height: 1.5; color: var(--text-secondary); padding-left: 22px; position: relative; }
.sx-list li::before { content: "\2713"; position: absolute; left: 0; color: #3fc76a; font-weight: 800; }
.sx-list b { color: var(--text-primary); }
.sx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sx-link { font-weight: 700; color: #3fc76a; }
.sx-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-shots figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg); }
.sx-shots .sx-wide { grid-column: 1 / -1; }
.sx-shots img { aspect-ratio: auto; }
.sx-shots img { display: block; width: 100%; height: auto; }
.sx-shots figcaption { padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.sx-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: center; margin: 0 0 14px;
  padding: 14px; border-radius: 10px; border: 1px solid #2f8a4e; background: linear-gradient(135deg, #10251a, var(--surface-1)); }
:root[data-theme="light"] .sx-strip { background: linear-gradient(135deg, #e6f7ec, #fff); }
.sx-strip b { display: block; color: var(--text-primary); font-size: 14px; }
.sx-strip span { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
@media (max-width: 960px) { .sx-promo { grid-template-columns: 1fr; } .sx-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sx-promo h2 { font-size: 22px; } .sx-strip { grid-template-columns: 1fr; } .sx-shots { grid-template-columns: 1fr; } }

/* ---------- Scout reports ---------- */
.sp-report-form { margin-top: 12px; }
.sp-report-form label:last-child { grid-column: 1 / -1; }
.sp-notes { width: 100%; resize: vertical; font: inherit; }
.sp-reports { display: grid; gap: 10px; margin-top: 14px; }
.sp-rep { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-1); }
.sp-rep p { margin: 6px 0 4px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }
.sp-rep a { font-size: 12px; word-break: break-all; }
.sp-rep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-rep-head .sc-toggle { margin-left: auto; }
.sp-grade { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-weight: 800; color: #fff; }
.sp-grade.gA { background: #1f8a3f; } .sp-grade.gB { background: #2dd4bf; color: #0b2a26; }
.sp-grade.gC { background: #e3b455; color: #3a2a06; } .sp-grade.gD { background: #b33a4c; }
.sp-sim-row select.sp-in { max-width: 190px; }
.sp-sim-row { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }

a.pm-go { display: block; text-align: center; text-decoration: none; }

/* The promotion reads top to bottom: the pitch, then a gallery. */
.sx-promo { grid-template-columns: 1fr; }
.sx-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; align-items: start; }
.sx-copy > .pm-kicker, .sx-copy > h2, .sx-copy > p { grid-column: 1; }
.sx-copy > .sx-list { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
.sx-copy > .sx-cta { grid-column: 1; }
.sx-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; }
.sx-shots figure { display: flex; flex-direction: column; min-height: 0; }
.sx-shots figure a { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sx-shots img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .25s ease; }
.sx-shots figure:hover img { transform: scale(1.03); }
.sx-shots .sx-wide { grid-column: span 2; grid-row: span 2; }
@media (max-width: 960px) {
  .sx-copy { grid-template-columns: 1fr; }
  .sx-copy > .sx-list, .sx-copy > .sx-cta { grid-column: 1; grid-row: auto; }
  .sx-shots { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
}
@media (max-width: 560px) {
  .sx-shots { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .sx-shots .sx-wide { grid-column: auto; grid-row: span 2; }
}
/* Physical testing: the named wheel, then every test listed in thin ruled
   rows, as aiLab lists its protocol - one card across the row, no gap. */
.sx-phys { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 30px; align-items: center; margin: 12px 0 0;
  padding: 18px 28px 22px 18px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: linear-gradient(120deg, #281a42 0%, var(--bg) 60%); }
.sx-phys-shot { display: block; border-radius: 12px; overflow: hidden; }
.sx-phys-shot img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.sx-phys-shot:hover img { transform: scale(1.03); }
.sx-phys-body h4 { margin: 0 0 6px; font-size: 22px; color: var(--text-primary); }
.sx-phys-body > p { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; max-width: 72ch; }
.sx-phys-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 22px; }
.sx-phys-list div { display: flex; flex-direction: column; min-width: 0; }
.sx-phys-list b { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px;
  border-bottom: 2px solid currentColor; white-space: nowrap; }
.sx-phys-list b.c0 { color: #2dd4bf; } .sx-phys-list b.c1 { color: #e3b455; } .sx-phys-list b.c2 { color: #a78bfa; }
.sx-phys-list b.c3 { color: #60a5fa; } .sx-phys-list b.c4 { color: #3fc76a; }
.sx-phys-list span { padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: 13px; }
:root[data-theme="light"] .sx-phys { background: linear-gradient(120deg, #efe9fb 0%, #fff 60%); }
@media (max-width: 1180px) { .sx-phys-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sx-phys { grid-template-columns: 1fr; padding: 14px; }
  .sx-phys-shot { width: min(100%, 360px); margin: 0 auto; } }
@media (max-width: 560px) { .sx-phys-list { grid-template-columns: 1fr 1fr; } .sx-phys-list b { white-space: normal; } .sx-phys-body h4 { font-size: 19px; } }

/* The installed app (the Play Store package, or "source=app"): store rules
   allow no payment other than the store's own, so no plan is sold here. A
   member who bought on the website signs in and has it. */
.pm-app-note { display: none; }
.mb-app .pm-app-note { display: block; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-2, inherit); }
.mb-app .pm-plan .pm-go, .mb-app .pm-lock .pm-cta, .mb-app .pm-fine { display: none; }

/* The moderator's desk under the plans: who clicked to pay, and the switch. */
.pm-admin { margin-top: 18px; padding: 16px; border: 1px dashed #e3b455; border-radius: 12px; }
.pm-admin[hidden] { display: none; }
.pm-admin h3 { margin: 0 0 6px; }
.pm-admin-help, .pm-admin-note { margin: 0 0 10px; font-size: 14px; }
.pm-admin-note { color: #e3b455; font-weight: 700; }
.pm-admin-wrap { overflow-x: auto; }
.pm-admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pm-admin-table th, .pm-admin-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.pm-admin-go { padding: 6px 10px; border: 0; border-radius: 6px; cursor: pointer; background: #e3b455; color: #1c1130; font-weight: 800; }
.pm-admin-go:disabled { opacity: .6; cursor: default; }

/* PayPal's own buttons (PayPal, and Debit or Credit Card), under the plan. */
.pm-paybox { margin-top: 12px; padding: 12px; border-radius: 10px; background: #fff; color: #1c1130; }
.pm-paybox-note { margin: 0 0 10px; font-size: 14px; }
.mb-app .pm-paybox { display: none; }

/* My account and, for moderators, Members. */
button.auth-name { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.au-card.ac-wide { max-width: 1100px; }
.au-card h4 { margin: 18px 0 6px; font-size: 15px; font-weight: 800; }
.ac-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; font-size: 14px; }
.ac-row > span { min-width: 120px; color: var(--text-secondary, inherit); }
.ac-row .au-link { margin-left: 4px; }
.au-field select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; }
.ac-sum { margin: 0 0 10px; font-weight: 700; }
.ac-search { width: 100%; max-width: 420px; margin: 0 0 10px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; }
.pm-admin-table td.ac-ok { color: #3ecf8e; white-space: normal; min-width: 160px; }
.pm-admin-table td.ac-warn { color: #e3b455; white-space: normal; min-width: 160px; }
.pm-admin-table select { margin-right: 6px; padding: 5px; border-radius: 6px; background: var(--surface-2); color: inherit; border: 1px solid var(--border); }

/* My account: a menu at the side, the chosen part beside it; on a phone
   the menu becomes a row of tabs that scrolls sideways. */
.au-card.ac-dash { max-width: 980px; padding: 20px; }
.ac-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
.ac-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 18px 0 0; border-right: 1px solid var(--border); }
.ac-hello { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--border); min-width: 0; }
.ac-hello small { display: block; color: var(--text-muted); font-size: 12px; }
.ac-hello b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
  background: var(--series-home-soft); color: var(--hl-ink); border: 2px solid var(--series-home); font: 800 18px var(--sans); }
.ac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ac-tab { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary);
  font: 700 14px var(--sans); text-align: start; text-decoration: none; cursor: pointer; }
.ac-tab:hover { background: var(--surface-3); color: var(--text-primary); }
.ac-tab[aria-current="page"] { background: var(--series-home-soft); color: var(--hl-ink); box-shadow: inset 3px 0 0 var(--series-home); }
.ac-nav .ac-out { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 14px; }
.ac-main { min-width: 0; }
.ac-main > h4:first-child { margin-top: 0; font-size: 18px; }
.ac-main .au-primary { width: auto; display: inline-block; padding: 11px 22px; }
.ac-main .au-field textarea { 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; resize: vertical; }
.ac-main .au-field input[type=file] { padding: 8px; }
.ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ac-grid[hidden] { display: none; }
.ac-progress { margin: 14px 0; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.ac-progress .pl-bar { display: block; height: 8px; margin-top: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ac-progress .pl-bar i { display: block; height: 100%; background: var(--series-home); }
.ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.ac-card { padding: 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: inherit;
  font-family: var(--sans); text-align: start; cursor: pointer; }
.ac-card:hover { border-color: var(--series-home); }
.ac-card b { display: block; margin-bottom: 4px; font-size: 14px; }
.ac-card small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.ac-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 16px; }
.ac-file { position: relative; overflow: hidden; }
.ac-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ac-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 8px; }
.ac-toptabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ac-toptabs .ac-tab { width: auto; border: 1px solid var(--border); }
.ac-member { display: flex; align-items: center; gap: 10px; min-width: 220px; white-space: normal; }
.ac-member small { color: var(--text-muted); }
.pm-admin-table td.ac-msg { white-space: pre-wrap; min-width: 220px; max-width: 420px; }
.pm-admin-table tr.ac-done { opacity: .55; }
.ac-shot { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; }
.au-forgot { display: block; margin-top: 8px; }
.au-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 720px) {
  .ac-layout { grid-template-columns: 1fr; gap: 14px; }
  .ac-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .ac-hello { display: none; }
  .ac-tab { width: auto; flex: none; white-space: nowrap; border: 1px solid var(--border); }
  .ac-tab[aria-current="page"] { box-shadow: none; }
  .ac-nav .ac-out { margin-top: 0; border-top: 1px solid var(--border); border-radius: 6px; padding-top: 10px; }
  .ac-grid { grid-template-columns: 1fr; }
}

/* The human check: at the door, on the sign-up form, before a comment. */
.hu-gate { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(14, 7, 28, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .35s; }
.hu-gate.is-gone { opacity: 0; pointer-events: none; }
html.hu-locked { overflow: hidden; }
.hu-card { width: 100%; max-width: 420px; padding: 26px 24px; border-radius: 12px; text-align: center; font-family: var(--sans);
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong); border-top: 4px solid var(--series-home);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.hu-brand { margin: 0 0 6px; color: var(--series-home); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.hu-card h2 { margin: 0 0 8px; font-size: 20px; }
.hu-why { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.hu-check { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 12px; }
.hu-hold { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-primary); font: 700 14px var(--sans);
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
.hu-hold:hover { border-color: var(--series-home); }
.hu-ring { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface-3); overflow: hidden; }
.hu-ring i { position: absolute; inset: 0; border-radius: 50%; background: var(--series-home); transform: scale(0); }
.hu-hold.is-holding .hu-ring i { transform: scale(1); transition: transform 1.1s linear; }
.hu-hold.is-done { border-color: var(--good, #3ecf8e); cursor: default; }
.hu-hold.is-done .hu-ring i { transform: scale(1); background: var(--good, #3ecf8e); }
.hu-msg { min-height: 1em; margin: 0; font-size: 12px; color: var(--text-muted); }
.hu-msg:empty { display: none; }
.cm-human, .au-human { margin: 8px 0; }
.au-human .hu-check, .cm-human .hu-check { align-items: flex-start; }

/* Language: a flag and code in the header, the eight languages under it. */
.lang { position: relative; display: inline-flex; align-items: center; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,.2));
  background: transparent; color: var(--chrome-text, inherit); font: 700 12px var(--sans, sans-serif); cursor: pointer; }
.lang-flag { display: inline-flex; width: 22px; height: 15px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; min-width: 170px; padding: 6px; border-radius: 10px;
  background: var(--surface-1, #1c1130); border: 1px solid var(--border, rgba(255,255,255,.2)); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.lang-menu[hidden] { display: none; }
.lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-primary, inherit); font: 600 14px var(--sans, sans-serif); cursor: pointer; text-align: start; }
.lang-item:hover, .lang-item:focus-visible { background: var(--surface-3, rgba(255,255,255,.08)); }
.lang-item.is-on { color: #e3b455; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* The installed app is a football analytics app: no ticket builder, no
   stakes, nothing that builds a bet. */
.mb-app #parlay-panel, .mb-app .parlay-add, .mb-app .pm-parlay-item { display: none !important; }
.mb-app .track-record { display: none !important; }

/* Player pages (players/). */
.pl-head { display: flex; align-items: center; gap: 16px; }
.pl-head h1 { margin: 0; }
.pl-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 3px solid #3ecf8e; }
.pl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.pl-facts dt { color: #e3b455; font-weight: 700; }
.pl-facts dd { margin: 0; }
.pl-bars { list-style: none; padding: 0; margin: 0; }
.pl-bars li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 48px minmax(80px, 110px); gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.pl-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e3b455, #3ecf8e); }
.pl-bars small { color: var(--text-muted); }
.pv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-table th, .pv-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.pv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-list { columns: 3 180px; padding-left: 18px; }
.pl-list li { margin: 2px 0; }
@media (max-width: 600px) { .pl-bars li { grid-template-columns: 1fr 48px; } .pl-bars .pl-bar, .pl-bars small { grid-column: 1 / -1; } }

/* Match previews: the difference-maker picked by Moneyball Scout. */
.pv-key { border-color: var(--series-home); }
.pv-key-who { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.pv-key-who img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 2px solid var(--series-home); }
.pv-scout { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-weight: 700; }

/* Scouting: positions on a pitch, roles in stars, destinations, Club Mode. */
.sp-cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sp-cardhead h3 { margin: 0; }
.sp-dest { width: auto; max-width: 100%; }
.sp-dests tr[aria-selected="true"] td { color: var(--series-home); font-weight: 800; }
.sp-dests tr:not(:first-child) { cursor: pointer; }
.sp-dests tr:not(:first-child):hover td { background: var(--surface-3); }
.sp-posgrid { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 18px; align-items: start; }
.sp-posgrid h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.sp-posgrid h4 + * { margin-bottom: 14px; }
.sp-pitch { display: block; width: 100%; height: auto; background: #1d5c34; border-radius: 6px; }
.sp-pitch .pl { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .5; }
.sp-spot circle { stroke: rgba(0, 0, 0, .35); stroke-width: .4; }
.sp-spot text { font: 700 3px var(--sans); fill: #10230f; pointer-events: none; }
.sp-spot.lv0 circle { fill: rgba(255, 255, 255, .12); }
.sp-spot.lv1 circle { fill: #f2c94c; } .sp-spot.lv2 circle { fill: #c9e265; } .sp-spot.lv3 circle { fill: #7fd36b; } .sp-spot.lv4 circle { fill: #2ecc71; }
.sp-spot.lv1 text, .sp-spot.lv2 text { fill: #2d2600; }
.sp-poskey { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); }
.sp-poskey span { display: inline-flex; align-items: center; gap: 5px; }
.sp-poskey i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sp-poskey .lv4 i { background: #2ecc71; } .sp-poskey .lv3 i { background: #7fd36b; } .sp-poskey .lv2 i { background: #c9e265; } .sp-poskey .lv1 i { background: #f2c94c; }
td.sp-lv.lv4, td.sp-lv.lv3 { color: #3ecf8e; font-weight: 700; } td.sp-lv.lv2 { color: #c9e265; } td.sp-lv.lv1 { color: #e3b455; }
.sp-roles { list-style: none; margin: 0 0 10px; padding: 0; }
.sp-roles li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sp-roles small { grid-column: 2; color: var(--text-muted); font-size: 12px; }
.sp-stars { grid-row: span 2; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.sp-stars i { font-style: normal; color: var(--surface-3); }
.sp-stars i.on { color: var(--series-home); }
.sp-stars i.half { background: linear-gradient(90deg, var(--series-home) 50%, var(--surface-3) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-clubnote { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--series-home); background: var(--series-home-soft); color: var(--hl-ink); font-size: 14px; }
.sp-clubnote[hidden] { display: none; }
@media (max-width: 640px) { .sp-posgrid { grid-template-columns: 1fr; } .sp-pitch { max-width: 240px; margin: 0 auto; } }
.sp-clubnote p { margin: 0 0 6px; }
.sp-clubneeds { font-weight: 700; }
.sp-clubctl { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; }
.sp-clubctl .sp-field { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--hl-ink); }
.sp-clubctl select { max-width: 320px; }
.sp-clubhow { font-size: 12px; opacity: .85; }
.sp-why { display: block; margin: 3px 0 0 42px; font-size: 11px; color: var(--good, #3ecf8e); white-space: normal; max-width: 280px; }
.sp-words { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.sp-words input { width: 16px; height: 16px; accent-color: var(--series-home); }
.sp-ringword { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.sp-ringword small { font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--series-home); white-space: nowrap; }
.sp-flag { margin: 0 16px 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e3b455; background: rgba(227, 180, 85, .12); color: #e3b455; font-size: 13px; font-weight: 700; }

/* Home page: Club Mode in the Scouting promotion. */
.sx-club { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px 28px; align-items: start;
  margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }
.sx-club h3 { margin: 6px 0 8px; font-size: 22px; line-height: 1.25; color: var(--text-primary); }
.sx-club p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.sx-club-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.sx-club-list li { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.sx-club-list b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--text-primary); }
@media (max-width: 960px) { .sx-club { grid-template-columns: 1fr; } }
/* Club Mode's picture, whole and at its own size, across the band. */
.sx-club-fig { grid-column: 1 / -1; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg); }
.sx-club-fig img { display: block; width: 100%; height: auto; }
.sx-club-fig figcaption { padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.sx-club-head { grid-column: 1; grid-row: 1; }
.sx-club-list { grid-column: 2; grid-row: 1; }
.sx-club-fig { grid-row: 2; }
@media (max-width: 960px) { .sx-club-head, .sx-club-list, .sx-club-fig { grid-column: 1; grid-row: auto; } }

/* Analysis articles. */
.ar-table td small { color: var(--text-muted); font-size: 12px; }
.ar-table td.ar-why { white-space: normal; text-align: left; font-family: var(--sans); font-size: 12px; color: var(--good, #3ecf8e); min-width: 180px; }
.ar-cta { border-color: var(--series-home); }
/* Six tiles: three across, two across or one - never a gap. */
.sx-club-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-club-go { border-color: var(--series-home) !important; background: var(--series-home-soft) !important; }
.sx-club-go span { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
@media (max-width: 1100px) { .sx-club-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-club-list { grid-template-columns: 1fr; } }
.sx-club-for { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sx-club-for li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 700; color: var(--text-secondary); }

/* Long match previews: the scouting spotlight, the prediction, tips, tags. */
.pv-spot { border-color: var(--series-home); }
.pv-spot-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pv-spot h3 { margin: 4px 0 6px; font-size: 14px; color: var(--text-primary); }
.pv-radar { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.pv-radar .rd-grid polygon, .pv-radar .rd-grid line { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.pv-radar .rd-shape { fill: rgba(227, 180, 85, .28); stroke: var(--series-home); stroke-width: 2; }
.pv-radar .rd-labels text { font: 600 10px var(--sans); fill: var(--text-secondary); }
.pv-radar .rd-labels .rd-v { font-weight: 800; fill: var(--series-home); }
.pv-locked { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--series-home); background: var(--series-home-soft); color: var(--hl-ink); }
.pv-locked ul { margin: 6px 0 10px; padding-left: 18px; }
.pv-locked li::marker { content: "🔒 "; }
.pv-pred { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-3); font-size: 18px; font-weight: 800; color: var(--text-primary); }
.pv-tips { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.pv-tips li { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.pv-tips b { display: block; color: var(--text-primary); }
.pv-tips span { font-size: 13px; color: var(--text-muted); }
.pv-stars { color: var(--series-home); letter-spacing: 1px; }
.pv-tagbox h2 { font-size: 14px; margin: 18px 0 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; border: 0; padding: 0; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.pv-tags li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12px; color: var(--text-secondary); }
@media (max-width: 700px) { .pv-spot-grid { grid-template-columns: 1fr; } }

/* The Moneyball Odds League page: the code people type, large. */
.fpl-code { display: grid; gap: 4px; justify-items: start; margin: 8px 0 18px; padding: 18px 22px; border-radius: 14px;
  background: linear-gradient(135deg, #2b1a4c, #1a1030); border: 1px solid var(--border-strong); }
.fpl-code span { color: var(--text-muted); font-size: 13px; }
.fpl-code b { font: 800 40px/1.1 var(--mono); letter-spacing: .08em; color: #2dd4bf; }
:root[data-theme="light"] .fpl-code { background: linear-gradient(135deg, #efe9fb, #fff); }

/* The cookie notice: one line at the foot of the screen, once. */
.ck-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; max-width: 760px; margin: 0 auto; display: flex;
  align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 12px; background: #1a1030; color: #e8e0ff;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 13px; line-height: 1.45 }
.ck-bar p { margin: 0; flex: 1 }
.ck-bar a { color: #5eead4 }
.ck-ok { flex: none; border: 0; border-radius: 8px; padding: 9px 22px; background: #2dd4bf; color: #0d0819; font-weight: 800; cursor: pointer }
@media (max-width: 560px) { .ck-bar { flex-direction: column; align-items: stretch; text-align: left } }

/* One-season wonder: a hazard sign, yellow and black, that cannot be missed. */
.sp-hazard { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .02em; color: #1a1300; background: #facc15; border: 2px solid #1a1300; cursor: help; white-space: nowrap }
.sp-hazard.is-high { background: repeating-linear-gradient(-45deg, #facc15 0 8px, #fde047 8px 16px); box-shadow: 0 0 0 2px #facc15 }
.sp-hazard-box { color: #1a1300 !important; background: #fde68a !important; border: 0 !important; padding: 12px 14px 12px 18px !important;
  border-left: 10px solid transparent !important; border-image: repeating-linear-gradient(-45deg, #1a1300 0 6px, #facc15 6px 12px) 10 !important; }
.sp-hazard-box b { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px }
.sp-hazard-box ul { margin: 0 0 6px 18px; padding: 0 }
.sp-hazard-box li { font-weight: 600; font-size: 13px }
.sp-hazard-box small { font-weight: 500; font-size: 12px }
.sp-hazard-box.is-high b { color: #9a1c00 }
.sp-f-osw select { border-color: #facc15 }
.sp-caution { margin: 0 16px 10px; padding: 7px 12px; border-radius: 8px; border: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: 12.5px; }

/* The app's floating tab bar (js/i18n.js): four sections under the thumb. */
.ap-tabs { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 950;
  width: min(460px, calc(100% - 28px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px;
  border-radius: 999px; background: rgba(26, 16, 48, .82); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.ap-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px 6px;
  border-radius: 999px; color: #b9addb; text-decoration: none; font-size: 10.5px; font-weight: 600; line-height: 1.1; text-align: center }
.ap-tab svg { width: 22px; height: 22px; fill: currentColor }
.ap-tab.is-on { color: #fff; background: rgba(255, 255, 255, .12) }
.ap-tab.is-on svg { fill: #2dd4bf }
.ap-tab:active { transform: scale(.96) }
.has-tabs body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) }
.has-tabs .ck-bar { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) }
:root[data-theme="light"] .ap-tabs { background: rgba(255, 255, 255, .88); border-color: rgba(0, 0, 0, .1) }
:root[data-theme="light"] .ap-tab { color: #5b5079 }
:root[data-theme="light"] .ap-tab.is-on { color: #1a1030; background: rgba(46, 23, 88, .08) }
:root[data-theme="light"] .ap-tab.is-on svg { fill: #0f9b8e }
/* Google Play: no prices or buy links for the plans inside the app. */
.mb-app .sx-link, .mb-app #sp-plan-link, .mb-app .pv-link[href*="#premium"], .mb-app .sx-club-go { display: none !important; }

/* Stats Centre: a club's page and a player's page (js/stats-centre.js),
   over the page, full screen on a phone. */
.sc-link { color: inherit; text-decoration: none; cursor: pointer }
.sc-link:hover { text-decoration: underline; color: var(--text-primary) }
.sc-sheet { position: fixed; inset: 0; z-index: 940; overflow-y: auto; background: var(--bg); -webkit-overflow-scrolling: touch }
.sc-sheet[hidden] { display: none }
.sc-sheet-open body { overflow: hidden }
.sc-sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--surface-1); border-bottom: 1px solid var(--border) }
.sc-sheet-back { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--surface-3); color: var(--text-primary); font-weight: 700; cursor: pointer }
.sc-sheet-title { font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sc-sheet-body { max-width: 1100px; margin: 0 auto; padding: 18px 16px 120px }
.sc-sheet-head { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--border) }
.sc-sheet-head h2 { margin: 0 0 4px; font-size: 24px; color: var(--text-primary) }
.sc-sheet-head > .sc-crest:last-child { margin-left: auto }
.sc-sheet-h { margin: 22px 0 8px; font-size: 18px; color: var(--text-primary) }
.sc-sheet-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 6px }
.sc-sheet-controls .sc-select { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px }
.sc-total td { border-top: 2px solid var(--border-strong); font-weight: 700 }
.sc-photo { flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-primary); font-size: 34px; font-weight: 800; border: 3px solid var(--series-away) }
.sc-photo img { width: 100%; height: 100%; object-fit: cover }
.sc-facts { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 12px; margin: 6px 0 0; font-size: 14px }
.sc-facts dt { color: var(--text-muted) }
.sc-facts dd { margin: 0; color: var(--text-primary); font-weight: 600 }
.sc-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.sc-trait-col { padding: 12px 14px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--border) }
.sc-trait-col h4 { margin: 0 0 8px; font-size: 16px }
.sc-trait-col.is-plus h4 { color: #3fc76a } .sc-trait-col.is-minus h4 { color: #ef6b6b }
.sc-trait { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-primary) }
.sc-trait b { font-size: 12px; padding: 2px 8px; border-radius: 6px; color: #0d0819 }
.is-plus .sc-trait b { background: #3fc76a } .is-minus .sc-trait b { background: #ef6b6b }
.sc-style { margin: 0; padding-left: 20px; color: var(--text-primary) }
.sc-style li { margin: 4px 0 }
.sc-sheet-go { display: inline-block; margin-top: 20px; padding: 10px 18px; border-radius: 999px; background: #e3b455; color: #1a1030; font-weight: 800; text-decoration: none }
@media (max-width: 640px) {
  .sc-sheet-head { flex-wrap: wrap }
  .sc-facts { grid-template-columns: auto 1fr }
  .sc-traits { grid-template-columns: 1fr }
}
.sc-sheet .sc-table th, .sc-sheet .sc-table td { white-space: nowrap; padding-left: 9px; padding-right: 9px }

/* ---------------------------------------------------------------------------
   Club and player pages, app style: a header in the club's colours with
   Back and Follow, tabs under it, cards below. --tc / --tf are the club's
   colour and the text on it, set per page.
   --------------------------------------------------------------------------- */
.sc-sheet.tp { --tc: #4b2a7b; --tf: #fff; background: var(--bg) }
.has-tabs .sc-sheet.tp { padding-bottom: 80px }
.tp-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top)); background: var(--tc); color: var(--tf) }
.tp-back { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer }
.tp-back:hover, .tp-back:focus-visible { background: rgba(255, 255, 255, .14) }
.tp-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s }
.tp-player .tp-title { opacity: 0 }
.tp-player .tp-bar.is-scrolled .tp-title { opacity: 1 }
.tp-follow { flex: none; min-width: 104px; padding: 9px 18px; border-radius: 999px; border: 2px solid currentColor; background: transparent;
  color: inherit; font-weight: 800; font-size: 15px; cursor: pointer }
.tp-follow[aria-pressed="true"] { background: var(--tf); color: var(--tc); border-color: var(--tf) }
.tp-hero { background: var(--tc); color: var(--tf); padding: 4px 20px 18px }
.tp-ident { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 18px }
.tp-crestbox { flex: none; width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .18) }
.tp-name { margin: 0; font-size: 28px; line-height: 1.15; color: inherit }
.tp-sub { margin: 4px 0 0; opacity: .85; font-size: 15px }
.tp-facebox { position: relative; flex: none }
.tp-facebox .tp-face { border: 3px solid #fff; background: #f1eef6 }
.tp-badge { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) }
.tp-club { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .2); color: inherit; text-decoration: none; font-weight: 700 }
.tp-club .sc-crest { background: #fff; border-radius: 50% }
.tp-nav { position: sticky; top: 62px; z-index: 2; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 12px;
  background: var(--tc); justify-content: safe center }
.tp-nav::-webkit-scrollbar { display: none }
.tp-tab { flex: none; border: 0; background: transparent; color: var(--tf); opacity: .62; font-size: 16px; font-weight: 700; padding: 14px 14px 12px;
  border-bottom: 4px solid transparent; border-radius: 0; cursor: pointer }
.tp-tab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--tf) }
.tp-pane { max-width: 760px; margin: 0 auto; padding: 14px 12px 120px }
.tp-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; padding: 18px; margin-bottom: 14px; overflow: hidden }
.tp-card-h { margin-bottom: 12px }
.tp-card-h h3 { margin: 0; font-size: 18px; color: var(--text-primary) }
.tp-card-h p { margin: 3px 0 0; font-size: 13px; color: var(--text-muted) }
.tp-muted { color: var(--text-muted); font-size: 13px }
.tp-center { text-align: center; margin: 10px 0 0 }
.tp-note { color: var(--text-muted); font-size: 12px; margin: 6px 4px }
.tp-face { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--surface-3); color: var(--text-primary); font-weight: 800; flex: none }
.tp-face img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.tp-rt { display: inline-block; min-width: 38px; padding: 2px 7px; border-radius: 8px; font-weight: 800; font-size: 13px; text-align: center; color: #fff }
.tp-rt.is-hi { background: #1fa45b } .tp-rt.is-mid { background: #e2872a } .tp-rt.is-lo { background: #d8453b }
.tp-rt.is-none { background: var(--surface-3); color: var(--text-muted) }
.tp-more { display: block; width: 100%; margin-top: 10px; padding: 10px; border: 0; border-top: 1px solid var(--border); background: transparent;
  color: #2fa860; font-weight: 800; font-size: 15px; cursor: pointer }
.tp-next { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center }
.tp-next-team { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--text-primary) }
.tp-next-mid b { display: block; font-size: 22px; color: var(--text-primary) }
.tp-next-mid span { font-size: 13px; color: var(--text-muted) }
.tp-form { display: flex; justify-content: space-between; gap: 6px }
.tp-form-item { flex: 1; display: grid; justify-items: center; gap: 8px; text-decoration: none }
.tp-score { display: inline-block; padding: 4px 9px; border-radius: 8px; font-weight: 800; font-size: 14px; color: #fff; background: #8a8a8a; white-space: nowrap }
.tp-score.is-W { background: #1fa45b } .tp-score.is-L { background: #d8453b } .tp-score.is-D { background: #8d8a96 }
.tp-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.tp-diff-item { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; text-decoration: none; color: #fff; font-size: 12px }
.tp-diff-item b { font-size: 12px }
.tp-diff-item.is-1 { background: #1fa45b } .tp-diff-item.is-2 { background: #7cbf4d } .tp-diff-item.is-3 { background: #b2a33a }
.tp-diff-item.is-4 { background: #e2872a } .tp-diff-item.is-5 { background: #d8453b }
.tp-diff-item .sc-crest { background: #fff; border-radius: 50%; padding: 2px }
.tp-pitch { display: grid; gap: 14px; padding: 18px 6px; border-radius: 14px;
  background: repeating-linear-gradient(180deg, #2f7d4a 0 44px, #2b7444 44px 88px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25) }
.tp-pitch-line { display: flex; justify-content: space-around; gap: 4px }
.tp-pl { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 3px; text-decoration: none; color: #fff }
.tp-pl-face { position: relative }
.tp-pl-face .tp-face { border: 2px solid #fff; background: #e9e5ef }
.tp-pl-face .tp-rt { position: absolute; right: -16px; top: -6px; min-width: 0; padding: 1px 5px; font-size: 11px }
.tp-pl-name { font-size: 12px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .5) }
.tp-pl-ga { font-size: 11px; background: rgba(0, 0, 0, .35); border-radius: 6px; padding: 0 5px }
.tp-table-wrap { overflow-x: auto }
.tp-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text-primary) }
.tp-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; padding: 6px 6px; text-align: center }
.tp-table td { padding: 8px 6px; text-align: center; white-space: nowrap; border-top: 1px solid var(--border) }
.tp-table .tp-left { text-align: left }
.tp-table tr.is-me td { background: color-mix(in srgb, var(--tc) 18%, transparent); font-weight: 800 }
.tp-tteam { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap }
.tp-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -6px; padding-left: 6px; padding-right: 6px }
.tp-lead { flex: 0 0 min(280px, 78%); scroll-snap-align: start; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); overflow: hidden }
.tp-lead-top { background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 70%, #fff)); color: var(--tf); padding: 14px 16px 0 }
.tp-lead-cat { display: block; font-size: 17px; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--tf) 40%, transparent) }
.tp-lead-who { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 10px }
.tp-lead-who > div { padding-bottom: 12px; min-width: 0 }
.tp-lead-who .tp-face { background: transparent; border-radius: 0; width: 84px !important; height: 84px !important }
.tp-lead-name { display: block; color: inherit !important; font-size: 18px; line-height: 1.2 }
.tp-lead-val { display: block; font-size: 32px; margin-top: 4px }
.tp-lead-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--border); color: var(--text-primary) }
.tp-lead-row a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; text-align: center }
.tp-tiles-4 { grid-template-columns: repeat(4, 1fr) }
.tp-tiles b { display: block; font-size: 20px; color: var(--text-primary); font-weight: 600 }
.tp-tiles span:not(.tp-rt) { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px }
.tp-tiles .tp-rt { font-size: 17px; padding: 3px 9px }
.tp-list-row { display: flex; align-items: center; gap: 14px; padding: 8px 0 }
.tp-list-row > div { flex: 1; display: grid }
.tp-list-row b { color: var(--text-primary); font-weight: 600 }
.tp-lg-dot { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-primary); font-weight: 800 }
.tp-match { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-primary) }
.tp-match:first-of-type { border-top: 0 }
.tp-match-when { flex: none; width: 74px; display: grid; font-size: 12px }
.tp-match-when span { color: var(--text-muted) }
.tp-match-teams { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.tp-match-side { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.tp-match-lg { flex: none; max-width: 110px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tp-vs { color: var(--text-muted); font-size: 12px }
.tp-chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none }
.tp-chips button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); font-weight: 700; cursor: pointer }
.tp-chips button[aria-pressed="true"] { background: var(--tc); color: var(--tf); border-color: var(--tc) }
.tp-squad { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-primary) }
.tp-card-h + .tp-squad { border-top: 0 }
.tp-squad > div { flex: 1; min-width: 0; display: grid }
.tp-squad > div b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tp-squad-nums { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted) }
.tp-squad-nums b { color: var(--text-primary) }
.tp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border) }
.tp-facts b { display: block; font-size: 19px; font-weight: 600; color: var(--text-primary) }
.tp-facts span { font-size: 13px; color: var(--text-muted) }
.tp-season { margin: 16px 0 14px; text-align: center; font-size: 17px; color: var(--text-primary) }
.tp-radar-box { display: grid; place-items: center }
.tp-radar { width: 100%; max-width: 420px; height: auto; overflow: visible }
.tp-radar-ring { fill: none; stroke: var(--border-strong); stroke-width: 1 }
.tp-radar-me { fill: color-mix(in srgb, var(--tc) 75%, transparent); stroke: var(--tc); stroke-width: 2 }
:root:not([data-theme="light"]) .tp-radar-me { fill: color-mix(in srgb, var(--tc) 70%, #fff 10%) }
.tp-radar-l { fill: var(--text-primary); font-size: 13px }
.tp-radar-v { fill: var(--text-muted); font-size: 12px }
.tp-pos { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; align-items: start }
.tp-pos > div:first-child { display: grid; gap: 4px }
.tp-pos-k { color: var(--tc); font-size: 13px; font-weight: 700 }
:root:not([data-theme="light"]) .tp-pos-k { color: var(--series-away) }
.tp-pos b { color: var(--text-primary); font-weight: 600; font-size: 17px }
.tp-mini-pitch { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; background: var(--surface-3);
  background-image: linear-gradient(var(--border-strong), var(--border-strong)); background-size: 100% 2px; background-position: center; background-repeat: no-repeat }
.tp-spot { position: absolute; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: color-mix(in srgb, var(--text-muted) 35%, transparent); color: var(--surface-1) }
.tp-spot.is-main { background: var(--tc); color: var(--tf); font-size: 13px; padding: 5px 11px; z-index: 1 }
.tp-go { display: block; text-align: center; margin: 4px 0 10px; padding: 13px 18px; border-radius: 999px; background: var(--tc); color: var(--tf); font-weight: 800; text-decoration: none }
.tp-compsel { position: sticky; top: 112px; z-index: 1; margin: -14px -12px 14px; padding: 10px 14px; background: var(--surface-1); border-bottom: 1px solid var(--border) }
.tp-select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); font-size: 16px; font-weight: 700 }
.tp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--surface-3); margin-bottom: 14px }
.tp-seg button { border: 0; border-radius: 999px; padding: 9px; background: transparent; color: var(--text-primary); font-weight: 700; cursor: pointer }
.tp-seg button[aria-pressed="true"] { background: var(--surface-1); box-shadow: 0 1px 3px rgba(0, 0, 0, .2) }
.tp-stat-gh { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 4px }
.tp-stat-gh h4 { margin: 0; font-size: 16px; color: var(--text-primary) }
.tp-stat { display: grid; grid-template-columns: 1fr auto 38%; gap: 12px; align-items: center; padding: 9px 0; font-size: 15px; color: var(--text-primary) }
.tp-stat-v { font-weight: 600; text-align: right; padding-right: 12px; border-right: 1px solid var(--border) }
.tp-meter { display: block; height: 11px; border-radius: 999px; background: var(--surface-3); overflow: hidden }
.tp-meter i { display: block; height: 100%; border-radius: 999px; background: var(--text-muted) }
.tp-meter.is-hi i { background: #4cc46e } .tp-meter.is-mid i { background: #ee9a45 } .tp-meter.is-lo i { background: #d8453b }
.tp-car { display: grid; grid-template-columns: 36px 1fr repeat(4, 44px); gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--text-primary) }
.tp-car.is-team { grid-template-columns: 36px 1fr repeat(2, 52px) }
.tp-car > div { display: grid; min-width: 0 }
.tp-car > div b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tp-car-h { border-top: 0; padding-top: 0; color: var(--text-muted); font-size: 12px }
.tp-car-n { text-align: center }
.tp-card .sc-traits { margin-top: 0 }
@media (max-width: 480px) {
  .tp-name { font-size: 24px }
  .tp-tab { font-size: 15px; padding: 13px 10px 11px }
  .tp-match-lg { display: none }
  .tp-sm-hide { display: none }
  .tp-tteam a, .tp-tteam b { max-width: 150px; overflow: hidden; text-overflow: ellipsis }
  .tp-car { grid-template-columns: 32px 1fr repeat(4, 36px); gap: 6px }
  .tp-stat { font-size: 14px; grid-template-columns: 1fr auto 32% }
}
.tp-card .sp-metrics { font-size: 14px; color: var(--text-primary) }
.tp-card .sp-metrics td { padding: 8px 4px }
.tp-card .sp-pct { min-width: 78px; text-align: center; font-weight: 700 }
.tp-pizza text { font-size: 15px }
.tp-card .sp-posgrid h4 { margin-top: 4px }
.tp-card .sp-roles b { color: var(--text-primary) }

/* ---------------------------------------------------------------------------
   The app's first launch: the motto, then three quick steps.
   --------------------------------------------------------------------------- */
html.ob-open, html.ob-open body { overflow: hidden }
.ob { position: fixed; inset: 0; z-index: 2000; background: #120822; color: #f6f1ff; display: flex; flex-direction: column;
  transition: opacity .35s, transform .35s; font-family: var(--sans) }
.ob.is-gone { opacity: 0; transform: scale(1.03); pointer-events: none }
.ob-welcome { position: relative; flex: 1; overflow: hidden; display: flex; align-items: flex-end }
.ob-stripes { position: absolute; inset: -20% -40% 30% -40%; transform: rotate(-24deg);
  background: repeating-linear-gradient(90deg, #e3b455 0 46px, transparent 46px 70px, #7c4dff 70px 116px, transparent 116px 140px,
    #2ecc71 140px 186px, transparent 186px 210px, #a78bfa 210px 256px, transparent 256px 280px);
  opacity: .9; animation: ob-slide 18s linear infinite }
.ob-stripes::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 8, 34, 0) 30%, #120822 92%) }
@keyframes ob-slide { from { background-position: 0 0 } to { background-position: 560px 0 } }
@media (prefers-reduced-motion: reduce) { .ob-stripes { animation: none } }
.ob-inner { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 24px max(28px, env(safe-area-inset-bottom)) }
.ob-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px }
.ob-brand img { width: 54px; height: 54px; object-fit: contain }
.ob-brand b { display: block; font-size: 20px; letter-spacing: .04em }
.ob-brand span { font-size: 11px; letter-spacing: .14em; color: #b7a3d8 }
.ob-motto { margin: 0 0 12px; font-size: clamp(38px, 11vw, 56px); line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em }
.ob-lead { margin: 0 0 26px; font-size: 16px; line-height: 1.5; color: #d6c8f0 }
.ob-start { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 20px; border: 0; border-radius: 999px;
  background: #fff; color: #120822; font-size: 18px; font-weight: 800; cursor: pointer }
.ob-start svg { width: 22px; height: 22px; fill: currentColor }
.ob-already { text-align: center; margin: 18px 0 4px; color: #b7a3d8 }
.ob-link { border: 0; background: none; color: #fff; font-weight: 800; font-size: inherit; cursor: pointer; text-decoration: underline; padding: 4px }
.ob-skip { display: block; margin: 0 auto; color: #b7a3d8; font-weight: 600; text-decoration: none }
.ob-page { flex: 1; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column;
  padding: max(22px, env(safe-area-inset-top)) 18px 0 }
.ob-page h2 { margin: 6px 0 14px; font-size: 30px; font-weight: 900 }
.ob-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: #241540; border: 1px solid #3b2a58 }
.ob-search svg { width: 20px; height: 20px; fill: #9d8cc0; flex: none }
.ob-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 16px; outline: none }
.ob-hint { margin: 12px 2px; color: #b7a3d8; font-size: 14px; line-height: 1.45 }
.ob-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; -webkit-overflow-scrolling: touch }
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
@media (min-width: 560px) { .ob-grid { grid-template-columns: repeat(4, 1fr) } }
.ob-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 6px 12px; border-radius: 16px;
  border: 2px solid transparent; background: #1f1435; color: #f6f1ff; cursor: pointer; text-align: center; min-height: 128px }
.ob-card[aria-pressed="true"] { border-color: #2ecc71; background: #183324 }
.ob-crest, .ob-face { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  color: #120822; font-weight: 900; font-size: 22px }
.ob-crest img { width: 78%; height: 78%; object-fit: contain }
.ob-face { background: #e9e5ef; overflow: visible }
.ob-face > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top }
.ob-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain }
.ob-name { font-size: 13px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.ob-sub { font-size: 11px; color: #9d8cc0; line-height: 1.2 }
.ob-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #56407a }
.ob-card[aria-pressed="true"] .ob-check, .ob-row[aria-pressed="true"] .ob-tick { background: #2ecc71; border-color: #2ecc71 }
.ob-card[aria-pressed="true"] .ob-check::after, .ob-row[aria-pressed="true"] .ob-tick::after { content: '\2713'; display: grid; place-items: center;
  height: 100%; color: #08210f; font-size: 12px; font-weight: 900; font-style: normal }
.ob-empty { grid-column: 1 / -1; text-align: center; color: #9d8cc0; padding: 30px 0 }
.ob-list { display: grid; gap: 10px }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 2px solid transparent;
  background: #1f1435; color: #f6f1ff; text-align: left; cursor: pointer }
.ob-row[aria-pressed="true"] { border-color: #2ecc71; background: #183324 }
.ob-row b { display: block; font-size: 16px }
.ob-row small { color: #9d8cc0 }
.ob-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #56407a }
.ob-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px 0 max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #2e1d4a }
.ob-ghost { justify-self: start; border: 0; background: none; color: #d6c8f0; font-size: 16px; font-weight: 700; padding: 12px 6px; cursor: pointer }
.ob-next { justify-self: end; border: 0; border-radius: 999px; padding: 13px 30px; background: #fff; color: #120822; font-size: 16px; font-weight: 800; cursor: pointer }
.ob-dots { display: flex; gap: 6px }
.ob-dots span { width: 8px; height: 8px; border-radius: 999px; background: #3b2a58; transition: width .2s }
.ob-dots span.on { width: 22px; background: #e3b455 }
.tp-following { margin: 0 0 14px }
.tp-following[hidden] { display: none }
.tp-following-h { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px }
.tp-following-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px }
.tp-following-row::-webkit-scrollbar { display: none }
.tp-fchip { flex: none; width: 70px; display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; background: var(--surface-1);
  border: 1px solid var(--border); text-decoration: none; color: var(--text-primary); font-size: 12px; font-weight: 700 }
.tp-fchip span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tp-fchip .sc-crest { background: #fff; border-radius: 50% }

/* News without the publisher's picture: the player it is about, on his
   club's colours. In the app, every small story leads with its picture,
   as a football app lists them. */
.news-shot.has-player { background: radial-gradient(120% 100% at 70% 100%, color-mix(in srgb, var(--np) 70%, #fff 12%), var(--np) 55%, color-mix(in srgb, var(--np) 60%, #000) 100%) }
.news-shot.has-player .news-shot-fallback { display: none }
.news-shot .news-player { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 92%; width: auto; max-width: none; object-fit: contain; z-index: 1 }
.news-shot .news-player-crest { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; z-index: 2 }
.mb-app .nw-row, .mb-app .nw-list .nw-row { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
.mb-app .nw-row .nw-num { display: none }
.mb-app .nw-row .nw-thumb { order: -1; width: 132px; aspect-ratio: 16 / 10; border-radius: 12px }
.mb-app .nw-row h4 { font-size: 15px; font-weight: 600 }
.news-shot.has-club { background: radial-gradient(110% 90% at 50% 40%, color-mix(in srgb, var(--np) 80%, #fff 15%), var(--np) 60%, color-mix(in srgb, var(--np) 55%, #000) 100%) }
.news-shot.has-club .news-shot-fallback .crest { background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3) }
.news-shot.has-club .news-shot-fallback { opacity: 1 }
.tp-table td.tp-pts { font-weight: 800 }
.tp-lastm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; font-weight: 700; color: var(--text-primary) }

/* Club and player pages on a laptop: the width of the screen, two columns
   (main cards left, line-up and table right), the header laid out like a
   football site's. On a phone the columns melt into one list, in order. */
.tp-2col { display: flex; flex-direction: column }
.tp-2col > .tp-col { display: contents }
@media (min-width: 1000px) {
  .tp-pane { max-width: 1360px; padding: 20px 28px 80px }
  .tp-2col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 18px; align-items: start }
  .tp-2col > :not(.tp-col) { grid-column: 1 / -1 }
  .tp-2col > .tp-col { display: flex; flex-direction: column }
  .tp-hero { padding: 6px 28px 22px }
  .tp-ident { max-width: 1304px }
  .tp-crestbox { width: 104px; height: 104px }
  .tp-name { font-size: 36px }
  .tp-nav { justify-content: flex-start; padding: 0 calc(max(28px, (100% - 1304px) / 2)) }
  .tp-bar { padding-left: calc(max(16px, (100% - 1360px) / 2)); padding-right: calc(max(16px, (100% - 1360px) / 2)) }
  .tp-compsel { margin: -20px -28px 18px; padding: 12px 28px }
  .tp-compsel .tp-select { max-width: 420px }
  .tp-lead { flex-basis: calc((100% - 24px) / 3) }
  .tp-scroll { overflow-x: visible; flex-wrap: wrap }
  .tp-car, .tp-match { font-size: 15px }
}
/* The whole width of a laptop screen: no empty margins either side. */
@media (min-width: 1000px) {
  .tp-pane { max-width: none; padding: 22px 32px 80px }
  .tp-ident { max-width: none }
  .tp-hero { padding: 6px 32px 22px }
  .tp-nav { padding: 0 32px }
  .tp-bar { padding-left: 24px; padding-right: 32px }
  .tp-compsel { margin: -22px -32px 18px; padding: 12px 32px }
  .sc-sheet.tp .sc-sheet-h:first-child { margin-top: 0 }
}
@media (min-width: 1400px) {
  .tp-2col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) }
  .tp-split > .tp-col-main { display: block; column-count: 2; column-gap: 18px }
  .tp-split > .tp-col-main > * { break-inside: avoid; display: block }
  .tp-split > .tp-col-main > .tp-card { display: block; width: 100% }
  .tp-groups { column-count: 2; column-gap: 36px }
  .tp-group { break-inside: avoid }
  .tp-lead { flex-basis: calc((100% - 12px) / 2) }
}
/* The statistics view of a club inside the page: the boards three across. */
.tp-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.tp-board { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface-1) }
.tp-board h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary) }
.tp-board-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 14px }
.tp-board-row a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tp-form-tiles { grid-template-columns: repeat(7, 1fr); margin: 6px 0 12px }
@media (max-width: 560px) { .tp-form-tiles { grid-template-columns: repeat(4, 1fr) } }
.tp-about { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.6; font-size: 15px }
.sc-sheet.tp-nonav .tp-nav { display: none }
.tp-about-body { max-height: 230px; overflow: hidden; position: relative }
.tp-about-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--surface-1)) }
.tp-card.is-open .tp-about-body { max-height: none }
.tp-card.is-open .tp-about-body::after { display: none }
.tp-about-list { margin: 0 0 10px; padding-left: 20px; color: var(--text-secondary); line-height: 1.7; font-size: 14px }
.tp-about-link { color: #2fa860; text-decoration: none; font-weight: 600 }
.tp-about-link:hover { text-decoration: underline }
@media (min-width: 1000px) {
  .tp-all { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) }
  .tp-all .tp-compsel { position: static; margin: 0 0 14px; padding: 0; background: none; border: 0 }
}