/*
//=====================================================================================
*/

.account_page
{
	--account_header: 48px;
	--account_fill: calc(100dvh - var(--topbar) - 16px - var(--account_header) - var(--gap) - 20px);
	max-width: 1480px;
	margin-inline: auto;
}

.account_header
{
	gap: 14px 24px;
}

.account_icon .icon
{
	width: 26px;
	height: 26px;
	color: var(--violet_soft);
}

.account_icon_gold
{
	background: linear-gradient(160deg, rgba(245, 196, 81, 0.26), rgba(245, 196, 81, 0.05)), var(--surface);
	border-color: rgba(245, 196, 81, 0.3);
	box-shadow: 0 14px 30px -18px rgba(217, 154, 30, 0.7);
}

.account_icon_gold .icon
{
	color: var(--gold);
}

.account_tools
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

.period_switch
{
	width: 330px;
}

.period_switch .segment
{
	height: 34px;
	font-size: 13.5px;
}

.clock_chip
{
	justify-content: center;
	min-width: 196px;
	height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	color: var(--text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.clock_chip .icon
{
	color: var(--violet_soft);
}

.panel_note
{
	color: var(--text_mute);
	font-size: 12px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.account_title
{
	display: flex;
	align-items: center;
	gap: 9px;
}

.account_title .icon
{
	width: 18px;
	height: 18px;
	color: var(--violet_soft);
}

.money_gold
{
	color: #f1d27f;
}

.signed_value
{
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.signed_value.is_up
{
	color: #6ee7b7;
}

.signed_value.is_down
{
	color: #fda4af;
}

.signed_value.is_flat
{
	color: var(--text_mute);
}

.name_text
{
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.you_tag
{
	flex: none;
	padding: 3px 7px;
	border-radius: 999px;
	color: #ede9fe;
	font: 700 10px/1 var(--font_body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(139, 92, 246, 0.32);
	border: 1px solid rgba(167, 139, 250, 0.4);
}

/*
//=====================================================================================
*/

.account_loading
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 120px;
	padding: 24px;
	color: var(--text_mute);
}

.account_loading .spinner
{
	display: block;
	border-color: rgba(167, 139, 250, 0.25);
	border-top-color: var(--violet_soft);
}

.account_gate
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 44px 24px 40px;
	text-align: center;
	background: radial-gradient(70% 90% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%), var(--surface);
	border-color: var(--line_accent);
}

.gate_icon
{
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 6px;
	border-radius: 20px;
	color: var(--violet_soft);
	background: linear-gradient(160deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.06));
	border: 1px solid var(--line_strong);
	box-shadow: 0 18px 40px -20px rgba(124, 58, 237, 0.9);
}

.gate_icon .icon
{
	width: 30px;
	height: 30px;
}

.gate_title
{
	font: 700 24px/1.2 var(--font_display);
	letter-spacing: -0.01em;
}

.gate_text
{
	max-width: 440px;
	color: var(--text_dim);
}

.gate_actions
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.tier_scope[data-tier="bronze"]
{
	--tier_a: #f0a46b;
	--tier_b: #8a4519;
	--tier_text: #fbd5b5;
	--tier_soft: rgba(240, 164, 107, 0.18);
	--tier_line: rgba(240, 164, 107, 0.4);
	--tier_glow: rgba(240, 164, 107, 0.55);
}

.tier_scope[data-tier="silver"]
{
	--tier_a: #e5e9f0;
	--tier_b: #6b7a90;
	--tier_text: #eef2f7;
	--tier_soft: rgba(214, 221, 232, 0.14);
	--tier_line: rgba(214, 221, 232, 0.36);
	--tier_glow: rgba(214, 221, 232, 0.4);
}

.tier_scope[data-tier="gold"]
{
	--tier_a: #fcd34d;
	--tier_b: #b7791f;
	--tier_text: #fde68a;
	--tier_soft: rgba(245, 196, 81, 0.18);
	--tier_line: rgba(245, 196, 81, 0.42);
	--tier_glow: rgba(245, 196, 81, 0.5);
}

.tier_scope[data-tier="platinum"]
{
	--tier_a: #a5f3fc;
	--tier_b: #3b82c4;
	--tier_text: #cffafe;
	--tier_soft: rgba(103, 232, 249, 0.15);
	--tier_line: rgba(103, 232, 249, 0.4);
	--tier_glow: rgba(103, 232, 249, 0.45);
}

.tier_scope[data-tier="diamond"]
{
	--tier_a: #f0abfc;
	--tier_b: #7c3aed;
	--tier_text: #fae8ff;
	--tier_soft: rgba(232, 121, 249, 0.18);
	--tier_line: rgba(232, 121, 249, 0.45);
	--tier_glow: rgba(232, 121, 249, 0.55);
}

.tier_badge
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 11px 0 8px;
	border-radius: 999px;
	color: var(--tier_text, var(--text));
	font: 700 11px/1 var(--font_body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	background: linear-gradient(135deg, var(--tier_soft, rgba(139, 92, 246, 0.16)), rgba(255, 255, 255, 0.02));
	border: 1px solid var(--tier_line, var(--line_strong));
	box-shadow: 0 6px 18px -10px var(--tier_glow, rgba(139, 92, 246, 0.5));
}

.tier_badge .icon
{
	width: 14px;
	height: 14px;
	color: var(--tier_a, var(--violet_soft));
}

/*
//=====================================================================================
*/

.ranking_layout
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: var(--gap);
	align-items: stretch;
}

.podium_panel
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 16px 18px 0;
	overflow: hidden;
	background: radial-gradient(70% 55% at 50% 18%, rgba(245, 196, 81, 0.09), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(139, 92, 246, 0.18), transparent 72%), var(--surface);
}

.podium_note
{
	margin-top: 6px;
	padding: 10px 14px;
	border-radius: 12px;
	color: var(--text_dim);
	font-size: 13px;
	text-align: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px dashed rgba(167, 139, 250, 0.28);
}

.podium
{
	--block_base: 128px;
	--avatar: 60px;
	--avatar_top: 78px;
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
	align-items: end;
	gap: 12px;
	margin: 0;
	padding: 22px 0 0;
	list-style: none;
}

.podium_slot
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.podium_place_1
{
	order: 2;
	--medal: #f5c451;
	--medal_deep: #b7791f;
	--medal_soft: rgba(245, 196, 81, 0.2);
	--medal_line: rgba(245, 196, 81, 0.34);
	--medal_glow: rgba(245, 196, 81, 0.42);
	--block: var(--block_base);
	--rise: 180ms;
}

.podium_place_2
{
	order: 1;
	--medal: #e2e8f0;
	--medal_deep: #7d8aa0;
	--medal_soft: rgba(203, 213, 225, 0.14);
	--medal_line: rgba(203, 213, 225, 0.26);
	--medal_glow: rgba(203, 213, 225, 0.3);
	--block: calc(var(--block_base) * 0.75);
	--rise: 90ms;
}

.podium_place_3
{
	order: 3;
	--medal: #f0a46b;
	--medal_deep: #9a4f22;
	--medal_soft: rgba(240, 164, 107, 0.15);
	--medal_line: rgba(240, 164, 107, 0.28);
	--medal_glow: rgba(240, 164, 107, 0.34);
	--block: calc(var(--block_base) * 0.58);
	--rise: 0ms;
}

.podium_player
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 0 2px 14px;
	text-align: center;
}

.podium_crown
{
	width: 44px;
	height: 33px;
	margin-bottom: -2px;
	filter: drop-shadow(0 6px 14px rgba(217, 154, 30, 0.45));
}

.podium_ring
{
	position: relative;
	display: grid;
	place-items: center;
	padding: 3px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, var(--medal), var(--medal_deep), var(--medal), var(--medal_deep), var(--medal));
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.025), 0 16px 38px -14px var(--medal_glow);
}

.podium_ring .avatar
{
	width: var(--avatar);
	height: var(--avatar);
	font-size: calc(var(--avatar) * 0.32);
	box-shadow: 0 0 0 3px var(--surface);
}

.podium_place_1 .podium_ring .avatar
{
	width: var(--avatar_top);
	height: var(--avatar_top);
	font-size: calc(var(--avatar_top) * 0.31);
}

.podium_name
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	margin-top: 8px;
	font: 650 14.5px/1.25 var(--font_display);
}

.podium_place_1 .podium_name
{
	font-size: 16.5px;
}

.podium_amount
{
	font-size: 14.5px;
	font-weight: 600;
}

