:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c2330;
  --border: #2d3646;
  --text: #e6edf3;
  --muted: #8b98a9;
  --accent: #3fb950;
  --accent-dim: #238636;
  --warn: #d29922;
  --danger: #f85149;
  --pick-me: #1f6feb;
  --radius: 10px;
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
#app { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.view.wide { max-width: none; }
#view-draft { padding: 0 0.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
h2 { font-size: 0.95rem; margin: 0 0 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

.hero { text-align: center; margin: 2.5rem 0 2rem; }
.hero h1 { font-size: 2.4rem; }
.tagline { color: var(--muted); max-width: 34rem; margin: 0.5rem auto 0; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
.card, .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.card h2 { color: var(--text); }
label { display: block; margin: 0.6rem 0; font-size: 0.85rem; color: var(--muted); }
input {
  display: block; width: 100%; margin-top: 0.25rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.6rem; font-size: 0.95rem;
}
input:focus { outline: 1px solid var(--accent-dim); }
.row { display: flex; gap: 0.6rem; }
.row label { flex: 1; }

button {
  font: inherit; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  padding: 0.5rem 0.9rem;
}
button.primary { background: var(--accent-dim); border-color: var(--accent-dim); font-weight: 600; width: 100%; margin-top: 0.8rem; }
button.primary:hover { background: var(--accent); }
button.ghost { background: transparent; }
button.ghost:hover { background: var(--panel-2); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.error { color: var(--danger); text-align: center; }
.hint { color: var(--muted); font-size: 0.8rem; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 1rem;
}
.share { color: var(--muted); }
.share code {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 1.1rem; letter-spacing: 0.15em;
  color: var(--accent);
}

.lobby-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; }
@media (max-width: 800px) { .lobby-grid { grid-template-columns: 1fr; } }

.seats { list-style: none; margin: 0; padding: 0; counter-reset: seat; }
.seats li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border);
}
.seats li::before {
  counter-increment: seat; content: counter(seat);
  color: var(--muted); font-variant-numeric: tabular-nums; width: 1.4rem; text-align: right;
}
.seats .who { flex: 1; }
.seats .empty { color: var(--muted); font-style: italic; }
.seats .mine { color: var(--accent); font-weight: 600; }
.seats button { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.commish { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.commish .primary { width: auto; margin: 0; flex: 1; }

.members { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.members li { padding: 0.25rem 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; background: var(--muted); }
.dot.on { background: var(--accent); }

.chatbox { display: flex; flex-direction: column; }
.chatlog {
  height: 180px; overflow-y: auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem;
  font-size: 0.85rem; margin-bottom: 0.4rem;
}
.chatlog .from { color: var(--accent); font-weight: 600; margin-right: 0.4rem; }
.chatbox form { display: flex; gap: 0.4rem; }
.chatbox input { margin: 0; }

.status { color: var(--muted); font-size: 0.85rem; }
.status.live { color: var(--accent); }
.status.paused { color: var(--warn); }
.clock { text-align: center; }
.onclock { font-size: 0.85rem; color: var(--muted); }
.onclock strong { color: var(--text); }
.time { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.time.low { color: var(--danger); }
.time.mine { color: var(--accent); }
.controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.toggle { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.toggle input { width: auto; display: inline; margin: 0; }

.draft-grid {
  display: grid; grid-template-columns: 300px 1fr 280px; gap: 0.8rem;
  align-items: start;
}
@media (max-width: 1100px) { .draft-grid { grid-template-columns: 1fr 1fr; } .board-panel { order: -1; grid-column: 1 / -1; } }
@media (max-width: 700px) { .draft-grid { grid-template-columns: 1fr; } }

.filters { margin-bottom: 0.5rem; }
.pos-filters { display: flex; gap: 0.3rem; margin-top: 0.5rem; flex-wrap: wrap; }
.pos-filters button { padding: 0.15rem 0.55rem; font-size: 0.8rem; border-radius: 999px; }
.pos-filters button.active { background: var(--accent-dim); border-color: var(--accent-dim); }

.player-list { max-height: 62vh; overflow-y: auto; }
.player-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border);
}
.player-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-row .meta { color: var(--muted); font-size: 0.78rem; }
.player-row .inj { color: var(--warn); font-size: 0.7rem; }
.player-row button { padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.pos-badge {
  font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 4px;
  color: #fff; min-width: 2.2rem; text-align: center;
}
.pos-QB { background: #b83280; } .pos-RB { background: #2f855a; }
.pos-WR { background: #2b6cb0; } .pos-TE { background: #c05621; }
.pos-K { background: #6b46c1; } .pos-DEF { background: #4a5568; }
/* NHL */
.pos-C { background: #b83280; } .pos-LW { background: #2f855a; }
.pos-RW { background: #2b6cb0; } .pos-D { background: #c05621; }
.pos-G { background: #6b46c1; }
/* NBA (C shares the hockey centre swatch; NBA has no G *position*) */
.pos-PG { background: #2b6cb0; } .pos-SG { background: #2c7a7b; }
.pos-SF { background: #2f855a; } .pos-PF { background: #c05621; }

.board-panel { overflow: hidden; }
.board { overflow-x: auto; }
.board table { border-collapse: collapse; font-size: 0.75rem; width: 100%; }
.board th, .board td {
  border: 1px solid var(--border); padding: 0.25rem 0.35rem;
  min-width: 88px; text-align: left; vertical-align: top;
}
.board th { background: var(--panel-2); position: sticky; top: 0; }
.board th.me { color: var(--accent); }
.board td .p-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.board td.auto { opacity: 0.65; }
.board td.current { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(63,185,80,0.08); }
.board td.mine { background: rgba(31,111,235,0.12); }
.board .rnd { color: var(--muted); min-width: 2rem; text-align: center; }

.roster { list-style: none; margin: 0 0 0.8rem; padding: 0; font-size: 0.85rem; }
.roster li { display: flex; gap: 0.5rem; align-items: center; padding: 0.25rem 0; border-bottom: 1px solid var(--border); }
.roster .rd { color: var(--muted); font-size: 0.72rem; width: 2.2rem; }

.tabs {
  display: flex; gap: 0.3rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem;
  /* Six tabs do not fit a phone. Scroll them instead of clipping Draft Room
     and Admin off the right edge, where they become unreachable. */
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: none; background: transparent; border-radius: 999px;
  padding: 0.35rem 1rem; font-size: 0.85rem; color: var(--muted);
  flex: 0 0 auto; white-space: nowrap;
}
.tab.active { background: var(--accent-dim); color: #fff; font-weight: 600; }
.tab:not(.active):hover { background: var(--panel-2); }

.section-label { margin: 1.2rem 0 0.6rem; }
.center { text-align: center; }

.myteam { margin-bottom: 0.4rem; }
.myteam-row { display: flex; gap: 0.5rem; align-items: center; }
.myteam-row input { margin: 0; }
#team-emoji { width: 4.2rem; text-align: center; font-size: 1.2rem; }
button.slim { width: auto; margin: 0; padding: 0.5rem 1.2rem; }

.team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.team-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; }
.team-card.mine { border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-dim); }
.team-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.team-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--panel-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.team-title { min-width: 0; }
.team-title .tname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-title .mgr { color: var(--muted); font-size: 0.78rem; }
.team-slot { color: var(--muted); font-size: 0.72rem; margin-left: auto; flex-shrink: 0; }
.team-roster { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
.team-roster li { display: flex; gap: 0.45rem; align-items: center; padding: 0.18rem 0; }
.team-roster .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-roster .pteam { color: var(--muted); font-size: 0.72rem; }
.team-roster .none { color: var(--muted); font-style: italic; }

.recap { list-style: none; margin: 0; padding: 0; }
.recap li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 0.6rem; }
.recap li:last-child { border-bottom: none; }
.recap .tag { color: var(--accent); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; min-width: 9.5rem; }

select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.6rem; font: inherit;
}

.season-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 0.8rem; margin-bottom: 0.8rem; }
@media (max-width: 800px) { .season-grid { grid-template-columns: 1fr; } }

.matchup { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; }
.matchup .mrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.matchup .mteam { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup .mteam.winner { font-weight: 700; color: var(--accent); }
.matchup .mpts { font-variant-numeric: tabular-nums; font-weight: 600; }
.matchup .mpts.live { color: var(--warn); }
.matchup .mpts.live::before { content: '● '; font-size: 0.6rem; vertical-align: middle; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .matchup .mpts.live::before { animation: none; } }
.matchup .bye { color: var(--muted); font-style: italic; }
.week-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.6rem 0 0.35rem; }
.week-label:first-child { margin-top: 0; }

.standings { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.standings th, .standings td { text-align: left; padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--border); }
.standings th { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.standings td.num, .standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
.standings tr.mine td { color: var(--accent); }

.lineup-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.4rem 1rem; margin-bottom: 0.7rem; }
.lineup-row { display: flex; align-items: center; gap: 0.5rem; }
.lineup-row .slot-label { width: 3.2rem; font-weight: 700; font-size: 0.78rem; color: var(--muted); }
.lineup-row select { flex: 1; padding: 0.35rem 0.4rem; font-size: 0.85rem; }
.lineup-row .slot-pts { width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }

.panel-head { display: flex; align-items: center; justify-content: space-between; }
.week-nav { display: flex; align-items: center; gap: 0.4rem; }
.week-nav button { padding: 0.1rem 0.55rem; font-size: 0.9rem; }
.week-nav span { color: var(--muted); font-size: 0.8rem; min-width: 4.5rem; text-align: center; }

.matchup { cursor: pointer; }
.matchup:hover { border-color: var(--accent-dim); }
.matchup-detail { border-top: 1px solid var(--border); margin-top: 0.4rem; padding-top: 0.4rem; cursor: default; }
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; font-size: 0.78rem; }
.md-grid .md-team { font-weight: 700; margin-bottom: 0.25rem; }
.md-row { display: flex; gap: 0.4rem; padding: 0.1rem 0; }
.md-row .slot { color: var(--muted); width: 2.6rem; font-size: 0.7rem; font-weight: 700; }
.md-row .pl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-row .pts { font-variant-numeric: tabular-nums; }

.fa-filters { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.fa-filters input[type="text"], .fa-filters #fa-search { max-width: 240px; margin: 0; }
.fa-list { max-height: 68vh; }
.fa-owner { color: var(--muted); font-size: 0.72rem; min-width: 6rem; text-align: right; }
.fa-pts { font-variant-numeric: tabular-nums; font-size: 0.8rem; min-width: 3.5rem; text-align: right; }
.fa-dropper { background: var(--panel-2); border-radius: 6px; padding: 0.5rem; margin: 0.3rem 0 0.5rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fa-dropper select { flex: 1; min-width: 180px; }

.trade-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.6rem 0; font-size: 0.82rem; }
.trade-columns h3 { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; margin: 0 0 0.4rem; }
.trade-columns label { display: flex; gap: 0.4rem; align-items: center; margin: 0.15rem 0; font-size: 0.82rem; color: var(--text); }
.trade-columns input { width: auto; margin: 0; }
.trade-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; font-size: 0.82rem; }
.trade-item .tstatus { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.trade-item .tstatus.pending { color: var(--warn); }
.trade-item .tstatus.accepted { color: var(--accent); }
.trade-item .players { margin: 0.25rem 0; }
.trade-item .tbtns { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.trade-item .tbtns button { padding: 0.2rem 0.7rem; font-size: 0.78rem; }

.champion {
  text-align: center; font-size: 1.15rem; font-weight: 700; padding: 0.7rem;
  background: rgba(63,185,80,0.1); border: 1px solid var(--accent-dim);
  border-radius: 8px; margin-bottom: 0.7rem;
}
.bracket { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.bracket .round-title { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
.bracket .game { border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.bracket .game .gname { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; }
.bracket .grow { display: flex; justify-content: space-between; padding: 0.12rem 0; }
.bracket .grow.winner { font-weight: 700; color: var(--accent); }
.bracket .tbd { color: var(--muted); font-style: italic; }

.faab-left { color: var(--accent); text-transform: none; letter-spacing: 0; margin-left: 0.5rem; }
.claim-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; margin-bottom: 0.4rem; font-size: 0.82rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.claim-item .cstatus { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); min-width: 4.5rem; }
.claim-item .cstatus.pending { color: var(--warn); }
.claim-item .cstatus.won { color: var(--accent); }
.claim-item button { padding: 0.15rem 0.6rem; font-size: 0.75rem; margin-left: auto; }
.waiver-tag { font-size: 0.68rem; font-weight: 700; color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: 0.05rem 0.35rem; }
.fa-dropper input[type="number"] { width: 5.5rem; margin: 0; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
@media (max-width: 800px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-grid label { color: var(--muted); font-size: 0.85rem; }
.admin-grid .myteam-row { margin-top: 0.25rem; }
.adm-member { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.adm-member:last-of-type { border-bottom: none; margin-bottom: 0.6rem; }
.adm-member .who { flex: 1; }
.adm-member button { padding: 0.15rem 0.6rem; font-size: 0.75rem; }
.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }
.danger-btn { border-color: var(--danger); color: var(--danger); }
.danger-btn:hover { background: rgba(248,81,73,0.12); }
.inline-label { display: flex; align-items: center; gap: 0.3rem; margin: 0; white-space: nowrap; }
.inline-label input { width: 5rem; margin: 0; }

.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 1rem; box-shadow: 0 4px 24px rgba(0,0,0,0.5); z-index: 10;
}
.toast.err { border-color: var(--danger); color: var(--danger); }

/* Connection status. A 3-second toast is not a status: this stays up for as
   long as the socket is actually down, so the UI stops looking healthy while
   it is silently unable to send anything. */
.conn-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  padding: 0.45rem 1rem; text-align: center;
  font-size: 0.85rem; font-weight: 600;
  background: var(--panel-2); color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.conn-banner.offline { background: var(--danger); color: #fff; border-bottom-color: var(--danger); }
/* Controls that send an intent are visibly dead while the socket is down,
   rather than accepting taps that go nowhere. */
body.is-offline .needs-conn,
body.is-offline .needs-conn button { opacity: 0.45; }

/* auction draft room */
.auction-panel { margin-bottom: 0.8rem; }
.auc-main { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.auc-block { min-width: 0; }
.auc-player-block { flex: 1; min-width: 200px; }
.auc-player { font-size: 1.15rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-bid { font-size: 1.6rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.auc-actions .myteam-row { margin: 0; }
.auc-actions input[type="number"] { width: 5rem; margin: 0; }
.auc-budgets { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.auc-team { border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.55rem; font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; }
.auc-team .who { font-weight: 700; }
.auc-team .meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.auc-team.done { opacity: 0.45; }
.auc-team.mine { border-color: var(--pick-me); }
.auc-team.nom { border-color: var(--warn); }
.auc-team.leading { border-color: var(--accent); }
.player-row .val { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 0.8rem; min-width: 2.8rem; text-align: right; }
.player-row .nom-amount { width: 4.5rem; margin: 0; }

/* ==========================================================================
   Phone draft room (<=700px)
   --------------------------------------------------------------------------
   Measured 2026-08-22 at 375x812: the draft room ran 2616px tall with nothing
   sticky, putting the countdown ~1590px above the Nominate/bid controls. Under
   a 10-second bid clock you could see the time OR the button, never both.
   Everything below serves one rule: the things you need under a running clock
   stay on screen.
   ========================================================================== */
/* The mirror is a phone affordance only — the real clock lives in the header.
   Declared BEFORE the media query: at equal specificity the later rule wins,
   so putting this after would silently disable the phone clock. */
.auc-clock-mirror { display: none; }

@media (max-width: 700px) {
  /* iOS Safari zooms the whole page when a focused control is under 16px.
     Base inputs were 14.25px, so every tap on the bid field re-zoomed the
     layout mid-clock. 16px is the threshold, not a preference. */
  input, select, textarea { font-size: 16px; }

  /* One sticky region carrying player, current bid, bid buttons AND a clock
     mirror — so there is no second sticky element to offset against. */
  #auction-panel {
    position: sticky; top: 0; z-index: 5;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  }
  .auc-clock-mirror {
    display: block;
    font-size: 1.5rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
  }

  /* Was ~380px of the panel's height on a phone, pushing the bid buttons off
     screen. One scrollable row instead of a wrapped grid. */
  .auc-budgets {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .auc-team { flex: 0 0 auto; }

  /* Time-pressured controls were 22.5px tall; 44px is the accessible minimum
     and the difference between hitting +$1 and missing it. */
  .auc-actions button, .auc-actions input[type="number"] { min-height: 44px; }
  .player-row button { min-height: 36px; }
}

/* ==========================================================================
   Identity, landing page, My Team, My Matchup
   ========================================================================== */

/* ---------- sign-in gate ---------- */
.gate-card { text-align: center; }
.gate-card .hint { margin: 0 auto 1.2rem; max-width: 26rem; }
/* Google renders its button into this slot; it sizes itself. */
.gsi-slot { display: flex; justify-content: center; min-height: 44px; }
.opt { color: var(--muted); font-weight: 400; text-transform: none; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 1.2rem;
}
.topbar-title h1 { font-size: 1.8rem; margin: 0; }
.topbar-title .tagline { margin: 0.3rem 0 0; text-align: left; }
.account { display: flex; align-items: center; gap: 0.6rem; }
.avatar {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: var(--accent-dim); color: #fff;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}

/* ---------- "needs you" ---------- */
.todo-panel { border-left: 3px solid var(--warn); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.todo-list .btnlink { width: 100%; text-align: left; }

/* ---------- league cards ---------- */
.league-cards {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.league-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.league-card header { display: flex; align-items: center; gap: 0.7rem; }
.league-card h3 { margin: 0; font-size: 1rem; }
.sport-badge { font-size: 1.6rem; line-height: 1; }
.card-sub { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; }
.record { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.champ-note { margin: 0; color: var(--warn); font-size: 0.85rem; }
.card-actions { display: flex; gap: 0.5rem; margin-top: auto; flex-wrap: wrap; }

/* Anchors styled as buttons: real links, so middle-click and copy still work. */
.btnlink {
  display: inline-block; text-decoration: none; text-align: center;
  border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.85rem;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.btnlink:hover { background: var(--border); }
.btnlink.primary { background: var(--accent-dim); border-color: var(--accent-dim); font-weight: 600; }
.btnlink.primary:hover { background: var(--accent); }
.btnlink.ghost { background: transparent; }
.btnlink.ghost:hover { background: var(--panel-2); }

/* ---------- mini matchup on a card ---------- */
.mini-matchup {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.7rem;
}
.mini-week { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mini-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.mini-side { flex: 1; display: flex; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.85rem; }
.mini-score { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.mini-side.leading .mini-name, .mini-side.leading .mini-score { color: var(--text); font-weight: 700; }
.vs { color: var(--muted); font-size: 0.7rem; }
.bye { color: var(--muted); font-size: 0.85rem; }

/* ---------- My Team ---------- */
.hero.compact { margin: 1.4rem 0 1rem; text-align: left; }
.hero.compact h1 { font-size: 1.5rem; }
.team-summary {
  display: grid; gap: 0.7rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.stat-tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.stat-value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-sub { color: var(--muted); font-size: 0.75rem; }
.team-grid { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; align-items: start; }
.roster-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.roster-table th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border);
}
.roster-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--panel-2); }
.roster-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.roster-table tr.starting td { background: rgba(35, 134, 54, 0.09); }
.start-flag { color: var(--accent); width: 1.2rem; }

/* ---------- My Matchup ---------- */
.mu-weekbar { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.mu-weeklabel { color: var(--muted); font-size: 0.85rem; min-width: 5rem; text-align: center; }
.mu-scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 0.8rem; margin-bottom: 1rem;
}
.mu-side { padding: 0.7rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.mu-side.leading { border-color: var(--accent-dim); }
.mu-side:last-child { text-align: right; }
.mu-name { font-weight: 600; }
.mu-sub { color: var(--muted); font-size: 0.78rem; min-height: 1rem; }
.mu-score { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.mu-side.leading .mu-score { color: var(--accent); }
.mu-mid { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mu-slots { display: grid; gap: 0.3rem; }
.mu-slotrow {
  display: grid; grid-template-columns: 1fr 4rem 1fr;
  align-items: center; gap: 0.5rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--panel-2);
}
.mu-slotname {
  text-align: center; color: var(--muted); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.mu-cell { display: flex; gap: 0.5rem; min-width: 0; }
.mu-cell.right { flex-direction: row-reverse; }
.mu-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.87rem; }
.mu-pts { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }

@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
  .topbar-title h1 { font-size: 1.4rem; }
  .mu-score { font-size: 1.4rem; }
  .mu-slotrow { grid-template-columns: 1fr 3rem 1fr; }
  /* Week arrows are the only control on this view — keep them thumb-sized. */
  .mu-weekbar button { min-height: 44px; min-width: 44px; }
}

/* Local dev sign-in. Styled to look like a warning, because it is one. */
.gsi-slot { flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.devauth-warn {
  flex-basis: 100%; margin: 0 0 0.3rem;
  color: var(--warn); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
}

/* `hidden` needs help against selects' default display in some browsers. */
select[hidden] { display: none; }