/* 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 */
  --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 */
  --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;
}
.flag.doubt { background: var(--doubt); }
.flag.out { background: var(--bad); }

.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); }
.rk.t1 { background: var(--accent); color: var(--brand); }
.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-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; }
#view-league .lg-grid { margin-bottom: 0; }

/* ---------- Predicted lineups: one card per match, in kick-off order, big readable pitches ---------- */
#lineups.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; }
#lineups .lineup-card { padding: 16px; border-radius: 16px; background: var(--card); }
#lineups .lineup-card .matchup-strip { margin: 0 0 12px; }
#lineups .mrow-teams { padding: 10px 16px; }
#lineups .mrow-teams .side b { font-size: 20px; }
#lineups .mrow-teams svg.kit { width: 30px; height: 30px; }
#lineups .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%; }
#lineups .pitch { gap: 14px; padding: 16px 6px 12px; margin: 0 0 8px; border-radius: 12px; }
#lineups .lrow { flex-wrap: nowrap; justify-content: space-evenly; gap: 4px; }
#lineups .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; }
#lineups .lp svg.lp-kit { width: 38px; height: 38px; margin: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5)); }
#lineups .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; }
#lineups .lp.sure .lp-name { border-bottom-color: #00a85a; }
#lineups .lp.likely .lp-name { border-bottom-color: #ffd60a; }
#lineups .lp.doubt .lp-name { border-bottom-color: #e5393a; }
#lineups .lp b { font: 800 12.5px Archivo, system-ui, sans-serif; font-stretch: 112%; color: #e8dcf3; }
#lineups .lp .tag { margin-left: 4px; font-size: 9.5px; padding: 0 4px; }
#lineups .lp .tag.mine { background: #00ff85; border-color: #00ff85; color: #37003c; }
#lineups .lp .tag.free { background: #a6f0c9; color: #1d0221; }
#lineups .lextra { font-size: 13px; line-height: 1.7; }
@media (max-width: 900px) {
  .lu-sides { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #lineups .lineup-card { padding: 10px; }
  #lineups .lp { flex-basis: 70px; }
  #lineups .lp svg.lp-kit { width: 30px; height: 30px; }
  #lineups .lp-name { font-size: 11px; padding: 1px 4px 2px; }
  #lineups .mrow-teams .side b { font-size: 16px; }
  #lineups .mrow-teams .ko { font-size: 13px; padding: 4px 8px; }
}
.lu-side { min-width: 0; }
@media (max-width: 700px) {
  #lineups .lp { flex: 1 1 0; }
  #lineups .lp-name { font-size: 10.5px; }
  #lineups .lp b { font-size: 11px; }
  #lineups .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; }
#lineups .lp b { font-weight: 900; color: #fff; }
#lineups .lp-name { font-weight: 900; }
#lineups .lu-team strong { font-weight: 900; }
#lineups .lu-team .muted { font-weight: 900; }
#lineups .lextra { font-weight: 600; }
#lineups .lextra strong { font-weight: 900; }
#lineups .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; }
#lineups .lp.confirmed b { color: #00ff85; }
#lineups .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.8; 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: #00ff85; color: #1d0221; }
:root[data-theme="dark"] #tabs.sb-tabs a.active svg { color: #1d0221; }
.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: #00ff85; color: #1d0221; }
#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; }
.kv.top { margin: 0 -10px; padding: 9px 12px; border-radius: 8px; background: #ececf0; }
:root[data-theme="dark"] .kv.top { background: rgba(255, 255, 255, 0.09); }
@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; }
.float-tip.head-tip::before { content: ""; display: block; height: 3px; margin: -14px -16px 12px; border-radius: 14px 14px 0 0; 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: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 ---------- */
#lineups .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"] #lineups .pitch { background: repeating-linear-gradient(180deg, #2f7d3b 0 56px, #2a7235 56px 112px); }
#lineups .sqp-lines { inset: 8px; }
#lineups .sqp-lines .arc { top: -46px; width: 88px; height: 88px; margin-left: -44px; }
#lineups .sqp-lines .box { left: 18%; right: 18%; height: 96px; }
#lineups .sqp-lines .six { left: 34%; right: 34%; height: 36px; }
#lineups .sqp-lines .d { bottom: 26px; width: 84px; height: 84px; margin-left: -42px; clip-path: inset(0 0 calc(100% - 13px) 0); }
#lineups .lrow { position: relative; z-index: 1; }
#lineups .lp { gap: 3px; color: var(--text); }
#lineups .lp svg.lp-kit { filter: drop-shadow(0 5px 6px rgba(40, 0, 50, 0.3)); }
#lineups .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; }
#lineups .lp:hover .lp-name { border-color: #37003c; }
#lineups .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; }
#lineups .lp.likely b { color: #ffd60a; }
#lineups .lp.doubt b { color: #ff8a8a; }
#lineups .lp.confirmed b { color: #00ff85; }
:root[data-theme="dark"]:not([data-dark="purple"]) #lineups .lp b { background: #1e1f22; }
@media (max-width: 700px) {
  #lineups .pitch { padding: 48px 2px 24px; gap: 12px; }
  #lineups .lp-name { padding: 2px 4px; }
  #lineups .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. */
#lineups .lu-team { gap: 10px; }
#lineups .lu-team .muted { margin-left: 0; }
@media (min-width: 901px) { #lineups .lu-side + .lu-side .lu-team { justify-content: flex-end; } }
@media (min-width: 701px) {
  #lineups .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-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; }
.lv-dial .z { fill: none; stroke-width: 10; stroke-linecap: round; }
.lv-dial .z.mid { stroke-linecap: butt; }
.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%; }
.lv-pct.bad { color: #c8102e; }
.lv-pct.good { color: var(--good); }
:root[data-theme="dark"] .lv-pct.bad { color: #ff6b8a; }
/* 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; }
/* 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; }
.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 */
#lineups .lextra { font-size: 14.5px; line-height: 22px; font-weight: 700; }
#lineups .lextra strong { font-weight: 900; }
#lineups .lextra .muted { font-weight: 700; }
#lineups .lextra { line-height: 21px; }
/* Predicted lineups: bigger letters in the FA and You tags (tighter padding, so the boxes barely grow) */
#lineups .tag.free, #lineups .tag.mine { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: 1px; }
#lineups .lp .tag { padding: 2px 3px; font-size: 11px; font-weight: 800; }
#lineups .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) */
#lineups .tag.free, .lu-key .tag.free { background: #37003c; border-color: #37003c; color: #fff; font-family: var(--score); font-weight: 800; border-radius: 5px; letter-spacing: 0.02em; }
:root[data-theme="dark"]:not([data-dark="purple"]) #lineups .tag.free, :root[data-theme="dark"]:not([data-dark="purple"]) .lu-key .tag.free { background: #1e1f22; border-color: #1e1f22; }
#lineups .lp .tag.free { background: #37003c; border-color: #37003c; color: #fff; }
:root[data-theme="dark"]:not([data-dark="purple"]) #lineups .lp .tag.free { background: #1e1f22; border-color: #1e1f22; }
/* Predicted lineups: Out/doubtful in a grey panel joined to the bottom of the pitch */
#lineups .pitch.joined { margin-bottom: 0; border-radius: 14px 14px 0 0; }
#lineups .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; }
#lineups .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; }
.tab-drop .td-ic svg { width: 18px; height: 18px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; 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; }
}
.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; }
#lineups .mrow-teams .ko.score { padding: 6px 16px; }
#lineups .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:last-child { 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); box-shadow: 0 6px 16px -8px rgba(55, 0, 60, 0.6); }
.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 */
#lineups .lp-ft { display: flex; align-items: stretch; gap: 3px; max-width: 100%; margin-top: -3px; }
#lineups .lp.ft .lp-ft > b { margin-top: 0; color: #00ff85; }
#lineups .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; }
#lineups .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) { #lineups .lp-sub { font-size: 9.5px; padding: 1px 4px; } #lineups .lp-ft { flex-direction: column; align-items: center; gap: 2px; } #lineups .lp-sub { border-radius: 5px; } }
/* Subs sit under the starter's points, with the sub's own points always visible */
#lineups .lp-ft { flex-direction: column; align-items: center; gap: 3px; }
#lineups .lp-sub { max-width: 100%; border-radius: 6px; padding: 2px 4px 2px 6px; }
#lineups .lp-sub em { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
#lineups .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: 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; }
/* 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 { min-width: 210px; 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; }
.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-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%; } }
.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; }
/* 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 */
#lineups .sbug .sb-side b { font-size: 20px; }
#lineups .sbug .sb-disc { width: 44px; height: 44px; }
#lineups .sbug .sb-disc svg.kit { width: 28px; height: 28px; }
#lineups .sbug .ko { font-size: 15px; padding: 8px 16px; }
#lineups .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) {
  #lineups .sbug .sb-side b { font-size: 15px; }
  #lineups .sbug .sb-disc { width: 32px; height: 32px; }
  #lineups .sbug .sb-disc svg.kit { width: 20px; height: 20px; }
  #lineups .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; }
#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 - 96px); margin-top: auto; margin-bottom: 24px; }
  .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; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); }
/* 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); }
/* 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; }
/* 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: the same narrow player column and short owner names as All players */
@media (max-width: 700px) {
  #club-table td:first-child { white-space: normal; width: 1%; min-width: 96px; max-width: 118px; padding-right: 4px; line-height: 1.15; }
  #club-table td:first-child a.pname { font-size: 13.5px; }
  #club-table td:first-child > .muted { display: block; margin-top: 2px; font-size: 11px; }
  #club-table td:first-child .kit { width: 18px; height: 18px; }
  #club-table th, #club-table td { padding-left: 4px; padding-right: 4px; }
  #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; } }
/* 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 */
.lv-lists:has(> :only-child) { grid-template-columns: minmax(0, 275px); 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%; } }
/* 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; }