<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>NBA Live Leaders</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      height: 100%;
    }

    body {
      position: relative;
      background: #0b1220; /* fallback */
      font-size: 0.9375rem;
      min-height: 100vh;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Gradient background layer */
    body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    /* Backpack-style soft gradient */
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,0.25), transparent 60%),
        radial-gradient(900px 500px at 90% 20%, rgba(236,72,153,0.20), transparent 60%),
        radial-gradient(800px 500px at 50% 90%, rgba(14,165,233,0.20), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
    }

    .card {
        background: #0f1a2d;
        border: 1px solid rgba(255,255,255,.08);
      }

    /* Make cards fill available height inside grid cells */
    .h-fill {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .h-fill .card-body {
      flex: 1 1 auto;
      overflow-x: hidden;
      overflow-y: auto;
    }
    /* Ensure bootstrap h-100 cards also stretch and their body scrolls */
    .card.h-100 {
      display: flex;
      flex-direction: column;
    }
    .card.h-100 .card-body {
      flex: 1 1 auto;
      overflow-x: hidden;
      overflow-y: auto;
    }

    /* Prevent nested horizontal scrollbars inside cards (tables/lists). */
    .card-body {
      overflow-x: hidden;
    }

    /* Let tables fit the card width without creating inner horizontal scrollbars. */
    .table-responsive {
      overflow-x: hidden;
    }

    /* Allow long player names to truncate rather than forcing horizontal scrolling. */
    #boards table td, #boards table th {
      white-space: nowrap;
    }
    #boards table td:nth-child(2),
    #boards table th:nth-child(2) {
      max-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-header {
      border-bottom: 1px solid rgba(255,255,255,.08);
      font-size: 0.875rem;
    }

    .card-header > div:first-child {
      color: #ffffff;
    }

    .muted {
      color: rgba(255,255,255,.65);
      font-size: 0.8125rem;
    }

    .table {
      --bs-table-bg: #0f1a2d;
      --bs-table-striped-bg: rgba(255,255,255,.03);
      --bs-table-hover-bg: rgba(255,255,255,.05);
      --bs-table-color: rgba(255,255,255,.92);
      --bs-table-border-color: rgba(255,255,255,.08);
      font-size: 0.875rem;
    }

      /* Season leaders: progressively smaller typography by rank.
         Rank 1 stays at the default table font-size. */
      .leaders-season .leader-text {
        line-height: 1.05;
      }
      .leaders-season tr.leader-rank-2 .leader-text { font-size: 0.95em; }
      .leaders-season tr.leader-rank-3 .leader-text { font-size: 0.90em; }
      .leaders-season tr.leader-rank-rest .leader-text { font-size: 0.85em; }

    /* Small toggle styling */
    .form-switch {
      padding-left: 2.25rem;
    }
    .form-switch .form-check-input {
      width: 34px;
      height: 16px;
      margin-top: 0;
      cursor: pointer;
    }

    /* Header toggles: keep switches + labels vertically centered. */
    .board-toggles {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .board-toggles .form-check.form-switch {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding-left: 0; /* avoid Bootstrap's default left padding since we use flex */
      margin-bottom: 0;
    }
    .board-toggles .form-check-input {
      margin-left: 0;
      margin-top: 0;
    }
    .board-toggles .form-check-label {
      margin-bottom: 0;
      line-height: 1;
    }
    /* Smaller season sub-toggle so it matches the label sizing */
    .board-toggles .mini-switch .form-check-input {
      width: 28px;
      height: 14px;
    }
    .mode-label {
      font-size: 0.75rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }

    /* Same sizing as .mode-label, but preserves original casing. */
    .mode-label-size {
      font-size: 0.75rem;
      letter-spacing: 0.02em;
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }

    .board-title {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      line-height: 1;
    }

    /* Leaderboard filter control styling */
    #leaderboardFilterControl {
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    #leaderboardFilterControl label {
      color: rgba(255,255,255,0.7);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin: 0;
    }

    #limitSelector {
      background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(14,165,233,0.10) 100%) !important;
      border: 1px solid rgba(99,102,241,0.3) !important;
      color: rgba(255,255,255,0.95) !important;
      font-weight: 500;
      padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
      border-radius: 6px;
      font-size: 0.875rem;
      transition: all 0.2s ease;
    }

    #limitSelector:hover {
      background: linear-gradient(135deg, rgba(99,102,241,0.25) 0%, rgba(14,165,233,0.18) 100%) !important;
      border-color: rgba(99,102,241,0.5) !important;
    }

    #limitSelector:focus {
      background: linear-gradient(135deg, rgba(99,102,241,0.25) 0%, rgba(14,165,233,0.18) 100%) !important;
      border-color: rgba(99,102,241,0.6) !important;
      box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
    }

    #limitSelector option {
      background: #0f1a2d;
      color: rgba(255,255,255,0.95);
    }

    .nba-logo {
    height: 58px;     
    width: auto;
    display: inline-block;
    }

  /* Games strip styles */
  .games-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* allow cards to wrap onto multiple rows instead of scrolling */
    align-items: center;
    align-content: flex-start; /* ensure wrapped rows start at top */
    gap: 0.32rem; /* reduced spacing between cards */
    justify-content: center; /* center cards horizontally instead of left-align */
    overflow-x: visible; /* avoid horizontal scrollbar */
    padding: 0.30rem 0.18rem;
    margin: 0;
    list-style: none; /* avoid default list styles */
    flex: 1 1 auto;
    min-width: 0;
  }

  .games-strip-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .games-nav-btn {
    border: none;
    background: transparent;
    color: #ffffff;
    padding: 0.35rem 0.5rem;
    opacity: 0.65;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }
  .games-nav-btn:hover:not(:disabled) {
    opacity: 1;
  }
  .games-nav-btn:disabled {
    opacity: 0.2;
    cursor: default;
  }
  .games-nav-btn svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .game-card {
    /* Slightly larger tiles (~5%) so scores don't wrap/collapse */
    min-width: 150px;
    max-width: 175px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
  padding: 0.34rem;
   box-sizing: border-box;
   overflow: hidden;

   /* Use a 3-column grid: team / center / team so spacing is consistent
     and the center (time/score) stays compact in the middle. */
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 0.32rem;
   /* equal horizontal padding so left team sits the same distance from left border
     as the right team does from the right border */
   cursor: pointer;
   transition: all 0.2s ease;
  }
  
  .game-card:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
    border-color: rgba(99,102,241,0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  padding-left: 0.60rem;
  padding-right: 0.60rem;
  }
  /* Make each list item act as a compact horizontal tile and allow wrapping */
  .games-strip > li {
    flex: 0 0 auto;
    width: auto;
    background: transparent;
    border: none;
    padding: 0;
  }
  /* Neutralize list-group-item borders which cause the tall separators */
  .games-strip .list-group-item {
    border: none !important;
    background: transparent !important;
  }
  .team-block { display:flex; flex-direction:column; align-items:center; gap:0.16rem; min-width:44px; max-width:72px }
  .team-block.text-end { align-items:flex-end; text-align:right; justify-self:end; padding-right:0.45rem }
  .team-block.text-start { align-items:flex-start; text-align:left; justify-self:start; padding-left:0.45rem }
  .team-block .muted.small { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.58rem }
  /* White circular background behind team logos; dark abbrev text for contrast when image missing */
  .team-logo { width:34px; height:34px; border-radius:50%; background:#ffffff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#0b1220; position:relative; border: 1px solid rgba(11,18,32,0.06); box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.2s ease; }
  .team-logo:hover { transform: scale(1.08); }
  .team-logo img { width:100%; height:100%; object-fit:cover; border-radius:50% }
  .team-logo img { display:block }
  .team-abbr { font-size:0.7rem; letter-spacing:0.02em }
  /* center column should be compact and centered */
  .score-block { text-align:center; min-width:52px; justify-self:center }
  .score-main { font-weight:800; font-size:0.80rem; color: #ffffff; white-space: nowrap; }
  .status-badge { display:inline-block; padding:0.11rem 0.32rem; border-radius:999px; font-size:0.56rem; font-weight:700 }
  .status-live { background: linear-gradient(90deg,#22c55e,#16a34a); color:#06270b }
  .status-fin { background: rgba(255,255,255,0.03); color:rgba(255,255,255,0.85) }
  .muted.small { font-size:0.72rem }

  /* Lineup row styles */
  .lineup-row {
    display: none;
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    animation: slideDown 0.3s ease-out;
  }
  .lineup-row.show {
    display: block;
  }
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .lineup-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .lineup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }
  .lineup-player {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
  }
  .lineup-player-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .lineup-player-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(99,102,241,0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  .lineup-player-card.clickable {
    background: rgba(255,255,255,0.03);
  }
  
  .lineup-player-card.clickable:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(99,102,241,0.4);
  }
  .lineup-player-header {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.4rem;
  }
  .lineup-player-name {
    font-weight: 600;
    color: rgba(255,255,255,0.95);
  }
  .lineup-player-pos {
    color: rgba(255,255,255,0.6);
    font-size: 0.65rem;
    flex-shrink: 0;
  }
  .lineup-player-stats {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
  }
  .lineup-player-stats .stat-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .lineup-player-stats .stat-label {
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
  }
  .lineup-player-stats .stat-value {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    text-align: right;
  }

  .lineup-section-title {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
  }

  /* Smooth lineup section animation */
  #lineup-compare-row {
    transition: all 0.5s ease-in-out;
    transform-origin: top;
  }

  #lineup-compare-row.lineup-expanding {
    animation: expandLineup 0.5s ease-in-out forwards;
  }

  #lineup-compare-row.lineup-collapsing {
    animation: collapseLineup 0.5s ease-in-out forwards;
  }

  @keyframes expandLineup {
    0% {
      opacity: 0;
      transform: scaleY(0) translateY(-20px);
      max-height: 0;
    }
    50% {
      opacity: 0.5;
      transform: scaleY(0.5) translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: scaleY(1) translateY(0);
      max-height: 5000px;
    }
  }

  @keyframes collapseLineup {
    0% {
      opacity: 1;
      transform: scaleY(1) translateY(0);
      max-height: 5000px;
    }
    50% {
      opacity: 0.5;
      transform: scaleY(0.5) translateY(-10px);
    }
    100% {
      opacity: 0;
      transform: scaleY(0) translateY(-20px);
      max-height: 0;
    }
  }

  .injury-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
  }

  .injury-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .injury-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(99,102,241,0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  .injury-item.clickable {
    background: rgba(255,255,255,0.03);
  }
  
  .injury-item.clickable:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(99,102,241,0.4);
  }

  .injury-name {
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .injury-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .injury-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
  }
  .injury-status.out { background: rgba(239,68,68,0.20); color: rgba(255,255,255,0.92); border-color: rgba(239,68,68,0.35); }
  .injury-status.doubtful { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.92); border-color: rgba(245,158,11,0.30); }
  .injury-status.dtd { background: rgba(59,130,246,0.18); color: rgba(255,255,255,0.92); border-color: rgba(59,130,246,0.30); }
  .injury-status.questionable { background: rgba(168,85,247,0.18); color: rgba(255,255,255,0.92); border-color: rgba(168,85,247,0.30); }

  .lineup-compare-close {
    --bs-btn-padding-y: 0.18rem;
    --bs-btn-padding-x: 0.55rem;
    --bs-btn-font-size: 0.75rem;
  }

/* ================================
   SCOREBOARD RANKS WITH RIBBONS
   ================================ */

/* ================================
   SCOREBOARD RANK BADGES (RIBBONS)
   ================================ */

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  color: rgba(255,255,255,.70);
  position: relative;
}

/* default ranks 4+ look like your existing style */
.rank-badge.rank-4,
.rank-badge.rank-5,
.rank-badge.rank-6,
.rank-badge.rank-7,
.rank-badge.rank-8,
.rank-badge.rank-9,
.rank-badge.rank-10 {
  background: transparent;
  border: none;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}

/* Shared ribbon look for top 3 */
.rank-badge.rank-1,
.rank-badge.rank-2,
.rank-badge.rank-3 {
  color: #0b1220;            /* dark text on bright ribbon */
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

/* Ribbon "tails" */
.rank-badge.rank-1::after,
.rank-badge.rank-2::after,
.rank-badge.rank-3::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  opacity: 0.95;
}

