/**
 * Leaderboard — uses Olympus / html[data-theme] CSS variables (matches site chrome).
 * Scoped to .tp-lb-root only.
 */

.tp-lb-root {
	/* Map theme tokens → local aliases (dark + light fallbacks) */
	--tp-lb-surface: var(--ol-card-bg-color, var(--ol-secondary-bg-color, #20232b));
	--tp-lb-surface-elevated: var(--ol-input-bg-color, #2f323d);
	--tp-lb-text: var(--heading-font-color, #fff);
	--tp-lb-muted: var(--body-font-color, #949cb5);
	--tp-lb-border: var(--ol-border-color, #353946);
	--tp-lb-accent: var(--primary-accent-color, #ff5e3a);
	--tp-lb-accent-2: var(--third-accent-color, #7c5ac2);
	--tp-lb-link: var(--ol-link-color, var(--primary-accent-color, #ff5e3a));
	--tp-lb-font: var(--body-font-family, "Inter", Roboto, system-ui, sans-serif);
	--tp-lb-glass: color-mix(in srgb, var(--tp-lb-surface) 88%, transparent);
	--tp-lb-glass-border: color-mix(in srgb, var(--tp-lb-accent-2) 22%, var(--tp-lb-border));

	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 16px 48px;
	font-family: var(--tp-lb-font);
	font-size: var(--body-font-size, 13px);
	line-height: var(--body-line-height, 1.5);
	color: var(--tp-lb-text);
	background: transparent;
}

.tp-lb-root a {
	color: var(--tp-lb-link);
}

.tp-lb-root a:hover {
	opacity: 0.92;
}

/* Hero */
.tp-lb-root .tp-lb-hero {
	position: relative;
	padding: 32px 8px 28px;
	text-align: center;
	overflow: hidden;
}

.tp-lb-root .tp-lb-hero-glow {
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: min(720px, 100vw);
	height: 420px;
	background: radial-gradient(
		ellipse,
		color-mix(in srgb, var(--tp-lb-accent-2) 28%, transparent) 0%,
		transparent 68%
	);
	pointer-events: none;
}

.tp-lb-root .tp-lb-hero-title {
	font-weight: 800;
	font-size: clamp(36px, 6.5vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
	color: var(--tp-lb-text);
	background: linear-gradient(
		120deg,
		var(--tp-lb-accent) 0%,
		var(--tp-lb-accent-2) 45%,
		var(--tp-lb-text) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.tp-lb-root .tp-lb-hero-title {
		background: none;
		-webkit-text-fill-color: unset;
		color: var(--tp-lb-text);
	}
}

.tp-lb-root .tp-lb-hero-sub {
	font-size: 14px;
	color: var(--tp-lb-muted);
	max-width: 520px;
	margin: 0 auto 28px;
	line-height: 1.6;
}

.tp-lb-root .tp-lb-hero-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 0 4px;
}

@media (min-width: 640px) {
	.tp-lb-root .tp-lb-hero-stats {
		gap: 16px;
		max-width: 560px;
	}
}

.tp-lb-root .tp-lb-hero-stat {
	position: relative;
	border-radius: 14px;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--tp-lb-surface-elevated) 92%, var(--tp-lb-accent-2) 8%),
		color-mix(in srgb, var(--tp-lb-surface) 88%, transparent)
	);
	border: 1px solid color-mix(in srgb, var(--tp-lb-accent-2) 22%, var(--tp-lb-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tp-lb-text) 6%, transparent),
		0 12px 32px color-mix(in srgb, var(--tp-lb-accent-2) 8%, transparent);
	backdrop-filter: blur(12px);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.tp-lb-root .tp-lb-hero-stat::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--tp-lb-accent) 35%, transparent),
		transparent 45%,
		color-mix(in srgb, var(--tp-lb-accent-2) 28%, transparent)
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.65;
}

.tp-lb-root .tp-lb-hero-stat:hover {
	border-color: color-mix(in srgb, var(--tp-lb-accent) 40%, var(--tp-lb-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tp-lb-text) 8%, transparent),
		0 16px 40px color-mix(in srgb, var(--tp-lb-accent) 12%, transparent);
	transform: translateY(-2px);
}

.tp-lb-root .tp-lb-hero-stat-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 16px 18px;
	position: relative;
	z-index: 1;
}

.tp-lb-root .tp-lb-hero-stat-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--tp-lb-accent-2) 14%, var(--tp-lb-surface));
	border: 1px solid color-mix(in srgb, var(--tp-lb-accent-2) 28%, var(--tp-lb-border));
	color: var(--tp-lb-accent-2);
}

.tp-lb-root .tp-lb-hero-stat--spots .tp-lb-hero-stat-icon {
	color: var(--tp-lb-accent);
	background: color-mix(in srgb, var(--tp-lb-accent) 12%, var(--tp-lb-surface));
	border-color: color-mix(in srgb, var(--tp-lb-accent) 28%, var(--tp-lb-border));
}

.tp-lb-root .tp-lb-hero-stat-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	text-align: left;
}

.tp-lb-root .tp-lb-hero-stat-num {
	font-weight: 800;
	font-size: clamp(22px, 4.2vw, 28px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--tp-lb-text);
	font-variant-numeric: tabular-nums;
}

.tp-lb-root .tp-lb-hero-stat-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tp-lb-muted);
	margin-top: 6px;
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	.tp-lb-root .tp-lb-hero-stat,
	.tp-lb-root .tp-lb-hero-stat:hover {
		transition: none;
		transform: none;
	}
}

