.leaderboard-main
{
	width: min(1180px, calc(100% - 80px));
	margin: 0 auto;
	padding: 0 0 100px;
}

.leaderboard-header
{
	max-width: 860px;
}

.leaderboard-eyebrow
{
	margin: 0 0 8px;
	color: var(--accent);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.leaderboard-scorecards
{
	color: var(--panel-text);
	margin-bottom: 26px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	background: var(--panel-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
}

.leaderboard-scorecards > div
{
	min-height: 105px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--border);
	text-align: center;
}

.leaderboard-scorecards > div:last-child
{
	border-right: 0;
}

.leaderboard-scorecards strong
{
	color: var(--primary);
	font-family: var(--font-heading);
	font-size: 2.35rem;
	line-height: 1;
}

.leaderboard-scorecards span
{
	margin-top: 7px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.leaderboard-tabs
{
	margin: 0 0 22px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.leaderboard-tabs a
{
	padding: 10px 18px;
	color: var(--text);
	background: var(--light-overlay-38);
	border: 1px solid var(--border);
	border-radius: 5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.leaderboard-tabs a.active
{
	color: var(--light);
	background: var(--primary);
	border-color: var(--primary);
}

.leaderboard-board
{
	color: var(--panel-text);
	overflow: hidden;
	background: var(--panel-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 16px 42px var(--warm-shadow-07);
}

.leaderboard-board-heading
{
	padding: 28px 32px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	border-bottom: 1px solid var(--border);
}

.leaderboard-board-heading h2
{
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	text-transform: uppercase;
}

.leaderboard-leader-callout
{
	max-width: 440px;
	margin: 0;
	text-align: right;
	line-height: 1.45;
}

.leaderboard-table-wrap
{
	overflow-x: auto;
}

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

.leaderboard-table th,
.leaderboard-table td
{
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
	text-align: center;
}

.leaderboard-table th
{
	color: var(--accent);
	font-size: .76rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}

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

.leaderboard-table tbody tr.top-1
{
	background: var(--accent-overlay-11);
}

.leaderboard-table tbody tr.top-2,
.leaderboard-table tbody tr.top-3
{
	background: var(--light-overlay-23);
}

.leaderboard-rank
{
	width: 90px;
	color: var(--primary);
	font-family: var(--font-heading);
	font-size: 1.55rem;
	font-weight: 700;
}

.leaderboard-rank span
{
	margin-right: 5px;
	color: var(--accent);
}

.leaderboard-name
{
	min-width: 210px;
	text-align: left !important;
	font-size: 1.08rem;
}

.leaderboard-points
{
	color: var(--primary);
	font-size: 1.18rem;
}

.leaderboard-empty
{
	padding: 55px 30px;
	text-align: center;
}

.leaderboard-empty h3
{
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 2rem;
	text-transform: uppercase;
}

.leaderboard-empty p
{
	margin: 0;
}

.leaderboard-note
{
	max-width: 850px;
	margin: 18px auto 0;
	color: var(--text-overlay-68);
	font-size: .9rem;
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 760px)
{
	.leaderboard-main
	{
		width: min(100% - 36px, 720px);
	}

	.leaderboard-scorecards
	{
		grid-template-columns: 1fr;
	}

	.leaderboard-scorecards > div
	{
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}

	.leaderboard-scorecards > div:last-child
	{
		border-bottom: 0;
	}

	.leaderboard-board-heading
	{
		align-items: flex-start;
		flex-direction: column;
	}

	.leaderboard-leader-callout
	{
		text-align: left;
	}

	.leaderboard-table th,
	.leaderboard-table td
	{
		padding: 15px 14px;
	}
}