/* ≡ƒÑç 1st */
.rank-badge.rank-1 {
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  font-size: 1.05rem;
  width: 30px;
  height: 30px;
}
.rank-badge.rank-1::after {
  background: linear-gradient(180deg, #facc15 0%, #d97706 100%);
}

/* ≡ƒÑê 2nd */
.rank-badge.rank-2 {
  background: linear-gradient(180deg, #f3f4f6 0%, #9ca3af 100%);
  font-size: 0.98rem;
  width: 29px;
  height: 29px;
}
.rank-badge.rank-2::after {
  background: linear-gradient(180deg, #e5e7eb 0%, #6b7280 100%);
}

/* ≡ƒÑë 3rd */
.rank-badge.rank-3 {
  background: linear-gradient(180deg, #f0b58c 0%, #b45309 100%);
  font-size: 0.92rem;
  width: 28px;
  height: 28px;
}
.rank-badge.rank-3::after {
  background: linear-gradient(180deg, #f0b58c 0%, #92400e 100%);
}

/* Modern close button for modals */
.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.modal-close-btn::before,
.modal-close-btn::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
}

.modal-close-btn::before {
  transform: rotate(45deg);
}

.modal-close-btn::after {
  transform: rotate(-45deg);
}

/* Modern modal footer button */
.modal-footer-btn {
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.modal-footer-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modal-footer-btn:active {
  transform: translateY(0);
}

/* Play-by-Play Styles */
.plays-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.plays-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.play-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
}

.play-left {
  display: flex;
  justify-content: flex-end;
}

.play-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 120px;
  padding: 0 1rem;
  border-left: 2px solid rgba(99, 102, 241, 0.3);
  border-right: 2px solid rgba(99, 102, 241, 0.3);
}

.play-right {
  display: flex;
  justify-content: flex-start;
}

.play-time {
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(99, 102, 241, 0.9);
}

.play-score {
  font-weight: 700;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.quarter-section {
  border-left: 3px solid rgba(99, 102, 241, 0.5);
  padding-left: 1rem;
}

.quarter-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.play-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.4;
  max-width: 300px;
}

.play-left .play-item {
  text-align: right;
}

.play-right .play-item {
  text-align: left;
}

.play-text {
  color: rgba(255, 255, 255, 0.75);
  word-break: break-word;
  clear: both;
  margin-top: 0.3rem;
}

.play-item.scoring {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

.play-item.scoring .play-text {
  color: rgba(34, 197, 94, 0.9);
  font-weight: 500;
}

/* Quarter Tabs Styles */
#playsQuarterTabs {
  list-style: none;
  padding: 0;
  margin: 0;
}

#playsQuarterTabs .nav-link {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#playsQuarterTabs .nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

#playsQuarterTabs .nav-link.active {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.5);
}

  /* Full-screen loading overlay */
  .app-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 18, 32, 0.95);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  
  .app-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  .app-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: rgba(99, 102, 241, 0.8);
    border-radius: 50%;
    animation: app-loading-spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  
  .app-loading-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  
  @keyframes app-loading-spin {
    to { transform: rotate(360deg); }
  }
  
  /* Disable interactions while loading */
  .app-loading .container-fluid,
  .app-loading .main-content {
    pointer-events: none;
    opacity: 0.3;
  }

  </style>
</head>
<body class="text-white">
  <!-- Full-screen loading overlay -->
  <div id="appLoadingOverlay" class="app-loading-overlay">
    <div class="app-loading-spinner"></div>
    <div class="app-loading-text">Loading NBA Live Data...</div>
  </div>
  
  <div class="container-fluid py-3 full-height" style="flex:1 1 auto;">
    <div class="d-flex align-items-center justify-content-between mb-3">
    <h1 class="h3 mb-0 d-flex align-items-center gap-2">
    <img src="/img/nba.png" alt="NBA logo" class="nba-logo">
    <span>Live Leaders</span>
    </h1>
      <div class="muted small">
        <div>Last update: <span id="lastUpdate">–</span></div>
        <div>Rate limit: <span id="rateLimitStatus">Loading...</span></div>
        <div>Rate usage: <span id="rateUsageStatus">Loading...</span></div>
      </div>
    </div>

  <!-- Current games (from local `games` table via /api/games/today) -->
    <div class="row mb-3">
      <div class="col-12">
        <div class="card shadow-sm h-fill">
          <div class="card-header d-flex justify-content-between align-items-center">
            <div class="fw-semibold" id="games-title">Today</div>
          </div>
          <div class="card-body p-2">
            <div class="games-strip-nav">
              <button class="games-nav-btn" type="button" id="games-day-prev" aria-label="Show yesterday's games" title="Yesterday">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
              </button>

              <ul class="list-group list-group-flush games-strip" id="games-list">
                <li class="list-group-item bg-transparent d-flex align-items-center justify-content-center py-4">
                  <div class="spinner-border spinner-border-sm text-muted me-2" role="status" aria-hidden="true"></div>
                  <span class="muted">Loading games</span>
                </li>
              </ul>

              <button class="games-nav-btn" type="button" id="games-day-next" aria-label="Return to today's games" title="Today">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Lineup compare (appears when a game is selected) -->
    <div class="row mb-3" id="lineup-compare-row" style="display:none;">
      <div class="col-12">
        <div class="card shadow-sm">
          <div class="card-header">
            <div class="fw-semibold" id="lineup-compare-title">Starting Lineups</div>
          </div>
          <div class="card-body" id="lineup-compare-body"></div>
        </div>
      </div>
    </div>

    <!-- Lazy-loaded modal containers -->
    <div id="injuryModal"></div>
    <div id="boxScoreModal"></div>
    <div id="playerProfileModal"></div>
    <div id="playsModal"></div>

    <div id="leaderboardFilterControl">
      <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
        <label for="limitSelector" style="margin: 0;">DISPLAY</label>
        <select id="limitSelector" class="form-select form-select-sm" style="width: 140px;">
          <option value="10" selected>Top 10</option>
          <option value="15">Top 15</option>
          <option value="20">Top 20</option>
          <option value="25">Top 25</option>
          <option value="30">Top 30</option>
          <option value="35">Top 35</option>
          <option value="40">Top 40</option>
          <option value="45">Top 45</option>
          <option value="50">Top 50</option>
        </select>
      </div>
    </div>

    <div class="row g-3" id="boards"></div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
// Loading state management - MUST be first to avoid initialization errors
var isInitialLoadComplete = false;
var pendingInitialRequests = 0;

function showAppLoading() {
  const overlay = document.getElementById('appLoadingOverlay');
  const body = document.body;
  if (overlay) {
    overlay.classList.remove('hidden');
    body.classList.add('app-loading');
  }
}

function hideAppLoading() {
  const overlay = document.getElementById('appLoadingOverlay');
  const body = document.body;
  if (overlay) {
    overlay.classList.add('hidden');
    body.classList.remove('app-loading');
    isInitialLoadComplete = true;
  }
}

function trackInitialRequest() {
  if (!isInitialLoadComplete) {
    pendingInitialRequests++;
  }
}

function completeInitialRequest() {
  if (!isInitialLoadComplete) {
    pendingInitialRequests--;
    if (pendingInitialRequests <= 0) {
      // Give extra time for DOM rendering to complete
      setTimeout(hideAppLoading, 1000);
    }
  }
}

const refreshEveryMs = 10000; // Refresh leaderboards every 10 seconds (reduced from 3s)
// refreshMs element removed - no need to set it

// HTML escaping helpers (prevents broken markup when names contain quotes)
const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (ch) => ({
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;'
}[ch]));

const truncateText = (value, maxLen = 90) => {
  const s = String(value ?? '').trim();
  if (!s) return '';
  if (s.length <= maxLen) return s;
  return s.slice(0, Math.max(0, maxLen - 1)).trimEnd() + '…';
};

const sanitizeTeamForLogo = (s) => String(s || '').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');

// Safe DOM manipulation helpers (prevents XSS through DOM injection)
const setTextSafely = (elementId, text) => {
  const el = document.getElementById(elementId);
  if (el) el.textContent = text; // textContent is automatically XSS-safe
};

const setHTMLSafely = (elementId, html) => {
  const el = document.getElementById(elementId);
  if (el) {
    // Use DOMParser for safe HTML insertion instead of innerHTML
    const template = document.createElement('template');
    template.innerHTML = html.trim();
    el.innerHTML = ''; // Clear existing content
    el.appendChild(template.content);
  }
};

const createSafeElement = (tag, attributes = {}, textContent = '') => {
  const el = document.createElement(tag);
  for (const [key, value] of Object.entries(attributes)) {
    el.setAttribute(key, value); // setAttribute automatically escapes
  }
  if (textContent) el.textContent = textContent; // textContent is XSS-safe
  return el;
};

// Map team abbreviations to logo filenames
const teamAbbrToLogo = {
  'ATL': 'hawks', 'BOS': 'celtics', 'BKN': 'nets', 'CHA': 'hornets', 'CHI': 'bulls',
  'CLE': 'cavaliers', 'DAL': 'mavericks', 'DEN': 'nuggets', 'DET': 'pistons', 'GSW': 'warriors',
  'HOU': 'rockets', 'IND': 'pacers', 'LAC': 'clippers', 'LAL': 'lakers', 'MEM': 'grizzlies',
  'MIA': 'heat', 'MIL': 'bucks', 'MIN': 'timberwolves', 'NOP': 'pelicans', 'NYK': 'knicks',
  'OKC': 'thunder', 'ORL': 'magic', 'PHI': '76ers', 'PHX': 'suns', 'POR': 'trail-blazers',
  'SAC': 'kings', 'SAS': 'spurs', 'TOR': 'raptors', 'UTA': 'jazz', 'WAS': 'wizards'
};

let selectedGameId = null;
let selectedGameFetchToken = 0;
const lineupCacheByGameId = new Map();

// Current Games day navigation.
// 0 = today, -1 = yesterday, -2 = two days ago, ...
const GAMES_DAY_OFFSET_STORAGE_KEY = 'gamesDayOffset';
let gamesDayOffset = (() => {
  // Always reset to today (0) on page load, don't persist offset across sessions
  localStorage.removeItem(GAMES_DAY_OFFSET_STORAGE_KEY);
  return 0;
})();

function pad2(n) {
  return String(n).padStart(2, '0');
}

function ymdFromLocalDate(d) {
  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
}

function ymdAddLocalDays(ymd, deltaDays) {
  const m = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(String(ymd || '').trim());
  if (!m) return ymd;
  const y = Number(m[1]);
  const mo = Number(m[2]);
  const da = Number(m[3]);
  const dt = new Date(y, mo - 1, da);
  dt.setDate(dt.getDate() + Number(deltaDays || 0));
  return ymdFromLocalDate(dt);
}

function getGamesQueryDateYmd() {
  const todayYmd = ymdFromLocalDate(new Date());
  return ymdAddLocalDays(todayYmd, gamesDayOffset);
}

// ===== Lazy-loading modal templates =====
// These functions create modal HTML on-demand to reduce initial page load

const modalTemplates = {
  injuryModal: () => `
    <div class="modal fade" id="injuryModal" tabindex="-1" aria-labelledby="injuryModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="background:#0f1a2d; border:1px solid rgba(255,255,255,.10); position: relative;">
          <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,.08);">
            <h5 class="modal-title text-white" id="injuryModalLabel">Injury Details</h5>
          </div>
          <div class="modal-body" id="injuryModalBody" style="color: rgba(255,255,255,.92);"></div>
          <div class="modal-footer" style="border-top:1px solid rgba(255,255,255,.08);">
            <button type="button" class="modal-footer-btn" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  `,
  
  boxScoreModal: () => `
    <div class="modal fade" id="boxScoreModal" tabindex="-1" aria-labelledby="boxScoreModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="background:#0f1a2d; border:1px solid rgba(255,255,255,.10);">
          <div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,.08);">
            <h5 class="modal-title text-white" id="boxScoreModalLabel">Box Score</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="boxScoreModalBody" style="color: rgba(255,255,255,.92);"></div>
          <div class="modal-footer" style="border-top:1px solid rgba(255,255,255,.08);">
            <button type="button" class="modal-footer-btn" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  `,
  
  playerProfileModal: () => `
    <div class="modal fade" id="playerProfileModal" tabindex="-1" aria-labelledby="playerProfileModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content" style="background:#0f1a2d; border:1px solid rgba(255,255,255,.10); position: relative;">
          <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,.08);">
            <h5 class="modal-title text-white" id="playerProfileModalLabel">Player Profile</h5>
          </div>
          <div class="modal-body" id="playerProfileModalBody" style="color: rgba(255,255,255,.92);">
            <div id="playerProfileContent">
              <div class="row mb-3">
                <div class="col-md-3">
                  <div id="playerProfileInfo"></div>
                </div>
                <div class="col-md-9">
                  <h3 class="mb-3" style="font-size: 1.4rem; font-weight: 600;">NBA Game Log</h3>
                  <div class="mb-3">
                    <label for="seasonSelector" class="form-label">Season:</label>
                    <select id="seasonSelector" class="form-select form-select-sm" style="width: auto; background-color: rgba(255,255,255,.1); color: rgba(255,255,255,.9);">
                      <option>Loading...</option>
                    </select>
                  </div>
                  <div class="table-responsive" style="max-height: 320px; overflow-y: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 4px;">
                    <table class="table table-sm table-dark" style="background: rgba(0,0,0,0.3); border: none; margin-bottom: 0;">
                      <style>
                        #gameLogTable tr { border: none !important; }
                        #gameLogTable td { border: none !important; padding: 0.5rem !important; }
                        #gameLogTable tbody tr.game-log-row-even td { background-color: rgba(0,0,0,0.4) !important; }
                        #gameLogTable tbody tr.game-log-row-odd td { background-color: rgba(255,255,255,0.08) !important; }
                        #gameLogTable tbody tr.game-log-row-even:hover td { background-color: rgba(0,0,0,1) !important; }
                        #gameLogTable tbody tr.game-log-row-odd:hover td { background-color: rgba(0,0,0,1) !important; }
                      </style>
                      <thead style="position: sticky; top: 0; background: rgba(0,0,0,0.5); z-index: 10;">
                        <tr style="font-size: 0.75rem;">
                          <th>Date</th>
                          <th style="text-align: center;">OPP</th>
                          <th style="text-align: center;">Score</th>
                          <th style="text-align: center;">MIN</th>
                          <th style="text-align: center;">PTS</th>
                          <th style="text-align: center;">REB</th>
                          <th style="text-align: center;">AST</th>
                          <th style="text-align: center;">STL</th>
                          <th style="text-align: center;">BLK</th>
                          <th style="text-align: center;">TO</th>
                          <th style="text-align: center;">FGM</th>
                          <th style="text-align: center;">FGA</th>
                          <th style="text-align: center;">FTM</th>
                          <th style="text-align: center;">FTA</th>
                          <th style="text-align: center;">3PM</th>
                          <th style="text-align: center;">3PA</th>
                          <th style="text-align: center;">FOULS</th>
                        </tr>
                      </thead>
                      <tbody id="gameLogTable">
                        <tr><td colspan="17" class="text-center muted">Loading...</td></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div style="margin-top: 1rem;">
                  <h4 style="font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem;">Injuries</h4>
                  <div id="playerInjuriesContainer" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 0.75rem; min-height: 60px;">
                    <div class="text-center muted small">No injuries reported</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer" style="border-top:1px solid rgba(255,255,255,.08);">
            <button type="button" class="modal-footer-btn" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  `,
  
  playsModal: () => `
    <div class="modal fade" id="playsModal" tabindex="-1" aria-labelledby="playsModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content" style="background:#0f1a2d; border:1px solid rgba(255,255,255,.10);">
          <div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,.08); flex-direction: column; align-items: stretch; gap: 0.75rem;">
            <div class="d-flex align-items-center justify-content-between" style="gap: 2rem;">
              <div class="d-flex align-items-center gap-2" style="flex: 1; justify-content: flex-start; margin-left: 35px;">
                <div class="team-logo" style="width: 50px; height: 50px; flex-shrink: 0;">
                  <img id="playsVisitorLogo" src="" alt="Away" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                </div>
                <div style="min-width: 0;">
                  <div id="playsVisitorCity" style="font-size: 0.95rem; color: rgba(255,255,255,.6); margin-bottom: 2px;">City</div>
                  <div id="playsVisitorName" style="font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.92);">Team</div>
                </div>
              </div>
              <div style="text-align: center; flex: 0 0 auto;">
                <div id="playsModalLabel" style="font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,.92);">4th Qtr</div>
              </div>
              <div class="d-flex align-items-center gap-2" style="flex: 1; justify-content: flex-end; margin-right: 35px;">
                <div style="min-width: 0; text-align: right;">
                  <div id="playsHomeCity" style="font-size: 0.95rem; color: rgba(255,255,255,.6); margin-bottom: 2px;">City</div>
                  <div id="playsHomeName" style="font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.92);">Team</div>
                </div>
                <div class="team-logo" style="width: 50px; height: 50px; flex-shrink: 0;">
                  <img id="playsHomeLogo" src="" alt="Home" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                </div>
              </div>
            </div>
            <ul class="nav nav-pills gap-2 mb-0" id="playsQuarterTabs" role="tablist" style="flex-wrap: wrap; gap: 0.5rem !important;"></ul>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; right: 1rem; top: 1rem;"></button>
          </div>
          <div class="modal-body" id="playsModalBody" style="color: rgba(255,255,255,.92);">
            <div id="playsContent" style="max-height: 500px; overflow-y: auto;">
              <div class="text-center muted">Loading plays...</div>
            </div>
          </div>
          <div class="modal-footer" style="border-top:1px solid rgba(255,255,255,.08);">
            <button type="button" class="modal-footer-btn" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  `
};

