/* game pages don't load style.css, so the font is declared again here */
@font-face {
  font-family: "VT323";
  src: url("/fonts/VT323-Regular.ttf") format("truetype");
}

.leaderboard {
  --arcade-black: #000000;
  --arcade-white: #ffffff;
  --arcade-yellow: #ffff00;
  --arcade-cyan: #00ffff;
  --arcade-backdrop: rgba(0, 0, 0, 0.6);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--arcade-backdrop);
  color: var(--arcade-white);
  font: 24px/1.2 "VT323", "Courier New", monospace;
  text-transform: uppercase;
  text-align: center;
}

.leaderboard-panel {
  min-width: 240px;
  padding: 16px 24px;
  background: var(--arcade-black);
  border: 4px double var(--arcade-cyan);
}

.leaderboard h2 { margin: 0 0 8px; font-size: 32px; font-weight: normal; color: var(--arcade-yellow); }
.leaderboard p { margin: 8px 0; }
.leaderboard .leaderboard-score { font-size: 40px; color: var(--arcade-cyan); }
.leaderboard .leaderboard-hint { font-size: 18px; color: var(--arcade-cyan); }

.leaderboard button {
  padding: 0 8px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.leaderboard button:hover { color: var(--arcade-yellow); }
.leaderboard .leaderboard-button { margin-top: 8px; }

.leaderboard-initials { display: flex; justify-content: center; gap: 16px; }
.leaderboard-slot { display: flex; flex-direction: column; align-items: center; }
.leaderboard-letter { font-size: 48px; cursor: pointer; }
.leaderboard-slot.active .leaderboard-letter { color: var(--arcade-yellow); animation: leaderboard-blink 1s steps(1) infinite; }

.leaderboard-table { margin: 0 auto; border-collapse: separate; border-spacing: 16px 0; }
.leaderboard-table td { text-align: left; }
.leaderboard-table td:last-child { text-align: right; }
.leaderboard-table .new { color: var(--arcade-yellow); animation: leaderboard-blink 1s steps(1) infinite; }

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