/* Copied into the web build by `~/tools/godot.ps1 export`; referenced from the
   preset's html/head_include. */

/* Stop the page itself reacting to touch. Without this, a drag on the gun
   bench can become a pull-to-refresh or a rubber-band scroll, and the drag
   the game was tracking is silently cancelled mid-gesture. */
html, body {
	overscroll-behavior: none;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	background: #07090c;
}

#rotate-prompt {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #07090c;
	color: #6fd4ff;
	font: 500 17px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
}

#rotate-prompt p {
	max-width: 18em;
	margin: 0;
	padding: 2em;
}

#rotate-prompt svg {
	display: block;
	margin: 0 auto 1.4em;
	animation: rotate-hint 2.4s ease-in-out infinite;
}

@keyframes rotate-hint {
	0%, 45% { transform: rotate(0deg); }
	60%, 90% { transform: rotate(-90deg); }
	100% { transform: rotate(0deg); }
}

/* Only on touch devices held upright. A narrow desktop window is not a phone
   in portrait, and covering it with a rotate prompt would be nonsense. */
@media (orientation: portrait) and (pointer: coarse) {
	#rotate-prompt { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	#rotate-prompt svg { animation: none; }
}