JumpHud
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-family: Inter;
	color: #3c4249;
	pointer-events: none;

	.score
	{
		position: absolute;
		top: 26px;
		left: 0;
		right: 0;
		font-size: 96px;
		font-weight: 800;
		color: #343a41;
		text-align: center;
	}

	.streak
	{
		position: absolute;
		top: 150px;
		left: 0;
		right: 0;
		font-size: 34px;
		font-weight: 700;
		color: #e8590c;
		text-align: center;
	}

	.hint
	{
		position: absolute;
		bottom: 76px;
		left: 0;
		right: 0;
		font-size: 22px;
		color: #7a828c;
		text-align: center;
	}

	.tutorial
	{
		position: absolute;
		bottom: 130px;
		left: 0;
		right: 0;
		justify-content: center;

		.tutorial-text
		{
			background-color: rgba(255, 255, 255, 0.92);
			border-radius: 16px;
			padding: 14px 30px;
			font-size: 26px;
			font-weight: 600;
			color: #343a41;
		}
	}

	.diff
	{
		position: absolute;
		top: 16px;
		right: 26px;
		font-size: 24px;
		color: #565d66;
	}

	.gameover
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.74);
		align-items: center;
		justify-content: center;
		flex-direction: column;
		cursor: default;

		.title
		{
			font-size: 54px;
			font-weight: 800;
			letter-spacing: 10px;
			color: #565d66;
		}

		.finalscore
		{
			font-size: 190px;
			font-weight: 800;
			line-height: 1;
			margin-top: 14px;
			color: #e8590c;
		}

		.board-wrap
		{
			flex-direction: row;
			justify-content: center;
			margin-top: 22px;

			.board-col
			{
				flex-direction: column;
				min-width: 300px;
				margin: 0 12px;
				padding: 16px 22px;
				background-color: rgba(255, 255, 255, 0.82);
				border-radius: 14px;

				.board-title
				{
					font-size: 21px;
					font-weight: 700;
					color: #e8590c;
					margin-bottom: 14px;
				}

				.board-row
				{
					flex-direction: row;
					align-items: center;
					margin-bottom: 10px;

					.cell-rank
					{
						width: 28px;
						color: #7a828c;
						font-style: italic;
						font-weight: 700;
					}

					.avatar
					{
						width: 36px;
						height: 36px;
						border-radius: 9px;
						align-items: center;
						justify-content: center;
						margin-right: 12px;

						.avatar-char
						{
							color: #ffffff;
							font-size: 17px;
							font-weight: 700;
						}
					}

					.cell-name
					{
						width: 150px;
						color: #343a41;
						font-size: 19px;
					}

					.cell-score
					{
						width: 70px;
						text-align: right;
						color: #e8590c;
						font-size: 24px;
						font-weight: 800;
					}
				}
			}
		}

		.sub
		{
			font-size: 26px;
			margin-top: 30px;
			color: #7a828c;
		}
	}

	.menu
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(30, 36, 44, 0.35);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		pointer-events: all;
		cursor: default;

		.menu-title
		{
			font-size: 120px;
			font-weight: 800;
			letter-spacing: 12px;
			color: #2f343a;
		}

		.menu-sub
		{
			font-size: 28px;
			color: #5c636b;
			margin-top: 4px;
			margin-bottom: 44px;
		}

		.menu-btn-row
		{
			flex-direction: row;

			.menu-btn
			{
				padding: 18px 46px;
				margin: 0 14px;
				border-radius: 14px;
				background-color: rgba(255, 255, 255, 0.94);
				color: #343a41;
				font-size: 30px;
				font-weight: 700;
				cursor: pointer;
			}
		}

		.menu-best
		{
			font-size: 26px;
			color: #c8ced6;
			margin-top: 34px;
		}
	}
}