@font-face {
	font-display: swap;
	font-family: font;
	font-weight: 400 600;
	src: url("./font.woff2");
}

/* General */
html,
body {
	height: 100dvh;
	overflow: clip;
	position: fixed;
	width: 100dvw;
}
body,
ul,
ol,
p {
	margin: 0;
	padding: 0;
}
body,
.result:has(.match),
.match,
.panel,
.screen {
	display: grid;
}
body,
.result:has(.match) {
	place-items: start center;
}
body,
.circle,
.screen::after {
	background: #000;
}
body {
	color: #fff;
	cursor: default;
	font: 400 16px/1.2 font, sans-serif;
	grid: 32% 40% 28% / 20% 60% 20%;
	letter-spacing: 0.06em;
	text-align: center;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.sq,
.result span,
.panel li,
p {
	border-radius: 0.2em;
}
.sq,
.panel {
	font-weight: 480;
}
.result,
p {
	background: #444;
	border: 1px solid #fff9;
}
ul,
ol {
	list-style: none;
	white-space: nowrap;
}
.speaker,
.error {
	font-size: 1.3em;
}
.result:has(.match)::before,
.esc::after,
.screen::after {
	content: "";
}
.result:has(.match)::before,
ol li::before {
	position: absolute;
}
.error {
	font-family: monospace;
	margin: 4em 0 0;
}
.none {
	display: none;
}

/* Placement */
.x {
	grid-area: 1 / 1;
	margin: 16px 0 0 16px;
	place-self: start;
}
.speaker,
.error {
	grid-area: 1 / 2;
}
.alt {
	grid-area: 1 / 3;
	margin: 16px 16px 0 0;
	place-self: start end;
}
.sq,
.result,
.panel {
	grid-area: 2 / 2;
}
.help,
.esc {
	grid-area: 3 / 1;
	margin: 0 0 16px 16px;
	place-self: end start;
}
.circle {
	grid-area: 3 / 2;
	margin: 0 0 16px;
	place-self: end center;
}
.screen {
	grid-area: 3 / 3;
	margin: 0 16px 16px 0;
	place-self: end;
}

/* Task */
.sq {
	font-size: 12em;
	height: 0.7em;
	line-height: 0.95;
	margin-top: -6vh;
	width: 0.7em;
}
.sq.color {
	margin-top: -3vh;
}
.char::after {
	content: var(--stm);
}
.color {
	background: var(--stm);
}
.sq.char,
.sq.color {
	animation: stm var(--time) step-end;
}
@keyframes stm {
	100% {
		background: unset;
	}
}
.result {
	border: 0.1em solid;
	border-radius: 0.8em;
	box-shadow: 0 0 6em #666, 0 0 2em #ccc;
	font-size: 0.84em;
	height: 11em;
	letter-spacing: 0.07em;
	margin-top: -3.2em;
	min-width: 18.152em;
	position: relative;
}
.result li {
	font-size: 1.7em;
	font-weight: 600;
	margin: 0.6em 1.2em;
	text-shadow: 0.12em 0.09em 0 #000;
	white-space: pre;
}
.result li:first-child {
	font-size: 2em;
	margin: 0.59em 1em 0;
}
.complete {
	color: #2b2;
}
.result .match {
	gap: 0.62em 0.13em;
	grid: auto / repeat(var(--match), 0.9em);
	margin: 0.6em 1.2em 0.75em;
}
.result li.match:has(.color) {
	margin-top: 0.7em;
	row-gap: 0.75em;
}
.result span {
	display: inline-flex;
	justify-content: center;
	width: 100%;
}
.result .color {
	height: 1.1em;
}
.result span:last-child {
	color: #f00;
}
.result:has(.match)::before {
	background: #fff;
	box-shadow: 0.17em 0.17em 0 #000;
	height: 2px;
	top: 7em;
	width: 60%;
}
.result:has(.color)::before {
	top: 7.15em;
}

/* Controls */
.circle,
.screen {
	box-sizing: border-box;
}
.circle {
	border: 0.92em solid;
	border-radius: 50%;
	font-size: 0.768em;
	height: 7.65em;
	width: 7.65em;
	z-index: 5;
}
.panel {
	--btn: 72px;
	font-size: 3.35em;
	gap: 0.4em 0.5em;
	grid: auto / repeat(var(--clms), 1fr);
	line-height: 1.4;
	margin-top: -15vh;
}
.panel li {
	background: #444;
	border: 2px solid #000;
	height: var(--btn);
	width: var(--btn);
}
.panel .color {
	background: var(--stm);
}
.esc {
	padding: 0.2em 0.2em 0 0;
}
.esc::after {
	background: #f00;
	clip-path: polygon(
		15% 0,
		0 15%,
		35% 50%,
		0 85%,
		15% 100%,
		50% 65%,
		85% 100%,
		100% 85%,
		65% 50%,
		100% 15%,
		85% 0,
		50% 35%
	);
	display: block;
	height: 1.5em;
	width: 1.5em;
}
p,
ol {
	line-height: 1.7;
}
p {
	font-size: 1.5em;
	height: 1.7em;
	width: 4.8em;
	text-shadow: 0.08em 0.08em 0 #000;
}
.help {
	width: 1.75em;
	z-index: 10;
}
.help:has(ol) {
	height: auto;
	width: auto;
}
ol {
	counter-reset: ol;
	font-size: 0.66em;
	margin: 0.55em 1.7em 0.9em 2.6em;
	text-align: left;
}
ol li::before {
	content: counter(ol) ".";
	counter-increment: ol;
	margin-left: -1.7em;
	text-align: right;
	width: 1em;
}
.speaker {
	margin: 16px 0 0;
}
.screen {
	--scrn: 26px;
	border: calc(var(--scrn) / 8) solid #999;
	height: var(--scrn);
	place-content: center;
	width: var(--scrn);
	z-index: -1;
}
.screen::after {
	clip-path: polygon(
		0 31%,
		31% 31%,
		31% 0,
		69% 0,
		69% 31%,
		100% 31%,
		100% 69%,
		69% 69%,
		69% 100%,
		31% 100%,
		31% 69%,
		0 69%
	);
	height: calc(var(--scrn) + 2px);
	width: calc(var(--scrn) + 2px);
}
:is(.circle, .screen).active {
	border-color: #444;
}
:is(.char, p).active {
	border-color: #04d;
}
.char.active {
	color: #000;
}
.color.active {
	opacity: 0.4;
}
.esc.active::after {
	background: #444;
}
p.active,
p.active ol {
	color: #999;
}

/* Media */
@media (orientation: portrait) {
	.sq {
		margin-top: -0.17em;
	}
	.sq.color {
		margin-top: -0.08em;
	}
	.panel {
		margin-top: -1.7em;
	}
}
@media (min-width: 600px) and (min-height: 600px) {
	.sq {
		font-size: 14em;
	}
}
@media (orientation: portrait) and (min-width: 700px) {
	.sq {
		font-size: 34vw;
	}
	.result {
		font-size: 1.85vw;
	}
	.circle {
		font-size: 1.8vw;
	}
	.panel {
		--btn: 10.7vw;
		font-size: calc(var(--btn) - 2.95vw);
	}
	.esc::after {
		font-size: 2.3vw;
	}
	p {
		font-size: 3.1vw;
	}
	ol {
		font-size: 1.9vw;
	}
	.speaker,
	.error {
		font-size: 2.6vw;
	}
	.screen {
		--scrn: 3.4vw;
	}
}
@media (orientation: landscape) and (min-height: 700px) {
	.sq {
		font-size: 34vh;
	}
	.result {
		font-size: 1.85vh;
	}
	.circle {
		font-size: 1.8vh;
	}
	.panel {
		--btn: 10.7vh;
		font-size: calc(var(--btn) - 2.95vh);
	}
	.esc::after {
		font-size: 2.3vh;
	}
	p {
		font-size: 3.1vh;
	}
	ol {
		font-size: 1.9vh;
	}
	.speaker,
	.error {
		font-size: 2.6vh;
	}
	.screen {
		--scrn: 3.4vh;
	}
}