.sectionTitle {
	font-size: var(--mantine-font-size-lg);
	color: var(--mantine-color-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	margin-bottom: var(--mantine-spacing-sm);
}

.playerName {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.stageTitle {
	position: relative;
	font-size: var(--mantine-font-size-sm);
	font-weight: 700;
	color: var(--mantine-color-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	padding: 2px 8px 2px 10px;
	margin-bottom: var(--mantine-spacing-xs);
	border-radius: 4px;
}

.stageTitle::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 2px;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(180deg, rgba(var(--ribbon-color), 0.85) 0%, rgba(var(--ribbon-color), 0.35) 100%);
	box-shadow: 0 0 6px rgba(var(--ribbon-color), 0.12);
}

.stage1Title {
	--ribbon-color: var(--gd-orange);
	background: rgba(var(--gd-orange), 0.10);
	border: 1px solid rgba(var(--gd-orange), 0.28);
}

.stage2Title {
	--ribbon-color: var(--gd-blue);
	background: rgba(var(--gd-blue), 0.08);
	border: 1px solid rgba(var(--gd-blue), 0.24);
}

.otherTitle {
	--ribbon-color: var(--gd-gray);
	background: rgba(var(--gd-gray), 0.10);
	border: 1px solid rgba(var(--gd-gray), 0.22);
}
