/* Released under GNU GPL v3 open source license. */

/* General */
	/* Basics */
		/* Overall */
		#BgImage {
			background-image: url(../images/Background.jpg);
		}

/* Area specific */
	/* Header */
	#Ctrl_Nav {
		left: calc(50% - 300px);
		width: 600px;
	}

	/* Main */
		/* Game */
			/* Terrain */
			#Ctnr_GameTerrain {
				position: absolute; bottom: calc(50% - 1982.5px); right: 50%;
			}
			.Terrain {
				position: absolute; bottom: 0; left: 500000px;
				min-width: 10px; height: 0;
				background-color: #FFFFC0C0;
				font-family: inherit; font-size: 2.00em; text-align: center;
			}
			.Terrain.Ahead {
				color: #00000060;
			}
			#Terrain_Game0 {
				width: 2000px;
			}

			/* Characters */
			#Ctnr_GameCharacters {
				width: 0; height: 0;
			}
			.Character {
				position: absolute; bottom: calc(50% + 17.5px); left: unset;
				width: 100px; right: 50%;
				display: flex;
			}
			#Ctnr_GameCharacters img {
				width: 100%;
			}
			#GameChaserBalloon {
				position: absolute; bottom: 20%; left: 170px; transform-origin: bottom left;
				width: 160px; height: 60%;
				filter: drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000);
				overflow: hidden;
			}
			#GameChaserBalloon.Faded {
				transform: scale(0.5);
			}
			#GameChaserBalloon .CtrlGroup {
				width: 100%; height: 100%;
			}
			#GameChaserBalloon .Ctrl {
				position: absolute; top: unset; left: unset;
				height: unset;
				background-color: #F0F0F0;
			}
			#GameChaserBalloon .Balloon {
				bottom: 50px; left: 20px;
				width: calc(100% - 40px); border-radius: 5px; padding: 10px;
				display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
			}
			#Label_GameDistance {
				margin: 10px 0 0 0;
				font-size: 1.50em;
			}
			#GameChaserBalloon .BalloonTail {
				bottom: 0; left: 0;
				width: 100%; height: 60px; clip-path: polygon(20% 0, 40% 0, 0 100%);
			}

			/* Textbox */
			#Ctnr_GameTextbox {
				position: absolute; top: calc(50% - 17.5px); left: 50%;
				width: calc(50% - 170px);
			}
			#Textbox_Game {
				border: none; border-radius: 0; padding: 0;
				background-color: transparent; box-shadow: none !important;
				color: #000000; font-size: 2.00em;
			}
			#Textbox_Game.HasTypo {
				background-color: #FFA0A0C0;
			}

			/* Progbar */
			#Ctnr_GameProgbar {
				position: absolute; top: 0; left: 0;
				width: 100%; height: 10px;
			}

			/* Stats */
			#Ctnr_GameStats {
				position: absolute; top: 25px; left: 170px;
				width: calc(100% - 340px);
			}
			#Ctnr_GameStats .CtrlGroup {
				width: 100%;
				justify-content: center;
			}
			#Ctnr_GameStats .Ctrl {
				width: 150px; height: 60px; padding: 5px;
				text-align: center;
				display: flex; flex-direction: column; justify-content: center; align-items: center;
			}
			.GameStatsValue {
				font-size: 1.50em;
			}

			/* Speed */
			#Ctnr_GameSpeed {
				position: absolute; top: 50px; left: 0;
				width: 140px; height: calc(100% - 100px);
			}
			#CtrlGroup_GameSpeed {
				width: 100%; height: 100%;
			}
				/* Tape */
				.Tape {
					position: absolute; top: 0; left: 0;
					width: 100%; height: 100%; border-radius: 5px;
					background-color: #FFFFFF80; backdrop-filter: blur(5px);
					overflow: hidden;
				}
				.Tape .CtrlGroup {
					position: absolute; top: unset; left: 0;
					width: calc(100% - 20px);
					flex-direction: column;
				}
				#CtrlGroup_GameSpeedTape {
					top: calc(50% - 5000px); right: 0; left: unset;
					height: 5000px;
				}
				.Tape .Ctrl {
					width: 100%; height: 0;
					display: flex; justify-content: space-between; align-items: center;
				}
				#CtrlGroup_GameSpeedTape .Ctrl {
					flex-direction: row-reverse;
				}
				.TapeScale {
					width: 20px; height: 2px; border-radius: 1px;
					background-color: #00000080;
				}
				.TapeNumber {
					width: calc(100% - 41px);
					color: #00000080; font-size: 1.50em; text-align: end;
				}

				/* Additional indicators */
				#Ctrl_GameSpeedAdditionalIndicators {
					position: absolute; top: 0; left: 0;
					width: calc(100% + 20px); height: 100%;
					overflow: hidden;
					pointer-events: none;
				}
					/* Other speeds */
					#CtrlGroup_GameOtherSpeeds {
						position: absolute; top: calc(50% - 5000px); right: 0;
						width: 20px; height: 5000px;
					}
					#CtrlGroup_GameOtherSpeeds .Ctrl {
						position: absolute; top: unset; left: 0;
						pointer-events: auto;
					}
					#CtrlGroup_GameOtherSpeeds #Ctrl_GameChaserSpeed {
						bottom: 0;
						width: 10px; height: 0;
						background-color: #FFC000;
					}
					#CtrlGroup_GameOtherSpeeds #Ctrl_GameDangerousSpeed {
						bottom: 0;
						width: 10px; height: 0;
						background-color: #FF0000;
					}
					#CtrlGroup_GameOtherSpeeds #Ctrl_GameAvgSpeed {
						bottom: -10px;
						width: 20px; height: 20px; clip-path: polygon(100% 0, 100% 100%, 0 50%);
						background-color: #0090D0;
					}

					/* Speed trend */
					#Needle_GameSpeedTrend {
						position: absolute; top: unset; right: 30px;
						width: 15px; height: 0;
					}
					#Needle_GameSpeedTrend.Decreasing {
						transform: scaleY(-1);
					}
					#Needle_GameSpeedTrend .NeedleFg {
						position: absolute; top: 5px; left: calc(50% - 1px);
						width: 2px; height: calc(50% - 5px); border-radius: 1px;
						pointer-events: auto;
					}
					#Needle_GameSpeedTrend .NeedleArrow {
						height: 15px;
						pointer-events: auto;
					}

				/* Balloon */
				#Ctrl_GameSpeedBalloon {
					position: absolute; top: calc(50% - 35px); left: 0;
					width: 125px; height: 70px;
					filter: drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000);
				}
				#Ctrl_GameSpeedBalloon > .CtrlGroup {
					width: 100%; height: 100%;
				}
				#Ctrl_GameSpeedBalloon > .CtrlGroup > .Ctrl {
					position: absolute; top: 0; left: unset;
					height: 100%;
					background-color: #FFFFFF;
				}
				#Ctrl_GameSpeedBalloon .CtrlGroup .Balloon {
					left: 0;
					width: 105px; border-radius: 5px;
				}
				#Ctrl_GameSpeedBalloon .CtrlGroup .BalloonTail {
					right: 0;
					width: 25px; clip-path: polygon(100% 50%, 0 67.85714%, 0 32.14286%);
				}
				#Ctrl_GameSpeedBalloon .CtrlGroup .Balloon .CtrlGroup {
					width: 100%; height: 100%; padding: 5px;
					justify-content: end;
				}
				#Ctrl_GameSpeedBalloon .CtrlGroup .Balloon .Ctrl {
					width: 20px; height: 100%;
				}
				.Balloon .Box {
					border-radius: unset;
					background-color: transparent;
				}
				#RollingDigit_GameSpeed1 {
					top: calc(-45px * 9);
				}
				#RollingDigit_GameSpeed2 {
					top: calc(-45px * 10);
				}
				#RollingDigit_GameSpeed3 {
					top: calc(15px - 30px * 18);
				}
				.RollingDigit span {
					height: 30px; margin: 15px 0;
					font-size: 2.25em;
				}
				#RollingDigit_GameSpeed3 span {
					margin: 0;
				}

			/* Altitude */
			#Ctnr_GameAltitude {
				position: absolute; top: 50px; right: 0;
				width: 140px; height: calc(100% - 100px);
			}
			#CtrlGroup_GameAltitude {
				width: 100%; height: 100%;
			}
				/* Tape */
				#CtrlGroup_GameAltitudeTape {
					top: calc(50% - 29000px);
					height: 29000px;
				}

				/* Balloon */
				#Ctrl_GameAltitudeBalloon {
					position: absolute; top: calc(50% - 35px); right: 0;
					width: 125px; height: 70px;
					filter: drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000) drop-shadow(0 0 0.5px #000000);
				}
				#Ctrl_GameAltitudeBalloon > .CtrlGroup {
					width: 100%; height: 100%;
				}
				#Ctrl_GameAltitudeBalloon > .CtrlGroup > .Ctrl {
					position: absolute; top: 0; left: unset;
					height: 100%;
					background-color: #FFFFFF;
				}
				#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon {
					right: 0;
					width: 105px; border-radius: 5px;
				}
				#Ctrl_GameAltitudeBalloon .CtrlGroup .BalloonTail {
					left: 0;
					width: 25px; clip-path: polygon(100% 32.14286%, 100% 67.85714%, 0 50%);
				}
				#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon .CtrlGroup {
					width: 100%; height: 100%; padding: 5px;
					justify-content: start;
				}
				#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon .Ctrl {
					width: 20px; height: 100%;
				}
				#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon #Ctrl_GameAltitude4 {
					width: 35px;
				}
				#RollingDigit_GameAltitude1 {
					top: calc(-45px * 2);
				}
				#RollingDigit_GameAltitude2 {
					top: calc(-45px * 10);
				}
				#RollingDigit_GameAltitude3 {
					top: calc(-45px * 10);
				}
				#RollingDigit_GameAltitude4 {
					top: calc(17.5px - 25px * 13);
				}
				#RollingDigit_GameAltitude4 span {
					height: 25px; margin: 0;
					font-size: 1.75em;
				}

			/* Prompts */
			#Ctnr_GamePrompts {
				position: absolute; bottom: 50px; left: 170px;
				width: calc(100% - 340px);
			}
			#Ctnr_GamePrompts .CtrlGroup {
				width: 100%;
				flex-direction: column; align-items: center;
			}
			#Ctnr_GamePrompts .Ctrl {
				height: unset; padding: 5px; margin: 10px 0 0 0;
			}

			/* Game ctrl */
			#Ctnr_GameCtrl {
				position: absolute; bottom: 0; left: 0;
				width: 100%; height: 35px;
			}
			#Ctnr_GameCtrl .CtrlGroup {
				width: 100%; height: 100%;
			}
			#Ctrl_GamePauseOrReset {
				position: absolute; top: 0; left: calc(50% - 60px);
				width: 120px;
			}
			#Ctrl_GameToggleFullscreen {
				position: absolute; top: 0; right: 0;
				width: 35px;
			}
			#Ctnr_GameCtrl .HotkeyIndicator {
				left: calc(50% - 17.5px);
				width: 35px;
			}

		/* Highscore */
		#ItemGroup_Highscore {
			margin: 0;
			flex-direction: column; align-items: center;
		}
		#ItemGroup_Highscore .Item {
			width: 660px; height: 35px; padding: 5px 15px; margin: 5px 0;
		}
		#ItemGroup_Highscore .CtrlGroup {
			width: 100%; height: 100%;
		}
		#ItemGroup_Highscore .Ctrl {
			height: 100%;
			text-align: center;
			display: flex; justify-content: center; align-items: center;
		}
		.HighscoreSequence {
			width: 65px;
		}
		.HighscoreDate {
			width: 125px;
		}
		.HighscoreScore {
			width: 115px;
		}
		.HighscoreAvgSpeed {
			width: 95px;
		}
		.HighscoreAvgKeystrokeSpeed {
			width: 125px;
		}
		.HighscoreAccuracy {
			width: 105px;
		}

		/* Library */
		#Label_LibraryItemCount {
			position: absolute; top: unset; right: 5px;
		}
		.ListItemLabel {
			width: calc(100% - 76px);
		}
		.ListItemName {
			max-width: 269px;
			overflow: hidden;
		}
		#Library .ScrollableList .Button {
			width: 22px; height: 22px;
			justify-content: center;
		}
		.ListItemDuplicate {
			position: absolute; top: calc(50% - 11px); right: 49px;
		}
		.ListItemExport {
			position: absolute; top: calc(50% - 11px); right: 27px;
		}
		.ListItemDelete {
			position: absolute; top: calc(50% - 11px); right: 5px;
		}
		#Ctrl_LibraryImport {
			width: calc(100% - 90px); height: 80px;
		}
		#Textbox_LibraryImport {
			width: 100%;
			white-space: pre;
		}
		#Ctrl_LibraryImport2 {
			width: 80px; height: 80px;
		}

