/* The game renders a fixed 16:9 frame at a whole-number scale, so a portrait
   phone shows it at about a fifth of the screen. Held sideways it fills ~70%.
   Rather than change the aspect ratio, ask for the phone to be turned.

   Scoped to (pointer: coarse) so a tall, narrow desktop window never sees it. */

#rotate-hint {
	display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
	#rotate-hint {
		position: fixed;
		inset: 0;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.75rem;
		padding: 2rem;
		/* Matches the loading screen's background, so the handover is seamless. */
		background-color: #242424;
		color: #e0e0e0;
		font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
		text-align: center;
	}

	#rotate-hint-icon {
		width: 4.5rem;
		height: 4.5rem;
		stroke: #e0e0e0;
		fill: none;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		animation: rotate-hint-tip 2.4s ease-in-out infinite;
	}

	#rotate-hint p {
		margin: 0;
		font-size: 1.15rem;
		line-height: 1.4;
	}

	#rotate-hint small {
		color: #9a9a9a;
		font-size: 0.85rem;
	}

	#rotate-hint button {
		background-color: #2f2f3d;
		border: 1px solid #5b5b74;
		border-radius: 0.5rem;
		color: #e0e0e0;
		font: inherit;
		font-size: 1rem;
		padding: 0.7rem 1.4rem;
	}

	#rotate-hint button:active {
		background-color: #3c3c4e;
	}
}

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

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