body {
	font-family: Arial, sans-serif;
	background: #f4f4f4;
	display: grid;
	justify-content: center;
	align-items: center;
	padding-top: 40px;
}
h1 {
	font-size: 48px;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	width: 100%;
	background-color: #0056b3;
	color: rgb(252, 183, 94);
	border: 8px outset #cccccc;
	padding: 8px 0px;
	box-shadow: 6px 5px 12px 2px #888888;
}
#game-wrapper {
	background: #fff;
	padding: 20px 25px 25px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 6px 5px 12px 2px #888888;
}
#status {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: bold;
}
#board {
	display: grid;
	grid-template-columns: repeat(8, 60px);
	grid-template-rows: repeat(7, 60px);
	gap: 5px;
	background: #0055aa;
	padding: 10px;
	border-radius: 10px;
}
.cell {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
	cursor: pointer;
	position: relative;
	overflow: hidden; /* important for animation */
}
.disc {
	position: absolute;
	top: -60px; /* start above the cell */
	left: 0;
	right: 0;
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	transition: top 0.60s cubic-bezier(.34,1.56,.64,1);
}
.disc.red {
	background: #e53935;
}
.disc.black {
	background: #000000;
}
.cell.red::before,
.cell.black::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
}
.cell.red::before {
	background: #e53935;
}
.cell.black::before {
	background: #000000;
}
#reset,
#closeApp {
	margin-top: 15px;
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
	min-width: 170px;
}
#reset {
	background: #007bff;
	color: #fff;
}
#reset:hover {
	background: #0056b3;
}
#closeApp {
	background-color: #e53935;
	color: yellow;
}
#closeApp:hover {
	background-color: #9b1e1b;
}
#mode-select {
	margin-top: 15px;
	font-size: 16px;
}
.preview-disc {
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	opacity: 0.5;
	pointer-events: none;
}
.preview-disc.red {
	background: #e53935;
}
.preview-disc.black {
	background: #000000;
}
.css-checkbox {
	position:absolute;
	z-index:-1000;
	left:-1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
	border:0;
}
.css-checkbox + label.css-label {
	padding-left: calc(75px + 6px);
	padding-right: 6px;
	padding-top: calc(1px * 0.02);
	display: inline-block;
	line-height: 27px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: transparent;
	color: rgb(0,0,0);
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	cursor: pointer;
}
.css-checkbox:checked + label.css-label {background-position: 0 -27px;}
label.css-label {
	background-image:url('data:image/png;base64,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');
	background-size: 100 32;
	letter-spacing: 0px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.css-checkbox:disabled + .css-label {
	opacity: 0.25;
	filter: blur(0px) grayscale(100%);
	cursor: not-allowed !important;
}