/* leaders.css — Season leaders leaderboards (all 4 sports) */
.bb-leaders {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 8px 18px;
}
.lb-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.lb-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: all .15s;
}
.lb-tab:hover { border-color: rgba(255,170,0,0.4); }
.lb-tab.active {
  background: var(--amber); color: #000; border-color: var(--amber);
}

.lb-list { display: flex; flex-direction: column; }

/* ===== ROW LAYOUT =====
   Desktop: rank | photo | name+team stack | trend | prop | value
   The name column is `minmax(0, 1fr)` so it owns the flex space — no more
   "Yor..." truncation. min-width:0 also fixes the CSS grid implicit-min trap.
*/
.lb-row {
  display: grid;
  /* rank | photo | NAME (flex, takes all remaining room) | trend | prop | value
     The trick: minmax(0, 1fr) on the name col means it CAN shrink to 0 if
     needed (overriding CSS grid's default auto-min content sizing), AND it
     can grow to fill ALL leftover space. Combined with min-width:0 on every
     child, names like "Yordan Alvarez Jr." get the full width they need. */
  grid-template-columns: 32px 48px minmax(120px, 1fr) auto auto 90px;
  gap: 14px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
  min-width: 0;
}
.lb-row > * { min-width: 0; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(255,170,0,0.05); }

.lb-rank {
  font-family: var(--font-display); font-weight: 900;
  font-size: 14px; color: var(--muted);
  text-align: center;
}
.lb-row:nth-child(1) .lb-rank { color: #ffd23f; }
.lb-row:nth-child(2) .lb-rank { color: #d4d4d4; }
.lb-row:nth-child(3) .lb-rank { color: #cd7f32; }

/* ===== Player photo (circle, initials fallback) ===== */
.lb-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,170,0,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.lb-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;   /* show face, not chest, when image is full-body */
}
.lb-photo.no-photo::before {
  content: attr(data-initials);
  font-family: var(--font-display); font-weight: 900;
  font-size: 15px;
  color: var(--amber);
  letter-spacing: 0.5px;
}
.lb-photo-initials {
  font-family: var(--font-display); font-weight: 900;
  font-size: 15px;
  color: var(--amber);
  letter-spacing: 0.5px;
}

/* ===== Name + team stack ===== */
.lb-id {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* No overflow:hidden here — we want the name to render at full width.
     The parent grid cell handles bounds. */
}
.lb-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--text);
  /* Allow names to wrap to 2 lines on very long names (Yordan Alvarez Jr.)
     rather than ellipsis-truncating, since we have plenty of vertical room. */
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
}
.lb-team {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.6px;
}
.lb-team-logo {
  width: 14px; height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ===== Trend pill + prop pill ===== */
.lb-trend {
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: 0.6px;
  padding: 2px 6px; border-radius: 4px;
  white-space: nowrap;
}
.lb-trend-hot       { background: rgba(255,80,80,0.18); color: #ff8080; }
.lb-trend-cold      { background: rgba(80,180,255,0.18); color: #80c0ff; }
.lb-trend-regression { background: rgba(255,80,80,0.12); color: #ff8080; }
.lb-trend-breakout  { background: rgba(40,214,112,0.18); color: var(--green); }

.lb-prop {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: rgba(255,170,0,0.10);
  border: 1px solid rgba(255,170,0,0.25);
  padding: 3px 8px; border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: var(--amber);
  white-space: nowrap;
}
.lb-prop-odds { font-size: 10px; color: var(--muted); }

.lb-value {
  font-family: var(--font-display); font-weight: 900;
  font-size: 17px; color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.lb-loading, .lb-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--muted); font-size: 13px;
}

/* ===== Mobile ≤600px ===== */
@media (max-width: 600px) {
  .bb-leaders { padding: 14px 12px 6px 12px; }
  .lb-row {
    /* On mobile drop the prop pill column to give name + photo more room */
    grid-template-columns: 24px 36px minmax(0, 1fr) auto 70px;
    gap: 8px;
    padding: 9px 4px;
  }
  .lb-photo { width: 36px; height: 36px; }
  .lb-photo.no-photo::before,
  .lb-photo-initials { font-size: 12px; }
  .lb-rank { font-size: 12px; }
  .lb-name { font-size: 13px; }
  .lb-team { font-size: 10px; }
  .lb-value { font-size: 14px; }
  .lb-trend { display: none; }
  .lb-prop { display: none; }
  .lb-tab { font-size: 10px; padding: 5px 10px; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .lb-row {
    grid-template-columns: 22px 32px minmax(0, 1fr) 56px;
    gap: 6px;
  }
  .lb-photo { width: 32px; height: 32px; }
}