MenuHud {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;

	.menu-screen {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba( 0, 0, 0, 0.5 );

		// Matches MenuManager's FadeOutDuration - keep these in sync.
		transition: opacity 0.8s ease;
		opacity: 1;
	}

	.menu-screen.fading {
		opacity: 0;
		pointer-events: none;
	}

	.menu-panel {
		background-color: white;
		border: 3px solid black;
		border-radius: 4px;
		padding: 32px 40px;
		min-width: 600px;
		display: flex;
		flex-direction: column;
	}

	.menu-logo {
		max-width: 260px;
		max-height: 120px;
		margin: 0 auto 24px auto;
		display: block;
	}

	.menu-body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.menu-left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.audio-toggle {
		color: black;
		font-size: 18px;
		cursor: pointer;
		margin-bottom: 24px;
	}

	.play-button {
		background-color: black;
		color: white;
		font-size: 22px;
		padding: 12px 32px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		align-self: flex-start;
	}

	.play-button:hover {
		background-color: rgb( 60, 60, 60 );
	}

	.menu-right {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.howto-title {
		font-size: 20px;
		color: black;
		margin-bottom: 12px;
	}

	.howto-row {
		display: flex;
		flex-direction: row;
	}

	.howto-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 16px;
	}

	.howto-label {
		color: black;
		font-size: 16px;
		margin-top: 8px;
	}

	// A simple rounded "mouse" shape, split down the middle, with the
	// top-left or top-right quadrant filled in black to show which
	// button is being pressed.
	.mouse-icon {
		width: 90px;
		height: 130px;
		border: 3px solid black;
		border-radius: 45px;
		position: relative;
		overflow: hidden;
		background-color: white;
	}

	.mouse-fill {
		position: absolute;
		top: 0;
		width: 50%;
		height: 45%;
		background-color: black;
	}

	.mouse-fill.left {
		left: 0;
	}

	.mouse-fill.right {
		right: 0;
	}
}