@-ms-viewport {
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
}

@keyframes bgmover {
	from {
		background-position-x: 0%;
	}
	to {
		background-position-x: -1920px;
	}
}

html,body {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-ms-content-zooming: none;
    -ms-scroll-limit: 0px;
    -ms-touch-select: none;
	overflow: hidden;
	-ms-touch-action: none;
	touch-action: none;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#appHolder {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	display: grid;
	grid-template-rows: 1fr auto;
}

#wrapper {
	background-size: 1920px 1080px;
	background-position: bottom;
	background-repeat-y: no-repeat;
	animation-name: bgmover;
	animation-duration: 40s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-color: #2d90d2;
	grid-row: 1;
	position: relative;
}

#adUnit {
	grid-row: 2;
}

#canvas {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#distance {
	display: block;
	position: absolute;
	top: 24x;
	left: 24px;
	left: calc(24px + env(safe-area-inset-left));
	top: calc(24px + env(safe-area-inset-top));
	color: #ffffff;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
	font-weight: bold;
	font-family: sans-serif;
}

#combReadout {
	display: block;
	position: absolute;
	top: 24x;
	right: 24x;
	right: calc(24px + env(safe-area-inset-right));
	top: calc(24px + env(safe-area-inset-top));
	color: #ffffff;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
	font-weight: bold;
	font-family: sans-serif;
}

#combIndicator {
	height: 14px;
	margin: 2px;
	position: relative;
	top: 2px;
}

#btnPause {
	position: absolute;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
	right: 24px;
	bottom: 24px;
	right: calc(24px + env(safe-area-inset-right));
	height: 52px;
	width: 52px;
}

.premium #btnPause {
	bottom: calc(24px + env(safe-area-inset-bottom));
}

#powerBar {
	position: absolute;
	left: 24px;
	bottom: 24px;
	left: calc(24px + env(safe-area-inset-left));
	height: 100px;
	width: 16px;
	border-style: solid;
	border-color: #006699;
	border-width: 2px;
	background-color: rgba(0,0,0,.6);
}

.premium #powerBar {
	bottom: calc(24px + env(safe-area-inset-bottom));
}

#powerMeter {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 16px;
	height: 100px;
	background-color: #3399cc;
}

#titleScreen {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	font-weight: bold;
	font-family: "Gudea", sans-serif;
	color: #ffffff;
	text-shadow: 
		1px 1px 0px #000000, 
		1px -1px 0px #000000,
		-1px -1px 0px #000000,
		-1px 1px 0px #000000,
		2px 2px 0px #000000;
	display: grid;
	grid-template-rows: auto 1fr auto 1fr auto;
	transition: 0.5s;
}

#titleScreen.hidden {
	top: -100vh;
}

#titleScreenTop {
	grid-row: 1;
	display: grid;
	grid-template-columns: auto 1fr auto;
	padding: 24px;
	font-size: 1.2em;
	padding: 
		calc(24px + env(safe-area-inset-top)) 
		calc(24px + env(safe-area-inset-right)) 
		24px 
		calc(24px + env(safe-area-inset-left));
}

#topBarOptions {
	grid-column: 1;
	cursor: pointer;
	transition: 0.2s;
}

#topBarAccount {
	grid-column: 3;
	cursor: pointer;
	transition: 0.2s;
}

#titleScreenMain {
	grid-row: 3;
}

#titleLogo {
	width: 90%;
	max-width: 600px;
	display: block;
	margin: 0px auto;
}

#titleOptions {
	text-align: center;
	font-size: 1.4em;
	margin-top: 28px;
}

.titleOption {
	cursor: pointer;
	transition: 0.2s;
	margin: 4px;
}

.titleOption:hover, .titleOption.gamepadHighlighted, #topBarOptions:hover, #topBarAccount:hover, #topBarOptions.gamepadHighlighted, #topBarAccount.gamepadHighlighted {
	color: #FFA000;
}

.titleOption:active, #topBarOptions:active, #topBarAccount:active {
	opacity: 0.5;
}

#titleScreenBottom {
	grid-row: 5;
	text-align: center;
	cursor: pointer;
	padding: 
		24px 
		calc(24px + env(safe-area-inset-right)) 
		24px 
		calc(24px + env(safe-area-inset-left));
}

.premium #titleScreenBottom {
	padding: 
		24px 
		calc(24px + env(safe-area-inset-right)) 
		calc(24px + env(safe-area-inset-bottom)) 
		calc(24px + env(safe-area-inset-left));
}

@media (max-height: 520px) {
	#titleScreenMain {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		align-content: center;
	}

	#titleLogo {
		padding-left: env(safe-area-inset-left);
	}

	#titleOptions {
		padding-left: env(safe-area-inset-right);
	}
}