/* Leaderboard: the same off-white foundation as Explore. */
.board-page {
  --bg: #f3f2ee; --panel: #fcfcfb; --panel-2: #f3f2ee; --line: #e4e3dd; --text: #14151f; --muted: #5d6175;
  color-scheme: light; background: #f3f2ee; color: #14151f;
}
.board { max-width: 820px; margin: 0 auto; padding: 56px max(16px, 4vw) 40px; }
.bd-intro { text-align: center; margin-bottom: 32px; }
.bd-intro h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 10px; color: #14151f; }
.bd-intro p { margin: 0 auto; max-width: 520px; color: #5d6175; font-size: 17px; }

.bd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bd-row { display: grid; grid-template-columns: 44px 144px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 1px solid #e4e3dd; border-radius: 18px; background: #fcfcfb; text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s; }
.bd-row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(20, 21, 31, 0.45); }
.bd-rank { text-align: center; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #8b8fa1; }
.bd-row.top1 .bd-rank { color: #d9a400; }
.bd-row.top2 .bd-rank { color: #8a929e; }
.bd-row.top3 .bd-rank { color: #b0703a; }
.bd-art { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0b0c17; }
.bd-art svg { display: block; width: 100%; height: 100%; }
.bd-info { min-width: 0; }
.bd-title { margin: 0; font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
.bd-tag { margin: 4px 0 0; color: #5d6175; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-plays { text-align: right; white-space: nowrap; }
.bd-plays b { display: block; font-size: 22px; letter-spacing: -0.02em; }
.bd-plays span { font-size: 12px; color: #80849a; }
.bd-empty { padding: 36px 16px; text-align: center; color: #5d6175; border: 1px dashed #dcdbd4; border-radius: 18px; }
.bd-note { margin: 22px 0 0; text-align: center; color: #5d6175; font-size: 14px; }
.board-page .footer { color: #8b8fa1; border-top: 1px solid #e4e3dd; margin-top: 40px; padding: 28px 20px 36px; }

@media (max-width: 600px) {
  .bd-row { grid-template-columns: 32px 88px minmax(0, 1fr); gap: 12px; }
  .bd-plays { grid-column: 3; text-align: left; }
  .bd-plays b { display: inline; font-size: 16px; margin-right: 4px; }
}

.bd-best { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: #0b6a0b; }
.bd-best.none { font-weight: 500; color: #80849a; }
.bd-by { margin: 1px 0 0; font-size: 13px; font-weight: 600; color: #5d6175; }