.leaderboard-view {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  animation: fadeIn 0.4s ease-out;
}

.leaderboard-container {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #dfe6e9;
}

.leaderboard-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.leaderboard-header .leaderboard__title {
  font-size: 2rem;
  color: #6c5ce7;
  margin-bottom: 0.5rem;
}
.leaderboard-header .leaderboard__subtitle {
  color: #636e72;
  font-size: 1rem;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 500px;
}
.leaderboard-table th,
.leaderboard-table td {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid #dfe6e9;
}
.leaderboard-table th {
  background-color: rgba(108, 92, 231, 0.05);
  color: #636e72;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.leaderboard-table th:first-child {
  border-top-left-radius: 8px;
}
.leaderboard-table th:last-child {
  border-top-right-radius: 8px;
}
.leaderboard-table tbody tr {
  transition: background-color 0.3s;
}
.leaderboard-table tbody tr:hover {
  background-color: rgba(108, 92, 231, 0.02);
}
.leaderboard-table .row-top-3 {
  font-size: 1.1rem;
}
.leaderboard-table .row--gold {
  background-color: rgba(255, 215, 0, 0.1);
}
.leaderboard-table .row--gold td {
  font-weight: bold;
}
.leaderboard-table .row--silver {
  background-color: rgba(192, 192, 192, 0.15);
}
.leaderboard-table .row--bronze {
  background-color: rgba(205, 127, 50, 0.1);
}
.leaderboard-table .row--current-player {
  background-color: rgba(108, 92, 231, 0.1);
  border-left: 4px solid #6c5ce7;
}
.leaderboard-table .row--current-player td {
  font-weight: bold;
  color: #6c5ce7;
}
.leaderboard-table .col-rank {
  width: 15%;
  text-align: center;
}
.leaderboard-table .col-player {
  width: 45%;
}
.leaderboard-table .col-games,
.leaderboard-table .col-score {
  width: 20%;
  text-align: right;
}/*# sourceMappingURL=ranglist.css.map */