@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,
.grid,
.task .center,
.screen {
	display: grid;
}
body,
.grid {
	place-items: start center;
}
body,
.circle,
.screen::after {
	background: #000;
}
body {
	color: #fff;
	cursor: default;
	font: 400 16px/1.2 font, sans-serif;
	grid: 18% 72% 10% / 20% 60% 20%;
	letter-spacing: 0.06em;
	text-align: center;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.sq,
.btns li,
p {
	border-radius: 0.2em;
}
.result,
p {
	background-color: #165742;
	border: 1px solid #fff9;
}
.result li,
.btns {
	font-size: 1.7em;
}
ul,
ol {
	list-style: none;
	white-space: nowrap;
}
.speaker,
.error {
	font-size: 1.3em;
}
.task .center::after,
.screen::after {
	content: "";
}
ol li::before {
	position: absolute;
}
.error {
	font-family: monospace;
	margin: 4em 0 0;
}
.none,
.btns .none {
	display: none;
}

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

/* Task */
.grid {
	font-size: 0.5em;
	gap: 2em;
	grid: repeat(3, 1fr) / repeat(3, 1fr);
}
.sq {
	background: #0e382a;
	height: 11em;
	width: 11em;
}
.task .sq {
	background: unset;
}
.no-cursor {
	cursor: none;
}
.visual {
	animation: stm var(--time) step-end;
}
@keyframes stm {
	0% {
		background: #165742;
	}
}
.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: -3em;
	min-width: 18.152em;
}
.result li {
	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;
}

/* Controls */
.center,
.circle,
.screen {
	box-sizing: border-box;
}
.center,
.circle {
	border: 1em solid;
	border-radius: 50%;
}
.center {
	--cent: 90%;
	--cross: 26px;
	font-size: 1.3em;
	height: var(--cent);
	place-self: center;
	width: var(--cent);
}
.task .center {
	border: none;
	border-radius: 0;
	height: var(--cross);
	place-items: center;
	width: var(--cross);
}
.task .center::after {
	animation: cross 0.6s ease-in;
	background: #888;
	clip-path: polygon(
		0 40%,
		40% 40%,
		40% 0%,
		60% 0%,
		60% 40%,
		100% 40%,
		100% 60%,
		60% 60%,
		60% 100%,
		40% 100%,
		40% 60%,
		0 60%
	);
	height: var(--cross);
	width: var(--cross);
	z-index: 30;
}
@keyframes cross {
	0% {
		scale: 0;
	}
}
.circle {
	border-width: 0.92em;
	font-size: 0.768em;
	height: 7.65em;
	margin: 0 0 16px;
	width: 7.65em;
}
.btns {
	animation: btn 0.6s ease-in;
	margin-bottom: 22px;
	z-index: 20;
}
@keyframes btn {
	0% {
		opacity: 0;
	}
}
.btns li,
p,
ol {
	line-height: 1.7;
}
.btns li {
	background: linear-gradient(#000, transparent 12%, transparent 88%, #000),
		linear-gradient(90deg, #000, #165742 6%, #165742 94%, #000);
	color: #000;
	display: inline-block;
	font-weight: 600;
	height: 1.65em;
	margin: 0 0.8em;
	width: 3.9em;
}
.btns-toggle {
	animation: btns-toggle 2s;
	opacity: 0;
}
@keyframes btns-toggle {
	20%,
	80% {
		opacity: 1;
	}
}
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 #238868;
	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(.center, .circle, .screen).active {
	border-color: #444;
}
.center.active::after {
	background: #444;
}
.btns li.active {
	opacity: 0.4;
}
p.active,
p.active ol {
	color: #999;
}

/* Media */
@media (orientation: portrait) {
	.grid {
		margin-top: 7vh;
	}
	.btns {
		margin-bottom: 32px;
	}
}
@media (min-width: 600px) {
	.grid {
		gap: 1.5em;
	}
	.center {
		--cent: 85%;
		font-size: 1.1em;
	}
}
@media (min-width: 600px) and (min-height: 600px) {
	.grid {
		font-size: 0.6em;
	}
}
@media (min-width: 1020px) {
	.grid {
		gap: 1.3em;
	}
}
@media (orientation: portrait) and (min-width: 700px) {
	.grid {
		font-size: 1.5vw;
	}
	.result {
		font-size: 1.85vw;
	}
	.center {
		--cross: 3.6vw;
	}
	.circle {
		font-size: 1.8vw;
	}
	.btns {
		font-size: 3.7vw;
	}
	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) {
	.grid {
		font-size: 1.5vh;
	}
	.result {
		font-size: 1.85vh;
	}
	.center {
		--cross: 3.6vh;
	}
	.circle {
		font-size: 1.8vh;
	}
	.btns {
		font-size: 3.7vh;
	}
	p {
		font-size: 3.1vh;
	}
	ol {
		font-size: 1.9vh;
	}
	.speaker,
	.error {
		font-size: 2.6vh;
	}
	.screen {
		--scrn: 3.4vh;
	}
}