/* Inter, served from the app itself rather than fonts.googleapis.com.
 *
 * The app told everyone "no tracking of any kind" on its own consent screen
 * while making a third-party request to Google on every single launch. That is
 * now literally true instead of nearly true, and the app renders correctly with
 * no network at all - which matters for a board designed to work offline.
 *
 * These are VARIABLE fonts (fvar/avar/STAT), so ONE file per subset covers the
 * whole 100-900 axis - hence the `font-weight: 100 900` range. The app uses
 * 400/500/600/700/800; do not "fix" this into five static declarations.
 *
 * Only latin and latin-ext are vendored. The other five subsets Google offers
 * (cyrillic, greek, vietnamese...) fall through to the system stack below,
 * which is the right trade for ~130KB in an English-language app.
 *
 * Paths are relative and both files sit flat beside this stylesheet, in app/.
 * scripts/build-site.mjs copies them byte-for-byte and DEMO_FILES lists them by
 * name - a font added here but not there ships as a 404. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- THEME 1: MIDNIGHT (DEFAULT) --- */
body[data-theme="midnight"], :root {
  --bg-primary: #07090E;
  --bg-card: #0E131B;
  --bg-card-hover: #1B2230;
  --bg-card-header: #0B0F16;
  --border-color: #2A3543;
  --text-main: #FFF;
  --text-muted: #94a3b8;
  --accent-gold: #00B4D8;
  --accent-green: #34d399;
  --accent-red: #f87171;
  --accent-blue: #2563eb;
  --pos-qb: #ef4444;
  --pos-rb: #10b981;
  --pos-wr: #3b82f6;
  --pos-te: #f59e0b;
  --pos-k: #8b5cf6;
  --pos-def: #64748b;
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 16px rgb(37 99 235 / 20%);
  --shadow-lg: 0 18px 40px -24px rgb(0 0 0 / 85%);
  --grad-brand: linear-gradient(135deg, #00B4D8 0%, #2563eb 100%);
  --grad-btn: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --grad-header: linear-gradient(180deg, #0E131B 0%, #07090E 100%);
  --grad-team-header: linear-gradient(180deg, #12171F 0%, #0E131B 100%);
  --grad-budget: linear-gradient(90deg, #34d399, #00B4D8, #2563eb);
  --grad-filled: linear-gradient(135deg, rgb(18 23 31 / 95%) 0%, rgb(11 15 22 / 95%) 100%);
  --filled-border: #2A3543;
  --modal-bg: #0E131B;
  --btn-primary-text: #fff;
  --input-bg: rgb(22 28 38 / 80%);
}

/* --- THEME 2: CYBER NEON --- */
body[data-theme="cyber"] {
  --bg-primary: #090714;
  --bg-card: #130f26;
  --bg-card-hover: #1e173b;
  --bg-card-header: #0d0a1d;
  --border-color: #2d2359;
  --text-main: #f8fafc;
  --text-muted: #a78bfa;
  --accent-gold: #38bdf8;
  --accent-green: #34d399;
  --accent-red: #f43f5e;
  --accent-blue: #818cf8;
  --grad-brand: linear-gradient(135deg, #c084fc 0%, #f472b6 50%, #38bdf8 100%);
  --grad-btn: linear-gradient(135deg, #9333ea 0%, #c026d3 100%);
  --grad-header: linear-gradient(180deg, #120e29 0%, #090714 100%);
  --grad-team-header: linear-gradient(180deg, #1c163b 0%, #120f29 100%);
  --grad-budget: linear-gradient(90deg, #34d399, #38bdf8, #c084fc);
  --grad-filled: linear-gradient(135deg, rgb(30 20 55 / 95%) 0%, rgb(15 10 30 / 95%) 100%);
  --filled-border: #4c3b88;
  --modal-bg: #120e27;
  --btn-primary-text: #fff;
  --input-bg: rgb(0 0 0 / 40%);
}

/* --- THEME 3: CRIMSON --- */
body[data-theme="crimson"] {
  --bg-primary: #0f1115;
  --bg-card: #171a21;
  --bg-card-hover: #222630;
  --bg-card-header: #12151b;
  --border-color: #2d3342;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-gold: #ef4444;
  --accent-green: #10b981;
  --accent-red: #f87171;
  --accent-blue: #38bdf8;
  --grad-brand: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #f87171 100%);
  --grad-btn: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  --grad-header: linear-gradient(180deg, #171a21 0%, #0f1115 100%);
  --grad-team-header: linear-gradient(180deg, #20242e 0%, #171a21 100%);
  --grad-budget: linear-gradient(90deg, #10b981, #ef4444, #f87171);
  --grad-filled: linear-gradient(135deg, rgb(34 38 48 / 95%) 0%, rgb(20 24 32 / 95%) 100%);
  --filled-border: #3f475a;
  --modal-bg: #151820;
  --btn-primary-text: #fff;
  --input-bg: rgb(0 0 0 / 30%);
}

/* --- THEME 4: CHAMPIONSHIP (EMERALD & GOLD) --- */
body[data-theme="championship"] {
  --bg-primary: #061912;
  --bg-card: #0d281e;
  --bg-card-hover: #14382b;
  --bg-card-header: #091f17;
  --border-color: #1e4d3b;
  --text-main: #f0fdf4;
  --text-muted: #86efac;
  --accent-gold: #fbbf24;
  --accent-green: #34d399;
  --accent-red: #f87171;
  --accent-blue: #38bdf8;
  --grad-brand: linear-gradient(135deg, #fbbf24 0%, #eab308 50%, #f59e0b 100%);
  --grad-btn: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  --grad-header: linear-gradient(180deg, #0d281e 0%, #061912 100%);
  --grad-team-header: linear-gradient(180deg, #113326 0%, #0d281e 100%);
  --grad-budget: linear-gradient(90deg, #10b981, #fbbf24, #f59e0b);
  --grad-filled: linear-gradient(135deg, rgb(13 40 30 / 95%) 0%, rgb(6 25 18 / 95%) 100%);
  --filled-border: #1e4d3b;
  --modal-bg: #0d281e;
  --btn-primary-text: #000;
  --input-bg: rgb(0 0 0 / 30%);
}

/* --- THEME 5: SUNSET AMBER --- */
body[data-theme="sunset"] {
  --bg-primary: #140d0b;
  --bg-card: #1f1411;
  --bg-card-hover: #2b1b17;
  --bg-card-header: #170e0c;
  --border-color: #42261e;
  --text-main: #fff7ed;
  --text-muted: #fdba74;
  --accent-gold: #f97316;
  --accent-green: #34d399;
  --accent-red: #f87171;
  --accent-blue: #38bdf8;
  --grad-brand: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #fb923c 100%);
  --grad-btn: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --grad-header: linear-gradient(180deg, #1f1411 0%, #140d0b 100%);
  --grad-team-header: linear-gradient(180deg, #261915 0%, #1f1411 100%);
  --grad-budget: linear-gradient(90deg, #10b981, #f97316, #fb923c);
  --grad-filled: linear-gradient(135deg, rgb(31 20 17 / 95%) 0%, rgb(20 13 11 / 95%) 100%);
  --filled-border: #42261e;
  --modal-bg: #1f1411;
  --btn-primary-text: #fff;
  --input-bg: rgb(0 0 0 / 30%);
}

/* --- THEME 6: MONOCHROME --- */
body[data-theme="monochrome"] {
  --bg-primary: #0a0a0a;
  --bg-card: #171717;
  --bg-card-hover: #262626;
  --bg-card-header: #121212;
  --border-color: #333;
  --text-main: #fff;
  --text-muted: #a3a3a3;
  --accent-gold: #fff;
  --accent-green: #d4d4d4;
  --accent-red: #737373;
  --accent-blue: #a3a3a3;
  --grad-brand: linear-gradient(135deg, #fff 0%, #d4d4d4 50%, #a3a3a3 100%);
  --grad-btn: linear-gradient(135deg, #404040 0%, #262626 100%);
  --grad-header: linear-gradient(180deg, #171717 0%, #0a0a0a 100%);
  --grad-team-header: linear-gradient(180deg, #262626 0%, #171717 100%);
  --grad-budget: linear-gradient(90deg, #a3a3a3, #fff, #525252);
  --grad-filled: linear-gradient(135deg, rgb(38 38 38 / 95%) 0%, rgb(18 18 18 / 95%) 100%);
  --filled-border: #404040;
  --modal-bg: #171717;
  --btn-primary-text: #fff;
  --input-bg: rgb(0 0 0 / 40%);
}



/* --- LIGHT MODE: MIDNIGHT (DEFAULT) --- */
body[data-theme="midnight"].light-mode, body.light-mode {
  --bg-primary: #e2e8f0;
  --bg-card: #fff;
  --bg-card-hover: #cbd5e1;
  --bg-card-header: #f1f5f9;
  --border-color: #94a3b8;
  --text-main: #0f172a;
  --text-muted: #334155;
  --accent-gold: #d97706;
  --accent-green: #047857;
  --accent-red: #dc2626;
  --accent-blue: #1d4ed8;
  --modal-bg: #fff;
  --input-bg: #fff;
  --filled-border: #94a3b8;
  --grad-brand: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  --grad-btn: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --grad-header: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  --grad-team-header: linear-gradient(180deg, #fff 0%, #e2e8f0 100%);
  --grad-budget: linear-gradient(90deg, #047857, #0284c7, #1d4ed8);
  --grad-filled: linear-gradient(135deg, #fff 0%, #f1f5f9 100%);
  --shadow-sm: 0 2px 4px rgb(15 23 42 / 8%);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 12%);
  --shadow-lg: 0 8px 24px rgb(15 23 42 / 20%);
}

/* --- LIGHT MODE: CYBER --- */
body[data-theme="cyber"].light-mode {
  --bg-primary: #f3e8ff;
  --bg-card: #fff;
  --bg-card-hover: #e9d5ff;
  --bg-card-header: #faf5ff;
  --border-color: #c084fc;
  --text-main: #2e1065;
  --text-muted: #581c87;
  --accent-gold: #7e22ce;
  --accent-green: #047857;
  --accent-red: #e11d48;
  --accent-blue: #4338ca;
  --modal-bg: #fff;
  --input-bg: #fff;
  --filled-border: #c084fc;
  --grad-brand: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #0284c7 100%);
  --grad-btn: linear-gradient(135deg, #9333ea 0%, #c026d3 100%);
  --grad-header: linear-gradient(180deg, #fff 0%, #faf5ff 100%);
  --grad-team-header: linear-gradient(180deg, #fff 0%, #f3e8ff 100%);
  --grad-budget: linear-gradient(90deg, #047857, #9333ea, #c026d3);
  --grad-filled: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
}

/* --- LIGHT MODE: CRIMSON --- */
body[data-theme="crimson"].light-mode {
  --bg-primary: #fee2e2;
  --bg-card: #fff;
  --bg-card-hover: #fecaca;
  --bg-card-header: #fef2f2;
  --border-color: #f87171;
  --text-main: #450a0a;
  --text-muted: #7f1d1d;
  --accent-gold: #b91c1c;
  --accent-green: #047857;
  --accent-red: #b91c1c;
  --accent-blue: #0369a1;
  --modal-bg: #fff;
  --input-bg: #fff;
  --filled-border: #f87171;
  --grad-brand: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  --grad-btn: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  --grad-header: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
  --grad-team-header: linear-gradient(180deg, #fff 0%, #fee2e2 100%);
  --grad-budget: linear-gradient(90deg, #047857, #dc2626, #991b1b);
  --grad-filled: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

/* --- LIGHT MODE: CHAMPIONSHIP --- */
body[data-theme="championship"].light-mode {
  --bg-primary: #dcfce7;
  --bg-card: #fff;
  --bg-card-hover: #bbf7d0;
  --bg-card-header: #f0fdf4;
  --border-color: #4ade80;
  --text-main: #052e16;
  --text-muted: #14532d;
  --accent-gold: #b45309;
  --accent-green: #15803d;
  --accent-red: #dc2626;
  --accent-blue: #0369a1;
  --modal-bg: #fff;
  --input-bg: #fff;
  --filled-border: #4ade80;
  --grad-brand: linear-gradient(135deg, #d97706 0%, #15803d 100%);
  --grad-btn: linear-gradient(135deg, #15803d 0%, #166534 100%);
  --grad-header: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
  --grad-team-header: linear-gradient(180deg, #fff 0%, #dcfce7 100%);
  --grad-budget: linear-gradient(90deg, #15803d, #d97706, #047857);
  --grad-filled: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

/* --- LIGHT MODE: SUNSET --- */
body[data-theme="sunset"].light-mode {
  --bg-primary: #ffedd5;
  --bg-card: #fff;
  --bg-card-hover: #fed7aa;
  --bg-card-header: #fff7ed;
  --border-color: #fb923c;
  --text-main: #431407;
  --text-muted: #7c2d12;
  --accent-gold: #c2410c;
  --accent-green: #047857;
  --accent-red: #dc2626;
  --accent-blue: #0369a1;
  --modal-bg: #fff;
  --input-bg: #fff;
  --filled-border: #fb923c;
  --grad-brand: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --grad-btn: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --grad-header: linear-gradient(180deg, #fff 0%, #fff7ed 100%);
  --grad-team-header: linear-gradient(180deg, #fff 0%, #ffedd5 100%);
  --grad-budget: linear-gradient(90deg, #047857, #ea580c, #c2410c);
  --grad-filled: linear-gradient(135deg, #fff 0%, #fff7ed 100%);
}

/* --- LIGHT MODE: MONOCHROME --- */
body[data-theme="monochrome"].light-mode {
  --bg-primary: #e5e5e5;
  --bg-card: #fff;
  --bg-card-hover: #d4d4d4;
  --bg-card-header: #f5f5f5;
  --border-color: #737373;
  --text-main: #0a0a0a;
  --text-muted: #404040;
  --accent-gold: #171717;
  --accent-green: #262626;
  --accent-red: #525252;
  --accent-blue: #404040;
  --modal-bg: #fff;
  --input-bg: #fff;
  --filled-border: #737373;
  --grad-header: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
  --grad-team-header: linear-gradient(180deg, #fff 0%, #e5e5e5 100%);
  --grad-filled: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
  --grad-brand: linear-gradient(135deg, #404040 0%, #0a0a0a 100%);
  --grad-btn: linear-gradient(135deg, #262626 0%, #0a0a0a 100%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

/* Header & Top Navigation */
.app-header {
  background: var(--grad-header);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  font-size: 28px;
}

.brand-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--grad-brand);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;

  /* MUST wrap. Without this the button row is one unbreakable line ~1480px
     wide, which forces <body> to overflow horizontally - and because the board
     wrapper ALSO scrolls horizontally, you end up with two nested horizontal
     scrollbars fighting each other. Scrolling the board then moves the wrong
     one and the last team columns feel unreachable. */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--accent-gold);
}

.btn-primary {
  background: var(--grad-btn);
  color: var(--btn-primary-text);
  border: none;
  font-weight: 700;
}

.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 12px rgb(245 158 11 / 40%);
}

.btn-danger {
  border-color: rgb(239 68 68 / 40%);
  color: var(--accent-red);
}

.btn-danger:hover {
  background-color: rgb(239 68 68 / 15%);
  border-color: var(--accent-red);
}

/* Global Board Summary Bar */
.summary-bar {
  display: flex;
  gap: 20px;
  padding: 12px 24px;
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  overflow-x: auto;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.stat-pill.clickable-pill {
  cursor: pointer;
  transition: all 0.2s ease;
  border-color: rgb(251 191 36 / 40%);
}

.stat-pill.clickable-pill:hover {
  background: rgb(251 191 36 / 12%);
  border-color: var(--accent-gold);
}

.stat-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
}

.stat-val {
  font-weight: 700;
  color: var(--accent-gold);
}

/* Board Container & 8-Team Grid */
.board-wrapper {
  flex: 1;
  padding: 16px 24px;
  overflow-x: auto;
}

/* On anything laptop-sized or bigger, the board becomes its own scrolling pane
   instead of making the whole page tall.

   Why: a 32-team board is ~1300px tall, so its horizontal scrollbar sat ~780px
   BELOW the fold - you had to scroll down past every roster row to find the
   control that scrolls right, which made the far teams feel unreachable.
   Pinning the pane to the viewport keeps that scrollbar on screen at all times.

   min-height: 0 is the load-bearing line. A flex item defaults to
   min-height: auto and refuses to shrink below its content, so without it the
   pane just grows tall again and overflow never engages.

   Phones keep normal page scrolling - a fixed pane plus mobile browser chrome
   and 100vh is a well-known source of clipped layouts. */
@media (width >= 768px) {
  html { height: 100%; }

  body {
    height: 100vh;
    overflow: hidden;
  }

  .board-wrapper {
    min-height: 0;
    overflow: auto;
  }
}

.draft-board {
  display: grid;

  /* 220px left ~53px for the player name, which truncated "Ja'Marr Chase" to
     "J…" - useless on a board whose whole job is showing who was drafted.
     minmax's floor already forces the board wider than the viewport when there
     are many teams, so no explicit min-width is needed; hard-coding one only
     stretched columns oddly when a league had few teams. */
  grid-template-columns: repeat(8, minmax(268px, 1fr));
  gap: 12px;
}

/* Team Column Header Card */
.team-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card-header);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid var(--border-color);
}

.team-header-card {
  background: var(--grad-team-header);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  margin-bottom: 8px;
  box-shadow: var(--shadow-md);
}

.team-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-name-input {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-main);
  font-size: 16px;
  font-weight: 800;
  width: 140px;
  padding: 2px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-name-input:focus, .team-name-input:hover {
  border-color: var(--accent-gold);
  background: var(--input-bg);
  outline: none;
}

.team-id-badge {
  font-size: 10px;
  background: rgb(251 191 36 / 15%);
  color: var(--accent-gold);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* Budget Cards inside Header (.metric-grid/.metric-cell are the mode-neutral
   aliases used by snake mode, which has no budget) */
.budget-grid,
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 11px;
}

.budget-metric,
.metric-cell {
  background: var(--input-bg);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.bm-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.bm-val {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.val-remaining { color: var(--accent-green); }
.val-spent { color: var(--accent-red); }

.val-maxbid {
  color: var(--accent-gold);
  font-size: 15px;
  font-weight: 800;
}
.val-avg { color: var(--accent-blue); }

/* Budget Bar Indicator */
.budget-progress-bg {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.budget-progress-fill {
  height: 100%;
  background: var(--grad-budget);
  width: 0%;
  transition: width 0.3s ease;
}

.budget-progress-fill.overbudget {
  background: var(--accent-red);
}

/* Draft Slots */
.team-slots-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pick-slot-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.15s ease;
  position: relative;
}

.pick-slot-card:hover {
  border-color: rgb(251 191 36 / 50%);
  background: var(--bg-card-hover);
}

.pick-slot-card.filled {
  background: var(--grad-filled);
  border-color: var(--filled-border);
}

.slot-number {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-gold);
  width: 28px;
  flex-shrink: 0;
  display: inline-block;
  text-align: center;
  background: rgb(251 191 36 / 10%);
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid rgb(251 191 36 / 25%);
}

/* Roster position badge. Wider than the old numeric badge because it carries
   labels like "FLEX" and "BN1" rather than a single digit. */
.slot-pos-label {
  width: 40px;
  letter-spacing: 0.02em;
}

/* Bench rows are deliberately quieter than the starting lineup - the starters
   are what decide a matchup, so they get the gold. */
.slot-pos-label.bench {
  color: var(--text-muted);
  background: rgb(148 163 184 / 10%);
  border-color: rgb(148 163 184 / 25%);
}

.pick-slot-card.bench-slot {
  border-style: dashed;
}

.pick-slot-card.bench-slot:not(.filled) {
  opacity: 0.82;
}

/* Slot Player Info */
.slot-player-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slot-empty-btn {
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-empty-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgb(251 191 36 / 5%);
}

.player-main-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pos-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}

.pos-qb { background-color: var(--pos-qb); }
.pos-rb { background-color: var(--pos-rb); }
.pos-wr { background-color: var(--pos-wr); }
.pos-te { background-color: var(--pos-te); }
.pos-k { background-color: var(--pos-k); }
.pos-def { background-color: var(--pos-def); }

.player-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
}

.player-sub-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
}

/* Pick Price Input */
.pick-price-box {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 2px 4px;
}

.currency-symbol {
  font-size: 11px;
  color: var(--accent-gold);
  font-weight: 700;
}

.price-input {
  width: 38px;
  background: transparent;
  border: none;
  color: var(--accent-gold);
  font-weight: 800;
  font-size: 13px;
  text-align: right;
}

.price-input:focus {
  outline: none;
  background: rgb(255 255 255 / 5%);
}

.slot-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  opacity: 0.4;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.slot-clear-btn:focus {
  opacity: 1;
}

.slot-clear-btn:hover {
  color: var(--accent-red);
  opacity: 1;
}

.pick-slot-card.filled:hover .slot-clear-btn {
  opacity: 1;
}

/* On touch devices, always show the remove button */
@media (hover: none) {
  .slot-clear-btn {
    opacity: 0.7;
  }
}

/* Modal Overlay for Player Picker */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 75%);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.picker-modal {
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 580px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card-header);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
}

.modal-close:hover { color: var(--accent-gold); }

.sync-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.sync-badge.syncing {
  color: var(--accent-gold);
}

.sync-badge.success {
  color: var(--accent-green);
}

.sync-badge.error {
  color: var(--accent-red);
}

.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Filter & Search Bar */
.picker-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-main);
  font-size: 14px;
  flex-shrink: 0;
}

.picker-search-input:focus {
  outline: none;
  border-color: var(--accent-gold);
}

.pos-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* The picker's search box, position tabs and custom-player row are flex items
   in a column that can overflow, so they inherit flex-shrink: 1 and get
   squeezed when the window is short - a phone in landscape, or any small
   window. The tabs collapsed to a few pixels tall and clipped their own labels,
   leaving a row of blank slivers where ALL / QB / RB / WR should be. These keep
   their natural height and .modal-body scrolls instead. (The search input
   carries the same flex-shrink in its own rule above, to keep stylelint's
   specificity ordering happy.) */
.pos-tabs,
.custom-player-row {
  flex-shrink: 0;
}

.pos-tab {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pos-tab.active {
  background: var(--accent-gold);
  color: #000;
  border-color: var(--accent-gold);
}

/* Custom Player Entry option */
.custom-player-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: rgb(251 191 36 / 5%);
  border: 1px dashed rgb(251 191 36 / 30%);
  padding: 8px;
  border-radius: 8px;
  align-items: center;
}

.custom-player-row input, .custom-player-row select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px;
  border-radius: 6px;
  font-size: 12px;
}

/* Player List Items */
.player-results-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.player-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-gold);
}

.player-item.drafted {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-card-header);
}

.player-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-item-team {
  font-size: 11px;
  color: var(--text-muted);
}

.drafted-tag {
  font-size: 10px;
  color: var(--accent-red);
  font-weight: 700;
  text-transform: uppercase;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  animation: slide-up 0.2s ease;
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pick Log Drawer / Modal */
.pick-log-container {
  max-height: 250px;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 8px;
}

.log-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}

.log-item:last-child { border-bottom: none; }

/* ==========================================================================
   SNAKE DRAFT MODE
   ========================================================================== */

/* On the Clock Banner */
.clock-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

/* Required: the display:flex above would otherwise beat the UA [hidden] rule */
.clock-banner[hidden] { display: none; }

.clock-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.clock-team {
  color: var(--accent-gold);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.clock-pick {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.clock-next {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.clock-banner.complete .clock-team { color: var(--accent-green); }

/* Pick timer countdown */
.clock-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-green);
  background: rgb(16 185 129 / 12%);
  border: 1px solid rgb(16 185 129 / 30%);
}

/* Required: the display:inline-flex above would otherwise beat [hidden] */
.clock-timer[hidden] { display: none; }

.clock-timer.clock-timer-warning {
  color: var(--accent-gold);
  background: rgb(251 191 36 / 12%);
  border-color: rgb(251 191 36 / 30%);
}

.clock-timer.clock-timer-critical {
  color: var(--accent-red);
  background: rgb(239 68 68 / 14%);
  border-color: rgb(239 68 68 / 35%);
  animation: clock-pulse 1s ease-in-out infinite;
}

/* Board highlighting */
.team-column.on-the-clock-column {
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-md);
}

.pick-slot-card.on-the-clock {
  border-color: var(--accent-gold);
  background: rgb(251 191 36 / 8%);
  animation: clock-pulse 1.8s ease-in-out infinite;
}

@keyframes clock-pulse {
  0%,
  100% { box-shadow: 0 0 0 0 rgb(251 191 36 / 35%); }
  50% { box-shadow: 0 0 0 4px rgb(251 191 36 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .pick-slot-card.on-the-clock {
    animation: none;
    box-shadow: 0 0 0 2px rgb(251 191 36 / 35%);
  }

  .clock-timer.clock-timer-critical {
    animation: none;
    box-shadow: 0 0 0 2px rgb(239 68 68 / 35%);
  }
}

/* Locked slots (Locked enforcement). :hover still matches disabled elements,
   so these overrides are required or locked slots look clickable. */
.pick-slot-card.locked:hover {
  border-color: var(--border-color);
  background: var(--bg-card);
}

.slot-empty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-style: dotted;
}

.slot-empty-btn:disabled:hover {
  border-color: var(--border-color);
  color: var(--text-muted);
  background: transparent;
}

/* Wider pick badge - "12.04" clips at the default 28px */
.slot-number.snake-pick-label {
  width: auto;
  min-width: 44px;
  font-size: 11px;
  letter-spacing: -0.2px;
}

/* ==========================================================================
   DRAFT SETTINGS MODAL
   ========================================================================== */

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.settings-group[hidden] { display: none; }

.settings-group-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.settings-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-option:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-gold);
}

.settings-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--accent-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.settings-hint {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

.settings-note {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
  padding-top: 4px;
  border-top: 1px solid var(--border-color);
}

/* Draft Order modal - reorder list */
.custom-order-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.custom-order-list .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Room code bar */
#room-code-display {
  letter-spacing: 2px;
  font-weight: 800;
}

/* ==========================================================================
   SAFETY — reporting, blocking, roster
   ========================================================================== */

/* The ⋯ on a chat message. Low-contrast until hover so it never competes with
   the message itself, but always present so it is discoverable.
   (`position: relative` for this lives on the .chat-msg rule further down —
   splitting it out here would be a duplicate selector.) */
.chat-msg-menu {
  position: absolute;
  top: 2px;
  right: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.45;
}

.chat-msg-menu:hover {
  opacity: 1;
  background: rgb(255 255 255 / 12%);
}

/* The validated handle beside the free-text sender name. */
.chat-msg-handle {
  margin-left: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.report-quote {
  padding: 10px 12px;
  border-left: 3px solid var(--accent-red);
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.report-quote-who {
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.account-blocked-list { margin-top: 6px; }

/* ==========================================================================
   TRADING
   No [hidden] escape hatches needed here — the global [hidden] rule further
   down carries !important and beats these author styles.
   ========================================================================== */

.trade-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--accent-blue);
}

.trade-banner-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-blue);
  color: var(--btn-primary-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.trade-banner-text {
  flex: 1 1 240px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
}

.trade-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Compact variant of .btn, for the action clusters that sit inline with text. */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.trade-team-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Standalone rather than `.trade-team-row .lobby-label` — a descendant
   selector here would out-specify the .lobby-label block defined further down
   and trip no-descending-specificity. */
.trade-team-field { flex: 1 1 180px; }

.team-trade-btn {
  width: 100%;
  margin-top: 8px;
}

.trade-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.trade-col {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
}

.trade-asset {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.trade-asset .pos-badge { flex: 0 0 auto; }

.trade-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

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

/* Traded picks on the board: "3.04 ← DEN" */
.pick-via-trade {
  color: var(--accent-blue);
  font-weight: 700;
}

@media (width <= 520px) {
  .trade-columns { flex-direction: column; }
}

/* ==========================================================================
   AUCTION MODE — NOMINATION & BIDDING
   ========================================================================== */

.auction-banner {
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auction-banner[hidden] { display: none; }

/* --- Nomination state (no active bid) --- */
.auction-nominate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auction-nominate-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auction-nominate-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auction-nominate-team {
  color: var(--accent-gold);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.auction-nominate-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* --- Active bid state --- */
.auction-bid-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auction-bid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.auction-bid-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auction-bid-player-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.auction-bid-player-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.auction-bid-current {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auction-bid-amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-green);
  font-variant-numeric: tabular-nums;
}

.auction-bid-leader {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-gold);
}

.auction-bid-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-green);
  background: rgb(16 185 129 / 12%);
  border: 1px solid rgb(16 185 129 / 30%);
}

.auction-bid-timer.timer-warning {
  color: var(--accent-gold);
  background: rgb(251 191 36 / 12%);
  border-color: rgb(251 191 36 / 30%);
}

.auction-bid-timer.timer-critical {
  color: var(--accent-red);
  background: rgb(239 68 68 / 14%);
  border-color: rgb(239 68 68 / 35%);
  animation: clock-pulse 1s ease-in-out infinite;
}

/* --- Bid buttons row (single device) --- */
.auction-bid-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.auction-bid-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s ease;
  min-width: 90px;
}

.auction-bid-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.auction-bid-btn:hover:not(:disabled) {
  border-color: var(--accent-gold);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

/* ── Lobby / draft rooms ─────────────────────────────────────────────── */

/* Component display rules (.btn, .stat-pill) are author styles and therefore
   beat the browser's built-in [hidden] { display: none }. Without this the
   league pill and lock button stay on screen while hidden="" is set. */
[hidden] {
  display: none !important;
}

.lobby-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.lobby-field {
  width: 100%;
  margin-bottom: 6px;
}

/* Room codes are case-sensitive, so never transform what the user typed. */
.lobby-code-field {
  text-transform: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1px;
}

.lobby-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.lobby-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-main);
  word-spacing: -2px;
}

.lobby-error {
  font-size: 12px;
  color: var(--accent-red, #ef4444);
  margin: 0 0 10px;
}

/* The support address. Deliberately NOT a link: a mailto: does nothing inside
   the Android app when no mail app is set up, and a link that silently fails is
   worse than plain text somebody can read and copy. user-select is stated
   explicitly so a long-press can select it by hand even if a future change
   turns selection off more broadly - copying this address is the fallback route
   to us, so it must not become collateral damage. */
.support-email,
.support-email-line strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent-gold, #00B4D8);
  user-select: text;
  word-break: break-all;
}

.support-email-line {
  font-size: 13px;
  margin-bottom: 8px;
}

.lobby-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
}

.lobby-btn-create {
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
}

.lobby-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lobby-divider::before,
.lobby-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.lobby-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}

.lobby-check input {
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
}

.lobby-lobbies-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.lobby-lobbies-list {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px;
  background: var(--bg-dark);
}

.lobby-lobby-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
}

.lobby-lobby-row + .lobby-lobby-row {
  border-top: 1px solid var(--border-color);
}

.lobby-lobby-row:hover {
  background: var(--bg-card);
}

.lobby-lobby-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--accent-gold);
  word-break: break-all;
}

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

@media (width <= 520px) {
  .lobby-divider { margin: 18px 0 12px; }
  .lobby-lobbies-list { max-height: 150px; }
}

/* ── First-run consent gate ──────────────────────────────────────────── */

/* Rendered visible by default and hidden by JS once acceptance is on file, so
   a slow or failed script load leaves the gate CLOSED rather than open. */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgb(5 8 14 / 97%);
}

/* Stacking, in the order these must win.
 *
 * The three consent-overlay cards (consent, sign-in wall, paywall) all sat at
 * 20000 and only beat each other on document order, while .modal-overlay sat
 * at 1000. Two things broke as a result: the sign-in wall covered the consent
 * gate's terms checkbox, and the auth modal opened BEHIND the sign-in wall, so
 * the Sign in button appeared to do nothing at all.
 *
 * Auth is the one modal that has to open over those cards, since the wall's
 * whole job is to send you to it - it carries its own inline z-index in
 * index.html, which no rule here could have overridden anyway. Consent
 * outranks everything: it must be answered before any of this is reachable. */
#consent-overlay { z-index: 20002; }

.consent-overlay[hidden] {
  display: none !important;
}

.consent-card {
  width: 100%;
  max-width: 520px;
  padding: 30px 32px 26px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / 80%);
}

.consent-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 12px;
}

.consent-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text-main);
}

.consent-lead {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.consent-points {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg-dark);
  margin-bottom: 18px;
}

.consent-point {
  display: flex;
  gap: 11px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-main);
}

.consent-point + .consent-point {
  margin-top: 11px;
}

.consent-bullet {
  flex-shrink: 0;
  font-size: 15px;
}

.consent-docs {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.consent-docs a {
  color: var(--accent-gold);
  font-weight: 600;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main);
  cursor: pointer;
}

.consent-check input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--accent-gold);
}

.consent-btn {
  width: 100%;
  padding: 13px;
  font-size: 15px;
}

.consent-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

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

@media (width <= 520px) {
  .consent-card { padding: 24px 20px 20px; }
  .consent-title { font-size: 21px; }
}

/* Notice shown in place of the consent gate in the demo build. The demo has no
   accounts and collects nothing, so the disclaimers get notice rather than a
   blocking checkbox. Injected by scripts/build-site.mjs. */
.demo-notice {
  max-width: 900px;
  margin: 26px auto 34px;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

.demo-notice a {
  color: var(--accent-gold);
}

/* ── Demo mode ───────────────────────────────────────────────────────── */

.demo-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 12px 18px;
  border: 1px solid var(--accent-gold);
  border-radius: 10px;
  background: rgb(245 197 66 / 8%);
}

.demo-banner-tag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--accent-gold);
  color: #0b0f19;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.demo-banner-text {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  color: var(--text-main);
}

.demo-banner-text strong {
  color: var(--accent-gold);
}

.demo-banner-cta {
  flex-shrink: 0;
  padding: 7px 16px;
  font-size: 13px;
}

/* Rounds past the demo cap: visibly out of reach, not merely unresponsive. */
.pick-slot-card.demo-locked {
  opacity: 0.4;
}

.pick-slot-card.demo-locked .slot-empty-btn {
  border-style: solid;
  border-color: var(--border-color);
  cursor: not-allowed;
  font-size: 10px;
}

/* ── The padlock ─────────────────────────────────────────────────────────

   Locked header buttons stay in place and stay CLICKABLE - the whole point is
   that you can open them and see what you are missing. They are dimmed and
   carry a padlock, but they are not disabled, so no not-allowed cursor here. */

.header-actions .btn.is-locked {
  opacity: 0.55;
  position: relative;
}

.header-actions .btn.is-locked::after {
  content: "🔒";
  font-size: 10px;
  margin-left: 5px;
  opacity: 0.9;
}

.header-actions .btn.is-locked:hover {
  opacity: 0.8;
}

/* The bar across the bottom of every locked screen. Sticks to the foot of the
   modal body so it stays visible while scrolling a long player list. */
.unlock-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px -20px -20px;
  padding: 14px 20px;
  background: var(--bg-dark);
  border-top: 2px solid var(--accent-gold);
  z-index: 5;
}

.unlock-bar-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
  min-width: 180px;
}

.unlock-bar-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Anything the padlock disabled. Deliberately separate from the .is-locked
   rule above: these really are dead, so they say so with the cursor. */
[data-locked-by-tier="1"] {
  cursor: not-allowed !important;
  opacity: 0.5;
}

/* The chat drawer is not a modal, so its bar needs its own footing. */
#chat-drawer .unlock-bar {
  margin: 0;
  border-radius: 0;
}

/* ── Accounts ────────────────────────────────────────────────────────── */

.auth-why {
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.auth-why-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.auth-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.auth-compare th,
.auth-compare td {
  text-align: left;
  padding: 5px 6px;
  border-bottom: 1px solid var(--border-color);
}

.auth-compare thead th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-compare td:first-child {
  color: var(--text-muted);
}

.auth-compare th:not(:first-child),
.auth-compare td:not(:first-child) {
  width: 86px;
  text-align: center;
}

.auth-compare tbody tr:last-child td {
  border-bottom: none;
}

.auth-compare .yes {
  color: var(--accent-green);
  font-weight: 700;
}

.auth-compare .no {
  color: var(--text-muted);
}

.auth-notice {
  font-size: 12px;
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
}

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-weight: 700;
}

.auth-google:hover { background: #f4f5f7; }

.auth-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

.auth-guest-btn {
  margin-top: 14px;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
}

.auth-switch {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-gold);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.linkish:hover { opacity: 0.8; }

.lobby-whoami {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lobby-whoami strong { color: var(--accent-gold); }

.account-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.account-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  flex-shrink: 0;
}

.account-username {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
  word-break: break-all;
}

.account-email {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

/* Google Play requires the privacy policy to be reachable from inside the app,
   not only from the store listing or the marketing site. */
.account-legal-links {
  display: flex;
  gap: 8px;
}

.account-legal-link {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  padding: 9px;
}

.draft-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.draft-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.badge-host {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-gold);
  color: #0b0f19;
  margin-left: 6px;
  vertical-align: middle;
}

.auction-bid-btn.leading {
  border-color: var(--accent-gold);
  background: rgb(251 191 36 / 10%);
}

.auction-bid-btn .bid-team-name {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-bid-btn .bid-amount-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-green);
}

/* --- Multiplayer: my bid controls --- */
.auction-mp-bid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.auction-mp-bid-row .bid-increment-btns {
  display: flex;
  gap: 4px;
}

.auction-mp-bid-row .bid-increment-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--accent-green);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  transition: all 0.15s ease;
}

.auction-mp-bid-row .bid-increment-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.auction-mp-bid-row .bid-increment-btn:hover:not(:disabled) {
  border-color: var(--accent-green);
  background: rgb(16 185 129 / 12%);
}

/* --- Auction sold/won animation --- */
.auction-sold-flash {
  animation: auction-sold 0.6s ease;
}

@keyframes auction-sold {
  0% { background: rgb(52 211 153 / 25%); }
  100% { background: transparent; }
}

/* --- Complete / all budgets gone --- */
.auction-banner.fill-mode {
  border-left: 3px solid var(--accent-gold);
}

.auction-fill-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.auction-fill-notice strong {
  color: var(--accent-gold);
}

/* Chat Drawer Styles */
.chat-drawer {
  position: fixed;
  bottom: 85px;
  right: 20px;
  width: 320px;
  max-height: 450px;
  height: 60vh;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 60%);
  z-index: 9800;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(120%);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-drawer.open {
  transform: translateY(0);
}

.chat-header {
  background: var(--bg-dark);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg {
  position: relative; /* anchors .chat-msg-menu */
  font-size: 13px;
  line-height: 1.4;
  background: rgb(255 255 255 / 5%);
  padding: 8px 12px;
  padding-right: 26px; /* room for the ⋯ so it never overlaps the text */
  border-radius: 8px;
  overflow-wrap: break-word;
}

.chat-msg.self {
  background: rgb(251 191 36 / 15%); /* Accent gold tint */
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

.chat-msg.other {
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}

.chat-msg-sender {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.chat-msg.self .chat-msg-sender {
  color: var(--accent-gold);
}

.chat-input-area {
  display: flex;
  padding: 10px;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-color);
  gap: 8px;
}

.chat-input-area input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
}

.chat-input-area input:focus {
  border-color: var(--accent-gold);
}

/* Bid team selector. One row per team you may bid for, with the numbers you
   need to make the call - budget left and open spots - so nobody has to close
   the dialog to go and check. */
.bid-team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bid-team-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
}

.bid-team-option-name {
  font-weight: 700;
  font-size: 15px;
}

.bid-team-option-budget {
  font-size: 12px;
  color: var(--text-muted);
}