:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1e222b;
  --border: #2a2f3a;
  --text: #e7e9ee;
  --muted: #99a0ae;
  --accent: #4c8dff;
  --accent-soft: #1d2b45;
  --win: #3fb950;
  --loss: #f06a5d;
  --push: #d0a215;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { font-weight: 700; font-size: 17px; color: var(--text); }
.brand:hover { text-decoration: none; }

.topbar-actions { display: flex; align-items: center; gap: 12px; font-size: 14px; }

.container { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* One column at any width. Joining is the common action and the short form, so
   it sits above the long creation form rather than beside it. */
.stack { display: grid; gap: 12px; grid-template-columns: 1fr; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

button, .btn {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: #3c4353; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #3f7ce8; }
button.ghost { background: transparent; }
button.link { background: none; border: none; color: var(--accent); padding: 0; }
button.danger { border-color: var(--loss); color: var(--loss); }
button.danger:hover:not(:disabled) { background: var(--loss); border-color: var(--loss); color: #fff; }

input, select {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline input[type="checkbox"] { width: auto; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; }
.tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #9dbcff;
}
.badge.grey { background: #262b35; color: var(--muted); }
.badge.red { background: #3b1f1c; color: var(--loss); }
.badge.green { background: #14301c; color: var(--win); }
.badge.amber { background: #33290f; color: var(--push); }

.pos { color: var(--win); }
.neg { color: var(--loss); }

/* --- Spread Sharks --------------------------------------------------- */

.balance-chip {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  background: var(--accent-soft);
  color: #9dbcff;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
}

.balance-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.balance-strip .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 2px;
}
.balance-strip .figure { font-size: 20px; font-variant-numeric: tabular-nums; }

.notice { border-color: var(--accent); }
.notice.danger { border-color: var(--loss); }

.market-row {
  display: grid;
  grid-template-columns: 62px 1fr 1fr;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.market-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.market-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name line" "name price";
  align-items: center;
  gap: 0 10px;
  text-align: left;
  padding: 8px 12px;
}
.market-btn .market-name { grid-area: name; font-weight: 600; }
.market-btn .market-line {
  grid-area: line;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.market-btn .market-price { grid-area: price; font-size: 11px; color: var(--muted); }
.market-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

.slip {
  margin-top: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
}
.slip-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.slip-body {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin: 10px 0;
  flex-wrap: wrap;
}
.slip-body > div:first-child { flex: 1; min-width: 140px; }
.slip-payout { text-align: right; }
.slip-payout .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.slip-payout strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.slip-confirm { width: 100%; font-variant-numeric: tabular-nums; }

.bet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.bet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}

/* League switch on a pool that plays more than one. Distinct from .tabs: it
   selects which slate the board is showing, not which panel is open. */
.league-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.league-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Upcoming / In Progress / Completed within one week's board. Sits under the
   week strip and reads as a filter over the list below it, not as another
   panel switch — hence the count beside each label. */
.slate-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.slate-tabs button {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.slate-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.slate-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 6px;
}
.slate-tabs button[aria-selected="true"] .slate-count { color: var(--accent); }

/* History filter bar. Wraps rather than scrolls: on a phone these become a
   stacked column, which is easier to use than a horizontal scroller. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.filters select,
.filters input { min-width: 120px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pager .row { gap: 8px; }

.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 560px; }

.pool-card { display: block; color: inherit; }
.pool-card:hover { text-decoration: none; border-color: #3c4353; }

.week-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.week-nav button[aria-current="true"] { border-color: var(--accent); color: var(--accent); }
.week-nav .week-shift { padding: 8px 12px; line-height: 1; color: var(--muted); }

.game {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--surface-2);
}
.game.locked { opacity: .8; }
.game-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }

.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.team-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
}
.team-btn .team-name { font-weight: 600; }
.team-btn .team-line { font-size: 12px; color: var(--muted); }
.team-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.team-btn.result-win { border-color: var(--win); }
.team-btn.result-loss { border-color: var(--loss); }

.rank-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.rank-row select { width: auto; min-width: 90px; }
.rank-row.dup select { border-color: var(--loss); }

.others { margin-top: 8px; font-size: 12px; color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: none; }
tr.me { background: var(--accent-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.eliminated { color: var(--muted); text-decoration: line-through; }

.sticky-save {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  padding: 14px 0 4px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

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

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  z-index: 20;
  max-width: 90vw;
}
.toast.err { border-color: var(--loss); color: var(--loss); }

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
}

@media (max-width: 560px) {
  .teams { grid-template-columns: 1fr; }
}

/* Manage panel: the tables run flush against the next heading otherwise. */
[data-panel="manage"] h3 { margin: 28px 0 8px; }
[data-panel="manage"] h3:first-of-type { margin-top: 16px; }

/* Commissioner action log, shown to every member. */
.pool-log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
/* Deliberately not a flex row: the entries read as a sentence, and a flex gap
   lands between "eva" and the "'s" that belongs to it. */
.pool-log li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.pool-log li > .when { margin-right: 8px; }
.pool-log li:last-child { border-bottom: none; }

/* Build footer. Sits below the content rather than pinned, so it never covers
   the sticky bet slip on a short page. */
.footer {
  max-width: 1000px;
  margin: 40px auto 24px;
  padding: 16px 20px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer a { color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.footer a:hover { color: var(--accent); text-decoration: underline; }

/* Emoji avatar. Sized in em so it tracks whatever text it sits beside, and
   given an explicit emoji font stack so it renders as colour glyphs rather
   than falling back to a monochrome outline on Linux. */
.avatar {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05em;
  line-height: 1;
  margin-right: 2px;
}

.avatar-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border-color: transparent;
  padding: 4px 8px;
}
.avatar-pick:hover:not(:disabled) { border-color: var(--border); }

/* Backdrop covers the sticky topbar, which sits at z-index 10. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  width: 100%;
  max-width: 380px;
}

.avatar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-grid button {
  font-size: 22px;
  line-height: 1;
  padding: 6px 0;
  text-align: center;
}
.avatar-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

@media (max-width: 420px) {
  .avatar-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Quick filters above the bet filter bar. Chips rather than another row of
   selects: they answer the three questions people open the tab to ask. */
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
}
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Short team names replace full ones only where the full one will not fit. */
.team-short { display: none; }

@media (max-width: 560px) {
  .team-long { display: none; }
  .team-short { display: inline; }

  /* Four tabs (five with Manage) have to share one row on a phone. */
  .tabs { gap: 4px; }
  .tabs button { padding: 8px 4px; font-size: 13px; min-width: 0; }

  /* Three labels plus counts; shrink them rather than let the row wrap. */
  .slate-tabs { gap: 4px; }
  .slate-tabs button { padding: 8px 4px; font-size: 13px; gap: 4px; }

  /* The week strip is five wide; let the buttons shrink rather than wrap. */
  .week-nav { flex-wrap: nowrap; gap: 4px; }
  .week-nav button { padding: 8px 6px; font-size: 13px; min-width: 0; flex: 1; }
  .week-nav .week-shift { flex: 0 0 auto; padding: 8px 8px; }

  /* The fixture line keeps full team names, so on a phone it has to wrap
     rather than push the card wide — college names run past 50 characters. */
  .game-meta { flex-wrap: wrap; }
  .game-meta .fixture { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .market-btn { padding: 8px; }
}

/* A standings name carries the account behind it as a tooltip; the cursor is
   the only hint that hovering does anything. */
.named { cursor: help; }

/* Format picker in the create-pool form. Reuses the tab look, but these choose
   what is being created rather than which panel is open. */
.mode-tabs { margin-bottom: 0; }
.mode-tabs button { flex: 0 1 auto; }

/* Pick board: how the survivor field is spread across the week's teams. The
   bar is proportional to the most-backed team, so the shape reads at a glance
   rather than needing the numbers compared. */
.pick-bar {
  display: block;
  height: 8px;
  min-width: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .75;
}