/* Leaderboard Page Styles */
.leaderboard-main {
	flex: 1;
	padding: 2rem 0;
	margin-top: 1rem;
}

.leaderboard-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.leaderboard-header {
	text-align: center;
	margin-bottom: 2rem;
	padding: 2rem 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16px;
	color: white;
	box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.leaderboard-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.leaderboard-subtitle {
	font-size: 1.1rem;
	margin: 0;
	opacity: 0.9;
}

/* View Selector */
.view-selector {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.view-category {
	background-color: var(--bg-canvas-subtle);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	overflow: hidden;
}

.view-category h3 {
	margin: 0;
	padding: 0.75rem 1.25rem;
	background-color: var(--bg-canvas-subtle);
	border-bottom: 1px solid var(--border-default);
	font-size: 1rem;
	font-weight: 600;
	color: var(--fg-default);
}

.view-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem;
}

.view-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	background-color: var(--btn-default-bg);
	border: 1px solid var(--border-default);
	border-radius: 6px;
	color: var(--fg-default);
	text-decoration: none;
	transition: all 0.2s ease;
	font-weight: 500;
	font-size: 0.9rem;
}

.view-tab:hover {
	background-color: var(--btn-default-hover-bg);
	border-color: var(--fg-muted);
	transform: translateY(-1px);
}

.view-tab.active {
	background-color: var(--accent-fg);
	border-color: var(--accent-fg);
	color: var(--fg-on-emphasis);
}

/* Game of the Day specific styles */
.view-category:nth-child(2) .view-tab.active {
	background-color: #9c27b0; /* Purple accent for Game of the Day */
	border-color: #9c27b0;
}

.view-category:nth-child(2) .view-tab:hover {
	border-color: #9c27b0;
}

.view-category:nth-child(2) h3 {
	color: #9c27b0;
}

.view-icon {
	font-size: 1.2rem;
}

.view-label {
	font-size: 0.9rem;
}

/* User Position Card */
.user-position-card {
	background-color: var(--bg-canvas-subtle);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	margin-bottom: 2rem;
	overflow: hidden;
}

.user-position-header {
	background-color: var(--bg-canvas-subtle);
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border-default);
}

.user-position-header h3 {
	margin: 0;
	color: var(--fg-default);
	font-size: 1.2rem;
	font-weight: 600;
}

.user-position-content {
	display: flex;
	align-items: center;
	padding: 1.5rem;
	gap: 2rem;
}

.user-rank {
	flex-shrink: 0;
}

.rank-number {
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent-fg);
}

.user-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	flex: 1;
}

.user-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.stat-label {
	font-size: 0.8rem;
	color: var(--fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--fg-default);
}

/* Leaderboard Table */
.leaderboard-table-container {
	background-color: var(--bg-canvas-subtle);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 2rem;
}

.leaderboard-table {
	width: 100%;
	border-collapse: collapse;
}

.leaderboard-table th {
	background-color: var(--bg-canvas-subtle);
	color: var(--fg-muted);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border-default);
}

.leaderboard-table td {
	padding: 1rem;
	border-bottom: 1px solid var(--border-default);
	color: var(--fg-default);
	vertical-align: middle;
}

.leaderboard-table tr:last-child td {
	border-bottom: none;
}

.leaderboard-table tr:hover {
	background-color: var(--bg-overlay);
}

.leaderboard-table tr.current-user {
	background-color: var(--accent-subtle);
}

.leaderboard-table tr.current-user:hover {
	background-color: var(--accent-subtle);
	opacity: 0.8;
}

/* Table Columns */
.rank-col {
	width: 60px;
	text-align: center;
}

.player-col {
	width: 200px;
}

.score-col {
	width: 150px;
	text-align: center;
}

.stats-col {
	width: 300px;
}

/* Table Cells */
.rank-cell {
	text-align: center;
	font-weight: 600;
	font-size: 1.1rem;
}

.player-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.player-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--border-default);
}

.player-name {
	font-weight: 600;
	color: var(--fg-default);
}

.score-cell {
	text-align: center;
}

.main-score {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--accent-fg);
}

.additional-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
}

.stat-item .stat-label {
	color: var(--fg-muted);
	font-size: 0.75rem;
}

.stat-item .stat-value {
	color: var(--fg-default);
	font-size: 0.8rem;
	font-weight: 600;
}

.no-data {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--fg-muted);
}

.no-data p {
	margin: 0;
	font-size: 1.1rem;
}

/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.page-link {
	padding: 0.5rem 1rem;
	background-color: var(--btn-default-bg);
	border: 1px solid var(--border-default);
	border-radius: 6px;
	color: var(--fg-default);
	text-decoration: none;
	transition: all 0.2s ease;
	font-weight: 500;
}

.page-link:hover {
	background-color: var(--btn-default-hover-bg);
	border-color: var(--fg-muted);
}

.page-info {
	color: var(--fg-muted);
	font-weight: 500;
}

/* Action Buttons */
.leaderboard-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

.leaderboard-actions .btn {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
	.leaderboard-title {
		font-size: 2rem;
	}
	
	.view-selector {
		flex-direction: column;
		align-items: stretch;
	}
	
	.view-tab {
		justify-content: center;
	}
	
	.user-position-content {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	
	.user-stats {
		justify-content: center;
	}
	
	.leaderboard-table {
		font-size: 0.9rem;
	}
	
	.leaderboard-table th,
	.leaderboard-table td {
		padding: 0.75rem 0.5rem;
	}
	
	.player-col {
		width: 150px;
	}
	
	.stats-col {
		width: 200px;
	}
	
	.additional-stats {
		flex-direction: column;
		gap: 0.25rem;
	}
}

@media (max-width: 480px) {
	.leaderboard-container {
		padding: 0 0.5rem;
	}
	
	.leaderboard-header {
		padding: 1.5rem 1rem;
	}
	
	.leaderboard-title {
		font-size: 1.8rem;
	}
	
	.leaderboard-subtitle {
		font-size: 1rem;
	}
	
	.leaderboard-table {
		font-size: 0.8rem;
	}
	
	.leaderboard-table th,
	.leaderboard-table td {
		padding: 0.5rem 0.25rem;
	}
	
	.player-info {
		gap: 0.5rem;
	}
	
	.player-avatar {
		width: 24px;
		height: 24px;
	}
	
	.main-score {
		font-size: 1.1rem;
	}
	
	.leaderboard-actions {
		flex-direction: column;
		align-items: center;
	}
	
	.leaderboard-actions .btn {
		width: 100%;
		margin-bottom: 0.5rem;
	}
}