/* Period tabs */
.tp-lb-root .tp-lb-period-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px 8px 8px;
}

.tp-lb-root .tp-lb-period-tab {
	font-family: inherit;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: var(--buttons-border-radius, 8px);
	cursor: pointer;
	border: 1px solid var(--tp-lb-border);
	color: var(--tp-lb-muted);
	background: var(--tp-lb-surface);
	transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.tp-lb-root .tp-lb-period-tab:hover {
	color: var(--tp-lb-text);
	border-color: color-mix(in srgb, var(--tp-lb-accent-2) 45%, var(--tp-lb-border));
	background: color-mix(in srgb, var(--tp-lb-accent-2) 8%, var(--tp-lb-surface));
}

.tp-lb-root .tp-lb-period-tab.is-active {
	border-color: color-mix(in srgb, var(--tp-lb-accent) 55%, var(--tp-lb-border));
	color: var(--tp-lb-accent);
	background: color-mix(in srgb, var(--tp-lb-accent) 10%, var(--tp-lb-surface));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--tp-lb-accent) 15%, transparent);
}

.tp-lb-root .tp-lb-period-tab:disabled {
	opacity: 0.55;
	cursor: wait;
}

/* Section labels */
.tp-lb-root .tp-lb-section-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tp-lb-accent-2);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tp-lb-root .tp-lb-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, color-mix(in srgb, var(--tp-lb-accent-2) 35%, transparent), transparent);
}

/* Podium */
.tp-lb-root .tp-lb-podium {
	padding: 20px 8px 44px;
	position: relative;
}

.tp-lb-root .tp-lb-podium .tp-lb-section-label {
	margin-bottom: 22px;
}

.tp-lb-root .tp-lb-podium-glow {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(560px, 95vw);
	height: 360px;
	background: radial-gradient(
		ellipse,
		color-mix(in srgb, var(--tp-lb-accent-2) 20%, transparent) 0%,
		transparent 72%
	);
	pointer-events: none;
	animation: tp-lb-glow 4s ease-in-out infinite;
}

@keyframes tp-lb-glow {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 0.9;
	}
}

