:root {
	--bg: #fff;
	--fg: #000;

	background: var(--bg);
	color: var(--fg);
}

body {
	margin: 0;
}

pre {
	line-height: 1;
	letter-spacing: 0.1em;
	margin: 0;
}

.controls {
	position: fixed;
	inset-block-end: 0;
	inline-size: 12em;
	max-inline-size: 30%;
	opacity: 0.3;
	touch-action: manipulation;
	cursor: pointer;
}
.controls circle {
	fill: var(--fg);
}
.controls path {
	fill: none;
	stroke: var(--bg);
	stroke-width: 2;
}
.controls text {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 16px;
	dominant-baseline: middle;
	text-anchor: middle;
	fill: var(--bg);
}
#dpad {
	inset-inline-start: 0;
}
#buttons {
	inset-inline-end: 0;
}

.color-0 { color: #bbb }
.color-1 { color: #c00 }
.color-2 { color: #591 }
.color-3 { color: #b71 }
.color-4 { color: #16c }
.color-5 { color: #96a }
.color-6 { color: #299 }
.color-7 { color: #555 }
.color-inverse {
	background: var(--fg);
	color: var(--bg);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--bg: #000;
		--fg: #fff;
	}
	.color-0 { color: #555 }
	.color-1 { color: #f33 }
	.color-2 { color: #7c0 }
	.color-3 { color: #ed0 }
	.color-4 { color: #6ad }
	.color-5 { color: #c8b }
	.color-6 { color: #0dd }
	.color-7 { color: #bbb }

	.controls {
		opacity: 0.1;
	}
}

@media (pointer: coarse) {
	:root {
		user-select: none;
		-webkit-user-select: none;
	}
}