/* BetterDraft design, with the Matchday font (Archivo; wide, bold capitals for headings).
   Light (the default): white cards, deep purple header and buttons, bright green accents.
   Dark (the header theme menu): neutral greys, like Discord's Ash theme, with the same green accents.
   Dark purple (third option in the menu): "Grape and mint", matching the landing page. */
:root {
  --bg: #f4f2f6;
  --card: #ffffff;
  --card-2: #f8f6fa; /* slightly sunken panels inside cards */
  --text: #1d0221;
  --muted: #6b5a72;
  --line: #e6e0eb;
  --accent: #37003c; /* deep purple: buttons, active tabs */
  --accent-strong: #37003c;
  --accent-text: #ffffff;
  --brand: #00ff85; /* bright green: logo and small highlights on purple */
  --cyan: #0aa5c2;
  --highlight: #e3fbef;
  --row-hover: #f7f3f9;
  --drop: #fde8ef;
  --good: #00a35c;
  --bad: #e0004d;
  --doubt: #e08a00;
  --header-bg: #37003c;
  --header-text: #ffffff;
  --shadow: 0 1px 2px rgba(55, 0, 60, 0.05), 0 8px 24px -14px rgba(55, 0, 60, 0.25);
  /* fixture colours, 1 = hard ... 5 = easy */
  --c1: #b8101c; --c2: #e5393a; --c3: #ece8ef; --c4: #a6f0c9; --c5: #00a85a;
  --c2-text: #ffffff;
  --c-text-strong: #ffffff; --c-text: #1d0221;
  --display: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #2b2d31;
  --card: #313338;
  --card-2: #2b2d31; /* slightly sunken panels inside cards (darker on some tabs: see "Darker inner boxes") */
  --text: #f2f3f5;
  --muted: #b5bac1;
  --line: #3f4147;
  --accent: #2be38f;
  --accent-strong: #2be38f;
  --accent-text: #0b1f14;
  --brand: #2be38f;
  --cyan: #39d3f5;
  --highlight: rgba(43, 227, 143, 0.1);
  --row-hover: #393c41;
  --drop: rgba(255, 107, 138, 0.12);
  --good: #2be38f;
  --bad: #ff6b8a;
  --doubt: #f5b43c;
  --header-bg: #1e1f22;
  --header-text: #f2f3f5;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
  --c1: #c8102e; --c2: #8f1d25; --c3: #3f4147; --c4: #1f6b4c; --c5: #1fae6c;
  --c2-text: #ffffff;
  --c-text-strong: #ffffff; --c-text: #f2f3f5;
  color-scheme: dark;
}
:root[data-theme="dark"][data-dark="purple"] {
  --bg: #1a0628;
  --card: #26103a;
  --card-2: #200b32; /* slightly sunken panels inside cards (darker on some tabs: see "Darker inner boxes") */
  --text: #fbf5ff;
  --muted: #bba6cf;
  --line: #3a2052;
  --accent: #2be38f; /* mint: buttons, active tabs, good news */
  --accent-strong: #2be38f;
  --accent-text: #0b1f14;
  --brand: #2be38f;
  --cyan: #39d3f5; /* highlight colour for headline phrases */
  --highlight: rgba(43, 227, 143, 0.1);
  --row-hover: #2f1646;
  --drop: rgba(255, 107, 138, 0.12);
  --good: #2be38f;
  --bad: #ff6b8a;
  --doubt: #f5b43c;
  --header-bg: #12041d;
  --header-text: #fbf5ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.8);
  /* fixture colours, 1 = hard ... 5 = easy */
  --c1: #c8102e; --c2: #8f1d25; --c3: #3a2052; --c4: #1f6b4c; --c5: #1fae6c;
  --c2-text: #ffffff;
  --c-text-strong: #ffffff; --c-text: #fbf5ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--display);
  font-feature-settings: "tnum" 1; /* even-width numbers line up in tables */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }
/* Matchday headings: wide, bold capitals */
.league-bar h2, .card h3, .card-head h3, .live-score, .verdict-nums strong, .stat strong {
  font-family: var(--display); font-weight: 800; font-stretch: 115%;
}
.league-bar h2, .card h3, .card-head h3 { text-transform: uppercase; }
.card h3 { font-size: 15px; letter-spacing: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* club shirts beside names */
svg.kit { width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.news-head strong svg.kit { width: 20px; height: 20px; }

/* header */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding: 10px max(16px, calc((100vw - 1400px) / 2 + 16px));
  background: var(--header-bg);
  color: var(--header-text);
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 800; color: inherit; text-decoration: none; margin-right: auto; }
.brand svg { width: 30px; height: 30px; flex: none; color: var(--brand); }
.brand .better { color: var(--brand); }
/* light/dark switch in the header */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.beta { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid currentColor; opacity: 0.7; }
header form { display: flex; gap: 6px; align-items: center; }
header form label { font-size: 12px; opacity: 0.7; }
header input, header button { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: inherit; }
header input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input, select, button {
  font: inherit;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}
#league-id { width: 96px; }
button { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
button:hover { border-color: var(--muted); }

main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 40px; }
.status { font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.soon { color: var(--doubt); font-weight: 600; }

/* league summary */
.league-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 14px;
}
.league-bar h2 { margin: 0 0 4px; font-size: 26px; font-weight: 800; }
.league-bar p { margin: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; }
.controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* tabs: stick to the top while scrolling */
#tabs {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; margin: 0 -16px 16px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
#tabs a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#tabs a:hover { color: var(--text); background: var(--row-hover); }
#tabs a.active { color: var(--accent-text); background: var(--accent); }

.columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .columns { grid-template-columns: minmax(0, 1fr); } }

/* cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  min-width: 0;
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.card-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-head h3 { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-wrap { overflow-x: auto; }
.how { margin-top: 16px; }
.how summary { cursor: pointer; font-weight: 600; }
.how li { margin: 6px 0; }

.pills { display: inline-flex; gap: 2px; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.pills button { padding: 4px 10px; font-size: 12px; font-weight: 600; border: none; background: transparent; color: var(--muted); border-radius: 7px; }
.pills button:hover { color: var(--text); }
.pills button.active { background: var(--accent); color: var(--accent-text); }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 4px; }
th { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; }
th:hover { color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--row-hover); }
.num { text-align: right; }
tr.drop td { background: var(--drop); }
tr.me td { background: var(--highlight); }

/* footer */
.site-footer { max-width: 1400px; margin: 0 auto; padding: 8px 16px 32px; color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }

.chips { white-space: nowrap; }
.chip {
  display: inline-block;
  min-width: 32px;
  margin-right: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  font: 700 11px/1.3 var(--display);
  text-align: center;
  color: var(--c-text);
  cursor: help;
}
.chip.c1 { background: var(--c1); color: var(--c-text-strong); }
.chip.c2 { background: var(--c2); color: var(--c2-text); }
.chip.c3 { background: var(--c3); }
.chip.c4 { background: var(--c4); }
.chip.c5 { background: var(--c5); color: var(--c-text-strong); }
.chip.blank { background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: default; }
#ticker .chip { min-width: 70px; }

.flag {
  display: inline-block;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  text-align: center;
  line-height: 16px;
  cursor: help;
  /* Level with the middle of the player's name: overflow fixes the icon's baseline at its bottom edge. */
  overflow: hidden;
  vertical-align: -3px;
}
.flag.doubt { background: var(--doubt); }
.flag.out { background: var(--bad); }
/* Rows laid out with flex ignore vertical-align, so these get the same small lift. */
.sqp-name .flag, .tr-row .flag { position: relative; top: -1px; }
/* Planner: its name cell flattens spans, which squashed the icon to a sliver. */
.pp-who > .flag { display: inline-block; line-height: 16px; }

.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.tag.xi { background: var(--accent); color: var(--accent-text); }
.tag.free { background: var(--c4); color: var(--c-text); }
.tag.mine { background: var(--highlight); border: 1px solid var(--accent); }

.swaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.swaps li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.swap-row { display: flex; gap: 6px; align-items: baseline; grid-column: 1; }
.swap-row .val { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.swap-row.in .sign { color: var(--good); font-weight: 800; }
.swap-row.out .sign { color: var(--bad); font-weight: 800; }
.gain { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; color: var(--good); font-size: 15px; }
.small-chips { grid-column: 1 / -1; margin-top: 4px; }
.small-chips .chip { min-width: 28px; font-size: 10px; }

button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.primary:disabled { opacity: 0.6; cursor: wait; }
button.link { margin-left: auto; padding: 0 4px; border: none; background: none; color: var(--muted); }
button.link:hover { color: var(--bad); }
.tag.proven { background: transparent; border: 1px solid var(--good); color: var(--good); }
.protect { display: block; margin: 4px 0; }
.tag.claim-safe { background: var(--c5); color: #fff; }
.tag.claim-risky { background: var(--doubt); color: #fff; }
.tag.claim-gone { background: var(--c1); color: #fff; }
.claim-line { grid-column: 1 / -1; margin-top: 4px; }
.tag.hot { background: var(--doubt); color: #fff; }
.tag.drop-tag { background: var(--drop); color: var(--bad); }
.gain-inline { color: var(--good); font-weight: 700; }
.plan-summary { font-size: 15px; margin: 4px 0 12px; }
.plan-table td, .plan-table th { padding: 4px 6px; }
.plan-cell { white-space: nowrap; }
.plan-cell .pts { display: inline-block; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.plan-cell.starter { background: var(--highlight); }
.plan-cell.starter .pts { font-weight: 700; }
.plan-cell.bench { opacity: 0.55; }
.plan-cell.away { color: var(--muted); text-align: center; }
.plan-cell .chip { min-width: 30px; font-size: 10px; }
.plan-total td { border-top: 2px solid var(--line); border-bottom: none; }
.add-move-title { margin-top: 16px !important; }
.plan-form { display: flex; flex-direction: column; gap: 8px; }
.plan-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.plan-form select { width: 100%; }

.lineup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.lineup-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pitch {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; margin: 6px 0;
  border-radius: 8px; background: repeating-linear-gradient(0deg, #13221a 0 12.5%, #101d16 12.5% 25%);
}
.lrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
/* names sit on the green pitch in both themes, so their labels are always dark */
.lp { padding: 2px 6px; border-radius: 4px; font-size: 11px; background: rgba(8, 4, 12, 0.85); color: #fbf5ff; border-left: 3px solid #5a4a63; white-space: nowrap; }
.lp b { font-variant-numeric: tabular-nums; }
.lp.sure { border-left-color: var(--c5); }
.lp.likely { border-left-color: var(--doubt); }
.lp.doubt { border-left-color: var(--bad); }
.lp .tag { font-size: 9px; padding: 0 3px; }
.lextra { margin-top: 4px; line-height: 1.6; }

.card.stack { margin-top: 16px; }
.out-text { color: var(--bad); }
.up { color: var(--good); font-size: 10px; }
.down { color: var(--bad); font-size: 10px; }

/* live */
.live-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .live-match { grid-template-columns: 1fr; } }
.live-team table td { padding: 4px 6px; }
.live-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.live-score { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bench-label { padding-top: 10px !important; }
tr.sub-out td { opacity: 0.45; text-decoration: line-through; }
.tag.result-W { background: var(--c5); color: #fff; }
.tag.result-D { background: var(--c3); }
.tag.result-L { background: var(--c1); color: #fff; }

/* trades */
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .trade-sides { grid-template-columns: 1fr; } }
.trade-sides h4 { margin: 8px 0; }
.trade-row { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.trade-row:hover { background: var(--highlight); }
.trade-row.chosen { background: var(--highlight); outline: 1px solid var(--accent); }
.trade-row .val { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.trade-verdict { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; min-height: 40px; }
.trade-verdict p { margin: 6px 0 0; }
.verdict-nums { display: flex; gap: 24px; align-items: end; flex-wrap: wrap; }
.verdict-nums > div { display: flex; flex-direction: column; }
.verdict-nums strong { font-size: 22px; }

/* player names open profiles */
a.pname { color: inherit; font-weight: 700; text-decoration: none; }
a.pname:hover { text-decoration: underline; }
.lp { cursor: pointer; }

.player-dialog {
  width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text);
}
.player-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialog-close { position: sticky; top: 0; float: right; border: none; background: none; font-size: 18px; color: var(--muted); }
.profile-head h2 { margin: 0 0 4px; }
.watch-btn { float: right; margin-right: 28px; font-weight: 600; }
.watch-btn.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.star { color: var(--doubt); margin-right: 3px; }
.watch-table td { padding: 4px; }
.profile-news { margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.profile-news.doubt { background: color-mix(in srgb, var(--doubt) 18%, transparent); }
.profile-news.out { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 14px 0; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; }
.stat strong { font-size: 18px; }
.player-dialog h3 { font-size: 14px; margin: 14px 0 6px; }
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .profile-cols { grid-template-columns: 1fr; } }
.chart-wrap { overflow-x: auto; }
.bar-pos { fill: var(--accent); }
.bar-neg { fill: var(--bad); }
.bar-label { font-size: 10px; text-anchor: middle; fill: var(--text); }
.bar-axis { font-size: 10px; text-anchor: middle; fill: var(--muted); }

.pos-sm { display: none; } /* position shown next to names on phones only */

/* phones */
@media (max-width: 700px) {
  main { padding: 12px 10px 32px; }
  #tabs { margin: 0 -10px 12px; padding: 8px 10px; }
  .brand { font-size: 18px; }
  .brand svg { width: 26px; height: 26px; }
  header form label { display: none; }
  /* header: logo and account on one row, league box full width underneath */
  header { gap: 8px 10px; }
  .account { order: 2; }
  .account-email { display: none; }
  header form { order: 3; width: 100%; }
  header form input { flex: 1; }
  table { font-size: 12.5px; }
  .league-bar h2 { font-size: 21px; }
  td .tag.proven { display: none; } /* still explained on the My team page */
  /* the XI column is hidden on phones: starters get a coloured bar, the bench is faded */
  tr.starter td:first-child { box-shadow: inset 3px 0 var(--accent); }
  tr.benched td { opacity: 0.6; }
  header { padding: 10px 12px; }
  .card { padding: 10px; }
  .league-bar h2 { font-size: 18px; }
  .controls { width: 100%; }
  .controls label { flex: 1; }
  .controls select { width: 100%; }
  .hide-sm { display: none; }
  th, td { padding: 5px 3px; }
  th { font-size: 10px; letter-spacing: 0; }
  /* 3 fixtures instead of 5, and the player column stays put when scrolling sideways */
  td.chips .chip:nth-child(n + 4) { display: none; }
  td.chips .chip { min-width: 24px; margin-right: 1px; padding: 1px 2px; font-size: 10px; }
  .pos-sm { display: inline; font-size: 10px; }
  .table-wrap td:first-child, .table-wrap th:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
  tr.drop td:first-child { background: var(--drop); }
  tr.me td:first-child { background: var(--highlight); }
  .lineup-grid, .news-grid { grid-template-columns: 1fr; }
  #tabs a { padding: 8px 10px; }
}

/* accounts */
.account { display: flex; gap: 8px; align-items: center; }
.account-email { font-size: 13px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.ghost { background: transparent; color: inherit; border-color: currentColor; }
.auth-dialog {
  width: min(380px, calc(100vw - 24px)); padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text);
}
.auth-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.auth-dialog h2 { margin: 0 0 6px; }
.auth-dialog label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.auth-buttons { display: flex; gap: 8px; }
.auth-dialog a { color: inherit; font-weight: 600; }

.own-controls { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.own-controls select { padding: 3px 6px; font-size: 12px; }

.news-card { margin-bottom: 16px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.news-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.news-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.news-hit { color: var(--bad); font-weight: 700; }

.matchup { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.matchup.me { border-color: var(--accent); background: var(--highlight); }
.mrow { display: flex; justify-content: space-between; gap: 8px; }
.bar { height: 6px; border-radius: 3px; background: var(--c1); margin: 4px 0; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--c5); }
.win-pct { color: var(--muted); font-size: 12px; min-width: 34px; display: inline-block; text-align: right; }

/* ---------- app feel: bigger, cleaner text and tighter, more even spacing ---------- */
body { font-size: 15px; }
main { max-width: 1320px; }
.card { padding: 20px; border-radius: 16px; }
.card h3 { font-size: 16px; margin-bottom: 12px; }
#tabs a { padding: 9px 16px; font-size: 15px; }
.muted.small, p.small { font-size: 13px; }

/* tables: the player column takes the spare width, numbers sit in a compact group,
   so there are no wide empty gaps between columns */
table { border-collapse: separate; border-spacing: 0; }
th, td { width: 1%; padding: 11px 10px; }
th { font-size: 11.5px; padding-top: 6px; padding-bottom: 8px; }
td:has(> a.pname), td:has(> .pcell), th[data-key="name"], th[data-key="team"] { width: auto; }
tbody tr td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
tbody tr td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
td.num { font-size: 15px; }
a.pname { font-size: 15px; }
svg.kit { width: 22px; height: 22px; vertical-align: -6px; margin-right: 8px; }

/* fixture boxes: larger, cleaner text with room inside each box */
.chip { min-width: 44px; padding: 5px 8px; margin-right: 4px; border-radius: 7px; font-size: 12.5px; line-height: 1.2; letter-spacing: 0.02em; }
td.chips { white-space: nowrap; }
.small-chips .chip { min-width: 40px; font-size: 11.5px; padding: 4px 6px; }

/* fixture ticker: equal columns that fill the page, each box filling its cell */
#ticker table { table-layout: fixed; }
#ticker th, #ticker td { width: auto; }
#ticker th[data-key="team"], #ticker td:first-child { width: 200px; }
#ticker th[data-key="avg"] { width: 76px; }
#ticker td { padding: 6px 5px; }
#ticker td.chips { white-space: normal; }
#ticker .chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 0; margin: 0 0 4px; padding: 9px 4px; border-radius: 10px; }
#ticker .chip:last-child { margin-bottom: 0; }
#ticker .chip b { font-size: 14px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.03em; }
#ticker .chip small { font-size: 12.5px; font-weight: 600; opacity: 0.9; }
#ticker td:first-child strong { display: flex; align-items: center; font-size: 15px; }

/* team news cards */
.news-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.news-item { padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.6; }
.news-head { margin-bottom: 8px; font-size: 15px; }

/* ---------- player card ---------- */
.player-dialog { width: min(860px, calc(100vw - 24px)); padding: 0; border: none; border-radius: 22px; overflow: auto; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); }
.player-dialog > #player-body { padding: 0 0 24px; }
.dialog-close { position: absolute; top: 14px; right: 14px; float: none; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 16px; }
.card-hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 26px 64px 26px 28px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--team) 85%, #000) 0%, #37003c 70%); }
.card-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 14px, transparent 14px 28px); pointer-events: none; }
.hero-kit { flex: none; width: 104px; height: 104px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }
.hero-text { position: relative; z-index: 1; min-width: 0; }
.hero-team { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.card-hero h2 { margin: 4px 0 8px; font-size: 32px; line-height: 1.05; font-weight: 800; font-stretch: 115%; text-transform: uppercase; }
.card-hero h2 span { color: #00ff85; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.hero-meta strong { color: #fff; }
.card-hero .tag.proven { border-color: #00ff85; color: #00ff85; }
.card-hero .watch-btn { position: absolute; z-index: 1; right: 64px; top: 16px; float: none; margin: 0; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.card-hero .watch-btn.on { background: #00ff85; border-color: #00ff85; color: #37003c; }
.profile-news { margin: 16px 24px 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.claim-strip { margin: 12px 24px 0; font-size: 14px; }
.player-dialog .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 18px 24px 4px; }
.player-dialog .stat { padding: 12px 14px; border-radius: 12px; background: var(--card-2); }
.player-dialog .stat span { font-size: 12px; color: var(--muted); font-weight: 600; }
.player-dialog .stat strong { margin-top: 4px; font-size: 24px; }
.profile-section { margin: 0 24px; }
.player-dialog h3 { margin: 22px 0 10px; font-size: 13px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.profile-cols { gap: 0 8px; }
.profile-cols .profile-section { margin-right: 12px; }
.profile-cols .profile-section + .profile-section { margin: 0 24px 0 12px; }
.pts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.pts-tile { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 9px; border-radius: 12px; }
.pts-tile span { font-size: 11.5px; font-weight: 700; opacity: 0.75; }
.pts-tile strong { font-size: 24px; font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.p-great { background: var(--c5); color: #fff; }
.p-good { background: var(--c4); color: var(--c-text); }
.p-ok { background: var(--c3); color: var(--c-text); }
.p-poor { background: var(--c2); color: var(--c2-text); }
.pts-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.pts-sum strong { color: var(--text); }
.fixture-list td, .fixture-list th { padding: 8px 6px; }
.fixture-list .chip { min-width: 56px; padding: 6px 8px; font-size: 13px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.kv strong { font-variant-numeric: tabular-nums; }
.kv small { color: var(--muted); font-weight: 500; }

@media (max-width: 700px) {
  body { font-size: 14px; }
  .card { padding: 12px; }
  th, td { padding: 9px 6px; }
  td.num, a.pname { font-size: 14px; }
  svg.kit { width: 20px; height: 20px; margin-right: 6px; }
  .chip { min-width: 34px; padding: 4px 4px; font-size: 11.5px; margin-right: 2px; }
  td.chips .chip { min-width: 32px; }
  #ticker table { table-layout: auto; }
  #ticker th[data-key="team"], #ticker td:first-child { width: auto; }
  #ticker .chip { min-width: 56px; padding: 7px 4px; }
  .card-hero { gap: 14px; padding: 20px 52px 20px 18px; }
  .hero-kit { width: 72px; height: 72px; }
  .card-hero h2 { font-size: 23px; }
  .card-hero .watch-btn { right: 58px; top: 14px; padding: 6px 10px; font-size: 13px; }
  .card-hero { padding-top: 56px; }
  .fixture-list td.chips .chip { min-width: 52px; padding: 5px 8px; font-size: 12.5px; }
  .player-dialog .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 16px 0; }
  .player-dialog .stat strong { font-size: 20px; }
  .profile-section, .profile-cols .profile-section, .profile-cols .profile-section + .profile-section { margin: 0 16px; }
  .profile-news, .claim-strip { margin-left: 16px; margin-right: 16px; }
  .pts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pts-tile strong { font-size: 20px; }
}

/* injury and doubt warnings: red when out, yellow when doubtful (like the official game) */
.news-banner { --banner-bg: #c8102e; display: flex; align-items: center; gap: 10px; padding: 11px 64px 11px 20px; background: var(--banner-bg); color: #fff; font-size: 14.5px; font-weight: 700; }
.news-banner svg { flex: none; width: 20px; height: 20px; }
.news-banner.doubt { --banner-bg: #ffd60a; color: #1d0221; }
.player-dialog:has(.news-banner) .dialog-close { top: 5px; right: 10px; width: 32px; height: 32px; background: transparent; color: #fff; font-size: 18px; }
.player-dialog:has(.news-banner.doubt) .dialog-close { color: #1d0221; }
.flag.doubt { background: #ffd60a; color: #1d0221; }
.flag.out { background: #c8102e; }

/* ---------- fixture boxes, option B: Saira Expanded, capitals, H/A badge in the corner ---------- */
:root { --score: Saira, Archivo, system-ui, sans-serif; }
.chip { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; vertical-align: middle;
  min-width: 54px; padding: 6px 15px 6px 9px; margin-right: 4px; border-radius: 8px; font-family: var(--score); line-height: 1; }
.chip b { font: 900 13px/1 var(--score); font-stretch: 125%; letter-spacing: 0.02em; }
.chip small { margin-top: 3px; font: 600 12px/1 var(--score); opacity: 0.92; }
.chip .ha { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 800 7px/1 var(--score); background: rgba(0, 0, 0, 0.18); }
.chip.blank { padding: 6px 9px; font: 600 12px/1 var(--score); }
.small-chips .chip, .plan-cell .chip { min-width: 50px; padding: 5px 14px 5px 8px; }
.small-chips .chip b, .plan-cell .chip b { font-size: 12px; }
#ticker .chip { padding: 10px 6px; border-radius: 10px; }
#ticker .chip b { font-size: 17px; font-weight: 900; font-stretch: 125%; }
#ticker .chip small { font-size: 12.5px; margin-top: 4px; }
#ticker .chip .ha { top: 5px; right: 6px; width: 15px; height: 15px; font-size: 9px; }
.fixture-list .chip, .fixture-list td.chips .chip { min-width: 66px; padding: 7px 16px 7px 10px; }
.fixture-list .chip b { font-size: 14px; }

/* a match: home team, purple kick-off box, away team, then win chances */
.matchup-strip { margin: 8px 0 10px; }
.mrow-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.mrow-teams .side { display: flex; align-items: center; gap: 8px; }
.mrow-teams .side.r { justify-content: flex-end; }
.mrow-teams .side b { font: 800 18px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; }
.mrow-teams svg.kit { width: 26px; height: 26px; margin: 0; }
.mrow-teams .ko { padding: 5px 12px; border-radius: 6px; background: #37003c; color: #fff; font: 800 15px/1.1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.04em; }
:root[data-theme="dark"] .mrow-teams .ko { background: #4a1470; }
.matchup-strip .odds { display: flex; height: 5px; margin-top: 7px; border-radius: 3px; overflow: hidden; }
.matchup-strip .odds span { display: block; height: 100%; }
.matchup-strip .odds-text { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }

@media (max-width: 700px) {
  .chip { min-width: 44px; padding: 5px 12px 5px 6px; margin-right: 2px; }
  .chip b { font-size: 11.5px; }
  td.chips .chip { min-width: 42px; }
  td.chips .chip .ha { width: 9px; height: 9px; font-size: 6px; top: 2px; right: 2px; }
  #ticker .chip { min-width: 62px; padding: 8px 4px; }
  #ticker .chip b { font-size: 14px; }
  .mrow-teams .side b { font-size: 15px; }
  .mrow-teams .ko { font-size: 13px; padding: 4px 8px; }
}
/* table fixture boxes: compact enough that five fit beside the numbers */
td.chips .chip { min-width: 48px; padding: 5px 13px 5px 7px; margin-right: 3px; }
td.chips .chip b { font-size: 12px; }
td.chips .chip .ha { width: 10px; height: 10px; font-size: 6.5px; top: 2px; right: 2px; }
@media (max-width: 700px) {
  td.chips .chip { min-width: 44px; padding: 5px 12px 5px 5px; }
  td.chips .chip b { font-size: 11px; }
  #ticker td.chips .chip { min-width: 66px; padding: 9px 14px 8px 4px; }
  #ticker td.chips .chip b { font-size: 12.5px; }
  #ticker td.chips .chip .ha { width: 12px; height: 12px; font-size: 7.5px; top: 4px; right: 4px; }
}
/* room for the full squad table: wider page, fixed-width side panel, slimmer cell padding */
main { max-width: 1400px; }
.columns { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .columns { grid-template-columns: minmax(0, 1fr); } }
th, td { padding-left: 7px; padding-right: 7px; }
.gain { white-space: nowrap; font-size: 14px; }
.swaps li { grid-template-columns: minmax(0, 1fr) auto; } .swaps .gain { font-size: 13px; }
/* waiver suggestion rows stay on one line in the narrow side panel */
.swap-row { min-width: 0; gap: 4px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.swaps a.pname { font-size: 14px; }
.swaps svg.kit { width: 18px; height: 18px; margin-right: 5px; }

/* ---------- Trades: concept A layout (you give · verdict · you get) ---------- */
.tr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
.tr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
.tr-sub label { display: inline-flex; align-items: center; gap: 6px; }
.tr-sub select { padding: 4px 8px; font-weight: 600; }
.tr-title { margin: 4px 0 0 !important; font-size: 26px !important; font-weight: 800; font-stretch: 115%; text-transform: uppercase; }
.tr-seg button { padding: 6px 14px; font-size: 13.5px; }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 10px; }
.tr-list { padding: 18px; }
.tr-list h4 { margin: 0 0 12px; font-size: 14px; font-weight: 800; font-stretch: 115%; letter-spacing: 0.02em; text-transform: uppercase; }
.tr-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; cursor: pointer; }
.tr-row + .tr-row { margin-top: 2px; }
.tr-row:hover { background: var(--row-hover); }
.tr-row.pick { background: color-mix(in srgb, var(--accent) 9%, var(--card)); outline: 2px solid var(--accent); }
.tr-row input { position: absolute; opacity: 0; pointer-events: none; }
.tr-row:focus-within { outline: 2px solid var(--cyan); }
.tr-row svg.kit { width: 22px; height: 22px; margin: 0; vertical-align: middle; }
.tr-row a.pname { font-size: 14px; }
.tr-row .flag, .tr-row .tag { margin: 0; }
.tr-row .v { margin-left: auto; font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--muted); }
.tr-row.pick .v { color: var(--text); }
.tr-verdict { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.tr-verdict p { margin: 0; }
.gainbox { padding: 14px; border-radius: 14px; background: var(--accent); color: var(--accent-text); }
.gainbox small { display: block; font-size: 12px; opacity: 0.8; }
.gainbox strong { display: block; font: 800 34px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--brand); margin: 4px 0; }
.gainbox.neg strong { color: #ff8fa6; }
.their { padding: 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 12px; }
.their strong { font: 800 22px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--good); }
.their strong.out-text { color: var(--bad); }
.tr-warn { padding: 9px 10px; border-radius: 10px; background: #c8102e; color: #fff; font-size: 12.5px; font-weight: 700; }
.tr-warn.doubt { background: #ffd60a; color: #1d0221; }
.tr-send { display: block; padding: 10px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 700; text-decoration: none; }
.tr-send:hover { filter: brightness(1.15); }
.tr-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tr-ideas li + li { margin: 0; }
@media (max-width: 900px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-list { padding: 12px; }
  .tr-title { font-size: 21px !important; }
}

/* Trades: "How this adds up" breakdown under the builder */
.tr-breakdown { margin: 0 0 12px; padding: 18px; }
.bd-head h4 { margin: 0; font-size: 14px; font-weight: 800; font-stretch: 115%; letter-spacing: 0.02em; text-transform: uppercase; }
.bd-head p { margin: 4px 0 12px; color: var(--muted); font-size: 13.5px; }
.bd-head p b { color: var(--text); }
.bd-table th, .bd-table td { width: auto; padding: 6px 5px; border-bottom: 0; text-align: center; cursor: default; }
.bd-table thead th { font-size: 11px; }
.bd-table tbody th { text-align: left; white-space: nowrap; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); }
.bd-table tbody th svg.kit { width: 20px; height: 20px; margin: 0 6px 0 4px; vertical-align: -5px; }
.bd-table tbody tr:hover td { background: none; }
.bd-sign { display: inline-flex; width: 18px; justify-content: center; font-weight: 900; }
.bd-sign.give { color: var(--bad); } .bd-sign.get { color: var(--good); }
.bd-cell b { display: block; font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.bd-cell small, .bd-total small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.bd-cell { border-radius: 10px; }
.bd-cell.xi { background: color-mix(in srgb, var(--good) 14%, var(--card)); }
.bd-cell.xi small { color: var(--good); }
.bd-cell.bench { opacity: 0.45; }
.bd-cell.bench b { text-decoration: line-through; text-decoration-thickness: 2px; }
.bd-total b { font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.bd-change th { padding-top: 12px !important; border-top: 1px solid var(--line) !important; }
.bd-change td { padding-top: 12px !important; border-top: 1px solid var(--line) !important; }
.bd-chip { display: inline-block; min-width: 50px; padding: 5px 8px; border-radius: 8px; font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.bd-chip.up { background: var(--good); color: #fff; }
.bd-chip.down { background: var(--bad); color: #fff; }
.bd-chip.flat { background: var(--c3); color: var(--text); }
.bd-chip.big { font-size: 17px; padding: 6px 10px; }
.bd-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.bd-others th { font-weight: 600 !important; color: var(--muted) !important; } .bd-cell small { white-space: normal; max-width: 120px; margin: 0 auto; }
.brand img.brand-logo { width: 38px; height: 38px; flex: none; }
@media (max-width: 700px) { .brand img.brand-logo { width: 32px; height: 32px; } }

/* ---------- League: table with title chances, this week's matches beside it ---------- */
.lg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
#standings td { padding-top: 10px; padding-bottom: 10px; }
#standings tr.me td { background: var(--highlight); }
#standings tr.me td:first-child { box-shadow: inset 4px 0 var(--good); }
.rk { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: var(--card-2); font: 900 13px var(--score); }
/* 1st place in the league table: a golden crown in a soft gold tile, instead of a number */
.rk.t1 { background: color-mix(in srgb, #f5b50c 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f5b50c 50%, transparent); }
.rk.t1 svg { width: 17px; height: 17px; fill: #f5b50c; }
.lg-team { display: flex; flex-direction: column; line-height: 1.25; }
.lg-team b { font-size: 14.5px; }
.lg-team small { color: var(--muted); font-size: 12px; }
.lg-pts { font: 900 16px var(--score); }
.lg-pts.plain { font: 700 16px Inter, system-ui, sans-serif; } /* League table's Total and Best run's Wins */
.lg-odds { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.lg-odds .track { flex: 1; height: 8px; border-radius: 4px; background: var(--c3); overflow: hidden; }
.lg-odds .track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
:root[data-theme="dark"] .lg-odds .track i { background: var(--brand); }
.lg-odds b { width: 40px; text-align: right; font: 800 13px var(--score); }
.mcard { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); }
.mcard + .mcard { margin-top: 10px; }
.mcard.me { border: 2px solid var(--good); background: color-mix(in srgb, var(--good) 6%, var(--card)); }
.mcard .tms { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 14px; }
.mcard .tms b { font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; text-align: right; }
.mcard .wb { display: flex; height: 6px; margin-top: 10px; border-radius: 3px; overflow: hidden; }
.mcard .wb span { height: 100%; }
.mcard .pct { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .lg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .lg-odds { min-width: 90px; gap: 6px; } .lg-odds b { width: 34px; } }
.tr-pane[hidden] { display: none !important; }
/* League: all sections on one page; the buttons jump down to them */
.lg-section { scroll-margin-top: 80px; }
/* Analytics, Points by stat: thin bars on faint tracks; the counts stay in the hover text. */
:root[data-theme="dark"]:not([data-dark="purple"]) .pt-types .tc-card { background: #1f2024; }
.pt-types .tc-card { border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.pt-types .tc-rows { grid-template-columns: 124px minmax(0, 1fr) auto; row-gap: 11px; }
.pt-types .tc-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.pt-types .tc-bar { border-radius: 6px; }
.pt-types .tc-name { color: color-mix(in srgb, var(--text) 72%, transparent); font-weight: 500; }
.pt-types .tc-name a { color: inherit; }
.pt-types .tc-row.me .tc-name { color: var(--text); font-weight: 800; }
.pt-types .tc-val { font-size: 13px; }
.pt-types .tc-val small { display: none; }
@media (max-width: 700px) { .pt-types .tc-rows { grid-template-columns: 110px minmax(0, 1fr) auto; } }
/* Useful scorers: the same thin bars. It keeps its small figure, the share of starts. */
:root[data-theme="dark"]:not([data-dark="purple"]) #analytics-useful { background: #1f2024; }
#analytics-useful { border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
#analytics-useful .tc-rows { grid-template-columns: 124px minmax(0, 1fr) auto; row-gap: 11px; }
#analytics-useful .tc-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 8%, transparent); }
#analytics-useful .tc-bar { border-radius: 6px; }
#analytics-useful .tc-name { color: color-mix(in srgb, var(--text) 72%, transparent); font-weight: 500; }
#analytics-useful .tc-name a { color: inherit; }
#analytics-useful .tc-row.me .tc-name { color: var(--text); font-weight: 800; }
#analytics-useful .tc-val { font-size: 13px; }
@media (max-width: 700px) { #analytics-useful .tc-rows { grid-template-columns: 110px minmax(0, 1fr) auto; } }
.an-sec-title { margin: 22px 0 12px; font: 800 18px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--text); }
#view-league .lg-grid { margin-bottom: 0; }

/* ---------- Predicted lineups: one card per match, in kick-off order, big readable pitches ---------- */
:is(#lineups, #lu-body).lineup-grid { display: flex; flex-direction: column; gap: 14px; }
.lu-day { margin: 14px 0 0; padding: 6px 2px; border-bottom: 2px solid var(--accent); font-size: 15px; font-weight: 800; font-stretch: 115%; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
:root[data-theme="dark"] .lu-day { color: var(--brand); border-color: var(--brand); }
.lu-day:first-child { margin-top: 0; }
:is(#lineups, #lu-body) .lineup-card { padding: 16px; border-radius: 16px; background: var(--card); }
:is(#lineups, #lu-body) .lineup-card .matchup-strip { margin: 0 0 12px; }
:is(#lineups, #lu-body) .mrow-teams { padding: 10px 16px; }
:is(#lineups, #lu-body) .mrow-teams .side b { font-size: 20px; }
:is(#lineups, #lu-body) .mrow-teams svg.kit { width: 30px; height: 30px; }
:is(#lineups, #lu-body) .mrow-teams .ko { font-size: 16px; padding: 6px 14px; }
.lu-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lu-team { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; }
.lu-team svg.kit { width: 24px; height: 24px; margin: 0; }
.lu-team .muted { margin-left: auto; font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; }
:is(#lineups, #lu-body) .pitch { gap: 14px; padding: 16px 6px 12px; margin: 0 0 8px; border-radius: 12px; }
:is(#lineups, #lu-body) .lrow { flex-wrap: nowrap; justify-content: space-evenly; gap: 4px; }
:is(#lineups, #lu-body) .lp { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 1 108px; min-width: 0; padding: 0; background: none; border: 0; color: #fbf5ff; }
:is(#lineups, #lu-body) .lp svg.lp-kit { width: 38px; height: 38px; margin: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5)); }
:is(#lineups, #lu-body) .lp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 7px 3px; border-radius: 5px; background: rgba(8, 4, 12, 0.88); border-bottom: 3px solid #5a4a63; font-size: 13px; font-weight: 700; white-space: nowrap; }
:is(#lineups, #lu-body) .lp.sure .lp-name { border-bottom-color: #00a85a; }
:is(#lineups, #lu-body) .lp.likely .lp-name { border-bottom-color: #ffd60a; }
:is(#lineups, #lu-body) .lp.doubt .lp-name { border-bottom-color: #e5393a; }
:is(#lineups, #lu-body) .lp b { font: 800 12.5px Archivo, system-ui, sans-serif; font-stretch: 112%; color: #e8dcf3; }
:is(#lineups, #lu-body) .lp .tag { margin-left: 4px; font-size: 9.5px; padding: 0 4px; }
:is(#lineups, #lu-body) .lp .tag.mine { background: #00ff85; border-color: #00ff85; color: #37003c; }
:is(#lineups, #lu-body) .lp .tag.free { background: #a6f0c9; color: #1d0221; }
:is(#lineups, #lu-body) .lextra { font-size: 13px; line-height: 1.7; }
@media (max-width: 900px) {
  .lu-sides { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :is(#lineups, #lu-body) .lineup-card { padding: 10px; }
  :is(#lineups, #lu-body) .lp { flex-basis: 70px; }
  :is(#lineups, #lu-body) .lp svg.lp-kit { width: 30px; height: 30px; }
  :is(#lineups, #lu-body) .lp-name { font-size: 11px; padding: 1px 4px 2px; }
  :is(#lineups, #lu-body) .mrow-teams .side b { font-size: 16px; }
  :is(#lineups, #lu-body) .mrow-teams .ko { font-size: 13px; padding: 4px 8px; }
}
.lu-side { min-width: 0; }
@media (max-width: 700px) {
  :is(#lineups, #lu-body) .lp { flex: 1 1 0; }
  :is(#lineups, #lu-body) .lp-name { font-size: 10.5px; }
  :is(#lineups, #lu-body) .lp b { font-size: 11px; }
  :is(#lineups, #lu-body) .pitch { padding-left: 2px; padding-right: 2px; }
}
/* Predicted lineups: small and light text bold, bold text bolder */
#view-lineups .muted, #view-lineups .small, #view-lineups p { font-weight: 700; }
#view-lineups .matchup-strip .odds-text { font-weight: 700; color: var(--text); opacity: 0.75; }
:is(#lineups, #lu-body) .lp b { font-weight: 900; color: #fff; }
:is(#lineups, #lu-body) .lp-name { font-weight: 900; }
:is(#lineups, #lu-body) .lu-team strong { font-weight: 900; }
:is(#lineups, #lu-body) .lu-team .muted { font-weight: 900; }
:is(#lineups, #lu-body) .lextra { font-weight: 600; }
:is(#lineups, #lu-body) .lextra strong { font-weight: 900; }
:is(#lineups, #lu-body) .lextra .muted { font-weight: 800; }
.lu-day { font-weight: 900; }
#view-lineups .card-head h3 { font-weight: 900; }
/* Confirmed lineups (after kick-off) */
.confirmed-badge { padding: 3px 9px; border-radius: 999px; background: var(--good); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; }
:is(#lineups, #lu-body) .lp.confirmed b { color: #00ff85; }
:is(#lineups, #lu-body) .lp.confirmed .lp-name { border-bottom-color: #00ff85; }

/* ---------- Header option D: scoreboard ---------- */
header.sb { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; min-height: 76px; background: linear-gradient(90deg, #2a0030, #37003c 55%, #4b0f55); color: #fff; }
:root[data-theme="dark"] header.sb { background: linear-gradient(90deg, #12041d, #1f0830 55%, #2c0d44); }
.sb-brand { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 22px; background: rgba(0, 0, 0, 0.2); font-size: 19px; }
.sb-brand .better, .sb-eyebrow { color: #00ff85; }
.sb-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 22px; margin-right: auto; }
.sb-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #00ff85; }
.sb-info h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.05; font-weight: 900; font-stretch: 118%; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-clocks { display: flex; }
.sb-clock { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, 0.12); text-align: center; min-width: 150px; }
.sb-clock b { font: 800 23px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; }
.sb-clock span { margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; white-space: nowrap; }
.sb-clock.hot b { color: #00ff85; }
.sb-team { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; }
.sb-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #00ff85; color: #37003c; display: flex; align-items: center; justify-content: center; font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.sb-team-text { display: flex; flex-direction: column; line-height: 1.15; }
.sb-team-text small { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.sb-team select { max-width: 210px; padding: 2px 18px 2px 0; border: 0; background: transparent; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.sb-team select option { color: #1d0221; }
.sb-tools { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.sb-tools form { display: flex; align-items: center; gap: 4px; }
.sb-tools form label { font-size: 12px; opacity: 0.7; }
.sb-tools input { width: 74px; padding: 5px 7px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; }
.sb-tools form button { padding: 5px 8px; background: transparent; border: 0; color: #00ff85; font-weight: 700; }
.sb-tools .theme-toggle { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; }
.sb-tools .account button.ghost { color: #fff; border-color: #fff; }

/* tabs with icons; the active one is purple; look-ahead at the end of the row */
#tabs.sb-tabs { align-items: center; gap: 4px; margin: 0 -16px 6px; padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.sb-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.sb-tabs a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sb-tabs a:hover { color: var(--text); background: var(--row-hover); }
#tabs.sb-tabs a.active { background: #37003c; color: #fff; }
#tabs.sb-tabs a.active svg { color: #00ff85; }
:root[data-theme="dark"] #tabs.sb-tabs a.active { background: #2be38f; color: #0b1f14; }
:root[data-theme="dark"] #tabs.sb-tabs a.active svg { color: #0b1f14; }
.sb-ahead { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; border-radius: 10px; background: var(--card-2); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sb-ahead select { border: 0; background: transparent; font-weight: 800; color: var(--text); padding: 6px; }
.sb-deadlines { margin: 0 0 14px; }
main { padding-top: 0; }

@media (max-width: 1250px) {
  header.sb { flex-wrap: wrap; }
  .sb-info { flex: 1 1 300px; }
  .sb-clocks { order: 5; flex: 1 1 100%; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .sb-clock { flex: 1; padding: 10px; min-width: 0; }
  .sb-clock:first-child { border-left: 0; }
}
@media (max-width: 700px) {
  .sb-brand { padding: 10px 12px; font-size: 16px; }
  .sb-brand .beta { display: none; }
  .sb-info { order: 3; flex: 1 1 100%; padding: 10px 12px; }
  .sb-info h2 { font-size: 19px; white-space: normal; }
  .sb-team { order: 4; flex: 1 1 100%; padding: 10px 12px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .sb-team select { max-width: none; width: 100%; }
  .sb-team-text { flex: 1; }
  .sb-tools { margin-left: auto; padding: 8px 12px; border-left: 0; }
  .sb-tools form label { display: none; }
  .sb-tools input { width: 64px; }
  .sb-clock b { font-size: 18px; }
  .sb-clock span { font-size: 9.5px; }
  #tabs.sb-tabs { margin: 0 -10px 6px; padding: 8px 10px; }
  .sb-tabs a svg { display: none; }
}
@media (max-width: 700px) { .sb-tools form { width: auto; } }
/* D: room for the league name */
.sb-info { flex: 1 1 auto; min-width: 240px; }
.sb-brand { padding: 0 18px; }
.sb-clock { min-width: 0; padding: 0 16px; }
.sb-clock small { margin-top: 2px; font-size: 11px; font-weight: 600; opacity: 0.65; white-space: nowrap; }
.sb-team select { max-width: 180px; }
.sb-tools form label { display: none; }
.sb-tools .account button.ghost { white-space: nowrap; }
@media (max-width: 700px) { .sb-clock small { font-size: 10px; } }
.sb-info h2 { white-space: normal; font-size: 22px; line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* D with the Apple-style tab box: tabs in a clean white rounded box, grey on hover, purple when selected */
#tabs.sb-tabs { margin: 14px 0 6px; padding: 4px; gap: 2px; width: max-content; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
#tabs.sb-tabs a { padding: 8px 13px; border-radius: 9px; font-weight: 600; }
#tabs.sb-tabs a:hover { color: var(--text); background: #ececf0; }
:root[data-theme="dark"] #tabs.sb-tabs a:hover { background: rgba(255, 255, 255, 0.1); }
#tabs.sb-tabs a.active, #tabs.sb-tabs a.active:hover { background: #37003c; color: #fff; font-weight: 700; }
:root[data-theme="dark"] #tabs.sb-tabs a.active, :root[data-theme="dark"] #tabs.sb-tabs a.active:hover { background: #2be38f; color: #0b1f14; }
#tabs.sb-tabs .sb-ahead { margin-left: 10px; }
@media (max-width: 700px) { #tabs.sb-tabs { margin: 10px 0 6px; width: auto; } }
/* Countdown numbers: cleaner, still bold and bright */
.sb-clock b { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; font-size: 25px; font-stretch: 100%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sb-clock b .u { font-size: 0.62em; font-weight: 700; margin: 0 4px 0 1px; opacity: 0.85; letter-spacing: 0; }
@media (max-width: 700px) { .sb-clock b { font-size: 20px; } }
.sb-clock b .u { text-transform: lowercase; }
.sb-clock b .u { text-transform: uppercase; font-size: 0.8em; font-weight: 800; margin: 0 5px 0 1px; opacity: 1; }
.sb-clock b .u { font-size: 1em; font-weight: 800; vertical-align: baseline; margin: 0 6px 0 1px; text-transform: uppercase; opacity: 1; }
.sb-clock b .u:last-child { margin-right: 0; }




/* Explanation notes (how the numbers work): bigger, bolder and darker so they're easy to read */
.card p.muted.small, #view-trades > .tr-pane > p.muted.small, .how li {
  font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--text); opacity: 0.78;
}
.card p.muted.small { margin: 2px 0 14px; max-width: 900px; }
.card p.muted.small strong, .how li strong { font-weight: 800; opacity: 1; }
.how summary { font-size: 15.5px; font-weight: 800; }
@media (max-width: 700px) {
  .card p.muted.small, .how li { font-size: 14px; }
}
/* Deadlines under the tabs: a clean row of chips */
.sb-deadlines { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.dl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
.dl-chip .dl-label { color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.dl-chip b { font-weight: 800; }
.dl-chip.passed b { color: var(--muted); }
.dl-tag { padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--doubt) 18%, transparent); color: var(--doubt); font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.news-item .small { font-size: 14.5px; }
.news-item .small .muted { color: var(--text); opacity: 0.72; font-weight: 600; }
.lextra .muted, .claim-line .muted { color: var(--text); opacity: 0.72; font-weight: 600; }
/* Notes: readable but softer; section headings pop with a short green accent */
.card p.muted.small, #view-trades > .tr-pane > p.muted.small, .how li { font-size: 14.5px; font-weight: 500; opacity: 1; color: color-mix(in srgb, var(--text) 70%, var(--card)); }
.card p.muted.small strong, .how li strong { font-weight: 700; color: var(--text); }
.news-item .small .muted, .lextra .muted, .claim-line .muted { font-weight: 500; opacity: 0.8; }
.card > h3, .card-head h3, .card > .card-head > div > h3 { position: relative; padding-left: 14px; font-size: 18px; font-weight: 900; color: var(--accent); letter-spacing: 0.01em; }
.card > h3::before, .card-head h3::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px; border-radius: 3px; background: var(--brand); }
:root[data-theme="dark"] .card > h3, :root[data-theme="dark"] .card-head h3 { color: var(--text); }
/* Deadlines: plain text, larger and clearer */
.sb-deadlines { display: block; margin: 2px 0 16px; font-size: 16px; font-weight: 500; color: var(--text); opacity: 0.85; }
.sb-deadlines b { font-weight: 800; }
.sb-deadlines .soon { font-weight: 700; }
.sb-deadlines .dl-sep { margin: 0 6px; opacity: 0.5; }
/* Section headings a touch larger */
.card > h3, .card-head h3 { font-size: 20px; }
@media (max-width: 700px) { .sb-deadlines { font-size: 14.5px; } .card > h3, .card-head h3 { font-size: 17px; } }
#deadlines.sb-deadlines { font-size: 16px; }
@media (max-width: 700px) { #deadlines.sb-deadlines { font-size: 14.5px; } }

/* ---------- League tab dropdown (Analytics) ---------- */
.tab-menu { position: relative; display: inline-flex; }
.tab-drop { position: absolute; top: 100%; left: 0; z-index: 30; display: none; min-width: 100%; padding-top: 6px; }
.tab-drop a { display: flex !important; padding: 9px 14px !important; border-radius: 10px; background: var(--card) !important; border: 1px solid var(--line); box-shadow: 0 12px 28px -14px rgba(55, 0, 60, 0.45); white-space: nowrap; color: var(--text) !important; }
.tab-drop a:hover { background: #ececf0 !important; }
.tab-drop a.active { background: #37003c !important; color: #fff !important; }
.tab-menu:hover .tab-drop, .tab-menu:focus-within .tab-drop { display: block; }
.tab-menu.in > a { color: var(--text); background: #ececf0; }
/* The Analytics dropdown needs the tab bar not to clip it; only on screens wide enough for the whole bar, so phones keep a scrolling tab bar (and reach Analytics from the League page). */
@media (min-width: 1100px) { #tabs.sb-tabs { overflow: visible; } }

/* ---------- Analytics: points breakdown ---------- */
#analytics-points .card-head { align-items: flex-start; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pt-key { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; }
.pt-key i { width: 11px; height: 11px; border-radius: 3px; }
.pt-key.off { opacity: 0.4; text-decoration: line-through; }
.pt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.pt-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 54px; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pt-row:hover, .pt-row.sel { background: var(--row-hover); }
.pt-row.sel { box-shadow: inset 3px 0 #37003c; }
.pt-row.me .pt-name b { color: var(--good); }
.pt-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pt-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pt-name small { color: var(--muted); font-size: 12px; }
.pt-track { position: relative; height: 22px; }
.pt-pos, .pt-neg { position: absolute; top: 0; bottom: 0; display: flex; width: 100%; }
.pt-neg { flex-direction: row-reverse; }
.pt-seg { height: 100%; min-width: 1px; }
.pt-pos .pt-seg:last-child { border-radius: 0 5px 5px 0; }
.pt-neg .pt-seg:last-child { border-radius: 5px 0 0 5px; }
.pt-zero { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: 0.35; }
.pt-total { text-align: right; font: 800 16px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.pt-axis { margin: 8px 8px 0 190px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pt-detail { position: sticky; top: 12px; padding: 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.pt-detail-head { display: flex; flex-direction: column; margin-bottom: 10px; }
.pt-detail-head b { font-size: 16px; font-weight: 800; }
.pt-detail-head small { color: var(--muted); font-size: 12.5px; }
.pt-line { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pt-line i { width: 12px; height: 12px; border-radius: 3px; }
.pt-line small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.pt-line b { font: 800 14.5px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--good); }
.pt-line b.neg { color: var(--bad); }
.pt-sum { grid-template-columns: 1fr auto; margin-top: 4px; border-top: 2px solid var(--line); font-weight: 800; }
.pt-sum b { color: var(--text); font-size: 17px; }
@media (max-width: 1000px) { .pt-layout { grid-template-columns: minmax(0, 1fr); } .pt-detail { position: static; } }
@media (max-width: 700px) {
  .pt-row { grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; padding: 6px 4px; }
  .pt-name b { font-size: 12.5px; }
  .pt-name small { display: none; }
  .pt-axis { margin-left: 4px; }
}
.seg-link { padding: 6px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--good); text-decoration: none; display: inline-flex; align-items: center; }
.seg-link:hover { background: var(--row-hover); }

/* ---------- Points chart, shadcn-style: columns with rounded tops, faint grid, tooltip card ---------- */
.pc-wrap { overflow-x: auto; padding-bottom: 4px; }
.pc-plot { position: relative; height: 360px; margin-left: 40px; min-width: 640px; }
.pc-grid { position: absolute; inset: 0; }
.pc-tick { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.pc-tick.zero { border-top: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); }
.pc-tick em { position: absolute; left: -40px; top: -8px; width: 32px; text-align: right; font: normal 600 11.5px var(--display); color: var(--muted); }
.pc-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; }
.pc-col { position: relative; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.pc-col:hover, .pc-col.hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.pc-up, .pc-down { position: absolute; left: 22%; right: 22%; display: flex; }
.pc-up { flex-direction: column-reverse; height: 100%; justify-content: flex-start; }
.pc-down { flex-direction: column; height: 100%; }
.pc-seg { display: block; width: 100%; flex: none; }
.pc-up .pc-seg.end { border-radius: 6px 6px 0 0; }
.pc-down .pc-seg.end { border-radius: 0 0 6px 6px; }
.pc-labels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 8px 0 0 40px; min-width: 640px; }
.pc-label { padding: 0 3px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-label.me { color: var(--good); font-weight: 800; }
.pc-tip { position: absolute; z-index: 5; width: 230px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 30px -12px rgba(29, 2, 33, 0.35); pointer-events: none; }
.pc-tip-head { margin-bottom: 6px; font-weight: 800; font-size: 13.5px; }
.pc-tip-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 2px 0; font-size: 12.5px; color: var(--muted); }
.pc-tip-row i { width: 10px; height: 10px; border-radius: 2px; }
.pc-tip-row b { font-family: Archivo, system-ui, sans-serif; font-weight: 800; font-stretch: 112%; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-tip-row.total { grid-template-columns: 1fr auto; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; }
.pc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 18px 0 4px; }
.pc-key { display: inline-flex; align-items: center; gap: 6px; padding: 3px 2px; border: 0; background: none; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.pc-key i { width: 10px; height: 10px; border-radius: 2px; }
.pc-key.off { opacity: 0.35; }
.pc-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.pc-foot b { font-weight: 700; }
.pc-foot span { color: var(--muted); }
@media (max-width: 700px) { .pc-plot { height: 300px; } }
.pc-wrap { padding-top: 12px; }

/* ---------- Analytics: one chart per scoring type ---------- */
.pt-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 16px; }
.tc-card { display: flex; flex-direction: column; padding: 18px; }
.tc-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.tc-head i { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 3px; }
.tc-head h4 { margin: 0; font-size: 16px; font-weight: 800; }
.tc-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.tc-rows { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 5px 10px; font-size: 13px; }
.tc-row { display: contents; }
.tc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; }
.tc-row.me .tc-name { color: var(--good); font-weight: 800; }
.tc-track { height: 18px; }
.tc-bar { display: block; height: 100%; min-width: 2px; border-radius: 0 5px 5px 0; }
.tc-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.tc-val.neg { color: var(--bad); }
.tc-val small { font: 600 11px var(--display); color: var(--muted); white-space: nowrap; }
.tc-foot { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.tc-rows + .tc-foot { margin-top: 14px; }
.tc-foot b { font-weight: 700; }
.tc-foot span { color: var(--muted); }
@media (max-width: 700px) {
  .pt-types { grid-template-columns: 1fr; }
  .tc-rows { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

/* ---------- Player card: tighter header, owned tag, fixtures and top scoring row ---------- */
.card-hero { padding-top: 14px; padding-bottom: 14px; }
.card-hero h2 { margin: 2px 0 6px; }
.card-hero .tag.mine { background: #00ff85; border-color: #00ff85; color: #37003c; }
.fixture-list { width: max-content; max-width: 100%; }
.fixture-list td, .fixture-list th { padding: 8px 12px; }
.fixture-list td:first-child, .fixture-list th:first-child { padding-left: 4px; }
.fixture-list td.num strong { font-size: 17px; font-weight: 800; }
@media (max-width: 700px) {
  .card-hero { padding-top: 50px; padding-bottom: 12px; }
  .fixture-list td, .fixture-list th { padding: 8px 9px; }
}
/* Gameweek still in play: live points tile and the fixture marked live / played */
.pts-tile.live { outline: 2px dashed currentColor; outline-offset: -5px; }
.gw-live { white-space: nowrap; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #37003c; color: #00ff85; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
/* Countdown dates: same lettering as the label above ("LINEUPS LOCK"), a touch softer. */
.sb-clock small { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
@media (max-width: 700px) { .sb-clock small { font-size: 9.5px; } }

/* ---------- My team: Pitch / List switch, pitch view, list view ---------- */
.mt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.mt-head h3 { margin: 0; }
.mt-switch { display: inline-flex; padding: 3px; border-radius: 11px; background: #ececf0; }
.mt-switch button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mt-switch button svg { width: 16px; height: 16px; }
.mt-switch button:hover { color: var(--text); }
.mt-switch button.on { background: var(--card); color: #37003c; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
:root[data-theme="dark"] .mt-switch { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .mt-switch button.on { background: #37003c; color: #00ff85; }
.mt-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.mt-sum b { color: var(--text); }
.mt-drop-tag { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #e5393a; color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.mt-live { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #37003c; color: #00ff85; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }

/* Pitch: clean line drawing, shirts with a name tag and a stat strip */
/* Half a mown pitch: halfway line and half the centre circle at the top (forwards just below it),
   penalty box, "D" and six-yard box at the bottom around the keeper. */
.sqp-pitch { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 80px 8px 34px; border-radius: 16px; overflow: hidden;
  background: repeating-linear-gradient(180deg, #3f9d4c 0 56px, #378f45 56px 112px); }
:root[data-theme="dark"] .sqp-pitch { background: repeating-linear-gradient(180deg, #2f7d3b 0 56px, #2a7235 56px 112px); }
.sqp-lines { position: absolute; inset: 12px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 3px; overflow: hidden; pointer-events: none; }
.sqp-lines i { position: absolute; border: 2px solid rgba(255, 255, 255, 0.7); }
.sqp-lines .arc { left: 50%; top: -62px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; }
.sqp-lines .spot { left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.sqp-lines .box { left: 22%; right: 22%; bottom: -2px; height: 128px; }
.sqp-lines .six { left: 37%; right: 37%; bottom: -2px; height: 48px; }
.sqp-lines .d { left: 50%; bottom: 38px; width: 104px; height: 104px; margin-left: -52px; border-radius: 50%; clip-path: inset(0 0 calc(100% - 16px) 0); }
.sqp-row { position: relative; z-index: 1; display: flex; justify-content: space-evenly; gap: 6px; }
.sqp-p { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 1 124px; min-width: 0; color: var(--text); text-decoration: none; cursor: pointer; }
.sqp-p svg.kit { width: 46px; height: 46px; margin: 0; filter: drop-shadow(0 5px 6px rgba(40, 0, 50, 0.3)); }
.sqp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border-radius: 6px 6px 0 0; background: #fff; border: 1px solid #e3dde8; border-bottom: 0; color: #1d0221; font-weight: 800; font-size: 13px; }
.sqp-name { display: inline-flex; align-items: center; gap: 4px; }
.sqp-name .flag { flex: none; margin: 0; }
.sqp-stat { display: flex; border-radius: 0 0 6px 6px; overflow: hidden; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sqp-stat span { padding: 2px 7px; background: #37003c; color: #00ff85; }
.sqp-stat span + span { background: #2b2232; color: #fff; font-weight: 700; }
.sqp-p.drop .sqp-name { background: #ffe1e1; border-color: #e5393a; }
.sqp-p:hover .sqp-name { border-color: #37003c; }
.sqp-bench-lbl { margin: 14px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sqp-bench { display: flex; justify-content: space-evenly; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; background: #f1eef4; }
:root[data-theme="dark"] .sqp-bench { background: rgba(255, 255, 255, 0.05); }
.sqp-key { margin-top: 8px; }

/* List: grouped by position */
.sq-list table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sq-list th { white-space: nowrap; }
.sq-list tr.p td:first-child { white-space: normal; line-height: 1.6; }
.sq-list th.num, .sq-list td.num { text-align: right; }
.sq-list td.chips, .sq-list th[data-key="fix"] { padding-left: 18px; }
.sq-list td { border-bottom: 1px solid var(--line); }
.sq-list tr.grp td { padding-top: 16px; padding-bottom: 6px; border-bottom: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #37003c; }
:root[data-theme="dark"] .sq-list tr.grp td { color: #00ff85; }
.sq-list tr.p td:first-child { border-left: 4px solid #00c46a; }
.sq-list tr.p.bench td { opacity: 0.55; }
.sq-list tr.p.bench td:first-child { border-left-color: transparent; }
.sq-list tr.p.drop td { background: #fff1f1; }
:root[data-theme="dark"] .sq-list tr.p.drop td { background: rgba(229, 57, 58, 0.12); }

/* ---------- Suggested waivers ---------- */
.wv-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.wv-top p:empty, .wv-top div:empty { display: none; }
.wv-order { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f4f1f7; font-size: 13.5px; }
.wv-order b.n { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 10px; background: #37003c; color: #00ff85; font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }
:root[data-theme="dark"] .wv-order { background: rgba(255, 255, 255, 0.06); }
.wv-toggle { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wv-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wv-toggle .sw { flex: none; position: relative; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px; background: #cfc6d6; transition: background 0.15s; }
.wv-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.wv-toggle input:checked + .sw { background: #00c46a; }
.wv-toggle input:checked + .sw::after { transform: translateX(16px); }
.wv-toggle input:focus-visible + .sw { outline: 2px solid #37003c; outline-offset: 2px; }
.wv-toggle small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.wv-kept { margin: 0; padding-left: 48px; font-size: 12.5px; color: var(--muted); }
.wv-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wv-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.wv-gain { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 14px; background: #37003c; color: #fff; font-size: 12px; font-weight: 700; }
.wv-gain b { font: 800 18px Archivo, system-ui, sans-serif; font-stretch: 112%; color: #00ff85; }
.wv-swap { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 10px 14px 4px; }
.wv-swap .s { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 900; font-size: 14px; }
.wv-swap .s.in { background: #d8f7e6; color: #0d7a45; }
.wv-swap .s.out { background: #ffe1e1; color: #c8102e; }
.wv-swap .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.wv-swap .who svg.kit { width: 20px; height: 20px; margin: 0 5px 0 0; vertical-align: -5px; }
.wv-swap .who a.pname { font-weight: 800; }
.wv-swap .v { font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; text-align: right; }
.wv-swap .v.out { color: var(--muted); font-weight: 700; }
.wv-fx { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 14px 4px 48px; }
.wv-fx .chip { margin: 0; }
.wv-claim { padding: 8px 14px 12px 48px; font-size: 12.5px; }
.wv-claim .muted { line-height: 1.35; }
.wv-meter { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-weight: 800; }
.wv-meter .track { flex: 1; height: 7px; border-radius: 7px; background: #ececf0; overflow: hidden; }
.wv-meter .track i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #00c46a, #00ff85); }
:root[data-theme="dark"] .wv-meter .track { background: rgba(255, 255, 255, 0.1); }
.wv-watch { display: flex; flex-direction: column; gap: 6px; }
.wv-w { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 24px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #f6f4f8; font-size: 14px; }
:root[data-theme="dark"] .wv-w { background: rgba(255, 255, 255, 0.05); }
.wv-w .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-w .xpv { font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }

@media (max-width: 700px) {
  .mt-switch button { padding: 6px 12px; font-size: 13px; }
  .sqp-pitch { padding: 62px 2px 26px; gap: 14px; }
  .sqp-lines { inset: 8px; }
  .sqp-lines .arc { top: -46px; width: 88px; height: 88px; margin-left: -44px; }
  .sqp-lines .box { left: 18%; right: 18%; height: 108px; }
  .sqp-lines .six { left: 34%; right: 34%; height: 40px; }
  .sqp-lines .d { bottom: 30px; width: 84px; height: 84px; margin-left: -42px; clip-path: inset(0 0 calc(100% - 13px) 0); }
  .sqp-row, .sqp-bench { gap: 2px; }
  .sqp-p svg.kit { width: 34px; height: 34px; }
  .sqp-name { padding: 2px 4px; font-size: 11px; }
  .sqp-stat { flex-direction: column; align-items: center; font-size: 10.5px; }
  .sqp-stat span { width: 100%; padding: 1px 4px; text-align: center; }
}
/* Medium screens: tighter fixture chips and cells so the squad list fits without scrolling sideways. */
@media (min-width: 701px) and (max-width: 1300px) {
  .sq-list td, .sq-list th { padding-left: 5px; padding-right: 5px; }
  .sq-list td.chips .chip { min-width: 40px; padding: 4px 10px 4px 5px; margin-right: 2px; font-size: 11px; }
  .sq-list th.num { white-space: normal; }
}
/* Projected total: green = projected to win this gameweek's matchup, red = to lose; hover for the matchup. */
.xi-total { position: relative; display: inline-block; padding: 1px 8px; border-radius: 8px; font-weight: 800; color: var(--text); background: #ececf0; cursor: help; outline: none; }
.xi-total.win { background: #d8f7e6; color: #0b7a43; }
.xi-total.lose { background: #ffe1e1; color: #c8102e; }
:root[data-theme="dark"] .xi-total.win { background: rgba(31, 174, 108, 0.2); color: #3ddc97; }
:root[data-theme="dark"] .xi-total.lose { background: rgba(229, 57, 58, 0.18); color: #ff6b6b; }
.xi-tip { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: none; width: max-content; max-width: min(340px, 88vw); min-width: 260px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 30px -12px rgba(55, 0, 60, 0.45); color: var(--text); font-weight: 600; cursor: default; }
.xi-total:hover .xi-tip, .xi-total:focus .xi-tip, .xi-total:focus-within .xi-tip { display: block; }
.xt-head { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.xt-side { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.xt-side b { font-size: 16px; }
.xt-side.me span { font-weight: 800; }
.xt-foot { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.xt-side small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.xt-side { align-items: center; }
/* Header: "Better" in the logo's green (same gradient as logo.svg), and a cleaner team initial. */
.sb-brand .better, .sb-eyebrow, .sb-clock.hot b, .sb-tools form button { color: #2bff9a; background: linear-gradient(180deg, #2bff9a, #00c46a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-avatar { width: 36px; height: 36px; font: 800 20px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-stretch: 100%; letter-spacing: 0; text-transform: uppercase; }
@media (max-width: 700px) { .sb-avatar { font-size: 18px; } }
/* Live gameweek: a small red badge beside the gameweek name; the lineups-lock slot stays but is empty. */
.sb-eyebrow-row { display: flex; align-items: center; gap: 8px; }
.live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px; border-radius: 999px; background: #e5393a; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; }
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
.live-badge[hidden] { display: none; }
@keyframes live-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live-badge::before { animation: none; } }
#clock-lineups:empty { display: none; } /* hidden while a gameweek is live; back with the next lineups-lock countdown */

/* ---------- Dark (grey) theme: grey versions of the parts that are purple elsewhere ---------- */
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb { background: linear-gradient(90deg, #1e1f22, #232428 55%, #2b2d31); }
:root[data-theme="dark"]:not([data-dark="purple"]) .card-hero { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--team) 85%, #000) 0%, #1e1f22 70%); }
:root[data-theme="dark"]:not([data-dark="purple"]) .mrow-teams .ko,
:root[data-theme="dark"]:not([data-dark="purple"]) .gw-live,
:root[data-theme="dark"]:not([data-dark="purple"]) .mt-live,
:root[data-theme="dark"]:not([data-dark="purple"]) .sqp-stat span,
:root[data-theme="dark"]:not([data-dark="purple"]) .wv-order b.n,
:root[data-theme="dark"]:not([data-dark="purple"]) .wv-gain,
:root[data-theme="dark"]:not([data-dark="purple"]) .mt-switch button.on { background: #1e1f22; }
:root[data-theme="dark"]:not([data-dark="purple"]) .sqp-stat span + span { background: #2b2d31; }
:root[data-theme="dark"] .tab-drop a.active { background: #00ff85 !important; color: #1d0221 !important; }
:root[data-theme="dark"] .xi-total:not(.win):not(.lose) { background: rgba(255, 255, 255, 0.08); }

/* ---------- Theme menu (Light / Dark / Dark purple) ---------- */
.theme-menu { position: relative; display: inline-flex; }
.theme-pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45); }
.theme-pop[hidden] { display: none; }
.theme-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.theme-pop button:hover { background: var(--row-hover); }
.theme-pop button[aria-checked="true"] { font-weight: 800; }
.theme-pop button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--good); }
.theme-pop .sw { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }
.theme-pop .sw.light { background: linear-gradient(135deg, #ffffff 50%, #37003c 50%); }
.theme-pop .sw.dark { background: linear-gradient(135deg, #313338 50%, #1e1f22 50%); }
.theme-pop .sw.purple { background: linear-gradient(135deg, #26103a 50%, #2be38f 50%); }

/* ---------- Team cards (click a team name) ---------- */
a.tname { color: inherit; text-decoration: none; cursor: pointer; }
a.tname:hover { text-decoration: underline; text-underline-offset: 3px; }
.team-dialog > #team-body { padding: 0 0 24px; }
.team-hero { --team: #37003c; padding-top: 22px; padding-bottom: 22px; }
.team-badge { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #00ff85; color: #37003c; font: 800 30px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; }
.team-dialog .profile-section h3 { margin-top: 20px; }
.team-hist td { vertical-align: top; }
.team-hist td, .team-hist th { white-space: nowrap; }
@media (max-width: 700px) {
  .team-badge { width: 48px; height: 48px; font-size: 22px; }
  .team-hero { padding-top: 52px; }
}
:root[data-theme="dark"]:not([data-dark="purple"]) .team-hero { --team: #2b2d31; }

/* Hover box for waiver Net figures (one floating box, see league.js) */
.net-tip { cursor: help; border-bottom: 1px dotted currentColor; outline: none; }
.net-tip:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 3px; }
.float-tip { position: fixed; z-index: 1000; width: 300px; max-width: calc(100vw - 16px); padding: 12px 14px; border-radius: 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45); font-size: 13px; font-weight: 500; text-align: left; white-space: normal; pointer-events: none; }
.float-tip[hidden] { display: none; }
.float-tip .tt-head { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.float-tip .tt-gap { margin-top: 12px; }
.float-tip .tt-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.float-tip .tt-row b { white-space: nowrap; }
.float-tip .tt-sum { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); font-weight: 700; }
.float-tip .tt-note { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* ---------- Waivers: grouped table (Role / Per 90 / Season / Projection / Fixtures) ---------- */
table tr.grp th { padding-top: 10px; padding-bottom: 2px; border-bottom: 0; font-size: 10.5px; letter-spacing: 0.08em; color: #37003c; cursor: default; }
table tr.grp th.on { border-bottom: 2px solid #00c46a; }
:root[data-theme="dark"] table tr.grp th { color: #2be38f; }
.fa-grouped tbody tr:hover td { background: var(--row-hover); }
.fa-who { display: inline-flex; align-items: center; gap: 8px; }
.fa-who svg.kit { width: 24px; height: 24px; margin: 0; flex: none; }
.fa-who > span { display: flex; flex-direction: column; line-height: 1.25; }
.fa-who small { font-size: inherit; font-weight: inherit; }
.fa-who .flag { margin-left: 4px; }
.fa-pos { display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 800; }
.fa-pos.p1 { background: #fff1c2; color: #7a5a00; }
.fa-pos.p2 { background: #d8f7e6; color: #0d6b3c; }
.fa-pos.p3 { background: #dfe8ff; color: #1f3f9a; }
.fa-pos.p4 { background: #ffe1e1; color: #a3122a; }
:root[data-theme="dark"] .fa-pos { filter: saturate(0.9) brightness(0.92); }
.fa-grouped td.fx-end, .fa-grouped th[data-key="fix"] { padding-left: 18px; }
/* Tidier filters above the table */
#view-waivers .card-head { flex-wrap: wrap; gap: 12px; }
#view-waivers .filters { gap: 10px 12px; padding: 8px 10px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
/* Medium screens: compact chips and cells so it fits without scrolling sideways */
@media (min-width: 701px) and (max-width: 1500px) {
  .fa-grouped td, .fa-grouped th { padding-left: 5px; padding-right: 5px; }
  .fa-grouped td.chips .chip { min-width: 40px; padding: 4px 10px 4px 5px; margin-right: 2px; font-size: 11px; }
  .fa-grouped th.num { white-space: normal; }
}
@media (max-width: 700px) {
  table tr.grp { display: none; } /* columns are hidden on phones, so the groups don't line up */
  .fa-who svg.kit { width: 20px; height: 20px; }
  #view-waivers #fa-search { min-width: 0; width: 100%; }
}
/* Narrower screens: fixture pills wrap onto two lines instead of widening the table */
@media (max-width: 1200px) {
  .fa-grouped td.chips { white-space: normal; min-width: 120px; }
  .fa-grouped td.chips .chip { margin-bottom: 3px; }
  .fa-grouped .fa-who > span { white-space: normal; }
}
@media (max-width: 700px) {
  .fa-grouped td.chips { min-width: 0; }
  .fa-grouped td.chips .chip { min-width: 34px; padding: 4px 9px 4px 4px; font-size: 10.5px; }
  .fa-grouped td, .fa-grouped th { padding-left: 4px; padding-right: 4px; }
}
/* Tablets and phones: too narrow for every column, so use the phone layout (Player, Next 5,
   Claim, xPts); the rest is on each player's card. */
@media (max-width: 960px) {
  .fa-grouped .hide-sm { display: none; }
  .fa-grouped tr.grp { display: none; }
  .fa-grouped .pos-sm { display: inline; }
  .fa-grouped th.num { white-space: normal; }
}
.fa-grouped td.gw-pts, .fa-grouped th[data-key="gwPts"] { padding-left: 4px; padding-right: 4px; width: 1%; }
/* GW points pill on Waivers: light red while in game, black once the match is over */
.gw-pill { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 6px; text-align: center; font-weight: 800; }
.gw-pill.live { display: inline-flex; align-items: center; gap: 5px; padding: 0; min-width: 0; background: none; color: inherit; }
.gw-pill.done { padding: 0; min-width: 0; background: none; color: inherit; }
.low-min { opacity: 0.4; cursor: help; }
.fa-grouped td.gw-pts, .fa-grouped th[data-key="gwPts"] { text-align: center; }
/* Small, muted version of the header's "LIVE - In Play" badge next to in-game points */
.gw-pill.live { position: relative; display: inline-block; }
.gw-bug { position: absolute; left: 100%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 5px; border-radius: 50%; background: #e5393a; box-shadow: 0 0 0 2px rgba(229, 57, 58, 0.25); animation: live-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gw-bug { animation: none; } }
/* Player column only as wide as the longest name (plus a gap), so Pos sits close to the names */
@media (min-width: 1201px) { .fa-grouped th[data-key="name"], .fa-grouped tbody td:first-child { width: 1%; white-space: nowrap; padding-right: 24px; } }
@media (max-width: 1200px) { .fa-grouped tbody td:first-child { white-space: normal; min-width: 110px; } }

/* Column heading explanations (bigger, readable box) */
th[data-tip] { cursor: help; }
th[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.float-tip.head-tip { width: 320px; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.float-tip.head-tip .tt-title { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 800; color: var(--text); }
.float-tip.head-tip .tt-text { display: block; color: var(--text); font-weight: 500; }
.float-tip.head-tip .tt-note { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
/* The accent line stops short of the rounded corners: it spans the text area, not the full width. */
.float-tip.head-tip::before { content: ""; display: block; height: 3px; margin: -14px 0 12px; background: linear-gradient(90deg, #00c46a, #2bff9a); }

/* ---------- Waiver planner ---------- */
#plan-app .up { color: var(--good); font-weight: 800; }
#plan-app .down { color: var(--bad); font-weight: 800; }
.pp-intro { margin: -2px 0 18px; }
.pp-lead { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--text); }
.pp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pp-steps li { position: relative; padding: 12px 14px 12px 50px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--muted); counter-increment: step; }
.pp-steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #37003c; color: #00ff85; font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; }
:root[data-theme="dark"]:not([data-dark="purple"]) .pp-steps li::before { background: #1e1f22; }
.pp-steps b { display: block; margin-bottom: 2px; color: var(--text); font-size: 14px; }
.pp-steps em { font-style: normal; font-weight: 700; color: var(--text); }
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.pp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #ececf0; }
.pp-seg button { padding: 6px 14px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.pp-seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
:root[data-theme="dark"] .pp-seg { background: rgba(255, 255, 255, 0.08); }
.pp-btn { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.pp-btn.primary { background: #37003c; border-color: #37003c; color: #fff; }
:root[data-theme="dark"] .pp-btn.primary { background: #00ff85; border-color: #00ff85; color: #1d0221; }
.pp-btn.ghost { width: 100%; margin-top: auto; border-style: dashed; color: var(--muted); background: none; }
.pp-btn.ghost:hover { color: var(--text); border-color: var(--text); }
.pp-btn:disabled { opacity: 0.45; cursor: default; }
.pp-note { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.pp-h { margin: 22px 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pp-hot { display: inline-block; padding: 0 6px; border-radius: 999px; background: #ff8a00; color: #fff; font-size: 10.5px; font-weight: 800; }
.pp-tag { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; vertical-align: 1px; }
.pp-tag.new { background: #d8f7e6; color: #0b7a43; }
.pp-tag.out { background: #ffe1e1; color: #c8102e; }
.pp-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 16px; }
.pp-sum > div { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.pp-sum small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pp-sum b { font: 800 26px/1.15 Archivo, system-ui, sans-serif; font-stretch: 112%; }
.pp-sum span { font-size: 12px; color: var(--muted); }
.pp-sum .arrow { justify-content: center; background: none; border: 0; padding: 0 2px; color: var(--muted); font-size: 20px; }
.pp-sum .gain { background: #37003c; border-color: #37003c; }
.pp-sum .gain small, .pp-sum .gain span { color: rgba(255, 255, 255, 0.7); }
.pp-sum .gain b { color: #00ff85; }
.pp-sum .gain.down b { color: #ff8a8a; }
:root[data-theme="dark"]:not([data-dark="purple"]) .pp-sum .gain { background: #1e1f22; border-color: var(--line); }
.pa-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pa-week { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-2); }
.pa-week.open { border-color: #00c46a; box-shadow: 0 0 0 2px rgba(0, 196, 106, 0.25); }
.pa-head { display: flex; flex-direction: column; }
.pa-head b { font: 800 18px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.pa-head span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pa-pts { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pa-pts b { font: 800 22px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.pa-pts small { color: var(--muted); font-size: 11px; font-weight: 700; }
.pa-empty { margin: 0; padding: 8px; text-align: center; color: var(--muted); font-size: 12.5px; }
.pp-move { padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pp-move-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pp-move-top b { font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.pp-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.pp-x:hover { background: var(--row-hover); color: var(--bad); }
.pp-io { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.pp-io svg.kit { width: 18px; height: 18px; margin: 0; flex: none; }
.pp-io .s { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-weight: 900; font-size: 12px; }
.pp-io.in .s { background: #d8f7e6; color: #0b7a43; }
.pp-io.out .s { background: #ffe1e1; color: #c8102e; }
.pp-io a.pname { font-weight: 800; }
.pa-formwrap { margin-top: 12px; padding: 14px; border-radius: 16px; border: 2px solid #00c46a; background: var(--card); }
.pa-formwrap h4 { margin: 0 0 10px; }
.pp-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.pp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pp-form select { width: 100%; padding: 8px 10px; border-radius: 10px; }
.pp-form .pp-note { grid-column: 1 / -1; margin: 0; }
.pp-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.pp-grid th { text-align: center; cursor: default; }
.pp-grid th:first-child { text-align: left; }
.pp-grid th small { display: block; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pp-grid td { padding: 6px; border-bottom: 1px solid var(--line); }
.pp-grid tr.pp-sep td { border-top: 2px solid var(--line); }
.pp-who { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pp-who svg.kit { width: 22px; height: 22px; margin: 0; flex: none; }
.pp-who > span { display: flex; flex-direction: column; line-height: 1.25; }
.pp-who small { color: var(--muted); font-size: 11.5px; }
.pp-nl { white-space: nowrap; }
.pp-cell { text-align: center; }
.pp-cell .fx { display: flex; justify-content: center; gap: 2px; }
.pp-cell .fx .chip { margin: 0; }
.pp-cell > b { display: block; margin-top: 3px; font-size: 14px; }
.pp-cell.away span { color: var(--muted); }
.pp-cell.bench > b { color: var(--muted); font-weight: 600; }
.pp-cell.xi > b::before, .pp-dot { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #00c46a; vertical-align: 1px; }
.pp-dot { margin: 0 2px 0 0; }
.pp-tot { font-weight: 800; }
.pp-foot td { padding-top: 10px; border-bottom: 0; text-align: center; font-weight: 800; }
.pp-foot td:first-child { text-align: left; }
.pp-foot td span { display: block; font-size: 12px; }
.pp-foot b { font: 800 16px Archivo, system-ui, sans-serif; font-stretch: 112%; }
@media (max-width: 1000px) {
  .pp-steps { grid-template-columns: 1fr; }
  .pp-form { grid-template-columns: 1fr; }
}
/* Phones: the week-by-week grid keeps just the points (fixtures are on the week cards' days
   and on each player's card), so every week fits without scrolling sideways. */
@media (max-width: 700px) {
  .pp-sum b { font-size: 21px; }
  .pp-sum .arrow { display: none; }
  .pp-cell .fx { display: none; }
  .pp-who svg.kit, .pp-who small { display: none; }
  .pp-who, .pp-nl { white-space: normal; }
  .pp-grid td, .pp-grid th { padding: 6px 2px; font-size: 12px; }
  .pp-who a.pname { font-size: 12.5px; word-break: break-word; }
  .pp-who { min-width: 0; max-width: 92px; }
  .pp-tot { font-size: 12px; }
  .pp-grid th small { display: none; }
  .pp-cell > b { font-size: 12.5px; }
  .pp-cell.xi > b::before { width: 5px; height: 5px; margin-right: 2px; }
  .pp-foot b { font-size: 13px; }
}
/* Own% filters styled like the "Look ahead" control: grey pills, no outline, bold text */
.own-controls { gap: 6px; }
.own-controls > .muted.small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.own-controls select { padding: 6px 8px 6px 12px; border: 0; border-radius: 10px; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; }
.own-controls select:hover { background-color: #e2e0e8; }
:root[data-theme="dark"] .own-controls select { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .own-controls select:hover { background-color: rgba(255, 255, 255, 0.13); }
.own-controls .own-count { font-weight: 700; }
/* Dropdown lists (see dropdowns.js): the same card as the hover explanations */
.dd-menu { position: fixed; z-index: 1001; display: flex; flex-direction: column; gap: 2px; padding: 8px; overflow-y: auto; max-width: min(380px, calc(100vw - 16px)); border-radius: 14px; background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.45); }
.dd-menu[hidden] { display: none; }
.dd-menu::before { content: ""; flex: none; height: 3px; margin: -8px -8px 6px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #00c46a, #2bff9a); position: sticky; top: -8px; }
.dd-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.dd-opt:hover { background: var(--row-hover); }
.dd-opt.on { font-weight: 800; background: var(--highlight); }
.dd-opt.on::after { content: "✓"; margin-left: auto; padding-left: 12px; color: var(--good); font-weight: 900; }
.dd-opt[data-v="add"] { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; color: var(--good); font-weight: 800; }
.dd-opt:disabled { opacity: 0.4; cursor: default; }
.dd-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
select.dd-open { box-shadow: 0 0 0 2px rgba(0, 196, 106, 0.45); }

/* ---------- My team: gameweek buttons above Best Starting XI ---------- */
.gw-seg { margin: 0 0 12px; }
@media (max-width: 700px) { .gw-seg { display: flex; } .gw-seg button { flex: 1; padding: 6px 4px; } }

/* My team list: this gameweek's points, same as the Waivers column */
.sq-list td.gw-pts, .sq-list th[data-key="gwPts"] { text-align: center; }

/* ---------- Predicted lineups: the same mown pitch and player labels as My team ---------- */
:is(#lineups, #lu-body) .pitch { position: relative; overflow: hidden; gap: 16px; padding: 54px 6px 28px; border-radius: 14px;
  background: repeating-linear-gradient(180deg, #3f9d4c 0 56px, #378f45 56px 112px); }
:root[data-theme="dark"] :is(#lineups, #lu-body) .pitch { background: repeating-linear-gradient(180deg, #2f7d3b 0 56px, #2a7235 56px 112px); }
:is(#lineups, #lu-body) .sqp-lines { inset: 8px; }
:is(#lineups, #lu-body) .sqp-lines .arc { top: -46px; width: 88px; height: 88px; margin-left: -44px; }
:is(#lineups, #lu-body) .sqp-lines .box { left: 18%; right: 18%; height: 96px; }
:is(#lineups, #lu-body) .sqp-lines .six { left: 34%; right: 34%; height: 36px; }
:is(#lineups, #lu-body) .sqp-lines .d { bottom: 26px; width: 84px; height: 84px; margin-left: -42px; clip-path: inset(0 0 calc(100% - 13px) 0); }
:is(#lineups, #lu-body) .lrow { position: relative; z-index: 1; }
:is(#lineups, #lu-body) .lp { gap: 3px; color: var(--text); }
:is(#lineups, #lu-body) .lp svg.lp-kit { filter: drop-shadow(0 5px 6px rgba(40, 0, 50, 0.3)); }
:is(#lineups, #lu-body) .lp-name { padding: 3px 8px; border-radius: 6px 6px 0 0; background: #fff; border: 1px solid #e3dde8; border-bottom: 0; color: #1d0221; font-weight: 800; }
:is(#lineups, #lu-body) .lp:hover .lp-name { border-color: #37003c; }
:is(#lineups, #lu-body) .lp b { margin-top: -3px; padding: 2px 7px; border-radius: 0 0 6px 6px; background: #37003c; color: #00ff85; font: 800 12px Archivo, system-ui, sans-serif; font-stretch: 112%; white-space: nowrap; }
:is(#lineups, #lu-body) .lp.likely b { color: #ffd60a; }
:is(#lineups, #lu-body) .lp.doubt b { color: #ff8a8a; }
:is(#lineups, #lu-body) .lp.confirmed b { color: #00ff85; }
:root[data-theme="dark"]:not([data-dark="purple"]) :is(#lineups, #lu-body) .lp b { background: #1e1f22; }
@media (max-width: 700px) {
  :is(#lineups, #lu-body) .pitch { padding: 48px 2px 24px; gap: 12px; }
  :is(#lineups, #lu-body) .lp-name { padding: 2px 4px; }
  :is(#lineups, #lu-body) .lp b { padding: 1px 4px; font-size: 10.5px; }
}

/* Predicted lineups: each team's formation sits right next to its name (home on the left,
   away on the right). On bigger screens the match strip is narrower and centred, so the
   clubs sit closer to the kick-off time and the odds labels closer together. */
:is(#lineups, #lu-body) .lu-team { gap: 10px; }
:is(#lineups, #lu-body) .lu-team .muted { margin-left: 0; }
@media (min-width: 901px) { :is(#lineups, #lu-body) .lu-side + .lu-side .lu-team { justify-content: flex-end; } }
@media (min-width: 701px) {
  :is(#lineups, #lu-body) .lineup-card .matchup-strip { max-width: 460px; margin: 0 auto 14px; }
}

/* ---------- Live tab: dark match-day card, win chance, lineups (list or pitch) ---------- */
.lv-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.lv-lower { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lv-side { display: grid; gap: 16px; }
.lv-side .card, .lv-lower .card { margin: 0; }
#view-live .pulse { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ff5a6a; box-shadow: 0 0 0 3px rgba(255, 90, 106, 0.25); animation: live-pulse 1.6s ease-in-out infinite; vertical-align: 1px; }
.lv-hero { position: relative; overflow: hidden; padding: 26px 26px 20px; border-radius: 22px; color: #fff; border: 1px solid #2c2933;
  background: radial-gradient(120% 90% at 0% 0%, rgba(122, 40, 140, 0.55), transparent 60%), #1b1a20; }
.lv-hero h3 { margin: 0; color: #fff; font-size: 24px; font-weight: 900; font-stretch: 122%; text-transform: uppercase; }
.lv-hero .lead { margin: 4px 0 22px; color: #b9b0c4; font-size: 15px; }
.lv-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.lv-score small { display: block; margin-bottom: 2px; color: #b9b0c4; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-score .n { display: block; font: 800 54px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; }
.lv-score .r { text-align: right; }
.lv-score .r .n { color: #c9bfd4; }
.lv-proj { display: block; margin-top: 6px; color: #8f869b; font-size: 12.5px; }
.lv-score .mid { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lv-now { display: inline-flex; align-items: center; color: #d9d0e3; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lv-bar { display: flex; gap: 3px; margin: 24px 0 8px; }
.lv-bar i { flex: 1; height: 6px; border-radius: 3px; background: #2e2a36; }
.lv-bar i.done { background: #00c46a; }
.lv-bar i.on { background: #ff5a6a; animation: live-pulse 1.6s ease-in-out infinite; }
.lv-days { display: flex; justify-content: space-between; color: #8f869b; font-size: 11.5px; }
.lv-feed { margin: 14px 0 0; padding: 0; list-style: none; }
.lv-feed li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid #2c2933; font-size: 13.5px; }
.lv-feed li:first-child { border-top: 0; }
.lv-feed .t { width: 74px; flex: none; color: #8f869b; font-size: 12px; font-weight: 700; }
.lv-feed .w { min-width: 0; }
.lv-p { cursor: pointer; } /* live feed and Bonus Watch names: click for the player card, no hover effect */
.lv-feed li.them .w { color: #c9bfd4; }
.lv-feed .pts { margin-left: auto; font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; color: #00ff85; }
.lv-feed .pts.neg { color: #ff8a8a; }
.lv-empty { margin: 14px 0 0; color: #8f869b; }
.lv-chance { display: flex; align-items: center; gap: 16px; }
.lv-chance h3 { margin: 0 0 2px; }
.lv-ring { width: 74px; height: 74px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--line) 0); }
.lv-ring span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--card); font: 800 17px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.lv-m { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.lv-m:first-child { border-top: 0; }
.lv-m span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-m .r { text-align: right; }
.lv-m b { font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--muted); }
.lv-m b.win { color: var(--text); }
.lv-m i { font-style: normal; color: var(--muted); }
.lv-m.me { margin: 0 -8px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--good) 10%, transparent); border-top-color: transparent; }
.lv-m.me + .lv-m { border-top-color: transparent; }
/* Lists */
.lv-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lv-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.lv-col-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-col-head b { font: 800 22px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.lv-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.lv-row svg.kit { width: 20px; height: 20px; margin: 0; flex: none; }
.lv-row .pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lv-row .st { display: inline-flex; align-items: center; margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.lv-row.live .st { color: var(--bad); font-weight: 800; }
.lv-row .pt { min-width: 30px; text-align: right; font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; white-space: nowrap; }
.lv-row .pt small { margin-left: 2px; color: var(--muted); font: 700 10.5px var(--display); }
.lv-row.wait .pt { color: var(--muted); }
.lv-row.bench { opacity: 0.6; }
.lv-bench-lbl { margin: 10px 0 2px; color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
/* Pitch: both XIs facing each other, with My team's player labels */
.lv-pitch { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 26px 8px; border-radius: 16px;
  background: repeating-linear-gradient(180deg, #3f9d4c 0 56px, #378f45 56px 112px); }
:root[data-theme="dark"] .lv-pitch { background: repeating-linear-gradient(180deg, #2f7d3b 0 56px, #2a7235 56px 112px); }
.lv-pitch .sqp-lines .arc { top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; }
.lv-pitch .sqp-lines .spot { top: 50%; margin-top: -4px; }
.lv-pitch .sqp-lines .box, .lv-pitch .sqp-lines .six, .lv-pitch .sqp-lines .d { display: none; }
.lv-pitch .sqp-lines::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255, 255, 255, 0.7); }
.lv-half { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.lv-mid { position: relative; z-index: 2; align-self: center; display: flex; gap: 14px; padding: 6px 16px; border-radius: 999px; background: #1b1a20; color: #b9b0c4; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); }
.lv-mid b { color: #fff; font: 800 20px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; vertical-align: -2px; }
.sqp-p.lv-them .sqp-stat span:first-child { background: #2b2232; color: #fff; }
.sqp-p.lv-on .sqp-stat span + span { background: #e5393a; color: #fff; }
@media (max-width: 1000px) {
  .lv-grid, .lv-lower { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lv-hero { padding: 20px 18px 16px; }
  .lv-score .n { font-size: 42px; }
  .lv-score { grid-template-columns: 1fr 1fr; align-items: start; }
  .lv-score .mid { display: none; }
  .lv-lists { grid-template-columns: 1fr; }
  .lv-feed .t { width: 62px; }
  .lv-pitch { padding: 18px 2px; gap: 10px; }
  .lv-half { gap: 10px; }
}
/* Live tab: match-day card as wide as the lineups card; lists kept compact so each
   score sits close to its player */
.lv-grid, .lv-lower { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.lv-lists { grid-template-columns: repeat(2, minmax(0, 275px)); justify-content: space-around; column-gap: 32px; }
.lv-chance { gap: 12px; padding: 14px 16px; }
.lv-chance h3 { font-size: 15px; }
.lv-chance .muted { font-size: 12.5px; }
.lv-ring { width: 60px; height: 60px; }
.lv-ring span { width: 46px; height: 46px; font-size: 14px; }
.lv-side .card:not(.lv-chance) { padding: 14px 16px; }
.lv-side h3 { font-size: 15px; }
.lv-m { gap: 6px; padding: 6px 0; font-size: 12px; }
.lv-m b { font-size: 13.5px; }
@media (max-width: 1000px) { .lv-grid, .lv-lower { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .lv-lists { grid-template-columns: 1fr; } }
/* Live tab: Rest of the league reaches down to the bottom of the match-day card,
   with the matches spread out and in bigger type */
@media (min-width: 1001px) {
  .lv-grid:not(.lv-lower) { align-items: stretch; }
  .lv-side { grid-template-rows: auto 1fr; }
  .lv-side .card:not(.lv-chance) { display: flex; flex-direction: column; }
  #live-others { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
  #live-others .lv-m { gap: 8px; padding: 10px 0; font-size: 14px; font-weight: 600; }
  #live-others .lv-m b { font-size: 17px; }
  #live-others .lv-m.me { padding: 10px 8px; }
}
/* Live tab: win chance as a small dial (50% at the top, red under 45%, green over 55%) */
.lv-dial { width: 104px; height: auto; flex: none; overflow: visible; }
:root { --dial-red: #e0004d; --dial-mid: #8d8a96; --dial-green: #00a35c; --dial-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1); }
:root[data-theme="dark"] { --dial-red: #ff4d5e; --dial-mid: #fff; --dial-green: #2be38f; }
.lv-dial .z { fill: none; stroke-width: 10; stroke-linecap: round; }
.lv-dial .z.track { stroke: color-mix(in srgb, var(--text) 14%, transparent); }
.lv-dial .z.fill { transition: stroke-dashoffset 0.7s var(--dial-spring), stroke 0.45s linear; }
.lv-dial .needle { stroke: var(--text); transform-box: view-box; transform-origin: 56px 54px; transition: transform 0.7s var(--dial-spring); }
.lv-pct { transition: color 0.45s linear; }
@media (prefers-reduced-motion: reduce) { .lv-dial .z.fill, .lv-dial .needle, .lv-pct { transition: none; } }
.lv-ch-top { display: flex; align-items: center; gap: 8px; }
.lv-pill { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.lv-pill.bad { background: #ffe5e6; color: #c8102e; }
.lv-pill.even { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }
.lv-pill.good { background: #d8f7e6; color: #0b7a43; }
.lv-pct { display: inline-block; margin-right: 6px; font: 800 20px/1.2 Archivo, system-ui, sans-serif; font-stretch: 112%; }
/* Live table: the live result as points, green for a win, red for a loss */
.lv-res { font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.lv-res.W { color: var(--good); }
.lv-res.L { color: var(--bad); }
.lv-res.D { color: var(--muted); }
/* Rest of the league: how many players each team still has to play */
.lv-m small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
/* Rest of the league: green pulsing dot on the team projected to win */
.lv-fav { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #00c46a; box-shadow: 0 0 0 3px rgba(0, 196, 106, 0.22); vertical-align: 1px; animation: live-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lv-fav { animation: none; } }
.lv-fav.r { margin: 0 0 0 6px; }
.lv-m b { white-space: nowrap; }
/* Rest of the league: key for the green dot, with a hover/tap explanation */
.lv-others-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lv-others-head h3 { margin: 0; }
.lv-key { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 700; cursor: help; white-space: nowrap; }
.lv-key:hover, .lv-key:focus-visible { color: var(--text); border-color: var(--muted); }
.lv-key .lv-fav { margin-right: 5px; }
@media (min-width: 1001px) { .lv-side .lv-others-head { margin-bottom: 4px; } }
/* Live on match day: cleaner type (Inter), lighter weights, tidy numbers */
.lv-hero { font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
.lv-hero h3 { font: 800 20px/1.15 var(--display); font-stretch: 112%; letter-spacing: 0.02em; }
.lv-hero .lead { margin: 4px 0 20px; font-size: 14px; font-weight: 500; color: #a99fb5; }
.lv-score small { font-size: 12.5px; font-weight: 600; color: #a99fb5; }
.lv-score .n { font: 700 56px/1 Inter, system-ui, sans-serif; letter-spacing: -0.04em; }
.lv-proj { font-size: 12px; font-weight: 500; color: #857c91; }
.lv-now { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
.lv-days { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.lv-feed li { font-size: 13.5px; font-weight: 500; padding: 8px 0; border-top-color: rgba(255, 255, 255, 0.07); }
.lv-feed .t { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #857c91; }
.lv-feed li.them .w { color: #a99fb5; }
.lv-feed .pts { font: 700 13.5px Inter, system-ui, sans-serif; }
@media (max-width: 700px) { .lv-score .n { font-size: 44px; } }
/* Projected total and players left as a small pill, like the "Predicted to win" key */
.lv-proj { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #c9bfd4; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) { .lv-proj { white-space: normal; } }
/* Gameweek bar: bigger hover area per match, and a lift on the one being looked at */
.lv-bar { margin: 18px 0 2px; }
.lv-bar i { height: 18px; padding: 6px 0; background-clip: content-box; cursor: help; outline: none; transition: transform 0.15s; }
.lv-bar i:hover, .lv-bar i:focus-visible { transform: scaleY(1.6); }
.float-tip.head-tip .tt-text b { color: var(--text); }
.lv-bar i.done, .lv-bar i.on { background-clip: content-box; }
.float-tip.head-tip.fit { width: auto; max-width: 300px; padding: 10px 14px; white-space: nowrap; }
.float-tip.head-tip.fit::before { margin: -10px 0 8px; }
/* Scoring feed: points sit right before what happened, as a small coloured pill */
.lv-feed li { align-items: center; }
.lv-feed .t { order: 0; }
.lv-feed .pts { order: 1; margin-left: 0; min-width: 34px; padding: 2px 6px; border-radius: 6px; text-align: center; background: rgba(0, 255, 133, 0.12); }
.lv-feed .pts.neg { background: rgba(255, 107, 107, 0.16); }
.lv-feed .w { order: 2; }
/* Scoring feed: each match as a faint outlined tag (lighter than the projected pills) */
.lv-feed .t { width: auto; min-width: 70px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); color: #9a90a6; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-align: center; white-space: nowrap; }
/* Scoring feed: how each moment moved your win chance, in the space on the right */
.lv-feed .sw { order: 3; margin-left: auto; padding-left: 10px; color: #857c91; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lv-feed .sw.up { color: #5fe0a0; }
.lv-feed .sw.down { color: #ff8a8a; }
/* Bonus watch: who is in line for bonus on each side while matches are on */
.lv-bonus { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 8px 14px; margin: 14px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); font-size: 12.5px; }
.lv-bonus .lbl { color: #ffd60a; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lv-bonus > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.lv-bonus small { color: #857c91; font-size: 11px; font-weight: 600; }
.lv-bonus .bn { color: #fff; font-weight: 600; white-space: nowrap; }
.lv-bonus .bn b { color: #ffd60a; }
.lv-bonus .none { color: #857c91; }
@media (max-width: 700px) {
  .lv-feed li { flex-wrap: wrap; }
  .lv-feed .sw { flex-basis: 100%; margin: 0; padding: 2px 0 0 0; font-size: 11px; }
  .lv-bonus { grid-template-columns: 1fr; }
}
/* Feed points: exactly centred in a fixed-size pill */
.lv-feed .pts { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 38px; min-width: 38px; height: 22px; padding: 0; line-height: 1; font-variant-numeric: tabular-nums; }
/* Feed points: trim the text to the digits' own height so they sit dead centre on every screen */
.lv-feed .pts { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) { .lv-feed .pts { padding-top: 1px; } }
/* Feed points: drawn as an SVG box (see ptsBox in live.js), so the wrapper is plain */
.lv-feed .pts { display: block; width: auto; min-width: 0; height: auto; padding: 0; background: none; border-radius: 0; text-box: normal; }
.lv-feed .pts.neg { background: none; }
.lv-feed .pts-box { display: block; }
.lv-feed .t { width: 80px; min-width: 80px; flex: none; }
/* Team card: "Recent results" dropdown beside the lineup heading */
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tm-head h3 { margin: 0; }
.tm-res { position: relative; }
.tm-res summary { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.tm-res summary::-webkit-details-marker { display: none; }
.tm-res summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.tm-res[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.tm-res summary:hover { border-color: var(--muted); }
.tm-form { display: inline-flex; gap: 3px; }
.tm-form i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; }
.tm-form i.W { background: var(--good); } .tm-form i.L { background: var(--bad); } .tm-form i.D { background: #b9b0c4; }
.tm-res-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 4px; width: max-content; min-width: 280px; max-width: min(380px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.45); }
.tm-res-menu::before { content: ""; flex: none; height: 3px; margin: -8px -8px 4px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #00c46a, #2bff9a); }
.tm-res-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: #1d0221; font-size: 13.5px; }
.tm-res-row.W { background: #d8f7e6; border-color: #a6e8c6; }
.tm-res-row.L { background: #ffe1e1; border-color: #f5b5bb; }
.tm-res-row .gw { color: #6b5a72; font-size: 12px; font-weight: 700; }
.tm-res-row .opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-res-row .opp a { color: inherit; font-weight: 600; }
.tm-res-row b { font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; white-space: nowrap; }
@media (max-width: 600px) { .tm-res-menu { right: auto; left: 0; min-width: 0; width: calc(100vw - 48px); } }
/* Team card results: crisp SVG badges and lighter rows */
.tm-form { gap: 3px; }
.res-badge { display: block; flex: none; }
.tm-res summary { font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.tm-res-row { grid-template-columns: 18px 40px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border: 0; border-left: 3px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 13.5px; }
.tm-res-row.W { background: rgba(0, 168, 90, 0.08); border-left-color: #00a85a; }
.tm-res-row.L { background: rgba(229, 57, 58, 0.08); border-left-color: #e5393a; }
.tm-res-row.D { background: var(--card); border-left-color: #c9c2d1; }
.tm-res-row .gw { color: var(--muted); font-size: 12px; font-weight: 600; }
.tm-res-row .opp a { font-weight: 500; }
.tm-res-row b { font: 700 13.5px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* Win chance: bigger, cleaner copy that fills its card */
.lv-chance { gap: 18px; padding: 16px 20px; }
.lv-chance > div { flex: 1; min-width: 0; }
.lv-chance h3 { font-size: 16px; }
.lv-dial { width: 112px; }
.lv-pct { display: inline-block; margin: 4px 8px 0 0; font: 800 30px/1 Inter, system-ui, sans-serif; letter-spacing: -0.02em; vertical-align: -2px; }
.lv-chance .muted { display: block; margin-top: 6px; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; }
.lv-pill { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; padding: 2px 9px; }
/* Win chance: percentage and summary side by side on one line */
.lv-chance > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.lv-chance .lv-ch-top { grid-column: 1 / -1; margin-bottom: 4px; }
.lv-pct { margin: 0; }
.lv-chance .muted { margin: 0; font-size: 13.5px; }
.lv-chance .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Win chance: smaller percentage, larger and clearer summary */
.lv-pct { font-size: 22px; letter-spacing: -0.01em; }
.lv-chance .muted { font-size: 15px; font-weight: 600; color: var(--text); opacity: 0.72; }
.lv-chance { gap: 14px; padding: 16px 18px; }
.lv-dial { width: 92px; }
.lv-chance > div { column-gap: 8px; }
.lv-chance .muted { font-size: 14.5px; }
/* Win chance: "WIN CHANCE 25% [Likely loss]" on one line, the summary below at full width */
.lv-chance > div { display: block; }
.lv-chance .lv-ch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lv-ch-top .lv-pct { margin: 0; font-size: 20px; line-height: 1; }
.lv-chance .muted { display: block; font-size: 15px; }
.lv-chance .muted { white-space: normal; overflow: visible; line-height: 1.4; font-size: 14px; }
/* Win chance: players left to play, You and Them side by side */
.lv-left { display: flex; gap: 22px; }
.lv-left span { display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.lv-left small { margin-bottom: 1px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lv-left b { display: inline; margin-right: 4px; color: var(--text); font: 700 16px Inter, system-ui, sans-serif; }
.lv-left em { font-style: normal; }
/* League: points scored so far under each projected total */
.mcard .tms b small { display: block; color: var(--muted); font: 600 11px var(--display); }
/* League matches: bigger team names within the same card size (one line, centred on the score) */
.mcard .tms > span { align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; line-height: 1.15; }
/* League: how the season simulator works, as three icon cards */
.sim-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.sim-how li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.sim-how .ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #37003c; color: #00ff85; }
:root[data-theme="dark"]:not([data-dark="purple"]) .sim-how .ic { background: #1e1f22; }
:root:not([data-theme="dark"]) .sim-how .ic { background: #e9e9ee; color: var(--good); }
.sim-how .ic svg { width: 18px; height: 18px; }
.sim-how b { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 800; color: var(--text); }
.sim-how span:not(.ic) { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 1100px) { .sim-how { grid-template-columns: 1fr; } }
/* Predicted lineups: Out/doubtful and Could start in bigger, bolder type, same line spacing */
:is(#lineups, #lu-body) .lextra { font-size: 14.5px; line-height: 22px; font-weight: 700; }
:is(#lineups, #lu-body) .lextra strong { font-weight: 900; }
:is(#lineups, #lu-body) .lextra .muted { font-weight: 700; }
:is(#lineups, #lu-body) .lextra { line-height: 21px; }
/* Predicted lineups: bigger letters in the FA and You tags (tighter padding, so the boxes barely grow) */
:is(#lineups, #lu-body) .tag.free, :is(#lineups, #lu-body) .tag.mine { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: 1px; }
:is(#lineups, #lu-body) .lp .tag { padding: 2px 3px; font-size: 11px; font-weight: 800; }
:is(#lineups, #lu-body) .lextra .tag { padding: 3px 5px; font-size: 13px; font-weight: 800; }
/* Predicted lineups key: the same You / FA tags as on the pitches */
.lu-key .tag { display: inline-flex; align-items: center; justify-content: center; padding: 2px 4px; border-radius: 4px; line-height: 1; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.lu-key .tag.mine { background: #00ff85; border-color: #00ff85; color: #37003c; }
.lu-key .tag.free { background: #a6f0c9; border-color: #a6f0c9; color: #1d0221; }
.lu-key .tag { padding: 2px 3px; }
.lu-key .tag { padding: 3px 5px; font-size: 13px; }
.lu-key .nw { white-space: nowrap; }
/* Predicted lineups: FA tag in the same style as the start % box (purple, white letters, score font) */
:is(#lineups, #lu-body) .tag.free, .lu-key .tag.free { background: #37003c; border-color: #37003c; color: #fff; font-family: Inter, system-ui, sans-serif; font-weight: 700; border-radius: 5px; letter-spacing: 0; }
:root[data-theme="dark"]:not([data-dark="purple"]) :is(#lineups, #lu-body) .tag.free, :root[data-theme="dark"]:not([data-dark="purple"]) .lu-key .tag.free { background: #1e1f22; border-color: #1e1f22; }
:is(#lineups, #lu-body) .lp .tag.free { background: #37003c; border-color: #37003c; color: #fff; }
:root[data-theme="dark"]:not([data-dark="purple"]) :is(#lineups, #lu-body) .lp .tag.free { background: #1e1f22; border-color: #1e1f22; }
/* Predicted lineups: Out/doubtful in a grey panel joined to the bottom of the pitch */
:is(#lineups, #lu-body) .pitch.joined { margin-bottom: 0; border-radius: 14px 14px 0 0; }
:is(#lineups, #lu-body) .lu-out { margin: 0 0 8px; padding: 8px 12px; border-radius: 0 0 14px 14px; background: var(--card-2); border: 1px solid var(--line); border-top: 0; }
:is(#lineups, #lu-body) .lu-out .lextra { margin: 0; }
/* League tab dropdown: a clean card like the site's other dropdowns */
.tab-drop { padding-top: 8px; min-width: 0; }
.tab-drop::before { content: ""; position: absolute; left: 22px; top: 3px; width: 10px; height: 10px; background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); z-index: 1; }
.tab-drop a { position: relative; align-items: center; gap: 12px; width: max-content; min-width: 250px; padding: 14px 16px 12px !important; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.45); }
.tab-drop a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #00c46a, #2bff9a); }
.tab-drop a > svg { display: none; }
.tab-drop .td-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #37003c; color: #00ff85; }
:root[data-theme="dark"]:not([data-dark="purple"]) .tab-drop .td-ic { background: #1e1f22; }
:root:not([data-theme="dark"]) .tab-drop .td-ic { background: #e9e9ee; color: var(--good); }
#tabs.sb-tabs .tab-drop a.active .td-ic svg, :root[data-theme="dark"] #tabs.sb-tabs .tab-drop a.active .td-ic svg { color: inherit; }
.tab-drop .td-ic svg { width: 18px; height: 18px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tab-drop .td-tx { display: flex; flex-direction: column; line-height: 1.25; }
.tab-drop .td-tx b { font-size: 14.5px; font-weight: 800; }
.tab-drop .td-tx small { color: var(--muted); font-size: 12px; font-weight: 500; }
.tab-drop a:hover { background: var(--card-2) !important; }
.tab-drop a:hover .td-tx b { color: var(--text); }
.tab-drop a.active { background: var(--card) !important; color: var(--text) !important; box-shadow: 0 0 0 2px #00c46a inset, 0 18px 38px -14px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .tab-drop a.active { background: var(--card) !important; color: var(--text) !important; }
.tab-drop::before { display: none; }
/* League dropdown: one card holding League (first) and Analytics */
.tab-drop .td-card { display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 280px; padding: 9px 8px 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.45); position: relative; overflow: hidden; }
.tab-drop .td-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #00c46a, #2bff9a); }
.tab-drop .td-card a { width: auto; min-width: 0; padding: 9px 10px !important; border: 0; border-radius: 10px; box-shadow: none; background: none !important; }
.tab-drop .td-card a::before { display: none; }
.tab-drop .td-card a:hover { background: var(--card-2) !important; }
.tab-drop .td-card a.active { background: var(--card-2) !important; box-shadow: inset 3px 0 0 #00c46a; }
:root[data-theme="dark"] .tab-drop .td-card a.active { background: var(--card-2) !important; color: var(--text) !important; }
/* Waivers: "Waiver history" button (top right of the filters) and its card */
.wh-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wh-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wh-btn:hover { border-color: #37003c; color: #37003c; }
:root[data-theme="dark"] .wh-btn:hover { border-color: var(--accent); color: var(--accent); }
.wh-dialog { width: min(1000px, calc(100vw - 32px)); }
.wh-body { padding: 26px 24px 20px; }
.wh-body .card-head { padding-right: 36px; }
.wh-dialog { width: min(1200px, calc(100vw - 32px)); max-width: none; }
/* Waiver history on phones (League tab and the Waivers card): names wrap so the table fits */
@media (max-width: 700px) {
  #transactions table, #wh-transactions table { table-layout: auto; width: 100%; }
  #transactions th, #transactions td, #wh-transactions th, #wh-transactions td { padding: 6px 4px; font-size: 12.5px; white-space: normal; }
  #transactions td .muted, #wh-transactions td .muted { display: none; }
  #transactions td svg.kit, #wh-transactions td svg.kit { width: 16px; height: 16px; }
  .wh-body { padding: 22px 14px 16px; }
}
@media (max-width: 700px) {
  .wh-body { padding: 20px 8px 12px; }
  #transactions th, #transactions td, #wh-transactions th, #wh-transactions td { padding: 5px 3px; }
  #transactions td .flag, #wh-transactions td .flag { transform: scale(0.85); margin-left: 1px; }
  /* Fixed columns, so a long name can't push a kit or injury icon onto a line of its own. */
  #transactions table, #wh-transactions table { table-layout: fixed; }
  :is(#transactions, #wh-transactions) th[data-key="gw"] { width: 10%; font-size: 11px; white-space: nowrap; }
  :is(#transactions, #wh-transactions) th[data-key="team"] { width: 22%; }
  :is(#transactions, #wh-transactions) th[data-key="in"], :is(#transactions, #wh-transactions) th[data-key="out"] { width: 28.5%; }
  :is(#transactions, #wh-transactions) th[data-key="net"] { width: 11%; }
  :is(#transactions, #wh-transactions) td a.tname { font-size: 11.5px; }
  .tx-p { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
  .tx-p > svg.kit { flex: none; margin-right: 4px; }
  .tx-p a.pname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .tx-p.tight a.pname { font-size: 12px; }
  .tx-p.tighter a.pname { font-size: 11px; letter-spacing: -0.01em; }
  .tx-p.tiny a.pname { font-size: 10px; letter-spacing: -0.01em; }
  .tx-p .flag { flex: none; }
}
.sb-eyebrow { white-space: nowrap; } .sb-eyebrow-row { flex-wrap: wrap; row-gap: 2px; }
.sb-eyebrow { font-size: 14px; letter-spacing: 0.07em; }
/* Match strip: live score with the minute, or the full-time score */
.mrow-teams .ko.score { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 14px; }
.mrow-teams .ko.score b { font: 800 20px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
.mrow-teams .ko.score small { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); }
.mrow-teams .ko.score.on { background: #c8102e; }
.mrow-teams .ko.score.on small { color: #fff; }
.mrow-teams .ko .pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
:is(#lineups, #lu-body) .mrow-teams .ko.score { padding: 6px 16px; }
:is(#lineups, #lu-body) .mrow-teams .ko.score b { font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .mrow-teams .ko .pulse { animation: none; } }
.rank-box { display: block; }
/* Power rankings: columns sit close together (the card stays full width) */
@media (min-width: 701px) {
  #power table { width: auto; }
  #power th, #power td { padding-left: 11px; padding-right: 11px; }
  #power td.chips, #power th[data-key^="pos"] { padding-left: 5px; padding-right: 5px; }
  #power th[data-key^="pos"] { text-align: center; }
  #power td.chips .rank-box { margin: 0 auto; }
  #power td:nth-child(2), #power th[data-key="team"] { padding-right: 24px; }
}
@media (min-width: 701px) {
  #power th, #power td { padding-left: 8px; padding-right: 8px; }
  #power td.chips, #power th[data-key^="pos"] { padding-left: 3px; padding-right: 3px; }
  #power th:not([data-key="team"]), #power td:not(:nth-child(2)) { text-align: center; }
  #power th[data-key="proj"], #power td:first-child { text-align: right; }
  #power td:nth-child(2), #power th[data-key="team"] { padding-right: 16px; }
}
@media (min-width: 701px) {
  #power th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
  #power th:not([data-key="team"]) { width: 1%; min-width: 46px; }
  #power th[data-key="proj"] { min-width: 62px; }
}
/* League table: columns close together, bigger text and a bigger title-chance bar */
#standings td { font-size: 15.5px; }
#standings .lg-odds { min-width: 200px; gap: 12px; }
#standings .lg-odds .track { height: 12px; border-radius: 6px; }
#standings .lg-odds .track i { border-radius: 6px; }
#standings .lg-odds b { width: 48px; font-size: 16px; }
@media (min-width: 701px) {
  #standings table { width: auto; }
  #standings th, #standings td { padding-left: 10px; padding-right: 10px; }
  #standings th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
}
@media (max-width: 700px) { #standings td { font-size: 14px; } #standings .lg-odds { min-width: 110px; } #standings .lg-odds b { width: 40px; font-size: 14px; } }
/* League table and power rankings: cells only as wide as their contents (the site-wide 1% cell
   width makes tables stretch to fill the card) */
@media (min-width: 701px) {
  #standings th, #standings td, #power th, #power td { width: auto; }
  #power th:not([data-key="team"]) { width: auto; }
  #standings .lg-odds { min-width: 340px; }
}
@media (min-width: 701px) { #power td.chips, #power th[data-key^="pos"] { padding-left: 6px; padding-right: 6px; } }
/* League: the Table sits under the Season simulator, beside the gameweek matches */
.lg-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lg-main > .card { margin: 0; }
@media (min-width: 701px) { .lg-main #standings .lg-odds { min-width: 190px; } }
@media (min-width: 701px) { #power table { width: 100%; } }
/* League table (left column): fills its card, slightly bigger, spare room goes to the title bars */
@media (min-width: 701px) {
  .lg-main #standings table { width: 100%; }
  .lg-main #standings th[data-key="title"], .lg-main #standings td:has(> .lg-odds) { width: 100%; }
  .lg-main #standings .lg-odds { min-width: 160px; }
  .lg-main #standings td { font-size: 16.5px; padding-top: 13px; padding-bottom: 13px; }
  .lg-main #standings th { font-size: 12px; white-space: nowrap; }
}
/* Analytics: Starters vs bench and Useful scorers, side by side */
.an-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.an-pair .card { margin: 0; }
.an-key { display: flex; gap: 16px; margin: -2px 0 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.an-key span { display: inline-flex; align-items: center; gap: 6px; }
.an-key i { width: 12px; height: 12px; border-radius: 3px; }
.an-key i.st, .an-two .tc-bar.st { background: #37003c; }
.an-key i.bn, .an-two .tc-bar.bn { background: #00c46a; }
:root[data-theme="dark"] .an-key i.st, :root[data-theme="dark"] .an-two .tc-bar.st { background: #b9a3ff; }
.an-two { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 24px; }
.an-two .tc-bar { height: 10px; }
.an-slider { display: flex; align-items: center; gap: 12px; margin: -2px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.an-slider input { flex: 1; accent-color: #00a85a; cursor: pointer; }
.an-slider b { min-width: 44px; text-align: right; font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--text); }
@media (max-width: 1000px) { .an-pair { grid-template-columns: 1fr; } }
/* Analytics: Points by position (stacked bar per team) */
.an-wide { margin-bottom: 16px; }
.an-wide .tc-rows { grid-template-columns: 170px minmax(0, 1fr) auto; }
.an-stack { display: flex; height: 22px; border-radius: 0 6px 6px 0; overflow: hidden; }
.an-stack span { display: grid; place-items: center; height: 100%; min-width: 0; }
.an-stack em { font: 700 11px Inter, system-ui, sans-serif; font-style: normal; color: #fff; white-space: nowrap; }
.an-leaders { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.an-leaders span { display: inline-flex; align-items: center; gap: 6px; }
.an-leaders i { width: 10px; height: 10px; border-radius: 3px; }
.an-leaders a { font-weight: 700; }
@media (max-width: 700px) { .an-wide .tc-rows { grid-template-columns: 96px minmax(0, 1fr) auto; } .an-stack em { display: none; } }
#view-fixtures > .card + .card { margin-top: 16px; }
/* Fixtures: gameweek range slider (two handles on one track) */
.gw-range { margin: 4px 0 14px; padding: 12px 16px 10px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.gw-range-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.gw-range-top .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gw-range-top b { font: 800 17px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--text); }
.gw-range-slider { position: relative; height: 26px; }
.gw-range-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line); }
.gw-range-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #37003c, #6a1b78); }
:root[data-theme="dark"] .gw-range-track i { background: linear-gradient(90deg, #00c46a, #2bff9a); }
.gw-range-slider input { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.gw-range-slider input::-webkit-slider-runnable-track { height: 26px; background: none; }
.gw-range-slider input::-moz-range-track { height: 26px; background: none; }
.gw-range-slider input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #fff; border: 3px solid #37003c; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); cursor: grab; }
.gw-range-slider input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #37003c; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); cursor: grab; }
:root[data-theme="dark"] .gw-range-slider input::-webkit-slider-thumb { border-color: #00ff85; }
:root[data-theme="dark"] .gw-range-slider input::-moz-range-thumb { border-color: #00ff85; }
.gw-range-slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 196, 106, 0.35); }
.gw-range-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
/* Fixture ticker: each gameweek column keeps a readable width; long ranges scroll inside the card */
#ticker td.chips { min-width: 58px; white-space: nowrap; }
#ticker table { width: max-content; min-width: 100%; }
#ticker th:first-child, #ticker td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
#ticker tr.me td:first-child { background: inherit; }
.gw-range-top { flex-wrap: wrap; row-gap: 2px; } .gw-range-top b, .gw-range-top .small { white-space: nowrap; }
/* Fixtures: gameweek blocks (Next 7, +7 weeks, ... Run-in) with a season bar underneath */
.gw-blocks { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; margin-top: 4px; padding: 4px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.gw-blk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.gw-blk small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.gw-blk b { font: 800 16px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--text); white-space: nowrap; }
.gw-blk:hover { background: var(--row-hover); }
.gw-blk.on { background: #37003c; color: rgba(255, 255, 255, 0.7); }
.gw-blk.on b { color: #fff; }
.gw-blk.on small { color: #00ff85; }
:root[data-theme="dark"]:not([data-dark="purple"]) .gw-blk.on { background: #1e1f22; }
.gw-season { margin: 12px 4px 4px; }
.gw-season-track { display: grid; grid-template-columns: repeat(38, 1fr); gap: 2px; height: 10px; }
.gw-season-track i { border-radius: 2px; background: var(--line); }
.gw-season-track i.done { background: #cfc6d6; }
.gw-season-track i.sel { background: #37003c; }
:root[data-theme="dark"] .gw-season-track i.sel { background: #00c46a; }
:root[data-theme="dark"] .gw-season-track i.done { background: #5a5d63; }
.gw-season-track i.sel.first { border-radius: 5px 2px 2px 5px; }
.gw-season-track i.sel.last { border-radius: 2px 5px 5px 2px; }
.gw-season-track i.sel.first.last { border-radius: 5px; }
.gw-season-track i.now { box-shadow: 0 0 0 2px #00c46a inset; }
.gw-season-marks { position: relative; height: 18px; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.gw-season-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gw-season-marks span.edge-l { transform: none; }
.gw-season-marks span.edge-r { transform: translateX(-100%); }
.gw-season-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 4px 14px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.gw-season-key span { display: inline-flex; align-items: center; gap: 6px; }
.gw-season-key i { width: 14px; height: 8px; border-radius: 2px; }
.gw-season-key i.done { background: #cfc6d6; }
.gw-season-key i.sel { background: #37003c; }
.gw-season-key i.now { background: var(--line); box-shadow: 0 0 0 2px #00c46a inset; }
:root[data-theme="dark"] .gw-season-key i.sel { background: #00c46a; }
@media (max-width: 700px) {
  .gw-blocks { grid-template-columns: repeat(var(--n), 96px); overflow-x: auto; }
  .gw-season-track { gap: 1px; }
}
#ticker .chip.played { color: var(--muted); font-style: italic; }
/* Fixture ticker: clickable team names and the remaining-fixtures card */
.tk-team { display: inline-flex; align-items: center; gap: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.tk-team:hover strong { color: var(--good); text-decoration: underline; text-underline-offset: 3px; }
.tk-dialog { width: min(860px, calc(100vw - 32px)); }
.tk-hero { display: flex; align-items: center; gap: 16px; }
.tk-hero > svg.kit { width: 56px; height: 56px; flex: none; margin: 0; }
.tk-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tk-sum span { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.tk-sum b { font: 800 17px Archivo, system-ui, sans-serif; font-stretch: 112%; color: #fff; }
.tk-list { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.tk-row { display: grid; grid-template-columns: 74px minmax(0, 1.4fr) 64px 70px 80px minmax(0, 1.3fr); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.tk-row.empty { grid-template-columns: 74px 1fr; background: var(--card-2); }
.tk-row .gw { display: flex; flex-direction: column; font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.tk-row .gw small { font: 600 11px var(--display); color: var(--muted); white-space: nowrap; }
.tk-none { color: var(--muted); font-style: italic; font-size: 13px; }
.tk-opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-opp svg.kit { width: 24px; height: 24px; margin: 0; flex: none; }
.tk-opp b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tk-opp em { flex: none; padding: 1px 6px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tk-cs.chip { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 4px 6px; min-width: 0; }
.tk-cs b { font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.tk-cs small { font-size: 9.5px; font-weight: 700; opacity: 0.8; }
.tk-xg { display: flex; flex-direction: column; align-items: center; }
.tk-xg b { font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.tk-xg small, .tk-wdl small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tk-wdl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-wdl .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.tk-wdl .bar i { display: block; height: 100%; }
.tk-wdl small b { color: var(--text); }
@media (max-width: 700px) {
  .tk-list { padding: 12px; }
  .tk-row { grid-template-columns: 58px minmax(0, 1fr) 56px; grid-template-areas: "gw opp cs" "xg xga wdl"; row-gap: 8px; }
  .tk-row .gw { grid-area: gw; } .tk-opp { grid-area: opp; } .tk-cs { grid-area: cs; }
  .tk-row .tk-xg:nth-of-type(4) { grid-area: xg; } .tk-row .tk-xg:nth-of-type(5) { grid-area: xga; }
  .tk-wdl { grid-area: wdl; grid-column: 1 / -1; }
  .tk-row .tk-xg { flex-direction: row; gap: 4px; align-items: baseline; justify-content: flex-start; }
  .tk-hero > svg.kit { width: 40px; height: 40px; }
}
.tk-hero { background: linear-gradient(120deg, #37003c, #5a1466); color: #fff; }
:root[data-theme="dark"]:not([data-dark="purple"]) .tk-hero { background: linear-gradient(120deg, #1e1f22, #2b2d31); }
.tk-hero h2 { color: #fff; }
@media (max-width: 700px) {
  .tk-row { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr) 56px; grid-template-areas: "gw opp opp cs" "xg xg xga xga" "wdl wdl wdl wdl"; }
  .tk-row.empty { grid-template-areas: none; grid-template-columns: 58px 1fr; }
  .tk-wdl { grid-column: auto; }
  .tk-sum span { padding: 5px 9px; }
}
@media (max-width: 700px) { .tk-row .tk-wdl { grid-area: wdl; } }
/* Fixture ticker: "How these odds work" pill beside the title (hover or tap for the explanation) */
.tk-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-title h3 { margin: 0; }
.tk-how svg { width: 14px; height: 14px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#ticker td:has(> .tk-team) { cursor: pointer; }
#ticker td:has(> .tk-team):hover strong { color: var(--good); text-decoration: underline; text-underline-offset: 3px; }
.theme-pop img.sw { width: 22px; height: 22px; border: 0; border-radius: 50%; }
/* Theme menu: bigger icons and text */
.theme-pop { min-width: 210px; padding: 8px; gap: 4px; }
.theme-pop button { gap: 12px; padding: 10px 12px; font-size: 16px; border-radius: 10px; }
.theme-pop img.sw { width: 30px; height: 30px; }
/* Search boxes (Waivers, Predicted lineups, All players): same soft pill as "Look ahead",
   with a magnifying glass */
input[type="search"] { -webkit-appearance: none; appearance: none; min-width: 220px; padding: 9px 14px 9px 36px; border: 1px solid transparent; border-radius: 10px;
  background: var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a72' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px 50% / 16px 16px;
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
input[type="search"]::placeholder { color: var(--muted); font-weight: 600; opacity: 1; }
input[type="search"]:hover { border-color: var(--line); }
input[type="search"]:focus { border-color: #00c46a; box-shadow: 0 0 0 3px rgba(0, 196, 106, 0.18); background-color: var(--card); }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
:root[data-theme="dark"] input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5bac1' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
@media (max-width: 700px) { input[type="search"] { min-width: 0; width: 100%; } }
#view-waivers input[type="search"] { background-color: var(--card); border-color: var(--line); }
/* Confirmed lineups after full time: points under each starter, the sub who replaced him beside */
:is(#lineups, #lu-body) .lp-ft { display: flex; align-items: stretch; gap: 3px; max-width: 100%; margin-top: -3px; }
:is(#lineups, #lu-body) .lp.ft .lp-ft > b { margin-top: 0; color: #00ff85; }
:is(#lineups, #lu-body) .lp-sub { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 6px; border-radius: 0 0 6px 6px; background: #fff; color: #1d0221; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px #e3dde8; cursor: pointer; }
:is(#lineups, #lu-body) .lp-sub i { font-style: normal; padding: 0 4px; border-radius: 4px; background: #37003c; color: #00ff85; font: 800 11px Archivo, system-ui, sans-serif; font-stretch: 112%; }
@media (max-width: 700px) { :is(#lineups, #lu-body) .lp-sub { font-size: 9.5px; padding: 1px 4px; } :is(#lineups, #lu-body) .lp-ft { flex-direction: column; align-items: center; gap: 2px; } :is(#lineups, #lu-body) .lp-sub { border-radius: 5px; } }
/* Subs sit under the starter's points, with the sub's own points always visible */
:is(#lineups, #lu-body) .lp-ft { flex-direction: column; align-items: center; gap: 3px; }
:is(#lineups, #lu-body) .lp-sub { max-width: 100%; border-radius: 6px; padding: 2px 4px 2px 6px; }
:is(#lineups, #lu-body) .lp-sub em { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
:is(#lineups, #lu-body) .lp-sub i { flex: none; }
/* All players: the same filter bar as Waivers (grey rounded bar under the title, white search box,
   "Everyone / Free agents / Owned" styled like the Own% dropdowns) */
#view-players .card-head { flex-wrap: wrap; gap: 12px; }
#view-players .filters { gap: 10px 12px; padding: 8px 10px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
#view-players input[type="search"] { background-color: var(--card); border-color: var(--line); }
#view-players #owner-filter { padding: 6px 8px 6px 12px; border: 0; border-radius: 10px; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; }
#view-players #owner-filter:hover { background-color: #e2e0e8; }
:root[data-theme="dark"] #view-players #owner-filter { background-color: rgba(255, 255, 255, 0.08); }
@media (min-width: 701px) { #view-waivers .filters, #view-players .filters { flex-basis: 100%; } }
@media (max-width: 700px) { #view-players #owner-filter { width: 100%; } }
/* Live bonus points tab: a card per match, the match on the left and the bonus on the right */
.bn-head h3 { margin-bottom: 4px; }
.bn-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.bn-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 14px 16px; }
.bn-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.bn-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bn-team.r { justify-content: flex-end; text-align: right; }
.bn-team b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.bn-team svg.kit { width: 30px; height: 30px; margin: 0; flex: none; }
.bn-score, .bn-ko { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 8px; background: #37003c; color: #fff; font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; white-space: nowrap; }
.bn-score b { font: 800 20px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; }
.bn-score small { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); }
.bn-score.on { background: #c8102e; }
.bn-score.on small { color: #fff; }
.bn-score .pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
:root[data-theme="dark"]:not([data-dark="purple"]) .bn-score:not(.on), :root[data-theme="dark"]:not([data-dark="purple"]) .bn-ko { background: #1e1f22; }
.bn-list { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 3px solid #00c46a; }
.bn-list.empty { border-left-color: var(--line); }
.bn-state { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bad); }
.bn-state.ok { color: var(--good); }
.bn-row { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.bn-row svg.kit { width: 20px; height: 20px; margin: 0; flex: none; }
.bn-row .pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bn-pts { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.bn-pts.b3 { background: #37003c; color: #00ff85; }
.bn-pts.b2 { background: var(--card-2); color: var(--text); border: 2px solid #37003c; }
.bn-pts.b1 { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }
:root[data-theme="dark"] .bn-pts.b3 { background: #00c46a; color: #0b1f14; }
:root[data-theme="dark"] .bn-pts.b2 { border-color: #00c46a; }
.bn-bps { flex: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.bn-owner { margin-left: auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 600; }
.bn-row .tag { margin-left: auto; }
@media (max-width: 800px) {
  .bn-card { grid-template-columns: 1fr; }
  .bn-list { padding: 10px 0 0; border-left: 0; border-top: 3px solid #00c46a; }
  .bn-list.empty { border-top-color: var(--line); }
  .bn-team svg.kit { width: 24px; height: 24px; }
  .bn-team b { font-size: 13px; }
}
/* Ten tabs: slightly tighter on medium-width screens so "Look ahead" still fits */
@media (min-width: 701px) and (max-width: 1500px) {
  #tabs.sb-tabs a { padding: 8px 9px; gap: 6px; font-size: 13.5px; }
  #tabs.sb-tabs .sb-ahead { margin-left: 6px; }
}
@media (min-width: 701px) and (max-width: 1250px) {
  #tabs.sb-tabs a svg { display: none; }
}

/* Bonus: Apple Sports style scorebug (clean system font, big scores, small status in the middle) */
.bn-sb { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--card-2); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif; }
/* Teams sit right next to their score: home team pushed right, away team pushed left */
.bn-t { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.bn-t.r { justify-content: flex-start; }
.bn-t b { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; color: var(--text); }
.bn-t svg.kit { width: 34px; height: 34px; margin: 0; flex: none; }
.bn-sc { min-width: 24px; text-align: center; font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.bn-sc.lose { color: var(--muted); font-weight: 500; }
.bn-st { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }
.bn-st.on { color: #e5243b; }
.bn-st .pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bn-st .pulse { animation: none; } }
@media (max-width: 700px) {
  .bn-sb { gap: 10px; padding: 10px 12px; }
  .bn-t { gap: 7px; }
  .bn-t b { font-size: 18px; }
  .bn-t svg.kit { width: 28px; height: 28px; }
  .bn-sc { font-size: 32px; min-width: 20px; }
}
/* "Live Bonus Points" is a long tab name: a little less space around each tab so the menu still fits */
@media (min-width: 701px) { #tabs.sb-tabs a { padding-left: 7px; padding-right: 7px; gap: 5px; } }
@media (min-width: 701px) and (max-width: 1150px) { #tabs.sb-tabs a { padding-left: 5px; padding-right: 5px; } }
/* Bonus: the teams take a third of the card; beside them, after the green line, those getting bonus and the
   closest BPS either side of a thin line, with defensive contributions underneath */
.bn-card { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.bn-sb { padding-left: 10px; padding-right: 10px; }
.bn-side { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-left: 19px; }
/* The divider: the same rounded green bar as beside the card headings */
.bn-side::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 3px; background: #00c46a; }
.bn-side.empty::before { background: var(--line); }
.bn-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; row-gap: 4px; }
.bn-side .bn-list { min-width: 0; padding: 0; border: 0; }
.bn-side .bn-row .bn-owner { flex: 0 1 auto; max-width: 42%; }
@media (max-width: 1399px) {
  .bn-sb { gap: 8px; padding: 10px 8px; }
  .bn-t { gap: 6px; }
  .bn-t b { font-size: 18px; }
  .bn-t svg.kit { width: 28px; height: 28px; }
  .bn-sc { font-size: 32px; min-width: 20px; }
  .bn-st { min-width: 30px; font-size: 12px; }
}
@media (max-width: 1099px) {
  .bn-card { grid-template-columns: minmax(0, 1fr); }
  .bn-side { padding: 15px 0 0; }
  .bn-side::before { right: 0; bottom: auto; width: auto; height: 5px; }
}
@media (max-width: 800px) {
  .bn-cols { grid-template-columns: minmax(0, 1fr); }
  .bn-cols:not(.bn-dc-list) { row-gap: 8px; }
}
/* Bonus: FA and You tags exactly as on Predicted lineups */
.bn-row .tag.free, .bn-row .tag.mine { display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; border-radius: 5px; line-height: 1; font-size: 13px; font-weight: 800; }
.bn-row .tag.mine { background: #00ff85; border-color: #00ff85; color: #37003c; border-radius: 4px; }
.bn-row .tag.free { background: #37003c; border: 0; color: #fff; font-family: var(--score); letter-spacing: 0.02em; }
:root[data-theme="dark"]:not([data-dark="purple"]) .bn-row .tag.free { background: #1e1f22; border-color: #1e1f22; }
/* Bonus, newer look: soft panels instead of ruled lines, sentence-case headings, soft tinted numbers and thin progress bars */
.bn-side .bn-list, .bn-dc { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--card-2); }
.bn-dc-list { row-gap: 2px; column-gap: 28px; }
.bn-state { margin-bottom: 4px; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--bad); }
.bn-state.ok { color: var(--good); }
.bn-state.plain { color: var(--muted); }
.bn-row { min-height: 28px; gap: 8px; font-family: Inter, system-ui, sans-serif; font-size: 14px; }
.bn-row .pname { font-weight: 600; }
.bn-bps { font: 500 12.5px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bn-owner { font: 500 12.5px Inter, system-ui, sans-serif; }
/* Defensive contributions collapse: the whole heading row opens and closes them */
details.bn-dc { display: block; }
.bn-dc summary { display: flex; align-items: center; gap: 8px; min-height: 24px; list-style: none; cursor: pointer; border-radius: 6px; }
.bn-dc summary::-webkit-details-marker { display: none; }
.bn-dc summary:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.bn-dc summary .bn-state { margin: 0; }
.bn-dc[open] summary { margin-bottom: 4px; }
.bn-dc-sum { color: var(--muted); font: 500 12.5px Inter, system-ui, sans-serif; white-space: nowrap; }
.bn-chev { flex: none; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.bn-dc[open] .bn-chev { transform: rotate(180deg); }
@media (hover: hover) { .bn-dc summary:hover .bn-chev { stroke: var(--text); } }
@media (prefers-reduced-motion: reduce) { .bn-chev { transition: none; } }
/* The 3, 2 and 1: rounded squares in the site's fixture pill colours */
.bn-pts, :root[data-theme="dark"] .bn-pts { width: 24px; height: 24px; border: 0; border-radius: 7px; font: 700 13px Inter, system-ui, sans-serif; }
.bn-pts.b3, :root[data-theme="dark"] .bn-pts.b3 { background: var(--c5); color: #fff; }
.bn-pts.b2, :root[data-theme="dark"] .bn-pts.b2 { border: 0; background: var(--c4); color: var(--c-text); }
.bn-pts.b1, :root[data-theme="dark"] .bn-pts.b1 { border: 0; background: var(--c3); color: var(--c-text); }
.bn-rk { flex: none; width: 24px; text-align: center; color: var(--muted); font: 600 13px Inter, system-ui, sans-serif; }
.bn-bar { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.bn-bar i { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--text) 45%, transparent); }
.bn-row.hit .bn-bar i { background: var(--good); }
.bn-dc-n { flex: none; color: var(--muted); font: 500 12.5px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bn-row.hit .bn-dc-n { color: var(--text); font-weight: 600; }
.bn-plus { flex: none; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); font: 700 11.5px Inter, system-ui, sans-serif; }
/* Defensive contributions: fixed columns, so the bars, counts, +2s and owners line up down the list */
.bn-dc-list .bn-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px 40px 30px 118px; align-items: center; column-gap: 7px; }
.bn-dc-n { text-align: right; }
.bn-who { display: flex; justify-content: flex-end; min-width: 0; }
.bn-side .bn-who .bn-owner { margin: 0; max-width: 100%; }
.bn-who .tag { margin: 0; }
@media (max-width: 1399px) { .bn-dc-list .bn-row { grid-template-columns: 20px minmax(0, 1fr) 26px 36px 28px 84px; column-gap: 5px; } }
@media (max-width: 480px) {
  .bn-dc-list .bn-row { grid-template-columns: 20px minmax(0, 1fr) 36px 28px 68px; }
  .bn-dc-list .bn-bar { display: none; }
}
.bn-side .bn-list .pname { flex: none; } /* a long manager name gives way before a player's name */
.bn-side .bn-list .bn-row .bn-owner { flex: 1 1 0; min-width: 0; max-width: none; text-align: right; }
/* Planner "Your squad, week by week": same look as the All players table (one-line rows,
   name + team side by side, a Pos column, fixture chip beside the points) */
.pp-grid td { padding: 11px 7px 11px 4px; font-size: 15px; vertical-align: middle; }
.pp-grid tr.pp-sep td { border-top: 0; }
.pp-who { display: table-cell; white-space: nowrap; }
.pp-who svg.kit { width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: -6px; }
.pp-who > span { display: inline; }
.pp-who > .pp-tag { display: inline-block; margin-left: 4px; }
.pp-pos { text-align: left; color: var(--text); }
.pp-cell { white-space: nowrap; }
.pp-cell .fx { display: inline-flex; gap: 2px; vertical-align: middle; }
.pp-cell > b { display: inline-block; min-width: 42px; margin: 0 0 0 8px; text-align: left; font-size: 15px; vertical-align: middle; }
.pp-cell.away span { display: inline-block; }
@media (max-width: 700px) {
  .pp-pos { display: none; }
  .pp-who { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .pp-who .muted { display: none; }
  .pp-grid td { padding: 9px 2px; font-size: 12.5px; }
  .pp-cell > b { min-width: 0; margin: 0; font-size: 12.5px; }
  .pp-cell .fx { display: none; }
}
/* Planner squad table: each week in a box, green when he's in your best XI, grey on the bench */
.pp-cell.xi > .pp-box > b::before { content: none; }
.pp-box { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 5px; border-radius: 9px; border: 1px solid transparent; }
.pp-box > b { min-width: 30px; text-align: left; font-size: 15px; }
.pp-cell.xi .pp-box { background: #d8f7e6; border-color: #9fe5bf; }
.pp-cell.xi .pp-box > b { color: #0b5e35; }
.pp-cell.bench .pp-box { background: var(--card-2); border-color: var(--line); }
.pp-cell.bench .pp-box > b { color: var(--muted); font-weight: 600; }
:root[data-theme="dark"] .pp-cell.xi .pp-box { background: rgba(0, 196, 106, 0.18); border-color: rgba(0, 196, 106, 0.45); }
:root[data-theme="dark"] .pp-cell.xi .pp-box > b { color: #7af0b4; }
.pp-key { display: inline-block; padding: 0 6px; border-radius: 6px; border: 1px solid; font-weight: 700; }
.pp-key.xi { background: #d8f7e6; border-color: #9fe5bf; color: #0b5e35; }
.pp-key.bench { background: var(--card-2); border-color: var(--line); color: var(--muted); }
@media (max-width: 700px) {
  .pp-box { padding: 3px 5px; gap: 0; }
  .pp-box > b { min-width: 0; font-size: 12.5px; }
}
:root[data-theme="dark"] .pp-cell.bench .pp-box, :root[data-theme="dark"] .pp-key.bench { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
/* Predicted lineups: a player's points, category by category, in the hover box */
.float-tip.head-tip.fit .tt-text .tt-row { gap: 14px; padding: 3px 0; font-size: 13.5px; }
.float-tip.head-tip .tt-text .tt-row small { color: var(--muted); font-size: 12px; font-weight: 600; }
.float-tip.head-tip .tt-text .tt-row b { font-variant-numeric: tabular-nums; }
.float-tip.head-tip .tt-text .tt-sum { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); font-weight: 800; }
/* Top header: the same purple as the menu bar in Dark purple mode (#26103a). The grey dark theme keeps its own grey header. */
header.sb, :root[data-theme="dark"][data-dark="purple"] header.sb { position: relative; isolation: isolate; background: #26103a; border-bottom: 1px solid #3a2052; }

/* ---------- Top header in the landing page's style ----------
   Landing colours: plum #1a0628, lines #3a2052, text #fbf5ff, muted #bba6cf, dim #8a73a0,
   mint #2be38f, red #ff6b8a, violet glow #7b3fc4; Archivo throughout. The league name keeps its font. */
header.sb { font-family: Archivo, system-ui, sans-serif; color: #fbf5ff; }
header.sb .sb-brand { background: transparent; gap: 10px; font-weight: 800; font-stretch: 112%; font-size: 18px; color: #fbf5ff; }
header.sb .sb-brand .better { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
header.sb .beta { border-color: #3a2052; color: #bba6cf; opacity: 1; }
header.sb .sb-eyebrow { color: #2be38f; background: none; -webkit-text-fill-color: currentColor; }
/* "Lineups Locked": a clean pill in the landing page's style, red with a glowing dot */
header.sb .live-badge { gap: 5px; padding: 2px 8px 2px 7px; border: 1px solid rgba(255, 107, 138, 0.45); background: rgba(255, 107, 138, 0.14); color: #ffc2cf; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.3; }
header.sb .live-badge::before { width: 7px; height: 7px; background: #ff6b8a; box-shadow: 0 0 10px #ff6b8a; }
/* Countdowns: big white numbers, muted labels; green with a soft glow under 24 hours */
header.sb .sb-clock, header.sb .sb-team, header.sb .sb-tools { border-left-color: #3a2052; }
/* The label and the date under it stay the same size and style, as before; just the landing page's lilac */
header.sb .sb-clock > span, header.sb .sb-clock small { color: #bba6cf; opacity: 1; }
header.sb .sb-clock.hot b { color: #2be38f; background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 0 18px rgba(43, 227, 143, 0.45); }
header.sb .sb-clock.hot b .u { color: #2be38f; }
/* Your team */
header.sb .sb-avatar { background: #2be38f; color: #0b1f14; box-shadow: 0 10px 24px -10px #2be38f; }
header.sb .sb-team-text small { color: #bba6cf; opacity: 1; font-size: 10.5px; letter-spacing: 0.08em; }
header.sb .sb-team select { color: #fbf5ff; font-family: inherit; }
/* League box, Switch, theme button and Sign in like the landing page's buttons */
header.sb .sb-tools input { border-radius: 10px; border-color: #3a2052; background: rgba(255, 255, 255, 0.03); color: #fbf5ff; font-family: inherit; }
header.sb .sb-tools input:focus { border-color: #7b3fc4; outline: none; }
header.sb .sb-tools form button { color: #2be38f; background: none; -webkit-text-fill-color: currentColor; font-family: inherit; }
header.sb .sb-tools .theme-toggle { border-radius: 10px; border-color: #3a2052; background: rgba(255, 255, 255, 0.03); color: #e8dcf3; transition: border-color .2s; }
header.sb .sb-tools .theme-toggle:hover { border-color: #8a73a0; }
header.sb .account #open-sign-in { padding: 8px 14px; border: 0; border-radius: 12px; background: #2be38f; color: #0b1f14; font: 700 14px Archivo, system-ui, sans-serif; box-shadow: 0 12px 30px -12px #2be38f; transition: transform .2s, background .2s; }
header.sb .account #open-sign-in:hover { background: #5cf0ad; transform: translateY(-1px); }
header.sb .account #sign-out { border-radius: 12px; border-color: #3a2052; background: rgba(255, 255, 255, 0.03); color: #fbf5ff; font-family: inherit; }
header.sb .account #sign-out:hover { border-color: #8a73a0; }
header.sb .account-email { color: #e8dcf3; }
@media (max-width: 1250px) { header.sb .sb-clocks { border-top-color: #3a2052; } }
@media (max-width: 700px) {
  header.sb .sb-team { border-top-color: #3a2052; }
}
/* Keep the Lineups Locked pill on the same line as the gameweek */
header.sb .sb-eyebrow-row { flex-wrap: nowrap; }
header.sb .sb-info { min-width: 280px; }
@media (max-width: 700px) { header.sb .sb-info { min-width: 0; } }
@media (min-width: 1251px) and (max-width: 1320px) {
  header.sb { flex-wrap: wrap; }
  header.sb .sb-info { flex: 1 1 300px; }
  header.sb .sb-clocks { order: 5; flex: 1 1 100%; border-top: 1px solid #3a2052; }
  header.sb .sb-clock { flex: 1; padding: 10px; min-width: 0; }
  header.sb .sb-clock:first-child { border-left: 0; }
}
/* Sign-in screen shown in place of the league until you sign in */
.status .gate { max-width: 460px; margin: 40px auto; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); text-align: center; }
.status .gate h2 { margin: 0; font-size: 24px; font-weight: 900; font-stretch: 118%; text-transform: uppercase; color: var(--text); }
.status .gate p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.status .gate-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.status .gate-buttons button { padding: 11px 18px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.status .gate-buttons .primary { border: 0; background: #2be38f; color: #0b1f14; box-shadow: 0 12px 30px -12px #2be38f; }
/* Signed out: the header shows just the logo, theme and Sign in */
body.signed-out header.sb .sb-info, body.signed-out header.sb .sb-clocks, body.signed-out header.sb .sb-team, body.signed-out #open-league, body.signed-out #deadlines { display: none; }
body.signed-out header.sb .sb-tools { margin-left: auto; }
/* Find your league: team ID box with step-by-step help */
.status .gate.find { max-width: 560px; text-align: left; }
.status .gate.find h2, .status .gate.find > p { text-align: center; }
.find-form { display: flex; gap: 8px; margin-top: 18px; }
.find-form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font-size: 17px; font-weight: 700; }
.find-form input:focus { outline: 2px solid #2be38f; outline-offset: 1px; }
.find-form .primary { padding: 12px 18px; border: 0; border-radius: 12px; background: #2be38f; color: #0b1f14; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.find-form .primary:disabled { opacity: 0.6; cursor: wait; }
.status .find-error { min-height: 1em; margin: 8px 0 0; color: var(--bad); font-size: 14px; font-weight: 600; text-align: center; }
.find-choices { display: flex; flex-direction: column; gap: 8px; }
.find-choices p { margin: 0; font-weight: 700; color: var(--text); }
.find-choices button { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.find-choices button:hover { border-color: #2be38f; }
.find-help { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--card-2); }
.find-help h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }
.find-help ol { margin: 0; padding-left: 20px; color: var(--text); font-size: 14.5px; line-height: 1.55; }
.find-help li + li { margin-top: 8px; }
.find-help a { color: inherit; font-weight: 700; text-decoration: underline; }
.find-url { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.find-url mark { padding: 0 3px; border-radius: 4px; background: #2be38f; color: #0b1f14; font-weight: 800; }
.find-help > p { margin: 12px 0 0; }
/* No league open yet: the header shows just the logo, theme and account */
body.no-league header.sb .sb-info, body.no-league header.sb .sb-clocks, body.no-league header.sb .sb-team, body.no-league #open-league, body.no-league #deadlines { display: none; }
body.no-league header.sb .sb-tools { margin-left: auto; }
@media (max-width: 700px) { .find-form { flex-direction: column; } }
/* Create account: team ID box, league choice and the how-to steps */
.auth-team { display: flex; flex-direction: column; gap: 8px; }
.auth-league-choice p { margin: 4px 0; font-weight: 700; }
.auth-league-choice label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; font-weight: 600; cursor: pointer; }
.auth-dialog .find-help { margin-top: 2px; padding: 10px 12px; }
.auth-dialog .find-help summary { font-size: 13px; font-weight: 800; cursor: pointer; color: var(--text); }
.auth-dialog .find-help ol { margin-top: 8px; font-size: 13.5px; }

/* Header team banner: a button that opens your profile */
header.sb .sb-team { margin: 0; border: 0; border-left: 1px solid #3a2052; border-radius: 0; background: transparent; color: #fbf5ff; font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
header.sb .sb-team:hover, header.sb .sb-team:focus-visible { background: rgba(255, 255, 255, 0.05); }
header.sb .sb-team-text b { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
header.sb .sb-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: #bba6cf; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { header.sb .sb-team { border-left: 0; border-top: 1px solid #3a2052; } header.sb .sb-team-text b { max-width: none; } }

/* Sign up / sign in: a full screen in place of the app */
.auth-screen { display: flex; justify-content: center; padding: 34px 0 20px; }
.auth-screen[hidden] { display: none; }
.auth-card { width: min(520px, 100%); padding: 26px 28px 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 24px 60px -36px rgba(29, 2, 33, 0.45); }
.auth-tabs { display: flex; width: 100%; }
.auth-tabs button { flex: 1; padding: 8px 10px; font-size: 14px; font-weight: 700; }
.auth-tabs button.active { background: #37003c; color: #fff; }
:root[data-theme="dark"] .auth-tabs button.active { background: #2be38f; color: #0b1f14; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.auth-card h2 { margin: 0; font-size: 26px; font-weight: 900; font-stretch: 118%; text-transform: uppercase; line-height: 1.05; color: var(--text); }
.auth-card #auth-intro { margin: -4px 0 4px; font-size: 15px; }
.auth-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); }
.auth-card input:not([type="radio"]) { padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font-size: 15px; font-weight: 600; }
.auth-card input:focus { outline: 2px solid #2be38f; outline-offset: 1px; }
.auth-card .find-help { margin-top: 2px; }
.auth-card .find-help h3 { font-size: 12.5px; }
.auth-card .find-help ol { font-size: 13.5px; }
.auth-league-choice label { flex-direction: row; }
.auth-submit { margin-top: 4px; padding: 13px 18px; border: 0; border-radius: 12px; background: #2be38f; color: #0b1f14; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px -12px #2be38f; }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.find-error.ok { color: var(--good); }
.auth-card .find-error { text-align: left; margin: 0; }
@media (max-width: 700px) { .auth-screen { padding-top: 14px; } .auth-card { padding: 20px 16px; } .auth-card h2 { font-size: 22px; } }

/* Your profile: the site's grey rounded bars, pill toggles and white buttons */
.profile-dialog { width: min(640px, calc(100vw - 24px)); }
.profile-dialog .dialog-close { background: var(--card-2); color: var(--text); }
.pf-head { display: flex; align-items: center; gap: 14px; padding: 24px 24px 6px; }
.pf-head h2 { margin: 0; font-size: 22px; font-weight: 900; font-stretch: 118%; text-transform: uppercase; line-height: 1.05; color: var(--text); }
.pf-head p { margin: 4px 0 0; font-size: 14px; }
.pf-avatar { width: 52px; height: 52px; font-size: 24px; background: #2be38f; color: #0b1f14; }
.pf-sec { padding: 14px 24px 4px; }
.pf-sec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 14px; color: var(--text); }
.pf-label { min-width: 104px; color: var(--muted); font-size: 13px; font-weight: 700; }
.pf-bar input:not([type="checkbox"]), .pf-bar select { flex: 1; min-width: 150px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.pf-bar .pills { background: var(--card); }
.pf-bar .pills button { padding: 6px 12px; font-size: 13px; font-weight: 700; }
.pf-bar .pills button.active { background: #37003c; color: #fff; }
:root[data-theme="dark"] .pf-bar .pills button.active { background: #2be38f; color: #0b1f14; }
.pf-check { cursor: pointer; font-weight: 600; }
.pf-check input { width: 16px; height: 16px; accent-color: #37003c; }
:root[data-theme="dark"] .pf-check input { accent-color: #2be38f; }
.pf-plan { padding: 3px 10px; border-radius: 999px; background: #37003c; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
:root[data-theme="dark"] .pf-plan { background: #2be38f; color: #0b1f14; }
.pf-plan-text { flex: 1; min-width: 200px; color: var(--muted); }
.pf-sec .find-error { margin: 0 0 8px; text-align: left; }
.pf-sec .find-choices { margin-bottom: 8px; }
.pf-leagues-note { margin: 0 0 8px 2px; }
.pf-bar[hidden], .find-help[hidden] { display: none; }
.pf-leagues-note .link { font-size: inherit; }
@media (max-width: 700px) { #pf-league-id { width: 100%; font-size: 13px; } }
.pf-sec .find-help { margin: 0 0 8px; padding: 10px 12px; }
.pf-sec .find-help summary { font-size: 13px; font-weight: 800; cursor: pointer; color: var(--text); }
.pf-sec .find-help ol { margin-top: 8px; font-size: 13.5px; }
.pf-note { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--bad); }
.pf-note.ok { color: var(--good); }
.pf-note:empty { display: none; }
.pf-actions { display: flex; justify-content: flex-end; padding-bottom: 20px; }
.wh-btn:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 700px) { .pf-head, .pf-sec { padding-left: 16px; padding-right: 16px; } .pf-label { min-width: 0; width: 100%; } }
/* Profile text (option C, 2026-11-06): section headings, the team name and the plan badge keep
   the site's Archivo; everything else is Inter at medium weights, so it reads calmer. */
.profile-dialog .pf-sec, .profile-dialog .pf-head p, .pf-legal { font-family: Inter, system-ui, sans-serif; }
.profile-dialog .pf-sec h3 { font-family: var(--display); font-stretch: 112%; }
.profile-dialog .pf-plan { font-family: var(--display); }
.profile-dialog .pf-label { font-weight: 500; }
.profile-dialog .pf-bar b, .profile-dialog .pf-bar select, .profile-dialog .pf-bar input:not([type="checkbox"]) { font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.profile-dialog .pf-bar .pills button, .profile-dialog .wh-btn, .profile-dialog .find-help summary { font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.find-url mark { display: inline-block; white-space: nowrap; }
/* Team button: a pill like "Look ahead" (soft lilac team name, small initial, arrow); opens your profile */
header.sb .sb-team { align-self: center; gap: 8px; margin: 0 12px; padding: 5px 10px 5px 5px; border: 0; border-radius: 10px; background: #2e1544; }
header.sb .sb-team:hover, header.sb .sb-team:focus-visible { background: #37194f; }
header.sb .sb-team .sb-avatar { width: 26px; height: 26px; font-size: 14px; box-shadow: none; }
header.sb .sb-team-text b { color: #bba6cf; font-size: 13px; font-weight: 700; }
header.sb .sb-team:hover .sb-team-text b { color: #fbf5ff; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 700px) { header.sb .sb-team { margin: 8px 12px; border-top: 0; justify-content: flex-start; } }
header.sb .sb-chev { width: 15px; height: 15px; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
/* League ID in the header: the same pill look as the team button, just text (not clickable) */
header.sb .sb-league { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: #2e1544; color: #bba6cf; font-size: 15px; line-height: 1.2; font-weight: 700; white-space: nowrap; }
header.sb .sb-league b { font-weight: 800; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-league { background: rgba(255, 255, 255, 0.06); }
/* Dark (grey) theme: the header's purple-tinted text, lines and pills in matching greys */
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb { color: #f2f3f5; border-bottom-color: #3f4147; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-brand { color: #f2f3f5; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .beta { border-color: #3f4147; color: #b5bac1; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-clock, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-tools { border-left-color: #3f4147; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-clocks { border-top-color: #3f4147; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-clock b { color: #f2f3f5; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-clock > span, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-clock small { color: #b5bac1; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-league { background: #2b2d31; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team:hover, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team:focus-visible { background: #35373c; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team-text b, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-league { color: #b5bac1; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team:hover .sb-team-text b { color: #f2f3f5; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-chev { stroke: #b5bac1; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-tools .theme-toggle { border-color: #3f4147; color: #dbdee1; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-tools .theme-toggle:hover { border-color: #80848e; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .account #sign-out { border-color: #3f4147; color: #f2f3f5; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .account-email { color: #dbdee1; }
/* Light mode: header and selected tab both in the Premier League's purple (#37003c), so they match.
   (Dark purple keeps its header in its menu bar's #26103a.) */
:root:not([data-theme="dark"]) header.sb { background: #37003c; }
/* Team and League ID pills: a lighter highlight than the header (not darker), and no line between them */
:root:not([data-theme="dark"]) header.sb .sb-team, :root:not([data-theme="dark"]) header.sb .sb-league { background: rgba(255, 255, 255, 0.1); }
:root:not([data-theme="dark"]) header.sb .sb-team:hover, :root:not([data-theme="dark"]) header.sb .sb-team:focus-visible { background: rgba(255, 255, 255, 0.16); }
header.sb .sb-tools { border-left: 0; }
/* Profile badge showing the favourite club's kit */
.pf-avatar.has-kit { background: var(--card-2); border: 1px solid var(--line); }
.pf-avatar.has-kit svg.kit { width: 34px; height: 34px; margin: 0; }
/* Team badges (header and profile): the initial in a Premier League green circle (#00ff85, as on
   the Trades tab), or the favourite club's kit */
.sb-avatar, header.sb .sb-avatar, .pf-avatar { background: #00ff85; color: #37003c; }
.sb-avatar.has-kit, header.sb .sb-avatar.has-kit { background: rgba(255, 255, 255, 0.12); }
.sb-avatar.has-kit svg.kit { width: 80%; height: 80%; margin: 0; }
.pf-avatar.has-kit { background: var(--card-2); }
/* Waivers and All players: fixtures as fully rounded pills in a soft rounded tray, with "h" / "a"
   beside the team (the Fixtures tab, My team and the waiver cards keep the square chips) */
.fx-tray { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); vertical-align: middle; }
td.chips .fx-tray .chip { flex-direction: row; align-items: baseline; gap: 3px; min-width: 0; margin: 0; padding: 5px 11px; border: 0; border-radius: 999px; }
td.chips .fx-tray .chip b { font: 800 12.5px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
td.chips .fx-tray .chip .ha { position: static; order: 2; width: auto; height: auto; border-radius: 0; background: none; color: inherit; opacity: 0.75; font: 700 10px/1 Archivo, system-ui, sans-serif; text-transform: lowercase; }
td.chips .fx-tray .chip.blank { padding: 5px 14px; border: 0; background: transparent; font: 700 12.5px/1 Archivo, system-ui, sans-serif; }
@media (max-width: 700px) {
  td.chips .fx-tray .chip { padding: 4px 8px; }
  td.chips .fx-tray .chip b { font-size: 11.5px; }
}
/* All players has more columns: slightly slimmer pills so the table still fits */
#all-table td.chips .fx-tray { gap: 2px; padding: 2px; }
#all-table td.chips .fx-tray .chip { padding: 5px 6px; gap: 1px; }
#all-table td.chips .fx-tray .chip.blank { padding: 5px 8px; }
/* Menu bar as pills: the bar, the selected tab and Look ahead fully rounded (like the fixture trays) */
#tabs.sb-tabs { border-radius: 999px; padding: 4px 5px; }
#tabs.sb-tabs a { border-radius: 999px; }
#tabs.sb-tabs .sb-ahead { border-radius: 999px; padding-left: 14px; }
@media (max-width: 700px) { #tabs.sb-tabs { border-radius: 14px; } }
#tabs.sb-tabs .tab-drop a { border-radius: 10px; } /* the League dropdown keeps its own shape */
/* Look ahead pill in Inter (the rest of the menu keeps Archivo) */
#tabs.sb-tabs .sb-ahead { font-family: Inter, system-ui, sans-serif; font-weight: 500; }
#tabs.sb-tabs .sb-ahead select { font-family: Inter, system-ui, sans-serif; font-weight: 700; }
/* Fixture hover box: a small version of the Predicted lineups match strip, then the details */
.float-tip .tt-bug { display: block; width: 252px; margin: 2px 0 8px; white-space: normal; }
.float-tip .tt-bug .matchup-strip { margin: 0; }
.float-tip .tt-bug .mrow-teams { gap: 6px; padding: 6px 8px; border-radius: 10px; }
.float-tip .tt-bug .mrow-teams .side { gap: 5px; }
.float-tip .tt-bug .mrow-teams .side b { font-size: 14px; }
.float-tip .tt-bug .mrow-teams svg.kit { width: 20px; height: 20px; }
.float-tip .tt-bug .mrow-teams .ko { padding: 4px 8px; font-size: 11.5px; }
.float-tip .tt-bug .mrow-teams .ko.score b { font-size: 14px; }
.float-tip .tt-bug .odds { height: 4px; margin-top: 6px; }
.float-tip .tt-bug .odds-text { margin-top: 3px; font-size: 11px; font-weight: 700; }
.float-tip .tt-fx { display: block; white-space: normal; font-size: 12.5px; color: var(--muted); }
.float-tip .tt-fx + .tt-fx { margin-top: 2px; }
.chip.fx-tip { cursor: default; }
/* Teams that open their squad: in match strips, and as names inside hover boxes. */
[data-club][role="button"] { cursor: pointer; }
[data-club][role="button"]:hover b { text-decoration: underline; text-underline-offset: 2px; }
.float-tip.links { pointer-events: auto; }
.tip-club { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.tip-club:hover, .tip-club:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
/* Look ahead list: the same card, in Inter like the pill, with no green tick (the chosen
   option is bold on a soft highlight) */
.dd-menu[data-for="horizon"] .dd-opt { font-family: Inter, system-ui, sans-serif; font-weight: 500; }
.dd-menu[data-for="horizon"] .dd-opt.on { font-weight: 700; }
.dd-menu[data-for="horizon"] .dd-opt.on::after { content: none; }
/* Player profile: points by gameweek as rounded pills in a soft tray ("GW1 8"), same colours */
.pts-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 22px; background: var(--card-2); border: 1px solid var(--line); }
.pts-tile { flex-direction: row; align-items: baseline; gap: 6px; padding: 6px 13px; border-radius: 999px; }
.pts-tile span { font-size: 11px; font-weight: 700; }
.pts-tile strong { font-size: 16px; font-weight: 800; line-height: 1.1; }
.pts-tile.live { outline-offset: -3px; }
@media (max-width: 700px) { .pts-grid { display: flex; gap: 3px; } .pts-tile { padding: 5px 10px; } .pts-tile strong { font-size: 15px; } }
/* Player profile fixtures: the Waivers pill tray, a little bigger to suit the list */
.fixture-list td.chips .fx-tray .chip { padding: 6px 13px; }
.fixture-list td.chips .fx-tray .chip b { font-size: 13.5px; }
/* Current gameweek's points pill: a solid black outline instead of the dashed one */
.pts-tile.live { outline: 2px solid #000; outline-offset: -2px; }
:root[data-theme="dark"] .pts-tile.live { outline-color: #fff; }
/* Player profile: tidier stat boxes (rounder, no outline, same layout and sizes) */
.player-dialog .stat { border: 0; border-radius: 18px; padding: 12px 16px; }
.player-dialog .stat strong { font-variant-numeric: tabular-nums; }
/* "Played · 2 pts" / "In game" badge: a proper pill with room to breathe */
.gw-live { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 10px; font-size: 10px; line-height: 1.2; vertical-align: 1px; }
@media (max-width: 700px) { .fixture-list .gw-live { display: flex; width: max-content; margin: 3px 0 0; } }
/* Match strip, Option A "pill bug" (Predicted lineups and fixture hover boxes) */
.sbug { margin: 0; }
.sbug .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.sbug .sb-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sbug .sb-side.r { justify-content: flex-end; }
.sbug .sb-side b { font: 800 17px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.01em; color: var(--text); }
.sbug .sb-disc { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
.sbug .sb-disc svg.kit { width: 24px; height: 24px; margin: 0; }
.sbug .ko { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 14px; border-radius: 999px; background: #37003c; color: #fff; font: 800 13.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.02em; white-space: nowrap; }
.sbug .ko.score b { font: 800 15px/1 Inter, system-ui, sans-serif; }
.sbug .ko.score small { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 Inter, system-ui, sans-serif; opacity: 0.9; }
.sbug .ko.score.on { background: #c8102e; }
.sbug .ko.score.ft { background: var(--text); color: var(--card); }
.sbug .ko .pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 1.6s ease-in-out infinite; }
:root[data-theme="dark"]:not([data-dark="purple"]) .sbug .ko:not(.on):not(.ft) { background: #1e1f22; }
.sbug .sb-odds { display: flex; gap: 3px; margin-top: 7px; }
.sbug .sb-odds span { flex-basis: 0; min-width: 66px; padding: 5px 4px; border-radius: 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 11.5px/1.1 Inter, system-ui, sans-serif; }
.sbug .sb-odds span:first-child { border-radius: 999px 4px 4px 999px; }
.sbug .sb-odds span:last-child { border-radius: 4px 999px 999px 4px; }
.sbug .sb-odds .h { background: var(--c5); color: #fff; }
.sbug .sb-odds .d { background: var(--card-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.sbug .sb-odds .a { background: var(--c1); color: #fff; }
/* Predicted lineups: a little bigger */
:is(#lineups, #lu-body) .sbug .sb-side b { font-size: 20px; }
:is(#lineups, #lu-body) .sbug .sb-disc { width: 44px; height: 44px; }
:is(#lineups, #lu-body) .sbug .sb-disc svg.kit { width: 28px; height: 28px; }
:is(#lineups, #lu-body) .sbug .ko { font-size: 15px; padding: 8px 16px; }
:is(#lineups, #lu-body) .sbug .ko.score b { font-size: 17px; }
/* Inside a hover box: compact, app-sized */
.float-tip .tt-bug .sbug .sb-row { gap: 5px; padding: 3px; }
.float-tip .tt-bug .sbug .sb-side { gap: 5px; }
.float-tip .tt-bug .sbug .sb-side b { font-size: 13px; }
.float-tip .tt-bug .sbug .sb-disc { width: 26px; height: 26px; }
.float-tip .tt-bug .sbug .sb-disc svg.kit { width: 17px; height: 17px; }
.float-tip .tt-bug .sbug .ko { padding: 5px 9px; font-size: 11px; }
.float-tip .tt-bug .sbug .ko.score b { font-size: 12px; }
.float-tip .tt-bug .sbug .ko.score small { font-size: 9.5px; }
.float-tip .tt-bug .sbug .sb-odds { margin-top: 5px; gap: 2px; }
.float-tip .tt-bug .sbug .sb-odds span { min-width: 54px; padding: 4px 2px; font-size: 10px; }
@media (max-width: 700px) {
  :is(#lineups, #lu-body) .sbug .sb-side b { font-size: 15px; }
  :is(#lineups, #lu-body) .sbug .sb-disc { width: 32px; height: 32px; }
  :is(#lineups, #lu-body) .sbug .sb-disc svg.kit { width: 20px; height: 20px; }
  :is(#lineups, #lu-body) .sbug .ko { font-size: 12px; padding: 6px 10px; }
  .sbug .sb-odds span { min-width: 58px; font-size: 10.5px; }
}
/* Player profile: this gameweek's match as the pill bug, centred and not full width */
.pf-bug { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin: 0 auto; }
/* Live: Rest of the league as pill scorebugs (names and "to play" kept, score in a purple pill,
   green "predicted to win" dot beside the score, your match tinted green) */
.lv-m.sbm { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; margin: 0 0 6px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); }
.lv-m.sbm .r { padding-right: 6px; }
.lv-m.sbm.me { margin: 0 0 6px; padding: 6px 8px 6px 14px; background: color-mix(in srgb, var(--good) 14%, var(--card-2)); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.lv-m.sbm.me + .lv-m { border-top-color: var(--line); }
.lv-m.sbm .lv-score { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #37003c; overflow: visible; }
.lv-m.sbm .lv-score b { color: rgba(255, 255, 255, 0.6); font: 800 15px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.lv-m.sbm .lv-score b.win { color: #fff; }
.lv-m.sbm .lv-score i { color: rgba(255, 255, 255, 0.5); font-weight: 700; }
.lv-m.sbm .lv-score .lv-fav { background: #00ff85; box-shadow: 0 0 0 3px rgba(0, 255, 133, 0.25); }
:root[data-theme="dark"]:not([data-dark="purple"]) .lv-m.sbm .lv-score { background: #1e1f22; }
#live-others .lv-m.sbm { padding: 7px 8px 7px 14px; cursor: pointer; }
#live-others .lv-m.sbm .lv-score b { font-size: 16px; }

/* Header wordmark, matching the landing page: heavy wide letters, "Draft" in green, just smaller
   than the icon. Same in light, dark and dark purple. */
header.sb .sb-brand .word { font: 900 27px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: -0.035em; color: #fff; }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-brand .word { color: #f2f3f5; }
header.sb .sb-brand .word b { font-weight: 900; color: #2be38f; }
@media (max-width: 700px) { header.sb .sb-brand .word { font-size: 21px; } }

/* Sign-in screen: the landing page purple with its violet glow behind a clean white card.
   Same in light, dark and dark purple. The selected tab and the button are the site green. */
body:has(#auth-screen:not([hidden])) { background: #1a0628; }
body:has(#auth-screen:not([hidden])) .site-footer { color: #bba6cf; }
body:has(#auth-screen:not([hidden])) .site-footer a, body:has(#auth-screen:not([hidden])) .site-footer b, body:has(#auth-screen:not([hidden])) .site-footer strong { color: #e8dcf3; }
.auth-screen { position: relative; padding: 48px 16px 40px; overflow-x: clip; }
.auth-screen::before { content: ""; position: absolute; left: 50%; top: -120px; width: min(1100px, 140vw); height: 680px; translate: -50% 0; background: radial-gradient(closest-side, color-mix(in srgb, #7b3fc4 55%, transparent), transparent); pointer-events: none; }
.auth-card { position: relative; background: #fff; border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(0, 0, 0, 0.7); color: #1d0221; }
.auth-card h2, .auth-card label { color: #1d0221; }
.auth-card .muted, .auth-card #auth-intro { color: #6b5a72; }
.auth-card input:not([type="radio"]) { background: #f5f3f8; border-color: #e6e0eb; color: #1d0221; }
.auth-tabs { padding: 4px; border-radius: 999px; background: #f5f3f8; border: 1px solid #e6e0eb; }
.auth-tabs button { border: 0; border-radius: 999px; background: transparent; color: #6b5a72; }
.auth-tabs button.active, :root[data-theme="dark"] .auth-tabs button.active { background: #2be38f; color: #0b1f14; }
.auth-submit { border-radius: 999px; }
.auth-card .find-help { background: #f5f3f8; border-color: #e6e0eb; color: #1d0221; }
.auth-card .find-help h3, .auth-card .find-help li, .auth-card .find-help b, .auth-card .find-help a { color: #1d0221; }
.auth-card .find-help code { background: #fff; border-color: #e6e0eb; color: #1d0221; }
.auth-league-choice label { border-color: #e6e0eb; color: #1d0221; }
.auth-card .find-help .find-url { background: #fff; border-color: #e6e0eb; color: #1d0221; }
/* Sign-in card: every surface inside it white (fields, tab bar, help box, address example), with light outlines; only the selected tab and the button are green */
.auth-card input:not([type="radio"]), .auth-tabs, .auth-card .find-help, .auth-card .find-help .find-url, .auth-league-choice label { background: #fff; border: 1px solid #e6e0eb; }
.auth-card .find-help .find-url { color: #1d0221; }
/* Sign-in page header in the landing page purple, so it runs straight into the background */
body:has(#auth-screen:not([hidden])) header.sb, :root[data-theme="dark"] body:has(#auth-screen:not([hidden])) header.sb { background: color-mix(in srgb, #1a0628 75%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid #3a2052; }
body:has(#auth-screen:not([hidden])) header.sb .sb-brand { background: transparent; }
/* Sign-in: no glow or light ring behind the card, just the plain purple */
.auth-screen::before { content: none; }
.auth-card { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); }
/* The team ID box is only for Create account: keep it hidden on Sign in */
.auth-team[hidden] { display: none; }
/* Waivers: position pills and Waiver history at the top right, level with the Free agents heading */
.fa-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
/* Player Season Archive card: a wider card for the full table, filters on one row */
.ha-dialog { width: min(1180px, calc(100vw - 32px)); max-width: none; }
.ha-filters { margin: 10px 0 12px; }
/* Archive season buttons: the My team gameweek switcher style; scroll sideways on narrow screens */
.ha-seasons { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ha-seasons button { flex: none; white-space: nowrap; }
.ha-filters .ha-seasons { flex-basis: 100%; }
/* Archive: players who have left the Premier League, named but not clickable */
.pname-off { font-weight: 700; font-size: 15px; color: var(--text); }
@media (max-width: 700px) { .pname-off { font-size: 14px; } }
/* Archive hover box: a tick per upcoming fixture (green likely win, white either way, red likely loss) */
.up-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: 900; line-height: 1; }
.up-tick.win { background: #2be38f; color: #0b1f14; }
.up-tick.even { background: #fff; color: #1d0221; border: 1px solid var(--line); }
.up-tick.loss { background: #e5393a; color: #fff; }
.float-tip .tt-note .up-tick { width: 15px; height: 15px; font-size: 9px; vertical-align: -3px; }
.pname-off { cursor: help; }
/* My team swap cards: next 5 fixtures in the same pill tray as the Waivers table */
.wv-fx .fx-tray .chip { display: inline-flex; flex-direction: row; align-items: baseline; gap: 3px; min-width: 0; margin: 0; padding: 5px 9px; border: 0; border-radius: 999px; }
.wv-fx .fx-tray .chip b { font: 800 12px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
.wv-fx .fx-tray .chip .ha { position: static; order: 2; width: auto; height: auto; border-radius: 0; background: none; color: inherit; opacity: 0.75; font: 700 9.5px/1 Archivo, system-ui, sans-serif; text-transform: lowercase; }
.wv-fx .fx-tray .chip.blank { padding: 5px 12px; border: 0; background: transparent; }
.wv-fx { padding-left: 14px; padding-right: 14px; }
.wv-fx .fx-tray { gap: 2px; padding: 2px; max-width: 100%; }
.wv-fx .fx-tray .chip { padding: 4px 6px; gap: 2px; }
.wv-fx .fx-tray .chip b { font-size: 11px; }
/* Phones: a shorter header. Row 1: logo and theme. Row 2: gameweek, Lineups Locked and League ID
   as matching pills. Row 3: the league name, smaller. Then your team and the countdowns, tighter. */
@media (max-width: 700px) {
  header.sb .sb-info, header.sb .sb-tools { display: contents; }
  header.sb .sb-brand { order: 1; flex: 1 1 auto; padding: 10px 12px 6px; }
  header.sb .theme-menu { order: 1; margin-left: auto; padding: 8px 12px 4px 0; }
  header.sb .sb-eyebrow-row { order: 2; display: flex; align-items: center; gap: 6px; padding: 0 0 0 12px; }
  header.sb .sb-league { order: 2; margin: 0 12px 0 6px; }
  header.sb #account { order: 2; margin: 0; }
  header.sb #account:empty { display: none; }
  header.sb .sb-eyebrow, header.sb .live-badge, header.sb .sb-league { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; line-height: 1; white-space: nowrap; }
  header.sb .sb-eyebrow { background: rgba(255, 255, 255, 0.1); letter-spacing: 0.05em; }
  :root[data-theme="dark"] header.sb .sb-eyebrow { background: #2e1544; }
  :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-eyebrow { background: #2b2d31; }
  header.sb .live-badge { gap: 5px; font-size: 11.5px; }
  header.sb .live-badge[hidden] { display: none; }
  header.sb .sb-info h2 { order: 3; flex: 1 1 100%; margin: 0; padding: 8px 12px 8px; font-size: 16px; line-height: 1.1; }
  header.sb .sb-team { padding: 8px 12px; }
  header.sb .sb-clock { padding: 6px 10px; }
  header.sb .sb-clock b { font-size: 16px; }
}
/* Hover box for a red (hard) fixture: red accent line instead of green */
.float-tip.head-tip.bad::before { background: linear-gradient(90deg, #b8101c, #ff6b8a); }
/* Short tab names, used on phones only */
.sb-tabs .ts { display: none; }
/* Phones: the tabs as a two-row tray, in the style of My team's gameweek buttons; Look ahead underneath */
@media (max-width: 700px) {
  #tabs.sb-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: auto; max-width: none; overflow: visible; padding: 4px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); box-shadow: none; }
  #tabs.sb-tabs > a, #tabs.sb-tabs > .tab-menu > a { display: flex; justify-content: center; min-width: 0; padding: 9px 2px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  #tabs.sb-tabs > .tab-menu { display: flex; min-width: 0; }
  #tabs.sb-tabs > .tab-menu > a { flex: 1; }
  #tabs.sb-tabs .tab-drop { display: none !important; }
  #tabs.sb-tabs a svg { display: none; }
  .sb-tabs .tl { display: none; } .sb-tabs .ts { display: inline; }
  #tabs.sb-tabs > .sb-ahead { grid-column: 1 / -1; justify-content: space-between; margin: 2px 0 0; }
}
/* Waivers: fit the whole table, Next 5 included, without scrolling sideways on laptop screens.
   Compact fixture pills like All players, and slightly less space between columns. */
#fa-table td.chips .fx-tray { gap: 2px; padding: 2px; }
#fa-table td.chips .fx-tray .chip { padding: 5px 6px; gap: 1px; }
#fa-table td.chips .fx-tray .chip.blank { padding: 5px 8px; }
@media (min-width: 701px) { #fa-table th, #fa-table td { padding-left: 4px; padding-right: 4px; } #fa-table .fa-grouped td.fx-end, #fa-table .fa-grouped th[data-key="fix"] { padding-left: 10px; } }
/* Look ahead is hidden on tabs it does not affect (set in showTab) */
#tabs .sb-ahead[hidden] { display: none !important; }
/* All players: same fit as Waivers, slightly less space between columns so Next 5 shows without scrolling */
@media (min-width: 701px) { #all-table th, #all-table td { padding-left: 4px; padding-right: 4px; } }
@media (min-width: 701px) and (max-width: 1399px) {
  #all-table th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
  #all-table td.owner-col a, #all-table td.owner-col > span:not(.tag) { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
}
/* Live table: the points a team is on for now as a little scorebug pill (purple, like the match
   scores), with a pulsing red live dot and a red line sweeping back and forth above it, as on the
   landing page. Green for a win, white for a draw, red for a loss. */
.lv-res { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: #37003c; font: 800 14px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"]:not([data-dark="purple"]) .lv-res { background: #1e1f22; }
.lv-res.W { color: #00ff85; } .lv-res.D { color: #fff; } .lv-res.L { color: #ff6b8a; }
.lv-res .lv-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff6b8a; box-shadow: 0 0 8px #ff6b8a; animation: live-pulse 1.6s ease-in-out infinite; }
.lv-res::after { content: ""; position: absolute; left: 8px; top: -4px; width: 35%; height: 2px; border-radius: 2px; background: #ff6b8a; box-shadow: 0 0 6px rgba(255, 107, 138, 0.7); animation: lv-sweep 1.6s ease-in-out infinite alternate; }
@keyframes lv-sweep { from { left: 8px; } to { left: calc(65% - 8px); } }
@media (prefers-reduced-motion: reduce) { .lv-res .lv-dot, .lv-res::after { animation: none; } }
/* Live table points without the bubble: just the number in the score font, coloured by result,
   with the red live dot and the sweeping red line above it */
.lv-res, :root[data-theme="dark"]:not([data-dark="purple"]) .lv-res { padding: 4px 2px 2px; border-radius: 0; background: none; font: 800 17px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.01em; }
.lv-res.W { color: var(--good); } .lv-res.D { color: var(--muted); } .lv-res.L { color: var(--bad); }
.lv-res::after { left: 0; top: -2px; width: 45%; }
@keyframes lv-sweep { from { left: 0; } to { left: 55%; } }
/* Live table points: no moving line; the red dot flashes only while that team still has players to play */
.lv-res::after { content: none; }
.lv-res { gap: 1px; padding: 2px 0; }
.lv-res .sg { font-style: normal; }
.lv-res .lv-dot { margin-right: 5px; }
/* Live table: the live points in the same bold type as the PTS totals, just coloured by result */
.lv-res, :root[data-theme="dark"]:not([data-dark="purple"]) .lv-res { font: inherit; font-weight: 700; letter-spacing: 0; }
.lv-res b, .lv-res .sg { font: inherit; }
/* The selected tab looks bold without getting wider, so the bar (and Look ahead) never shifts when you switch tabs */
#tabs.sb-tabs a.active, #tabs.sb-tabs a.active:hover { font-weight: 600; text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor; }
/* Fixtures: club names in full, or as the three-letter code on phones (more room for the fixtures) */
.tk-short { display: none; }
@media (max-width: 700px) { .tk-full { display: none; } .tk-short { display: inline; letter-spacing: 0.02em; } }
/* Phones: smaller fixture boxes and a narrower Avg column, so more gameweeks fit before you swipe */
@media (max-width: 700px) {
  #ticker td { padding: 4px 2px; }
  #ticker th[data-key="avg"] { width: 44px; }
  #ticker td.chips { min-width: 0; }
  #ticker td.chips .chip { min-width: 46px; padding: 7px 2px 6px; border-radius: 9px; }
  #ticker td.chips .chip b { font-size: 12px; font-stretch: 105%; }
  #ticker td.chips .chip small { font-size: 10.5px; margin-top: 2px; }
  #ticker td.chips .chip .ha { width: 10px; height: 10px; font-size: 6.5px; top: 3px; right: 3px; }
  #ticker td.chips .chip.blank { min-width: 46px; padding: 7px 2px; font-size: 10.5px; }
  #ticker td:first-child strong { font-size: 13px; }
  #ticker td:first-child .kit, #ticker td:first-child svg { width: 20px; height: 20px; }
  #ticker td:nth-child(2) strong { font-size: 12.5px; }
}
/* Fixtures: this gameweek's score pill in place of "Played" (purple while live, then green / white / red at full time) */
.tk-score-cell { display: flex; justify-content: center; }
.tk-score { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: #37003c; color: #fff; white-space: nowrap; }
.tk-score b { font: 800 15px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
.tk-score small { display: inline-flex; align-items: center; gap: 4px; font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: 0.06em; opacity: 0.85; }
.tk-score .pulse { width: 6px; height: 6px; border-radius: 50%; background: #ff6b8a; box-shadow: 0 0 8px #ff6b8a; animation: live-pulse 1.6s ease-in-out infinite; }
.tk-score.won { background: var(--c5); color: #fff; }
.tk-score.drew { background: #fff; color: #1d0221; border: 1px solid var(--line); }
.tk-score.lost { background: var(--c2); color: #fff; }
:root[data-theme="dark"] .tk-score.live { background: #4a1470; }
@media (max-width: 700px) { .tk-score { flex-direction: column; gap: 2px; padding: 5px 7px; border-radius: 12px; } .tk-score b { font-size: 13px; } .tk-score small { font-size: 8.5px; } }
/* Fixtures table: crisper opponent names in the boxes (as in the Waivers pills), H / A badge unchanged */
#ticker td.chips .chip b { font: 800 15px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
@media (max-width: 700px) { #ticker td.chips .chip b { font-size: 12px; } }
/* All players on phones: a narrow player column (club and position on a small second line), short
   owner names, so Next 5 and the numbers are on screen without a long swipe */
@media (max-width: 700px) {
  #all-table td:first-child { white-space: normal; width: 1%; min-width: 96px; max-width: 118px; padding-right: 4px; line-height: 1.15; }
  #all-table td:first-child a.pname { font-size: 13.5px; }
  #all-table td:first-child > .muted { display: block; margin-top: 2px; font-size: 11px; }
  #all-table td:first-child .kit { width: 18px; height: 18px; }
  #all-table th, #all-table td { padding-left: 4px; padding-right: 4px; }
  #all-table td.owner-col a, #all-table td.owner-col > span:not(.tag) { display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  #all-table th { white-space: normal; line-height: 1.15; }
}
/* Phones: player and team cards sit lower with a slimmer purple header, so the close X stays clear of the browser's address bar */
@media (max-width: 700px) {
  .player-dialog { max-height: calc(100dvh - 116px); margin-top: auto; margin-bottom: 44px; } /* 44px: clear of Safari's bottom bar on iPhones */
  .player-dialog .dialog-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 15px; }
  .card-hero, .team-hero { gap: 12px; padding-top: 40px; padding-bottom: 10px; }
  .card-hero .hero-kit { width: 56px; height: 56px; }
  .card-hero h2 { font-size: 20px; margin: 0 0 4px; }
  .card-hero .watch-btn { top: 10px; right: 50px; padding: 5px 9px; font-size: 12.5px; }
}
/* All players: FA tag in the same style as on Predicted lineups (purple, white letters, score font) */
#view-players .tag.free { display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; line-height: 1; font-size: 12px; background: #37003c; border: 1px solid #37003c; color: #fff; font-family: var(--score); font-weight: 800; border-radius: 5px; letter-spacing: 0.02em; vertical-align: 1px; }
:root[data-theme="dark"]:not([data-dark="purple"]) #view-players .tag.free { background: #1e1f22; border-color: #1e1f22; }
/* All players: the You tag in the old FA green */
#view-players .tag.mine { background: var(--c4); border-color: var(--c4); color: var(--c-text); }
/* All players: You and FA badges centred in the Owner column */
#all-table td.owner-col:has(> .tag.free), #all-table td.owner-col:has(> a > .tag.mine) { text-align: center; }
/* Phones: League ID moves up beside the logo, and the countdowns become pills in its old spot */
@media (max-width: 700px) {
  header.sb .sb-brand { flex: 1 1 auto; min-width: 0; }
  header.sb .sb-league { order: 1; align-self: center; margin: 4px 0 0; height: 28px; font-size: 11px; }
  header.sb .theme-menu { margin-left: 8px; }
  header.sb .sb-eyebrow-row { gap: 5px; }
  header.sb .sb-clocks { order: 2; flex: 0 1 auto; display: flex; gap: 5px; margin: 0 0 0 5px; border: 0; }
  header.sb .sb-clock { flex: none; flex-direction: row; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #bba6cf; font-size: 11.5px; line-height: 1; white-space: nowrap; }
  :root[data-theme="dark"] header.sb .sb-clock { background: #2e1544; }
  :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-clock { background: #2b2d31; color: #b5bac1; }
  header.sb .sb-clock:empty { display: none; }
  header.sb .sb-clock > span { order: -1; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 1; }
  header.sb .sb-clock > span::after { content: ":"; }
  header.sb .sb-clock b { font: 800 11.5px/1 Inter, system-ui, sans-serif; color: inherit; letter-spacing: 0; }
  header.sb .sb-clock b .u { margin: 0 3px 0 0; font-size: 1em; text-transform: uppercase; }
  header.sb .sb-clock small { display: none; }
}
/* Narrow phones: a slightly smaller logo word and League ID, and short countdown labels, so each row fits */
@media (max-width: 380px) {
  header.sb .sb-brand { padding-right: 6px; }
  header.sb .sb-brand .word { font-size: 19px; }
  header.sb .sb-league { padding: 0 7px; font-size: 10.5px; }
  header.sb .theme-menu { margin-left: 6px; }
  header.sb .sb-clock > span { font-size: 0; }
  header.sb .sb-clock > span::before, header.sb .sb-clock > span::after { font-size: 11.5px; }
  #clock-lineups > span::before { content: "Lineups"; }
  #clock-waivers > span::before { content: "Waivers"; }
}
/* Phones, when both countdowns show: the short labels, so they fit on one row */
@media (max-width: 700px) {
  header.sb .sb-clocks:has(#clock-lineups:not(:empty)) .sb-clock > span { font-size: 0; }
  header.sb .sb-clocks:has(#clock-lineups:not(:empty)) .sb-clock > span::before, header.sb .sb-clocks:has(#clock-lineups:not(:empty)) .sb-clock > span::after { font-size: 11.5px; }
  header.sb .sb-clocks:has(#clock-lineups:not(:empty)) #clock-lineups > span::before { content: "Lineups"; }
  header.sb .sb-clocks:has(#clock-lineups:not(:empty)) #clock-waivers > span::before { content: "Waivers"; }
}
/* Phones: Waivers and All players show every stat column, scrolling sideways with the player pinned on the left */
@media (max-width: 700px) {
  #fa-table .hide-sm, #all-table .hide-sm { display: table-cell; }
  #fa-table td.num, #all-table td.num { white-space: nowrap; }
}
/* Team fixtures card: this gameweek's played match with the opponent and the score pill */
.tk-row.played .tk-score-cell { grid-column: 3; justify-self: center; width: max-content; }

@media (max-width: 700px) { .tk-row.played { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: none; } .tk-row.played > * { grid-area: auto; } }
@media (max-width: 700px) { #tk-body .tk-score { flex-direction: row; gap: 5px; padding: 6px 11px; border-radius: 999px; } #tk-body .tk-score b { font-size: 15px; } #tk-body .tk-score small { font-size: 10px; } }
/* Card headers (player, league member and club fixtures cards): a soft floodlight glow in place of the diagonal stripes */
.card-hero::after { background: radial-gradient(60% 120% at 88% 0%, rgba(255, 255, 255, 0.13), transparent 60%), radial-gradient(50% 90% at 100% 100%, rgba(0, 255, 133, 0.16), transparent 70%); }
.tk-hero { position: relative; overflow: hidden; }
.tk-hero > * { position: relative; z-index: 1; }
.tk-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 88% 0%, rgba(255, 255, 255, 0.13), transparent 60%), radial-gradient(50% 90% at 100% 100%, rgba(0, 255, 133, 0.16), transparent 70%); }
/* Dark purple theme only: card headers in the neutral fixture colour (#3a2052) instead of the brighter purple */
:root[data-dark="purple"] .card-hero { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--team) 85%, #000) 0%, #3a2052 70%); }
:root[data-dark="purple"] .team-hero { --team: #3a2052; }
:root[data-dark="purple"] .tk-hero { background: #3a2052; }
/* Dark purple theme: the selected gameweek block in the neutral fixture colour, like the card headers */
:root[data-dark="purple"] .gw-blk.on { background: #3a2052; }
/* Fixtures table: this gameweek's played match as a full fixture box, coloured like the others */
#ticker .tk-score-cell { display: block; }
#ticker .chip.tk-box small { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#ticker .chip.tk-live { background: #5a1466; color: #fff; }
#ticker .chip.tk-box .pulse { width: 6px; height: 6px; border-radius: 50%; background: #ff6b8a; box-shadow: 0 0 8px #ff6b8a; animation: live-pulse 1.6s ease-in-out infinite; }
/* Fixtures table: bigger letters in every fixture box (less padding, so the boxes stay the same size), and bigger scores */
@media (min-width: 701px) {
  #ticker td.chips .chip { padding: 6px 4px; }
  #ticker td.chips .chip b { font-size: 19px; }
  #ticker td.chips .chip small { margin-top: 4px; font-size: 13.5px; }
  #ticker td.chips .chip.tk-box { padding: 5px 4px; }
  #ticker td.chips .chip.tk-box b { font-size: 22px; }
  #ticker td.chips .chip.tk-box small { font-size: 12px; }
}
@media (max-width: 700px) {
  #ticker td.chips .chip { padding: 8px 2px 3px; }
  #ticker td.chips .chip b { font-size: 12.5px; }
  #ticker td.chips .chip small { margin-top: 2px; font-size: 11px; }
  #ticker td.chips .chip.tk-box { padding: 6px 2px 5px; }
  #ticker td.chips .chip.tk-box b { font-size: 16px; }
  #ticker td.chips .chip.tk-box small { margin-top: 2px; font-size: 8.5px; letter-spacing: 0; }
}
/* Club fixtures card: this gameweek's played match as the same coloured score box as the Fixtures table */
#tk-body .chip.tk-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 6px 10px; min-width: 74px; border-radius: 10px; }
#tk-body .chip.tk-box b { font: 900 18px/1 var(--score); font-stretch: 125%; letter-spacing: 0.02em; }
#tk-body .chip.tk-box small { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font: 700 10px/1 var(--score); white-space: nowrap; opacity: 0.92; }
#tk-body .chip.tk-live { background: #5a1466; color: #fff; }
#tk-body .chip.tk-box .pulse { width: 6px; height: 6px; border-radius: 50%; background: #ff6b8a; box-shadow: 0 0 8px #ff6b8a; animation: live-pulse 1.6s ease-in-out infinite; }
/* Club fixtures card: the GW labels and clean sheet boxes in the Fixtures table's wide, bold box font */
#tk-body .tk-row .gw { font: 800 16px/1.1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
#tk-body .tk-row .gw small { margin-top: 3px; font: 600 11.5px/1 var(--score); font-stretch: 112%; letter-spacing: 0.01em; }
#tk-body .tk-cs b { font: 900 17px/1 var(--score); font-stretch: 125%; letter-spacing: 0.02em; }
#tk-body .tk-cs small { margin-top: 3px; font: 600 11.5px/1 var(--score); opacity: 0.92; }
#tk-body .tk-cs.chip { padding: 6px 6px; border-radius: 10px; }
@media (max-width: 700px) { #tk-body .tk-row .gw { font-size: 14px; } #tk-body .tk-row .gw small { font-size: 10px; font-stretch: 100%; letter-spacing: 0; } #tk-body .tk-row:not(.empty) { grid-template-columns: 64px minmax(0, 1fr) 56px; } #tk-body .tk-cs b { font-size: 15px; } }
/* Club fixtures card: text sitting exactly in the middle of the clean sheet boxes */
#tk-body .tk-cs.chip { padding: 7px 6px 5px; }
/* Sign-up: "Is this you?" check showing the team, its manager and league before the account is made */
.auth-confirm { margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #00a85a 45%, transparent); background: color-mix(in srgb, #00ff85 10%, #fff); color: #1d0221; }
.auth-confirm p { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #00804a; }
.auth-who { font-size: 17px; } .auth-who b { font-weight: 800; }
.auth-where { margin: 2px 0 0; font-size: 14px; color: #5b4a68; } .auth-where b { color: #1d0221; }
.auth-confirm label { margin-top: 6px; }
.auth-confirm .link { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: #6b3fa0; text-decoration: underline; cursor: pointer; }
/* Top navigation: bolder labels on desktop (same font); on phones the Fixtures box font (wide Saira) */
@media (min-width: 701px) { #tabs.sb-tabs a { font-weight: 800; } #tabs.sb-tabs a.active { font-weight: 800; text-shadow: none; } }
@media (min-width: 701px) { #tabs.sb-tabs a { padding-left: 5px; padding-right: 5px; } }
/* Header BETA label: the landing page's "Free BETA" style (bold italic, slightly wide, no pill) */
header.sb .beta, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .beta { padding: 0; border: 0; border-radius: 0; background: none; font: italic 800 12px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: -0.01em; color: #e8dcf3; opacity: 1; align-self: center; position: relative; top: 7px; margin-left: -6px; }
@media (min-width: 701px) { #tabs.sb-tabs > .tab-menu > a { font-weight: 800; } }
/* Desktop: a bigger logo, wordmark and BETA, so they hold their own beside the league name (same header height) */
@media (min-width: 701px) {
  header.sb .sb-brand .brand-logo { width: 44px; height: 44px; }
  header.sb .sb-brand .word { font-size: 32px; }
  header.sb .beta, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .beta { font-size: 14px; top: 6px; margin-left: -7px; }
}
/* The header (and its theme menu) above the sticky tab bar, so the theme menu is never covered by the tabs, Look ahead or deadlines */
header.sb { position: relative; z-index: 30; }
/* Player card top stats in the Fixtures box style: neutral fixture colour, rounded, centred,
   the number big in the wide box font with its label small underneath */
.player-dialog .stat { align-items: center; justify-content: center; text-align: center; padding: 10px 6px; border: 0; border-radius: 10px; background: var(--c3); }
.player-dialog .stat strong { order: -1; margin: 0; font: 800 24px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.player-dialog .stat span { margin-top: 5px; font: 600 12px/1.15 var(--score); color: inherit; opacity: 0.85; }
@media (max-width: 700px) { .player-dialog .stat strong { font-size: 20px; } .player-dialog .stat span { font-size: 11px; } }
/* Fixtures intro: the "click a team" hint in bold and underlined */
.tk-hint { font-weight: 700; }
/* Club fixtures card: the summary tiles and GW labels in the player card stat style (sharp Archivo
   numbers like the fixture codes, small labels underneath, centred) */
.tk-sum span { align-items: center; justify-content: center; text-align: center; min-width: 86px; padding: 8px 10px; border-radius: 10px; font: 600 11px/1.15 var(--score); color: rgba(255, 255, 255, 0.85); }
.tk-sum b { margin-bottom: 4px; font: 800 19px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #fff; }
#tk-body .tk-row .gw { font: 800 16px/1.1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.02em; }
@media (max-width: 700px) { .tk-sum span { min-width: 0; padding: 6px 8px; } .tk-sum b { font-size: 16px; } #tk-body .tk-row .gw { font-size: 14px; } }
/* Trade builder: the "Your best XI" gain in the box's own dark text colour (it was the same green as the box, so invisible) */
:root[data-theme="dark"] .gainbox:not(.neg) strong { color: var(--accent-text); }
/* Trade breakdown: a starting week shown as a rounded green outline (a little inside the cell) instead of a filled highlight */
.bd-cell.xi { background: none; outline: 1.5px solid color-mix(in srgb, var(--good) 75%, transparent); outline-offset: -4px; border-radius: 12px; }
/* League: the simulator a little wider (Gameweek matches column narrower), and its number columns
   only as wide as their numbers so there are no big gaps; the team column takes the spare room */
@media (min-width: 1001px) { .lg-grid { grid-template-columns: minmax(0, 1fr) 310px; } }
@media (min-width: 701px) { #season-sim th:not(:first-child), #season-sim td:not(:first-child) { text-align: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; } }
/* Desktop: Now sits straight after the team names (left-aligned), and takes the spare room */
/* Desktop: the team column a set share, every other column centred under its heading, with extra room around the Title pills */
@media (min-width: 701px) { #season-sim th:first-child, #season-sim td:first-child { width: 26%; } #season-sim th[data-key="first"], #season-sim td:nth-child(5) { padding-left: 18px; padding-right: 18px; } }

/* Season simulator: title chance as a pill filled to the chance, as on the landing page */
#season-sim .tp { display: inline-block; min-width: 60px; padding: 4px 0; border-radius: 999px; text-align: center; font-weight: 800; color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, transparent) var(--p), color-mix(in srgb, var(--text) 9%, transparent) var(--p)); }
#season-sim .tp .muted { color: inherit; opacity: 0.75; }
@media (max-width: 700px) { #season-sim .tp { min-width: 44px; padding: 3px 0; } }
@media (min-width: 701px) { #season-sim table { table-layout: fixed; width: 100%; } #season-sim th:first-child { width: 28%; } #season-sim th:not(:first-child) { width: 11.6%; } #season-sim th[data-key="first"] { width: 14%; } }
/* Player card: the points-by-gameweek strip only as wide as its weeks and centred (a few weeks sit
   in a small pill in the middle; a full season fills the width), with the totals centred under it */
.pts-grid { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; justify-content: center; box-sizing: border-box; }
.pts-sum { justify-content: center; text-align: center; }
/* Points by gameweek: the GW labels in the exact style of the Fixtures gameweek blocks ("GW9–15") */
.pts-tile span { font: 800 16px/1.1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: normal; opacity: 1; }
@media (max-width: 700px) { .pts-tile span { font-size: 15px; } }
/* Phones: smaller gameweek pills so a full set fits in two tidy rows */
@media (max-width: 700px) { .pts-grid { gap: 3px; padding: 3px; } .pts-tile { gap: 4px; padding: 4px 8px; } .pts-tile span { font-size: 12px; } .pts-tile strong { font-size: 13px; } }
/* Trades verdict boxes: the small lines ("Your best XI", "expected points over 5 GWs", the partner name and verdict) bold like the player names in the lists */
.gainbox small, .their .muted { font-size: 13px; font-weight: 700; opacity: 1; }
/* Hover box for a Planner bench week: a faint, see-through grey bar instead of the green one */
.float-tip.head-tip.dim::before { background: color-mix(in srgb, var(--text) 22%, transparent); }
.float-tip.head-tip.match-bar::before { background: var(--match-bar); }
:root[data-theme="dark"] .float-tip.head-tip.match-bar { background: var(--card-2); }
/* My team waiver claim box: rival team names in bold, like the player names in lists (same size) */
.wv-claim .tname { font-weight: 700; }

/* Theme switch: a round glass button showing the current theme (sun, moon, or filled moon for Dark
   purple). Tapped, a three-way switch slides open over it from the right, the current theme lit green. */
header.sb .sb-tools .theme-toggle, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-tools .theme-toggle { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); color: #fff; transition: background .2s, border-color .2s; }
header.sb .sb-tools .theme-toggle:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); }
.theme-toggle .ti { display: none; } .theme-toggle .ti svg { width: 17px; height: 17px; }
.theme-toggle[data-current="light"] .ti.light, .theme-toggle[data-current="dark"] .ti.dark, .theme-toggle[data-current="purple"] .ti.purple { display: grid; place-items: center; }
.theme-seg { position: absolute; z-index: 40; right: -2px; top: 50%; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #2e1544; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.6); transform: translateY(-50%); transform-origin: right center; animation: theme-seg-open .18s ease-out; }
:root[data-theme="dark"]:not([data-dark="purple"]) .theme-seg { background: #2b2d31; }
.theme-seg[hidden] { display: none; }
@keyframes theme-seg-open { from { opacity: 0; transform: translateY(-50%) scaleX(0.4); } }
.theme-seg button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: none; color: #bba6cf; cursor: pointer; transition: background .15s, color .15s; }
.theme-seg button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.theme-seg button[aria-checked="true"] { background: #00ff85; color: #1d0221; box-shadow: 0 0 12px rgba(0, 255, 133, 0.35); }
.theme-seg button:focus-visible { outline: 2px solid #00ff85; outline-offset: 1px; }
.theme-seg svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .theme-seg { animation: none; } }
@media (max-width: 700px) { .theme-seg { right: 10px; top: calc(50% + 2px); } }
/* The sun in the open theme switch is yellow */
.theme-seg button[data-theme-choice="light"], .theme-seg button[data-theme-choice="light"]:hover { color: #ffd23f; }
.theme-seg button[data-theme-choice="light"][aria-checked="true"] svg { filter: drop-shadow(0 0 0.6px #1d0221) drop-shadow(0 0 0.6px #1d0221); }
/* Fixtures table hover box: the landing page's Team news ticker look (pulsing header, kit rows, coloured pills). */
.float-tip.head-tip.mt { width: 300px; padding: 10px 12px 8px; background: var(--card-2); white-space: normal; }
.float-tip.head-tip.mt::before { display: none; }
.float-tip.mt .tt-title { margin-bottom: 8px; }
.float-tip.mt .mt-head { display: flex; align-items: center; justify-content: flex-start; gap: 7px; font: 800 11px Inter, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--good); }
.float-tip.mt .mt-head.ft { color: var(--muted); }
.float-tip.mt .mt-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a6a; animation: live-pulse 1.6s ease-in-out infinite; }
.float-tip.mt .mt-head.ft .mt-dot { background: var(--muted); animation: none; }
.float-tip.mt .mt-dot.up { background: var(--good); animation: none; }
.float-tip.mt .mt-bug { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.float-tip.mt .mt-side { display: flex; align-items: center; gap: 7px; flex: 1; } .float-tip.mt .mt-side.r { justify-content: flex-end; }
.float-tip.mt .mt-side b { font: 800 15px var(--display); color: var(--text); }
.float-tip.mt .mt-side svg.kit { width: 22px; height: 22px; }
.float-tip.mt .mt-sc { padding: 3px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-text); font: 800 16px Archivo, system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.float-tip.mt .mt-sc.on { background: #6c2bd9; color: #fff; }
.float-tip.mt .mt-ko { padding: 4px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-text); font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.float-tip.mt .mt-when { display: block; margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.float-tip.mt .mt-list { display: block; margin-top: 6px; }
.float-tip.mt .mt-row { display: flex; align-items: center; gap: 8px; height: 32px; border-bottom: 1px solid var(--line); }
.float-tip.mt .mt-row:last-child { border-bottom: 0; }
.float-tip.mt .mt-row svg.kit { flex: none; width: 20px; height: 20px; }
.float-tip.mt .mt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.float-tip.mt .mt-name b { font-size: 13.5px; font-weight: 700; color: var(--text); } .float-tip.mt .mt-name small { font-size: 11px; color: var(--muted); }
.float-tip.mt .mt-ev { flex: none; padding: 2px 7px; border-radius: 6px; font: 700 11px Inter, system-ui, sans-serif; white-space: nowrap; }
.float-tip.mt .mt-ev.goal { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.float-tip.mt .mt-ev.ast { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.float-tip.mt .mt-ev.yel { background: color-mix(in srgb, #ffd23f 25%, transparent); color: #b88a00; }
:root[data-theme="dark"] .float-tip.mt .mt-ev.yel { color: #ffd23f; }
.float-tip.mt .mt-ev.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.float-tip.mt .mt-when.up { font-size: 14px; font-weight: 700; color: var(--text); }
/* Touch screens: fixture and Planner boxes are tappable (iOS only sends taps to elements that look clickable). */
@media (hover: none) { [data-mt], [data-fx], .pp-cell[data-tip], .pp-cell .chip[data-tip] { cursor: pointer; } }
/* Phones: the Fixtures match box drawn smaller, everything in it scaled together. */
@media (max-width: 700px) { .float-tip.head-tip.mt { transform: scale(0.8); transform-origin: top left; } }
/* Match box names open the club squad: the box takes clicks, names look like the site's player links on hover. */
.float-tip.head-tip.mt { pointer-events: auto; }
.float-tip.mt .mt-club { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.float-tip.mt .mt-club:hover b, .float-tip.mt .mt-club:focus-visible b { text-decoration: underline; text-underline-offset: 2px; }
/* Club squad card: Player takes the spare width, so Status sits right beside DC/90. */
@media (min-width: 701px) {
  #club-table th, #club-table td { width: 1%; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  #club-table td { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
  #club-table td.owner-col a, #club-table td.owner-col > span:not(.tag) { display: inline-block; max-width: 128px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  #club-table th:first-child, #club-table td:first-child { width: auto; }
}
#club-table th[data-key="owner"], #club-table td.owner-col { padding-left: 14px; }
/* Phones: the club squad card shows every column too, scrolling sideways. */
@media (max-width: 700px) { #club-table .hide-sm { display: table-cell; } #club-table td.num { white-space: nowrap; } }
/* Club squad card on phones: kit, name and club on one line as on desktop, with short owner names as on All players */
@media (max-width: 700px) {
  #club-table td:first-child { white-space: nowrap; width: 1%; line-height: 1.15; }
  #club-table td:first-child a.pname { font-size: 13.5px; }
  #club-table td:first-child > .muted { font-size: 11px; }
  #club-table .pos-sm { display: none; }
  #club-table td:first-child .kit { width: 18px; height: 18px; }
  #club-table th, #club-table td { padding: 5px 4px; }
  #club-table th:first-child, #club-table td:first-child { padding-right: 14px; }
  #club-table td.owner-col a, #club-table td.owner-col > span:not(.tag) { display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  #club-table th { white-space: normal; line-height: 1.15; }
}
/* All players: the Status column, a red X for a player another team owns, all three badges centred */
#view-players .tag.taken { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 0; vertical-align: 1px; }
#view-players .tag.taken svg { width: 13px; height: 13px; fill: none; stroke: #e5393a; stroke-width: 2.6; stroke-linecap: round; }
#all-table td.owner-col, #all-table th[data-key="owner"] { text-align: center; }
/* All players: FA as plain lettering in Dark purple (white) and Light (black); Dark keeps its box */
:root[data-theme="dark"][data-dark="purple"] #view-players .tag.free { background: transparent; border-color: transparent; color: #fff; }
/* All players: FA lettering in the header BETA style (italic, heavy, slightly wide Archivo) */
#view-players .tag.free { font: italic 800 12px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: -0.01em; padding: 3px 6px 3px 5px; }
:root:not([data-theme="dark"]) #view-players .tag.free { background: transparent; border-color: transparent; color: #000; }
/* All players (wider screens): the Player column only as wide as the longest name, so xPts 3GW sits right beside the names */
@media (min-width: 701px) { #all-table th:first-child, #all-table td:first-child { width: 1%; white-space: nowrap; } #all-table th[data-key="xp"] { white-space: nowrap; } }
/* All players fixture boxes: the win / draw / loss chances under the teams in the match box */
.float-tip.mt .mt-odds { display: block; margin-top: 8px; } .float-tip.mt .mt-odds .sb-odds { margin-top: 0; }
/* Waivers and All players: a confirmed starter's tick in the Start% column, in the Predicted lineups green */
.start-ok { font-weight: 900; font-size: 15px; color: var(--good); }
:root[data-theme="dark"] .start-ok { color: #00ff85; }
/* Match box odds: each part at least as wide as its words (never cut off), the rest shared by the odds, box size unchanged */
.float-tip.mt .mt-odds .sb-odds span { flex: 1 1 0; min-width: max-content; padding: 4px 7px; font-size: 10.5px; text-overflow: clip; }
/* Start%: the confirmed tick centred in its column */
td.num:has(> .start-ok) { text-align: center; }
/* All players and Waivers headings: a long press shows the explanation, so no text selection or copy menu */
#all-table th[data-key], #fa-table th[data-key] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Card close buttons: a round glass button like the header's theme button, with a drawn X exactly centred */
.dialog-close { display: grid; place-items: center; padding: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); color: #fff; font-size: 0; line-height: 0; cursor: pointer; }
.dialog-close svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.dialog-close:hover { background: rgba(255, 255, 255, 0.2); }
.player-dialog:has(.news-banner) .dialog-close { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.24); }
.player-dialog:has(.news-banner.doubt) .dialog-close { background: rgba(29, 2, 33, 0.1); border-color: rgba(29, 2, 33, 0.2); box-shadow: none; color: #1d0221; }
.profile-dialog .dialog-close { background: var(--card-2); border-color: var(--line); box-shadow: none; color: var(--text); }
@media (max-width: 700px) { .player-dialog .dialog-close { width: 32px; height: 32px; } .player-dialog .dialog-close svg { width: 15px; height: 15px; } }
/* Player card Watch: a matching glass pill with a drawn star; bright green while watching */
.card-hero .watch-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); color: #fff; font: 700 13.5px Inter, system-ui, sans-serif; }
.card-hero .watch-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.card-hero .watch-btn:hover { background: rgba(255, 255, 255, 0.2); }
.card-hero .watch-btn.on { background: #00ff85; border-color: #00ff85; box-shadow: 0 0 12px rgba(0, 255, 133, 0.35); color: #1d0221; }
.card-hero .watch-btn.on svg { fill: currentColor; }
@media (max-width: 700px) { .card-hero .watch-btn { height: 32px; padding: 0 12px; font-size: 13px; } }
.card-hero .watch-btn { top: 14px; }
@media (max-width: 700px) { .card-hero .watch-btn { top: 10px; } }
/* Trades in Dark and Dark purple: a negative best-XI change in a dark red box with white text */
:root[data-theme="dark"] .gainbox.neg { background: #8f1d25; color: #fff; }
:root[data-theme="dark"] .gainbox.neg strong { color: #fff; }
/* Desktop: the tab bar runs the full width of the page, the tabs spread evenly across it (Look ahead, where shown, at the right end) */
@media (min-width: 701px) { #tabs.sb-tabs { width: auto; justify-content: space-between; } #tabs.sb-tabs .sb-ahead { margin-left: 0; } }
/* Desktop All players: the waivers / lineups lock line in the heading row, just after the title */
#deadlines.sb-deadlines.in-head { margin: 0 0 12px 8px; align-self: center; } /* same bottom margin as the title, so the two line up */
/* Phones: no waivers / lineups lock line on All players (the header's countdown pills show it) */
@media (max-width: 700px) { body:has(#view-players:not([hidden])) #deadlines { display: none; } }
body:has(#view-bonus:not([hidden])) #deadlines { display: none; } /* Live bonus points: no deadlines line */
@media (min-width: 701px) { #view-bonus .bn-head p { max-width: none; } } /* Desktop: the intro runs the full width of its card */
/* Phones: once the coming gameweek's waivers have run, its lineup lock countdown ("Lineups") takes the waivers pill's place */
@media (max-width: 700px) {
  header.sb #clock-waivers.after-waivers { display: none; }
  header.sb .sb-clocks:has(#clock-waivers.after-waivers) #clock-lineups > span::before { content: "Lineups"; }
}
/* Phones: the deadlines line says "Lineups" rather than "Lineups lock" */
@media (max-width: 700px) { #deadlines .dl-long { display: none; } }
/* Classic leagues: this gameweek's projected scores (League) and live scores (Live) as ranked rows */
.cl-week { display: grid; gap: 4px; }
.cl-row, .lv-m.cl-live { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.cl-row.me, .lv-m.cl-live.me { border-color: var(--good); }
.cl-row .rk, .lv-m.cl-live .rk { font: 800 14px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--muted); text-align: center; }
.cl-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cl-row b, .lv-m.cl-live > b { font: 800 16px Archivo, system-ui, sans-serif; font-stretch: 112%; text-align: right; }
.cl-row b small { display: block; font: 600 11px Inter, system-ui, sans-serif; color: var(--muted); }
.lv-m.cl-live > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; font-weight: 700; }
.lv-m.cl-live small { font-size: 11px; font-weight: 600; color: var(--muted); }
/* Wording for one league type only: body.classic is set for classic (total points) leagues */
body:not(.classic) .classic-only, body.classic .h2h-only { display: none; }
/* Live: no empty win-chance box when there is no head-to-head match (classic leagues) */
#live-chance:empty { display: none; }
/* Live pitch, classic leagues: your XI over the whole pitch (penalty box at the bottom, no halfway line), your score at the top */
.lv-pitch.solo .sqp-lines::after, .lv-pitch.solo .sqp-lines .arc, .lv-pitch.solo .sqp-lines .spot { display: none; }
.lv-pitch.solo .sqp-lines .box, .lv-pitch.solo .sqp-lines .six, .lv-pitch.solo .sqp-lines .d { display: block; }
.lv-pitch.solo .lv-half { flex: 1; justify-content: space-around; gap: 22px; }
/* Classic leagues: your one lineup list centred in the card */
/* Live list: two soft panels, a coloured line right beside the points as on the gameweek tiles, the bench in its own box */
.lv-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; column-gap: 14px; gap: 14px; }
#live-match .lv-col { min-width: 0; padding: 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); }
#live-match .lv-col.lead { border-color: #00c46a; box-shadow: inset 0 0 0 1px #00c46a; }
#live-match .lv-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 2px 4px 10px; border: 0; }
#live-match .lv-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 54px 56px; gap: 7px; padding: 4px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#live-match .lv-col-head + .lv-row, #live-match .lv-bench-lbl + .lv-row { border-top: 0; }
#live-match .lv-disc { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
#live-match .lv-disc svg.kit { width: 19px; height: 19px; }
/* Points in the middle of the row with the match status after them, lined up down the panel */
#live-match .lv-row .pname { grid-column: 2; }
#live-match .lv-row .tag { grid-column: 3; }
#live-match .lv-row .pt { grid-column: 4; grid-row: 1; }
#live-match .lv-row .st { grid-column: 5; grid-row: 1; margin: 0; font: 600 11px Inter, system-ui, sans-serif; }
#live-match .lv-row.live .st { font-weight: 800; }
#live-match .lv-row .pt { --bar: color-mix(in srgb, var(--muted) 45%, transparent); display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; width: 54px; height: 28px; padding: 0 0 0 3px; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
#live-match .lv-row .pt::before { content: ""; flex: none; width: 3px; height: 17px; border-radius: 9px; background: var(--bar); }
#live-match .lv-row .pt small { margin: 0; font-size: 9.5px; }
#live-match .lv-row .pt.great { --bar: #00a35c; }
#live-match .lv-row .pt.good { --bar: #00c46a; }
#live-match .lv-row .pt.poor { --bar: #e5393a; }
#live-match .lv-bench-box { margin-top: 10px; padding: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
#live-match .lv-bench-lbl { margin: 0; padding: 0 4px 4px; }
#live-match .lv-row.bench { opacity: 1; }
#live-match .lv-row.bench .pname { font-weight: 600; color: var(--muted); }
@media (max-width: 700px) {
  .lv-lists { grid-template-columns: minmax(0, 1fr); }
  #live-match .lv-row { grid-template-columns: 30px minmax(0, 1fr) auto 54px 50px; gap: 6px; }
  #live-match .lv-row .st { font-size: 10px; }
}
.lv-lists:has(> :only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
@media (max-width: 700px) { .lv-lists:has(> :only-child) { grid-template-columns: 1fr; } }
/* Classic leagues: rest of the league and the live table stacked beside your score */
#view-live .lv-side.classic { grid-template-rows: none; align-content: start; }
/* Classic leagues: Your team across the full width, its pitch (and bench) or list centred */
#view-live .lv-lower.classic { grid-template-columns: 1fr; }
#view-live .lv-lower.classic #live-match { max-width: 760px; margin: 0 auto; }
/* Classic leagues on wider screens: the whole pitch, players and bench drawn larger, in proportion */
@media (min-width: 1001px) { #view-live .lv-lower.classic #live-match { zoom: 1.15; } }
@media (min-width: 1200px) { #view-live .lv-lower.classic #live-match { zoom: 1.3; } }
/* Classic leagues on wider screens: the enlarged pitch runs the width of the card (only the card's own edge either side) */
@media (min-width: 1001px) { #view-live .lv-lower.classic #live-match { max-width: none; } }
/* Sign in: the Resend Email link, clearly clickable, on the same line as the message */
#auth-error [data-auth-resend] { display: inline; margin: 0 0 0 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #00a35c; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Sign-in card: rows a step doesn't use stay hidden, and Forgot password? sits small under the password */
.auth-card [hidden] { display: none !important; }
.auth-forgot { margin: -6px 0 0; text-align: right; }
.auth-forgot button { padding: 0; border: 0; background: none; font: 600 13px Inter, system-ui, sans-serif; color: #00a35c; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* All players and Waivers on desktop: the search box grows to fill the filter bar, so its contents reach the right edge */
@media (min-width: 701px) { #all-search, #fa-search { flex: 1 1 220px; min-width: 200px; width: auto; max-width: none; } }
/* All players and Waivers: the search box in the same style as the dropdowns beside it (Top 200, 11-12 teams, H2H): heavy 13px lettering, full-colour text, soft fill, no outline; same size as before */
#view-players #all-search, #view-waivers #fa-search { border-color: transparent; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; }
#view-players #all-search::placeholder, #view-waivers #fa-search::placeholder { color: var(--text); font-weight: 800; opacity: 1; }
#view-players #all-search:hover, #view-waivers #fa-search:hover { border-color: transparent; background-color: #e2e0e8; }
:root[data-theme="dark"] #view-players #all-search, :root[data-theme="dark"] #view-waivers #fa-search { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] #view-players #all-search:hover, :root[data-theme="dark"] #view-waivers #fa-search:hover { background-color: rgba(255, 255, 255, 0.13); }
#view-players #all-search:focus, #view-waivers #fa-search:focus { border-color: #00c46a; }
/* Fixtures on desktop: the deadlines line in the ticker's title row (that row has no bottom margin to match) */
#deadlines.sb-deadlines.in-head.in-tk { margin: 0 0 0 4px; }
/* Desktop: on pages without Look ahead its spot stays (invisible, not clickable), so the tabs don't shift between pages */
@media (min-width: 701px) { #tabs .sb-ahead[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; } }
/* Tab bar (desktop): Look ahead and the top-scorers tile share one fixed-width spot, so the tabs never shift between pages */
#tabs .sb-top { display: none; }
@media (min-width: 701px) {
  #tabs .sb-ahead, #tabs .sb-top { width: 196px; flex: none; box-sizing: border-box; }
  #tabs .sb-ahead[hidden] { display: none !important; }
  #tabs .sb-top:not([hidden]) { display: flex; align-items: center; height: 33px; padding: 0 6px; border-radius: 999px; background: var(--card-2); overflow: hidden; text-decoration: none; }
}
/* The tile, drawn like a pitch token: kit, white name label, dark stat bar with the gameweek in green */
#tabs .sb-top .st-in { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; animation: st-in 0.35s ease; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #tabs .sb-top .st-in { animation: none; } }
#tabs .sb-top svg.kit { flex: none; width: 22px; height: 22px; }
#tabs .sb-top .st-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border-radius: 6px; background: #fff; color: #1d0221; font: 800 12px Inter, system-ui, sans-serif; }
#tabs .sb-top .st-stat { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; background: #1b1a20; color: #fff; font: 700 11.5px Inter, system-ui, sans-serif; white-space: nowrap; }
#tabs .sb-top .st-stat b { color: #2be38f; font: 800 12px Archivo, system-ui, sans-serif; font-stretch: 112%; }
/* Phones: no top-scorers tile in the tab grid */
@media (max-width: 700px) { #tabs.sb-tabs .sb-top { display: none !important; } }
/* Pitch cards, finished match: one dark bar with the gameweek in green and the points (as the tab bar's top-scorers tile) */
.sqp-stat.st-played span, :root[data-theme="dark"] .sqp-stat.st-played span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; background: #1b1a20; color: #fff; font: 700 11.5px Inter, system-ui, sans-serif; }
.sqp-stat.st-played b { color: #2be38f; font: 800 12px Archivo, system-ui, sans-serif; font-stretch: 112%; }
.sqp-stat.st-played { border-radius: 6px; }
/* Player cards: the Played / In game chip in the top-scorers tile's style (dark bubble, green label, white points) */
.gw-live, :root[data-theme="dark"] .gw-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #1b1a20; color: #fff; font: 700 11.5px Inter, system-ui, sans-serif; text-transform: none; letter-spacing: normal; }
.gw-live b { color: #2be38f; font: 800 12px Archivo, system-ui, sans-serif; font-stretch: 112%; }
/* Light mode: a soft grey behind the tile so the white name label stands out */
:root:not([data-theme="dark"]) #tabs .sb-top:not([hidden]) { background: #ececf0; }
/* Top-scorers tile: the name centred in its white label */
#tabs .sb-top .st-name { text-align: center; }
/* Waivers: the watchlist choice as a dropdown in the same style as All players' Everyone */
#view-waivers #fa-watch { padding: 6px 8px 6px 12px; border: 0; border-radius: 10px; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; }
#view-waivers #fa-watch:hover { background-color: #e2e0e8; }
:root[data-theme="dark"] #view-waivers #fa-watch { background-color: rgba(255, 255, 255, 0.08); }
@media (max-width: 700px) { #view-waivers #fa-watch { width: 100%; } }
/* "200 leagues" in the same lettering as the Everyone dropdown (heavy 13px, full text colour) */
.own-controls > .muted.small.own-count { font-size: 13px; font-weight: 800; color: var(--text); }
/* Waivers: Watchlist only as a tick box inside a pill in the dropdowns' style */
#view-waivers .fa-watch-box { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 10px; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; box-sizing: border-box; }
#view-waivers .fa-watch-box:hover { background-color: #e2e0e8; }
:root[data-theme="dark"] #view-waivers .fa-watch-box { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] #view-waivers .fa-watch-box:hover { background-color: rgba(255, 255, 255, 0.13); }
#view-waivers .fa-watch-box input { width: 15px; height: 15px; margin: 0; accent-color: #00a35c; cursor: pointer; }
@media (max-width: 700px) { #view-waivers .fa-watch-box { width: 100%; } }
/* Desktop: the active (purple / green) tab stays bold when hovered too, so its text doesn't shrink and shift */
@media (min-width: 701px) { #tabs.sb-tabs a.active:hover { font-weight: 800; text-shadow: none; } }
/* Player Season Archive: the season buttons take their own width, and the all-time top weekly scores tile sits right after them (the tab bar tile's look) */
.ha-filters .ha-seasons { flex: 0 1 auto; flex-basis: auto; }
.ha-top:not([hidden]) { display: inline-flex; align-items: center; height: 33px; padding: 0 6px; border-radius: 999px; background: var(--card-2); text-decoration: none; flex: none; }
:root:not([data-theme="dark"]) .ha-top:not([hidden]) { background: #ececf0; }
.ha-top.plain { cursor: default; }
.ha-top .st-in { display: flex; align-items: center; gap: 6px; animation: st-in 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .ha-top .st-in { animation: none; } }
.ha-top .st-name { padding: 3px 9px; border-radius: 6px; background: #fff; color: #1d0221; font: 800 12px Inter, system-ui, sans-serif; white-space: nowrap; text-align: center; min-width: 96px; }
.ha-top .st-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; background: #1b1a20; color: #fff; font: 700 11.5px Inter, system-ui, sans-serif; white-space: nowrap; }
.ha-top .st-stat b { color: #2be38f; font: 800 12px Archivo, system-ui, sans-serif; font-stretch: 112%; }
@media (max-width: 700px) { .ha-filters .ha-seasons { flex-basis: 100%; } .ha-top:not([hidden]) { max-width: 100%; } .ha-top .st-name { min-width: 0; } }
/* Archive: the season buttons and the top-scores tile share one row; the buttons scroll sideways if there isn't room */
.ha-season-row { display: flex; align-items: center; gap: 10px; flex-basis: 100%; min-width: 0; }
.ha-season-row .ha-seasons { flex: 0 1 auto; min-width: 0; }
@media (max-width: 700px) { .ha-season-row { flex-wrap: wrap; } .ha-season-row .ha-seasons { flex-basis: 100%; } }
/* Phones: the archive's top scores tile, then search, then season, then position */
@media (max-width: 700px) {
  .ha-season-row { display: contents; }
  .ha-filters .ha-top { order: 1; }
  .ha-filters #ha-search { order: 2; }
  .ha-filters .ha-seasons { order: 3; }
  .ha-filters [data-filter="ha"] { order: 4; }
}
/* Archive tile: the same height as the season bar and centred with it, a touch larger */
.ha-season-row { align-items: center; }
.ha-top:not([hidden]) { height: 40px; padding: 0 7px; align-self: center; margin: 0; box-sizing: border-box; }
.ha-top .st-in { gap: 7px; }
.ha-top .st-name { padding: 5px 11px; font-size: 13.5px; }
.ha-top .st-stat { padding: 5px 9px; gap: 6px; font-size: 13px; }
.ha-top .st-stat b { font-size: 13.5px; }
.ha-season-row .ha-seasons { margin: 0; }
.ha-season-row { margin-bottom: 12px; }
/* Archive card: a little wider on big screens, so the season buttons and the top-scores tile fit on one row */
.ha-dialog { width: min(1300px, calc(100vw - 32px)); }
/* Archive tile: the same box as the season buttons' bar (10px corners, soft fill, thin outline) instead of a pill */
.ha-top:not([hidden]), :root:not([data-theme="dark"]) .ha-top:not([hidden]) { border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); padding: 0 4px; }
.ha-top .st-name, .ha-top .st-stat { border-radius: 7px; }
/* Phones: the archive's top-scores tile a little smaller */
@media (max-width: 700px) {
  .ha-top:not([hidden]) { height: 34px; padding: 0 3px; }
  .ha-top .st-in { gap: 5px; }
  .ha-top .st-name { padding: 3px 8px; font-size: 12px; }
  .ha-top .st-stat { padding: 3px 7px; gap: 5px; font-size: 11.5px; }
  .ha-top .st-stat b { font-size: 12px; }
}
/* Tab bar: no shadow under the bar (it sits flat, like the season and position button groups) */
#tabs.sb-tabs { box-shadow: none; }
/* My team: the match box shrunk to the size of the points box beside it (as phones already do). */
.float-tip.head-tip.sq.mt { transform: scale(0.8); transform-origin: top left; }
/* My team: a settled auto sub under the starter he replaced, like the subs on Predicted lineups. */
.sqp-sub { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 2px 4px 2px 5px; border-radius: 6px; background: #fff; color: #1d0221; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1px #e3dde8; cursor: pointer; vertical-align: middle; }
.sqp-p .sqp-sub { flex-wrap: wrap; justify-content: center; row-gap: 2px; } .sqp-p .sqp-sub small { flex-basis: 100%; text-align: center; }
.sqp-sub small { flex: none; padding: 1px 5px; border-radius: 999px; background: #6c2bd9; color: #fff; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.sqp-sub em { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.sqp-sub i { flex: none; padding: 0 4px; border-radius: 4px; background: #37003c; color: #00ff85; font: 800 11px Archivo, system-ui, sans-serif; font-stretch: 112%; font-style: normal; }
@media (max-width: 700px) { .sqp-sub { font-size: 9.5px; padding: 2px 4px; } }
/* My team: dragging players between the XI and the bench (the next gameweek you can pick). */
#squad-view.sqp-edit .sqp-p { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#squad-view.sqp-edit .sqp-p.dragging { opacity: 0.3; }
#squad-view .sqp-p.drop-ok .sqp-name { box-shadow: 0 0 0 3px #00ff85; }
#squad-view .sqp-p.drop-no .sqp-name { box-shadow: 0 0 0 3px #e5393a; }
.sqp-ghost { position: fixed; z-index: 2000; pointer-events: none; transform: scale(1.08); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); cursor: grabbing; }
body.sqp-dragging, body.sqp-dragging * { cursor: grabbing !important; }
body.sqp-dragging .float-tip { display: none !important; }
.sqp-drag-hint { color: var(--text); font-weight: 700; }
.sqp-drag-hint.bad { color: #e5393a; }
.xi-reset { margin-left: 6px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 700 12px Inter, system-ui, sans-serif; cursor: pointer; }
.xi-reset:hover { border-color: var(--text); }
/* My team: your own XI isn't the best one, so who we'd start instead. */
.xi-advice { flex-basis: 100%; color: var(--text); font-weight: 600; } .xi-advice b { color: var(--good); font-weight: 800; }
/* My team: the Team builder pill above the gameweek you can drag players about in (room kept for it, so
   the buttons don't move when it comes and goes). */
#squad-weeks { margin-top: 13px; overflow: visible; }
#squad-weeks button:has(.tb-pill) { position: relative; overflow: visible; }
.tb-pill { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); padding: 0 4px; border: 1px solid var(--accent); border-radius: 999px; background: var(--card); color: var(--accent); font: 800 7px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
@media (max-width: 700px) { .tb-pill { padding: 0 3px; font-size: 6.5px; letter-spacing: 0.02em; } }
/* Sign-up: the line under Create account linking the Terms and Privacy Policy. */
.auth-legal { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--muted); } .auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Profile: Delete my account, a quiet link that opens a red confirm box. */
.pf-delete { padding: 0 0 20px; text-align: right; }
.pf-delete-open { padding: 0; border: 0; background: none; color: var(--muted); font: 600 12.5px Inter, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pf-delete-open:hover { color: #e5393a; }
.pf-delete-confirm { margin-top: 4px; padding: 14px 16px; border: 1px solid color-mix(in srgb, #e5393a 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, #e5393a 7%, var(--card)); text-align: left; font-size: 13.5px; line-height: 1.5; }
.pf-delete-confirm p { margin: 0 0 12px; }
.pf-delete-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pf-delete-yes { border-color: #e5393a; background: #e5393a; color: #fff; }
.pf-delete-yes:disabled { opacity: 0.7; cursor: default; }
.pf-delete-confirm .find-error { margin: 8px 0 0; }
/* The footer sits at the very bottom of the screen on short pages too (the sign-in screen):
   the page fills the screen and the main part takes up the spare room. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; width: 100%; }
body > .site-footer { width: 100%; }
/* Profile: Help and feedback, a line of text and the Send feedback button. */
.pf-feedback { display: flex; align-items: center; gap: 12px; }
.pf-feedback-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.pf-feedback .wh-btn { text-decoration: none; }
@media (max-width: 700px) { .pf-feedback { flex-wrap: wrap; } .pf-feedback .wh-btn { margin-left: auto; } }
/* The footer (independence note, email, Terms, Privacy) only on the sign-in and sign-up screens;
   inside the app those live at the bottom of your profile instead. */
body:not(.signed-out) > .site-footer { display: none; }
.pf-legal { margin: 0; padding: 4px 24px 22px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--muted); }
.pf-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .pf-legal { padding-left: 16px; padding-right: 16px; } }
/* Waiver history card (desktop): the long number headings ("Pts as starter", "Pts same GWs") on two
   lines, so their columns fit the numbers instead of leaving wide gaps, and the card narrower to match.
   The Player Season Archive shares .wh-dialog, so this is the history card only. */
@media (min-width: 701px) {
  #wh-dialog.wh-dialog { width: min(1060px, calc(100vw - 32px)); }
  /* Starts sits up against the player coming in; Pts as starter gets room before the player going out. */
  :is(#wh-transactions, #transactions) th[data-key="starts"], :is(#wh-transactions, #transactions) tbody td:nth-child(5) { text-align: left; padding-left: 10px; }
  :is(#wh-transactions, #transactions) th[data-key="inPts"], :is(#wh-transactions, #transactions) tbody td:nth-child(6) { padding-right: 34px; }
  :is(#wh-transactions, #transactions) th[data-key="inPts"], :is(#wh-transactions, #transactions) th[data-key="outPts"] { width: 64px; white-space: normal; line-height: 1.2; }
  /* The League tab's Waiver History: the same size and columns as this card, though narrower than Power rankings above it. */
  #league-history { width: min(1054px, 100%); box-sizing: border-box; }
}
/* Predicted lineups: the search box and "Only teams with my players" tick box in the same style as
   Waivers' search and "Watchlist only" (soft fill, heavy 13px lettering, no outline). */
#view-lineups #lineup-search { border-color: transparent; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; }
#view-lineups #lineup-search::placeholder { color: var(--text); font-weight: 800; opacity: 1; }
#view-lineups #lineup-search:hover { border-color: transparent; background-color: #e2e0e8; }
#view-lineups #lineup-search:focus { border-color: #00c46a; }
:root[data-theme="dark"] #view-lineups #lineup-search { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] #view-lineups #lineup-search:hover { background-color: rgba(255, 255, 255, 0.13); }
#view-lineups .lu-mine-box { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 10px; background-color: #ececf0; color: var(--text); font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; box-sizing: border-box; }
#view-lineups .lu-mine-box:hover { background-color: #e2e0e8; }
:root[data-theme="dark"] #view-lineups .lu-mine-box { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] #view-lineups .lu-mine-box:hover { background-color: rgba(255, 255, 255, 0.13); }
#view-lineups .lu-mine-box input { width: 15px; height: 15px; margin: 0; accent-color: #00a35c; cursor: pointer; }
@media (max-width: 700px) { #view-lineups .lu-mine-box { width: 100%; } }
/* Waiver history (League tab and the Waivers card): "Only my moves" as the same green switch as
   My team's "Don't drop proven players", on one line. */
.wv-toggle.mine-toggle { align-items: center; white-space: nowrap; }
.wv-toggle.mine-toggle .sw { margin-top: 0; }
/* Predicted lineups: "Only teams with my players" uses the green switch inside its pill (the switch's
   own styles hide the tick box). */
#view-lineups .lu-mine-box.wv-toggle { gap: 8px; padding: 0 12px 0 4px; font-size: 13px; font-weight: 800; }
/* Player card: the waiver claim % centred in its pill, and the pill centred on the line beside it. */
.claim-strip .tag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 3px 7px; vertical-align: middle; position: relative; top: -1px; }
/* Predicted lineups: the You / FA tag on a substitute's chip, small enough for the chip. */
:is(#lineups, #lu-body) .lp-sub .tag { flex: none; margin-left: 0; padding: 1px 3px; font-size: 9.5px; font-weight: 800; border-radius: 4px; }
:is(#lineups, #lu-body) .lp-sub .tag.mine { background: #00ff85; border-color: #00ff85; color: #37003c; }
:is(#lineups, #lu-body) .lp-sub .tag.free { background: #37003c; border-color: #37003c; color: #fff; }
:is(#lineups, #lu-body) .lp-sub:has(.tag) { max-width: calc(100% + 32px); } /* room for the tag without cutting the name short */
@media (max-width: 700px) { :is(#lineups, #lu-body) .lp-sub .tag { padding: 0 2px; font-size: 8px; } :is(#lineups, #lu-body) .lp-sub:has(.tag) { gap: 3px; padding: 1px 3px; } }
/* Predicted lineups: a long name shortens with "…" but its You / FA tag always stays in view. */
:is(#lineups, #lu-body) .lp-name { display: inline-flex; align-items: center; justify-content: center; min-width: 0; overflow: visible; }
:is(#lineups, #lu-body) .lp-name .lp-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#lineups, #lu-body) .lp-name .tag { flex: none; }
/* Phones: the You / FA tag as a small badge on the shirt's corner, so the name keeps the full width. */
@media (max-width: 700px) { :is(#lineups, #lu-body) .lp { position: relative; } :is(#lineups, #lu-body) .lp .lp-name .tag { position: absolute; top: 2px; left: calc(50% + 5px); right: auto; margin: 0; padding: 1px 3px; font-size: 8.5px; z-index: 1; } }
/* Planner: its title row keeps the waivers / lineups lock line right beside the title (as on Waivers). */
#view-planner .card-head { justify-content: flex-start; }
/* Planner fixture boxes: the Fixtures page's font, not the chunky score font */
#view-planner .chip b, #view-planner .chip .ha { font-family: Archivo, system-ui, sans-serif; font-weight: 800; font-stretch: 112%; letter-spacing: 0.02em; }
/* Phones, My team: the title and the Pitch / List switch stay on one row, the switch in the right corner. */
@media (max-width: 700px) {
  #view-team .mt-head { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; }
  #view-team .mt-head h3 { min-width: 0; }
  #view-team .mt-head .mt-switch { flex: none; margin-left: auto; }
  /* All players: the archive button smaller, top right beside the heading. */
  #view-players .card-head h3 { flex: none; }
  #view-players .fa-top { flex: none; margin-left: auto; }
  #ha-open { gap: 5px; padding: 4px 8px; font-size: 11px; }
  #ha-open svg { width: 13px; height: 13px; }
}
/* Narrow phones: a little tighter, so both still fit on the heading's row. */
@media (max-width: 380px) {
  #view-team .mt-head h3 { font-size: 15px; white-space: nowrap; }
  #view-team .mt-head .mt-switch button { gap: 4px; padding: 6px 7px; }
  #view-players .card-head { gap: 8px; }
  #ha-open { gap: 4px; padding: 4px 6px; font-size: 10.5px; }
}
/* Live card, desktop: Bonus watch's You and Them labels a little larger. */
@media (min-width: 701px) { .lv-bonus small { font-size: 13px; } }
/* Live card, Bonus watch: names that wrap line up under the first name, not under You / Them. */
.lv-bonus > div { flex-wrap: nowrap; align-items: baseline; }
.lv-bonus .lv-bn-names { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
/* Phones: more breathing room on the My team and team card pitches. Rows further apart, a clear gap
   between players (a long name shortens with "…" rather than touching its neighbour), slightly
   smaller lettering, and the played chip small enough for five players across. */
@media (max-width: 700px) {
  #squad-view .sqp-pitch, #team-body .sqp-pitch { padding: 62px 8px 28px; gap: 24px; }
  #squad-view .sqp-row, #squad-view .sqp-bench, #team-body .sqp-row, #team-body .sqp-bench { gap: 7px; }
  #squad-view .sqp-name, #team-body .sqp-name { padding: 2px 5px; font-size: 10.5px; }
  #squad-view .sqp-stat, #team-body .sqp-stat { font-size: 10px; }
  #squad-view .sqp-stat.st-played span, #team-body .sqp-stat.st-played span { gap: 3px; padding: 2px 5px; font-size: 10px; }
  #squad-view .sqp-stat.st-played b, #team-body .sqp-stat.st-played b { font-size: 10px; }
}
/* Phones: "Look ahead" right beside its dropdown, both on the right. */
@media (max-width: 700px) { #tabs.sb-tabs > .sb-ahead { justify-content: flex-end; gap: 2px; } }
/* Team builder pill: the header BETA lettering (bold italic, slightly wide Archivo), same size as before. */
.tb-pill { padding: 0 3px; font-family: Archivo, system-ui, sans-serif; font-style: italic; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; }
@media (max-width: 700px) { .tb-pill { padding: 0 2px; } }
/* Waivers on phones: the Watchlist tick box stays tick-box sized (the filter bar's full-width rule was stretching it). */
#view-waivers .filters .fa-watch-box input[type="checkbox"] { flex: none; width: 15px; min-width: 0; max-width: 15px; }
/* Player card: header with a club-colour wash, then sections as rounded panels (scoreboard for the
   next match, comparison bars against his position, coloured gameweek tiles, fixture rows). */
#player-body .pc-hero::after { background: radial-gradient(60% 120% at 88% 0%, rgba(255, 255, 255, 0.13), transparent 60%); }
.pc-hero .hero-text { flex: 1; }
.pc-hero .hero-meta { align-items: flex-start; }
.pc-hero .pc-claim { flex: 1 1 260px; min-width: 0; margin: 0 0 0 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
.pc-hero .pc-claim .muted { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }
.pc-hero .pc-claim a { color: #fff; }
#player-body .stat-row { gap: 8px; margin: 12px 24px 0; }
#player-body .stat { justify-content: flex-start; padding: 8px 4px 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); color: var(--text); }
#player-body .stat strong { font-size: 22px; color: var(--text); }
#player-body .stat span { margin-top: 3px; font: 600 12.5px/1.15 Inter, system-ui, sans-serif; color: var(--text); opacity: 0.8; }
.pcard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 24px 0; align-items: start; }
.pcard-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-sec { padding: 14px 16px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--line); }
.player-dialog .pc-sec h3 { margin: 0 0 12px; text-align: center; color: var(--text); text-transform: none; letter-spacing: 0; font: 700 15px Inter, system-ui, sans-serif; }
.pc-next, .pc-points { padding: 10px 14px 11px; }
.player-dialog .pc-next h3, .player-dialog .pc-points h3 { margin-bottom: 6px; font-size: 13px; }
/* Next match: the fixture hover graphic, with the soft colours and dark text of the CS and Win pills. */
.pc-next .matchup-strip + .matchup-strip { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pc-next .sbug .sb-odds .h { background: color-mix(in srgb, #00c46a 28%, transparent); color: var(--text); }
.pc-next .sbug .sb-odds .d { background: color-mix(in srgb, var(--muted) 18%, transparent); box-shadow: none; color: var(--text); }
.pc-next .sbug .sb-odds .a { background: color-mix(in srgb, #e5393a 26%, transparent); color: var(--text); }
#player-body .pc-points .pts-sum { margin-top: 6px; font-size: 12px; }
/* Both columns end level, however long the points list grows. */
@media (min-width: 701px) {
  .pcard-cols { align-items: stretch; }
  .pcard-col > .pc-sec:last-child, #pf-match, #pf-match > .pc-sec { flex: 1; }
  #pf-match { display: flex; min-width: 0; }
  .pc-compare { display: flex; flex-direction: column; justify-content: space-between; }
  #player-body .pc-points .pts-sum { font: 600 12.5px/1.15 Inter, system-ui, sans-serif; color: color-mix(in srgb, var(--text) 80%, transparent); }
  #player-body .pc-hero { padding-right: 24px; }
  #player-body .pc-hero h2 { padding-right: 130px; }
  .pc-hero .pc-claim .muted { display: inline; margin: 0 0 0 6px; }
}
/* Next 8 gameweeks: the xPts total beside the heading */
.pc-xp-total { margin-left: 8px; color: var(--text); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.pc-vs + .pc-vs { margin-top: 13px; }
.pc-vs .vh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pc-vs .vh b { font: 800 17px Archivo, system-ui, sans-serif; font-stretch: 108%; font-variant-numeric: tabular-nums; }
.pc-vs .vh b.av { color: var(--muted); }
.pc-vs .vh span { min-width: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.pc-vs .vh i { display: inline-block; margin-left: 3px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 18%, transparent); font: 700 10.5px Inter, system-ui, sans-serif; white-space: nowrap; }
.pc-vs .vh i.top { background: #00f08a; color: #0b1f14; }
.pc-vs .vb { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 5px; }
.pc-vs .vb div { height: 6px; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.pc-vs .vb i { display: block; height: 100%; border-radius: 9px; background: color-mix(in srgb, var(--muted) 70%, transparent); }
.pc-vs .vb .l i { float: right; background: #00c46a; }
#player-body .pts-grid { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: auto; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; }
#player-body .pts-grid::-webkit-scrollbar { display: none; }
#player-body .pts-tile:first-child { margin-left: auto; }
#player-body .pts-tile:last-child { margin-right: auto; }
#player-body .pts-tile { flex: 0 0 calc((100% - 21px) / 8); flex-direction: column; align-items: center; gap: 0; padding: 4px 0 3px; border-radius: 8px; }
#player-body .pts-tile strong { order: -1; font-size: 13px; }
#player-body .pts-tile span { font: 600 9.5px var(--score); font-stretch: normal; }
@media (max-width: 700px) {
  #player-body .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 12px 16px 0; }
  #player-body .stat { padding: 6px 1px 5px; border-radius: 10px; }
  #player-body .stat strong { font-size: 15px; }
  #player-body .stat span { font-size: 8.5px; letter-spacing: -0.01em; white-space: nowrap; }
  .pc-hero .pc-claim { flex-basis: 100%; margin: 0; }
  /* A shorter header: team and position beside Watch, the name on one line (fitHeroName shrinks long ones). */
  #player-body .pc-hero { gap: 10px; padding: 10px 14px; }
  #player-body .pc-hero .hero-kit { width: 60px; height: 60px; }
  #player-body .pc-hero .hero-team { display: flex; align-items: center; min-height: 32px; padding-right: 126px; font-size: 10.5px; letter-spacing: 0.03em; line-height: 1.15; }
  #player-body .pc-hero h2 { margin: 0 0 4px; font-size: 20px; white-space: nowrap; }
  .pcard-cols { display: flex; flex-direction: column; align-items: stretch; margin: 12px 16px 0; }
  #pf-match { order: 1; }
  .pc-next .sbug .sb-row { gap: 5px; padding: 4px; }
  .pc-next .sbug .sb-side { gap: 5px; }
  .pc-next .sbug .sb-side b { font-size: 14px; }
  .pc-next .sbug .sb-disc { width: 30px; height: 30px; }
  .pc-next .sbug .sb-disc svg.kit { width: 20px; height: 20px; }
  .pc-next .sbug .ko { padding: 6px 9px; font-size: 12px; }
  #player-body .fixture-list { margin-left: auto; margin-right: auto; }
  .pcard-col { display: contents; }
}

/* Club fixture card: player card header, then one table of the remaining fixtures. */
#tk-dialog { width: min(740px, calc(100vw - 24px)); }
#tk-dialog:has(#tk-squad:not([hidden])) { width: min(880px, calc(100vw - 24px)); } /* room for the squad table's stat columns */
#tk-body .tf-hero { background: linear-gradient(155deg, color-mix(in srgb, var(--team) 58%, #06060c) 0%, #0c0d1a 62%, #17171c 100%); padding-right: 24px; }
#tk-body .tf-hero::after { display: none; }
#tk-body .tf-hero .hero-text { flex: 1; min-width: 0; }
#tk-body .tf-hero h2 { font-size: 30px; line-height: 1.03; font-stretch: 112%; text-transform: none; letter-spacing: -0.01em; color: #fff; }
#tk-body .tf-hero .tk-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#tk-body .tf-hero .tk-sum span { justify-content: flex-start; min-width: 0; padding: 8px 4px 7px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); font: 600 11px/1.15 Inter, system-ui, sans-serif; white-space: nowrap; color: rgba(255, 255, 255, 0.85); }
#tk-body .tf-hero .tk-sum b { color: #fff; }
#tk-body .tf-opp[data-tk-team] { cursor: pointer; }
#tk-body .tf-opp[data-tk-team]:hover .tf-name b { text-decoration: underline; text-underline-offset: 2px; }
#tk-body .tf-hero .tk-sum.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-tabs { display: flex; justify-content: center; margin: 14px 24px 0; }
.tf-table { margin: 12px 24px 24px; padding: 14px 16px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--line); }
.tf-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 60px 60px 34px 34px 170px; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.tf-row.head { padding-top: 0; border-top: 0; font-size: 13.5px; color: var(--muted); }
/* The list scrolls on its own: earlier results above, the current gameweek first in view, headings stay put. */
.tf-scroll { position: relative; max-height: max(260px, calc(100dvh - 330px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tf-scroll .tf-row.head { position: sticky; top: 0; z-index: 2; background: var(--card-2); }
.tf-row.past .gw, .tf-row.past .tf-name b { opacity: 0.75; }
/* Each row opens its match; the headings for odds go when only old results are in view. */
.tf-row[data-tf-match] { cursor: pointer; }
@media (hover: hover) { .tf-row[data-tf-match]:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } }
.tf-row[data-tf-match]:focus-visible { outline: 2px solid #00c46a; outline-offset: -2px; border-radius: 8px; }
.tf-row.head.no-odds span:nth-child(n+3) { visibility: hidden; }
.tf-row [data-tf-top] { cursor: pointer; }
/* A finished match: a bold W, D or L, then the score, with no box. Lined up so the letters and scores form columns. */
.tf-result { display: inline-grid; grid-template-columns: 20px 46px; column-gap: 8px; align-items: center; color: var(--text); }
.tf-result s { margin: 0 3px; text-decoration: none; }
.tf-result i { font: 700 15px/1 Inter, system-ui, sans-serif; text-align: center; }
.tf-result b { font: 700 15px/1 Inter, system-ui, sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
.tf-result.won i { color: var(--good); }
.tf-result.lost i { color: var(--bad); }
@media (max-width: 700px) {
  .tf-result { grid-template-columns: 15px 38px; column-gap: 5px; }
  .tf-result s { margin: 0 2px; }
  .tf-result i, .tf-result b { font-size: 13px; }
}
/* Only the opponent's kit and name open their team card; the empty space beside them opens the match, like the rest of the row */
#tk-body .tf-row > .tf-opp[data-tk-team] { justify-self: start; max-width: 100%; }
#tk-body .tf-row > .tf-opp[data-tk-team] .tf-name { flex: 0 1 auto; }
@media (max-width: 700px) {
  #tk-body .tf-row:not(.past):not(.played) > .tf-opp[data-tk-team] { max-width: calc(100% - 68px); }
  #tk-body .tf-row > .tf-opp[data-tk-team] .tf-name { padding-right: 0; }
}
/* The next gameweek: a green bar to the left of it, like the bars on the player card's Points by gameweek */
.tf-row.next .gw { padding-left: 8px; }
.tf-row.next .gw::before { content: ""; position: absolute; left: 0; width: 3px; border-radius: 2px; background: #00c46a; }
@media (min-width: 701px) { .tf-row.next .gw { position: relative; } .tf-row.next .gw::before { top: 1px; bottom: 1px; } }
@media (max-width: 700px) { .tf-row.next .gw::before { top: 9px; height: 18px; } .tf-row.next:not(.played) > .tf-opp { padding-left: 7px; } }
.float-tip.mt .mt-pts { flex: none; min-width: 22px; text-align: right; font: 800 15px Archivo, system-ui, sans-serif; font-stretch: 112%; color: var(--text); font-variant-numeric: tabular-nums; }
/* Phones: results on one line, with the score at the end of the row rather than a big box beneath it. */
@media (max-width: 700px) {
  .tf-row.head.no-odds { visibility: hidden; }
  .tf-row.past, .tf-row.played { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 6px; }
  .tf-row.past > .tf-opp, .tf-row.played > .tf-opp { grid-column: 2; }
  .tf-row.past .tf-name, .tf-row.played .tf-name { padding-right: 0; }
  .tf-row.past .gw small, .tf-row.played .gw small { position: static; margin-top: 2px; }
  #tk-body .tf-row.past .tf-score, #tk-body .tf-row.played .tf-score { grid-column: 3; }
  #tk-body .tf-row .chip.tk-box { min-width: 54px; padding: 4px 7px; border-radius: 9px; }
  #tk-body .tf-row .chip.tk-box b { font-size: 15px; }
  #tk-body .tf-row .chip.tk-box small { margin-top: 1px; font-size: 9px; }
}
/* League tab, wide screens: the simulator beside Next matches, then the Table across the full width */
@media (min-width: 1001px) {
  .lg-grid .lg-main { display: contents; }
  .lg-grid #league-sim { grid-column: 1; grid-row: 1; align-self: stretch; }
  .lg-grid .lg-matches { grid-column: 2; grid-row: 1; align-self: stretch; }
  .lg-grid #league-table { grid-column: 1 / -1; grid-row: 2; }
}
/* The Table's xPts columns, with their own heading in the same style and on the same line as Table's */
#standings tr.grp th { padding: 0; border: 0; background: none; }
#standings tr.grp { display: table-row; }
#standings tr.grp th.on { position: relative; padding: 0 0 12px 22px; text-align: left; white-space: nowrap; color: var(--accent); font-family: Archivo, system-ui, sans-serif; font-size: 20px; font-weight: 900; font-stretch: 115%; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.2; }
:root[data-theme="dark"] #standings tr.grp th.on { color: var(--text); }
#standings tr.grp th.on::before { content: ""; position: absolute; left: 8px; top: 2px; bottom: 14px; width: 5px; border-radius: 3px; background: var(--brand); }
@media (max-width: 700px) { #standings tr.grp th.on { font-size: 17px; } }
#standings th[data-key="xp0"], #standings td:has(> .lg-odds) + td { padding-left: 22px; }
#standings td.num:nth-last-child(-n+4) { font-size: 14.5px; }
@media (min-width: 1001px) { #standings { margin-top: -39px; } }
/* Header: your team is now just shown (change it from the account button); account sits after the theme button */
header.sb .sb-team, header.sb .sb-team:hover, header.sb .sb-team:focus-visible { cursor: default; }
header.sb .sb-team:hover { background: #2e1544; }
:root:not([data-theme="dark"]) header.sb .sb-team:hover { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-team:hover { background: #2b2d31; }
header.sb .sb-team:hover .sb-team-text b { color: inherit; }
.sb-tools .sb-acct { flex: none; cursor: pointer; }
.sb-tools .sb-acct svg { width: 18px; height: 18px; }
body.signed-out header.sb .sb-acct, body.no-league header.sb .sb-acct { display: none; }
/* League ID: plain text, with no bubble behind it */
header.sb .sb-league { background: none !important; box-shadow: none; }
/* Suggestions under a search box, in the same style as the phone header's search */
.sg-wrap { position: relative; display: inline-block; max-width: 100%; }
.sg-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: max(100%, 300px); max-height: 380px; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55); color: var(--text); text-align: left; }
.sg-panel[hidden] { display: none; }
.sg-panel .sr-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; font: 700 14px Inter, system-ui, sans-serif; cursor: pointer; }
.sg-panel .sr-row + .sr-row { border-top: 1px solid var(--line); }
.sg-panel .sr-row:hover, .sg-panel .sr-row.on { background: var(--card-2); }
.sg-panel .sr-row svg.kit { flex: none; width: 20px; height: 20px; margin: 0; }
.sg-panel .sr-row small { margin-left: auto; color: var(--muted); font: 500 12px Inter, system-ui, sans-serif; white-space: nowrap; }
@media (max-width: 700px) { .sg-wrap { display: block; width: 100%; } .sg-panel { width: 100%; } }
/* The Trades tab icon is wider than the others, to fit two players and the arrows between them */
.sb-tabs a[href="#trades"] svg { width: 23px; }
/* Tab bar search (desktop): an icon before My team. Clicked, it slides out to the right over the tabs. */
.tab-search { display: none; }
.sr-row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
@media (min-width: 701px) {
  .tab-search { position: relative; z-index: 40; display: block; flex: none; width: 34px; height: 34px; margin-right: 2px; align-self: center; }
  .ts-shell { position: absolute; left: 0; top: 0; display: flex; align-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); transition: width .18s ease, background-color .18s ease; }
  .ts-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
  .ts-icon:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
  .ts-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .ts-shell input { flex: 1 1 0; width: 0; min-width: 0 !important; height: auto; padding: 0 12px 0 0 !important; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; color: var(--text); font: 600 13px Inter, system-ui, sans-serif; opacity: 0; -webkit-appearance: none; appearance: none; }
  .ts-shell input::placeholder { color: var(--muted); font-weight: 600; opacity: 1; }
  .ts-shell input::-webkit-search-cancel-button { display: none; }
  .tab-search.open .ts-shell { width: 320px; background: var(--card); border-color: #00c46a; box-shadow: 0 0 0 2px rgba(0, 196, 106, 0.2), 0 12px 28px -14px rgba(0, 0, 0, 0.5); }
  .tab-search.open .ts-icon:hover { background: none; }
  .tab-search.open .ts-shell input { opacity: 1; }
  .ts-shell .sg-panel { left: -1px; width: 320px; }
  .sg-panel .sr-none { margin: 0; padding: 10px 8px; color: var(--muted); font-size: 13.5px; }
  /* Dark themes: the same light look as the phone search and the site's hover boxes, once it is open */
  :root[data-theme="dark"] .tab-search.open { --card: #eceef2; --card-2: #e2e4ea; --line: #c9ccd4; --text: #17181c; --muted: #555862; }
  :root[data-theme="dark"][data-dark="purple"] .tab-search.open { --card: #efe8f7; --card-2: #e5dcf0; --line: #cfc2de; --text: #1d0221; --muted: #5b4a6a; }
}
/* All players: the Player Season Archive button level with the heading, on its row at every width */
#view-players .card-head h3, #view-players #deadlines.sb-deadlines.in-head { margin-bottom: 0; }
@media (max-width: 1100px) { #view-players .card-head > :not(h3):not(.fa-top) { order: 2; } }
@media (max-width: 380px) { #view-players .card-head h3 { font-size: 15px; white-space: nowrap; } }
/* Free agents: the Waiver history button level with the heading in the same way */
.card-head:has(> .fa-top #wh-open) > h3, .card-head:has(> .fa-top #wh-open) > #deadlines.sb-deadlines.in-head { margin-bottom: 0; }
@media (max-width: 1100px) { .card-head:has(> .fa-top #wh-open) > :not(h3):not(.fa-top) { order: 2; } }
@media (max-width: 380px) { .card-head:has(> .fa-top #wh-open) > h3 { font-size: 15px; white-space: nowrap; } #wh-open { gap: 4px; padding: 4px 6px; font-size: 10.5px; } #wh-open svg { width: 13px; height: 13px; } }
/* Phones: the three ROS% selectors on one row, with the label and league count on the line above */
@media (max-width: 700px) {
  .own-slot { display: block; flex: 1 1 100%; width: 100%; min-width: 0; }
  .own-controls { display: flex; width: 100%; gap: 6px 5px; }
  .own-controls > .muted.small:not(.own-count) { order: 0; flex: none; }
  .own-controls > .own-count { order: 1; flex: 1 1 60%; }
  .own-controls select { order: 2; flex: 1 1 26%; width: 0; min-width: 0; padding: 6px 4px 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .own-controls select[data-own="top"] { flex-basis: 32.5%; }
  .own-controls select[data-own="size"] { flex-basis: 35.5%; }
}
@media (max-width: 380px) {
  .own-controls select { padding-left: 6px; padding-right: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; }
  .own-controls select[data-own="top"] { flex-basis: 33%; }
  .own-controls select[data-own="size"] { flex-basis: 37%; }
  .own-controls select[data-own="scoring"] { flex-basis: 25%; }
}
/* League tab: Best run in the space beside Waiver History, or above it when there isn't room */
.lg-history-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 16px; }
.lg-history-row > .card { margin: 0; }
#league-run { flex: 1 1 280px; min-width: 0; }
#league-run table { width: 100%; }
#league-run th, #league-run td { padding-left: 5px; padding-right: 5px; }
#league-run td.br-team { white-space: normal; line-height: 1.2; }
#league-run tr.me td { background: var(--highlight); }
#league-run tr.me td:first-child { box-shadow: inset 4px 0 var(--good); }
@media (max-width: 1399px) { #league-run { order: -1; flex-basis: 100%; } }
/* Desktop header: your team (and the countdowns beside it) closer to League ID, now that it has no bubble */
@media (min-width: 701px) {
  header.sb .sb-team { margin-right: 4px; }
  header.sb .sb-tools { padding-left: 6px; }
  header.sb .sb-league { padding-left: 4px; }
}
/* Header search: phones only for now */
.sb-search { display: none; }
@media (max-width: 700px) {
  header.sb .sb-team { display: none; }
  header.sb .theme-menu { order: 1; margin-left: 8px; padding: 8px 12px 4px 0; }
  header.sb .sb-acct { order: 1; align-self: center; margin: 4px 0 0 6px; }
  header.sb .sb-brand { padding-right: 4px; }
  header.sb .sb-search { order: 4; position: relative; display: flex; flex: 1 1 0; align-items: center; gap: 7px; min-width: 0; height: 36px; margin: 0 0 10px 12px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #bba6cf; }
  :root[data-theme="dark"] header.sb .sb-search { background: #2e1544; }
  :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-search { background: #2b2d31; color: #b5bac1; }
  header.sb .sb-search:focus-within { box-shadow: 0 0 0 2px #2be38f; }
  header.sb .sb-search > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  header.sb .sb-search input { flex: 1 1 0; width: 100%; min-width: 0; height: auto; padding: 0 !important; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; color: #fbf5ff; font: 500 16px Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
  header.sb .sb-search input::placeholder { color: currentColor; font-size: 13.5px; opacity: 0.85; }
  header.sb .sb-search input::-webkit-search-cancel-button { display: none; }
  header.sb .sb-league { order: 4; align-self: flex-start; height: 36px; margin: 0 12px 10px 8px; font-size: 11.5px; }
  body.signed-out header.sb .sb-search, body.no-league header.sb .sb-search { display: none; }
  header.sb:has(.sb-search-results:not([hidden])) { z-index: 200; }
  .sb-search-results { position: absolute; left: 0; right: -110px; top: calc(100% + 6px); z-index: 200; max-height: 60dvh; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55); color: var(--text); }
  .sb-search-results[hidden] { display: none; }
  .sr-row { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font: 700 14px Inter, system-ui, sans-serif; }
  .sr-row + .sr-row { border-top: 1px solid var(--line); }
  .sr-row svg.kit { flex: none; width: 20px; height: 20px; margin: 0; }
  .sr-row small { margin-left: auto; color: var(--muted); font: 500 12px Inter, system-ui, sans-serif; white-space: nowrap; }
  .sr-none { margin: 0; padding: 10px 8px; color: var(--muted); font-size: 13.5px; }
}
/* Phones, signed out: no account button, so the theme button keeps the margin itself */
@media (max-width: 700px) { body.signed-out header.sb .theme-menu, body.no-league header.sb .theme-menu { padding-right: 12px; } }
/* Phones, dark themes: the search box and its results in the same light look as the site's hover boxes */
@media (max-width: 700px) {
  :root[data-theme="dark"] header.sb .sb-search, :root[data-theme="dark"] .sb-search-results { --card: #eceef2; --card-2: #e2e4ea; --line: #c9ccd4; --text: #17181c; --muted: #555862; }
  :root[data-theme="dark"][data-dark="purple"] header.sb .sb-search, :root[data-theme="dark"][data-dark="purple"] .sb-search-results { --card: #efe8f7; --card-2: #e5dcf0; --line: #cfc2de; --text: #1d0221; --muted: #5b4a6a; }
  :root[data-theme="dark"] header.sb .sb-search, :root[data-theme="dark"]:not([data-dark="purple"]) header.sb .sb-search { background: var(--card); color: var(--muted); }
  :root[data-theme="dark"] header.sb .sb-search input { color: var(--text); }
}
@media (max-width: 380px) { header.sb .sb-league { padding: 0 7px; font-size: 10.5px; } }
/* Team news: the team's kit is enough, so the players under it don't repeat it */
#team-news .small svg.kit { display: none; }
/* A gameweek tile's hover box: the box is only as wide as its lines, with the points right beside them */
.wk-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wk-tag { flex: none; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font: 700 11px Inter, system-ui, sans-serif; letter-spacing: 0.03em; white-space: nowrap; }
.wk-tag .tip-club { color: inherit; font: inherit; }
.wk-grid { display: grid; grid-template-columns: max-content max-content max-content; align-items: stretch; }
.wk-r { display: contents; }
.wk-r > span { display: flex; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }
.wk-l { font: 600 13.5px Inter, system-ui, sans-serif; color: var(--text); }
.wk-d { justify-content: flex-end; padding-left: 12px !important; color: var(--muted); font: 500 12px Inter, system-ui, sans-serif; }
.wk-n { justify-content: flex-end; padding-left: 8px !important; }
.wk-pts { min-width: 34px; padding: 2px 6px; border-radius: 7px; text-align: center; font: 800 13px Inter, system-ui, sans-serif; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.wk-pts.up { background: color-mix(in srgb, #00c46a 18%, transparent); color: var(--good); }
.wk-pts.down { background: color-mix(in srgb, #e5393a 18%, transparent); color: #e5393a; }
.wk-game { grid-column: 1 / -1; padding: 7px 0 5px; border-top: 1px solid var(--line); }
.wk-sum { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font: 600 12.5px Inter, system-ui, sans-serif; }
.float-tip.head-tip .tt-text .wk-sum b { color: var(--text); font: 800 14px Inter, system-ui, sans-serif; }
/* Match card: the match's events, one line each with a ball, a card and so on */
.gm-events { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(440px, 100%); margin: 0 auto 14px; }
.ge-side { padding-right: 14px; }
.ge-side.r { padding: 0 0 0 14px; border-left: 1px solid var(--line); }
.ge-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--text); text-decoration: none; font: 600 13px Inter, system-ui, sans-serif; }
.ge-row:hover .ge-name { text-decoration: underline; text-underline-offset: 2px; }
.ge-side:not(.r) .ge-row { flex-direction: row-reverse; text-align: right; }
.ge-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-name small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.ge-ic { flex: none; display: block; width: 15px; height: 15px; }
.ge-ball circle { fill: #fff; stroke: #1d0221; stroke-width: 1; }
.ge-ball .pent { fill: #1d0221; stroke: #1d0221; stroke-width: 0.5; stroke-linejoin: round; }
.ge-ball .seam { fill: none; stroke: #1d0221; stroke-width: 0.8; }
.ge-ball.own circle { fill: #e5393a; }
.ge-ball.miss { opacity: 0.45; }
.ge-letter { border-radius: 50%; background: color-mix(in srgb, var(--cyan) 22%, transparent); color: var(--cyan); text-align: center; font: 800 10px/15px Inter, system-ui, sans-serif; }
.ge-letter.save { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.ge-card { width: 10px; height: 14px; margin: 0 2.5px; border-radius: 2px; background: #ffd60a; transform: rotate(8deg); }
.ge-card.red { background: #e5393a; }
.ge-none { margin: 0 0 14px; text-align: center; }
@media (max-width: 700px) { .ge-side { padding-right: 10px; } .ge-side.r { padding: 0 0 0 10px; } .ge-row { gap: 5px; font-size: 12px; } .ge-name small { font-size: 10.5px; } }
#tk-now { display: block; height: 0; }
@media (max-width: 700px) { .tf-scroll { max-height: max(240px, calc(100dvh - 390px)); } }
.tf-row.head span:nth-child(n+3) { text-align: center; }
.tf-row .gw { font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 108%; }
.tf-row .gw small { display: block; margin-top: 2px; font: 500 11px Inter, system-ui, sans-serif; color: var(--muted); white-space: nowrap; }
.tf-opp { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tf-opp svg.kit { flex: none; width: 24px; height: 24px; margin: 0; }
.tf-name { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
.tf-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tf-name em { flex: none; font: 800 16px/1 Archivo, system-ui, sans-serif; font-style: normal; color: var(--text); }
.tf-cell { justify-self: center; width: 60px; padding: 4px 0; border-radius: 8px; text-align: center; font-size: 12.5px; font-weight: 700; }
.tf-cell.good { background: color-mix(in srgb, #00c46a 28%, transparent); }
.tf-cell.mid { background: color-mix(in srgb, var(--muted) 18%, transparent); }
.tf-cell.bad { background: color-mix(in srgb, #e5393a 26%, transparent); }
.tf-odds { display: flex; gap: 2px; min-width: 0; }
.tf-odds span { flex: 1 1 0; min-width: max-content; padding: 3px; border-radius: 3px; text-align: center; white-space: nowrap; font: 700 10.5px/1.1 Inter, system-ui, sans-serif; color: var(--text); }
.tf-odds span:first-child { border-radius: 999px 4px 4px 999px; }
.tf-odds span:last-child { border-radius: 4px 999px 999px 4px; }
.tf-odds .h { background: color-mix(in srgb, #00c46a 28%, transparent); }
.tf-odds .d { background: color-mix(in srgb, var(--muted) 18%, transparent); }
.tf-odds .a { background: color-mix(in srgb, #e5393a 26%, transparent); }
.tf-num { text-align: center; font-variant-numeric: tabular-nums; }
.tf-none { grid-column: 2 / -1; font-size: 13px; font-weight: 500; font-style: italic; color: var(--muted); }
#tk-body .tf-score { grid-column: 3 / -1; justify-content: center; }
/* Desktop: the site's fixture pill shape and ring, keeping the soft highlight colours. */
@media (min-width: 701px) {
  .tf-cell { width: 54px; padding: 5px 0; border-radius: 999px; box-shadow: 0 0 0 3px var(--card-2), 0 0 0 4px var(--line); }
}
@media (max-width: 700px) {
  #tk-body .tf-hero h2 { font-size: 27px; }
  #tk-body .tf-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding-left: 12px; padding-right: 12px; }
  #tk-body .tf-hero > svg.kit { grid-row: 1 / span 2; }
  #tk-body .tf-hero .hero-text { display: contents; }
  #tk-body .tf-hero .hero-team, #tk-body .tf-hero h2 { grid-column: 2; }
  #tk-body .tf-hero .tk-sum { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  #tk-body .tf-hero .tk-sum span { padding: 6px 0; border-radius: 10px; font-size: 7.5px; letter-spacing: -0.01em; white-space: nowrap; }
  #tk-body .tf-hero .tk-sum b { margin-bottom: 3px; font-size: 14px; }
  .tf-table { margin: 12px 14px 18px; }
  /* Phones: gameweek, team and date on the first line; numbers then odds on the second. */
  .tf-row { position: relative; grid-template-columns: 42px 42px 28px 28px minmax(0, 1fr); gap: 6px 5px; }
  .tf-row > .tf-opp { grid-column: 2 / -1; gap: 5px; }
  .tf-name { padding-right: 68px; }
  .tf-row .gw small { position: absolute; top: 10px; right: 0; margin: 0; }
  .tf-odds span { padding: 3px 1px; font-size: 9.5px; }
  .tf-row.head { font-size: 12.5px; }
  .tf-row.head span:nth-child(-n+2) { display: none; }
  #tk-body .tf-score { grid-column: 1 / -1; }
  .tf-cell { width: 100%; }
}
@media (max-width: 380px) {
  #tk-body .tf-hero .hero-team { font-size: 11px; }
  #tk-body .tf-hero .tk-sum span { font-size: 7px; letter-spacing: -0.02em; }
  .tf-row { grid-template-columns: 38px 38px 24px 24px minmax(0, 1fr); gap: 5px 4px; font-size: 12.5px; }
  .tf-row .gw { font-size: 11.5px; }
  .tf-row.head { font-size: 11.5px; }
  .tf-opp svg.kit { width: 20px; height: 20px; }
  .tf-row .gw small { font-size: 10px; }
  .tf-name { padding-right: 60px; }
  .tf-name em { font-size: 14px; }
  .tf-cell { font-size: 11.5px; }
}
@media (max-width: 340px) {
  .pc-next { padding-left: 8px; padding-right: 8px; }
  .pc-next .sbug .sb-side b { font-size: 12px; }
  .pc-next .sbug .sb-disc { width: 24px; height: 24px; }
  .pc-next .sbug .sb-disc svg.kit { width: 16px; height: 16px; }
  .pc-next .sbug .ko { padding: 5px 7px; font-size: 10.5px; }
  .pc-next .sbug .sb-odds span { min-width: 0; flex-basis: auto; font-size: 9.5px; }
}

/* Fixtures page match box before kick-off: drawn like the player card's Next match. */
.float-tip.mt .mt-pill { display: block; }
.float-tip.mt .mt-pill .sb-side { display: flex; }
.float-tip.mt .mt-pill .sb-side b { font-size: 15px; }
.float-tip.mt .mt-pill .sb-disc { width: 32px; height: 32px; }
.float-tip.mt .mt-pill .sb-disc svg.kit { width: 21px; height: 21px; }
.float-tip.mt .mt-pill .ko { padding: 6px 11px; font-size: 12.5px; }
.float-tip.mt .mt-odds.soft .sb-odds span { font-size: 11.5px; color: var(--text); }
.float-tip.mt .mt-odds.soft .h { background: color-mix(in srgb, #00c46a 28%, transparent); }
.float-tip.mt .mt-odds.soft .d { background: color-mix(in srgb, var(--muted) 18%, transparent); box-shadow: none; }
.float-tip.mt .mt-odds.soft .a { background: color-mix(in srgb, #e5393a 26%, transparent); }
/* Points by gameweek: styled like the comparison panel, with a neutral tile, dark number, muted label and a coloured bar. */
#player-body .pts-tile, #player-body .pts-tile.p-great, #player-body .pts-tile.p-good, #player-body .pts-tile.p-ok, #player-body .pts-tile.p-poor { --bar: color-mix(in srgb, var(--muted) 45%, transparent); padding: 5px 0; background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--text); }
#player-body .pts-tile.p-great { --bar: #00a35c; }
#player-body .pts-tile.p-good { --bar: #00c46a; }
#player-body .pts-tile.p-poor { --bar: #e5393a; }
#player-body .pts-tile strong { font: 800 14px/1.1 Archivo, system-ui, sans-serif; font-stretch: 108%; font-variant-numeric: tabular-nums; }
#player-body .pts-tile span { color: var(--muted); }
#player-body .pts-tile::after { content: ""; width: 68%; height: 4px; margin-top: 3px; border-radius: 9px; background: var(--bar); }

/* Narrow phones: the player card's six numbers stay on one row, each label on one line. */
@media (max-width: 380px) {
  #player-body .stat strong { font-size: 14px; }
  #player-body .stat span { font-size: 7.5px; letter-spacing: -0.02em; }
}
@media (max-width: 340px) {
  #player-body .stat-row { gap: 3px; margin-left: 10px; margin-right: 10px; }
  #player-body .stat strong { font-size: 13px; }
  #player-body .stat span { font-size: 7px; }
}
/* Predicted lineups: the win / draw / loss chances centred between the two team names. */
:is(#lineups, #lu-body) .sbug .sb-odds { max-width: 228px; margin-left: auto; margin-right: auto; }
:is(#lineups, #lu-body) .sbug .sb-odds span { min-width: max-content; padding: 4px 5px; font-size: 10.5px; text-overflow: clip; }
@media (max-width: 700px) {
  :is(#lineups, #lu-body) .sbug .sb-odds { max-width: 172px; }
  :is(#lineups, #lu-body) .sbug .sb-odds span { min-width: max-content; padding: 4px 3px; font-size: 9.5px; text-overflow: clip; }
}
/* Dark purple theme: the kick-off pill in soft white glass, so it stands out from the purple behind it. */
:root[data-theme="dark"][data-dark="purple"] .sbug .ko:not(.on):not(.ft) { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: #fff; }

/* Phones: five players across fit on the My team and team card pitches. The played chip stacks the
   gameweek over the points, so no chip is wider than its player. */
@media (max-width: 700px) {
  #squad-view .sqp-pitch, #team-body .sqp-pitch { padding-left: 4px; padding-right: 4px; }
  #squad-view .sqp-row, #team-body .sqp-row { gap: 4px; }
  #squad-view .sqp-stat.st-played, #team-body .sqp-stat.st-played { max-width: 100%; }
  #squad-view .sqp-stat.st-played span, #team-body .sqp-stat.st-played span { flex-direction: column; gap: 1px; padding: 2px 7px; line-height: 1.1; }
}
@media (max-width: 400px) {
  #squad-view .sqp-name, #team-body .sqp-name { padding: 2px 3px; font-size: 9.5px; }
  #squad-view .sqp-row, #team-body .sqp-row { gap: 3px; }
}
@media (max-width: 340px) {
  #squad-view .sqp-name, #team-body .sqp-name { padding: 2px; font-size: 8.5px; }
}
/* Dark and dark purple: hover boxes are pale with dark text, so they read clearly over the dark page. The Fixtures match box keeps its own look. */
:root[data-theme="dark"] .float-tip:not(.mt):not(.match-bar) { --card: #eceef2; --card-2: #e2e4ea; --line: #c9ccd4; --text: #17181c; --muted: #555862; --good: #00874a; background: var(--card); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"][data-dark="purple"] .float-tip:not(.mt):not(.match-bar) { --card: #efe8f7; --card-2: #e5dcf0; --line: #cfc2de; --text: #1d0221; --muted: #5b4a6a; }
:root[data-theme="dark"] .float-tip:not(.mt):not(.match-bar) .sbug .ko:not(.on):not(.ft) { background: #37003c; box-shadow: none; color: #fff; }

/* Points by gameweek tiles open the real match: score strip, both lineups on one pitch, subs. */
#player-body .pts-tile[data-gw] { cursor: pointer; }
#player-body .pts-tile[data-gw]:hover { background: color-mix(in srgb, var(--muted) 24%, transparent); }
#player-body .pts-tile[data-gw]:focus-visible { outline: 2px solid var(--good); outline-offset: 1px; }
.gm-dialog { width: min(760px, calc(100vw - 24px)); }
/* Next match on the player card: the teams and kick-off are links; the lineups card they open. */
.pc-next [data-fix-team], .pc-next [data-lu-match] { cursor: pointer; }
.pc-next [data-fix-team]:hover b, .pc-next h3 [data-lu-match]:hover { text-decoration: underline; text-underline-offset: 2px; }
.pc-next .ko[data-lu-match]:hover { filter: brightness(1.25); }
.lu-dialog { width: min(1180px, calc(100vw - 24px)); }
/* League tab matchup card: both lineups on the Live tab's pitch */
.mu-dialog { width: min(760px, calc(100vw - 24px)); }
.mu-dialog .dialog-close, .mu-dialog .dialog-close:hover { background: var(--card-2); border-color: var(--line); box-shadow: none; color: var(--text); }
#mu-body { padding: 22px 24px 24px; }
@media (max-width: 700px) { #mu-body { padding: 18px 12px 16px; } #mu-body .lv-mid { gap: 10px; padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.02em; white-space: nowrap; } #mu-body .lv-mid b { font-size: 17px; } }
#matchups .mcard[data-mu], .tm-res-row[data-mu] { cursor: pointer; }
.lu-dialog .dialog-close, .lu-dialog .dialog-close:hover { background: var(--card-2); border-color: var(--line); box-shadow: none; color: var(--text); }
#lu-body .lineup-card { border: 0; padding: 0; background: none; }
#gm-body, #lu-body { padding: 22px 24px 24px; }
.gm-match + .gm-match { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.player-dialog .gm-title { margin: 0 40px 12px 0; color: var(--text); text-transform: none; letter-spacing: 0; font: 700 16px Inter, system-ui, sans-serif; }
.gm-title small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.gm-note { margin: 24px 40px 24px 0; }
.gm-strip { margin-bottom: 12px; }
.gm-strip .sb-side { min-width: 0; }
.gm-strip .sb-row { gap: 14px; width: fit-content; margin: 0 auto; } /* the shading hugs the kits */
.gm-strip .sb-side { justify-content: flex-end; } /* kits and names gather beside the score */
.gm-strip .sb-side.r { justify-content: flex-start; }
.gm-me .sqp-name { background: #00f08a; border-color: #00f08a; color: #0b1f14; }
.gm-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 14px; }
.gm-subs h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.gm-sub { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.gm-sub small { font-size: 11px; font-weight: 500; color: var(--muted); }
.gm-sub.gm-me span { color: var(--good); }
@media (max-width: 700px) {
  #gm-body, #lu-body { padding: 16px 10px 18px; }
  .player-dialog .gm-title { font-size: 14px; margin-left: 4px; }
  .gm-strip .sb-side b { font-size: 14px; }
  .gm-strip .sb-disc { width: 30px; height: 30px; }
  .gm-strip .sb-disc svg.kit { width: 20px; height: 20px; }
  #gm-body .lv-pitch { padding: 16px 3px; }
  #gm-body .sqp-row { gap: 3px; }
  #gm-body .sqp-name { padding: 2px 3px; font-size: 9.5px; }
  #gm-body .sqp-row:has(> :nth-child(6)) .sqp-name { padding: 2px; font-size: 8px; letter-spacing: -0.01em; }
  #gm-body .sqp-stat { flex-direction: row; font-size: 10px; }
  #gm-body .sqp-stat span { width: auto; padding: 1px 4px; }
  .gm-subs { padding: 0 4px; }
}
/* Player card numbers: plain, even figures that line up, instead of the wide display lettering. */
#player-body .stat strong, #player-body .pts-tile strong { font: 700 20px/1.1 Inter, system-ui, sans-serif; font-stretch: normal; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#player-body .pts-tile strong { font-size: 14px; letter-spacing: -0.01em; }
@media (max-width: 700px) {
  #player-body .stat strong { font-size: 14.5px; }
  /* Each box as wide as its own label plus an equal share of the spare room, so every label has the same padding. */
  #player-body .stat-row { grid-template-columns: repeat(6, auto); justify-content: stretch; }
}
@media (max-width: 380px) { #player-body .stat strong { font-size: 13.5px; } }
@media (max-width: 340px) { #player-body .stat strong { font-size: 12.5px; } }
/* Gameweek tile hover box: a double gameweek labels each match. */
.float-tip .tt-game { padding-top: 8px; }
/* "Is this you?" on Find your league and Profile: stays pale in every theme, with one clear next step. */
.find-choices .auth-confirm { margin-top: 8px; }
.find-choices .auth-confirm p { margin: 0 0 4px; font-weight: 800; color: #00804a; }
.find-choices .auth-confirm [data-find-league] { display: block; width: 100%; margin-top: 8px; padding: 11px 14px; border: 0; border-radius: 12px; background: #2be38f; color: #0b1f14; text-align: center; }
.find-choices .auth-confirm [data-find-league]:hover { background: #22d07f; }
.find-choices .auth-confirm .link { display: inline-block; margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: none; color: #6b3fa0; font-size: 13px; font-weight: 600; text-align: left; }
/* Player card stats: no boxes, thin dividers between them */
#player-body .stat-row { gap: 0; }
#player-body .stat { padding: 4px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#player-body .stat + .stat { border-left: 1px solid var(--line); }
/* Points by position: a black outline so the numbers read on every colour */
.an-stack em { color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
/* Team card stats: no boxes, thin dividers between them, as on the player card */
#tk-body .tf-hero .tk-sum { gap: 0; }
#tk-body .tf-hero .tk-sum span { background: none; border-radius: 0; box-shadow: none; }
#tk-body .tf-hero .tk-sum span + span { border-left: 1px solid rgba(255, 255, 255, 0.18); }
/* Next 8 gameweeks: where he ranks at his position */
.pc-xp-rank { display: inline-block; margin-left: 8px; font: 700 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--text); vertical-align: 1px; }
@media (max-width: 700px) { .pc-xp-rank { display: table; margin: 6px 0 0; } }
.pc-xp-rank.top { color: var(--good); }
/* Player card gameweeks: no box, a coloured line above the number, the gameweek underneath */
#player-body .pts-tile, #player-body .pts-tile.p-great, #player-body .pts-tile.p-good, #player-body .pts-tile.p-ok, #player-body .pts-tile.p-poor { display: grid; grid-template-columns: auto; justify-content: center; justify-items: center; row-gap: 3px; padding: 4px 0; background: none; box-shadow: none; }
#player-body .pts-tile::after { grid-column: 1; grid-row: 1; width: 18px; height: 3px; margin: 0; }
#player-body .pts-tile strong { grid-column: 1; grid-row: 2; }
#player-body .pts-tile span { grid-column: 1; grid-row: 3; text-align: center; }
/* Dark themes: the selected side of a switch matches the green page buttons (Season simulator) */
:root[data-theme="dark"] .mt-switch button.on, :root[data-theme="dark"]:not([data-dark="purple"]) .mt-switch button.on { background: #2be38f; color: #0b1f14; box-shadow: none; }
/* Phones: the team card header at the height of a player card's: kit, title and name, with the stats in one row beneath */
@media (max-width: 700px) {
  #tk-body .tf-hero { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center; padding: 9px 12px 8px; }
  #tk-body .tf-hero > svg.kit { grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; }
  #tk-body .tf-hero .hero-text { display: contents; }
  #tk-body .tf-hero .hero-team { grid-column: 2; grid-row: 1; padding-right: 42px; font-size: 10px; line-height: 1.2; white-space: nowrap; }
  #tk-body .tf-hero .tk-avg { display: none; }
  #tk-body .tf-hero h2 { grid-column: 2; grid-row: 2; margin: 1px 0 0; padding-right: 42px; font-size: 21px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tk-body .tf-hero .tk-sum { grid-column: 1 / -1; grid-row: 3; margin: 7px 0 0; }
  #tk-body .tf-hero .tk-sum span { padding: 0 1px; font-size: 8px; letter-spacing: -0.01em; white-space: nowrap; }
  #tk-body .tf-hero .tk-sum b { margin-bottom: 2px; font-size: 15px; }
}
@media (max-width: 700px) { body.ahead-off #tabs .sb-ahead { display: none; } }
@media (max-width: 700px) { #tk-body .tf-hero .tk-sum.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { #tk-body .tf-hero .tk-sum span { font-size: 7.5px; } }
/* Team card, Squad side: the Status column as on All players */
#club-table .tag.free { display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; line-height: 1; font-size: 12px; background: #37003c; border: 1px solid #37003c; color: #fff; font-family: var(--score); font-weight: 800; border-radius: 5px; letter-spacing: 0.02em; vertical-align: 1px; }
:root[data-theme="dark"]:not([data-dark="purple"]) #club-table .tag.free { background: #1e1f22; border-color: #1e1f22; }
#club-table .tag.taken { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 0; vertical-align: 1px; }
#club-table .tag.taken svg { width: 13px; height: 13px; fill: none; stroke: #e5393a; stroke-width: 2.6; stroke-linecap: round; }
:root[data-theme="dark"][data-dark="purple"] #club-table .tag.free { background: transparent; border-color: transparent; color: #fff; }
#club-table .tag.free { font: italic 800 12px/1 Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: -0.01em; padding: 3px 6px 3px 5px; }
:root:not([data-theme="dark"]) #club-table .tag.free { background: transparent; border-color: transparent; color: #000; }
#club-table th[data-key="owner"], #club-table td.owner-col { padding-left: 8px; text-align: center; }

/* Biggest Movers (Waivers tab): button with a ticker of the latest gameweek's biggest move in and out,
   taking turns, and the "Biggest Movers by Gameweek" card */
.mv-btn { gap: 8px; }
.mv-btn .mv-ic { width: 16px; height: 16px; }
.mv-tick { position: relative; display: inline-grid; min-width: 128px; height: 18px; margin-left: 2px; padding-left: 9px; border-left: 1px solid var(--line); overflow: hidden; }
.mv-item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; white-space: nowrap; }
.mv-item.on { opacity: 1; transform: none; }
.mv-item b { font-weight: 700; }
.mv-arr { width: 9px; height: 9px; flex: none; }
.mv-arr.up { fill: var(--good); } .mv-arr.down { fill: var(--bad); }
.mv-share { font-variant-numeric: tabular-nums; font-weight: 700; }
.mv-share.up { color: var(--good); } .mv-share.down { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .mv-item { transition: none; } }
@media (max-width: 700px) { .mv-btn .mv-label { display: none; } .mv-tick { min-width: 112px; } }
.mv-dialog { width: min(980px, calc(100vw - 32px)); max-width: none; }
.mv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 14px; }
.mv-gws { flex-wrap: wrap; }
.mv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mv-cols section { padding: 12px 14px; border-radius: 12px; background: var(--card-2); min-width: 0; }
.mv-cols h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 700 14px Inter, system-ui, sans-serif; }
.mv-cols h4 .mv-arr { width: 11px; height: 11px; }
.mv-row { display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) 64px 44px; align-items: center; gap: 8px; min-height: 34px; font-size: 14px; }
.mv-row + .mv-row { border-top: 1px solid var(--line); }
.mv-rk { color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: center; }
.mv-row svg.kit { width: 20px; height: 20px; margin: 0; }
.mv-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mv-who .pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-who .muted { font-size: 11.5px; }
.mv-bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mv-bar i { display: block; height: 100%; border-radius: 999px; }
.mv-bar.up i { background: var(--good); } .mv-bar.down i { background: var(--bad); }
.mv-row .mv-share { text-align: right; font-size: 13px; }
@media (max-width: 700px) {
  .mv-cols { grid-template-columns: 1fr; }
  .mv-row { grid-template-columns: 18px 20px minmax(0, 1fr) 48px 42px; gap: 6px; }
}

/* Phones: no waivers / lineups line on any page. Tapping the Lineups Locked badge or a countdown pill
   shows the exact times instead (box under the pills, in the visitor's own time zone). */
@media (max-width: 700px) {
  #deadlines, #deadlines.sb-deadlines.in-head { display: none !important; }
  header.sb #live-badge, header.sb #clock-lineups, header.sb #clock-waivers { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* The gameweek, Lineups Locked and Waivers pills always share one row */
  header.sb .sb-eyebrow-row, header.sb .sb-clocks { flex-wrap: nowrap; min-width: 0; }
}
@media (max-width: 400px) {
  header.sb .sb-eyebrow, header.sb .live-badge, header.sb .sb-clock, header.sb .sb-clock > span::before, header.sb .sb-clock > span::after, header.sb .sb-clock b { font-size: 10.5px; }
  header.sb .sb-eyebrow, header.sb .live-badge, header.sb .sb-clock { padding: 0 6px; }
  header.sb .sb-eyebrow-row, header.sb .sb-clocks { gap: 4px; }
  header.sb .sb-clocks { margin-left: 4px; }
}
.sb-pop { position: fixed; z-index: 60; max-width: calc(100vw - 16px); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45); font-size: 13px; line-height: 1.5; }
.sb-pop[hidden] { display: none; }
.sb-pop b { font-weight: 800; }
.sb-pop small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
/* Biggest Movers button: no divider, the ticker sits right after the label, all centred on one line */
.mv-btn { align-items: center; gap: 6px; line-height: 1; }
.mv-tick { min-width: 0; height: 16px; margin-left: 0; padding-left: 0; border-left: 0; align-items: center; }
.mv-item { height: 16px; }
.mv-item:not(.on) { position: absolute; }
@media (min-width: 701px) { .sb-pop { display: none !important; } } /* the times box is for phones only */
.mv-tick { max-width: 200px; justify-items: start; } .mv-item b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } /* very long names shorten instead of stretching the button */

/* Live tab while one of your starters is playing (markLiveNav in app.js): a red radar icon, and a
   red highlight once you're on it (the icon and word keep the usual selected colours). Narrower screens hide
   the tab icons, so there the word goes red instead. */
#tabs a.live-now:not(.active) svg { color: #e5393a; }
#tabs a.live-now.active, #tabs a.live-now.active:hover, #tabs.sb-tabs a.live-now.active, #tabs.sb-tabs a.live-now.active:hover, :root[data-theme] #tabs.sb-tabs a.live-now.active, :root[data-theme] #tabs.sb-tabs a.live-now.active:hover { background: #e5393a; }
@media (max-width: 1250px) { #tabs a.live-now:not(.active) { color: #e5393a; } }

/* Live pitch and matchup card: auto subs (green: came on; amber: his match has started without him,
   naming the bench player who'd come on) */
.lv-auto { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; border-radius: 999px; background: #00a85a; color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.lv-auto.risk { background: #f0a500; color: #1d0221; }

/* League tab: "All results" button beside the gameweek matches heading opens every gameweek's matches */
.lg-matches-head { position: relative; display: block; }
.lg-matches-head h3 { margin: 0; }
/* A small button: on wide screens it sits at the right of the heading's second line (MATCHES), so the heading wraps as before */
.lg-matches-head .wh-btn { gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 11.5px; }
.lg-matches-head .wh-btn svg { width: 13px; height: 13px; }
@media (min-width: 1001px) { .lg-matches-head .wh-btn { position: absolute; right: 0; bottom: 2px; } }
@media (max-width: 1000px) { .lg-matches-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } }
.fr-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 900px); overflow: hidden; }
.fr-dialog[open] { display: flex; flex-direction: column; }
.fr-dialog .fr-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 0; }
#fr-weeks { position: relative; flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 0 8px 18px; }
#fr-weeks .fr-week:first-child { margin-top: 0; }
.fr-dialog .dialog-close, .fr-dialog .dialog-close:hover { background: var(--card-2); border-color: var(--line); box-shadow: none; color: var(--text); }
.fr-body { padding: 24px 22px 22px; }
.fr-body > h3 { margin: 0 40px 6px 0; }
.fr-body > p { margin: 0 0 14px; }
.fr-week { margin-top: 16px; }
.fr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.fr-head b { font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.fr-week.now .fr-head b { color: var(--good); }
.fr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 6px; padding: 7px 8px 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.fr-row.me { background: color-mix(in srgb, var(--good) 14%, var(--card-2)); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.fr-row:hover { border-color: var(--accent); }
.fr-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-team.r { text-align: right; padding-right: 6px; }
.fr-score { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #37003c; }
:root[data-theme="dark"]:not([data-dark="purple"]) .fr-score { background: #1e1f22; }
.fr-score b { color: rgba(255, 255, 255, 0.6); font: 800 15px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fr-score b.win { color: #fff; }
.fr-score i { color: rgba(255, 255, 255, 0.5); font-style: normal; font-weight: 700; }
.fr-score.fr-v { color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 700; }
@media (max-width: 700px) { .fr-body { padding: 20px 12px 16px; } .fr-row { font-size: 13px; gap: 6px; padding-left: 10px; } }

/* Predicted lineups: favourite team button (top right) and its club picker */
#view-lineups > .card { position: relative; }
/* Pinned to the card's top-right corner, level with the heading; the heading row leaves room for it */
/* In line with the other controls, all centred on the heading; on phones it sits in the card's top-right corner */
.lu-fav-wrap { position: relative; }
@media (max-width: 700px) { .lu-fav-wrap { position: absolute; top: 14px; right: 14px; z-index: 5; } #view-lineups > .card > .card-head h3 { padding-right: 116px; } }
/* Search: the same height as the other controls, normal-weight text and a grey placeholder (like a phone's search box) */
#view-lineups #lineup-search { height: 28px; padding-top: 0; padding-bottom: 0; width: 200px; box-sizing: border-box; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
#view-lineups #lineup-search::placeholder { font-weight: 600; color: var(--muted); }
@media (max-width: 700px) { #view-lineups #lineup-search { width: 100%; height: 34px; } }
.lu-fav { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 10px; background: #ececf0; color: var(--text); font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.lu-fav:hover { background: #e2e0e8; }
:root[data-theme="dark"] .lu-fav { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .lu-fav:hover { background: rgba(255, 255, 255, 0.13); }
.lu-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; color: var(--muted); }
.lu-fav.on svg { fill: #f0a500; stroke: #f0a500; }
.lu-fav b { font: 800 13px Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.03em; }
.lu-fav-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 268px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.45); }
.lu-fav-pop p { margin: 0 0 8px 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lu-fav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lu-fav-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text); font: 800 12px Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: 0.03em; cursor: pointer; }
.lu-fav-grid button:hover { background: var(--row-hover); }
.lu-fav-grid button.on { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.lu-fav-grid .kit { width: 24px; height: 24px; }

/* Predicted lineups heading: no margin under the title, so the controls centre on it (the gap below moves to the row) */
#view-lineups > .card > .card-head { margin-bottom: 22px; }
#view-lineups > .card > .card-head h3 { margin-bottom: 0; }
/* Predicted lineups controls: the toggle and Favourite in the same softer text as the search box (Inter 600) */
#view-lineups .lu-mine-box, #view-lineups .lu-mine-box.wv-toggle, .lu-fav { font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.lu-fav b { font-family: Archivo, system-ui, sans-serif; }
/* Predicted lineups key: on desktop, the percentages and You / FA explanation start on their own line */
@media (min-width: 701px) { .lu-key2 { display: block; } }

/* Visitors without an account (visitor.js): open pages as usual, the rest frosted with a sign-up card */
body.visitor #league-name, body.visitor #league-eyebrow, body.visitor .sb-team, body.visitor #open-league, body.visitor #open-profile, body.visitor .lu-mine-box { display: none !important; }
body.visitor .tag.mine, body.visitor .tag.free, body.visitor .lp .owner, body.visitor .bn-own, body.visitor .bn-row .own { display: none !important; }
.vz-cta { display: none; }
body.visitor .vz-cta { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0; border-radius: 999px; background: #2be38f; color: #0b1f14; font: 800 14px Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(43, 227, 143, 0.75); }
.vz-cta svg, .vz-card svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { body.visitor .vz-cta { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; padding: 12px 20px; font-size: 15px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6), 0 8px 20px -10px rgba(43, 227, 143, 0.8); } }
.vz-veil { position: absolute; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-start; padding-top: 90px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg, #17181c) 8%, transparent), color-mix(in srgb, var(--bg, #17181c) 35%, transparent)); }
.vz-card { position: sticky; top: 130px; width: min(420px, calc(100% - 32px)); padding: 26px 26px 22px; border-radius: 20px; text-align: center; color: var(--text);
  background: color-mix(in srgb, var(--card) 62%, transparent); border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
.vz-card .vz-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; background: #2be38f; color: #0b1f14; }
.vz-card .vz-ic svg { width: 22px; height: 22px; }
.vz-card h3 { margin: 0 0 6px; font: 900 22px Archivo, system-ui, sans-serif; font-stretch: 115%; text-transform: uppercase; }
.vz-card p { margin: 0 0 16px; font: 500 14px/1.45 Inter, system-ui, sans-serif; color: var(--muted); }
.vz-btns { display: flex; gap: 8px; justify-content: center; }
.vz-card button { padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 800 14px Inter, system-ui, sans-serif; cursor: pointer; }
.vz-card button.vz-go { border: 0; background: #2be38f; color: #0b1f14; }
.vz-card small { display: block; margin-top: 12px; font: 600 12px Inter, system-ui, sans-serif; color: var(--muted); }
/* Fixtures: only the heading and the gameweek selector behind the frost (no fixture colours) */
body.visitor #view-fixtures .gw-season-key, body.visitor #view-fixtures .card > p.muted, body.visitor #ticker, body.visitor #view-fixtures .news-card { display: none !important; }
.vz-blur { filter: blur(7px); pointer-events: none; user-select: none; }
.vz-cardnote { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 18px 18px; padding: 12px 14px 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid color-mix(in srgb, #fff 16%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.6); font: 700 13.5px Inter, system-ui, sans-serif; color: var(--text); }
.vz-cardnote button { flex: none; padding: 8px 14px; border-radius: 10px; border: 0; background: #2be38f; color: #0b1f14; font: 800 13px Inter, system-ui, sans-serif; cursor: pointer; }
body.visitor .bn-owner, body.visitor .lu-key .nw { display: none !important; } /* no league: no owners, no You / FA key */
.vz-back { display: none; } body.visitor .vz-back { display: inline-block; margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--muted, #6b5a72); font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }

/* Profile: Send feedback opens a box to type in, with Send and Cancel */
.pf-fb { margin: 0 0 8px; padding: 10px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.pf-fb[hidden] { display: none; }
.pf-fb textarea { box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 500 14px/1.45 Inter, system-ui, sans-serif; }
.pf-fb textarea:focus { outline: none; border-color: #00c46a; }
.pf-fb-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pf-fb-note { flex: 1; min-width: 0; font: 600 13px Inter, system-ui, sans-serif; color: var(--muted); }
.pf-fb-note.ok { color: var(--good); } .pf-fb-note.bad { color: var(--bad); }
.pf-fb-send { background: #37003c; border-color: #37003c; color: #fff; }
:root[data-theme="dark"] .pf-fb-send { background: #2be38f; border-color: #2be38f; color: #0b1f14; }
.pf-fb-send:disabled { opacity: 0.6; cursor: default; }
.pf-feedback .wh-btn[hidden] { display: none; }
@media (max-width: 700px) { #lineups-title .lu-long { display: none; } }
/* Visitors: How the numbers work frosted and closed */
body.visitor details.how { filter: blur(6px); pointer-events: none; user-select: none; }
.vz-free { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.vz-free > span { display: block; margin-bottom: 8px; font: 700 12px Inter, system-ui, sans-serif; letter-spacing: 0.02em; color: var(--muted); }
.vz-free > div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vz-free a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, #2be38f 55%, transparent); background: color-mix(in srgb, #2be38f 12%, transparent); color: var(--text); font: 800 13px Inter, system-ui, sans-serif; text-decoration: none; }
.vz-free a:hover { background: color-mix(in srgb, #2be38f 22%, transparent); }

/* Visitors: the locked pages frosted behind their sign-up card */
section.view.vz-locked { position: relative; min-height: 70vh; }
section.view.vz-locked > *:not(.vz-veil) { filter: blur(9px) saturate(0.9); pointer-events: none; user-select: none; }
/* Visitors: a short green line sweeping above the two open tabs (the landing page's red one over "Live", in green) */
body.visitor #tabs.sb-tabs { position: relative; overflow: visible; }
.vz-free-bar { position: absolute; z-index: 3; height: 3px; margin-top: -4px; pointer-events: none; }
.vz-free-bar[hidden] { display: none; }
.vz-free-bar::after { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 3px; border-radius: 3px; background: #2be38f; box-shadow: 0 0 8px rgba(43, 227, 143, 0.7); animation: vz-sweep 1.6s ease-in-out infinite alternate; }
@keyframes vz-sweep { from { left: 0; } to { left: 60%; } }
@media (prefers-reduced-motion: reduce) { .vz-free-bar::after { animation: none; width: 100%; } }
.vz-free-bar { transition: opacity 0.4s ease; } .vz-free-bar.vz-fade { opacity: 0; } /* after its 4 seconds (visitor.js) */
/* Fixtures (desktop): the ticker can be dragged sideways for other gameweeks (app.js) */
@media (min-width: 701px) { #ticker { cursor: grab; } #ticker.tk-dragging { cursor: grabbing; user-select: none; } #ticker table { transition: transform 0.2s ease; } #ticker.tk-dragging table { transition: none; } }
.tk-drag-hint { display: none; } @media (min-width: 701px) { .tk-drag-hint { display: inline; } }
/* Visitors: no League / Analytics menu on hover over the League tab */
body.visitor #tabs .tab-drop { display: none !important; }
.float-tip.open-match { pointer-events: auto; cursor: pointer; } /* a Fixtures result's box: click to open the match */
.float-tip .mt-ko { border: 0; cursor: pointer; } .float-tip .mt-ko:hover { filter: brightness(1.3); } /* kick-off time: opens the match */
.float-tip .sbug .ko.mt-ko { color: #fff; font: 800 13.5px/1 Inter, system-ui, sans-serif; } /* a button now, so it keeps the white kick-off time */
/* Match lineups card: a clear PREDICTED LINEUPS label above the title (like the hover box's GW10 · UPCOMING) */
.lu-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); font: 800 12.5px Inter, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.lu-kicker i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Phones, Predicted lineups: search shrinks to its magnifying glass beside "Only matches with my players"; tapping it
   opens the full box (the switch steps aside while you type or while a search is in) */
@media (max-width: 700px) {
  #view-lineups > .card > .card-head .filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; }
  #view-lineups .filters .sg-wrap { flex: none; width: 36px; transition: width 0.2s ease; }
  #view-lineups .filters #lineup-search { width: 100%; height: 34px; cursor: pointer; }
  #view-lineups .filters .sg-wrap:not(.lu-open):not(:has(#lineup-search:focus)):not(:has(#lineup-search:not(:placeholder-shown))) #lineup-search { padding-right: 0; color: transparent; }
  #view-lineups .filters .sg-wrap:not(.lu-open):not(:has(#lineup-search:focus)):not(:has(#lineup-search:not(:placeholder-shown))) #lineup-search::placeholder { color: transparent; }
  #view-lineups .filters .sg-wrap.lu-open, #view-lineups .filters .sg-wrap:has(#lineup-search:focus), #view-lineups .filters .sg-wrap:has(#lineup-search:not(:placeholder-shown)) { flex: 1; width: auto; }
  #view-lineups .filters:has(.lu-open, #lineup-search:focus, #lineup-search:not(:placeholder-shown)) .lu-mine-box { display: none !important; }
  #view-lineups .filters .lu-mine-box { flex: 1; width: auto; min-width: 0; height: 34px; }
}
@media (max-width: 700px) { .lu-fav-wrap { top: 11px; } } /* level with "Predicted GW10" */
/* Predicted lineups: your pinned match notes how many kick off before it */
.lu-day.lu-fav-day { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px 12px; flex-wrap: wrap; }
.lu-earlier { padding: 0; border: 0; background: none; color: var(--muted); font: 600 12.5px Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.lu-earlier:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lu-day.lu-fav-day { color: #c98a00; } /* your team: orange heading (the Favourite star stays yellow) */
:root[data-theme="dark"] .lu-day.lu-fav-day { color: #f0a500; }
/* All results: a box around the winning team (dashed while live and leading) */
.fr-team.won, .fr-team.leads { justify-self: start; max-width: 100%; box-sizing: border-box; padding: 3px 9px; border: 1.5px solid var(--good); border-radius: 8px; }
.fr-team.r.won, .fr-team.r.leads { justify-self: end; padding-right: 9px; }
.fr-team.leads { border-style: dashed; }
/* Planner: the three how-to steps fold into a How to box (like Defensive contributions on Live bonus) */
details.pp-howto { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.pp-howto summary { display: flex; align-items: center; gap: 10px; min-height: 24px; list-style: none; cursor: pointer; }
.pp-howto summary::-webkit-details-marker { display: none; }
.pp-howto summary:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; border-radius: 6px; }
.pp-howto-t { flex: none; font: 700 13px/1.2 Inter, system-ui, sans-serif; color: var(--text); }
.pp-howto-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 500 12.5px Inter, system-ui, sans-serif; }
.pp-howto[open] .bn-chev { transform: rotate(180deg); }
.pp-howto[open] summary { margin-bottom: 10px; }
.pp-howto .pp-steps li { background: var(--card); }
details.pp-howto:not([open]) { width: fit-content; max-width: 100%; }
.pp-howto:not([open]) .bn-chev { margin-left: 4px; }

/* The "Waivers ... · Lineups lock ..." line shows only on Waivers and All players (desktop; phones never show it) */
body:not(:has(#view-waivers:not([hidden]), #view-players:not([hidden]))) #deadlines { display: none !important; }

/* Waivers and All players filter bar, in the Predicted lineups style: search first, the ROS% filters
   folded into one pill that opens a small box, and Watchlist only as a switch */
#view-players #all-search, #view-waivers #fa-search { height: 28px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
#view-players #all-search::placeholder, #view-waivers #fa-search::placeholder { font-weight: 600; color: var(--muted); }
.own-fold { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 12px; border-radius: 10px; background: #ececf0; font: 600 13px Inter, system-ui, sans-serif; white-space: nowrap; }
:root[data-theme="dark"] .own-fold { background: rgba(255, 255, 255, 0.08); }
.own-fold .own-k { margin-right: 4px; color: var(--muted); }
.own-fold .own-dot { font-style: normal; color: var(--muted); }
/* Each choice is its own list: one click opens it */
.own-fold select { field-sizing: content; height: 22px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: 600 13px Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; }
.own-fold select:hover, .own-fold select:focus-visible { background: rgba(55, 0, 60, 0.08); outline: none; }
:root[data-theme="dark"] .own-fold select:hover, :root[data-theme="dark"] .own-fold select:focus-visible { background: rgba(255, 255, 255, 0.1); }
#view-waivers .fa-watch-box.wv-toggle { gap: 8px; padding: 0 12px 0 4px; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
@media (max-width: 700px) {
  .own-fold { height: 34px; }
  #view-players #all-search, #view-waivers #fa-search { height: 34px; }
  #view-waivers .fa-watch-box.wv-toggle { height: 34px; }
}
#view-players #owner-filter { height: 28px; padding-top: 0; padding-bottom: 0; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
@media (max-width: 700px) { #view-players #owner-filter { height: 34px; } }
/* Planner add-move selectors: the same text as the player names in the table below */
.pp-form select { padding: 9px 12px; font: 700 15px Archivo, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); }

/* Dark and Dark purple: a glass look for the cards that tables sit on (pop-up cards and Light unchanged).
   Each card has a thin rim of light, brightest at the top-left corner and fading round the card, like
   light catching the edge of a pane, plus a faint inner line under the top edge. The page sides stay
   solid. On wider screens the card is a shade deeper than the usual card colour (--glass); sticky table
   columns use the same shade so they match. */
:root[data-theme="dark"] {
  --glass: #2f3136;
  --glass-rim: linear-gradient(140deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.09));
  --glass-inner: rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"][data-dark="purple"] {
  --glass: #230d35;
  --glass-rim: linear-gradient(140deg, rgba(255, 235, 255, 0.28), rgba(255, 235, 255, 0.07) 40%, rgba(255, 235, 255, 0.05) 70%, rgba(255, 235, 255, 0.11));
  --glass-inner: rgba(255, 240, 255, 0.06);
}
:root[data-theme="dark"] main .card {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--glass-rim) border-box;
  /* Shadow cast away from the light (top-left): a tight contact shadow, then softer, longer layers falling bottom-right, and a darker bottom edge */
  box-shadow: inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.3), 1px 2px 5px rgba(0, 0, 0, 0.16), 3px 6px 14px -6px rgba(0, 0, 0, 0.25), 6px 14px 32px -16px rgba(0, 0, 0, 0.38);
}
@media (min-width: 701px) {
  :root[data-theme="dark"] main .card { background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--glass-rim) border-box; }
  :root[data-theme="dark"] main #ticker th:first-child, :root[data-theme="dark"] main #ticker td:first-child { background: var(--glass); }
}
/* Darker inner boxes, like the Analytics tiles, on My team, Live, League, Trades and
   Analytics only. Not on Waivers, All players, Planner, Predicted lineups, Live bonus points or Fixtures, and not in
   pop-ups or hover boxes (those sit outside these tabs, so they keep the usual shade). */
:root[data-theme="dark"] :is(#view-team, #view-live, #view-league, #view-trades, #view-analytics) { --card-2: #1f2024; }
:root[data-theme="dark"][data-dark="purple"] :is(#view-team, #view-live, #view-trades, #view-analytics) { --card-2: #140420; } /* League keeps the usual shade in Dark purple */
/* Planner 3 / 5 / 8 GWs switch: a dark track in both dark themes, the chosen one a step lighter */
:root[data-theme="dark"] .pp-seg { background: #1f2024; }
:root[data-theme="dark"][data-dark="purple"] .pp-seg { background: #140420; }
/* Fixtures hover box: a little room either side of the dash in the score, so double figures do not crowd it */
.float-tip.mt .mt-sc .sc-dash { font-style: normal; margin: 0 0.22em; }
.chip.tk-box b .sc-dash { font-style: normal; }
/* Fixtures hover box for a finished match: the darker panel in both dark themes */
:root[data-theme="dark"] .float-tip.head-tip.mt:has(.mt-head.ft) { background: #1f2024; }
:root[data-theme="dark"][data-dark="purple"] .float-tip.head-tip.mt:has(.mt-head.ft) { background: #140420; }
.card.bn-head p.muted.small { margin-bottom: 0; } /* Live bonus points intro: no extra space under the text */
/* Live tab match rows, dark themes: the score pill as a soft raised pill (a faint lighter fill and edge)
   instead of a bright purple or near-black block, so it sits calmly on the darker row */
:root[data-theme="dark"] .lv-m.sbm .lv-score, :root[data-theme="dark"]:not([data-dark="purple"]) .lv-m.sbm .lv-score { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"][data-dark="purple"] .lv-m.sbm .lv-score { background: rgba(255, 230, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 230, 255, 0.10); }
/* Season Simulator info boxes, dark themes: the icon on a soft mint-tinted square with a thin mint edge,
   instead of a bright purple or near-black block */
:root[data-theme="dark"] .sim-how .ic, :root[data-theme="dark"]:not([data-dark="purple"]) .sim-how .ic { background: rgba(43, 227, 143, 0.10); box-shadow: inset 0 0 0 1px rgba(43, 227, 143, 0.22); color: #2be38f; }
/* All results (League tab), dark themes: the score as the same soft raised pill as the Live match rows */
:root[data-theme="dark"] .fr-score, :root[data-theme="dark"]:not([data-dark="purple"]) .fr-score { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"][data-dark="purple"] .fr-score { background: rgba(255, 230, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 230, 255, 0.10); }
/* Dark purple, League tab: cards as before the glass work (plain card, usual border and shadow; the
   mint icon squares stay), as on the live site */
:root[data-theme="dark"][data-dark="purple"] main #view-league .card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
:root[data-theme="dark"][data-dark="purple"] #view-league { --card-2: #200b32; } /* the usual Dark purple inner-box shade (the grey theme's darker shade must not reach it) */
/* Dark purple only, Suggested waivers (My team): the Swap · xPts strip as a faint lighter band with a thin
   line under it, and the waiver-order number on the soft mint square (instead of bright purple blocks) */
:root[data-theme="dark"][data-dark="purple"] .wv-gain { background: rgba(255, 230, 255, 0.05); border-bottom: 1px solid rgba(255, 230, 255, 0.08); }
:root[data-theme="dark"][data-dark="purple"] .wv-gain b { color: #2be38f; }
:root[data-theme="dark"][data-dark="purple"] .wv-order b.n { background: rgba(43, 227, 143, 0.10); box-shadow: inset 0 0 0 1px rgba(43, 227, 143, 0.22); color: #2be38f; }
/* Live bonus points intro: closed by default (title plus one blurred line of the text, with a
   "Click to read how bonus works" label over it); a click anywhere on the card opens the full text */
.bn-head { position: relative; cursor: pointer; }
.bn-head:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.bn-head .bn-more { display: none; }
.card.bn-head.closed p.muted.small { max-height: 1.45em; overflow: hidden; filter: blur(2.5px); opacity: 0.6; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.bn-head.closed .bn-more { position: absolute; left: 50%; bottom: var(--bn-line, 30px); transform: translate(-50%, 50%); z-index: 1; display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); color: var(--text); font: 700 12.5px Inter, system-ui, sans-serif; white-space: nowrap; }
.bn-head.closed:hover .bn-more { border-color: var(--good); color: var(--good); }
@media (max-width: 700px) { .bn-head { --bn-line: 23px; } } /* phones: smaller card padding, so the label sits lower to stay on the blurred line */
/* Light mode: the Live tab's signal icon on the red "your players are live" tab is black, not green */
:root:not([data-theme="dark"]) #tabs.sb-tabs a.live-now.active svg { color: #1d0221; }
/* Visitors: the player card's rankings (e.g. "#84 of 118") are blurred */
body.visitor .pc-vs .vh i, body.visitor .pc-xp-rank { filter: blur(5px); user-select: none; }
/* Dark and Dark purple: the tab bar gets the same glass look as the cards (light-catching edge, cast shadow) */
:root[data-theme="dark"] #tabs.sb-tabs { border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--glass-rim) border-box; box-shadow: inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.3), 1px 2px 5px rgba(0, 0, 0, 0.16), 3px 6px 14px -6px rgba(0, 0, 0, 0.25), 6px 14px 32px -16px rgba(0, 0, 0, 0.38); }
/* Visitors: no "Sign up to view" button on the two open pages (Predicted lineups, Live bonus points) */
body.visitor:has(#view-bonus:not([hidden])) #vz-cta, body.visitor:has(#view-lineups:not([hidden])) #vz-cta { display: none !important; }
/* Live bonus points, visitors (no league, so no owner column): each player's BPS sits at the right in its
   own column, directly above the defensive contributions counts (e.g. 8/10), instead of trailing the name
   with an empty space after it. The defensive contributions rows drop the empty owner column too. */
@media (max-width: 700px) { body.visitor .bn-side .bn-list .bn-row .bn-bps { margin-left: auto; min-width: 40px; margin-right: 33px; text-align: right; font-variant-numeric: tabular-nums; } } /* phones only; desktop keeps BPS right after the name */
body.visitor .bn-dc-list .bn-row { grid-template-columns: 20px minmax(0, 1fr) 44px 40px 30px; }
@media (max-width: 1399px) {
  body.visitor .bn-dc-list .bn-row { grid-template-columns: 20px minmax(0, 1fr) 26px 36px 28px; }
}
@media (max-width: 480px) { body.visitor .bn-dc-list .bn-row { grid-template-columns: 20px minmax(0, 1fr) 36px 28px; } }
/* Live bonus points: a centred row of match buttons above the matches, in the same order as the cards; each scrolls to its match */
.bn-jumps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bn-jump { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }
.bn-jump:hover { border-color: var(--good); }
.bn-jump svg.kit { width: 16px; height: 16px; margin: 0; flex: none; }
.bn-jump .pulse { width: 6px; height: 6px; border-radius: 50%; background: #ff5a6a; animation: live-pulse 1.6s ease-in-out infinite; }
.bn-jump.live { border-color: color-mix(in srgb, #ff5a6a 45%, var(--line)); }
#bonus-list .bn-card { scroll-margin-top: 90px; }
@media (max-width: 700px) { .bn-jump { padding: 5px 10px; font-size: 12px; } #bonus-list .bn-card { scroll-margin-top: 12px; } }
/* Match buttons on one line: no kits, a little tighter; phones scroll the row sideways if it doesn't fit */
.bn-jumps { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.bn-jumps::-webkit-scrollbar { display: none; }
.bn-jump { flex: none; padding: 6px 11px; white-space: nowrap; }
@media (max-width: 700px) { .bn-jumps { justify-content: flex-start; margin: 0 -16px; padding: 0 16px; } }