:root {
  --bg: #0e1116;
  --surface: #171b22;
  --surface-2: #1f242d;
  --line: #2a313c;
  --text: #e6eaf0;
  --muted: #e4e8ee;
  --win: #3fb950;
  --loss: #f85149;
  --tie: #d29922;
  --accent: #58a6ff;
  --on-accent: #0e1116;   /* text on an accent-filled control: the dark-theme blue is light, so dark text */
  --on-pill: #0e1116;     /* text on the W/L/T pills and the live badge (white on them was ~2.5:1) */
  --filter: #1a7f37;      /* league + window dropdowns: dark enough for white text (AA 4.5:1) */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}
/* System (no theme chosen): follow the OS. An explicit theme opts out. This
   matches the "Daylight" palette, incl. white pill text (dark-on-pill was
   unreadable on the darker light-mode win/loss/tie). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f0f2f6; --line: #e2e6ec;
    --text: #10151c; --muted: #272d37;
    --accent: #1f6feb; --win: #1a7f37; --loss: #c0392b; --tie: #9a6700;
    --on-accent: #ffffff; --on-pill: #ffffff;
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  }
}

/* ── Named themes (Settings → Appearance). Each is a full, WCAG-contrast-checked
   palette — 4 dark, 4 light. data-theme is set on <html>; dark is the :root
   default so dark themes override only what they change. ──────────────────── */
:root[data-theme="midnight"] {   /* the default dark */
  --bg: #0e1116; --surface: #171b22; --surface-2: #1f242d; --line: #2a313c;
  --text: #e6eaf0; --muted: #e4e8ee; --accent: #58a6ff; --on-accent: #0e1116;
}
:root[data-theme="carbon"] {     /* true black, OLED-friendly */
  --bg: #000000; --surface: #0b0d10; --surface-2: #15181d; --line: #262b31;
  --text: #f2f4f7; --muted: #e4e8ee; --accent: #58a6ff; --on-accent: #00060f;
}
:root[data-theme="forest"] {     /* dark green */
  --bg: #0c1410; --surface: #121d17; --surface-2: #1a2a20; --line: #26382c;
  --text: #e4efe8; --muted: #dae4de; --accent: #3fca78; --on-accent: #06130c; --filter: #1e7a4a;
}
:root[data-theme="indigo"] {     /* deep indigo */
  --bg: #0f1020; --surface: #181a2e; --surface-2: #22243e; --line: #313356;
  --text: #e7e8f5; --muted: #e3e5f2; --accent: #8b93ff; --on-accent: #0f1020; --filter: #4a4fb0;
}
/* Light themes share the readable light result colours + white pill text. */
:root[data-theme="daylight"], :root[data-theme="ocean"],
:root[data-theme="sunset"], :root[data-theme="amber"] {
  --win: #1a7f37; --loss: #c0392b; --tie: #9a6700; --on-accent: #ffffff; --on-pill: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}
:root[data-theme="daylight"] {   /* neutral light */
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f0f2f6; --line: #e2e6ec;
  --text: #10151c; --muted: #272d37; --accent: #1f6feb; --filter: #1f6feb;
}
:root[data-theme="ocean"] {      /* light blue */
  --bg: #eff5fb; --surface: #ffffff; --surface-2: #e6eff9; --line: #d6e3f0;
  --text: #0e1a28; --muted: #253341; --accent: #1f74c4; --filter: #1f74c4;
}
:root[data-theme="sunset"] {     /* warm light */
  --bg: #fdf5ef; --surface: #ffffff; --surface-2: #fbe9de; --line: #f2ddce;
  --text: #2a1710; --muted: #37241c; --accent: #c4502a; --filter: #c4502a;
}
:root[data-theme="amber"] {      /* gold on cream */
  --bg: #fbf6ea; --surface: #fffdf8; --surface-2: #f6ecd5; --line: #ece0c4;
  --text: #241c08; --muted: #2f2714; --accent: #9a6a12; --filter: #9a6a12; --tie: #8a5e00;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Safe-area insets so the standalone app clears the notch / home indicator. */
  padding: 0 max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  max-width: 1180px;
  margin: 0 auto;
}

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: calc(16px + env(safe-area-inset-top)) 0 12px;   /* clear the status bar */
  background: linear-gradient(var(--bg) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 24px; margin: 0; letter-spacing: -.01em; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--win); box-shadow: 0 0 0 4px color-mix(in srgb, var(--win) 25%, transparent);
}
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ctrl-label { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
/* Always-visible entry to the team picker. */
/* .btn.teambtn (not .teambtn) so it beats the later .btn rule's size. */
.btn.teambtn { white-space: nowrap; font-size: 18px; padding: 10px 19px; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button {
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.seg button.active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.refresh {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  width: 48px; height: 46px; border-radius: 10px; cursor: pointer; font-size: 22px;
}
.refresh:active { transform: scale(.96); }
.refresh.spin { animation: spin .6s linear infinite; }
/* The settings gear reads better a bit larger than the refresh glyph. */
#settingsbtn { font-size: 29px; line-height: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.note {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--text);
  padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 13px;
}
.note code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* Settings dialog: preference groups + the theme picker (reuses .modal/.seg). */
.set-group { margin: 0 0 20px; }
.set-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.set-hint { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.theme-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-opt { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.theme-opt:hover { color: var(--text); }
.theme-opt.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* First-load indicator in the empty board area — a clear spinner + message so
   the user knows scores are on the way (the corner refresh icon is easy to miss). */
.loading { text-align: center; padding: 56px 20px 48px; }
.loading-spin {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; margin-bottom: 16px;
}
.loading-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--text); }
.loading-sub { margin: 0 auto; max-width: 320px; font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .loading-spin { animation-duration: 2s; } }

/* Score ticker (top): one ESPN-style card per tracked game live now / final today */
.scorebar {
  display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 0 14px; margin: 0; scrollbar-width: none;
}
.scorebar::-webkit-scrollbar { display: none; }
.sgame {
  flex: 0 0 auto; min-width: 186px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, var(--muted));
  border-radius: 12px; padding: 9px 13px; cursor: pointer;
  box-shadow: var(--shadow);
}
.sgame:active { transform: scale(.985); }
.sgame.live { border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); }

.sg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 7px; min-height: 16px;
}
.sg-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: color-mix(in srgb, var(--text) 65%, var(--muted)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-status.live { color: var(--loss); font-weight: 700; }
.sg-status .livedot { width: 6px; height: 6px; }
.sg-net { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

.sg-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 15px; }
.sg-logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.sg-logo.ph { display: grid; place-items: center; background: var(--surface-2); border-radius: 5px; font-size: 9px; font-weight: 700; color: var(--muted); }
.sg-rank { font-size: 11px; color: var(--muted); font-weight: 600; min-width: 15px; text-align: right; }
.sg-abbr { flex: 1; font-weight: 650; color: var(--text); white-space: nowrap; letter-spacing: -.01em; }
.sg-ball { font-size: 11px; flex: 0 0 auto; }
.sg-score { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
/* On finals, dim the loser so the winner reads at a glance */
.sgame:not(.live) .sg-row:not(.win) .sg-abbr,
.sgame:not(.live) .sg-row:not(.win) .sg-score { color: color-mix(in srgb, var(--text) 70%, var(--muted)); font-weight: 600; }

/* Sport tabs */
/* Sport filter: a compact checkbox group (no pills). */
.tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px;
  padding: 2px 0 12px; margin: 0;
}
/* Level/league + game-window dropdowns on their own row under the sport tabs. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.sport {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.sport input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.sport.on { font-weight: 650; }
.sport .livedot { width: 6px; height: 6px; background: var(--loss); }

/* Level selector: a dropdown pill that lives inline in the sport row, so the
   level no longer needs its own second row. Native control (an iOS wheel on
   phones), restyled to match the sport pills. */
.levelsel {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--filter); background-color: var(--filter); color: #fff;
  padding: 7px 30px 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1.2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 7px;
}
.levelsel:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* Options render in the native menu; force dark text so they stay legible there. */
.levelsel option { color: var(--text); background-color: var(--surface); }

