/* Leaderboard Styles */
.leaderboard-filters {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 15px;
}

.leaderboard-type-toggle,
.leaderboard-difficulty-filter {
     display: flex;
     justify-content: center;
     gap: 5px;
     flex-wrap: wrap;
}

.lb-type,
.lb-diff {
     padding: 6px 12px;
     border: 2px solid var(--card-border);
     border-radius: 20px;
     background: #fffae6;
     font-family: Bubblegum Sans, cursive;
     font-size: 0.9rem;
     color: var(--storybook-brown);
     cursor: pointer;
     transition: all 0.2s ease;
}

.lb-type:hover,
.lb-diff:hover {
     background: var(--gold-accent);
}

.lb-type.active,
.lb-diff.active {
     background: var(--gold-accent);
     border-color: var(--bonus-bg);
     font-weight: bold;
}

.leaderboard-table-container {
     max-height: 250px;
     overflow-y: auto;
     border: 2px solid var(--card-border);
     border-radius: 10px;
     background: #fffae6;
}

.leaderboard-table {
     width: 100%;
     border-collapse: collapse;
     font-family: Bubblegum Sans, cursive;
}

.leaderboard-table thead {
     position: sticky;
     top: 0;
     background: var(--gold-accent);
}

.leaderboard-table th {
     padding: 8px 5px;
     font-size: 0.85rem;
     color: var(--storybook-brown-deep);
     border-bottom: 2px solid var(--card-border);
}

.leaderboard-table td {
     padding: 8px 5px;
     font-size: 0.9rem;
     color: var(--storybook-brown);
     border-bottom: 1px solid rgba(0,0,0,0.1);
}

.leaderboard-table tbody tr:nth-child(even) {
     background: rgba(255,250,230,0.5);
}

.leaderboard-table tbody tr:hover {
     background: rgba(255,215,0,0.2);
}

.leaderboard-table .lb-current-user {
     background: linear-gradient(90deg, rgba(255,215,0,0.4), rgba(255,215,0,0.2)) !important;
     font-weight: bold;
}

.lb-rank {
     font-size: 1rem;
     text-align: center;
}

.lb-name {
     text-align: left;
     max-width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

.lb-score {
     text-align: right;
     font-weight: bold;
}

.lb-difficulty {
     text-align: center;
     font-size: 0.8rem;
}

.lb-loading,
.lb-empty {
     text-align: center;
     padding: 20px;
     color: var(--storybook-brown);
     font-style: italic;
}

.leaderboard-user-rank {
     margin-top: 10px;
     text-align: center;
}

.lb-your-rank {
     font-family: Bubblegum Sans, cursive;
     font-size: 1rem;
     color: var(--storybook-brown-deep);
     background: var(--gold-accent);
     padding: 5px 15px;
     border-radius: 15px;
}