.podium_unit
{
	margin-left: 5px;
	color: var(--text_mute);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.podium_place_1 .podium_amount
{
	font-size: 16px;
}

.podium_meta
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 8px;
	color: var(--text_mute);
	font-size: 12px;
}

.podium_block
{
	position: relative;
	display: flex;
	justify-content: center;
	height: var(--block);
	padding-top: 12px;
	overflow: hidden;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(180deg, var(--medal_soft), rgba(255, 255, 255, 0.012) 90%);
	border: 1px solid var(--medal_line);
	border-bottom: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transform-origin: center bottom;
}

.podium_block::before
{
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--medal), transparent);
	opacity: 0.8;
}

.podium_place_1 .podium_block::after
{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%);
	transform: translateX(-130%);
}

.podium_number
{
	font: 800 38px/1 var(--font_display);
	background: linear-gradient(180deg, #ffffff 10%, var(--medal) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 4px 12px var(--medal_glow));
}

.podium_place_1 .podium_number
{
	font-size: 50px;
}

.podium_slot.is_me .podium_ring
{
	box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--violet_soft), 0 16px 38px -14px var(--medal_glow);
}

.podium_slot.is_open .podium_ring
{
	padding: 2px;
	background: none;
	border: 1.5px dashed rgba(255, 255, 255, 0.18);
	box-shadow: none;
}

.podium_open
{
	color: var(--text_mute);
	background: rgba(255, 255, 255, 0.04);
}

.podium_slot.is_open .podium_name
{
	color: var(--text_mute);
}

.podium_slot.is_open .podium_block,
.podium_slot.is_open .podium_crown
{
	opacity: 0.5;
}

.podium_slot.is_skeleton .podium_ring
{
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.podium_slot.is_skeleton .avatar
{
	background: rgba(255, 255, 255, 0.04);
}

.skeleton_line
{
	display: block;
	width: 70%;
	height: 10px;
	margin-top: 8px;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
	background-size: 200% 100%;
}

.skeleton_short
{
	width: 45%;
	margin-top: 2px;
}

.ranks_panel
{
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 16px 18px;
}

.rank_table th,
.rank_table td
{
	padding: 8px 10px;
}

.rank_table .rank_num
{
	text-align: right;
}

.rank_row td
{
	transition: background 0.2s;
}

.rank_row:hover td
{
	background: rgba(255, 255, 255, 0.02);
}

.rank_row.is_me td
{
	background: rgba(139, 92, 246, 0.12);
}

.rank_row.is_me td:first-child
{
	box-shadow: inset 2px 0 0 var(--violet_soft);
}

.rank_num .money,
.rank_num .signed_value
{
	font-weight: 600;
}

.rank_badge
{
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 26px;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--text_dim);
	font: 650 12.5px/1 var(--font_display);
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--line);
}

.rank_badge_me
{
	min-width: 48px;
	height: 30px;
	color: #fff;
	font-size: 14px;
	background: linear-gradient(180deg, #8f62f7, #7340ea);
	border-color: transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px -10px rgba(124, 58, 237, 0.9);
}

.rank_player
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.rank_player .avatar
{
	width: 28px;
	height: 28px;
	font-size: 10.5px;
}

.rank_name
{
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: clamp(110px, 13vw, 240px);
	color: var(--text);
	font-weight: 600;
}

.ranks_empty
{
	display: grid;
	flex: 1;
	place-items: center;
	padding: 28px 12px;
}

.me_bar
{
	flex: none;
	margin-top: auto;
	padding-top: 14px;
}

.me_ranked
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "label label label" "rank player stats";
	align-items: center;
	gap: 8px 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05) 70%), var(--surface_raise);
	border: 1px solid var(--line_strong);
	box-shadow: 0 14px 34px -24px rgba(124, 58, 237, 0.9);
}

.me_label
{
	grid-area: label;
	color: var(--violet_soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.me_ranked .rank_badge_me
{
	grid-area: rank;
}

.me_ranked .rank_player
{
	grid-area: player;
}

.me_name
{
	overflow: hidden;
	color: var(--text);
	font-weight: 650;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.me_stats
{
	grid-area: stats;
	display: flex;
	gap: 18px;
	margin: 0;
}

.me_stats div
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.me_stats dt
{
	color: var(--text_mute);
	font-size: 11px;
}

.me_stats dd
{
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.me_prompt
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px dashed rgba(167, 139, 250, 0.3);
}

.me_prompt_icon
{
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 11px;
	color: var(--violet_soft);
	background: rgba(139, 92, 246, 0.14);
}

.me_prompt_icon .icon
{
	width: 18px;
	height: 18px;
}

.me_prompt_text
{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--text_mute);
	font-size: 12.5px;
}

.me_prompt_text strong
{
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
}

.me_games,
.me_actions
{
	display: flex;
	flex: none;
	gap: 8px;
}

.me_game
{
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--tint_a, var(--violet)), var(--tint_b, var(--violet_deep)));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

.me_game svg
{
	width: 24px;
	height: 24px;
}

.me_game:hover
{
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 20px -10px var(--tint_a, var(--violet));
}

/*
//=====================================================================================
*/

/*
//=====================================================================================
race banner (leaderboard)
*/

.race_strip
{
	display: flex;
	flex: none;
	gap: var(--gap);
	min-width: 0;
}

.race_strip[hidden]
{
	display: none;
}

.race_strip .race_banner
{
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
	padding: 6px 14px 6px 8px;
	gap: 16px;
}

.race_strip .race_banner > *
{
	flex: none;
}

.race_strip .race_banner > .race_head
{
	flex: 0 1 auto;
}

.race_strip .race_banner > .race_chips
{
	flex: 1 1 0;
}

.race_strip .race_chip_who
{
	grid-template-columns: minmax(0, 1fr);
}

.race_strip .race_chip_value
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.race_strip .race_mark
{
	width: 32px;
	height: 32px;
}

.race_strip .race_chips
{
	flex-wrap: wrap;
	height: 34px;
	container-type: inline-size;
}

@container (max-width: 110px)
{
	.race_strip .race_banner .race_chip
	{
		display: none;
	}
}

.race_strip .race_banner .race_chip
{
	display: flex;
	flex: 0 1 auto;
	max-width: 100%;
}

.race_strip .race_me
{
	grid-template-columns: auto auto;
	align-items: baseline;
	column-gap: 8px;
}

.race_strip .race_me .race_label
{
	grid-column: 1 / -1;
}

.race_strip .race_empty
{
	overflow: hidden;
	max-width: 100%;
	line-height: 34px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.leaderboard_page.is_race .race_banner
{
	border-color: rgba(245, 196, 81, 0.5);
}

.leaderboard_page.is_race .race_link
{
	display: none;
}

.race_last
{
	display: grid;
	flex: none;
	align-content: center;
	gap: 3px;
	max-width: 240px;
	padding: 6px 14px;
}

.race_last_line
{
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 12.5px;
}

.race_last_line .avatar
{
	width: 22px;
	height: 22px;
	font-size: 9px;
}

.race_last_name
{
	overflow: hidden;
	min-width: 0;
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.race_last_line .money
{
	flex: none;
	color: var(--gold);
	font-weight: 700;
}

.rank_prize_value,
.podium_prize
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--gold);
	font-weight: 700;
	white-space: nowrap;
}

.rank_prize_value .icon,
.podium_prize .icon
{
	width: 13px;
	height: 13px;
	color: var(--gold);
}

.podium_prize
{
	margin-top: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	background: rgba(245, 196, 81, 0.1);
	border: 1px solid rgba(245, 196, 81, 0.28);
}

@media (max-width: 1280px)
{
	.race_last
	{
		display: none;
	}
}

@media (max-height: 760px) and (min-width: 1101px)
{
	.leaderboard_page.has_race .rank_table thead th
	{
		height: 24px;
	}

	.leaderboard_page.has_race .rank_table .rank_badge
	{
		height: 21px;
	}

	.leaderboard_page.has_race .rank_table .avatar
	{
		width: 22px;
		height: 22px;
		font-size: 9px;
	}

	.leaderboard_page.has_race .rank_table .rank_bar
	{
		display: none;
	}
}

@media (max-width: 1100px)
{
	.race_strip
	{
		flex-wrap: wrap;
	}
}

/*
//=====================================================================================
*/

.leaderboard_page
{
	--gap: 14px;
}

.leaderboard_page .account_header .game_tagline
{
	display: block;
}

.leaderboard_page .account_header .game_name
{
	line-height: 1.12;
}

.leaderboard_page .rank_player .avatar
{
	display: grid;
}

.leaderboard_page .rank_table td
{
	padding-top: 1px;
	padding-bottom: 1px;
}

.leaderboard_page .rank_text
{
	gap: 3px;
}

.board_deck
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 12px;
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.07), transparent 70%), var(--surface);
}

