/*
 * Shared scoreboard styling for Leaderboard.js output.
 *
 * Targets only the class names Leaderboard.js itself renders
 * (leaderboard-list, leaderboard-name, leaderboard-score, leaderboard-empty,
 * leaderboard-loading, leaderboard-game, leaderboard-game-title) so it's
 * safe to drop into any game's page regardless of that game's own visual
 * style — every rule below sets what it needs explicitly rather than
 * assuming anything about the host page.
 *
 * Optional: a game can skip this file entirely and style those same class
 * names itself to match its own look.
 */

@keyframes lb-power-on {
  0% { opacity: 0; filter: brightness(1.8); }
  60% { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes lb-cursor-blink {
  50% { opacity: 0; }
}

.leaderboard-list,
.leaderboard-empty,
.leaderboard-loading {
  --lb-ink: #1a1a1a;
  --lb-console: #10210f;
  --lb-console-text: #9beb5c;
  --lb-gold: #fbd247;
  --lb-silver: #c7cdd6;
  --lb-bronze: #c97c4b;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
}

.leaderboard-list {
  list-style: none;
  counter-reset: lb-rank;
  margin: 0;
  padding: 10px 12px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--lb-console);
  border: 3px solid var(--lb-ink);
  color: var(--lb-console-text);
  font-family: "Courier New", monospace;
  font-size: 13px;
  animation: lb-power-on 0.4s ease-out;
}

.leaderboard-list li {
  counter-increment: lb-rank;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  line-height: 1.4;
}

.leaderboard-list li + li {
  border-top: 1px solid rgba(155, 235, 92, 0.15);
}

.leaderboard-list li::before {
  content: "#" counter(lb-rank);
  flex: 0 0 auto;
  min-width: 2.2ch;
  opacity: 0.7;
}

.leaderboard-list li:nth-child(1) { color: var(--lb-gold); }
.leaderboard-list li:nth-child(2) { color: var(--lb-silver); }
.leaderboard-list li:nth-child(3) { color: var(--lb-bronze); }

.leaderboard-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-score {
  flex: 0 0 auto;
  font-weight: 700;
}

.leaderboard-empty,
.leaderboard-loading {
  padding: 10px 12px;
  border: 3px solid var(--lb-ink);
  background: var(--lb-console);
  color: var(--lb-console-text);
  font-family: "Courier New", monospace;
  font-size: 13px;
  opacity: 0.85;
}

.leaderboard-loading::after {
  content: "_";
  animation: lb-cursor-blink 1s steps(1) infinite;
}

.leaderboard-game {
  margin-bottom: 4px;
}

.leaderboard-game-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-list { animation: none; }
  .leaderboard-loading::after { animation: none; }
}