/* =============================================
   leaderboard.css — Styles for leaderboard page
   ============================================= */

/* --- Score list container --- */
.score-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* --- Each score row --- */
.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid transparent;
}

.score-x {
  background: #fff1f2;
  border-color: #fecdd3;
}

.score-o {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.score-draw {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* --- Label inside each row --- */
.score-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

/* --- Player symbol icon in label --- */
.player-sym {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.x-color    { color: var(--x-color); }
.o-color    { color: var(--o-color); }
.draw-color { color: #16a34a; }

/* --- Score number on the right --- */
.score-value {
  font-size: 1.8rem;
  font-weight: 800;
  min-width: 40px;
  text-align: right;
  color: var(--text);
}