/* SPS Brand CSS - shared across all leaderboards */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

:root {
  --brand-blue: #00AAE5;
  --slate: #1F282C;
  --orange: #FA6423;
  --yellow: #FF9632;
  --plum: #9B4B87;
  --grape: #4B2346;
  --deep-blue: #0079A5;
  --emerald: #377D6E;
  --mint: #62C5AB;
  --light-blue: #80D4F2;
  --pale-blue: #D9F2FB;
  --med-grey: #606A6E;
  --light-grey: #B0B6B8;
  --pale-grey: #F6F6F6;
  --gold: #62C5AB;
  --silver: #FF9632;
  --bronze: #9B4B87;
  --reddit-blue: #0079D3;
}

/* Password Gate */
#password-gate {
  width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #00AAE5; position: fixed; top: 0; left: 0; z-index: 9999;
}
#password-gate.hidden { display: none; }
#password-form { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#password-form .lock-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;
}
#password-form p { color: white; font-size: 18px; opacity: 0.9; font-weight: 500; }
#password-form .input-row { display: flex; gap: 12px; }
#password-form input {
  width: 240px; padding: 12px 16px; font-size: 16px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.2); color: white; text-align: center; outline: none;
}
#password-form input::placeholder { color: rgba(255,255,255,0.6); }
#password-form input.error { border-color: #ff6b6b; }
#password-form button {
  padding: 12px 24px; font-size: 16px; border-radius: 8px; border: none;
  background: white; color: #00AAE5; font-weight: 600; cursor: pointer;
}
#password-form button:hover { background: #f0f0f0; }
#password-form .error-msg { color: rgba(255,255,255,0.8); font-size: 14px; min-height: 20px; }
#leaderboard-content { display: none; }
#leaderboard-content.visible { display: block; }

/* Wrap */
.lb-wrap {
  font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--slate);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Shared Nav */
.lb-shared-nav {
  display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 13px;
  border-bottom: 1px solid var(--pale-grey); margin-bottom: 8px;
}
.lb-shared-nav a {
  padding: 6px 14px; border-radius: 4px; text-decoration: none;
  color: var(--med-grey); font-weight: 500; transition: all 0.2s;
}
.lb-shared-nav a:hover { color: var(--brand-blue); background: var(--pale-blue); }
.lb-shared-nav a.active { color: var(--brand-blue); font-weight: 600; }
.lb-shared-nav .nav-sep { color: var(--light-grey); }

/* Header Row */
.lb-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 8px; gap: 16px; flex-wrap: wrap;
}

/* Period Nav */
.lb-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-nav a {
  padding: 6px 16px; border: 1.5px solid #E0E0E0; border-radius: 5px;
  font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px; font-weight: 600; background: #fff; color: var(--med-grey);
  text-decoration: none; transition: all 0.2s; cursor: pointer;
}
.lb-nav a:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.lb-nav a.active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* Header */
.lb-header { display: flex; align-items: center; gap: 20px; }
.lb-header img { width: 64px; height: 64px; border-radius: 14px; }
.lb-header-text h1 {
  font-family: 'Nexa', 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900; font-size: 28px; margin: 0; color: var(--slate);
}
.lb-header-text p { margin: 4px 0 0; font-size: 14px; color: var(--med-grey); }
.lb-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--brand-blue), var(--mint), var(--yellow), var(--orange), var(--plum));
  border-radius: 2px 2px 0 0; margin-bottom: 0;
}