/* Footer */
	footer {
		display: block;
	}
	footer p {
		max-width: unset;
		margin: 0;
	}
	footer .copyright {
		font-size: 0.95em;
	}
	footer .disclaimer {
		max-width: 680px;
		margin: 0 auto;
		font-size: 0.80em;
		line-height: 1.7;
	}
	footer a {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

/* Responsive web design */
@media (max-width: 920px) {
	/* Area specific */
		/* Header */
		#DropctrlGroup_Nav {
			height: 177px;
		}

		/* Main */
			/* Game */
				/* Terrain */
				#Ctnr_GameTerrain {
					bottom: calc(35px + (100% - 210px) / 2 - 1982.5px); right: 50%;
				}

				/* Characters */
				.Character {
					bottom: calc(35px + (100% - 210px) / 2 + 17.5px);
					width: 50px;
				}
				#GameChaserBalloon {
					left: 0;
					width: 70px;
				}
				#GameChaserBalloon .Balloon {
					bottom: 40px; left: 0;
					width: 100%;
				}
				#Label_GameDistance {
					font-size: 1.00em;
				}
				#GameChaserBalloon .BalloonTail {
					width: 100%; height: 50px;
				}

				/* Textbox */
				#Ctnr_GameTextbox {
					top: calc(175px + (100% - 210px) / 2 - 17.5px);
					width: 50%;
				}

				/* Stats */
				#Ctnr_GameStats {
					left: 115px;
					width: calc(100% - 230px); height: 150px;
				}
				#Ctnr_GameStats .CtrlGroup {
					height: 100%;
				}
				#Ctnr_GameStats .Ctrl {
					width: 50%; height: calc(100% / 3);
				}
				.GameStatsTitle {
					font-size: 0.75em;
				}
				.GameStatsValue {
					font-size: 1.00em;
				}

				/* Speed */
				#Ctnr_GameSpeed {
					top: 25px;
					width: 95px; height: 150px;
				}
					/* Tape */
					.Tape .CtrlGroup {
						width: calc(100% - 14px);
					}
					.TapeScale {
						width: 15px;
					}
					.TapeNumber {
						width: calc(100% - 30px);
						font-size: 1.00em;
					}

					/* Additional indicators */
					#Ctrl_GameSpeedAdditionalIndicators {
						width: calc(100% + 15px);
					}
						/* Speed trend */
						#Needle_GameSpeedTrend {
							right: 22.5px;
							width: 10px;
						}
						#Needle_GameSpeedTrend .NeedleArrow {
							height: 10px;
						}

						/* Other speeds */
						#CtrlGroup_GameOtherSpeeds {
							width: 15px;
						}
						#CtrlGroup_GameOtherSpeeds #Ctrl_GameChaserSpeed, #CtrlGroup_GameOtherSpeeds #Ctrl_GameDangerousSpeed {
							width: 5px;
						}
						#CtrlGroup_GameOtherSpeeds #Ctrl_GameAvgSpeed {
							width: 15px; clip-path: polygon(100% 12.5%, 100% 87.5%, 0 50%);
						}

					/* Balloon */
					#Ctrl_GameSpeedBalloon {
						top: calc(50% - 25px);
						width: 85px; height: 50px;
					}
					#Ctrl_GameSpeedBalloon .CtrlGroup .Balloon {
						width: 70px;
					}
					#Ctrl_GameSpeedBalloon .CtrlGroup .BalloonTail {
						width: 20px; clip-path: polygon(100% 50%, 0 70%, 0 30%);
					}
					#Ctrl_GameSpeedBalloon .CtrlGroup .Balloon .Ctrl {
						width: 12.5px;
					}
					#RollingDigit_GameSpeed1 {
						top: calc(-30px * 9);
					}
					#RollingDigit_GameSpeed2 {
						top: calc(-30px * 10);
					}
					#RollingDigit_GameSpeed3 {
						top: calc(10px - 20px * 18);
					}
					.RollingDigit span {
						height: 20px; margin: 10px 0;
						font-size: 1.40em;
					}

				/* Altitude */
				#Ctnr_GameAltitude {
					top: 25px;
					width: 95px; height: 150px;
				}
					/* Balloon */
					#Ctrl_GameAltitudeBalloon {
						top: calc(50% - 25px);
						width: 85px; height: 50px;
					}
					#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon {
						width: 70px;
					}
					#Ctrl_GameAltitudeBalloon .CtrlGroup .BalloonTail {
						width: 20px; clip-path: polygon(100% 30%, 100% 70%, 0 50%);
					}
					#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon .Ctrl {
						width: 12.5px;
					}
					#Ctrl_GameAltitudeBalloon .CtrlGroup .Balloon #Ctrl_GameAltitude4 {
						width: 22.5px;
					}
					#RollingDigit_GameAltitude1 {
						top: calc(-30px * 2);
					}
					#RollingDigit_GameAltitude2 {
						top: calc(-30px * 10);
					}
					#RollingDigit_GameAltitude3 {
						top: calc(-30px * 10);
					}
					#RollingDigit_GameAltitude4 {
						top: calc(12px - 16px * 13);
					}
					#RollingDigit_GameAltitude4 span {
						height: 16px;
						font-size: 1.10em;
					}

				/* Prompts */
				#Ctnr_GamePrompts {
					left: 0;
					width: 100%;
				}

			/* Highscore */
			#ItemGroup_Highscore .Item {
				width: 335px;
			}
			.HighscoreAvgSpeed, .HighscoreAvgKeystrokeSpeed, .HighscoreAccuracy { /* .HiddenHorizontally */
				width: 0 !important; border-left: none !important; border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important;
				opacity: 0 !important;
				overflow: hidden !important;
				pointer-events: none !important;
			}
}