body {
	background-color:lightgrey;
}
/* Phones: shrink the 600px board, menu and end screen to fit the screen. */
#canvas, #menu, #finishedGame img {
	width: min(600px, 96vw, 70vh);
	height: auto;
}
#finishedGame { max-width: 96vw; }

/* Touch D-pad, shown on touch screens while a game is running. Hold a direction like an arrow key. */
#dpad {
	display: none;
	grid-template-areas: ". up ." "left . right" ". down .";
	grid-template-columns: repeat(3, 72px);
	grid-template-rows: repeat(3, 64px);
	gap: 6px;
	justify-content: center;
	margin-top: 12px;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
#dpad button {
	font-size: 26px;
	border: 2px solid #555;
	border-radius: 12px;
	background: white;
	-webkit-tap-highlight-color: transparent;
}
#dpad button.held { background: #bbb; }
@media (pointer: coarse) {
	#canvas:not([hidden]) ~ #dpad { display: grid; }
	body { touch-action: manipulation; }
}
@media (pointer: coarse) and (orientation: landscape) {
	#canvas, #menu, #finishedGame img { width: min(600px, 60vw, 94vh); }
	#canvas:not([hidden]) ~ #dpad { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: 12px; margin: 0; }
}