/* Banner */
.lb-banner {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  padding: 14px 20px; margin-bottom: 28px;
  background: linear-gradient(180deg, rgba(217, 242, 251, 0.4) 0%, rgba(255,255,255,0) 100%);
  border-radius: 0 0 8px 8px;
}
.lb-banner-stat { text-align: center; }
.lb-banner-stat-val { font-weight: 700; font-size: 18px; color: var(--deep-blue); }
.lb-banner-stat-label { font-size: 10px; color: var(--light-grey); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
.lb-banner-improved { margin-left: auto; font-size: 13px; color: var(--emerald); font-weight: 600; }
.lb-banner-improved strong { color: var(--slate); }

/* Podium */
.lb-podium { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.lb-podium-card {
  background: #fff; border-radius: 12px; padding: 24px 20px 20px; text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); position: relative; width: 220px; transition: transform 0.2s;
}
.lb-podium-card:hover { transform: translateY(-4px); }
.lb-podium-card.rank-1 { min-height: 200px; padding-top: 36px; border-top: 4px solid var(--mint); background: linear-gradient(180deg, #EDF8F5 0%, #fff 40%); }
.lb-podium-card.rank-2 { min-height: 170px; border-top: 4px solid var(--yellow); background: linear-gradient(180deg, #FFF8EE 0%, #fff 40%); }
.lb-podium-card.rank-3 { min-height: 170px; border-top: 4px solid var(--plum); background: linear-gradient(180deg, #F8F0F6 0%, #fff 40%); }
.lb-podium-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; font-size: 22px; font-weight: 900; margin-bottom: 8px;
}
.rank-1 .lb-podium-badge { background: var(--mint); color: #fff; box-shadow: 0 0 16px rgba(98,197,171,0.4); animation: shimmer 2.5s ease-in-out infinite; }
.rank-2 .lb-podium-badge { background: var(--yellow); color: #fff; }
.rank-3 .lb-podium-badge { background: var(--plum); color: #fff; }
@keyframes shimmer { 0%, 100% { box-shadow: 0 0 16px rgba(98,197,171,0.4); } 50% { box-shadow: 0 0 28px rgba(98,197,171,0.7); } }
.lb-podium-name { font-weight: 700; font-size: 16px; margin: 4px 0; }
.lb-podium-reddit, .lb-podium-sub { font-size: 13px; color: var(--med-grey); text-decoration: none; display: block; margin-bottom: 12px; }
.lb-podium-reddit { color: var(--reddit-blue); }
.lb-podium-reddit:hover { text-decoration: underline; }
.lb-podium-stats { display: flex; justify-content: center; gap: 16px; margin-top: 8px; }
.lb-podium-stat { text-align: center; }
.lb-podium-stat-val { font-weight: 700; font-size: 20px; color: var(--deep-blue); }
.lb-podium-stat-label { font-size: 11px; color: var(--med-grey); text-transform: uppercase; letter-spacing: 0.5px; }

/* Table */
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.lb-table thead th {
  background: linear-gradient(135deg, var(--slate) 0%, var(--grape) 100%);
  color: #fff; font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 12px 10px; text-align: center; white-space: nowrap;
}
.lb-table thead th:first-child { border-radius: 8px 0 0 0; }
.lb-table thead th:last-child { border-radius: 0 8px 0 0; }
.lb-table tbody tr { animation: fadeIn 0.4s ease forwards; opacity: 0; }
.lb-table tbody tr:nth-child(even) { background: var(--pale-grey); }
.lb-table tbody tr:hover { background: #E8F8FF; }
.lb-table td { padding: 10px 10px; font-size: 14px; text-align: center; vertical-align: middle; border-bottom: 1px solid #eee; }
.lb-table td.name-col { text-align: left; font-weight: 600; }
.lb-table td.reddit-col, .lb-table td.link-col { text-align: left; }
.lb-table td.reddit-col a, .lb-table td.link-col a { color: var(--reddit-blue); text-decoration: none; }
.lb-table td.reddit-col a:hover, .lb-table td.link-col a:hover { text-decoration: underline; }
.lb-table td.karma-col, .lb-table td.count-col { font-weight: 700; }

/* Rank badges */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 13px; color: #fff;
}
.rank-badge.r1 { background: var(--mint); color: #fff; }
.rank-badge.r2 { background: var(--yellow); color: #fff; }
.rank-badge.r3 { background: var(--plum); }
.rank-badge.rn { background: var(--pale-grey); color: var(--med-grey); font-size: 12px; border: 1px solid var(--light-grey); }

/* Deltas */
.delta-up { color: var(--emerald); font-weight: 600; }
.delta-down { color: var(--orange); font-weight: 600; }
.delta-zero { color: var(--light-grey); }
.streak { font-size: 12px; color: var(--orange); font-weight: 600; margin-left: 4px; }

@keyframes fadeIn { to { opacity: 1; } }

/* Legend */
.lb-legend {
  background: linear-gradient(180deg, rgba(217, 242, 251, 0.4) 0%, rgba(255,255,255,0) 100%);
  border-radius: 0 0 8px 8px; padding: 16px 24px; margin-bottom: 32px;
  display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap;
}
.lb-legend-title { font-weight: 700; font-size: 14px; color: var(--deep-blue); white-space: nowrap; }
.lb-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--med-grey); }
.lb-legend-emoji { font-size: 18px; }
.lb-legend-pts { font-weight: 700; color: var(--deep-blue); }

.lb-footer { text-align: center; padding: 16px 0 32px; font-size: 12px; color: var(--light-grey); }

/* Loading */
.lb-loading {
  text-align: center; padding: 80px 20px; color: var(--med-grey); font-size: 16px;
}