/* team switcher (only when the user is in more than one team - not in Figma):
   sits in the empty space under "Me / Ranking", above the crown, without pushing the podium */
.profile-ranking-tabs {
	display: flex;
	justify-content: center;
	height: 39px;
	margin: -58px 0 0;
	position: relative;
	z-index: 3; /* above the podium, which overlaps this row - otherwise the buttons cannot be clicked */
	padding: 0 12px;
}

.profile-ranking-tabs ul {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	padding: 4px;
	overflow-x: auto;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.profile-ranking-tabs ul::-webkit-scrollbar {
	display: none;
}

.profile-ranking-tabs .nav-item {
	width: auto;
	flex: 0 0 auto;
}

	.profile-ranking-tabs .nav-link {
		min-width: 58px;
		border: 0;
		border-radius: 999px !important;
		padding: 8px 14px;
		background: transparent;
		color: rgba(255, 255, 255, 0.72);
		font-size: 13px;
		font-family: "modern-era-medium", Arial, sans-serif;
		line-height: 1;
	}

.profile-ranking-tabs .nav-link.active {
	background: rgba(255, 255, 255, 0.96) !important;
	color: #194f9f !important;
	box-shadow: 0 6px 14px rgba(12, 36, 84, 0.12);
}

/* ---- Podium and list: aligned with Figma "Ranking" (8823:1969). Coordinates are relative to
   the 350 x 229 podium area that starts 37px above the blue band's tab underline. ---- */
.profile-ranking-podium {
	position: relative;
	height: 229px;
	margin: -63px 0 0;
}

/* light-beam wedges behind the podium (traced from Figma vectors 787 / 788 / 789) */
.profile-ranking-podium::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='350' height='229' viewBox='0 0 350 229'><g fill='%230e3f99'><polygon points='4,99 14,99 140,229 125,229'/><polygon points='305.5,69.5 376,69.5 226,229 214,229'/><polygon points='150.5,63 205,63 185,229.5 183,229.5'/></g></svg>") no-repeat 0 0 / 350px 229px;
	pointer-events: none;
}

	.profile-ranking-podium ul {
		position: relative;
		display: block;
		height: 229px;
		max-width: none;
		min-height: 0;
		padding: 0;
	}

.profile-ranking-podium .rank__user {
	position: absolute;
	top: 0;
	width: 110px;
	height: 229px;
	color: #fff;
}

.profile-ranking-podium .rank__user--2 { left: 0.5px; }
.profile-ranking-podium .rank__user--1 { left: 121px; }
.profile-ranking-podium .rank__user--3 { left: 241.5px; }

	.profile-ranking-podium .rank__user.center {
		top: 0;
	}

.profile-ranking-podium .rank__user picture {
	position: absolute;
	left: 50%;
	top: 83px;
	width: 63px;
	height: 63px;
	margin: 0;
	transform: translateX(-50%);
	border: 3px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: none;
}

	.profile-ranking-podium .rank__user.center picture {
		top: 48px;
		width: 84px;
		height: 84px;
	}

.profile-ranking-podium .rank__user picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-ranking-podium .rank__user .crwon {
	position: absolute;
	left: 50%;
	top: 22px;
	width: 41px;
	height: 33px;
	margin: 0;
	transform: translateX(-50%);
	border-radius: 0;
	z-index: 1;
}

.profile-ranking-podium .rank-badge {
	position: absolute;
	left: 50%;
	top: 137px;
	width: 38px;
	height: 22px;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

	.profile-ranking-podium .rank__user.center .rank-badge {
		top: 107px;
		width: 52px;
		height: 52px;
	}

.profile-ranking-podium .rank-badge img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
}

.profile-ranking-podium .rank-badge b {
	position: relative;
	margin-top: 3px;
	font-family: "Modern Era", "modern-era-medium", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	color: #000c20;
}

	.profile-ranking-podium .rank__user.center .rank-badge b {
		margin-top: 19px;
		font-family: "modern-era-medium", sans-serif;
		font-weight: 500;
		font-size: 16px;
	}

	.profile-ranking-podium .rank__user h6 {
		position: absolute;
		left: -4px;
		right: -4px;
		top: 165px;
		max-width: none;
		margin: 0;
		font-size: 16px;
		line-height: 1;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.profile-ranking-podium .rank__user.center h6 {
		top: 151px;
	}

.profile-ranking-podium .rank__user label {
	position: absolute;
	left: 50%;
	top: 187px;
	min-width: 63px;
	height: 24px;
	padding: 0 6px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: #fff;
	font-family: "modern-era-medium", sans-serif;
	font-size: 16px;
	line-height: 1;
	color: #000c20;
}

	.profile-ranking-podium .rank__user.center label {
		top: 179px;
	}

.profile-ranking-list {
	padding: 28px 0 0 4px;
	background: transparent;
	border-radius: 0;
}

.profile-ranking-list ul li {
	position: relative;
	gap: 0;
	height: 48px;
	min-height: 0;
	margin-bottom: 28px;
}

.profile-ranking-list ul li > span {
	width: 12px;
	flex: 0 0 12px;
	margin-right: 8px;
	color: #000c20;
	font-size: 14px;
	font-family: "Modern Era", "modern-era-medium", sans-serif;
	font-weight: 400;
	line-height: 1;
	text-align: center;
}

.profile-ranking-list .rank__user-name {
	gap: 12px;
	width: 208px;
	flex: 0 0 208px;
}

.profile-ranking-list .rank__user-name picture {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 50%;
	overflow: hidden;
}

.profile-ranking-list .rank__user-name picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-ranking-list .rank__user-name > div {
	min-width: 0;
	padding-bottom: 1px;
}

.profile-ranking-list .rank__user-name h6 {
	max-width: 118px;
	color: #000c20;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-ranking-list .rank__user-name p {
	margin-top: 4px;
	color: #102b59;
	font-family: "Modern Era", "modern-era-medium", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
}

.profile-ranking-list ul li label {
	min-width: 63px;
	height: 24px;
	margin: 0;
	padding: 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: #fff;
	color: #000c20;
	font-family: "modern-era-medium", sans-serif;
	font-size: 16px;
	line-height: 1;
}

.profile-ranking-list ul li a {
	display: flex;
	width: 13px;
	height: 13px;
	margin-left: 20px;
	align-items: center;
	justify-content: center;
}

.profile-ranking-list ul li a img {
	width: 13px;
	height: 3px;
}

/* with the team switcher the podium starts 28px lower (crown 6px under the switcher) */
.profile-ranking-podium.has-team-tabs {
	margin-top: -35px; /* the switcher column collapses to 0 height */
}

/* the podium always fits the screen: 2nd at the left edge, 1st centred, 3rd at the right edge */
.profile-ranking-podium .rank__user {
	width: min(110px, 33.333%);
}
.profile-ranking-podium .rank__user--2 { left: 0; }
.profile-ranking-podium .rank__user--1 { left: 50%; transform: translateX(-50%); }
.profile-ranking-podium .rank__user--3 { left: auto; right: 0; }

.profile-ranking-podium .rank__user h6 {
	left: 0;
	right: 0;
}