/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD SCREEN — image-map over LeaderBoardBlankRightSide.webp
   Same left-nav pattern as home screen: ButtonsLeft strip on left (11.85%),
   leaderboard image anchored to right edge (88.15%).

   Canvas: 932.2 × 431.6  (iPhone landscape reference)
   Image:  1774 × 887  →  convert = x: 11.85% + (img_x/1774)×88.15%
                                     y: (img_y/887)×100%

   Debug: document.getElementById('screen-leaderboard').classList.add('lb-debug')
═══════════════════════════════════════════════════════════════════════════ */

#screen-leaderboard {
  background: url("../assets/Leaderboard/LeaderBoardBlankRightSide.webp") right top / 88.15% 100% no-repeat;
  overflow: hidden;
  filter: brightness(1.2);
}

/* ── Left nav (mirrors home screen) ─────────────────────────────────────── */
/* .hs-nav-base and .hs-nav-hl reuse home.css rules already loaded globally  */

/* ── Back button hit zone (← BACK in top-left of image) ─────────────────── */
#lb-btn-back {
  position: absolute;
  /* img coords: x≈15-150, y≈18-62  →  1774×887 */
  left:   12.6%;
  top:     2.0%;
  width:   6.7%;
  height:  5.1%;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  z-index: 10;
  transition: transform 0.08s ease;
}
#lb-btn-back:active { transform: scale(0.93); }

/* ── Period toggle buttons (GLOBAL / FRIENDS top-right) ──────────────────── */
.lb-period-btn {
  position: absolute;
  top:    2.0%;
  height: 5.1%;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  z-index: 10;
  font-size: 0;
  transition: transform 0.08s ease, background 0.1s ease;
}
.lb-period-btn:active { transform: scale(0.94); }
.lb-period-btn.active { background: rgba(212,175,55,0.12); box-shadow: inset 0 -2px 0 rgba(212,175,55,0.7); }

/* img coords: GLOBAL x≈1395-1545, FRIENDS x≈1548-1740  →  1774×887 */
#lb-btn-global  { left: 81.2%; width: 7.5%; }
#lb-btn-friends { left: 89.0%; width: 9.5%; }

/* ── Data table overlay ───────────────────────────────────────────────────── */
/*  Table area in image: x≈35-1740, y≈193-800
    → screen left  = 11.85% + (35/1774)×88.15%  ≈ 13.6%
    → screen top   = 193/887                     ≈ 21.8%
    → screen right = ~99%
    → screen height = (800-193)/887              ≈ 68.4%                     */

#lb-data {
  position: absolute;
  left:   13.6%;
  top:    21.8%;
  right:   0.8%;
  height: 68.4%;
  overflow: hidden;
  z-index: 5;
}

/* Each row fills one table row slot (8 rows across ~68.4%) */
.lb-row {
  display: grid;
  /* Columns proportional to image column widths (1774px total, from x=35) */
  /* RANK  USERNAME  TOTAL-PTS  SHIFTS  DRINKS  HIGH-SCORE */
  grid-template-columns: 8fr 24fr 18fr 14fr 13fr 13fr;
  align-items: center;
  height: 12.5%; /* 8 rows = 100% / 8 */
  padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.12s;
}
.lb-row:nth-child(1) { height: 13%;  }   /* top-3 rows slightly taller */
.lb-row:nth-child(2) { height: 13%;  }
.lb-row:nth-child(3) { height: 12.5%; }

.lb-row-rank {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #d8c890;
  text-align: center;
}
.lb-row:nth-child(1) .lb-row-rank { color: #f5d77a; font-size: 13px; }
.lb-row:nth-child(2) .lb-row-rank { color: #c8c8c8; font-size: 12px; }
.lb-row:nth-child(3) .lb-row-rank { color: #cd8d50; font-size: 12px; }

.lb-row-name {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #e8dcc8;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
}

.lb-row-pts,
.lb-row-shifts,
.lb-row-drinks,
.lb-row-high {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  color: #c8c0b0;
  text-align: center;
  letter-spacing: 0.03em;
}
.lb-row-pts { color: #f0d878; font-weight: 600; font-size: 11px; }

/* ── Loading / empty states ──────────────────────────────────────────────── */
#lb-data .lb-loading,
#lb-data .lb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  color: rgba(212,175,55,0.55);
  letter-spacing: 0.08em;
}

/* ── Debug ────────────────────────────────────────────────────────────────── */
#screen-leaderboard.lb-debug #lb-btn-back    { outline: 2px solid red;   background: rgba(255,0,0,0.1); }
#screen-leaderboard.lb-debug .lb-period-btn  { outline: 2px solid yellow; background: rgba(255,255,0,0.1); }
#screen-leaderboard.lb-debug #lb-data        { outline: 2px solid cyan;   background: rgba(0,200,255,0.05); }