.metric_tabs
{
	container: metric_tabs / inline-size;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 6px;
}

.metric_tab
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	height: 40px;
	padding: 0 8px;
	border-radius: 11px;
	color: var(--text_dim);
	font-size: 13px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.metric_tab.is_live_first
{
	margin-left: 10px;
}

.metric_tab.is_live_first::before
{
	content: "";
	position: absolute;
	left: -11px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--line_strong);
}

.metric_tab:hover
{
	color: var(--text);
	border-color: var(--line_accent);
}

.metric_tab[aria-selected="true"]
{
	color: #fff;
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.34), rgba(109, 40, 217, 0.22));
	border-color: rgba(167, 139, 250, 0.45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px -16px rgba(124, 58, 237, 0.9);
}

.metric_tab_icon
{
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 7px;
	color: var(--violet_soft);
	background: rgba(139, 92, 246, 0.14);
}

.metric_tab_icon .icon
{
	width: 15px;
	height: 15px;
}

.metric_tab[aria-selected="true"] .metric_tab_icon
{
	color: #2a1a05;
	background: linear-gradient(180deg, #f8d77a, var(--gold_deep));
}

.metric_tab_label,
.metric_tab_short
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.metric_tab_short
{
	display: none;
}

@container metric_tabs (max-width: 1080px)
{
	.metric_tab_label
	{
		display: none;
	}

	.metric_tab_short
	{
		display: inline;
	}
}

.game_strip
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	height: 38px;
}

.strip_label
{
	flex: none;
	color: var(--text_mute);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.game_picker
{
	display: flex;
	flex: 1;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.game_picker::-webkit-scrollbar
{
	display: none;
}

.game_pick
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	height: 36px;
	padding: 0 12px 0 4px;
	border-radius: 999px;
	color: var(--text_dim);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.game_pick:hover
{
	color: var(--text);
	border-color: var(--line_accent);
}

.game_pick_art
{
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tint_a, var(--violet)), var(--tint_b, var(--violet_deep)));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.game_pick.is_all .game_pick_art
{
	color: var(--violet_soft);
	background: rgba(139, 92, 246, 0.16);
}

.game_pick_art .icon
{
	width: 16px;
	height: 16px;
}

.game_pick_svg
{
	width: 21px;
	height: 21px;
}

.game_pick[aria-checked="true"]
{
	color: #fff;
	background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.12));
	border-color: rgba(167, 139, 250, 0.5);
}

.strip_arrow
{
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	color: var(--text_dim);
	background: var(--surface_high);
	border: 1px solid var(--line_accent);
	transition: color 0.2s, border-color 0.2s;
}

.strip_arrow:hover
{
	color: #fff;
	border-color: var(--line_strong);
}

.strip_arrow .icon
{
	width: 16px;
	height: 16px;
}

.live_note
{
	display: flex;
	align-items: center;
	gap: 9px;
	height: 38px;
	padding: 0 12px;
	border-radius: 11px;
	color: var(--text_dim);
	font-size: 13px;
	background: rgba(52, 211, 153, 0.06);
	border: 1px dashed rgba(52, 211, 153, 0.3);
}

.live_note .icon
{
	width: 17px;
	height: 17px;
	color: var(--green);
}

.period_switch.is_off
{
	opacity: 0.35;
	pointer-events: none;
}

.multiplier_value,
.count_value
{
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.multiplier_value
{
	color: #c4b5fd;
}

/*
//=====================================================================================
*/

.profile_layout
{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
}

.profile_band
{
	display: grid;
	grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.45fr);
	gap: var(--gap);
}

.profile_lower
{
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
	gap: var(--gap);
}

.account_hero
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 20px 22px;
	overflow: hidden;
	background: radial-gradient(70% 120% at 0% 0%, var(--tier_soft, rgba(139, 92, 246, 0.16)), transparent 70%), linear-gradient(160deg, rgba(124, 58, 237, 0.16), rgba(17, 15, 32, 0.3) 60%), var(--surface);
	border-color: var(--line_strong);
}

.account_identity
{
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.account_ring
{
	display: grid;
	place-items: center;
	flex: none;
	padding: 4px;
	border-radius: 50%;
	background: conic-gradient(from 210deg, var(--tier_a, var(--violet_soft)), var(--tier_b, var(--violet_deep)), var(--tier_a, var(--violet_soft)));
	box-shadow: 0 18px 44px -18px var(--tier_glow, rgba(139, 92, 246, 0.6));
}

.account_ring .avatar
{
	width: 72px;
	height: 72px;
	font-size: 24px;
	box-shadow: 0 0 0 4px var(--surface);
}

.account_who
{
	min-width: 0;
}

.account_name_row
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	min-width: 0;
}

.account_name
{
	max-width: 100%;
	overflow: hidden;
	font: 700 26px/1.15 var(--font_display);
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.account_since
{
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 6px;
	color: var(--text_dim);
	font-size: 13px;
}

.account_since .icon
{
	color: var(--text_mute);
}

.account_level
{
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(8, 7, 15, 0.45);
	border: 1px solid var(--line);
}

.level_head,
.level_foot
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.level_title
{
	color: var(--text_dim);
	font: 600 14px/1 var(--font_display);
}

.level_title strong
{
	margin-left: 4px;
	color: var(--text);
	font-size: 24px;
	font-weight: 700;
}

.level_xp
{
	color: var(--text_dim);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.level_meter
{
	height: 9px;
}

.level_meter .meter_fill
{
	background: linear-gradient(90deg, var(--violet), var(--violet_soft) 60%, var(--cyan));
	box-shadow: 0 0 14px rgba(139, 92, 246, 0.6);
}

.level_foot
{
	color: var(--text_mute);
	font-size: 12px;
}

.account_panel
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 18px 18px;
}

.account_stats
{
	display: grid;
	flex: 1;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	gap: 10px;
}

.account_stat
{
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 12px 14px;
}

.account_stat .stat_value
{
	display: flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	overflow: hidden;
	font-size: 18px;
	white-space: nowrap;
}

.stat_none
{
	color: var(--text_mute);
	font-size: 14px;
	font-weight: 500;
}

.stat_game_icon
{
	width: 22px;
	height: 22px;
	flex: none;
}

.account_ranks
{
	display: grid;
	flex: 1;
	grid-auto-rows: minmax(0, 1fr);
	gap: 10px;
}

.rank_tile
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "label value" "note value";
	align-content: center;
	align-items: center;
	gap: 2px 12px;
	padding: 10px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease);
}

.rank_tile:hover
{
	background: rgba(139, 92, 246, 0.06);
	border-color: var(--line_strong);
	transform: translateY(-1px);
}

.rank_tile_label
{
	grid-area: label;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
}

.rank_tile_note
{
	grid-area: note;
	color: var(--text_mute);
	font-size: 12px;
}

.rank_tile_value
{
	grid-area: value;
	color: var(--text);
	font: 700 24px/1 var(--font_display);
	font-variant-numeric: tabular-nums;
}

.rank_tile.is_unranked .rank_tile_value
{
	color: var(--text_mute);
	font-size: 14px;
	font-weight: 600;
}

.rank_tile.is_podium
{
	background: radial-gradient(90% 140% at 100% 50%, rgba(245, 196, 81, 0.12), transparent 70%), rgba(255, 255, 255, 0.02);
	border-color: rgba(245, 196, 81, 0.32);
}

.rank_tile.is_podium .rank_tile_value
{
	color: var(--gold);
}

.account_section
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.account_section_head
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	min-height: 30px;
}

.account_games
{
	display: grid;
	flex: 1;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}

.game_stat_card
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	padding: 16px 18px;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}

.game_stat_card::before
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(90% 70% at 0% 0%, var(--tint_a), transparent 70%);
	opacity: 0.14;
	transition: opacity 0.3s;
}

.game_stat_card:hover
{
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: var(--shadow_card), 0 24px 40px -28px var(--tint_a);
	transform: translateY(-3px);
}

.game_stat_card:hover::before
{
	opacity: 0.22;
}

.game_stat_top
{
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.game_stat_icon
{
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--tint_a), var(--tint_b));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 26px -14px var(--tint_a);
}

.game_stat_icon svg
{
	width: 30px;
	height: 30px;
}

