:root {
	--starting-zoom-scale: 21vmin;
	--zoom-scale: var(--starting-zoom-scale);
}

.board-container {
	display: flex;
	flex-direction: row;

	margin-bottom: 1rem;
}

.board-container .padding {
	font-size: 2rem;
	visibility: hidden;
}

.board-table {
	border-collapse: separate;
	border-spacing: max(calc(var(--starting-zoom-scale) - var(--zoom-scale) + 0.45vmin), 2px);
	box-shadow: 0 2vmax 3vmax 0 #00000030;
}

.board-table td {
	position: relative;
	box-sizing: border-box;
	
	width: var(--zoom-scale);
	height: var(--zoom-scale);
	min-width: var(--zoom-scale);
	min-height: var(--zoom-scale);
	
	cursor: pointer;
	background-color: hsl(0, 0%, 100%);

	font-size: var(--zoom-scale);
	text-align: center;
	font-family: monospace;
	
	line-height: 0.7rem;
	margin: 0;
	padding: 0;
}

.board-table td:focus {
/* .board-table td:hover:not(.disabled) { */
	filter: brightness(95%);
	outline: none;
}

.board-table td:focus:not(.disabled)::before,
.board-table td:hover:not(.disabled)::before {
	content: attr(next-player);

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	font-size: 90%;
	
	opacity: 25%;
}

.board-table td.disabled {
	cursor: default !important;
}

.board-table td.highlighted {
	background-color: rgb(168, 248, 168) !important;
}