:root {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	user-select: none;

	--bg-color: #292929;
	--board-color: #969696;
}

body {
	margin: 0;
	background-color: var(--bg-color);
}

body, .controls, .controls > div, .customize div, .customize label, .cell { display: flex; }
body, .controls, .customize div { flex-direction: column; }
body, .controls, .controls > div:first-of-type, .customize, .customize label, .cell { align-items: center; }

.controls {
	width: 100%;
	margin: 35px 0;
}

.controls svg {
	height: 2.5rem;
	font-size: 4rem;
	font-weight: bold;
	-webkit-text-stroke: 2px red	;
}

.controls text {
	fill: var(--board-color);
	stroke: var(--bg-color);
	stroke-width: 3px;
	stroke-linejoin: round;
}

.controls text.outline {
	 stroke: var(--board-color);
	 stroke-width: 6px;
}

.controls button, .customize button {
	appearance: none;
  height: fit-content;
	padding: 4px 8px;
	text-transform: uppercase;
	color: var(--board-color);
	background-color: var(--bg-color);
	border: 2px solid var(--board-color);
	border-radius: 2px;
	cursor: pointer;
}

.controls button:hover {
	color: var(--bg-color);
	background-color: var(--board-color);
	border-color: var(--bg-color);
	outline: 2px solid var(--board-color);
}

.controls button, .customize {
	font-size: 1.2rem;
	font-weight: 600;
}

.controls > div:first-of-type {
	height: fit-content;
	min-height: 64px;
	padding: 0 17.5px;
}

.turn {
	margin: 0 17.5px;
	font-size: 1.5rem;
	text-align: center;
	color: var(--board-color);
}

.turn span {
	position: relative;
	top: 4px;
	font-weight: bolder;
}

.customize {
	gap: 25px;
	text-transform: capitalize;
	color: var(--board-color);
}

.customize div, .customize label { gap: 5px; }
.customize label, .color-picker::-webkit-color-swatch { cursor: pointer; }

.color-picker {
	appearance: none;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 2px solid var(--board-color);
}

.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: none; }

.board {
	width: fit-content;
	height: fit-content;
	display: grid;
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.cell {
	width: 100px;
	height: 100px;
	justify-content: center;
	color: var(--board-color);
	border: 3px solid var(--board-color);
}

.available { cursor: pointer; }

.cell:nth-child(-n + 3) { border-top-color: transparent; }
.cell:nth-child(n + 7) { border-bottom-color: transparent; }
.cell:nth-child(3n + 1) { border-left-color: transparent; }
.cell:nth-child(3n) { border-right-color: transparent; }

.cell .material-symbols-outlined { font-size: 5rem; }

.hidden {
	margin: 0;
	display: none;
}