// Track which modals have been loaded
const loadedModals = {};

function ensureModalLoaded(modalId) {
  if (loadedModals[modalId]) return;
  
  const container = document.getElementById(modalId);
  if (!container) return;
  
  const template = modalTemplates[modalId];
  if (!template) return;
  
  // Use outerHTML to replace the container div entirely
  container.outerHTML = template();
  loadedModals[modalId] = true;
}

function getGamesQueryDateYmd() {
  const todayYmd = ymdFromLocalDate(new Date());
  return ymdAddLocalDays(todayYmd, gamesDayOffset);
}

function updateGamesNavUi(viewingDateYmd) {
  const nextBtn = document.getElementById('games-day-next');
  if (nextBtn) nextBtn.style.visibility = gamesDayOffset < 0 ? 'visible' : 'hidden';

  const metaEl = document.getElementById('games-meta');
  if (metaEl) {
    // The count portion is set in refreshGames; keep date label consistent here.
    metaEl.dataset.viewingDate = viewingDateYmd || '';
  }
}

const boards = [
  { key: "points", title: "Top Scorer" },
  { key: "threes", title: "Top 3-Point Made" },
  { key: "assists", title: "Top Assists" },

  { key: "rebounds", title: "Top Rebounds" },
  { key: "blocks", title: "Top Blocks" },
  { key: "steals", title: "Top Steals" },
];

// Per-card mode state: "today" (live-game leaders) or "season" (season leaders among active players)
// Will be initialized properly after games are loaded - default to "today" for now
const boardMode = Object.fromEntries(boards.map(b => [b.key, "today"]));

// Function to set default mode based on whether games have started
function setDefaultBoardMode(games) {
  const hasStartedGames = games && games.some(g => {
    const status = String(g.status || '').toLowerCase();
    return !status.includes('scheduled');
  });
  
  // If any game has started, default to "today" mode, otherwise "season" mode
  const defaultMode = hasStartedGames ? "today" : "season";
  
  boards.forEach(b => {
    // Only set default if not already set by user interaction
    if (!document.getElementById(`${b.key}-toggle`).hasAttribute('data-user-set')) {
      boardMode[b.key] = defaultMode;
    }
  });
}

// When in season mode, optionally filter to leaders who play in today's games.
const boardSeasonTodayOnly = Object.fromEntries(boards.map(b => [b.key, true]));

// Limit for number of results to display
let boardResultsLimit = 10;

function boardCard(id, title) {
  function renderTitleHtml(rawTitle) {
    const t = String(rawTitle || "");
    // If the title starts with "Top ", render "TOP" as a small label like TODAY/SEASON.
    if (/^top\s+/i.test(t)) {
      const rest = t.replace(/^top\s+/i, "");
      return `<span class="board-title"><span class="muted mode-label">TOP</span><span class="fw-semibold muted mode-label">${escapeHtml(rest)}</span></span>`;
    }

    // Otherwise, just uppercase standalone "Top" occurrences for consistency.
    return `<span class="fw-semibold">${escapeHtml(t.replace(/\bTop\b/g, "TOP"))}</span>`;
  }

  return `
    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div class="board-toggles">
            <div class="form-check form-switch m-0">
              <input class="form-check-input season-toggle" type="checkbox"
                     id="${id}-toggle" data-board="${id}" aria-label="Toggle season mode for ${title}">
            </div>
            <div>${renderTitleHtml(title)}</div>
            <div class="muted mode-label" id="${id}-mode">TODAY</div>

            <div class="form-check form-switch m-0 d-none mini-switch" id="${id}-today-only-wrap" title="Only show season leaders who are playing today">
              <input class="form-check-input today-only-toggle" type="checkbox"
                     id="${id}-today-only" data-board="${id}" aria-label="Filter to leaders playing today">
              <label class="form-check-label muted mode-label" for="${id}-today-only">PLAYING TODAY</label>
            </div>
          </div>
          <div class="muted small" id="${id}-meta">–</div>
        </div>

        <div class="table-responsive">
          <table class="table table-sm table-dark table-hover align-middle mb-0">
            <thead>
              <tr>
                <th style="width:48px;" class="text-center">#</th>
                <th>Player</th>
                <th style="width:72px;" class="text-end" id="${id}-value-header">Total</th>
                <th style="width:140px;" class="text-center" id="${id}-time-header">Time</th>
              </tr>
            </thead>
            <tbody id="${id}-body">
              <tr><td colspan="4" class="muted">Loading…</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  `;
}

document.getElementById("boards").innerHTML = boards.map(b => boardCard(b.key, b.title)).join("");

// Use Bootstrap's row/column system for boards (restore default behavior)
// If we later want a CSS grid layout, we'll replace the markup rather than override inline styles.

// Initialize toggle states to match defaults
boards.forEach(b => {
  const seasonToggle = document.getElementById(`${b.key}-toggle`);
  const todayOnlyToggle = document.getElementById(`${b.key}-today-only`);
  const todayOnlyWrap = document.getElementById(`${b.key}-today-only-wrap`);
  const modeLabel = document.getElementById(`${b.key}-mode`);
  
  if (seasonToggle) {
    seasonToggle.checked = boardMode[b.key] === "season";
  }
  
  if (todayOnlyToggle) {
    todayOnlyToggle.checked = boardSeasonTodayOnly[b.key];
  }
  
  if (todayOnlyWrap) {
    if (boardMode[b.key] === "season") {
      todayOnlyWrap.classList.remove("d-none");
    } else {
      todayOnlyWrap.classList.add("d-none");
    }
  }
  
  if (modeLabel) {
    modeLabel.textContent = boardMode[b.key] === "season" ? "SEASON" : "TODAY";
  }
});

// Wire up toggles after DOM is populated
document.querySelectorAll(".season-toggle").forEach((el) => {
  el.addEventListener("change", async (e) => {
    const board = e.target.dataset.board;
    // Mark as user-set so we don't override their choice
    e.target.setAttribute('data-user-set', 'true');
    
    boardMode[board] = e.target.checked ? "season" : "today";
    document.getElementById(`${board}-mode`).textContent = e.target.checked ? "SEASON" : "TODAY";

    const wrap = document.getElementById(`${board}-today-only-wrap`);
    if (wrap) {
      if (e.target.checked) {
        wrap.classList.remove("d-none");
      } else {
        wrap.classList.add("d-none");
        boardSeasonTodayOnly[board] = false;
        const t = document.getElementById(`${board}-today-only`);
        if (t) t.checked = false;
      }
    }

    await refresh(); // immediate refresh on toggle
  });
});

document.querySelectorAll(".today-only-toggle").forEach((el) => {
  el.addEventListener("change", async (e) => {
    const board = e.target.dataset.board;
    boardSeasonTodayOnly[board] = !!e.target.checked;
    await refresh();
  });
});

// Wire up limit selector
const limitSelector = document.getElementById("limitSelector");
if (limitSelector) {
  limitSelector.addEventListener("change", async (e) => {
    boardResultsLimit = Number(e.target.value);
    await refresh();
  });
}

function renderRows(tbodyId, rows, mode = "today") {
  const tbody = document.getElementById(tbodyId);

  // Used for rank-based typography tweaks in season mode.
  tbody.classList.toggle("leaders-season", mode === "season");

  function formatLeaderboardValue(v) {
    const n = Number(v);
    if (!Number.isFinite(n)) return (v ?? "");
    // Show integers without decimals; otherwise show exactly 1 decimal.
    if (Math.abs(n - Math.round(n)) < 1e-9) return String(Math.round(n));
    return n.toFixed(1);
  }

  // Filter out zero totals
  const filtered = (rows || []).filter(r => Number(r.value) >= 1);

  if (filtered.length === 0) {
    // Keep card height stable with a placeholder row
    tbody.innerHTML = `
      <tr>
        <td colspan="4" class="muted text-center">
          No qualifying players yet
        </td>
      </tr>
    `;
    return;
  }

  tbody.innerHTML = filtered.map(r => {
    const nRank = Number(r.rank);
    const rankClass = Number.isFinite(nRank) ? `leader-rank-${nRank}` : "";
    const restClass = Number.isFinite(nRank) && nRank >= 4 ? "leader-rank-rest" : "";
    const trClass = `${rankClass} ${restClass}`.trim();

    const statusClass = (status) => {
      const s = String(status || '').toLowerCase();
      if (s === 'out') return 'out';
      if (s === 'dtd') return 'dtd';
      if (s === 'questionable') return 'questionable';
      if (s === 'doubtful') return 'doubtful';
      return 'dtd';
    };

    const injury = r?.injury || null;
    const injuryStatus = injury?.status || null;
    const injuryTeam = r?.teamAbbrev || injury?.team?.abbrev || '';
    const injuryPlayer = r?.playerFullName || r?.playerName || '';
    const injuryDesc = injury?.description || '';
    const injuryReturnDate = injury?.return_date || '';
    const injuryBadgeHtml = injuryStatus ? `
      <span
        class="injury-status ${statusClass(injuryStatus)} ms-2"
        data-injury="true"
        data-player="${escapeHtml(injuryPlayer)}"
        data-team="${escapeHtml(injuryTeam)}"
        data-status="${escapeHtml(injuryStatus)}"
        data-return-date="${escapeHtml(injuryReturnDate)}"
        data-description="${escapeHtml(injuryDesc)}"
        title="Hover for details"
        style="cursor: help;"
      >${escapeHtml(injuryStatus)}</span>
    ` : '';

    return `
    <tr class="${trClass} leader-row" style="cursor: pointer;" data-player-id="${r.playerId}" data-player-name="${escapeHtml(r.playerFullName)}">
      <td class="text-center">
        <span class="rank-badge rank-${r.rank}">${r.rank}</span>
    </td>
      <td><span class="leader-text leader-player">${escapeHtml(r.playerName)}${injuryBadgeHtml}</span></td>
      <td class="text-end fw-semibold"><span class="leader-text">${formatLeaderboardValue(r.value)}</span></td>
      <td class="text-center muted"><span class="leader-text">${r.time}</span></td>
    </tr>
  `;
  }).join("");

  // Add click handlers to leaderboard rows
  tbody.querySelectorAll('.leader-row').forEach(el => {
    el.addEventListener('click', async (e) => {
      e.preventDefault();
      const playerId = el.dataset.playerId;
      const playerName = el.dataset.playerName;
      if (playerId) {
        await showPlayerProfileModal(playerId, playerName);
      }
    });
  });
}

function defaultSeasonStartYear(d = new Date()) {
  // NBA season is referenced by its start year (e.g., 2025 for 2025–26).
  // Jul–Dec => current year; Jan–Jun => previous year.
  const y = d.getFullYear();
  const m = d.getMonth() + 1;
  return (m >= 7) ? y : (y - 1);
}

async function updateRateLimitStatus() {
  try {
    const response = await fetch('/rate-limit-status');
    const data = await response.json();
    
    const limitText = `${data.maxRequests} requests per ${data.windowMinutes} min`;
    const usageText = `${data.currentRequests}/${data.maxRequests} requests (${data.remaining} remaining)`;
    
    document.getElementById("rateLimitStatus").textContent = limitText;
    document.getElementById("rateUsageStatus").textContent = usageText;
  } catch (e) {
    document.getElementById("rateLimitStatus").textContent = "Error loading";
    document.getElementById("rateUsageStatus").textContent = "Error loading";
    console.error('Failed to fetch rate limit status:', e);
  }
}