.tp-lb-root .tp-lb-podium-grid {
	display: grid;
	grid-template-columns: 1fr 1.08fr 1fr;
	gap: 12px;
	align-items: end;
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.tp-lb-root .tp-lb-podium-card {
	border-radius: 16px;
	overflow: visible;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.tp-lb-root .tp-lb-podium-card:not(.tp-lb-podium-card--empty):hover {
	transform: translateY(-5px);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 {
	padding: 1px;
	background: linear-gradient(
		145deg,
		var(--tp-lb-accent),
		var(--tp-lb-accent-2),
		color-mix(in srgb, var(--tp-lb-accent) 65%, white)
	);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--tp-lb-accent) 25%, transparent),
		0 16px 40px color-mix(in srgb, var(--tp-lb-accent-2) 18%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1:not(.tp-lb-podium-card--empty):hover {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--tp-lb-accent) 40%, transparent),
		0 22px 48px color-mix(in srgb, var(--tp-lb-accent) 22%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-2,
.tp-lb-root .tp-lb-podium-card--empty {
	background: linear-gradient(
		155deg,
		color-mix(in srgb, var(--tp-lb-surface-elevated) 94%, var(--tp-lb-accent-2) 6%),
		color-mix(in srgb, var(--tp-lb-surface) 90%, transparent)
	);
	border: 1px solid color-mix(in srgb, var(--tp-lb-accent-2) 22%, var(--tp-lb-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tp-lb-text) 5%, transparent),
		0 12px 28px color-mix(in srgb, var(--tp-lb-accent-2) 10%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-3 {
	--tp-lb-bronze: #c97d4e;
	--tp-lb-bronze-bright: #e8a878;
	--tp-lb-bronze-deep: #8b4d2a;
	background: linear-gradient(
		155deg,
		color-mix(in srgb, var(--tp-lb-bronze) 22%, var(--tp-lb-surface-elevated)),
		color-mix(in srgb, var(--tp-lb-surface) 88%, var(--tp-lb-bronze-deep))
	);
	border: 1px solid color-mix(in srgb, var(--tp-lb-bronze) 55%, var(--tp-lb-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tp-lb-bronze-bright) 15%, transparent),
		0 12px 28px color-mix(in srgb, var(--tp-lb-bronze) 18%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-2:not(.tp-lb-podium-card--empty):hover {
	border-color: color-mix(in srgb, var(--tp-lb-accent-2) 38%, var(--tp-lb-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tp-lb-text) 6%, transparent),
		0 16px 36px color-mix(in srgb, var(--tp-lb-accent-2) 14%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-3:not(.tp-lb-podium-card--empty):hover {
	border-color: color-mix(in srgb, var(--tp-lb-bronze-bright) 45%, var(--tp-lb-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tp-lb-bronze-bright) 12%, transparent),
		0 16px 36px color-mix(in srgb, var(--tp-lb-bronze) 28%, transparent);
}

.tp-lb-root .tp-lb-podium-inner {
	border-radius: 15px;
	overflow: visible;
	background: var(--tp-lb-surface-elevated);
	height: 100%;
	position: relative;
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-inner {
	border-radius: 14px;
}

.tp-lb-root .tp-lb-podium-card:not(.tp-lb-rank-1) .tp-lb-podium-inner,
.tp-lb-root .tp-lb-podium-card--empty .tp-lb-podium-inner {
	border-radius: 15px;
}

.tp-lb-root .tp-lb-podium-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

.tp-lb-root .tp-lb-podium-place-corner {
	position: absolute;
	top: 8px;
	left: 6px;
	right: auto;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	padding: 8px 12px 10px;
	border-radius: 14px;
	text-align: left;
	pointer-events: none;
	background: color-mix(in srgb, var(--tp-lb-surface-elevated) 78%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid color-mix(in srgb, var(--tp-lb-border) 55%, transparent);
	box-shadow:
		0 2px 0 color-mix(in srgb, black 12%, transparent),
		0 10px 28px color-mix(in srgb, black 35%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-place-corner {
	top: 10px;
	left: 8px;
	padding: 10px 14px 12px;
	border-radius: 16px;
}

.tp-lb-root .tp-lb-podium-photo-wrap {
	position: relative;
	width: 100%;
	margin: 0 0 4px;
	padding: 0 0 12px;
	box-sizing: border-box;
}

.tp-lb-root .tp-lb-podium-photo-wrap--empty {
	padding-bottom: 8px;
}

.tp-lb-root .tp-lb-podium-banner {
	width: 100%;
	height: 78px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 14px 14px 0 0;
	position: relative;
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-banner {
	height: 90px;
}

.tp-lb-root .tp-lb-podium-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--tp-lb-surface-elevated) 35%, transparent) 55%,
		color-mix(in srgb, var(--tp-lb-surface-elevated) 75%, black) 100%
	);
	pointer-events: none;
}

.tp-lb-root .tp-lb-podium-banner--fallback {
	background: linear-gradient(
		125deg,
		color-mix(in srgb, var(--tp-lb-accent-2) 22%, var(--tp-lb-surface)),
		color-mix(in srgb, var(--tp-lb-accent) 12%, var(--tp-lb-surface-elevated))
	);
}

.tp-lb-root .tp-lb-podium-banner--fallback::after {
	opacity: 0.45;
}

.tp-lb-root .tp-lb-podium-avatar-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: -42px;
	z-index: 2;
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-avatar-slot {
	margin-top: -50px;
}

.tp-lb-root .tp-lb-podium-photo-pair {
	position: relative;
	width: 88px;
	margin: 0 auto;
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-photo-pair {
	width: 102px;
}

.tp-lb-root .tp-lb-podium-photo {
	position: relative;
	overflow: hidden;
	width: 88px;
	height: 88px;
	margin: 0 auto;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow:
		0 0 0 3px var(--tp-lb-surface-elevated),
		0 0 0 4px color-mix(in srgb, var(--tp-lb-border) 55%, transparent),
		0 10px 28px color-mix(in srgb, black 40%, transparent);
	background: var(--tp-lb-surface-elevated);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-photo {
	width: 102px;
	height: 102px;
	box-shadow:
		0 0 0 3px var(--tp-lb-surface-elevated),
		0 0 0 4px color-mix(in srgb, var(--tp-lb-accent) 40%, transparent),
		0 12px 32px color-mix(in srgb, var(--tp-lb-accent-2) 35%, transparent);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-3 .tp-lb-podium-photo {
	box-shadow:
		0 0 0 3px var(--tp-lb-surface-elevated),
		0 0 0 4px color-mix(in srgb, #d4915c 70%, #5c3824),
		0 10px 28px color-mix(in srgb, #8b4d2a 32%, transparent);
}

.tp-lb-root .tp-lb-podium-photo--empty {
	width: 88px;
	height: 88px;
	min-height: 0;
	margin: 0 auto;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--tp-lb-accent-2) 14%, var(--tp-lb-surface)),
		var(--tp-lb-surface-elevated)
	);
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-photo--empty {
	width: 102px;
	height: 102px;
}

.tp-lb-root .tp-lb-podium-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.45s ease;
}

.tp-lb-root .tp-lb-podium-card:hover .tp-lb-podium-photo img {
	transform: scale(1.05);
}

.tp-lb-root .tp-lb-podium-photo-overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		180deg,
		transparent 55%,
		color-mix(in srgb, black 18%, transparent) 100%
	);
	pointer-events: none;
	opacity: 0.85;
}

.tp-lb-root .tp-lb-podium-body {
	width: 100%;
	padding: 4px 14px 14px;
	box-sizing: border-box;
}

.tp-lb-root .tp-lb-podium-username {
	font-weight: 800;
	font-size: 15px;
	color: var(--tp-lb-text);
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}

.tp-lb-root .tp-lb-podium-handle {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tp-lb-muted);
	margin-bottom: 10px;
}

.tp-lb-root .tp-lb-podium-stat-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.tp-lb-root .tp-lb-podium-stat-row .tp-lb-podium-stat-num {
	font-size: clamp(18px, 3.2vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	color: color-mix(in srgb, var(--tp-lb-text) 35%, var(--tp-lb-muted));
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.tp-lb-root .tp-lb-podium-stat-row .tp-lb-podium-stat-label {
	font-size: clamp(12px, 2vw, 14px);
	font-weight: 600;
	color: var(--tp-lb-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	opacity: 0.9;
}

.tp-lb-root .tp-lb-podium-place-num {
	display: block;
	font-weight: 900;
	font-size: clamp(30px, 6.5vw, 44px);
	letter-spacing: -0.05em;
	line-height: 0.88;
	font-variant-numeric: tabular-nums;
	color: var(--tp-lb-accent);
	white-space: nowrap;
}

.tp-lb-root .tp-lb-podium-card.tp-lb-rank-1 .tp-lb-podium-place-num {
	font-size: clamp(34px, 7.2vw, 50px);
}

.tp-lb-root .tp-lb-rank-2 .tp-lb-podium-place-num {
	color: color-mix(in srgb, var(--tp-lb-text) 88%, var(--tp-lb-muted));
}

.tp-lb-root .tp-lb-rank-3 .tp-lb-podium-place-num {
	color: #f0c09a;
	text-shadow:
		0 0 1px color-mix(in srgb, #5c2e14 40%, transparent),
		0 0 22px color-mix(in srgb, #c97d4e 42%, transparent);
}

.tp-lb-root .tp-lb-podium-card--empty .tp-lb-podium-place-num {
	color: var(--tp-lb-muted);
	font-size: clamp(26px, 6vw, 40px);
	text-shadow: none;
}

/* Legacy: old corner spots / avatar medal if cached markup */
.tp-lb-root .tp-lb-podium-stat-corner,
.tp-lb-root .tp-lb-podium-medal {
	display: none !important;
}

/* Legacy: small Spots/Photos row removed from PHP/JS; hide if cached markup remains */
.tp-lb-root .tp-lb-podium-mini {
	display: none !important;
}

.tp-lb-root .tp-lb-podium-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 16px;
	text-align: center;
	margin-top: 2px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: linear-gradient(
		135deg,
		var(--tp-lb-accent) 0%,
		color-mix(in srgb, var(--tp-lb-accent) 75%, var(--tp-lb-accent-2)) 100%
	);
	border: 1px solid color-mix(in srgb, var(--tp-lb-accent) 55%, transparent);
	box-shadow:
		0 2px 0 color-mix(in srgb, black 18%, transparent),
		0 8px 24px color-mix(in srgb, var(--tp-lb-accent) 28%, transparent);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		filter 0.18s ease;
}

.tp-lb-root .tp-lb-podium-btn::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	margin-top: -2px;
	opacity: 0.95;
}

.tp-lb-root .tp-lb-podium-link:hover .tp-lb-podium-btn {
	filter: brightness(1.08);
	box-shadow:
		0 2px 0 color-mix(in srgb, black 22%, transparent),
		0 12px 32px color-mix(in srgb, var(--tp-lb-accent) 38%, transparent);
	transform: translateY(-1px);
}

.tp-lb-root .tp-lb-podium-link:active .tp-lb-podium-btn {
	transform: translateY(0);
	filter: brightness(0.96);
}

.tp-lb-root .tp-lb-podium-btn-txt {
	position: relative;
}

.tp-lb-root .tp-lb-podium-link:focus-visible .tp-lb-podium-btn {
	outline: 2px solid var(--tp-lb-accent-2);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tp-lb-root .tp-lb-podium-btn,
	.tp-lb-root .tp-lb-podium-link:hover .tp-lb-podium-btn,
	.tp-lb-root .tp-lb-podium-link:active .tp-lb-podium-btn {
		transition: none;
		transform: none;
	}
}

/* Table */
.tp-lb-root .tp-lb-table-wrap {
	padding: 8px 8px 40px;
}

.tp-lb-root .tp-lb-card {
	background: var(--tp-lb-glass);
	border: 1px solid var(--tp-lb-glass-border);
	border-radius: var(--box-border-radius, 14px);
	overflow: hidden;
	backdrop-filter: blur(10px);
}

.tp-lb-root .tp-lb-thead {
	display: grid;
	grid-template-columns: 52px 1fr 92px 76px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tp-lb-border);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-lb-muted);
}

.tp-lb-root .tp-lb-row {
	display: grid;
	grid-template-columns: 52px 1fr 92px 76px;
	padding: 10px 16px;
	align-items: center;
	border-bottom: 1px solid color-mix(in srgb, var(--tp-lb-border) 55%, transparent);
	transition: background 0.15s ease, padding-left 0.15s ease;
	position: relative;
}

.tp-lb-root .tp-lb-row:last-child {
	border-bottom: none;
}

.tp-lb-root .tp-lb-row:nth-child(odd) {
	background: color-mix(in srgb, var(--tp-lb-surface) 35%, transparent);
}

.tp-lb-root .tp-lb-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--tp-lb-accent);
	transition: width 0.2s ease;
}

.tp-lb-root .tp-lb-row:hover::before {
	width: 3px;
}

.tp-lb-root .tp-lb-row:hover {
	background: color-mix(in srgb, var(--tp-lb-accent) 6%, var(--tp-lb-surface)) !important;
	padding-left: 19px;
}

.tp-lb-root .tp-lb-rank {
	font-weight: 900;
	font-size: 17px;
	color: var(--tp-lb-muted);
}

.tp-lb-root .tp-lb-row:nth-child(1) .tp-lb-rank {
	color: var(--tp-lb-accent);
}

.tp-lb-root .tp-lb-exp {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.tp-lb-root .tp-lb-av {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
}

.tp-lb-root .tp-lb-av--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tp-lb-root .tp-lb-av--ph {
	background: var(--tp-lb-accent-2);
}

.tp-lb-root .tp-lb-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-lb-text);
	text-decoration: none;
}

.tp-lb-root a.tp-lb-name:hover {
	color: var(--tp-lb-accent);
}

.tp-lb-root .tp-lb-handle {
	font-size: 10px;
	font-weight: 600;
	color: var(--tp-lb-muted);
	margin-top: 1px;
}

.tp-lb-root .tp-lb-cell {
	font-weight: 800;
	font-size: 17px;
	color: var(--tp-lb-text);
}

.tp-lb-root .tp-lb-trend {
	font-size: 12px;
	font-weight: 700;
	color: var(--tp-lb-muted);
}

.tp-lb-root .tp-lb-trend-icon {
	display: inline-block;
	font-size: 1.4em;
	line-height: 1;
	font-weight: 800;
	vertical-align: -0.05em;
}

.tp-lb-root .tp-lb-trend--up {
	color: #34d399;
}

.tp-lb-root .tp-lb-trend--down {
	color: #f87171;
}

.tp-lb-root .tp-lb-trend--new {
	color: var(--tp-lb-accent-2);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tp-lb-root .tp-lb-th-move {
	font-weight: 800;
	letter-spacing: 0.04em;
}

.tp-lb-root .tp-lb-empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--tp-lb-muted);
	font-size: 14px;
}

/* Season highlights */
.tp-lb-root .tp-lb-season {
	padding: 8px 8px 32px;
}

.tp-lb-root .tp-lb-ss-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.tp-lb-root .tp-lb-ss-card {
	background: var(--tp-lb-glass);
	border: 1px solid var(--tp-lb-glass-border);
	border-radius: var(--box-border-radius, 12px);
	padding: 20px;
	backdrop-filter: blur(10px);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tp-lb-root .tp-lb-ss-card:hover {
	border-color: color-mix(in srgb, var(--tp-lb-accent-2) 40%, var(--tp-lb-border));
	box-shadow: 0 8px 28px color-mix(in srgb, var(--tp-lb-accent-2) 12%, transparent);
	transform: translateY(-2px);
}

.tp-lb-root .tp-lb-ss-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--buttons-border-radius, 8px);
	background: color-mix(in srgb, var(--tp-lb-accent-2) 12%, var(--tp-lb-surface));
	border: 1px solid color-mix(in srgb, var(--tp-lb-accent-2) 25%, var(--tp-lb-border));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tp-lb-accent-2);
	margin-bottom: 14px;
}

.tp-lb-root .tp-lb-ss-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tp-lb-muted);
	margin-bottom: 6px;
}

.tp-lb-root .tp-lb-ss-val {
	font-weight: 800;
	font-size: 18px;
	color: var(--tp-lb-text);
	line-height: 1.3;
}

.tp-lb-root .tp-lb-ss-val em {
	font-style: normal;
	color: var(--tp-lb-accent);
}

/* Footer strip inside main */
.tp-lb-root .tp-lb-footer {
	text-align: center;
	padding: 28px 8px 8px;
	margin-top: 16px;
	border-top: 1px solid var(--tp-lb-border);
}

.tp-lb-root .tp-lb-ft-copy {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tp-lb-muted);
	margin-bottom: 14px;
}

.tp-lb-root .tp-lb-ft-discord {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	background: color-mix(in srgb, #5865f2 10%, var(--tp-lb-surface));
	border: 1px solid color-mix(in srgb, #5865f2 35%, var(--tp-lb-border));
	border-radius: 20px;
	color: #7289da;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.tp-lb-root .tp-lb-ft-discord:hover {
	background: color-mix(in srgb, #5865f2 18%, var(--tp-lb-surface));
	border-color: color-mix(in srgb, #5865f2 55%, var(--tp-lb-border));
	color: #7289da;
}

.tp-lb-root .tp-lb-period-fade {
	animation: tp-lb-fade 0.26s ease;
}

@keyframes tp-lb-fade {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 960px) {
	.tp-lb-root .tp-lb-podium-grid {
		grid-template-columns: 1fr;
		max-width: 380px;
		margin: 0 auto;
	}

	.tp-lb-root .tp-lb-podium-grid .tp-lb-rank-2 {
		order: 2;
	}
	.tp-lb-root .tp-lb-podium-grid .tp-lb-rank-1 {
		order: 1;
	}
	.tp-lb-root .tp-lb-podium-grid .tp-lb-rank-3 {
		order: 3;
	}

	.tp-lb-root .tp-lb-thead,
	.tp-lb-root .tp-lb-row {
		grid-template-columns: 40px minmax(0, 1fr) 52px;
	}

	.tp-lb-root .tp-lb-col-photos {
		display: none;
	}

	.tp-lb-root .tp-lb-ss-grid {
		grid-template-columns: 1fr 1fr;
	}
}

html[data-theme="light"] .tp-lb-root {
	--tp-lb-glass: rgba(255, 255, 255, 0.92);
	--tp-lb-glass-border: rgba(230, 236, 245, 0.95);
}

html[data-theme="light"] .tp-lb-root .tp-lb-rank-3 .tp-lb-podium-place-num {
	color: #b8642a;
	text-shadow: none;
}