html, body {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

body {
	display: flex;
	flex-flow: column;

	text-align: center;
	font-family: sans-serif;
	background: black;
	color: white;

	--c: purple;
	--c-0: #666;
	--c-1: red;
	--c-2: green;
	--c-3: yellow;
	--c-4: #33F;
}

a {
	color: #ABABFF;
}

a:visited {
	color: #AF93FF;
}

button {
	font-size: 2em;
	margin: 0.2em;
	background: none;
	color: white;
}

dialog {
	height: uset;
	margin: 1em auto;
	background: #444;
	color: white;
	box-shadow: 0 0 2em 1em black;
}

dialog > form {
	display: flex;
	flex-flow: column;
	gap: 0.4em;
	text-align: center;
}
dialog > form > * {
	margin: 0;
}
dialog > form > h2 {
	margin-top: 0.4em;
}

footer {
	margin: 0.4em;
}

input, textarea {
	padding: 0.4em;
	background: #333;
	color: #FFF;
	border: none;
	border-radius: 0.2em;
}

/* Note, this funny setup is to support browsers that don't support :user-invalid. */
:is(input, textarea):invalid {
	border: 1px solid red;
}
:is(input, textarea):not(:user-invalid) {
	border: none;
}

nav {
	display: flex;
}

.color {
	font-size: 2em;
	padding: 0.4em;
	min-height: 1.6em;
	background: var(--c);
	border: none;
}

.c-0 { --c: var(--c-0) }
.c-1 { --c: var(--c-1) }
.c-2 { --c: var(--c-2) }
.c-3 { --c: var(--c-3) }
.c-4 { --c: var(--c-4) }

.game {
	width: auto;
	max-width: 90vh;
	max-height: 40rem;
	margin: 0.2em;
}

.game .cell {
	fill: none;
}

.game .grid {
	stroke: #333;
	stroke-width: 0.1;
}

.game .wall {
	stroke: white;
	stroke-linecap: round;
	stroke-width: 0.1;
}

.game .robot {
	fill: var(--c);
	cursor: move;
}

.game .cell .mirror {
	stroke: var(--c);
	stroke-linecap: round;
	stroke-width: 0.1;
}

.game .cell.target {
	fill: var(--c);
}

.gameui {
	flex: 1;
	fill: var(--c);
}

.quarter {
	border: none;
}

.spacer {
	flex: 1;
}

.mirror {
	color: var(--c);
}