.game_stat_title
{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.game_stat_name
{
	font: 700 18px/1.1 var(--font_display);
}

.game_stat_sub
{
	overflow: hidden;
	color: var(--text_mute);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.game_stat_fav
{
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	color: #fde68a;
	font-size: 11px;
	font-weight: 700;
	background: rgba(245, 196, 81, 0.12);
	border: 1px solid rgba(245, 196, 81, 0.3);
}

.game_stat_fav .icon
{
	width: 14px;
	height: 14px;
}

.game_stat_fav[hidden]
{
	display: none;
}

.game_stat_list
{
	display: flex;
	flex-direction: column;
}

.game_stat_item
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--line_soft);
}

.game_stat_item:first-child
{
	padding-top: 0;
	border-top: 0;
}

.game_stat_label
{
	flex: none;
	color: var(--text_mute);
	font-size: 12.5px;
}

.game_stat_value
{
	min-width: 0;
	overflow: hidden;
	color: var(--text);
	font: 650 14.5px/1.2 var(--font_display);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}

.game_stat_value.money_gold
{
	color: #f1d27f;
}

.game_stat_meter .meter_fill
{
	background: linear-gradient(90deg, var(--tint_b), var(--tint_a));
}

.game_stat_play
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--violet_soft);
	font-size: 13px;
	font-weight: 600;
}

.game_stat_play .icon
{
	transition: transform 0.25s var(--ease);
}

.game_stat_card:hover .game_stat_play .icon
{
	transform: translateX(3px);
}

/*
//=====================================================================================
*/

.settings_grid
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
	align-items: start;
	gap: var(--gap);
}

.settings_wide
{
	grid-column: 1 / span 2;
	grid-row: 1;
}

.settings_account
{
	grid-column: 1;
	grid-row: 1;
}

.settings_password
{
	grid-column: 2;
	grid-row: 1;
}

.settings_prefs
{
	grid-column: 3;
	grid-row: 1;
}

.settings_column
{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
}

.settings_panel
{
	min-width: 0;
	padding: 18px 20px 20px;
}

.settings_gate
{
	padding: 32px 22px;
}

.settings_gate .gate_title
{
	font-size: 20px;
}

.settings_note
{
	margin-bottom: 14px;
	color: var(--text_mute);
	font-size: 13px;
}

.settings_note strong
{
	color: var(--text);
	font-weight: 600;
}

.settings_identity
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
	padding: 12px;
	border-radius: 14px;
	background: radial-gradient(80% 140% at 0% 0%, var(--tier_soft, rgba(139, 92, 246, 0.12)), transparent 70%), rgba(255, 255, 255, 0.02);
	border: 1px solid var(--line);
}

.settings_avatar .avatar
{
	width: 48px;
	height: 48px;
	font-size: 16px;
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tier_a, var(--violet_soft));
}

.settings_who
{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.settings_name
{
	overflow: hidden;
	font: 700 17px/1.2 var(--font_display);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.settings_sub
{
	color: var(--text_mute);
	font-size: 12.5px;
}

.settings_facts
{
	margin: 0;
}

.settings_facts div
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 2px;
	border-top: 1px solid var(--line_soft);
}

.settings_facts dt
{
	color: var(--text_mute);
	font-size: 13px;
}

.settings_facts dd
{
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.settings_fieldset
{
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.settings_fieldset:disabled .field_box
{
	opacity: 0.6;
}

.settings_password .field
{
	margin-bottom: 14px;
}

.settings_submit
{
	margin-top: 2px;
}

.settings_success
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 10px;
	color: #a7f3d0;
	font-size: 13px;
	background: rgba(52, 211, 153, 0.08);
	border: 1px solid rgba(52, 211, 153, 0.24);
	animation: form_in 0.3s var(--ease) both;
}

.settings_success .icon
{
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--green);
}

.settings_saved
{
	color: #6ee7b7;
	font-size: 12px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity 0.25s, transform 0.25s var(--ease);
}

.settings_saved.is_shown
{
	opacity: 1;
	transform: none;
}

.settings_saved.is_error
{
	color: #fda4af;
}

.settings_prefs
{
	display: flex;
	flex-direction: column;
}

.pref_list
{
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pref_row
{
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-top: 1px solid var(--line_soft);
}

.pref_row:first-child
{
	padding-top: 2px;
	border-top: 0;
}

.pref_icon
{
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: var(--violet_soft);
	background: rgba(139, 92, 246, 0.12);
	border: 1px solid var(--line_accent);
}

.pref_text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pref_title
{
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
}

.pref_hint
{
	color: var(--text_mute);
	font-size: 12.5px;
}

.switch
{
	position: relative;
	width: 48px;
	height: 28px;
	flex: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.switch:hover
{
	border-color: rgba(255, 255, 255, 0.22);
}

.switch:focus-visible
{
	outline-offset: 3px;
	border-radius: 999px;
}

.switch_knob
{
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #cfcbe3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	transition: transform 0.3s var(--ease), background 0.25s;
}

.switch[aria-checked="true"]
{
	background: linear-gradient(180deg, #8f62f7, #7340ea);
	border-color: rgba(167, 139, 250, 0.5);
	box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.9);
}

.switch[aria-checked="true"] .switch_knob
{
	background: #fff;
	transform: translateX(20px);
}

.pref_stepper
{
	grid-template-columns: 36px 42px 36px;
	height: 40px;
	border-radius: 11px;
}

.pref_stepper .stepper_button
{
	font-size: 19px;
}

.pref_stepper .stepper_value
{
	font-size: 18px;
}

.settings_signout
{
	width: 100%;
}

.settings_signout:hover
{
	color: #fecdd3;
	background: rgba(251, 113, 133, 0.08);
	border-color: rgba(251, 113, 133, 0.4);
}

.settings_signout.is_busy
{
	opacity: 0.6;
	pointer-events: none;
}

.rank_text
{
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.rank_bar
{
	display: block;
	width: 100%;
	max-width: 180px;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}

.rank_bar_fill
{
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--violet), var(--violet_soft));
	transform: scaleX(var(--fill, 0));
	transform-origin: left center;
}

.rank_row.is_me .rank_bar_fill
{
	background: linear-gradient(90deg, var(--gold_deep), var(--gold));
}

.rank_open
{
	color: var(--text_mute);
	font-size: 12.5px;
	letter-spacing: 0.02em;
}

.rank_row.is_open .rank_badge
{
	opacity: 0.55;
	border-style: dashed;
}

.rank_row.is_open .rank_num
{
	color: var(--text_mute);
}

.password_rules
{
	display: grid;
	gap: 6px;
	margin: 2px 0 14px;
	padding: 12px 14px;
	border-radius: 12px;
	list-style: none;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--line_soft);
}

.password_rules li
{
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text_mute);
	font-size: 12.5px;
	transition: color 0.2s;
}

.password_rules .icon
{
	width: 15px;
	height: 15px;
	padding: 2px;
	border-radius: 50%;
	color: transparent;
	background: rgba(255, 255, 255, 0.06);
	stroke-width: 2.6;
	transition: color 0.2s, background 0.2s;
}

.password_rules li.is_met
{
	color: var(--text_dim);
}

.password_rules li.is_met .icon
{
	color: #0b2a1f;
	background: var(--green);
}

/*
//=====================================================================================
*/

@media (prefers-reduced-motion: no-preference)
{
	.podium_slot.is_entering .podium_player
	{
		animation: podium_rise 0.7s var(--ease) both;
		animation-delay: var(--rise, 0ms);
	}

	.podium_slot.is_entering .podium_block
	{
		animation: podium_grow 0.8s var(--ease) both;
		animation-delay: var(--rise, 0ms);
	}

	.podium_place_1 .podium_block::after
	{
		animation: podium_shine 5s var(--ease_soft) 1.4s infinite;
	}

	.podium_crown
	{
		animation: crown_float 3.4s ease-in-out infinite;
	}

	.skeleton_line
	{
		animation: skeleton_wave 1.4s linear infinite;
	}

	.rank_row.is_entering
	{
		animation: row_in 0.5s var(--ease) both;
		animation-delay: calc(var(--index, 0) * 45ms);
	}
}

@keyframes podium_rise
{
	from
	{
		opacity: 0;
		translate: 0 18px;
	}
}

@keyframes podium_grow
{
	from
	{
		opacity: 0;
		transform: scaleY(0.35);
	}
}

@keyframes podium_shine
{
	0%
	{
		transform: translateX(-130%);
	}

	40%,
	100%
	{
		transform: translateX(130%);
	}
}

