#game {
	text-align: center;
	transition: filter 0.5s;
}

#game.disabled {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

#game>table {
	display: inline-block;
	border-collapse: separate;
	border-spacing: calc(4px + 0.5vw);
}

.smallBoard {
	position: relative;
	padding: calc(4px + 0.5vw);
	transition: border 0.5s;
	border-radius: 8px;
	font-size: calc(40px + 5vw);
	font-weight: 100;
}
@media (max-width: 768px) {
	.smallBoard {
		font-weight: 200;
	}
}

.smallBoard.enabled {
	border: 2px solid slategray;
}

.smallBoard.disabled {
	border: 2px solid transparent;
}

.smallBoard::before {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	content: attr(data-winner);
}

.cell {
	width: calc(14px + 2.5vw);
	height: calc(14px + 2.5vw);
	font-size: calc(11px + 1.1vw);
	font-weight: 300;
}
@media (max-width: 992px) {
	.cell {
		font-weight: 400;
	}
}
@media (max-width: 768px) {
	.cell {
		font-weight: 500;
	}
}

.cell.enabled:hover {
	cursor: pointer;
	background-color: silver;
}

.cell.disabled {
	cursor: default;
}

.cell.W, .cell.C, .cell.E, .cell.SW, .cell.S, .cell.SE {
	border-top: 2px solid gray;
}

.cell.NW, .cell.N, .cell.NE, .cell.W, .cell.C, .cell.E {
	border-bottom: 2px solid gray;
}

.cell.N, .cell.NE, .cell.C, .cell.E, .cell.S, .cell.SE {
	border-left: 2px solid gray;
}

.cell.NW, .cell.N, .cell.W, .cell.C, .cell.SW, .cell.S {
	border-right: 2px solid gray;
}