/* Grid of team cards */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* League / conference heading: a full-width row spanning the whole card grid,
   with its teams flowing underneath until the next heading. */
.league-heading {
  grid-column: 1 / -1; margin: 14px 0 0; padding-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--line);
}
.league-heading:first-child { margin-top: 0; }

/* First-run welcome (shown when you have no picks yet). */
.welcome {
  grid-column: 1 / -1; max-width: 460px; margin: 10vh auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px;
}
.welcome h2 { margin: 0 0 8px; font-size: 22px; }
.welcome p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.welcome p.welcome-hint { margin-top: -10px; font-size: 13px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.welcome-actions .btn { padding: 9px 16px; }

.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, var(--muted));
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--team, var(--accent));
}
.card.err { opacity: .85; }

.card-head { display: flex; align-items: center; gap: 12px; }
.logo { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.logo.ph { display: grid; place-items: center; background: var(--surface-2); border-radius: 8px; color: var(--muted); font-weight: 700; font-size: 13px; }
.names { min-width: 0; }
.names .tname { font-weight: 650; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.names .league { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.stats { display: flex; gap: 10px; margin: 14px 0 12px; }
.stat { flex: 1; background: var(--surface-2); border-radius: 10px; padding: 9px 10px; }
.stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-size: 17px; font-weight: 650; margin-top: 2px; }
.stat.standing .v { font-size: 13px; font-weight: 550; line-height: 1.3; }

.form { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--on-pill);
}
.pill.W { background: var(--win); }
.pill.L { background: var(--loss); }
.pill.T { background: var(--tie); }

.games { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.games li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.games li:last-child { border-bottom: 0; }
.res { font-weight: 700; width: 16px; text-align: center; }
.res.W { color: var(--win); } .res.L { color: var(--loss); } .res.T { color: var(--tie); }
.opp { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gscore { font-variant-numeric: tabular-nums; color: var(--text); }
.gdate { flex: 0 0 auto; min-width: 54px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.next {
  margin-top: 12px; padding: 11px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.next .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.next .matchup { font-weight: 600; margin-top: 3px; }
.next .when { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* TV / streaming network for the next game — a touch bolder than the when text. */
.next .net { font-weight: 700; color: var(--text); letter-spacing: .01em; }
.next.live .k .net { color: var(--text); }
.next.none { background: var(--surface-2); border-color: var(--line); color: var(--muted); font-size: 13px; }

/* Rest-of-season schedule (collapsible) */
.sched { margin-top: 10px; }
.sched summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 550; color: var(--accent);
  padding: 2px 0;
}
.sched summary::-webkit-details-marker { display: none; }
.sched summary::before {
  content: "\25B8"; color: var(--muted); font-size: 10px;
  transition: transform .15s ease;
}
.sched[open] summary::before { transform: rotate(90deg); }
.sched summary:hover { text-decoration: underline; }
.sched .cnt {
  background: var(--surface-2); color: var(--muted);
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600;
}
.games.upcoming { margin-top: 8px; }
.games.upcoming .when {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Live game */
.card.is-live { box-shadow: var(--shadow), 0 0 0 1.5px color-mix(in srgb, var(--loss) 55%, transparent); }
.card-head { justify-content: flex-start; }
.card-head .names { flex: 1; }
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--loss); color: var(--on-pill); font-size: 10px; font-weight: 800;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; flex: 0 0 auto;
}
.live-badge .livedot { background: var(--on-pill); }
.livedot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--loss);
  display: inline-block; animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.next.live {
  background: color-mix(in srgb, var(--loss) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--loss) 40%, var(--line));
}
.next.live .k { color: var(--loss); display: flex; align-items: center; gap: 6px; font-weight: 700; }
.next.live .matchup { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.livescore { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.errmsg { color: var(--loss); font-size: 13px; margin-top: 10px; }

.foot {
  display: flex; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
  margin-top: 22px; color: var(--muted); font-size: 12px;
}
.foot-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Legend: next-game box states + form/result colors */
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .lg-group { font-size: 11px; font-weight: 600; color: var(--muted); }
.legend .lg-sep { width: 1px; height: 14px; background: var(--line); margin: 0 2px; }
.sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); flex: 0 0 auto; }
.sw-team { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sw-live { background: color-mix(in srgb, var(--loss) 22%, var(--surface-2)); border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); }
.sw-none { background: var(--surface-2); border-color: var(--line); }
.sw-win { background: var(--win); border-color: transparent; }
.sw-loss { background: var(--loss); border-color: transparent; }
.sw-tie { background: var(--tie); border-color: transparent; }

/* ---------------------------------------------------------- My Teams picker */
/* Buttons (welcome card + picker). */
.btn {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  padding: 7px 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--muted); }
.iconbtn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.iconbtn:hover { color: var(--text); background: var(--surface-2); }

/* Modal overlay + card (bottom sheet on phones, centered dialog on wider screens). */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5);
}
@media (min-width: 560px) { .modal { align-items: center; padding: 20px; } }
.modal[hidden] { display: none; }
.modal-card {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: 88vh;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
  padding: 16px; gap: 12px;
}
@media (min-width: 560px) { .modal-card { border-radius: 16px; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.modal-foot .foot-left { display: flex; flex-wrap: wrap; gap: 8px; }
/* Share-link import row (hidden until "Paste link" / a clipboard fallback).
   display:flex would beat the UA [hidden] rule, so restate it. */
.picker-import { display: flex; gap: 8px; }
.picker-import[hidden] { display: none; }
.picker-import .picker-search { min-width: 0; }

/* Device-sync panel (hidden until "Sync devices"). */
.picker-sync {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.picker-sync[hidden] { display: none; }
.sync-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); }
.sync-row .picker-search { flex: 1; min-width: 0; background: var(--surface); }
.sync-code { font-size: 20px; letter-spacing: 2px; color: var(--text); font-variant-numeric: tabular-nums; }
.sync-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.sync-note code { background: var(--surface); padding: 1px 5px; border-radius: 5px; word-break: break-all; }

/* Current favorites as removable chips. A seeded board can be large, so cap and scroll. */
.fav-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 108px; overflow-y: auto; }

