/* Leaderboard modal — embedded in the Profile modal (see js/profileUI.js).
   Reuses .match-history-content for sizing; this file styles the search box and
   the ranked rows. Tokens come from the shared design-token system. */

#leaderboard-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* dvh tracks the visible viewport under mobile browser chrome; vh fallback. */
	height: 100vh;
	height: 100dvh;
	z-index: 1100;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
}

.leaderboard-search {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 8px 12px;
	border: 1px solid var(--menu-border, #3c362e);
	border-radius: var(--radius-panel, 4px);
	background: var(--menu-input-bg, #2b2823);
	color: var(--menu-text, #fff);
	font-size: 1rem;
}

.leaderboard-search::placeholder {
	color: var(--menu-text-dim, #b3a994);
}

.leaderboard-list {
	max-height: 360px;
	overflow-y: auto;
	padding: 0 4px;
}

.leaderboard-item {
	display: grid;
	grid-template-columns: 48px 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 9px 4px;
	border-bottom: 1px solid var(--menu-border, #3c362e);
	font-size: 1rem;
}

.leaderboard-item:last-child {
	border-bottom: none;
}

/* Rows open the player's public profile on click. */
.leaderboard-item[data-username] {
	cursor: pointer;
}

.leaderboard-item[data-username]:hover,
.leaderboard-item[data-username]:focus-visible {
	background: var(--menu-surface-2, rgba(255, 255, 255, 0.05));
	outline: none;
}

.leaderboard-item .lb-rank {
	color: var(--menu-text-dim, #b3a994);
	font-variant-numeric: tabular-nums;
	font-weight: bold;
}

.leaderboard-item .lb-name {
	color: var(--highlight-color);
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.leaderboard-item .lb-rating {
	font-variant-numeric: tabular-nums;
	font-weight: bold;
}

.leaderboard-item .lb-games {
	color: var(--menu-text-dim, #b3a994);
	font-size: 0.85rem;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.leaderboard-item {
		grid-template-columns: 2.5rem minmax(0, 1fr) 4ch 7.5ch;
		gap: 6px;
	}

	.leaderboard-item .lb-rating,
	.leaderboard-item .lb-games {
		text-align: right;
	}
}