:root {
  --bg: #0f1420;
  --panel: #171e2e;
  --panel2: #1e2739;
  --line: #2a3550;
  --text: #e8ecf4;
  --muted: #8d98b0;
  --cheer: #2fd18b;
  --cheer-bg: rgba(47, 209, 139, .12);
  --boo: #ff5d6c;
  --boo-bg: rgba(255, 93, 108, .12);
  --hedge: #f5b942;
  --hedge-bg: rgba(245, 185, 66, .12);
  --live: #ff3b4e;
  --accent: #6c8cff;
  --wl: 58%; /* lightness for the red→green win-chance color */
  --winner: #ffffff; /* the winning team on a final game card — brighter than the body text */
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fb; --panel: #ffffff; --panel2: #eef1f7; --line: #dde2ec;
    --text: #141a28; --muted: #5f6a82;
    --cheer: #0f9a5f; --cheer-bg: rgba(15, 154, 95, .10);
    --boo: #d93446; --boo-bg: rgba(217, 52, 70, .09);
    --hedge: #b77b00; --hedge-bg: rgba(183, 123, 0, .10);
    --wl: 38%;
    --winner: #000000; /* light theme: darker than the body text, for the same contrast */
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* On a phone's Home Screen the page runs edge to edge: keep clear of the rounded corners, the
   home-indicator bar and, turned sideways, the notch. All zero everywhere else. */
html { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body {
  /* The extension popup is this wide. Served as a website the viewport can be narrower than that —
     an iPhone is 375 to 430 — so the width is a ceiling, not a promise. */
  width: 460px;
  max-width: 100%;
  min-height: 200px;
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
body.full { width: auto; max-width: 980px; margin: 0 auto; padding: 8px 16px 40px; }
button, select, input { font: inherit; color: inherit; }

.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; border-radius: 8px; }
/* In Settings the logo and title lead back to the main view */
.brand.back { cursor: pointer; }
.brand.back:hover .title { text-decoration: underline; }
.brand:focus { outline: none; }
.brand.back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--cheer), var(--accent)); color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .5px; flex: none;
}
.title { font-weight: 700; font-size: 14px; }
/* "DEV" beside the title in an unpacked (local folder) copy */
.dev-tag {
  margin-left: 4px; padding: 0 5px; border-radius: 4px; vertical-align: 2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: #0f1420; background: var(--hedge);
}
.brand > div { min-width: 0; } /* lets the subtitle shrink (…) instead of sliding under the controls */
.sub { display: flex; min-width: 0; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.sub-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sub-when { flex: none; margin-left: .3em; }
.sub-ago { display: none; } /* the phone's version of the time — see the phone block */
.sub-live { flex: none; margin-left: .3em; color: var(--live); font-weight: 700; }
.controls { display: flex; gap: 4px; flex: none; }
.controls button, .controls select {
  height: 28px; min-width: 28px; padding: 0 7px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.controls button:hover, .controls select:hover { border-color: var(--accent); }
.spin { animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.setup { padding: 16px 12px; }
.setup label { display: block; color: var(--muted); margin-bottom: 6px; }
.setup .row { display: flex; gap: 6px; }
.setup input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.setup > input { width: 100%; }
.hint { margin-top: 5px; font-size: 11.5px; color: var(--hedge); }
/* "You have unsaved changes" bar, shown when leaving Settings by the logo or ⚙ */
.discard { margin-bottom: 12px; padding: 10px; border-radius: 8px; border: 1px solid var(--hedge); background: var(--hedge-bg); font-size: 12.5px; }
.setup .discard .row { justify-content: flex-end; margin-top: 8px; }
.setup label .opt { color: var(--muted); font-size: 11.5px; }

/* ESPN leagues in Settings */
.espn-row {
  display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 6px;
  padding: 4px 0 4px 8px; margin-bottom: 4px; border-left: 3px solid var(--accent);
}
.espn-row select, .pick-row select {
  min-width: 0; height: 30px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel);
}
/* A Display setting that picks from a list rather than toggling: label left, dropdown right. */
.setup label.pick-row { justify-content: space-between; gap: 10px; }
.pick-row select { flex: none; max-width: 55%; color: var(--text); }
.ghost.x { padding: 4px 9px; }
.espn-add { margin-top: 2px; }

/* Jersey number, team records */
.num { color: var(--muted); font-weight: 500; font-size: 11px; }
.tm { white-space: nowrap; }
/* Final games: the winner's name and score stand out, the loser's is grayed out */
.tm.won { color: var(--winner); font-weight: 800; }
.tm.lost { color: var(--muted); font-weight: 600; }
/* NFL logo before a team name on game and team cards: no taller than the text, so the header keeps its height */
.tlogo { display: inline-block; width: 1.15em; height: 1.15em; margin-right: .25em; vertical-align: -.2em; object-fit: contain; }
.trec { color: var(--muted); font-weight: 500; font-size: 11px; }
.setup-h { margin: 14px 0 6px; font-weight: 700; font-size: 12px; }
.setup-h span { font-weight: 400; color: var(--muted); }
/* A plain on/off option in Settings (Display) */
.setup label.check-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; color: var(--text); cursor: pointer; }
.nick-row {
  display: grid; grid-template-columns: 1fr 110px 100px auto; align-items: center; gap: 8px;
  padding: 4px 0 4px 8px; margin-bottom: 4px; border-left: 3px solid var(--lc);
}
.nick-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nick-row input { padding: 5px 8px; min-width: 0; }
.nick-row.off { opacity: .45; }
.setup .nick-row label.nick-name { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text); cursor: pointer; }
.nick-row .nm { overflow: hidden; text-overflow: ellipsis; }
.setup input[type="checkbox"] { flex: none; margin: 0; padding: 0; accent-color: var(--lc, var(--accent)); cursor: pointer; }
/* League color: the tag preview is the picker (an invisible color input over it); ↺ only when changed */
.lcolor-pick { position: relative; display: inline-flex; justify-self: start; max-width: 100%; border-radius: 5px; cursor: pointer; }
.lcolor-pick .chip { min-width: 0; overflow: hidden; white-space: nowrap; } /* a very wide tag clips instead of spilling into ↺ */
.lcolor-pick:hover .chip, .lcolor-pick:focus-within .chip { outline: 1px solid var(--lc); outline-offset: 2px; }
.nick-row input.lcolor { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.lreset { padding: 2px 5px; font-size: 13px; line-height: 1; }
.lreset.gone { visibility: hidden; }
/* Team nicknames, folded under each league */
.team-nicks { margin: -2px 0 8px 11px; }
.team-nicks summary { cursor: pointer; color: var(--muted); font-size: 11.5px; padding: 2px 0; }
.team-nicks[open] summary { margin-bottom: 4px; }
.setup .team-row {
  display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 8px;
  margin: 0 0 4px; font-size: 12px; color: var(--text);
}
.team-row input { padding: 4px 8px; min-width: 0; }
.setup .actions { justify-content: flex-end; margin-top: 12px; }
.app-version { margin-top: 14px; text-align: center; font-size: 11px; color: var(--muted); }
.app-version a { color: var(--accent); text-decoration: none; }
.app-version a:hover { text-decoration: underline; }
/* A newer version in the Chrome Web Store: bar above the league cards, and beside the version in Settings */
.update-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 7px 10px;
  border-radius: 9px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); font-size: 12.5px;
}
.update-bar[hidden] { display: none; }
/* "Since your last look" — quieter than the update bar, and dismissed with the ✕ */
.since-bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 6px 10px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted);
}
.since-bar[hidden] { display: none; }
/* Two lines of leagues at most, until ▾ opens the rest. The clamp lives on an inner element: a flex
   item can't be a -webkit-box, so clamping the outer one does nothing. */