@keyframes crown_float
{
	0%,
	100%
	{
		translate: 0 0;
		rotate: -3deg;
	}

	50%
	{
		translate: 0 -4px;
		rotate: 3deg;
	}
}

@keyframes skeleton_wave
{
	from
	{
		background-position: 100% 0;
	}

	to
	{
		background-position: -100% 0;
	}
}

/*
//=====================================================================================
*/

@media (min-width: 1101px)
{
	.account_page
	{
		height: max(540px, calc(100dvh - var(--topbar)));
		padding-top: 16px;
		padding-bottom: 20px;
	}

	.account_page > .account_loading,
	.account_page > .account_gate,
	.ranking_layout,
	.profile_layout,
	.settings_grid
	{
		flex: 1;
		min-height: 0;
	}

	.account_header
	{
		flex: none;
		flex-wrap: nowrap;
		gap: 18px;
		height: var(--account_header);
	}

	.account_header .game_heading
	{
		min-width: 0;
		gap: 12px;
	}

	.account_header .game_heading > div
	{
		min-width: 0;
	}

	.account_header .game_icon
	{
		flex: none;
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}

	.account_header .game_name
	{
		font-size: 24px;
	}

	.account_header .game_tagline
	{
		margin-top: 2px;
		overflow: hidden;
		font-size: 13px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.account_tools
	{
		flex: none;
		flex-wrap: nowrap;
	}

	.podium_panel
	{
		container-type: size;
	}

	.podium
	{
		--block_base: clamp(60px, 30cqh, 300px);
		--avatar: clamp(44px, 11cqh, 96px);
		--avatar_top: clamp(56px, 14cqh, 124px);
		min-height: 0;
		padding-top: 8px;
	}

	.podium_player
	{
		gap: clamp(3px, 0.9cqh, 8px);
		padding-bottom: clamp(10px, 2.2cqh, 22px);
	}

	.podium_crown
	{
		width: clamp(30px, 7cqh, 64px);
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.podium_name
	{
		margin-top: clamp(4px, 1cqh, 10px);
		font-size: clamp(13px, 2.5cqh, 19px);
	}

	.podium_place_1 .podium_name
	{
		font-size: clamp(14px, 2.9cqh, 22px);
	}

	.podium_amount
	{
		font-size: clamp(13px, 2.4cqh, 18px);
	}

	.podium_place_1 .podium_amount
	{
		font-size: clamp(14px, 2.8cqh, 21px);
	}

	.podium_meta
	{
		font-size: clamp(11px, 1.9cqh, 14px);
	}

	.podium_number
	{
		font-size: clamp(28px, 6.5cqh, 60px);
	}

	.podium_place_1 .podium_number
	{
		font-size: clamp(36px, 9cqh, 80px);
	}

	.ranks_panel .table_scroll
	{
		container-type: size;
		flex: 1 1 0;
		min-height: 0;
		overflow: auto;
	}

	.rank_table thead th
	{
		position: sticky;
		top: 0;
		z-index: 1;
		height: 34px;
		padding-top: 0;
		padding-bottom: 0;
		background: var(--surface);
	}

	.rank_table td
	{
		height: calc((100cqh - 38px) / 7);
		padding-top: 3px;
		padding-bottom: 3px;
		font-size: clamp(13px, 2.1cqh, 16px);
	}

	.rank_player .avatar
	{
		width: clamp(26px, 5cqh, 40px);
		height: clamp(26px, 5cqh, 40px);
		font-size: clamp(10px, 1.8cqh, 14px);
	}

	.rank_name
	{
		font-size: clamp(13px, 2.2cqh, 16px);
	}

	.rank_badge
	{
		min-width: clamp(30px, 5cqh, 40px);
		height: clamp(24px, 4.2cqh, 32px);
		font-size: clamp(12px, 1.9cqh, 14.5px);
	}

	.rank_bar
	{
		height: clamp(3px, 0.7cqh, 6px);
	}

	.profile_layout
	{
		display: grid;
		grid-template-rows: minmax(min-content, 2fr) minmax(min-content, 3fr);
	}

	.account_hero
	{
		gap: clamp(12px, 2vh, 22px);
		padding: clamp(14px, 2.4vh, 28px) clamp(16px, 2.2vh, 28px);
	}

	.account_ring .avatar
	{
		width: clamp(54px, 9.4vh, 112px);
		height: clamp(54px, 9.4vh, 112px);
		font-size: clamp(18px, 3.1vh, 36px);
	}

	.account_name
	{
		font-size: clamp(21px, 3.1vh, 34px);
	}

	.account_since
	{
		font-size: clamp(12.5px, 1.5vh, 15px);
	}

	.account_level
	{
		gap: clamp(7px, 1.1vh, 12px);
		padding: clamp(11px, 1.8vh, 20px) clamp(14px, 1.9vh, 22px);
	}

	.level_title strong
	{
		font-size: clamp(21px, 3vh, 32px);
	}

	.level_meter
	{
		height: clamp(8px, 1vh, 11px);
	}

	.account_stat
	{
		container-type: inline-size;
		gap: clamp(3px, 0.6vh, 8px);
		padding: clamp(9px, 1.6vh, 20px) clamp(12px, 1.5vh, 20px);
	}

	.account_stat .stat_label
	{
		font-size: clamp(12px, 1.4vh, 14px);
	}

	.account_stat .stat_value
	{
		font-size: clamp(13px, min(2.4vh, 11cqi), 26px);
	}

	.stat_game_icon
	{
		width: 1.25em;
		height: 1.25em;
	}

	.game_stat_card
	{
		gap: clamp(9px, 1.5vh, 18px);
		padding: clamp(12px, 2.1vh, 26px) clamp(14px, 1.9vh, 24px);
	}

	.game_stat_icon
	{
		width: clamp(40px, 6vh, 66px);
		height: clamp(40px, 6vh, 66px);
	}

	.game_stat_icon svg
	{
		width: 66%;
		height: 66%;
	}

	.game_stat_name
	{
		font-size: clamp(16px, 2.2vh, 24px);
	}

	.game_stat_list
	{
		flex: 1;
		justify-content: center;
	}

	.game_stat_item
	{
		padding: clamp(6px, 1.3vh, 15px) 0;
	}

	.game_stat_label
	{
		font-size: clamp(12px, 1.4vh, 14.5px);
	}

	.game_stat_value
	{
		font-size: clamp(13.5px, 1.9vh, 19px);
	}

	.game_stat_meter
	{
		height: clamp(5px, 0.7vh, 8px);
	}

	.rank_tile
	{
		padding: clamp(8px, 1.5vh, 20px) clamp(14px, 1.6vh, 20px);
	}

	.rank_tile_label
	{
		font-size: clamp(13px, 1.6vh, 16px);
	}

	.rank_tile_value
	{
		font-size: clamp(20px, 3.6vh, 42px);
	}

	.settings_grid
	{
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
	}

	.settings_column
	{
		min-height: 0;
	}

	.settings_account > .settings_panel:first-child
	{
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 0;
	}

	.settings_panel
	{
		padding: clamp(14px, 2vh, 24px) clamp(16px, 2vh, 24px);
	}

	.settings_identity
	{
		flex: 1;
	}

	.settings_avatar .avatar
	{
		width: clamp(40px, 6.4vh, 76px);
		height: clamp(40px, 6.4vh, 76px);
		font-size: clamp(14px, 2.2vh, 25px);
	}

	.settings_name
	{
		font-size: clamp(16px, 2.2vh, 24px);
	}

	.settings_facts div
	{
		padding: clamp(8px, 1.5vh, 18px) 2px;
	}

	.settings_facts dt,
	.settings_facts dd
	{
		font-size: clamp(13px, 1.5vh, 15.5px);
	}

	.settings_password
	{
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.settings_form,
	.settings_fieldset
	{
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 0;
	}

	.settings_password .field
	{
		margin-bottom: clamp(9px, 1.6vh, 18px);
	}

	.settings_password .field_label
	{
		margin-bottom: clamp(5px, 0.9vh, 9px);
	}

	.settings_password .field_box
	{
		height: clamp(40px, 5.6vh, 54px);
	}

	.settings_password .strength
	{
		margin-top: 7px;
	}

	.settings_password:has(.auth_error:not([hidden])) .password_rules,
	.settings_password:has(.settings_success:not([hidden])) .password_rules
	{
		display: none;
	}

	.settings_submit
	{
		margin-top: auto;
	}

	.settings_password .auth_error,
	.settings_password .settings_success
	{
		margin-bottom: 10px;
		padding: 8px 10px;
	}

	.settings_prefs
	{
		min-height: 0;
	}

	.pref_list
	{
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: clamp(8px, 1.2vh, 14px);
		overflow-y: auto;
	}

	.pref_row,
	.pref_row:first-child
	{
		flex: 1 0 auto;
		grid-template-columns: clamp(38px, 5vh, 54px) minmax(0, 1fr) auto;
		padding: clamp(9px, 1.5vh, 20px) clamp(12px, 1.4vh, 18px);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.02);
		border: 1px solid var(--line_soft);
	}

	.pref_icon
	{
		width: clamp(38px, 5vh, 54px);
		height: clamp(38px, 5vh, 54px);
	}

	.pref_icon .icon
	{
		width: 50%;
		height: 50%;
	}

	.pref_title
	{
		font-size: clamp(14px, 1.7vh, 17px);
	}

	.pref_hint
	{
		font-size: clamp(12px, 1.45vh, 14.5px);
	}
}

@media (min-width: 1101px) and (min-height: 800px)
{
	.settings_identity
	{
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		text-align: center;
	}

	.settings_who
	{
		flex: none;
		align-items: center;
		max-width: 100%;
	}

	.settings_avatar .avatar
	{
		width: clamp(64px, 11vh, 120px);
		height: clamp(64px, 11vh, 120px);
		font-size: clamp(22px, 3.8vh, 40px);
		box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--tier_a, var(--violet_soft));
	}
}

@media (min-width: 1101px) and (max-width: 1400px)
{
	.leaderboard_page .game_tagline
	{
		display: none;
	}
}

@media (min-width: 1101px) and (max-width: 1280px)
{
	.period_switch
	{
		width: 264px;
	}

	.clock_chip
	{
		min-width: 168px;
		padding: 0 12px;
	}

	.rank_col_bets,
	.rank_row .avatar,
	.podium_bets,
	.game_stat_fav
	{
		display: none;
	}

	.me_stats
	{
		gap: 12px;
	}

	.profile_band
	{
		grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.5fr);
	}

	.game_stat_value
	{
		font-size: 13px;
	}

	.pref_row,
	.pref_row:first-child
	{
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.pref_icon
	{
		display: none;
	}
}

@media (max-height: 760px) and (min-width: 1101px)
{
	.account_header .game_tagline
	{
		display: none;
	}

	.account_header .game_name
	{
		line-height: 44px;
	}

	.me_bar
	{
		padding-top: 10px;
	}

	.me_ranked
	{
		gap: 6px 12px;
		padding: 10px 14px;
	}

	.settings_note
	{
		margin-bottom: 10px;
	}
}

@media (max-height: 700px) and (min-width: 1101px)
{
	.password_rules,
	.settings_password .settings_note
	{
		display: none;
	}
}

@media (min-width: 2200px)
{
	.account_page
	{
		max-width: 1760px;
	}
}

/*
//=====================================================================================
*/

@media (max-width: 1100px)
{
	.ranking_layout,
	.profile_band,
	.profile_lower,
	.settings_grid
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.settings_wide,
	.settings_account,
	.settings_password,
	.settings_prefs
	{
		grid-column: auto;
		grid-row: auto;
	}

	.podium
	{
		max-width: 640px;
		width: 100%;
		margin: 0 auto;
	}

	.account_ranks
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rank_tile
	{
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "label" "value" "note";
		gap: 6px;
	}

	.rank_name
	{
		max-width: 240px;
	}
}

@media (max-width: 900px)
{
	.account_stats
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account_games
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px)
{
	.me_ranked
	{
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "label label" "rank player" "stats stats";
	}

	.me_stats
	{
		justify-content: space-between;
		padding-top: 10px;
		border-top: 1px solid var(--line);
	}

	.me_stats div
	{
		align-items: flex-start;
	}

	.me_prompt
	{
		flex-wrap: wrap;
	}

	.me_prompt_text
	{
		flex-basis: calc(100% - 50px);
	}

	.me_games,
	.me_actions
	{
		margin-left: 50px;
	}
}

@media (max-width: 600px)
{
	.account_tools,
	.period_switch,
	.clock_chip
	{
		width: 100%;
	}

	.clock_chip
	{
		height: 36px;
	}

	.podium_panel
	{
		padding: 14px 12px 0;
	}

	.podium
	{
		--block_base: 96px;
		--avatar: 46px;
		--avatar_top: 58px;
		gap: 6px;
		padding-top: 14px;
	}

	.podium_crown
	{
		width: 34px;
		height: 26px;
	}

	.podium_name
	{
		font-size: 13px;
	}

	.podium_place_1 .podium_name
	{
		font-size: 14px;
	}

	.podium_amount,
	.podium_place_1 .podium_amount
	{
		font-size: 12.5px;
	}

	.podium_meta
	{
		font-size: 11px;
	}

	.podium_bets
	{
		display: none;
	}

	.podium_number
	{
		font-size: 30px;
	}

	.podium_place_1 .podium_number
	{
		font-size: 38px;
	}

	.ranks_panel
	{
		padding: 14px 12px;
	}

	.rank_table th,
	.rank_table td
	{
		padding: 8px 6px;
	}

	.rank_col_bets,
	.rank_player .avatar
	{
		display: none;
	}

	.rank_name
	{
		max-width: 110px;
	}

	.me_games,
	.me_actions
	{
		margin-left: 0;
	}

	.me_actions
	{
		width: 100%;
	}

	.me_actions .button
	{
		flex: 1;
	}

	.account_identity
	{
		gap: 14px;
	}

	.account_ring .avatar
	{
		width: 64px;
		height: 64px;
		font-size: 22px;
	}

	.account_name
	{
		font-size: 24px;
	}

	.account_panel,
	.settings_panel
	{
		padding: 16px;
	}

	.account_stats
	{
		gap: 8px;
	}

	.account_stat
	{
		padding: 11px 12px;
	}

	.account_stat .stat_value
	{
		font-size: 16px;
	}

	.account_ranks
	{
		gap: 8px;
	}

	.rank_tile
	{
		padding: 10px 12px;
	}

	.rank_tile_value
	{
		font-size: 19px;
	}

	.rank_tile.is_unranked .rank_tile_value
	{
		font-size: 13px;
	}

	.account_gate
	{
		padding: 32px 18px;
	}

	.gate_title
	{
		font-size: 21px;
	}

	.pref_row
	{
		grid-template-columns: 36px minmax(0, 1fr) auto;
		gap: 10px;
	}

	.pref_icon
	{
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.pref_stepper
	{
		grid-template-columns: 34px 38px 34px;
	}
}

/*
//=====================================================================================
*/

.settings_left
{
	grid-column: 1;
	grid-row: 1;
}

.settings_look
{
	grid-column: 2;
	grid-row: 1;
}

.settings_grid > .settings_password
{
	grid-column: 3;
	grid-row: 1;
}

.settings_grid > .settings_wide
{
	grid-column: 2 / span 2;
}

.settings_me .settings_identity
{
	flex-direction: row;
	gap: 12px;
	text-align: left;
}

.settings_me .settings_who
{
	flex: 1;
	align-items: flex-start;
}

.settings_me .settings_sub
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

.settings_identity .settings_signout
{
	flex: none;
	width: auto;
	gap: 6px;
	padding: 0 12px;
}

.avatar_grid
{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px 10px;
	padding: 4px 2px 8px;
}

.avatar_choice
{
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.avatar_choice .avatar
{
	width: 100%;
	height: 100%;
	font-size: 15px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07);
	transition: transform 0.2s var(--ease), box-shadow 0.2s, filter 0.2s;
}

.avatar_choice:hover .avatar,
.avatar_choice:focus-visible .avatar
{
	transform: translateY(-2px);
	box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.45);
}

.avatar_choice:focus-visible
{
	outline: none;
}

.avatar_choice[aria-checked="true"] .avatar
{
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #f5c451;
}

.avatar_choice.is_locked
{
	cursor: not-allowed;
}

.avatar_choice.is_locked .avatar
{
	filter: grayscale(0.85) brightness(0.5);
}

.avatar_choice.is_locked:hover .avatar
{
	transform: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.avatar_choice.is_busy .avatar
{
	opacity: 0.6;
}

.avatar_lock
{
	position: absolute;
	bottom: -7px;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 6px;
	color: #f5c451;
	font: 700 9.5px/1 var(--font_display);
	letter-spacing: 0.02em;
	white-space: nowrap;
	background: #1d1438;
	border: 1px solid rgba(245, 196, 81, 0.4);
	border-radius: 999px;
	transform: translateX(-50%);
	pointer-events: none;
}

.avatar_lock .icon
{
	width: 9px;
	height: 9px;
}

.avatar_tick
{
	position: absolute;
	top: -2px;
	right: -2px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	color: #3b2405;
	background: linear-gradient(180deg, #fde68a, #f5c451);
	border: 2px solid var(--surface);
	border-radius: 50%;
	pointer-events: none;
}

.avatar_tick .icon
{
	width: 10px;
	height: 10px;
	stroke-width: 3;
}

.avatar_caption
{
	min-height: 20px;
	margin: 10px 0 0;
	color: var(--text_mute);
	font-size: 13px;
}

.avatar_caption strong
{
	color: var(--text);
	font-weight: 600;
}

.avatar_caption.is_error
{
	color: #fda4af;
}

.privacy_row
{
	flex: none;
}

.privacy_list
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.privacy_list li
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--text_mute);
	font-size: 12.5px;
	line-height: 1.45;
}

.privacy_list strong
{
	color: var(--text_dim);
	font-weight: 600;
}

.privacy_list .icon
{
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	color: var(--text_mute);
}

.settings_privacy.is_on .privacy_list .icon
{
	color: #6ee7b7;
}

.settings_privacy.is_on .privacy_row
{
	border-color: rgba(139, 92, 246, 0.4);
	background: rgba(139, 92, 246, 0.08);
}

@media (min-width: 1101px)
{
	.settings_me
	{
		display: flex;
		flex: none;
		flex-direction: column;
	}

	.settings_me .settings_identity
	{
		flex: none;
		padding: clamp(9px, 1.4vh, 14px);
	}

	.settings_me .settings_avatar .avatar
	{
		width: clamp(40px, 6vh, 58px);
		height: clamp(40px, 6vh, 58px);
		font-size: clamp(14px, 2vh, 20px);
		box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tier_a, var(--violet_soft));
	}

	.settings_me .settings_name
	{
		font-size: clamp(16px, 2vh, 21px);
	}

	.settings_me .settings_facts div
	{
		padding: clamp(6px, 1.15vh, 12px) 2px;
	}

	.settings_prefs
	{
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.settings_prefs .pref_row,
	.settings_prefs .pref_row:first-child
	{
		padding: clamp(6px, 1.1vh, 14px) clamp(10px, 1.3vh, 16px);
	}

	.settings_prefs .pref_icon
	{
		width: clamp(32px, 4.4vh, 46px);
		height: clamp(32px, 4.4vh, 46px);
	}

	.settings_pictures
	{
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 0;
	}

	.avatar_grid
	{
		margin-top: auto;
		gap: clamp(10px, 1.7vh, 18px) clamp(8px, 1vh, 12px);
	}

	.avatar_caption
	{
		margin-bottom: auto;
	}

	.settings_privacy
	{
		display: flex;
		flex: none;
		flex-direction: column;
	}

	.privacy_list
	{
		gap: clamp(5px, 0.9vh, 10px);
		margin-top: clamp(8px, 1.4vh, 14px);
	}
}

@media (min-width: 1101px) and (max-width: 1400px)
{
	.avatar_lock_word
	{
		display: none;
	}

	.settings_identity .settings_signout span
	{
		display: none;
	}

	.settings_identity .settings_signout
	{
		width: 36px;
		padding: 0;
	}
}

@media (min-width: 1101px) and (max-height: 760px)
{
	.settings_me .settings_facts div:nth-child(3),
	.privacy_list li:nth-child(3)
	{
		display: none;
	}

	.settings_prefs .pref_hint
	{
		display: none;
	}
}

@media (max-width: 1100px)
{
	.settings_left,
	.settings_look,
	.settings_grid > .settings_wide
	{
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 600px)
{
	.avatar_grid
	{
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.avatar_lock_word
	{
		display: none;
	}
}

/*
//=====================================================================================
*/

.hidden_badge
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 9px;
	flex: none;
	border-radius: 999px;
	color: #c4b5fd;
	font: 700 11px/1 var(--font_display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(139, 92, 246, 0.12);
	border: 1px solid rgba(139, 92, 246, 0.35);
}

.hidden_badge .icon
{
	width: 13px;
	height: 13px;
}

.hidden_badge[hidden]
{
	display: none;
}

.rank_name.is_hidden .name_text,
.podium_name.is_hidden .name_text
{
	color: var(--text_dim);
	font-style: italic;
}

.account_public
{
	font-size: 12.5px;
	white-space: nowrap;
}

/*
//=====================================================================================
*/

.account_identity .account_who
{
	flex: 1;
}

.account_level_inline
{
	gap: 6px;
	margin-top: 10px;
	padding: 0;
	border-radius: 0;
	background: none;
	border: 0;
}

.account_level_inline .level_title strong
{
	font-size: 20px;
}

.account_level_inline .level_foot
{
	font-size: 11.5px;
}

.showcase
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 10px 12px 12px;
	border-radius: 14px;
	background: rgba(8, 7, 15, 0.45);
	border: 1px solid var(--line);
	transition: border-color 0.25s;
}

.is_editing .showcase
{
	border-color: rgba(245, 196, 81, 0.4);
}

.showcase_head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.showcase_label
{
	color: var(--text_mute);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.showcase_edit
{
	font-size: 12.5px;
}

.showcase_edit:disabled
{
	color: var(--text_mute);
	cursor: default;
	opacity: 0.6;
}

.showcase_edit:disabled .icon
{
	transform: none;
}

.showcase_slots
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.showcase_slot
{
	--showcase_size: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
	text-align: center;
}

.showcase_slot .badge
{
	--badge_size: var(--showcase_size);
}

.showcase_title
{
	max-width: 100%;
	overflow: hidden;
	color: var(--text);
	font: 600 12.5px/1.2 var(--font_display);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.showcase_tier
{
	margin-top: -2px;
	font: 700 10px/1 var(--font_body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.showcase_tier.tier_bronze,
.achievement_tier.tier_bronze
{
	color: #e7a771;
}

.showcase_tier.tier_silver,
.achievement_tier.tier_silver
{
	color: #d4d8e2;
}

.showcase_tier.tier_gold,
.achievement_tier.tier_gold
{
	color: var(--gold);
}

.showcase_pick
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
	min-width: 0;
	color: var(--text_mute);
}

.showcase_pick .showcase_title
{
	color: var(--text_mute);
	font-weight: 500;
}

.showcase_ring
{
	display: grid;
	place-items: center;
	width: var(--showcase_size);
	height: var(--showcase_size);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.02);
	border: 2px dashed rgba(167, 139, 250, 0.3);
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.showcase_ring_icon
{
	width: 38%;
	height: 38%;
}

.showcase_pick:hover:enabled .showcase_ring
{
	color: var(--gold);
	background: rgba(245, 196, 81, 0.06);
	border-color: rgba(245, 196, 81, 0.55);
}

.showcase_pick:hover:enabled .showcase_title
{
	color: var(--text);
}

.showcase_pick:disabled
{
	cursor: default;
}

.is_editing .showcase_slot.is_empty .showcase_ring
{
	border-color: rgba(245, 196, 81, 0.45);
}

.profile_tabs
{
	flex: none;
	padding: 3px;
	border-radius: 11px;
}

.profile_tabs .tab
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 13px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
}

.profile_tabs .tab .icon
{
	width: 16px;
	height: 16px;
}

.profile_tabs .tab[aria-selected="true"] .icon
{
	color: var(--gold);
}

.achievements_summary
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	color: var(--text_dim);
	font-size: 12.5px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.achievements_count strong
{
	color: var(--gold);
	font: 700 16px/1 var(--font_display);
}

.achievements_meter
{
	width: 140px;
	height: 6px;
}

.achievements_meter .meter_fill
{
	background: linear-gradient(90deg, var(--gold_deep), var(--gold));
}

.profile_tabbed .account_section_head > .panel_note
{
	margin-left: auto;
}

.achievements_panel
{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 14px 10px 14px 16px;
	transition: border-color 0.3s;
}

.achievements_panel:focus
{
	outline: none;
}

.achievements_panel:focus-visible
{
	outline: 2px solid var(--line_strong);
	outline-offset: 2px;
}

.achievements_panel.is_flagged
{
	border-color: rgba(245, 196, 81, 0.6);
	box-shadow: var(--shadow_card), inset 0 0 0 1px rgba(245, 196, 81, 0.35);
}

.achievements_bar,
.achievements_editbar
{
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px 14px;
	margin-right: 6px;
}

.achievements_bar
{
	justify-content: space-between;
}

.achievements_filters
{
	flex-wrap: nowrap;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
}

.achievements_filter
{
	flex: none;
	gap: 7px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.achievements_filter:hover
{
	color: var(--text);
	border-color: var(--line_strong);
}

.achievements_filter[aria-checked="true"]
{
	color: #fff;
	background: rgba(139, 92, 246, 0.24);
	border-color: rgba(167, 139, 250, 0.42);
}

.filter_count
{
	color: var(--text_mute);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.achievements_filter[aria-checked="true"] .filter_count
{
	color: #ddd6fe;
}

.showcase_start
{
	flex: none;
	gap: 7px;
	height: 32px;
	padding: 0 13px;
}

.showcase_start .icon
{
	width: 16px;
	height: 16px;
	color: var(--gold);
}

.showcase_start:disabled
{
	cursor: default;
	opacity: 0.5;
}

.achievements_editbar
{
	padding: 7px 8px 7px 14px;
	border-radius: 12px;
	background: rgba(245, 196, 81, 0.06);
	border: 1px solid rgba(245, 196, 81, 0.3);
}

.editbar_text
{
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 2px;
}

.editbar_title
{
	color: var(--text);
	font: 650 13.5px/1.2 var(--font_display);
}

.editbar_hint
{
	color: var(--text_dim);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.editbar_error
{
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #fecdd3;
	font-size: 12.5px;
}

.editbar_actions
{
	display: flex;
	flex: none;
	gap: 8px;
	margin-left: auto;
}

.editbar_actions .button
{
	gap: 6px;
	height: 32px;
	padding: 0 13px;
}

.editbar_actions .button .icon
{
	width: 16px;
	height: 16px;
}

.editbar_actions .button:disabled
{
	cursor: default;
	opacity: 0.5;
}

.achievements_grid
{
	display: grid;
	flex: 1;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	grid-auto-rows: min-content;
	align-content: start;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 0 6px 2px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(167, 139, 250, 0.3) transparent;
}

.achievements_grid:empty
{
	display: none;
}

.achievement_item
{
	display: flex;
	min-width: 0;
}

.achievement_card
{
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
	padding: 9px 12px;
	border-radius: 14px;
	color: inherit;
	font: inherit;
	text-align: left;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}

.achievement_card.is_unlocked
{
	background: linear-gradient(160deg, rgba(245, 196, 81, 0.07), transparent 62%), rgba(255, 255, 255, 0.025);
	border-color: rgba(245, 196, 81, 0.2);
}

.achievement_body
{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.achievement_top
{
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.achievement_title
{
	min-width: 0;
	overflow: hidden;
	color: var(--text);
	font: 650 14px/1.25 var(--font_display);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.achievement_card.is_locked .achievement_title
{
	color: #d9d5ec;
}

.achievement_tier
{
	flex: none;
	padding: 2px 6px;
	border-radius: 999px;
	font: 700 9.5px/1.2 var(--font_body);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.achievement_text
{
	overflow: hidden;
	color: var(--text_dim);
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.achievement_foot
{
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin-top: 3px;
	color: var(--text_mute);
	font-size: 11.5px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.achievement_meter
{
	flex: 1;
	height: 4px;
	margin: 3px 0 2px;
}

.achievement_side
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	align-self: stretch;
}

.achievement_progress
{
	color: var(--text_mute);
	font-size: 11.5px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.achievement_done_icon
{
	width: 14px;
	height: 14px;
	color: var(--green);
	stroke-width: 2.4;
}

.achievement_date
{
	color: var(--text_dim);
}

.achievement_reward
{
	color: #f1d27f;
	font: 650 13px/1.2 var(--font_display);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.achievement_card.is_locked .achievement_reward
{
	opacity: 0.7;
}

.achievement_pick
{
	position: absolute;
	top: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: #1a1205;
	font: 800 11px/1 var(--font_display);
	background: var(--gold);
	border: 1.5px solid var(--gold);
}

.achievement_pick:empty
{
	background: var(--surface_high);
	border-color: rgba(255, 255, 255, 0.28);
}

.achievements_grid.is_editing .achievement_card.is_locked
{
	opacity: 0.4;
}

button.achievement_card
{
	cursor: pointer;
}

button.achievement_card:hover
{
	background: linear-gradient(160deg, rgba(245, 196, 81, 0.1), transparent 62%), rgba(255, 255, 255, 0.035);
	border-color: rgba(245, 196, 81, 0.45);
}

button.achievement_card:focus-visible
{
	outline: 2px solid var(--violet_soft);
	outline-offset: 2px;
}

.achievement_card.is_picked
{
	border-color: var(--gold);
	box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.5);
}

.achievements_empty
{
	margin: auto;
	padding: 18px 12px;
	max-width: 420px;
}

@media (prefers-reduced-motion: no-preference)
{
	.achievements_panel.is_flagged
	{
		animation: achievements_flag 2.6s var(--ease_soft) both;
	}
}

@keyframes achievements_flag
{
	0%,
	55%
	{
		border-color: rgba(245, 196, 81, 0.7);
	}

	100%
	{
		border-color: var(--line);
	}
}

@media (min-width: 1101px)
{
	.profile_layout
	{
		grid-template-rows: minmax(min-content, 2fr) minmax(0, 3fr);
	}

	.profile_lower,
	.profile_tabbed,
	.profile_tabbed > .account_games,
	.achievements_panel
	{
		min-height: 0;
	}

	.showcase_slot
	{
		--showcase_size: clamp(40px, 6.4vh, 72px);
	}

	.showcase
	{
		gap: clamp(5px, 0.9vh, 10px);
		padding: clamp(7px, 1.1vh, 14px) 12px clamp(8px, 1.3vh, 14px);
	}

	.showcase_title
	{
		font-size: clamp(11.5px, 1.45vh, 14px);
	}
}

@media (min-width: 1101px) and (max-height: 760px)
{
	.showcase_tier
	{
		display: none;
	}

	.showcase_slot
	{
		gap: 4px;
	}
}

@media (min-width: 1101px) and (max-width: 1360px)
{
	.achievements_meter
	{
		width: 90px;
	}

	.achievements_filter
	{
		padding: 0 10px;
	}
}

@media (max-width: 1100px)
{
	.achievements_grid
	{
		max-height: 560px;
	}
}

@media (max-width: 600px)
{
	.achievements_bar,
	.achievements_editbar
	{
		flex-wrap: wrap;
	}

	.achievements_filters
	{
		flex-wrap: wrap;
	}

	.achievements_summary
	{
		margin-left: 0;
	}

	.achievements_grid
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
//=====================================================================================
*/

.pref_volume
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.pref_volume .pref_music_range
{
	width: clamp(72px, 6vw, 112px);
}

.pref_music .pref_text
{
	min-width: 3.6em;
}

.pref_music .pref_hint
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 1101px)
{
	.settings_prefs .pref_list
	{
		gap: clamp(5px, 0.8vh, 12px);
	}

	.settings_prefs .pref_row,
	.settings_prefs .pref_row:first-child
	{
		padding: clamp(4px, 0.75vh, 12px) clamp(10px, 1.3vh, 16px);
	}

	.settings_prefs .pref_icon
	{
		width: clamp(30px, 3.9vh, 44px);
		height: clamp(30px, 3.9vh, 44px);
	}
}

@media (min-width: 1101px) and (max-height: 900px)
{
	.settings_prefs .pref_hint
	{
		display: none;
	}
}

@media (min-width: 1101px) and (max-height: 760px)
{
	.settings_prefs .pref_list
	{
		gap: 4px;
	}

	.settings_prefs .pref_row,
	.settings_prefs .pref_row:first-child
	{
		padding: 3px 12px;
	}

	.settings_prefs .switch
	{
		width: 42px;
		height: 24px;
	}

	.settings_prefs .switch_knob
	{
		width: 16px;
		height: 16px;
	}

	.settings_prefs .switch[aria-checked="true"] .switch_knob
	{
		transform: translateX(18px);
	}

	.settings_prefs .pref_stepper
	{
		height: 30px;
	}

	.settings_prefs .pref_row,
	.settings_prefs .pref_row:first-child
	{
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.settings_prefs .pref_icon,
	.settings_prefs .pref_music_value
	{
		display: none;
	}
}

.pref_music_value
{
	min-width: 34px;
	color: var(--text_dim);
	font: 600 12px/1 var(--font_game);
	letter-spacing: 0.04em;
	text-align: right;
}

/*
//=====================================================================================
*/