/* ══════════════════════════════════════════════════════════════
   LEADERBOARD PAGE
   Two panels side by side, matched in height. Each one scrolls
   inside itself so the page never grows as days pile up.
   ══════════════════════════════════════════════════════════════ */

.lb-wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.lb-panel {
  background: #0d2456;
  border: 3px solid #2a55a8;
  border-radius: 12px;
  padding: 8px 12px 14px;
  font-family: 'Nunito', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 76vh;
}

.lb-heading {
  font-family: 'Luckiest Guy', cursive;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #ffd400;
  text-align: center;
  margin: 6px 0 12px;
  padding: 0;
  text-shadow:
    -3px -3px 0 #0a1f4a,  0 -3px 0 #0a1f4a,  3px -3px 0 #0a1f4a,
    -3px  0   0 #0a1f4a,                     3px  0   0 #0a1f4a,
    -3px  3px 0 #0a1f4a,  0  3px 0 #0a1f4a,  3px  3px 0 #0a1f4a;
}

.lb-crown {
  width: 30px;
  height: 30px;
  fill: #ffd400;
  stroke: #0a1f4a;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vertical-align: -5px;
  margin-right: 8px;
  overflow: visible;
}

.lb-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.lb-empty {
  color: #8fb3ee;
  font-size: 14px;
  text-align: center;
  padding: 24px 8px;
}

/* ── All-time rows ── */
.lb-row {
  display: grid;
  grid-template-columns: 34px 1fr auto 62px;
  align-items: center;
  padding: 7px 8px;
  margin-top: 3px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.lb-rank { color: #8fb3ee; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub  { color: #8fb3ee; font-size: 13px; text-align: right; padding-right: 12px; }
.lb-xp   { font-weight: 800; text-align: right; }

.lb-row.lb-up { background: #1a3d80; }
.lb-row.lb-dn { background: #081a3f; }

.lb-row.lb-head {
  background: none;
  border-bottom: 2px solid #2a55a8;
  border-radius: 0;
  margin: 0 0 4px;
  padding: 2px 8px 7px;
  color: #dbe7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.lb-row.lb-head .lb-rank,
.lb-row.lb-head .lb-sub,
.lb-row.lb-head .lb-xp { color: #dbe7ff; font-size: 11px; }

/* ── Medals ── */
.lb-gold {
  background: #f5d020;
  color: #10306e;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #0a1f4a;
}
.lb-silver {
  background: #c9d4e4;
  color: #10306e;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #0a1f4a;
}
.lb-bronze {
  background: #c67b3a;
  color: #2a1400;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #0a1f4a;
}
.lb-gold   .lb-rank, .lb-gold   .lb-sub { color: #10306e; }
.lb-silver .lb-rank, .lb-silver .lb-sub { color: #10306e; }
.lb-bronze .lb-rank, .lb-bronze .lb-sub { color: #2a1400; }

/* ── Daily tiles ── */
.lb-tile {
  background: #122f6b;
  border: 2px solid #2a55a8;
  border-radius: 10px;
  padding: 9px;
  margin-bottom: 9px;
}
.lb-tile-day {
  color: #8fb3ee;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  padding-bottom: 5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.lb-tile-note {
  color: #8fb3ee;
  font-size: 11px;
  text-align: center;
  padding: 6px 0 2px;
}

.lb-medal {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
}
.lb-medal-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-medal-xp { font-variant-numeric: tabular-nums; }

/* ── Month archive ── */
.lb-archive-title {
  color: #dbe7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-bottom: 2px solid #2a55a8;
  padding: 8px 2px 6px;
  margin-bottom: 8px;
}
.lb-month { margin-bottom: 8px; }
.lb-month > summary {
  cursor: pointer;
  list-style: none;
  background: #1a3d80;
  border-radius: 6px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}
.lb-month > summary::-webkit-details-marker { display: none; }
.lb-month > summary::before {
  content: '\25B8';
  color: #ffd400;
  margin-right: 8px;
  display: inline-block;
}
.lb-month[open] > summary::before { transform: rotate(90deg); }
.lb-month > summary:hover { background: #2a55a8; }
.lb-month[open] > summary { margin-bottom: 8px; }

/* ── Narrow screens: stack, winners first ── */
@media (max-width: 720px) {
  .lb-wrap { grid-template-columns: 1fr; }
  .lb-panel { max-height: none; }
  .lb-scroll { overflow-y: visible; }
  .lb-heading { font-size: 20px; }
  .lb-row { grid-template-columns: 30px 1fr auto 54px; font-size: 13px; }
  .lb-sub { padding-right: 8px; }
}