html, body {
	padding: 0;
	margin: 0;
	background: #504c4c;
	overscroll-behavior: contain;
	touch-action: none;
	font-family: Montserrat, sans-serif;
}

#app {
	width: 100vw;
	width: 100svw;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#placeholder {
	color: lightgrey;
	font-size: 2rem;
	font-weight: 100;
	margin: 2rem;
	pointer-events: none;
}

#touch-warning {
	color: orange;
	font-size: 1rem;
	font-weight: 100;
	pointer-events: none;
}

.touch-point {
	--radius: 80px;
	position: fixed;
	width: var(--radius);
	height: var(--radius);
	border-radius: var(--radius);
	border-width: calc(var(--radius) / 5);
	border-style: solid;
	transform: translate(-50%, -50%);
	animation: rotateTouchPoint 1s linear infinite;
}

#app.finish-screen .touch-point {
	border-style: none;
}

#app.finish-screen .touch-point.chosen {
	border-style: solid;
	border-color: gold;
}

#app.finish-screen .touch-point.teamed {
	border-style: solid;
	border-color: currentColor;
}

@keyframes rotateTouchPoint {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.controls {
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100vw;
	pointer-events: none;
}