.since-text { min-width: 0; flex: 1; cursor: help; line-height: 1.35; }
.since-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.since-bar.open .since-clamp { display: block; overflow: visible; }
.since-toggle { line-height: 1; }
.since-toggle[hidden] { display: none; }
.since-lg { color: var(--text); font-weight: 700; }
.since-text .good { color: var(--cheer); font-weight: 700; font-variant-numeric: tabular-nums; }
.since-text .bad { color: var(--boo); font-weight: 700; font-variant-numeric: tabular-nums; }
.since-bar .x { flex: none; padding: 2px 7px; font-size: 11px; color: var(--muted); }
.update-now { flex: none; padding: 5px 11px; border-radius: 7px; border: 0; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.app-version .update-note { color: var(--text); font-weight: 600; }
.app-version .update-now { padding: 2px 8px; font-size: 11px; }
.ghost { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: none; cursor: pointer; }
.primary { padding: 8px 14px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }

.status { margin: 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel); color: var(--muted); }
.status.error { color: var(--boo); background: var(--boo-bg); }

main { padding: 10px 12px 14px; }

/* League summary cards */
.leagues { display: grid; gap: 6px; }
body.full .leagues { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.lg {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--lc);
  border-radius: 9px; padding: 7px 10px;
}
.lg-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.lg-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 4px; }
.side { min-width: 0; }
.side.r { text-align: right; }
.tn { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pj { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* "5 yd return" beside a turnover on Live plays, since some leagues score return yards. */
.lp-ret { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs { color: var(--muted); font-size: 11px; }
.bar { height: 4px; border-radius: 2px; background: var(--boo-bg); margin-top: 6px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--cheer); }
/* Under the win bar: starters still to play, by position — yours on the left, theirs on the right */
.to-play { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.to-play .r { text-align: right; }
/* Only when both lines are there — "currently playing" above "left to play" — does a rule go between
   them; a single line keeps the card as it was. */
.to-play + .to-play { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }
/* Where you stand right now, beside your score: green when you're up, red when you're down. */
.mnow { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); cursor: help; }
.mnow.good { color: var(--cheer); }
.mnow.bad { color: var(--boo); }
.bye-warn { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--hedge); }
/* A lead that just turned over, on the card it happened in. */
.lead-flip { margin-top: 4px; font-size: 11px; font-weight: 700; }
.lead-flip.good { color: var(--cheer); }
.lead-flip.bad { color: var(--boo); }
.flip-new { animation: flip-pulse 1.1s ease-out 2; }
@keyframes flip-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .flip-new { animation: none; } }
.to-play-label { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.lg.skip { opacity: .6; border-left-color: var(--line); }
.lg .tn { color: var(--text); font-weight: 600; }
/* Team avatar before the name: no taller than the text, so the line keeps its height */
.av {
  display: inline-block; width: 1.1em; height: 1.1em; margin-right: .35em; border-radius: 50%;
  vertical-align: -.2em; object-fit: cover; background: var(--panel2);
}
.av-letter { font-size: .75em; width: 1.45em; height: 1.45em; line-height: 1.45em; text-align: center; font-weight: 800; color: var(--muted); vertical-align: .05em; }
.lg .un { color: var(--muted); font-weight: 400; }
.rec { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 1px; }
.mid { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pct { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.wl { font-weight: 700; }
/* The verdict and, after it, where the matchup stands right now — kept on one line, shrinking the
   league name beside it rather than wrapping. */
.wl-wrap { flex: none; white-space: nowrap; }
.lg.clickable { cursor: pointer; transition: opacity .15s, background .15s; }
.lg.clickable:hover { background: var(--panel2); }
.lg.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lg.sel { background: color-mix(in srgb, var(--lc) 14%, var(--panel)); border-color: var(--lc); }
.lg.dim { opacity: .45; }
.lg.dim:hover { opacity: .8; }

/* Roster panel: click a team name on a league card */
.lg .tn.ro-open { cursor: pointer; }
.lg .tn.ro-open:hover, .lg .tn.ro-open:focus-visible { text-decoration: underline; outline: none; }
.roster { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-start; padding: 12px; }
.roster[hidden] { display: none; }
.ro-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.ro-panel {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--lc);
  border-radius: 10px; padding: 8px 10px 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.ro-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ro-title { min-width: 0; }
.ro-team { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-team .un { color: var(--muted); font-weight: 400; font-size: 12px; }
.bd-inj { margin-left: 6px; vertical-align: 2px; }
.ro-sub { font-size: 11.5px; color: var(--muted); }
.ro-sum { margin: 6px 0 0; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ro-sec h4 { margin: 10px 0 2px; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ro-note { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.ro-slot {
  flex: none; width: 40px; padding: 1px 0; border-radius: 4px; text-align: center;
  font-size: 10px; font-weight: 800; color: var(--muted); background: var(--panel2);
}

/* Points breakdown: click a player row. Sits above the roster panel when opened from it. */
.bd-open { cursor: pointer; border-radius: 5px; }
.bd-open:hover { background: var(--panel2); }
.bd-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.breakdown { z-index: 30; padding-top: 40px; }
.bd-panel { max-width: 380px; }
.ro-sec .bd-head { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.bd-where { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; border-bottom: 1px solid var(--line); }
.bd-row:last-of-type { border-bottom: 0; }
.bd-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.bd-pts { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cheer); }
.bd-pts.neg { color: var(--boo); }
.bd-empty, .bd-note { font-size: 11.5px; color: var(--muted); padding: 2px 0; }

/* "Only <league> ✕" chip next to the time filter */
.lchip {
  flex: none; max-width: 45%; height: 28px; padding: 0 9px; border-radius: 7px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 700;
  background: color-mix(in srgb, var(--lc) 22%, var(--panel)); border: 1px solid var(--lc);
}
.lchip:hover { background: color-mix(in srgb, var(--lc) 35%, var(--panel)); }

.mustwatch {
  margin-top: 10px; padding: 8px 10px; border-radius: 9px;
  background: linear-gradient(90deg, var(--hedge-bg), transparent); border: 1px solid var(--line);
}
.mustwatch b { color: var(--hedge); }

.tabs { display: flex; gap: 4px; margin: 12px 0 8px; background: var(--panel); padding: 3px; border-radius: 9px; border: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; background: none; padding: 6px; border-radius: 7px; cursor: pointer; color: var(--muted); font-weight: 600; }
.tabs button.on { background: var(--panel2); color: var(--text); }

.tabs button { padding: 6px 2px; white-space: nowrap; } /* five tabs fit the 460px popup on one line */

/* Bench tab: one card per league */
.bench-card { border-left: 4px solid var(--lc); }
.bench-sum { font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Game cards */
.games { display: grid; gap: 8px; }
body.full .games { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }
.game { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.game.post { opacity: .72; }
.g-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; background: var(--panel2); border-bottom: 1px solid var(--line);
}
.matchup { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.matchup .sc { color: var(--muted); font-weight: 600; margin: 0 2px; }
.matchup .won .sc, .matchup .lost .sc { color: inherit; font-weight: 700; }
.gstat { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.gstat.live { color: var(--live); font-weight: 700; }
.gstat.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 5px; }
@keyframes pulse { 50% { opacity: .25; } }
.tally { font-size: 11px; font-weight: 700; display: flex; gap: 6px; }
.tally .c { color: var(--cheer); } .tally .b { color: var(--boo); } .tally .h { color: var(--hedge); }

.cols { display: grid; grid-template-columns: 1fr 1fr; }
.col { padding: 6px 8px 8px; min-width: 0; }
.col + .col { border-left: 1px solid var(--line); }
.col.span { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
.col h4 { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; }
.col.cheer h4 { color: var(--cheer); }
.col.boo h4 { color: var(--boo); }
.col.hedge h4 { color: var(--hedge); }
.empty { color: var(--muted); font-size: 11.5px; font-style: italic; }

.pl { display: flex; align-items: center; gap: 6px; padding: 3px 0; min-width: 0; }
.pl + .pl { border-top: 1px dashed var(--line); }
.pl-main { flex: 1; min-width: 0; }
.pl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-meta { font-size: 11px; color: var(--muted); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pl-pts { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.pl-pts .v { font-weight: 700; }
.pl-pts .p { display: block; font-size: 10.5px; color: var(--muted); }
/* Latest scoring play beside the points: "+6.5" */
.gain { margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }
.gain.good { color: var(--cheer); }
.gain.bad { color: var(--boo); }
.inj { font-size: 9.5px; font-weight: 800; color: #fff; background: var(--boo); border-radius: 3px; padding: 0 3px; }
.inj.q { background: var(--hedge); }

.chip {
  display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700;
  padding: 0 5px; border-radius: 4px; line-height: 15px;
  background: color-mix(in srgb, var(--lc) 22%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--lc) 60%, transparent);
}
/* A league's own points inside its chip, for the leagues that don't score a player the same as the
   number on his row. Small and tight, so it costs as little width (and so as few wrapped lines) as
   it can. */
.chip-pts { margin-left: 3px; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.85; }
.chip.for::before { content: "+"; color: var(--cheer); }
.chip.against::before { content: "\2212"; color: var(--boo); }

/* By-player view */
.psort { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.psort span { margin-right: 4px; }
.psort button {
  height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-weight: 600;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
}
.psort button:hover { border-color: var(--accent); }
.psort button.on { color: var(--text); background: var(--panel2); border-color: var(--accent); }
.plist { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; margin-bottom: 8px; }
.plist h3 { margin: 2px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.plist.cheer h3 { color: var(--cheer); }
.plist.boo h3 { color: var(--boo); }
.plist.hedge h3 { color: var(--hedge); }
body.full .pcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; }

body.win { width: auto; }

/* Time-window filter */
.filter { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; }
.filter label { color: var(--muted); font-size: 12px; }
.filter select {
  flex: 1; min-width: 0; height: 28px; padding: 0 6px; border-radius: 7px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
}
.filter select:hover { border-color: var(--accent); }

/* By NFL team */
.fullname { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.verdict { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.verdict.c { color: var(--cheer); background: var(--cheer-bg); }
.verdict.b { color: var(--boo); background: var(--boo-bg); }
.verdict.h { color: var(--hedge); background: var(--hedge-bg); }
.verdict.q { color: var(--muted); background: var(--panel); border: 1px solid var(--line); font-weight: 600; }

/* Games / teams with none of your players: header only, dimmed */
.game.quiet { opacity: .7; }
.game.quiet .g-head { border-bottom: 0; }
.game.quiet.post { opacity: .5; }
.cols.one { grid-template-columns: 1fr; }
.cols > .col.span:first-child { border-top: 0; }

/* Live points: dimmed before kickoff; a dot only while his unit is on the field —
   green, or red fading in and out in the red zone */
.pl-pts.pre .v { color: var(--muted); font-weight: 600; }
.pl-pts.field .v::before, .pl-pts.redzone .v::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cheer); margin-right: 4px; vertical-align: middle;
}
.pl-pts.redzone .v::before { background: var(--live); animation: pulse 1.4s infinite; }

/* Live plays: two columns, newest first */
.lp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-col { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px 8px; min-width: 0; }
.lp-col h4 { margin: 2px 0 4px; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; }
.lp-col.cheer h4 { color: var(--cheer); }
.lp-col.boo h4 { color: var(--boo); }
.lp { padding: 6px 0; }
.lp + .lp { border-top: 1px dashed var(--line); }
.lp-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lp-pts { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 36px; }
.lp-pts.good { color: var(--cheer); }
.lp-pts.bad { color: var(--boo); }
.lp-name { font-weight: 600; }
.lp-desc { font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
.lp-badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--accent);
  border-radius: 3px; padding: 0 4px; margin-right: 4px; vertical-align: 1px;
}
.lp-when { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.lp-idle {
  margin: 4px 0 2px; padding: 10px 8px; border: 1px dashed var(--line); border-radius: 8px;
  color: var(--muted); font-size: 12px; line-height: 1.35; text-align: center;
}
.lp-next { margin-top: 4px; font-size: 11px; color: var(--text); }
.lp-note { margin-top: 8px; font-size: 11px; color: var(--muted); text-align: center; }

.foot { margin-top: 10px; font-size: 11px; color: var(--muted); text-align: center; }

/* Pull down to refresh, in the Home Screen app: a pill that comes down from under the top edge with
   the finger. It sits above the page rather than pushing it, so nothing reflows mid-gesture. */
.pull {
  position: fixed; top: calc(env(safe-area-inset-top) - 34px); left: 50%; z-index: 40;
  transform: translate(-50%, 0); opacity: 0; pointer-events: none;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: transform .2s ease, opacity .2s ease;
}
.pull.dragging { transition: none; } /* under the finger it follows exactly; it only eases on the way back */
.pull.ready { color: var(--text); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .pull { transition: none; } }
/* On Android the installed app's own overscroll would otherwise reload the whole page. */
@media (display-mode: standalone) { html { overscroll-behavior-y: contain; } }

/* ---------- Phones ----------
   The extension popup is always 460px, but the same page served as a website opens at whatever
   width the phone has. Everything below is what the popup's width was hiding: fixed grid columns
   that add up to more than the screen, and two-column splits with nowhere to put a name.
   455 and not 460: the popup's own viewport is exactly 460, and `max-width: 460px` would match it.
   The widest iPhone is 440, so everything a phone can be is still below this. */
@media (max-width: 455px) {
  body.full { padding: 8px 10px 32px; }
  main { padding: 10px 10px 14px; }
  /* Pop out and Open in a full tab: there's one window and one tab on a phone. */
  #popout, #expand { display: none; }
  /* "updated 11:21 AM" doesn't fit beside the buttons here, so the header says how long ago. */
  .sub-clock { display: none; }
  .sub-ago { display: inline; }
  /* Five tabs stop fitting one line around 400px at the popup's type size. A point and a half off
     keeps them on one line down to an iPhone SE, and they wrap rather than clip below that. The
     rows get taller at the same time: a tab is a thumb target here, not a mouse target. */
  .tabs { flex-wrap: wrap; }
  .tabs button { flex: 1 0 auto; padding: 10px 5px; font-size: 11.5px; }
  .controls button { height: 34px; min-width: 34px; }
  /* Cheer and boo side by side leave about 150px each — not enough for a name, his team and his
     league chips. Stack them, cheer first, with the divider turned to match. */
  .cols, .lp-cols { grid-template-columns: 1fr; }
  .col + .col { border-left: 0; border-top: 1px solid var(--line); }
  /* Settings: the league's name takes the first line, its nickname, color and reset the second. */
  .nick-row { grid-template-columns: 1fr auto auto; row-gap: 6px; }
  .nick-row > .nick-name { grid-column: 1 / -1; }
  /* A Display dropdown has no room beside its label here, so it takes the next line in full. Both
     of them the same width, rather than each sized to whichever option happens to be picked. */
  .setup label.pick-row { flex-wrap: wrap; }
  /* iOS zooms the whole page in when you tap a field whose text is under 16px, and doesn't zoom
     back out. At 16px it leaves the page alone. */
  input, select, textarea { font-size: 16px; }
  .pick-row select { flex: 1 0 100%; max-width: 100%; }
}