async function refresh() {
  trackInitialRequest();
  
  try {
    // When viewing previous games (not today), force TODAY mode instead of SEASON
    const viewingPreviousGames = gamesDayOffset !== 0;
    
    await Promise.all(boards.map(async (b) => {
      // Use "today" mode if viewing previous games, otherwise use the user's selected mode
      const mode = viewingPreviousGames ? "today" : (boardMode[b.key] || "today");

      const valueHeader = document.getElementById(`${b.key}-value-header`);
      if (valueHeader) valueHeader.textContent = (mode === "season") ? "AVG" : "Total";

      const timeHeader = document.getElementById(`${b.key}-time-header`);
      if (timeHeader) timeHeader.textContent = (mode === "season") ? "Games" : "Minutes";

      const qs = new URLSearchParams();
      
      if (mode === "season") {
        qs.set("mode", mode);
        qs.set("seasonYear", String(defaultSeasonStartYear(new Date())));

        if (boardSeasonTodayOnly[b.key]) {
          const now = new Date();
          const today = ymdFromLocalDate(now);
          const tzOffsetMin = -now.getTimezoneOffset();

          qs.set("onlyTodayPlayers", "1");
          qs.set("date", today);
          qs.set("tzOffsetMin", String(tzOffsetMin));
        }
      } else {
        // Use "daily" mode to fetch completed game box scores for the selected date
        qs.set("mode", "daily");
        const selectedDate = getGamesQueryDateYmd();
        const now = new Date();
        const tzOffsetMin = -now.getTimezoneOffset();
        
        qs.set("date", selectedDate);
        qs.set("tzOffsetMin", String(tzOffsetMin));
      }

      // Add limit parameter to query string
      qs.set("limit", String(boardResultsLimit));

      const res = await fetch(`/api/leaderboard/${b.key}?${qs.toString()}`);
      const json = await res.json();

      // If your backend returns an error JSON, surface it in the UI without crashing
      if (json && json.error) {
        const tbody = document.getElementById(`${b.key}-body`);
        tbody.innerHTML = `<tr><td colspan="4" class="muted">Error: ${escapeHtml(json.error)}</td></tr>`;
        document.getElementById(`${b.key}-meta`).textContent = `–`;
        return;
      }
      
      const validRows = (json.rows || []).filter(r => Number(r.value) >= 1);
      
      // Slice to the limit to ensure we display only the requested number
      const limitedRows = validRows.slice(0, boardResultsLimit);

      renderRows(`${b.key}-body`, limitedRows, mode);

      // Card meta: keep counts for TODAY mode; omit in SEASON mode.
      const metaEl = document.getElementById(`${b.key}-meta`);
      if (metaEl) {
        const displayCount = Math.min(validRows.length, boardResultsLimit);
        metaEl.textContent = (mode === 'season') ? '' : `${displayCount} players`;
      }
    }));
    // Update toggle states to reflect whether we're viewing previous games
    boards.forEach(b => {
      const seasonToggle = document.getElementById(`${b.key}-toggle`);
      const modeLabel = document.getElementById(`${b.key}-mode`);
      const todayOnlyWrap = document.getElementById(`${b.key}-today-only-wrap`);
      
      if (seasonToggle) {
        // Disable toggle and uncheck if viewing previous games
        if (viewingPreviousGames) {
          seasonToggle.disabled = true;
          seasonToggle.checked = false;
        } else {
          seasonToggle.disabled = false;
          seasonToggle.checked = boardMode[b.key] === "season";
        }
      }
      
      // Update mode label - hide when viewing previous games
      if (modeLabel) {
        if (viewingPreviousGames) {
          modeLabel.textContent = '';
        } else {
          modeLabel.textContent = boardMode[b.key] === "season" ? "SEASON" : "TODAY";
        }
      }
      
      // Hide the "PLAYING TODAY" sub-toggle when viewing previous games
      if (todayOnlyWrap) {
        if (viewingPreviousGames) {
          todayOnlyWrap.classList.add("d-none");
        } else if (boardMode[b.key] === "season") {
          todayOnlyWrap.classList.remove("d-none");
        }
      }
    });

    document.getElementById("lastUpdate").textContent = new Date().toLocaleTimeString();
    
    // Update rate limiting status
    updateRateLimitStatus();
    
    completeInitialRequest();
  } catch (e) {
    console.error(e);
    completeInitialRequest();
  }
}

refresh();
setInterval(refresh, refreshEveryMs);

// Refresh a single board without affecting others (prevents flickering)
async function refreshSingleBoard(boardKey) {
  try {
    const b = boards.find(board => board.key === boardKey);
    if (!b) return;

    // Show subtle loading state for just this board
    const tbody = document.getElementById(`${boardKey}-body`);
    const meta = document.getElementById(`${boardKey}-meta`);
    if (tbody) {
      tbody.style.opacity = '0.6';
      tbody.style.transition = 'opacity 0.2s ease';
    }

    // When viewing previous games (not today), force TODAY mode instead of SEASON
    const viewingPreviousGames = gamesDayOffset !== 0;
    const mode = viewingPreviousGames ? "today" : (boardMode[boardKey] || "today");

    // Update headers for this board
    const valueHeader = document.getElementById(`${boardKey}-value-header`);
    if (valueHeader) valueHeader.textContent = (mode === "season") ? "AVG" : "Total";

    const timeHeader = document.getElementById(`${boardKey}-time-header`);
    if (timeHeader) timeHeader.textContent = (mode === "season") ? "Games" : "Minutes";

    const qs = new URLSearchParams();
    
    if (mode === "season") {
      qs.set("mode", mode);
      qs.set("seasonYear", String(defaultSeasonStartYear(new Date())));

      if (boardSeasonTodayOnly[boardKey]) {
        const now = new Date();
        const today = ymdFromLocalDate(now);
        const tzOffsetMin = -now.getTimezoneOffset();

        qs.set("onlyTodayPlayers", "1");
        qs.set("date", today);
        qs.set("tzOffsetMin", String(tzOffsetMin));
      }
    } else {
      qs.set("mode", "daily");
      const selectedDate = getGamesQueryDateYmd();
      const now = new Date();
      const tzOffsetMin = -now.getTimezoneOffset();
      
      qs.set("date", selectedDate);
      qs.set("tzOffsetMin", String(tzOffsetMin));
    }

    qs.set("limit", String(boardResultsLimit));

    const res = await fetch(`/api/leaderboard/${boardKey}?${qs.toString()}`);
    const json = await res.json();

    if (json && json.error) {
      if (tbody) tbody.innerHTML = `<tr><td colspan="4" class="muted">Error: ${escapeHtml(json.error)}</td></tr>`;
      if (meta) meta.textContent = `–`;
      return;
    }

    // Update the board with new data
    if (tbody && json.leaders) {
      tbody.innerHTML = json.leaders.map(p => `
        <tr class="selectable-row" data-player-id="${escapeHtml(String(p.player_id || ''))}" data-player-name="${escapeHtml(p.player_name || '')}" style="cursor:pointer;">
          <td class="text-truncate" style="max-width: 150px;">${escapeHtml(p.player_name || '')}</td>
          <td class="text-end">${escapeHtml(String(p.value || 0))}</td>
          <td class="text-end">${escapeHtml(String(p.time_played || 0))}</td>
          <td class="text-truncate" style="max-width: 80px;">${escapeHtml(p.team_abbreviation || '')}</td>
        </tr>
      `).join('');
    }

    if (meta) {
      const count = json.leaders ? json.leaders.length : 0;
      meta.textContent = `${count} players`;
    }

    // Restore full opacity with smooth transition
    if (tbody) {
      tbody.style.opacity = '1';
    }

  } catch (e) {
    console.error(`Error refreshing ${boardKey}:`, e);
    const tbody = document.getElementById(`${boardKey}-body`);
    const meta = document.getElementById(`${boardKey}-meta`);
    if (tbody) {
      tbody.innerHTML = `<tr><td colspan="4" class="muted">Error loading data</td></tr>`;
      tbody.style.opacity = '1';
    }
    if (meta) meta.textContent = `–`;
  }
}

// Games panel: fetch today's games from local DB (historical store) and render
async function refreshGames(showLoading = false) {
  if (!isInitialLoadComplete) {
    trackInitialRequest();
  }
  
  try {
    // Only show spinner on initial load or explicit user actions (not on auto-refresh)
    if (showLoading) {
      document.getElementById('games-list').innerHTML = `<li class="list-group-item bg-transparent d-flex align-items-center justify-content-center py-4"><div class="spinner-border spinner-border-sm text-light me-2" role="status" aria-hidden="true"></div><span class="text-light">Loading games</span></li>`;
    }
    
    // Use local date (not UTC) so we query the same "today" the user expects.
    const now = new Date();
    const queryDate = getGamesQueryDateYmd();

    // Pass the client's timezone offset so the server can interpret "today" in local time.
    // JS getTimezoneOffset(): minutes to add to local to get UTC (e.g. Eastern Standard Time => 300)
    // Server expects minutes to add to UTC to get local (so invert the sign).
    const tzOffsetMin = -now.getTimezoneOffset();

    updateGamesNavUi(queryDate);

    const res = await fetch(`/api/games/today?date=${encodeURIComponent(queryDate)}&tzOffsetMin=${encodeURIComponent(tzOffsetMin)}`);
    if (!res.ok) {
      document.getElementById('games-list').innerHTML = `<li class="list-group-item bg-transparent muted">Error loading games</li>`;
      return;
    }
    const json = await res.json();
    const games = json.games || [];

    const viewingDate = String(json.date || queryDate);
    const todayYmd = ymdFromLocalDate(new Date());
    const dayLabel = (viewingDate === todayYmd)
      ? 'Today'
      : (viewingDate === ymdAddLocalDays(todayYmd, -1) ? 'Yesterday' : viewingDate);

    // Format date for header: (Day Name), (Month Name) (Day Number), (YEAR)
    const formatDateForHeader = (ymd) => {
      const [y, mo, da] = ymd.split('-').map(Number);
      const d = new Date(y, mo - 1, da);
      const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      return `${dayNames[d.getDay()]}, ${monthNames[d.getMonth()]} ${da}, ${y}`;
    };

    const headerTitle = (viewingDate === todayYmd) ? 'Today' : formatDateForHeader(viewingDate);
    document.getElementById('games-title').textContent = headerTitle;

    if (!games.length) {
      document.getElementById('games-list').innerHTML = `<li class="list-group-item bg-transparent muted">No games found</li>`;
      return;
    }

    // Render as horizontal game cards (compact scoreboard style)
    const nodes = games.map(g => {
      const homeAbbr = g.home_abbrev || (g.home_name || 'Home').split(' ').slice(-1)[0];
      const awayAbbr = g.away_abbrev || (g.away_name || 'Away').split(' ').slice(-1)[0];
      const homeName = g.home_name || homeAbbr;
      const awayName = g.away_name || awayAbbr;

      const homeNameEsc = escapeHtml(homeName);
      const awayNameEsc = escapeHtml(awayName);
      const homeAbbrEsc = escapeHtml(homeAbbr);
      const awayAbbrEsc = escapeHtml(awayAbbr);
      // Scores: show visitor - home (visitor on left per your design)
      // Upstream typically reports 0/0 for scheduled games, so treat 0-0 as "no score yet".
      const rawVisitorScore = (g.visitor_team_score != null) ? Number(g.visitor_team_score) : null;
      const rawHomeScore = (g.home_team_score != null) ? Number(g.home_team_score) : null;

      const hasScore = Number.isFinite(rawVisitorScore) && Number.isFinite(rawHomeScore)
        && !(rawVisitorScore === 0 && rawHomeScore === 0 && String(g.status || '').toLowerCase().includes('scheduled'));

      const visitorScore = hasScore ? rawVisitorScore : null;
      const homeScore = hasScore ? rawHomeScore : null;

      // Status badge
      let statusText = (g.status || '').toString();
      let statusClass = 'status-fin';
      const sLow = statusText.toLowerCase();
      if (sLow.includes('live') || sLow.includes('in progress')) {
        statusText = 'LIVE';
        statusClass = 'status-live';
      } else if (sLow.includes('final') || sLow === 'final') {
        statusText = 'END';
        statusClass = 'status-fin';
      } else if (g.period && Number(g.period) > 0) {
        // Avoid "Q2 Q2" / "Q4 Q4" duplication: some feeds already include "Q4 ..." in g.clock.
        const clock = (g.clock != null) ? String(g.clock).trim() : '';
        const clockHasQuarter = /^q\s*\d+/i.test(clock);
        if (clockHasQuarter) {
          statusText = clock;
        } else {
          statusText = `Q${g.period}` + (clock ? ` ${clock}` : '');
        }
      } else {
        // Scheduled (not live / not final): show tip time.
        // Backend contract (after seeder fix):
        // - status is a label (Scheduled / Final / In Progress)
        // - game_date is a DATETIME with the scheduled tip time (UTC)
        function parseGameDate(raw) {
          if (!raw) return null;
          if (raw instanceof Date) return raw;
          const s = String(raw).trim();
          // Date-only YYYY-MM-DD (treat as local date with midnight time)
          if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return new Date(s + 'T00:00:00');
          // MySQL DATETIME "YYYY-MM-DD HH:MM:SS" (treat as UTC; MySQL DATETIME has no TZ)
          if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:\.\d+)?$/.test(s)) return new Date(s.replace(' ', 'T') + 'Z');
          // ISO without timezone (treat as UTC)
          if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?$/.test(s)) return new Date(s + 'Z');
          return new Date(s);
        }

  const parsed = parseGameDate(g.game_date || g.started_at);

        // Only show hour/minute (no seconds) to keep it compact.
        const formatted = parsed && !isNaN(parsed.getTime())
          ? new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(parsed)
          : '';

        // Debug to confirm which field we're using
        try { console.debug('game time raw:', (g.game_date || g.started_at), 'status:', g.status, 'display:', formatted); } catch (e) {}
        statusText = formatted || 'TBD';
      }

  // logo img path (try team-name.svg first; fallback to abbrev circle if image not found)
  const homeLogoPath = `/img/${sanitizeTeamForLogo(homeName)}.svg`;
  const awayLogoPath = `/img/${sanitizeTeamForLogo(awayName)}.svg`;

      return `
        <li class="list-group-item bg-transparent p-2">
          <div class="game-card" data-game-id="${escapeHtml(g.id)}" data-away-name="${awayNameEsc}" data-home-name="${homeNameEsc}" data-away-abbr="${awayAbbrEsc}" data-home-abbr="${homeAbbrEsc}" data-status="${escapeHtml(g.status || '')}">
            <div class="team-block text-start">
              <div class="team-logo" title="${awayNameEsc}" aria-label="${awayNameEsc}" role="button" tabindex="0">
                <img src="${awayLogoPath}" alt="${awayNameEsc}" onload="this.nextElementSibling.style.display='none'" onerror="this.style.display='none'">
                <span class="team-abbr">${awayAbbrEsc}</span>
              </div>
            </div>

            <div class="score-block">
              <div class="score-main">${hasScore ? `${visitorScore} - ${homeScore}` : 'TBD'}</div>
              <div class="mt-1"><span class="status-badge ${statusClass}">${statusText}</span></div>
            </div>

            <div class="team-block text-end">
              <div class="team-logo" title="${homeNameEsc}" aria-label="${homeNameEsc}" role="button" tabindex="0">
                <img src="${homeLogoPath}" alt="${homeNameEsc}" onload="this.nextElementSibling.style.display='none'" onerror="this.style.display='none'">
                <span class="team-abbr">${homeAbbrEsc}</span>
              </div>
            </div>
          </div>
        </li>
      `;
    });

  // Insert list items directly into the UL which already has games-strip styling
  document.getElementById('games-list').innerHTML = nodes.join('');

  // Set default board mode based on whether games have started
  setDefaultBoardMode(games);
  
  // Update toggle states to reflect the new default mode and refresh data
  boards.forEach(async b => {
    const seasonToggle = document.getElementById(`${b.key}-toggle`);
    const modeLabel = document.querySelector(`[data-mode-label="${b.key}"]`);
    
    if (seasonToggle && !seasonToggle.hasAttribute('data-user-set')) {
      const wasChanged = seasonToggle.checked !== (boardMode[b.key] === "season");
      seasonToggle.checked = boardMode[b.key] === "season";
      
      // If the mode changed from the default, refresh only this board (no flicker)
      if (wasChanged) {
        await refreshSingleBoard(b.key);
      }
    }
    if (modeLabel) {
      modeLabel.textContent = boardMode[b.key] === "season" ? "SEASON" : "TODAY";
    }
  });

  // If a game is selected and the compare row is open, re-render it using fresh data.
  // This keeps the compare row stable even though we re-create the game cards each refresh.
  if (selectedGameId && lineupCompareRow && lineupCompareRow.style.display !== 'none') {
    const match = (games || []).find((g) => String(g.id) === String(selectedGameId));
    if (!match) {
      selectedGameId = null;
      lineupCompareRow.classList.remove('lineup-expanding');
      lineupCompareRow.classList.add('lineup-collapsing');
      setTimeout(() => {
        lineupCompareRow.style.display = 'none';
        lineupCompareRow.classList.remove('lineup-collapsing');
        lineupCompareBody.innerHTML = '';
      }, 800);
    } else {
      const homeAbbr = match.home_abbrev || (match.home_name || 'Home').split(' ').slice(-1)[0];
      const awayAbbr = match.away_abbrev || (match.away_name || 'Away').split(' ').slice(-1)[0];
      const homeName = match.home_name || homeAbbr;
      const awayName = match.away_name || awayAbbr;

      renderLineupCompare({
        id: String(match.id),
        awayName,
        homeName,
        awayAbbr,
        homeAbbr,
      });
    }
  }
  } catch (e) {
    console.error(e);
    document.getElementById('games-list').innerHTML = `<li class="list-group-item bg-transparent muted">Error loading games</li>`;
    if (!isInitialLoadComplete) {
      completeInitialRequest();
    }
  } finally {
    if (!isInitialLoadComplete) {
      completeInitialRequest();
    }
  }
}

