/* Sleeper-style dark draft room. Two fixed-height regions: the board on top,
   a four-panel strip below. Both scroll internally so the page itself never
   scrolls — the draft is meant to sit open on one screen. */

:root {
  --bg: #0a0e14;
  --panel: #0f151d;
  --panel-2: #131a24;
  --cell: #141b25;
  --line: #1e2630;
  --line-soft: #182029;

  --text: #e6edf3;
  --text-dim: #8b96a5;
  --text-faint: #5a6472;

  --teal: #00d4aa;
  --violet: #b9b4ff;
  --amber: #ffb340;
  --red: #ff5470;

  --pos-1: #ff3d7f;
  --pos-2: #00ceb8;
  --pos-3: #4fa8ff;
  --pos-4: #ffaa42;
  --pos-5: #b57edc;
  --pos-6: #8b95a5;

  --board-h: 46vh;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- top bar ---------- */

.topbar {
  flex: 0 0 auto;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar-right { display: flex; justify-content: flex-end; gap: 8px; }

.league-info h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.league-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.topbar-center { display: flex; align-items: center; gap: 14px; }

.start-btn {
  background: var(--violet);
  color: #14121f;
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter .15s;
}
.start-btn:hover:not(:disabled) { filter: brightness(1.08); }
.start-btn:disabled { opacity: .35; cursor: not-allowed; }

.clock {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
}
.clock-label { font-size: 9px; letter-spacing: .1em; color: var(--text-faint); }
.clock-team { font-size: 13px; font-weight: 600; }
.clock-time {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
  min-width: 46px;
  text-align: right;
}
.clock.urgent .clock-time { color: var(--red); }
.clock.paused .clock-time { color: var(--text-faint); }

.icon-btn {
  width: 34px; height: 34px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: #2b3542; }

.link-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.link-btn:hover { color: var(--text); border-color: #2b3542; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.user-chip .u-name { font-size: 12px; font-weight: 600; }
.user-chip .u-team { font-size: 10px; color: var(--text-faint); }
.user-chip .u-out {
  width: 22px; height: 22px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
}
.user-chip .u-out:hover { color: var(--red); background: rgba(255, 84, 112, .12); }

/* ---------- draft board ---------- */

.board-wrap {
  flex: 0 0 var(--board-h);
  min-height: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.board-scroll { height: 100%; overflow: auto; padding: 0 10px 10px; }

.board-teams,
.board-grid { display: grid; gap: 4px; min-width: max-content; }

.board-teams {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  padding: 10px 0 8px;
}

.team-head { text-align: center; padding: 0 2px; }

.claim-pill {
  display: inline-block;
  background: var(--teal);
  color: #04231d;
  border: 0;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}
.claim-pill.claimed { background: var(--violet); color: #14121f; cursor: default; }
.claim-pill.taken,
.claim-pill.open {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text-faint);
  cursor: default;
}

.team-head .team-name {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-head .team-owner { font-size: 10px; color: var(--text-faint); }

.pick-cell {
  position: relative;
  height: 46px;
  background: var(--cell);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 5px 7px;
  overflow: hidden;
}

.pick-no {
  position: absolute;
  top: 3px; right: 6px;
  font-size: 9px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.pick-arrow {
  position: absolute;
  bottom: 3px; left: 6px;
  font-size: 9px;
  color: #333e4c;
}

.pick-cell.filled { background: var(--panel-2); border-color: var(--line); }
.pick-cell.filled .pick-arrow { display: none; }

.pick-cell .pick-player {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 22px;
}
.pick-cell .pick-sub {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
}

.pick-cell.onclock {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), 0 0 14px rgba(0, 212, 170, .22);
}
.pick-cell.mine::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--violet);
}

/* ---------- bottom panels ---------- */

.panels {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, .85fr) minmax(0, .95fr) minmax(0, .95fr);
  gap: 1px;
  background: var(--line);
}

.panel {
  background: var(--panel);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-head {
  flex: 0 0 auto;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}

/* ---------- player pool ---------- */

.panel-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}

.search-wrap { position: relative; flex: 1 1 auto; }
.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 14px;
}
#playerSearch {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 7px 28px;
  color: var(--text);
  font-size: 12px;
  outline: none;
}
#playerSearch:focus { border-color: #2f3a48; }

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
}
.toggle input { accent-color: var(--teal); }

