// The combo: a count above a vertical segment bar on the right of the screen, in a purple frame.

ComboCounter
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	justify-content: flex-end;
	align-items: center;
}

// Holds the bar view and the x25+ title card in the same spot.
.swap
{
	position: relative;
	margin-right: 36px;
	justify-content: center;
	align-items: center;
}

// The title card, centred where the bar was (right-aligned so long titles stay on screen).
.big
{
	position: absolute;
	right: 4px;
	flex-direction: column;
	align-items: flex-end;
	font-family: Poppins;
	font-weight: 800;
	font-style: italic;
	transform-origin: 100% 50%;

	label
	{
		white-space: pre;
		text-shadow: 3px 3px 0px #140a14;
	}
}

.big-count
{
	flex-direction: row;
	font-size: 72px;
}

.big-title
{
	flex-direction: row;
	margin-top: -10px;
	font-size: 24px;
	letter-spacing: 2px;
}

// The count sits above the bar, centred on it.
.stack
{
	position: relative;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 50%;
}

// Pinned above the bar and out of the layout, so its text changing size (x9 → x10, "AGAIN!",
// rainbow letters, empty) never pushes the bar around.
.count
{
	position: absolute;
	bottom: 100%;
	left: -80px;
	right: -80px;
	height: 44px;
	margin-bottom: 4px;
	justify-content: center;
	flex-direction: row;
	align-items: flex-end;
	font-family: Poppins;
	font-weight: 800;
	font-style: italic;
	transform-origin: 50% 80%;
}

.combo-x
{
	font-size: 26px;
	color: #e73bd8;
	background-clip: text;
	margin-right: 1px;
	margin-bottom: 2px;
}

.combo-count
{
	color: #ffe45c;
	background-clip: text;
	margin-bottom: -4px;
}

// Maxed: per-character rainbow colours, so no gradient clipping.
.rain
{
	background-clip: border-box;
	background-image: none;
	text-shadow: 0px 0px 8px rgba( 255, 255, 255, 0.35 );
}

// Purple frame, matching the leaderboard's border.
.meter-edge
{
	flex-direction: column;
	padding: 3px;
	background-color: #4a2a7a;
	border-radius: 14px;
	box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.55 );
}

.meter
{
	width: 60px;
	flex-direction: column;
	padding: 8px 10px 4px;
	background-color: rgba( 18, 13, 23, 0.94 );
	border-radius: 11px;
}

// Height is set so 20 segments + gaps make a tall bar; each segment is slanted (set inline).
.segment
{
	width: 100%;
	height: 22px;
	margin-bottom: 4px;
	border-radius: 5px;
}