#hud {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;

	pointer-events: none;

	& > * {
		position: fixed;
		pointer-events: auto;
	}

	.restart {
		top: 0;
		right: 0;
		cursor: pointer;

		&::before {
			content: '⟳';
			font-size: 5vh;
			opacity: .5;
			color: @accentfg;
		}
	}

	.crosspadOverlay {
		pointer-events: none;
		top: 50vh;
		left: 50vw;
		transform: translate(-50%, -50%);
		opacity: .5;
	}

	.joystickOverlay {
		pointer-events: none;
		transform: translate(-50%, -50%);
		opacity: .5;
	}

	.status {
		bottom: 1rem;
		right: 1rem;
		padding: .2rem;
		font-size: 1.4rem;

		.score::before {
			content: '\1f34e';
		}
		.time::before {
			content: '\23f1';
		}
		.speed::before {
			content: '\1f684';
		}
	}
}