// Initialize loading state
showAppLoading();

refreshGames(true); // Show loading on initial page load
setInterval(refreshGames, 30_000); // Auto-refresh every 30s without loading spinner

// Current Games day navigation buttons
document.getElementById('games-day-prev')?.addEventListener('click', async () => {
  gamesDayOffset = Math.min(0, (Number.isFinite(gamesDayOffset) ? gamesDayOffset : 0) - 1);
  localStorage.setItem(GAMES_DAY_OFFSET_STORAGE_KEY, String(gamesDayOffset));
  refreshGames(true); // Show loading when user navigates
  await refresh();
});

document.getElementById('games-day-next')?.addEventListener('click', async () => {
  gamesDayOffset = Math.min(0, (Number.isFinite(gamesDayOffset) ? gamesDayOffset : 0) + 1);
  localStorage.setItem(GAMES_DAY_OFFSET_STORAGE_KEY, String(gamesDayOffset));
  refreshGames(true); // Show loading when user navigates
  await refresh();
});

// Lineup compare row (full-width between Current Games and boards)
const lineupCompareRow = document.getElementById('lineup-compare-row');
const lineupCompareTitle = document.getElementById('lineup-compare-title');
const lineupCompareBody = document.getElementById('lineup-compare-body');

document.getElementById('lineup-compare-close')?.addEventListener('click', () => {
  selectedGameId = null;
  lineupCompareRow.classList.remove('lineup-expanding');
  lineupCompareRow.classList.add('lineup-collapsing');
  setTimeout(() => {
    lineupCompareRow.style.display = 'none';
    lineupCompareRow.classList.remove('lineup-collapsing');
    lineupCompareBody.innerHTML = '';
  }, 800);
});

// Fetch and display play-by-play data with quarter tabs
// Global polling interval variable
let playsPollingInterval = null;

