/* Colours are set once here; the dark-mode block below swaps them when the device uses dark mode. */
:root {
  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;
  --text: #15161a;
  --muted: #6b6f7b;
  --line: #e6e7ec;
  --header-1: #0f1b33;     /* banner colours (navy) */
  --header-2: #1f3b63;
  --accent: #2563eb;       /* links and highlights */
  --accent-soft: #e6eefc;  /* your team's rows */
  --flag: #fff4dc;         /* injury/news rows */
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 2px 8px rgb(16 24 40 / 0.06);
  --radius: 12px;
  --d1: #1a9e4a;
  --d2: #01fc7a;
  --d3: #e7e7e7;
  --d4: #ff1751;
  --d5: #80072d;
  --good: #15803d;         /* projected points gained */
  --bad: #c0262d;          /* projected points lost */
  /* Compared players 1-3 (radar chart). Checked with a colour-blindness validator: all pairs pass. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --chart-other: #b4b8c2;  /* other teams' lines on the Team analysis chart */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1014;
    --surface: #1a1b21;
    --surface-2: #22232b;
    --text: #ececf1;
    --muted: #9a9eab;
    --line: #2c2e37;
    --header-1: #0b1324;
    --header-2: #172a47;
    --accent: #6ea8ff;
    --accent-soft: #16233a;
    --flag: #3a2f12;
    --good: #4ade80;
    --bad: #f87171;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --chart-other: #4b4e5a;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}

* { box-sizing: border-box; }
/* Hidden things stay hidden even when a rule below gives them a display (e.g. the grid layout). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Banner: the title with the sad wooden spoon, centred. */
header {
  position: relative; /* for the Change team button in its top right corner */
  padding: 22px 16px 20px;
  background: linear-gradient(120deg, var(--header-1) 0%, var(--header-2) 100%);
  color: #fff;
  text-align: center;
}
header h1 { margin: 0; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.15; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.brand img { flex: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)); }
header p { margin: 4px 0 0; }
.tagline { color: rgb(255 255 255 / 0.8); font-size: 1rem; font-style: italic; }
#subtitle { color: #fff; font-weight: 600; font-size: 0.95rem; }
#subtitle:empty { display: none; }
/* Change team: a white outlined button in the banner's top right corner. */
.change-team {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.change-team:hover { background: rgb(255 255 255 / 0.25); }
/* Phones: the button sits under the team name instead, so it doesn't overlap the title. */
@media (max-width: 720px) {
  .change-team { position: static; display: inline-block; margin-top: 10px; }
}
@media (max-width: 480px) {
  header h1 { font-size: 1.35rem; }
  .brand img { width: 40px; height: 40px; }
  .tagline { font-size: 0.9rem; }
}

main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

h2 { margin: 28px 0 12px; font-size: 1.5rem; letter-spacing: -0.02em; }
h3 { margin: 24px 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.note { color: var(--muted); margin-top: 0; font-size: 0.92rem; }
a { color: var(--accent); }

/* ---- Landing page ---- */
#landing {
  max-width: 640px;
  margin: 32px auto 0;
  padding: 8px 24px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
#landing h2 { margin-top: 20px; }
#landing h3 { margin-top: 28px; }
#team-form label { display: block; margin-bottom: 6px; font-weight: 600; }
#team-form label.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-weight: normal;
  cursor: pointer;
}
.remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.form-row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.form-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-row button {
  padding: 11px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.form-row button:hover { filter: brightness(1.1); }
.error { color: #d0103a; margin: 8px 0 0; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 8px; }
code.url { overflow-wrap: anywhere; }
mark { background: #ffe58a; color: #000; padding: 0 2px; border-radius: 2px; }

/* ---- Team page: menu on the left, the chosen page on the right ---- */
.team-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.menu {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu-item svg { flex: none; width: 18px; height: 18px; }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.team-pages { padding-top: 12px; }
.page > h2:first-child { margin-top: 12px; }
#league-picker { margin: 12px 0 0; }
#league-picker label { margin-right: 6px; color: var(--muted); }
select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* Phones: the menu becomes a row of buttons along the top. */
@media (max-width: 720px) {
  .team-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .menu {
    top: 0;
    z-index: 10; /* stays above the pitch and table headings as the page scrolls */
    flex-direction: row;
    margin: 0 -16px;
    border-radius: 0;
    box-shadow: 0 1px 0 var(--line);
    overflow-x: auto; /* too many pages for a narrow screen: the row scrolls sideways */
    scrollbar-width: none;
  }
  .menu-item { flex: 1 0 auto; flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 0.78rem; text-align: center; }
  .menu-item[aria-current="page"] { background: none; }
  .team-pages > p:first-child { margin-top: 16px; }
}

/* ---- Tables: shown as cards ---- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }
th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:hover td { background: var(--surface-2); }
tr.flagged td { background: var(--flag); }
th[title] { cursor: help; text-decoration: underline dotted; }

/* Player names look like links but are buttons (they open the popup). */
.player-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.player-link:hover span { color: var(--accent); text-decoration: underline; }
.shirt { flex: none; display: block; }

/* ---- View tabs (Pitch / List) and popup tabs ---- */
.tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  width: fit-content;
}
.tab {
  padding: 6px 18px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 600; }

/* ---- Pitch view ---- */
.formation { margin: 4px 0 10px; font-weight: 600; }
.pitch-caption { margin-bottom: 4px; }

/* Our half of the pitch, from our goal line (top) to the halfway line (bottom), with
   10 even mowing stripes. The markings are drawn to scale (Law 1) in two images:
   pitch-top.svg (penalty area, goal area, penalty mark and arc) and pitch-halfway.svg
   (halfway line and centre circle). Each image keeps its true shape, stretched to the
   pitch's width; the grass between them grows with the pitch's height. */
.pitch, .bench { max-width: 760px; }
.pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 22px;
  padding: 26px 8px 40px;
  border-radius: 14px;
  overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.045) 0 10%, transparent 10% 20%),
    linear-gradient(to bottom, #138a4e, #0d6e3e);
  box-shadow: var(--shadow);
}
/* Goal line and touchlines, with the two marking images inside them. */
.pitch::before {
  content: "";
  position: absolute;
  inset: 12px 12px 0;
  border: 2px solid rgb(255 255 255 / 0.38);
  border-bottom: 0;
  background:
    url("pitch-top.svg") top center / 100% auto no-repeat,
    url("pitch-halfway.svg") bottom center / 100% auto no-repeat;
  pointer-events: none;
}
.pitch-row { position: relative; z-index: 1; }
.pitch-row, .bench { display: flex; justify-content: space-evenly; gap: 4px; }
.bench {
  padding: 14px 8px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pitch-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.pitch-shirt { position: relative; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.3)); transition: transform 0.15s; }
.pitch-player:hover .pitch-shirt { transform: translateY(-2px); }
.pitch-flag {
  position: absolute;
  top: -2px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffd23f;
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.pitch-name, .pitch-fixture {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.pitch-name {
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff;
  color: #15161a;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}
.pitch-fixture {
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  font-size: 0.7rem;
}
/* Projected points for the coming gameweek, under the fixture. */
.pitch-projected {
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--header-2);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Key above the pitch explaining the labels under each player. */
.pitch-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 6px 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.key-item { display: inline-flex; align-items: center; gap: 6px; }
.pitch-key .pitch-fixture { background: #1a7a40; margin: 0; }
.pitch-key .pitch-projected { margin: 0; }
/* On the bench the fixture sits on a light card instead of grass. */
.bench .pitch-fixture { background: var(--surface-2); color: var(--muted); }
.bench .pitch-name { box-shadow: none; border: 1px solid var(--line); }
.pitch-player:hover .pitch-name { color: var(--accent); }

@media (max-width: 480px) {
  .pitch-player { width: 68px; }
  .pitch-name { font-size: 0.68rem; padding: 2px 4px; }
  .pitch-fixture, .pitch-projected { font-size: 0.62rem; padding: 1px 3px; }
}

/* ---- Score page ---- */
.matches { display: grid; gap: 8px; }
.match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.match.mine { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.match-score {
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--header-1);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.team-cell { display: flex; flex-direction: column; min-width: 0; }
.team-cell.away { text-align: right; }
.team-name { font-weight: 600; overflow-wrap: anywhere; }
/* Team names are buttons that show the team on the live pitch. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.link-button:hover { color: var(--accent); text-decoration: underline; }
.manager { color: var(--muted); font-size: 0.8rem; }

/* Countdowns to waivers, free agency, the deadline and the next kick-off. */
.countdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.countdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.countdown-label { color: var(--muted); font-size: 0.8rem; }
.countdown-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown-time { color: var(--muted); font-size: 0.8rem; }
.countdown.passed .countdown-value { color: var(--muted); }

/* Live pitch: points instead of projections; a gold outline while the player's match is on. */
.live-team { scroll-margin-top: 12px; }
.live-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.back-button {
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.back-button:hover { background: var(--accent); color: #fff; }
.live-points { background: var(--accent); }
.pitch-player.playing .pitch-shirt { outline: 2px solid #facc15; outline-offset: 2px; border-radius: 8px; }
/* The "Points for" text wraps, so the table fits a phone without sideways scrolling. */
.breakdown td:nth-child(3) { color: var(--muted); font-size: 0.85rem; white-space: normal; min-width: 150px; }
.breakdown .player-link:hover { color: var(--accent); text-decoration: underline; }
tr.bench-row td { opacity: 0.7; }
tr.mine td { background: var(--accent-soft); }
tr.mine .team-name { color: var(--accent); }
td { font-variant-numeric: tabular-nums; }

/* ---- Team analysis page ---- */
.analysis-summary { font-weight: 600; margin: 4px 0 8px; }
.analysis-table tfoot td { background: var(--surface-2); color: var(--muted); font-weight: 600; border-bottom: none; }
.analysis-table .has-help { cursor: help; text-decoration: underline dotted; }
/* "Show as a table" and "Show your picks" boxes. */
.table-view { margin: 8px 0 12px; }
.table-view summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.9rem; padding: 4px 0; }
.table-view[open] summary { margin-bottom: 6px; }
.flagged-list ul { margin: 0 0 8px; padding-left: 20px; }
.flagged-list li { margin: 2px 0; }

/* Position-by-gameweek chart: your line in the accent colour, the others grey for context
   (checked with the colour-blindness validator: the pair is well apart in light and dark mode). */
.chart-wrap { position: relative; }
.position-chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--muted); font-size: 12px; }
.position-line { fill: none; stroke: var(--chart-other); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.position-line.mine { stroke: var(--accent); stroke-width: 3; }
.position-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart-direct-label { fill: var(--text); font-size: 12px; font-weight: 700; }
.chart-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-overlay { fill: transparent; cursor: crosshair; outline: none; }
.chart-overlay:focus-visible { stroke: var(--accent); stroke-width: 2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; font-size: 0.85rem; color: var(--muted); }
.line-key { display: inline-block; width: 16px; height: 2px; border-radius: 1px; background: var(--chart-other); vertical-align: middle; }
.line-key.mine { height: 3px; background: var(--accent); }
.chart-tip {
  position: absolute;
  top: 0;
  transform: translateX(12px);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.chart-tip.flip { transform: translateX(calc(-100% - 12px)); }
.chart-tip p { margin: 1px 0; display: flex; align-items: center; gap: 6px; }
.chart-tip-title { color: var(--muted); font-weight: 600; }
.chart-tip-row.mine { font-weight: 700; }

/* ---- Simulator page ---- */
.pitch-player.selected .pitch-name { background: var(--accent); color: #fff; }
.pitch-player.selected .pitch-shirt { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; }
/* Simulator: replacements beside the pitch on wide screens (the page gets wider to make
   room), under it otherwise. The 1200px matches sideBySide in app.js. */
@media (min-width: 1200px) {
  main:has(#page-simulator:not([hidden])) { max-width: 1600px; }
  /* The list grows to 560px first (room for Swap to Next without scrolling sideways), then
     the pitch takes the rest (at least 560px, at most its own 760px). */
  .sim-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1fr) minmax(400px, 560px);
    gap: 24px;
    align-items: start;
  }
  /* Stays in view while the page scrolls, with its own scroll if it's taller than the screen. */
  .sim-side {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .sim-side h3:first-child { margin-top: 0; }
}

/* +/- column: projected points gained (green) or lost (red) by a swap. */
.gain { color: var(--good); font-weight: 700; }
.loss { color: var(--bad); font-weight: 700; }

/* A free agent swapped into the Simulator's squad. */
.pitch-player.swapped .pitch-name { box-shadow: 0 0 0 2px #f5b301; }

/* Simulator substitutions: dragging a player (mouse or pen) and the players it can swap with. */
#page-simulator .pitch-player { user-select: none; }
.pitch-player.dragging { opacity: 0.4; }
.pitch-player.drop-target .pitch-shirt { outline: 2px dashed #fff; outline-offset: 3px; border-radius: 8px; }
.bench .pitch-player.drop-target .pitch-shirt { outline-color: var(--accent); }
.pitch-player.drop-hover .pitch-shirt { outline-style: solid; outline-width: 3px; transform: scale(1.08); }
.drag-ghost {
  position: fixed;
  z-index: 1000;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.85;
}
.sub-options h4 { margin: 12px 0 6px; }
.sub-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* Projected points of the starting XI, at the top of Current squad and Simulator. */
.team-projection {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  max-width: 760px; /* as wide as the pitch */
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.team-projection-label { font-weight: 600; }
.team-projection-value { font-size: 1.6rem; font-weight: 800; }
.team-projection .note { flex-basis: 100%; margin: 0; font-size: 0.8rem; }

/* Simulator: difference from the real squad and the swaps made. */
.sim-difference { margin: 0 0 4px; font-weight: 700; }
.sim-change-list { margin: 0 0 8px; padding-left: 20px; }
.sim-change-list li { margin: 2px 0; }
/* × after each swap: undoes just that swap. */
.undo-button {
  margin-left: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.undo-button:hover { border-color: var(--bad); color: var(--bad); }
.reset-button, .swap-button {
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.swap-button {
  padding: 3px 9px;
  border-color: var(--header-2);
  background: var(--header-2);
  color: #fff;
  font-size: 0.8rem;
}
/* Tighter cells in the Simulator's list, so the important columns fit without scrolling. */
.sim-side th, .sim-side td { padding: 7px 8px; }
.sim-side .player-link { gap: 6px; }
.reset-button { margin-bottom: 14px; }
.reset-button:hover, .swap-button:hover { filter: brightness(1.1); }

/* Shows 5 players; the height is set by app.js and the rest scroll inside the box. */
.scroll-box {
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.scroll-box { overflow-x: auto; }
.scroll-box table { box-shadow: none; border-radius: 0; overflow: visible; white-space: nowrap; }
.scroll-box th { position: sticky; top: 0; z-index: 1; }

/* ---- Player popup ---- */
dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
}
dialog::backdrop { background: rgb(10 10 20 / 0.6); backdrop-filter: blur(2px); }

#player-content { padding: 0 16px 16px; }

.close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  margin: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.close:hover { background: rgb(255 255 255 / 0.3); }

.player-header {
  margin: 0 -16px;
  padding: 20px 16px;
  background: linear-gradient(120deg, var(--header-1) 0%, var(--header-2) 100%);
  color: #fff;
}
.player-header h2 { margin: 8px 0 0; }
.player-header p { margin: 2px 0 0; color: rgb(255 255 255 / 0.8); }
.player-header .news { margin-top: 8px; color: #ffd36b; }
/* Name on the left, evaluation on the right; a flex box keeps clear of the floating × button.
   Stacked on phones, where only the name needs to keep clear of it. */
.player-header-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 24px;
}
.player-identity { flex: 1 1 200px; }
.evaluation {
  flex: 1 1 340px;
  max-width: 460px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
}
.player-header .verdict { margin: 0 0 2px; color: #fff; font-weight: 700; }
.player-header .verdict.good { color: #86efac; }  /* light green/red: readable on the navy */
.player-header .verdict.poor { color: #fca5a5; }
.player-header .evaluation-detail { font-size: 0.8rem; }
.ranks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.rank {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  font-size: 0.8rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .player-header-columns { display: block; }
  .evaluation { margin-top: 14px; }
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.stat {
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.stat.has-help { cursor: help; }
/* Group headings in the popup's detailed stats: Attack, Defence, Physical. */
.stat-group { margin: 14px 0 -6px; font-size: 0.85rem; color: var(--accent); }
.source-note { margin-top: 8px; font-size: 0.75rem; }
/* Next gameweek's projection: tinted so it reads as a forecast, not a past result. */
.stat.projection { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.stat-note { color: var(--muted); font-size: 0.75rem; }
/* Popup stat headings keep their case: "xG", not "XG". */
dialog th { text-transform: none; font-size: 0.8rem; }
/* Not forced to capitals, so "xG per 90" keeps its lower-case x. */
.stat-label { color: var(--muted); font-size: 0.8rem; }
.stat-value { font-size: 1.15rem; font-weight: 700; }

/* Wide tables scroll sideways instead of stretching the page. */
.table-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.table-scroll table { white-space: nowrap; box-shadow: none; }

.difficulty {
  display: inline-block;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  color: #000;
}
.d1 { background: var(--d1); color: #fff; }
.d2 { background: var(--d2); }
.d3 { background: var(--d3); }
.d4 { background: var(--d4); color: #fff; }
.d5 { background: var(--d5); color: #fff; }

/* ---- Fixtures page ---- */
.difficulty-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.fixture-cell { display: flex; flex-direction: column; gap: 4px; }
.difficulty.fixture { display: flex; justify-content: space-between; gap: 8px; min-width: 88px; }
.club-name { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Current best XI page ---- */
.pitch-player.mine .pitch-name { background: var(--accent); color: #fff; } /* in your squad */
/* Who owns the player in the league; free agents stand out in yellow. */
.pitch-owner {
  max-width: 100%;
  margin-top: 2px;
  padding: 1px 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  color: var(--header-1);
  font-size: 0.7rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pitch-owner.free { background: #ffd23f; color: #000; font-weight: 700; }
.free-agent { font-weight: 700; color: var(--good); }
.bestxi-table .owner-cell { white-space: normal; }
.bestxi-table tfoot td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--line); border-bottom: none; }

@media (max-width: 480px) {
  table { font-size: 0.8rem; }
  th, td { padding: 8px 6px; }
}

/* ---- Compare & waivers page ---- */
h4 { margin: 18px 0 8px; font-size: 0.95rem; }
.compare-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.compare-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 84px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--slot-color);
}
.compare-slot .note { margin: 0; }
.compare-slot .undo-button { position: absolute; top: 8px; right: 8px; margin: 0; }
.series-1 { --slot-color: var(--series-1); }
.series-2 { --slot-color: var(--series-2); }
.series-3 { --slot-color: var(--series-3); }
.add-player {
  align-self: stretch;
  min-height: 56px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.add-player:hover { border-color: var(--accent); }
.compare-search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.search-results { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.search-results li.note { padding: 6px 4px; }
.search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-result:hover { background: var(--surface-2); }
.search-result span:first-of-type { font-weight: 600; }
.search-result .note { margin: 0 0 0 auto; font-size: 0.8rem; }

/* Radar chart: recessive grid, thin outlines, light fills so overlapping shapes stay visible. */
.radar-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.radar { display: block; width: 100%; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-label { fill: var(--text); font-size: 13px; font-weight: 600; }
.radar-scale { fill: var(--muted); font-size: 10px; }
.radar-shape { fill-opacity: 0.15; stroke-width: 2; stroke-linejoin: round; }
.radar-dot { stroke: var(--surface); stroke-width: 2; }
.radar-target { fill: transparent; cursor: pointer; }
.radar-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--header-1);
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
}
.radar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 4px; font-size: 0.9rem; font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; }

.compare-table th[class^="series-"] { border-top: 3px solid var(--slot-color); }
.compare-table .axis-row td { font-weight: 700; background: var(--surface-2); }
.compare-table td:first-child { color: var(--muted); }
.compare-table .axis-row td:first-child { color: var(--text); }
.compare-table td.best { font-weight: 700; }
.percentile { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.waiver-table td:nth-child(3) { color: var(--good); font-weight: 700; }
/* Phones: percentiles go under the value; season points, next opponent (already in the
   projection) and shirts are left out of the waiver tables, so they fit without sideways scrolling. */
@media (max-width: 480px) {
  .compare-table th, .compare-table td, .waiver-table th, .waiver-table td { padding: 6px 5px; }
  .percentile { display: block; }
  .waiver-table th:nth-child(6), .waiver-table td:nth-child(6),
  .waiver-table th:nth-child(7), .waiver-table td:nth-child(7),
  .waiver-table .shirt { display: none; }
  .waiver-table .swap-button { padding: 3px 6px; }
}