.chooser {
	display: flex;
	gap: 1em;
}

.chooser * {
	flex: 1;
}

.board {
	width: 17em;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.space {
	/* height: 2em; */
	aspect-ratio: 1 / 1;
	font-size: 2rem;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	font-family: var(--ff-p);
}

.space:hover {
	transform: none;
	box-shadow: none;
}

.player,
.computer {
	cursor: default;
}

:is(.player, .computer):hover {
	background-color: var(--bg);
	color: var(--clr-1);
}

.player {
	--clr-1: #3498db;
}

.computer {
	--clr-1: #f1c40f;
}