async function updatePlaysContent(nbaGameId, body, tabsContainer, modalLabel) {
  try {
    const res = await fetch(`/api/plays/${encodeURIComponent(nbaGameId)}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    
    const data = await res.json();
    const quarters = data.quarters || {};
    const gameStatus = data.status || '';
    
    // Update modal title with live score if label element provided
    if (modalLabel) {
      const awayScore = data.away_score || 0;
      const homeScore = data.home_score || 0;
      const awayAbbr = data.away_abbrev || 'AWAY';
      const homeAbbr = data.home_abbrev || 'HOME';
      modalLabel.textContent = `${awayAbbr} ${awayScore} - ${homeScore} ${homeAbbr}`;
    }
    
    // Update team info in modal header
    document.getElementById('playsVisitorLogo').src = data.away_logo || '';
    document.getElementById('playsVisitorCity').textContent = data.away_city || 'Away';
    document.getElementById('playsVisitorName').textContent = data.away_name || 'Team';
    document.getElementById('playsHomeLogo').src = data.home_logo || '';
    document.getElementById('playsHomeCity').textContent = data.home_city || 'Home';
    document.getElementById('playsHomeName').textContent = data.home_name || 'Team';
    
    // Determine if game is in progress (not Final/ended)
    const isGameInProgress = !['Final', 'Final/OT'].includes(gameStatus);
    
    // Determine current quarter to select by default
    let defaultQuarter = '1st Quarter';
    if (gameStatus.includes('1st Qtr')) defaultQuarter = '1st Quarter';
    else if (gameStatus.includes('2nd Qtr')) defaultQuarter = '2nd Quarter';
    else if (gameStatus.includes('3rd Qtr')) defaultQuarter = '3rd Quarter';
    else if (gameStatus.includes('4th Qtr')) defaultQuarter = '4th Quarter';
    else if (gameStatus.includes('OT')) defaultQuarter = 'Overtime';
    
    if (!Object.keys(quarters).length) {
      body.innerHTML = '<div class="text-center muted">No plays available for this game</div>';
      return;
    }
    
    // Define quarter order
    const quarterOrder = ['1st Quarter', '2nd Quarter', '3rd Quarter', '4th Quarter', '5th Quarter'];
    const displayedQuarters = Object.keys(quarters).sort((a, b) => {
      const aIdx = quarterOrder.indexOf(a);
      const bIdx = quarterOrder.indexOf(b);
      if (aIdx === -1 && bIdx === -1) return a.localeCompare(b);
      if (aIdx === -1) return 1;
      if (bIdx === -1) return -1;
      return aIdx - bIdx;
    });
    
    // Build all quarters HTML (hidden by default) - two column layout with center timeline
    let allQuartersHtml = '<div class="plays-container">';
    
    for (const quarterName of displayedQuarters) {
      let plays = quarters[quarterName] || [];
      
      // Reverse play order if game is in progress (show earliest plays at top)
      if (isGameInProgress) {
        plays = [...plays].reverse();
      }
      
      // Create a list of plays with team assignment
      const playsWithTeam = [];
      
      for (const play of plays) {
        const text = String(play.text || '').trim().toLowerCase();
        
        // Skip plays with empty or no meaningful text
        if (!text) continue;
        
        let team = 'center'; // default for neutral plays
        
        // Check for team rebounds or turnovers 
        if (text.includes('team rebound') || text.includes('team turnover') || text.includes('team offensive rebound')) {
          team = (play.away_score || 0) <= (play.home_score || 0) ? 'visitor' : 'home';
        }
        // Check if play data has explicit team indicator (with type coercion for team_id)
        else if (play.team_id && data.away_team_id && Number(play.team_id) === Number(data.away_team_id)) {
          team = 'visitor';
        } else if (play.team_id && data.home_team_id && Number(play.team_id) === Number(data.home_team_id)) {
          team = 'home';
        }
        
        playsWithTeam.push({ ...play, team });
      }
      
      allQuartersHtml += `<div class="quarter-section" data-quarter="${escapeHtml(quarterName)}" style="display: none;">
        <div class="quarter-title">${escapeHtml(quarterName)}</div>
        <div class="plays-timeline">`;
      
      // Render all plays in a centered timeline layout
      for (const play of playsWithTeam) {
        const isScoring = Boolean(play.scoring_play);
        const scoreStr = `${play.away_score} - ${play.home_score}`;
        const classes = `play-row ${play.team} ${isScoring ? 'scoring' : ''}`;
        
        allQuartersHtml += `<div class="${classes}">
          <div class="play-left">
            ${play.team === 'visitor' ? `
              <div class="play-item">
                <div class="play-type">${escapeHtml(play.type)}</div>
                <div class="play-text">${escapeHtml(play.text)}</div>
              </div>
            ` : ''}
          </div>
          <div class="play-center">
            ${play.team === 'center' ? `
              <div class="play-item">
                <div class="play-type">${escapeHtml(play.type)}</div>
                <div class="play-text">${escapeHtml(play.text)}</div>
              </div>
            ` : ''}
            <div class="play-time">${escapeHtml(play.clock)}</div>
            <div class="play-score">${escapeHtml(scoreStr)}</div>
          </div>
          <div class="play-right">
            ${play.team === 'home' ? `
              <div class="play-item">
                <div class="play-type">${escapeHtml(play.type)}</div>
                <div class="play-text">${escapeHtml(play.text)}</div>
              </div>
            ` : ''}
          </div>
        </div>`;
      }
      
      allQuartersHtml += `</div></div>`;
    }
    
    allQuartersHtml += '</div>';
    body.innerHTML = allQuartersHtml;
    
    // Only rebuild tabs if they don't exist
    if (tabsContainer.innerHTML === '') {
      let tabsHtml = '';
      displayedQuarters.forEach((quarterName) => {
        const isActive = quarterName === defaultQuarter;
        const shortName = quarterName.replace(' Quarter', '').replace(' ', '');
        tabsHtml += `<li class="nav-item" role="presentation">
          <button class="nav-link ${isActive ? 'active' : ''}" 
                  type="button" 
                  data-quarter="${escapeHtml(quarterName)}"
                  style="cursor: pointer;">
            ${escapeHtml(shortName)}
          </button>
        </li>`;
      });
      
      tabsContainer.innerHTML = tabsHtml;
      
      // Attach tab click handlers
      tabsContainer.querySelectorAll('.nav-link').forEach(tab => {
        tab.addEventListener('click', (e) => {
          e.preventDefault();
          const quarterName = tab.dataset.quarter;
          
          // Hide all quarters
          body.querySelectorAll('[data-quarter]').forEach(q => {
            q.style.display = 'none';
          });
          
          // Show selected quarter
          const selected = body.querySelector(`[data-quarter="${quarterName}"]`);
          if (selected) {
            selected.style.display = 'block';
          }
          
          // Update active tab
          tabsContainer.querySelectorAll('.nav-link').forEach(t => {
            t.classList.remove('active');
          });
          tab.classList.add('active');
        });
      });
    }
    
    // Show default quarter
    const defaultQuarterElement = body.querySelector(`[data-quarter="${defaultQuarter}"]`);
    if (defaultQuarterElement) {
      defaultQuarterElement.style.display = 'block';
    }
    
    // Update active tab
    tabsContainer.querySelectorAll('.nav-link').forEach(t => {
      t.classList.remove('active');
    });
    const activeTab = tabsContainer.querySelector(`button[data-quarter="${defaultQuarter}"]`);
    if (activeTab) {
      activeTab.classList.add('active');
    }
  } catch (err) {
    console.error('Error updating plays:', err);
  }
}

async function showPlaysModal(nbaGameId) {
  ensureModalLoaded('playsModal');
  
  const modal = new bootstrap.Modal(document.getElementById('playsModal'));
  const body = document.getElementById('playsContent');
  const tabsContainer = document.getElementById('playsQuarterTabs');
  const modalElement = document.getElementById('playsModal');
  const modalLabel = document.getElementById('playsModalLabel');
  
  try {
    body.innerHTML = '<div class="text-center muted">Loading plays...</div>';
    tabsContainer.innerHTML = '';
    
    // Initial load
    await updatePlaysContent(nbaGameId, body, tabsContainer, modalLabel);
    
    // Also refresh the game card scores at the top
    refreshGames();
    
    // Clear any existing polling interval
    if (playsPollingInterval) {
      clearInterval(playsPollingInterval);
    }
    
    // Set up polling every 5 seconds while modal is open
    playsPollingInterval = setInterval(async () => {
      await updatePlaysContent(nbaGameId, body, tabsContainer, modalLabel);
      // Also refresh game cards every 5 seconds
      refreshGames();
    }, 5000);
    
    // Clear polling when modal is hidden
    const hideHandler = () => {
      if (playsPollingInterval) {
        clearInterval(playsPollingInterval);
        playsPollingInterval = null;
      }
      modalElement.removeEventListener('hidden.bs.modal', hideHandler);
    };
    
    modalElement.addEventListener('hidden.bs.modal', hideHandler);
    
    modal.show();
  } catch (err) {
    console.error('Error fetching plays:', err);
    body.innerHTML = `<div class="text-center text-danger"><small>${escapeHtml(err.message)}</small></div>`;
    tabsContainer.innerHTML = '';
    modal.show();
  }
}

// Event delegation: mouseover game card shows plays modal
document.getElementById('games-list')?.addEventListener('mouseenter', (e) => {
  const card = e.target?.closest?.('.game-card');
  if (!card) return;
  
  const gameId = String(card.dataset.gameId || '').trim();
  if (!gameId) return;
  
  // Show plays on mouseover (optional: comment out if you prefer click)
  // Uncomment below if you want mouseover to trigger modal
  // showPlaysModal(gameId);
}, true);

// Event delegation: mouseover team logo shows lineups
document.getElementById('games-list')?.addEventListener('mouseover', (e) => {
  const teamLogo = e.target?.closest?.('.team-logo');
  if (!teamLogo) return;

  const card = teamLogo.closest('.game-card');
  if (!card) return;

  const game = {
    id: String(card.dataset.gameId || ''),
    awayName: String(card.dataset.awayName || ''),
    homeName: String(card.dataset.homeName || ''),
    awayAbbr: String(card.dataset.awayAbbr || ''),
    homeAbbr: String(card.dataset.homeAbbr || ''),
    status: String(card.dataset.status || ''),
  };

  const isSameGame = selectedGameId && selectedGameId === game.id;
  const isAlreadyOpen = lineupCompareRow.style.display !== 'none';

  // Only show if not already showing this game's lineup
  if (!isSameGame || !isAlreadyOpen) {
    selectedGameId = game.id;
    renderLineupCompare(game);
  }
});

// Event delegation: click any team logo inside the game card selects that game
document.getElementById('games-list')?.addEventListener('click', (e) => {
  const card = e.target?.closest?.('.game-card');
  if (!card) return;

  const game = {
    id: String(card.dataset.gameId || ''),
    awayName: String(card.dataset.awayName || ''),
    homeName: String(card.dataset.homeName || ''),
    awayAbbr: String(card.dataset.awayAbbr || ''),
    homeAbbr: String(card.dataset.homeAbbr || ''),
    status: String(card.dataset.status || ''),
  };

  // Check if clicked on team logo (for lineups) or elsewhere (for plays)
  const clickedElement = e.target;
  const isTeamLogo = clickedElement?.closest?.('.team-logo') !== null;
  
  if (isTeamLogo) {
    const isAlreadyOpen = lineupCompareRow.style.display !== 'none';
    const isSameGame = selectedGameId && selectedGameId === game.id;
    
    // Toggle if clicking the same game's logo again
    if (isSameGame && isAlreadyOpen) {
      selectedGameId = null;
      lineupCompareRow.classList.remove('lineup-expanding');
      lineupCompareRow.classList.add('lineup-collapsing');
      setTimeout(() => {
        lineupCompareRow.style.display = 'none';
        lineupCompareRow.classList.remove('lineup-collapsing');
      }, 800);
      lineupCompareBody.innerHTML = '';
      return;
    }

    selectedGameId = game.id;
    renderLineupCompare(game);
  } else {
    // Click anywhere else on the card shows plays
    // Only allow plays modal for games that have started (not Scheduled)
    if (game.status && game.status.toLowerCase().includes('scheduled')) {
      return; // Prevent modal from opening for scheduled games
    }
    showPlaysModal(game.id);
  }
});

async function fetchGameLineups(nbaGameId) {
  const id = String(nbaGameId || '').trim();
  if (!id) throw new Error('Missing game id');
  const cached = lineupCacheByGameId.get(id);
  // Cache is for UX snappiness, not correctness.
  // Standings can be seeded later than lineups, so refresh periodically.
  const cacheTtlMs = 30_000;
  const cachedAt = cached?.__cachedAt != null ? Number(cached.__cachedAt) : null;
  const isExpired = cachedAt == null || !Number.isFinite(cachedAt) || (Date.now() - cachedAt) > cacheTtlMs;

  // If cached data predates new fields (e.g., home_record/road_record), refetch.
  const isSchemaStale = cached && (
    (cached?.home && !('home_record' in cached.home)) ||
    (cached?.away && !('home_record' in cached.away))
  );

  if (cached && !isExpired && !isSchemaStale) return cached;
  const res = await fetch(`/api/games/${encodeURIComponent(id)}/lineups`);
  if (!res.ok) {
    const txt = await res.text().catch(() => '');
    throw new Error(txt || `HTTP ${res.status}`);
  }
  const json = await res.json();
  // Mark when this payload was fetched so we can refresh it later.
  try { json.__cachedAt = Date.now(); } catch {}
  lineupCacheByGameId.set(id, json);
  return json;
}

function renderLineupCompare(game, lineupData) {
  if (!game) return;

  const awayLogoPath = `/img/${sanitizeTeamForLogo(game.awayName)}.svg`;
  const homeLogoPath = `/img/${sanitizeTeamForLogo(game.homeName)}.svg`;

  const titleSuffix = lineupData?.predicted ? 'Predicted Lineups' : 'Starting Lineups';
  lineupCompareTitle.textContent = `${game.awayAbbr || 'AWAY'} @ ${game.homeAbbr || 'HOME'} – ${titleSuffix}`;
  lineupCompareBody.innerHTML = `
    <div class="row g-3">
      <div class="col-12 col-lg-6">
        ${renderTeamLineupSection({
          name: lineupData?.away?.name || game.awayName,
          city: lineupData?.away?.city || null,
          abbr: game.awayAbbr,
          logoPath: awayLogoPath,
          wins: lineupData?.away?.wins ?? null,
          losses: lineupData?.away?.losses ?? null,
          home_record: lineupData?.away?.home_record ?? null,
          road_record: lineupData?.away?.road_record ?? null,
          division_rank: lineupData?.away?.division_rank ?? null,
          conference_rank: lineupData?.away?.conference_rank ?? null,
          starters: lineupData?.away?.starters || null,
          bench: lineupData?.away?.bench || null,
          injuries: lineupData?.away?.injuries || null,
          loading: Boolean(lineupData?.loading),
          message: lineupData?.message || null,
          predicted: Boolean(lineupData?.predicted),
        })}
      </div>
      <div class="col-12 col-lg-6">
        ${renderTeamLineupSection({
          name: lineupData?.home?.name || game.homeName,
          city: lineupData?.home?.city || null,
          abbr: game.homeAbbr,
          logoPath: homeLogoPath,
          wins: lineupData?.home?.wins ?? null,
          losses: lineupData?.home?.losses ?? null,
          home_record: lineupData?.home?.home_record ?? null,
          road_record: lineupData?.home?.road_record ?? null,
          division_rank: lineupData?.home?.division_rank ?? null,
          conference_rank: lineupData?.home?.conference_rank ?? null,
          starters: lineupData?.home?.starters || null,
          bench: lineupData?.home?.bench || null,
          injuries: lineupData?.home?.injuries || null,
          loading: Boolean(lineupData?.loading),
          message: lineupData?.message || null,
          predicted: Boolean(lineupData?.predicted),
        })}
      </div>
        })}
      </div>
    </div>
  `;
  
  // Only animate if the panel is currently hidden
  const wasHidden = lineupCompareRow.style.display === 'none';
  lineupCompareRow.style.display = '';
  lineupCompareRow.classList.remove('lineup-collapsing');
  
  if (wasHidden) {
    lineupCompareRow.classList.add('lineup-expanding');
    // Remove animation class after animation completes
    setTimeout(() => {
      lineupCompareRow.classList.remove('lineup-expanding');
    }, 500);
  }

  // Add event listeners to player headers for box score modal and fetch stats
  const playerCards = lineupCompareBody.querySelectorAll('.lineup-player-card[data-player-id]');
  playerCards.forEach(playerCard => {
    const statsDiv = playerCard.querySelector('.lineup-player-stats');
    
    // Add click listener to entire player card for player profile modal
    if (playerCard.classList.contains('clickable')) {
      playerCard.addEventListener('click', async (e) => {
        e.preventDefault();
        // Get data from the card's data attributes to avoid closure issues
        const playerId = playerCard.dataset.playerId;
        const playerName = playerCard.dataset.playerName;
        if (!playerId) return;
        
        try {
          await showPlayerProfileModal(playerId, playerName);
        } catch (err) {
          console.error('Error opening player profile:', err);
        }
      });
    }
    
    // Fetch box score stats for this player (only for live/final games)
    if (selectedGameId && statsDiv) {
      const playerId = playerCard.dataset.playerId;
      const teamAbbr = playerCard.dataset.teamAbbr;
      const isPredicted = Boolean(lineupData?.predicted);
      
      (async () => {
        try {
          if (isPredicted) {
            // For predicted lineups, fetch season averages
            const currentSeason = new Date().getMonth() >= 6 ? new Date().getFullYear() : new Date().getFullYear() - 1;
            const res = await fetch(`/api/players/${encodeURIComponent(playerId)}/stats?season=${currentSeason}`);
            if (!res.ok) return;
            const data = await res.json();
            const stats = data?.stats;
            
            if (stats) {
              const pts = stats.pts_average != null ? Number(stats.pts_average).toFixed(1) : '0.0';
              const fg3m = stats.fg3m_average != null ? Number(stats.fg3m_average).toFixed(1) : '0.0';
              const reb = stats.reb_average != null ? Number(stats.reb_average).toFixed(1) : '0.0';
              const ast = stats.ast_average != null ? Number(stats.ast_average).toFixed(1) : '0.0';
              const stl = stats.stl_average != null ? Number(stats.stl_average).toFixed(1) : '0.0';
              const blk = stats.blk_average != null ? Number(stats.blk_average).toFixed(1) : '0.0';
              const min = stats.minutes_average != null ? Number(stats.minutes_average).toFixed(1) : '0.0';
              
              statsDiv.innerHTML = `
                <div class="stat-line"><span class="stat-label">PTS:</span> <span class="stat-value">${pts}</span></div>
                <div class="stat-line"><span class="stat-label">3-POINT:</span> <span class="stat-value">${fg3m}</span></div>
                <div class="stat-line"><span class="stat-label">REB:</span> <span class="stat-value">${reb}</span></div>
                <div class="stat-line"><span class="stat-label">ASSIST:</span> <span class="stat-value">${ast}</span></div>
                <div class="stat-line"><span class="stat-label">STEALS:</span> <span class="stat-value">${stl}</span></div>
                <div class="stat-line"><span class="stat-label">BLOCKS:</span> <span class="stat-value">${blk}</span></div>
                <div class="stat-line"><span class="stat-label">MINUTES:</span> <span class="stat-value">${min}'</span></div>
              `;
            }
          } else {
            // For live/completed games, fetch actual box score
            const res = await fetch(`/api/games/${encodeURIComponent(selectedGameId)}/player/${encodeURIComponent(playerId)}/box-score`);
            if (!res.ok) return;
            const data = await res.json();
            const stats = data?.stats;
            
            if (stats) {
              const pts = Number.isFinite(Number(stats.pts)) ? Number(stats.pts) : 0;
              const fgm = Number.isFinite(Number(stats.fgm)) ? Number(stats.fgm) : 0;
              const fga = Number.isFinite(Number(stats.fga)) ? Number(stats.fga) : 0;
              const fg3m = Number.isFinite(Number(stats.fg3m)) ? Number(stats.fg3m) : 0;
              const fg3a = Number.isFinite(Number(stats.fg3a)) ? Number(stats.fg3a) : 0;
              const reb = Number.isFinite(Number(stats.reb)) ? Number(stats.reb) : 0;
              const ast = Number.isFinite(Number(stats.ast)) ? Number(stats.ast) : 0;
              const stl = Number.isFinite(Number(stats.stl)) ? Number(stats.stl) : 0;
              const blk = Number.isFinite(Number(stats.blk)) ? Number(stats.blk) : 0;
              const min = stats.min || '–';
              
              statsDiv.innerHTML = `
                <div class="stat-line"><span class="stat-label">PTS:</span> <span class="stat-value">${pts} | ${fgm}/${fga}</span></div>
                <div class="stat-line"><span class="stat-label">3-POINT:</span> <span class="stat-value">${fg3m}/${fg3a}</span></div>
                <div class="stat-line"><span class="stat-label">REB:</span> <span class="stat-value">${reb}</span></div>
                <div class="stat-line"><span class="stat-label">ASSIST:</span> <span class="stat-value">${ast}</span></div>
                <div class="stat-line"><span class="stat-label">STEALS:</span> <span class="stat-value">${stl}</span></div>
                <div class="stat-line"><span class="stat-label">BLOCKS:</span> <span class="stat-value">${blk}</span></div>
                <div class="stat-line"><span class="stat-label">MINUTES:</span> <span class="stat-value">${min}'</span></div>
              `;
            }
          }
        } catch (err) {
          // Silently fail if stats not available
        }
      })();
    }
  });

  // Fetch real starters from DB for any day (today or historical).
  // If caller provided lineupData (loading / message / actual), do not auto-fetch again.
  // Fetching is only kicked off for the initial open (lineupData is undefined/null).
  if (lineupData != null) return;

  const token = ++selectedGameFetchToken;
  const gameId = String(game.id || '');
  const cached = lineupCacheByGameId.get(gameId);
  if (cached && cached?.home && cached?.away) {
    renderLineupCompare(game, cached);
    return;
  }

  // Show loading state while fetching.
  renderLineupCompare(game, { loading: true, message: 'Loading lineups…', home: { starters: [] }, away: { starters: [] } });

  fetchGameLineups(gameId)
    .then((data) => {
      if (token !== selectedGameFetchToken) return; // stale
      // If no starters, show a helpful message (likely missing seeding).
      const homeStarters = data?.home?.starters || [];
      const awayStarters = data?.away?.starters || [];
      if (!homeStarters.length && !awayStarters.length) {
        // For scheduled games, try to fetch predicted lineups instead
        if (game.status && game.status.toLowerCase().includes('scheduled')) {
          const homeTeamId = data?.home?.teamId;
          const awayTeamId = data?.away?.teamId;
          
          if (homeTeamId && awayTeamId) {
            // Fetch predicted lineups for both teams
            Promise.all([
              fetch(`/api/team/${homeTeamId}/predicted-lineup`).then(r => r.json()).catch(() => ({ starters: [] })),
              fetch(`/api/team/${awayTeamId}/predicted-lineup`).then(r => r.json()).catch(() => ({ starters: [] }))
            ]).then(([homePredict, awayPredict]) => {
              if (token !== selectedGameFetchToken) return;
              
              // Check if we got real predictions or empty data
              const hasHomePredictions = homePredict.starters && homePredict.starters.length > 0;
              const hasAwayPredictions = awayPredict.starters && awayPredict.starters.length > 0;
              
              if (!hasHomePredictions && !hasAwayPredictions) {
                // No predictions available - show appropriate message
                renderLineupCompare(game, {
                  ...data,
                  message: 'Predicted lineups unavailable. Historical game data needed for predictions.'
                });
                return;
              }
              
              const mergedData = {
                ...data,
                home: { ...data.home, starters: homePredict.starters || [] },
                away: { ...data.away, starters: awayPredict.starters || [] },
                predicted: true
              };
              // Update cache with predicted lineups so they persist across refreshes
              try { mergedData.__cachedAt = Date.now(); } catch {}
              lineupCacheByGameId.set(gameId, mergedData);
              renderLineupCompare(game, mergedData);
            }).catch(() => {
              if (token !== selectedGameFetchToken) return;
              renderLineupCompare(game, {
                ...data,
                message: 'Predicted lineups unavailable. Run seed:season-games and seed:season-lineups to enable predictions.',
              });
            });
            return;
          }
        }
        
        renderLineupCompare(game, {
          ...data,
          message: 'No stored lineups found yet (run seed:lineups periodically).',
        });
        return;
      }
      renderLineupCompare(game, data);
    })
    .catch((err) => {
      if (token !== selectedGameFetchToken) return;
      renderLineupCompare(game, { message: `Error loading lineups: ${String(err?.message || err)}` });
    });
}

async function showBoxScoreModal(gameId, playerId, playerName, teamAbbr) {
  ensureModalLoaded('boxScoreModal');
  
  const modal = new bootstrap.Modal(document.getElementById('boxScoreModal'));
  const modalLabel = document.getElementById('boxScoreModalLabel');
  const modalBody = document.getElementById('boxScoreModalBody');
  
  modalLabel.textContent = `${playerName} - Box Score`;
  modalBody.innerHTML = '<div class="text-center"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading box score…</div>';
  modal.show();
  
  try {
    const res = await fetch(`/api/games/${encodeURIComponent(gameId)}/player/${encodeURIComponent(playerId)}/box-score`);
    if (!res.ok) {
      const text = await res.text().catch(() => '');
      throw new Error(text || `HTTP ${res.status}`);
    }
    const data = await res.json();
    
    if (!data || !data.stats) {
      modalBody.innerHTML = '<div class="muted">No box score data available for this game.</div>';
      return;
    }
    
    const stats = data.stats;
    const html = `
      <div class="container-fluid">
        <div class="row mb-3">
          <div class="col-6"><strong>${playerName}</strong></div>
          <div class="col-6 text-end"><strong>${teamAbbr}</strong></div>
        </div>
        <table class="table table-sm table-dark" style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,.08);">
          <tbody>
            <tr>
              <td>Points</td>
              <td class="text-end fw-semibold">${stats.pts || 0}</td>
            </tr>
            <tr>
              <td>Rebounds</td>
              <td class="text-end">${stats.reb || 0}</td>
            </tr>
            <tr>
              <td>Assists</td>
              <td class="text-end">${stats.ast || 0}</td>
            </tr>
            <tr>
              <td>Field Goals</td>
              <td class="text-end">${stats.fgm || 0}/${stats.fga || 0}</td>
            </tr>
            <tr>
              <td>3-Point FG</td>
              <td class="text-end">${stats.fg3m || 0}/${stats.fg3a || 0}</td>
            </tr>
            <tr>
              <td>Free Throws</td>
              <td class="text-end">${stats.ftm || 0}/${stats.fta || 0}</td>
            </tr>
            <tr>
              <td>Steals</td>
              <td class="text-end">${stats.stl || 0}</td>
            </tr>
            <tr>
              <td>Blocks</td>
              <td class="text-end">${stats.blk || 0}</td>
            </tr>
            <tr>
              <td>Turnovers</td>
              <td class="text-end">${stats.turnover || 0}</td>
            </tr>
            <tr>
              <td>Fouls</td>
              <td class="text-end">${stats.pf || 0}</td>
            </tr>
            <tr>
              <td>Minutes</td>
              <td class="text-end">${stats.min || '–'}</td>
            </tr>
            ${stats.plus_minus != null ? `
            <tr style="border-top: 1px solid rgba(255,255,255,.08);">
              <td>+/−</td>
              <td class="text-end fw-semibold" style="color: ${stats.plus_minus >= 0 ? '#10b981' : '#ef4444'};">${stats.plus_minus > 0 ? '+' : ''}${stats.plus_minus}</td>
            </tr>
            ` : ''}
          </tbody>
        </table>
      </div>
    `;
    
    modalBody.innerHTML = html;
  } catch (err) {
    modalBody.innerHTML = `<div class="alert alert-warning" role="alert">Error loading box score: ${escapeHtml(String(err?.message || err))}</div>`;
  }
}

async function showPlayerProfileModal(playerId, playerName) {
  ensureModalLoaded('playerProfileModal');
  
  const modal = new bootstrap.Modal(document.getElementById('playerProfileModal'));
  const modalLabel = document.getElementById('playerProfileModalLabel');
  const profileInfo = document.getElementById('playerProfileInfo');
  const seasonSelector = document.getElementById('seasonSelector');
  const gameLogTable = document.getElementById('gameLogTable');
  
  modalLabel.textContent = `${playerName}`;
  profileInfo.innerHTML = '<div class="text-center"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading…</div>';
  gameLogTable.innerHTML = '<tr><td colspan="17" class="text-center muted">Loading...</td></tr>';
  modal.show();
  
  try {
    // Fetch player info
    const playerRes = await fetch(`/api/players/${encodeURIComponent(playerId)}`);
    if (playerRes.ok) {
      const playerData = await playerRes.json();
      const player = playerData.player || {};
      
      // Update title with team logo if available
      if (player.team?.abbrev) {
        // Use abbreviation mapping for accurate logo lookup
        const logoFilename = teamAbbrToLogo[player.team.abbrev] || sanitizeTeamForLogo(player.team.name || player.team.abbrev);
        const logoPath = `/img/${logoFilename}.svg`;
        modalLabel.innerHTML = `<img src="${logoPath}" alt="${escapeHtml(player.team.abbrev)}" style="height: 36px; margin-right: 8px; vertical-align: middle;" onerror="this.parentElement.removeChild(this)"> <span style="vertical-align: middle;">${escapeHtml(playerName)}</span>`;
      }
      
      profileInfo.innerHTML = `
        <div style="font-size: 0.9rem;">
          <div class="mb-2"><strong>Height:</strong> ${player.height || '—'}</div>
          <div class="mb-2"><strong>Weight:</strong> ${player.weight || '—'}</div>
          <div class="mb-2"><strong>Position:</strong> ${player.position || '—'}</div>
          <div class="mb-2"><strong>Jersey:</strong> ${player.jersey_number || '—'}</div>
          <div class="mb-2"><strong>Team:</strong> ${player.team?.abbrev || '—'}</div>
          <div class="mb-2"><strong>Country:</strong> ${player.country || '—'}</div>
          <div class="mb-2"><strong>Games Played (SEASON):</strong> <span id="gamesPlayedSeasonDisplay">—</span></div>
          <div class="mb-2"><strong>Games Played (TOTAL):</strong> <span id="gamesPlayedTotalDisplay">—</span></div>
          <div style="margin-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 0.75rem;">
            <div style="font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem;">Advanced Statistics (AVG)</div>
            <div class="mb-2"><strong>Minutes:</strong> <span id="minAvgDisplay">—</span></div>
            <div class="mb-2"><strong>Points:</strong> <span id="ptsAvgDisplay">—</span></div>
            <div class="mb-2"><strong>3-Point:</strong> <span id="fg3mAvgDisplay">—</span></div>
            <div class="mb-2"><strong>Rebounds:</strong> <span id="rebAvgDisplay">—</span></div>
            <div class="mb-2"><strong>Assists:</strong> <span id="astAvgDisplay">—</span></div>
            <div class="mb-2"><strong>Steals:</strong> <span id="stlAvgDisplay">—</span></div>
            <div class="mb-2"><strong>Blocks:</strong> <span id="blkAvgDisplay">—</span></div>
          </div>
        </div>
      `;
    }
    
    // Fetch available seasons for this player
    const seasonsRes = await fetch(`/api/players/${encodeURIComponent(playerId)}/seasons`);
    if (seasonsRes.ok) {
      const seasonsData = await seasonsRes.json();
      const seasons = seasonsData.seasons || [];
      
      seasonSelector.innerHTML = seasons.map(season => 
        `<option value="${season}">${season}</option>`
      ).join('');
      
      if (seasons.length > 0) {
        // Load game log for first season
        const firstSeason = seasons[0];
        await loadPlayerGameLog(playerId, firstSeason, gameLogTable);
        
        // Load minutes average for first season
        await loadPlayerMinutesAverage(playerId, firstSeason);
        
        // Load injuries for the player
        await loadPlayerInjuries(playerId);
      }
    } else {
      gameLogTable.innerHTML = '<tr><td colspan="17" class="muted text-center">No seasons found</td></tr>';
    }
    
    // Season selector change handler
    seasonSelector.addEventListener('change', async (e) => {
      gameLogTable.innerHTML = '<tr><td colspan="17" class="text-center muted">Loading...</td></tr>';
      await loadPlayerGameLog(playerId, e.target.value, gameLogTable);
      
      // Also load minutes average for selected season
      await loadPlayerMinutesAverage(playerId, e.target.value);
    });
    
  } catch (err) {
    profileInfo.innerHTML = `<div class="alert alert-warning" role="alert">Error loading profile: ${escapeHtml(String(err?.message || err))}</div>`;
    gameLogTable.innerHTML = `<tr><td colspan="17" class="alert alert-warning">Error loading game log</td></tr>`;
  }
}

async function loadPlayerGameLog(playerId, season, tableBody) {
  try {
    const res = await fetch(`/api/players/${encodeURIComponent(playerId)}/game-log?season=${encodeURIComponent(season)}`);
    if (!res.ok) {
      tableBody.innerHTML = '<tr><td colspan="17" class="muted text-center">No game log data available</td></tr>';
      return;
    }
    
    const data = await res.json();
    const games = data.games || [];
    
    if (games.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="17" class="muted text-center">No games in this season</td></tr>';
      return;
    }
    
    tableBody.innerHTML = games.map((game, idx) => `
      <tr class="game-log-row ${idx % 2 === 0 ? 'game-log-row-even' : 'game-log-row-odd'}" data-row-index="${idx}" style="font-size: 0.8rem;">
        <td>${game.date || '—'}</td>
        <td style="text-align: center;">${game.opponent || '—'}</td>
        <td style="text-align: center;"><span style="display: inline-block;">${game.score || '—'}</span></td>
        <td style="text-align: center;">${game.min || '—'}</td>
        <td style="text-align: center;">${game.pts || '—'}</td>
        <td style="text-align: center;">${game.reb || '—'}</td>
        <td style="text-align: center;">${game.ast || '—'}</td>
        <td style="text-align: center;">${game.stl || '—'}</td>
        <td style="text-align: center;">${game.blk || '—'}</td>
        <td style="text-align: center;">${game.turnover || '—'}</td>
        <td style="text-align: center;">${game.fgm || '—'}</td>
        <td style="text-align: center;">${game.fga || '—'}</td>
        <td style="text-align: center;">${game.ftm || '—'}</td>
        <td style="text-align: center;">${game.fta || '—'}</td>
        <td style="text-align: center;">${game.fg3m || '—'}</td>
        <td style="text-align: center;">${game.fg3a || '—'}</td>
        <td style="text-align: center;">${game.pf || '—'}</td>
      </tr>
    `).join('');
    
    // Add hover event listeners to game log rows
    const gameLogRows = tableBody.querySelectorAll('.game-log-row');
    gameLogRows.forEach(row => {
      const isEven = row.classList.contains('game-log-row-even');
      const originalBgColor = isEven ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.08)';
      
      row.addEventListener('mouseenter', () => {
        row.querySelectorAll('td').forEach(td => {
          td.style.backgroundColor = 'rgba(0,0,0,1)';
        });
      });
      
      row.addEventListener('mouseleave', () => {
        row.querySelectorAll('td').forEach(td => {
          td.style.backgroundColor = originalBgColor;
        });
      });
    });
    
    // Also set initial background colors on all cells
    tableBody.querySelectorAll('.game-log-row').forEach(row => {
      const isEven = row.classList.contains('game-log-row-even');
      const bgColor = isEven ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.08)';
      row.querySelectorAll('td').forEach(td => {
        td.style.backgroundColor = bgColor;
      });
    });
    
    
    
  } catch (err) {
    tableBody.innerHTML = `<tr><td colspan="17" class="muted text-center">Error loading game log</td></tr>`;
  }
}

async function loadPlayerMinutesAverage(playerId, season) {
  try {
    const res = await fetch(`/api/players/${encodeURIComponent(playerId)}/stats?season=${encodeURIComponent(season)}`);
    if (!res.ok) {
      document.getElementById('minAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('ptsAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('fg3mAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('rebAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('astAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('stlAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('blkAvgDisplay').textContent = 'ΓÇö';
      document.getElementById('gamesPlayedSeasonDisplay').textContent = 'ΓÇö';
      document.getElementById('gamesPlayedTotalDisplay').textContent = 'ΓÇö';
      return;
    }
    
    const data = await res.json();
    const stats = data.stats || {};
    
    // Format number to 1 decimal place
    const format = (val) => {
      if (val !== undefined && val !== null && Number.isFinite(val)) {
        return val.toFixed(1);
      }
      return 'ΓÇö';
    };
    
    // Format integer (for games_played)
    const formatInt = (val) => {
      if (val !== undefined && val !== null && Number.isFinite(val)) {
        return String(Math.round(val));
      }
      return 'ΓÇö';
    };
    
    document.getElementById('minAvgDisplay').textContent = format(stats.minutes_average);
    document.getElementById('ptsAvgDisplay').textContent = format(stats.pts_average);
    document.getElementById('fg3mAvgDisplay').textContent = format(stats.fg3m_average);
    document.getElementById('rebAvgDisplay').textContent = format(stats.reb_average);
    document.getElementById('astAvgDisplay').textContent = format(stats.ast_average);
    document.getElementById('stlAvgDisplay').textContent = format(stats.stl_average);
    document.getElementById('blkAvgDisplay').textContent = format(stats.blk_average);
    document.getElementById('gamesPlayedSeasonDisplay').textContent = formatInt(stats.games_played_season);
    document.getElementById('gamesPlayedTotalDisplay').textContent = formatInt(stats.games_played_total);
  } catch (err) {
    document.getElementById('minAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('ptsAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('fg3mAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('rebAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('astAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('stlAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('blkAvgDisplay').textContent = 'ΓÇö';
    document.getElementById('gamesPlayedSeasonDisplay').textContent = 'ΓÇö';
    document.getElementById('gamesPlayedTotalDisplay').textContent = 'ΓÇö';
  }
}

async function loadPlayerInjuries(playerId) {
  try {
    const res = await fetch(`/api/players/${encodeURIComponent(playerId)}/injuries`);
    if (!res.ok) {
      document.getElementById('playerInjuriesContainer').innerHTML = '<div class="text-center muted small">No injuries reported</div>';
      return;
    }
    
    const data = await res.json();
    const injuries = data.injuries || [];
    
    if (injuries.length === 0) {
      document.getElementById('playerInjuriesContainer').innerHTML = '<div class="text-center muted small">No injuries reported</div>';
      return;
    }
    
    const statusClass = (status) => {
      const s = String(status || '').toLowerCase();
      if (s === 'out') return 'out';
      if (s === 'dtd') return 'dtd';
      if (s === 'questionable') return 'questionable';
      if (s === 'doubtful') return 'doubtful';
      return 'dtd';
    };
    
    const injuriesHtml = injuries.map(injury => `
      <div style="margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04);">
        <div style="display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;">
          <div>
            <div style="font-weight: 500; color: rgba(255,255,255,0.9);">${escapeHtml(injury.status || 'Unknown')}</div>
            ${injury.description ? `<div style="font-size: 0.85rem; color: rgba(255,255,255,0.65);">${escapeHtml(injury.description)}</div>` : ''}
            ${injury.return_date ? `<div style="font-size: 0.8rem; color: rgba(255,255,255,0.55);">Return: ${escapeHtml(injury.return_date)}</div>` : ''}
          </div>
          <span class="injury-status ${statusClass(injury.status)}">${escapeHtml(injury.status || 'ΓÇö')}</span>
        </div>
      </div>
    `).join('');
    
    document.getElementById('playerInjuriesContainer').innerHTML = injuriesHtml;
  } catch (err) {
    document.getElementById('playerInjuriesContainer').innerHTML = '<div class="text-center muted small">Error loading injuries</div>';
  }
}

function renderTeamLineupSection(team) {
  const teamName = team?.name || 'Team';
  const teamAbbr = team?.abbr || '';
  const teamCity = team?.city ? String(team.city) : '';
  const displayTeamName = (teamCity ? `${teamCity} ${teamName}` : teamName).trim();
  const isPredicted = Boolean(team?.predicted);
  const opacityStyle = isPredicted ? ' style="opacity: 0.85;"' : '';

  const wins = Number(team?.wins);
  const losses = Number(team?.losses);
  const hasRecord = Number.isFinite(wins) && Number.isFinite(losses);
  const totalGames = hasRecord ? (wins + losses) : 0;
  const winPct = (hasRecord && totalGames > 0) ? (wins / totalGames) : null;
  const winPctText = (winPct != null)
    ? `${(winPct * 100).toFixed(1)}%`
    : '';
  const homeRecord = team?.home_record != null ? String(team.home_record).trim() : '';
  const roadRecord = team?.road_record != null ? String(team.road_record).trim() : '';
  const divisionRank = team?.division_rank != null ? Number(team.division_rank) : null;
  const conferenceRank = team?.conference_rank != null ? Number(team.conference_rank) : null;
  const hasHomeRoad = Boolean(homeRecord) || Boolean(roadRecord);

  const recordText = hasRecord
    ? `${wins} WINS - ${losses} LOSSES${winPctText ? ` - ${winPctText}` : ''}`
    : '';

  const splitText = hasHomeRoad || Number.isFinite(divisionRank) || Number.isFinite(conferenceRank)
    ? [
        recordText,
        homeRecord ? `HOME ${homeRecord}` : null,
        roadRecord ? `ROAD ${roadRecord}` : null,
        Number.isFinite(divisionRank) ? `DIVISION RANK ${divisionRank}` : null,
        Number.isFinite(conferenceRank) ? `CONFERENCE RANK ${conferenceRank}` : null,
      ].filter(Boolean).join(' | ')
    : recordText;

  const starters = Array.isArray(team?.starters) ? team.starters : null;
  const bench = Array.isArray(team?.bench) ? team.bench : null;
  const injuries = Array.isArray(team?.injuries) ? team.injuries : null;
  const loading = Boolean(team?.loading);
  const message = team?.message ? String(team.message) : null;

  let startersHtml = '';
  let benchHtml = '';
  
  if (loading) {
    startersHtml = `<div class="muted small">LoadingΓÇª</div>`;
  } else if (starters && starters.length) {
    // Render real starters from DB/API.
    startersHtml = starters.slice(0, 5).map((row) => {
      const name = row?.player?.full_name || `${row?.player?.first_name || ''} ${row?.player?.last_name || ''}`.trim() || 'Unknown';
      const pos = row?.position || '';
      const playerId = row?.player?.id || '';
      return `
        <div class="lineup-player-card clickable" data-player-id="${playerId}" data-player-name="${escapeHtml(name)}" data-team-abbr="${escapeHtml(teamAbbr)}">
          <div class="lineup-player-header">
            <span class="lineup-player-name">${escapeHtml(name)}</span>
            <span class="lineup-player-pos">${escapeHtml(pos || 'ΓÇö')}</span>
          </div>
          <div class="lineup-player-stats" data-player-id="${playerId}"></div>
        </div>
      `;
    }).join('');
    
    // Render bench players
    benchHtml = bench && bench.length ? bench.map((row) => {
      const name = row?.player?.full_name || `${row?.player?.first_name || ''} ${row?.player?.last_name || ''}`.trim() || 'Unknown';
      const pos = row?.position || '';
      const playerId = row?.player?.id || '';
      return `
        <div class="lineup-player-card clickable" data-player-id="${playerId}" data-player-name="${escapeHtml(name)}" data-team-abbr="${escapeHtml(teamAbbr)}" style="opacity: 0.75;">
          <div class="lineup-player-header">
            <span class="lineup-player-name">${escapeHtml(name)}</span>
            <span class="lineup-player-pos">${escapeHtml(pos || 'ΓÇö')}</span>
          </div>
          <div class="lineup-player-stats" data-player-id="${playerId}"></div>
        </div>
      `;
    }).join('') : '';
  } else {
    // Placeholder starting lineup data (for today / when no data exists yet)
    const positions = ['PG', 'SG', 'SF', 'PF', 'C'];
    const lineup = positions.map((pos, idx) => ({
      name: `${teamAbbr ? teamAbbr + ' ' : ''}Player ${idx + 1}`,
      position: pos,
    }));

    startersHtml = lineup.map(player => `
      <div class="lineup-player-card">
        <div class="lineup-player-header">
          <span class="lineup-player-name">${escapeHtml(player.name)}</span>
          <span class="lineup-player-pos">${escapeHtml(player.position)}</span>
        </div>
      </div>
    `).join('');
  }

  // Injuries (real if available; otherwise placeholder)
  const injured = (injuries && injuries.length)
    ? injuries.map((x) => {
        const fullNote = (x?.description || x?.return_date || 'ΓÇö');
        return {
          name: x?.player?.full_name || `${x?.player?.first_name || ''} ${x?.player?.last_name || ''}`.trim() || 'Unknown',
          status: x?.status || 'ΓÇö',
          note: truncateText(fullNote, 90),
          fullNote,
          returnDate: x?.return_date || null,
          team: x?.team?.abbrev || teamAbbr || '',
        };
      })
    : [
        { name: `${teamAbbr ? teamAbbr + ' ' : ''}Player 6`, status: 'OUT', note: 'Ankle', fullNote: 'Ankle', returnDate: null, team: teamAbbr || '' },
        { name: `${teamAbbr ? teamAbbr + ' ' : ''}Player 7`, status: 'DTD', note: 'Illness', fullNote: 'Illness', returnDate: null, team: teamAbbr || '' },
      ];

  const statusClass = (status) => {
    const s = String(status || '').toLowerCase();
    if (s === 'out') return 'out';
    if (s === 'dtd') return 'dtd';
    if (s === 'questionable') return 'questionable';
    if (s === 'doubtful') return 'doubtful';
    return 'dtd';
  };

  const injuredHtml = (injured.length ? injured : []).map(p => `
    <div class="injury-item clickable"
         data-injury="true"
         data-player="${escapeHtml(p.name)}"
         data-team="${escapeHtml(p.team || '')}"
         data-status="${escapeHtml(p.status || 'ΓÇö')}"
         data-return-date="${escapeHtml(p.returnDate || '')}"
         data-description="${escapeHtml(p.fullNote || p.note || '')}"
         title="Click for injury details">
      <div style="min-width:0;">
        <div class="injury-name">${escapeHtml(p.name)}</div>
        <div class="injury-note">${escapeHtml(p.note || 'ΓÇö')}</div>
      </div>
      <span class="injury-status ${statusClass(p.status)}">${escapeHtml(p.status || 'ΓÇö')}</span>
    </div>
  `).join('') || `<div class="muted small">None</div>`;

  const logoHtml = team?.logoPath ? `
    <span class="team-logo" aria-label="${escapeHtml(teamName)}" title="${escapeHtml(teamName)}" style="cursor:default; transform:none;">
      <img src="${team.logoPath}" alt="${escapeHtml(teamName)}" onload="this.nextElementSibling.style.display='none'" onerror="this.style.display='none'">
      <span class="team-abbr">${escapeHtml(teamAbbr || teamName)}</span>
    </span>
  ` : '';

  return `
    <div class="d-flex align-items-center gap-2 mb-2">
      ${logoHtml}
      <div class="lineup-header" style="flex:1 1 auto; margin:0; padding-bottom:0; border-bottom:none;">
        <div>${escapeHtml(displayTeamName)}</div>
        ${hasRecord ? `<div class="muted small">${escapeHtml(splitText)}</div>` : ''}
      </div>
    </div>

    ${message ? `<div class="muted small mb-2">${escapeHtml(message)}</div>` : ''}

    <div class="lineup-grid"${opacityStyle}>
      ${startersHtml}
    </div>

    ${benchHtml ? `
      <div class="lineup-section-title" style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.8;">Bench</div>
      <div class="lineup-grid">
        ${benchHtml}
      </div>
    ` : ''}

    <div class="lineup-section-title">Injuries</div>
    <div class="injury-list">
      ${injuredHtml}
    </div>
  `;
}

// Helper function to format date in readable format
function formatReturnDate(dateStr) {
  if (!dateStr) return '';
  try {
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return dateStr; // fallback to original if invalid
    
    const options = { 
      weekday: 'long', 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    };
    return date.toLocaleDateString('en-US', options);
  } catch (e) {
    return dateStr; // fallback to original if error
  }
}

// Injury modal: show full details on hover of the injury badge.
let injuryModalInstance = null;
let injuryHoverTimer = null;

function showInjuryModalFromEl(el) {
  ensureModalLoaded('injuryModal');
  
  const player = el?.dataset?.player || '';
  const team = el?.dataset?.team || '';
  const status = el?.dataset?.status || '';
  const returnDate = el?.dataset?.returnDate || '';
  const desc = el?.dataset?.description || '';

  const title = `${player}${team ? ` (${team})` : ''}`.trim() || 'Injury Details';
  const formattedReturnDate = returnDate ? formatReturnDate(returnDate) : '';
  const body = `
    <div class="mb-2"><span class="badge bg-light text-dark" style="font-weight:800;">${escapeHtml(status || '—')}</span></div>
    <div style="white-space:pre-wrap;">${escapeHtml(desc || '—')}</div>
    ${formattedReturnDate ? `<div class="mt-3 small" style="color: rgba(255,255,255,0.7);"><strong>Expected return date:</strong> ${escapeHtml(formattedReturnDate)}</div>` : ''}
  `;

  const titleEl = document.getElementById('injuryModalLabel');
  const bodyEl = document.getElementById('injuryModalBody');
  if (titleEl) titleEl.textContent = title;
  if (bodyEl) bodyEl.innerHTML = body;

  const modalEl = document.getElementById('injuryModal');
  if (!modalEl) return;
  injuryModalInstance = injuryModalInstance || new bootstrap.Modal(modalEl, { backdrop: true, focus: true });
  injuryModalInstance.show();
}

document.getElementById('lineup-compare-body')?.addEventListener('click', (e) => {
  const badge = e.target?.closest?.('[data-injury="true"]');
  if (!badge) return;
  e.preventDefault();
  showInjuryModalFromEl(badge);
}, true);

// Keep hover behavior for injury badges in the TOP leaderboards (small badges)
document.getElementById('boards')?.addEventListener('mouseenter', (e) => {
  const badge = e.target?.closest?.('[data-injury="true"]');
  if (!badge || badge.closest('.injury-item.clickable')) return; // Skip if it's a clickable injury card
  if (injuryHoverTimer) clearTimeout(injuryHoverTimer);
  injuryHoverTimer = setTimeout(() => {
    showInjuryModalFromEl(badge);
  }, 250);
}, true);

document.getElementById('boards')?.addEventListener('mouseleave', (e) => {
  const badge = e.target?.closest?.('[data-injury="true"]');
  if (!badge) return;
  if (injuryHoverTimer) {
    clearTimeout(injuryHoverTimer);
    injuryHoverTimer = null;
  }
}, true);
</script>
</body>
</html>