.filter-row {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
  padding: 0 12px 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row-sub { padding-bottom: 10px; }

.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--teal); border-color: var(--teal); color: #04231d; }
.chip .chip-count { font-size: 9px; opacity: .75; margin-left: 4px; font-weight: 500; }
/* Informational, not clickable — flex takes any sport so there's nothing to filter. */
.chip-static { cursor: default; opacity: .8; }
.chip-static:hover { color: var(--text-dim); }

.table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }

.player-table { width: 100%; border-collapse: collapse; }

.player-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: right;
  padding: 6px 7px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.player-table thead tr.group-row th {
  top: 0;
  border-bottom: 0;
  padding-bottom: 1px;
  color: #47515f;
}
.player-table thead tr.col-row th { top: 18px; }
.player-table th.tl, .player-table td.tl { text-align: left; }

.player-table tbody td {
  padding: 6px 7px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  white-space: nowrap;
}
.player-table tbody tr:hover { background: var(--panel-2); }
.player-table tbody tr.taken { opacity: .38; }
.player-table tbody tr.taken .p-name { text-decoration: line-through; }

.rk { color: var(--text-faint); font-size: 10px; width: 30px; }

.p-name { color: var(--text); font-weight: 600; font-size: 12px; }
.p-sub { font-size: 9px; color: var(--text-faint); margin-top: 1px; }
.p-pos { font-weight: 700; }
.p-pts { color: var(--teal); font-weight: 700; }

.act { width: 26px; padding-left: 0 !important; padding-right: 4px !important; }

.add-btn, .draft-btn {
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}
.add-btn {
  width: 20px; height: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 13px;
}
.add-btn:hover { color: var(--teal); border-color: var(--teal); }
.add-btn.queued { background: var(--teal); border-color: var(--teal); color: #04231d; }

.draft-btn {
  background: var(--teal);
  color: #04231d;
  padding: 4px 11px;
  font-size: 10px;
  letter-spacing: .05em;
}
.draft-btn:disabled { background: var(--panel-2); color: var(--text-faint); cursor: not-allowed; }

.empty-state {
  padding: 26px 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* ---------- queue ---------- */

.queue-count { font-size: 10px; color: var(--text-faint); letter-spacing: 0; }
.queue-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }

.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--panel-2);
  margin-bottom: 4px;
}
.queue-item .q-rank { font-size: 10px; color: var(--text-faint); width: 14px; }
.queue-item .q-main { flex: 1 1 auto; min-width: 0; }
.queue-item .q-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-item .q-sub { font-size: 9px; color: var(--text-faint); }
.queue-item.gone { opacity: .4; }
.queue-item.gone .q-name { text-decoration: line-through; }

.q-remove {
  background: none;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}
.q-remove:hover { color: var(--red); }

/* ---------- roster ---------- */

.team-select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  padding: 3px 6px;
  letter-spacing: 0;
  outline: none;
  max-width: 130px;
}

.roster-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }

.slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line-soft);
}

.slot-badge {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: center;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}

.slot-player { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-player.empty { color: var(--text-faint); font-style: italic; }

/* ---------- chat ---------- */

.chat-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px; }

.chat-welcome { color: var(--text-dim); font-size: 12px; }
.chat-welcome strong { color: var(--text); display: block; margin-bottom: 5px; font-size: 13px; }
.chat-welcome p { margin: 0; line-height: 1.5; }

.chat-msg { margin-bottom: 8px; font-size: 12px; }
.chat-msg .c-author { color: var(--violet); font-weight: 700; margin-right: 5px; }
.chat-msg .c-text { color: var(--text-dim); }
.chat-msg.system .c-text { color: var(--text-faint); font-style: italic; }

.chat-form { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
#chatInput {
  flex: 1 1 auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  min-width: 0;
}
.chat-send {
  background: var(--teal);
  color: #04231d;
  border: 0;
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 12px;
  z-index: 50;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.toast.error { border-left-color: var(--red); }

/* ---------- scrollbars ---------- */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232c37; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2f3a48; }

/* Below ~1150px the four-panel strip stops being readable, so the board gives
   up height and the panels wrap to two rows rather than shrinking further. */
@media (max-width: 1150px) {
  :root { --board-h: 38vh; }
  .panels { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
}