/* Extras toggles (High School / NWC) that ride along on your custom board. */
.extras-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.extras-row[hidden] { display: none; }
.extras-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.extra-toggle {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.extra-toggle.on { background: var(--filter); border-color: var(--filter); color: #fff; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; font-weight: 600;
}
.fav-chip img { width: 16px; height: 16px; object-fit: contain; }
.fav-chip button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.fav-chip button:hover { color: var(--loss); }

/* League select + search. */
.picker-controls { display: flex; gap: 8px; }
.picker-search {
  flex: 1; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 14px;
}
.picker-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Search results list. */
.picker-results { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 2px; }
.picker-results .muted { color: var(--muted); font-size: 13px; padding: 10px 2px; }
/* Conference header row (name + "Add all"), sticky so it stays while scrolling. */
.conf-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 2px 8px; margin-bottom: 2px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
}
.conf-head .btn { padding: 5px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.result { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.result:hover { background: var(--surface-2); }
.result img, .result .ph { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.result .ph { display: grid; place-items: center; background: var(--surface-2); border-radius: 6px; font-size: 10px; font-weight: 700; color: var(--muted); }
.result .rname { flex: 1; font-size: 14px; }
.result .rsub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.result .add {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  border-radius: 999px; width: 28px; height: 28px; font-size: 18px; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
}
.result.on .add { background: var(--filter); border-color: var(--filter); color: #fff; }

/* ── Phone layout: denser cards so more than one team fits on screen, and a
   tidier header. Placed last so these override the base rules. ───────────── */
@media (max-width: 560px) {
  .controls { justify-content: flex-start; }      /* align buttons under the title */
  /* Native safe-area (contentInset) clears the island in the app, so the title
     can sit closer to the top than the desktop header does. */
  .topbar { padding-top: calc(6px + env(safe-area-inset-top)); }

  /* Compact sport checkboxes. */
  .sport { font-size: 13px; }

  /* Smaller ticker boxes — target ~3 across, less vertical weight. */
  .scorebar { gap: 8px; padding-bottom: 10px; }
  .sgame { min-width: 112px; padding: 6px 9px; border-radius: 10px; }
  .sg-status { font-size: 10px; }
  .sg-net { font-size: 10px; }
  .sg-row { font-size: 12px; gap: 5px; padding: 2px 0; }
  .sg-logo { width: 16px; height: 16px; }
  .sg-score { min-width: 16px; }

  /* Denser cards — aim for ~3 per screen. */
  .grid { gap: 9px; }
  .card { padding: 10px; }
  .card-head { gap: 8px; }
  .names .tname { font-size: 14px; }
  .names .league { font-size: 11px; }
  .logo { width: 28px; height: 28px; }
  .stats { margin: 8px 0; gap: 7px; }
  .stat { padding: 5px 8px; }
  .stat .k { font-size: 10px; }
  .stat .v { font-size: 14px; }
  .form { margin-bottom: 7px; gap: 4px; }
  .pill { min-width: 18px; height: 18px; font-size: 10px; }
  .games li { padding: 4px 0; font-size: 13px; }
  .next { margin-top: 7px; padding: 7px 9px; }
  .next .matchup { margin-top: 1px; }
  .next .when { margin-top: 1px; }
  .league-heading { margin: 8px 0 0; }
}