html,
body {
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	touch-action: manipulation;
}

#snakes {
	width: min(960px, calc(100vw - 32px), calc((100vh - 120px) * 4 / 3)) !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	margin: 48px auto 28px !important;
}

#canvas,
#overlay,
#highscores,
#score {
	width: 100% !important;
}

#canvas,
#overlay {
	height: 100% !important;
}

#help {
	bottom: -1.8em !important;
}

#stats {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#touch-controls {
	display: none;
	position: fixed;
	left: 50%;
	bottom: max(8px, env(safe-area-inset-bottom));
	z-index: 50;
	grid-template-columns: 54px 82px 54px;
	gap: 6px;
	transform: translateX(-50%);
}

#touch-controls button {
	min-width: 54px;
	height: 46px;
	border: 2px solid #1f4367;
	border-radius: 8px;
	background: rgba(249, 242, 129, 0.92);
	color: #1f4367;
	font: 700 15px Arial, sans-serif;
	box-shadow: 0 3px 0 rgba(31, 67, 103, 0.35);
}

#touch-controls button[data-key="ArrowUp"] {
	grid-column: 2;
}

#touch-controls button[data-key="Enter"] {
	grid-column: 1 / 4;
	width: 100%;
}

#touch-controls button:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(31, 67, 103, 0.35);
}

@media (pointer: coarse), (max-width: 720px), (max-height: 620px) {
	#snakes {
		width: min(960px, calc(100vw - 24px), calc((100vh - 188px) * 4 / 3)) !important;
		margin-top: 42px !important;
	}

	.watermark {
		display: none !important;
	}

	#touch-controls {
		display: grid;
	}
}