* {
	box-sizing: border-box;
}
body {
	display: grid;
	height: 100vh;
	place-items: center;
}
#goban {
	--goban-size: 9;
	--goban-height: 80vh;
	--goban-cell: calc(var(--goban-height) / (9 + 2));
	--goban-color: #dbae6e;
	--goban-border-width: 0.05em;
	position: relative;
	display: grid;
	grid-template: repeat(var(--goban-size), 1fr) / repeat(var(--goban-size), 1fr);
	width: var(--goban-height);
	height: var(--goban-height);
	background-color: var(--goban-color);
	padding: var(--goban-cell);
	border-radius: 3px;
	box-shadow: 0px 8px 0px color-mix(in srgb, black 10%, var(--goban-color));
	}
	#goban:before {
	content: '';
	position: absolute;
	top: calc(var(--goban-cell) * 1.5);
	left: calc(var(--goban-cell) * 1.5);
	width: calc((var(--goban-size) - 1) * var(--goban-cell));
	height: calc((var(--goban-size) - 1) * var(--goban-cell));
	background-image: 
		linear-gradient(to right,  black 0%, black 1.5%, transparent 1.5%, transparent 98.5%, black 98.5%, black 100%), 
		linear-gradient(to bottom, black 0%, black 1.5%, transparent 1.5%, transparent 98.5%, black 98.5%, black 100%);
	background-size: var(--goban-cell) var(--goban-cell);
	border: var(--goban-border-width) solid black;
	border-bottom-width: calc(var(--goban-border-width) * 2);
	border-right-width: calc(var(--goban-border-width) * 2);
	display: block;
	}
.stone {
	position: relative;
	accent-color: var(--color, black);
	appearance: none;
	background-color: var(--color, black);
border-radius: 50%;
	cursor: crosshair;
	margin: .05em;
	z-index: 1;
}
.stone:not(:checked) {
	background-color: transparent;
}
.stone:not(:checked):hover {
	appearance: auto;
	opacity: .5;
	mix-blend-mode: multiply;
}
.stone[data-color="B"]:checked {
	--color: black;
	box-shadow: 
		.1em .1em .25em hsla(0 0 0 / 0.25), 
		.1em .1em .25em hsla(0 0 50% / 0.5) inset;
}
.stone[data-color="W"]:checked {
	--color: white;
	box-shadow: 
		.1em .1em .25em hsla(0 0 0 / 0.25), 
		-.1em -.1em .25em hsla(0 0 50% / 0.5) inset;
}