style.css

@font-face {
	font-family: "Caveat Brush";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/caveatbrush/v11/EYq0maZfwr9S9-ETZc3fKXtMWw.ttf) format("truetype");
}

body {
	background-color: rgba(var(--active-background-color), 1);
	/* background-image: radial-gradient(circle, rgba(var(--active-background-color), 1) 0%, color-mix(in srgb, rgba(var(--active-background-color), 1) 60%, black) 100%); */
	background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	color: #222;
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	max-height: 100vh;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	transition: background-color 0.6s ease-out;
}

#game-container {
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.buttons {
	position: relative;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: 15px;
	#new-game {
		padding: 10px 20px;
		background-color: #555;
		border: none;
		color: #fff;
		font-size: 16px;
		border-radius: 4px;
		cursor: pointer;
	}

	#new-game:hover {
		background-color: #777;
	}
}

#status {
	margin-bottom: 10px;
	font-family: "Caveat Brush", serif;
	font-size: 3rem;
	font-weight: 600;
	color: color-mix(in srgb, rgba(var(--active-background-color), 1) 30%, black);
}

#board {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	margin: 0;
	background-color: rgba(68, 68, 68, 1);
	border: none;
	border-radius: 0.35rem;
	overflow: hidden;
	padding: 8px;
	width: 90%;
	max-height: 90vw;
}

@media screen and (orientation: landscape) {
	#game-container {
		width: 100vh;
		max-width: 100vh;
		aspect-ratio: 4 / 3;
	}

	#board {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: 2px;
		width: 70vh;
		max-width: 70vh;
	}
}

@media screen and (orientation: portrait) {
	#game-container {
		width: 90vw;
		max-width: 90vw;
		aspect-ratio: 4 / 3;
	}
}

.cell {
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
}

.light {
	background-color: #666;
}

.dark {
	background-color: rgb(68, 68, 68);
}

.cell.highlight:after {
	background-image: repeating-linear-gradient(-45deg, rgba(var(--active-background-color), 0.1), rgba(var(--active-background-color), 0.1) 1rem, rgba(var(--active-background-color), 0.4) 1rem, rgba(var(--active-background-color), 0.4) 2rem);
	background-size: 200% 200%;
	animation: barberpole 10s linear infinite;
	position: absolute;
	content: "";
	width: 80%;
	height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	opacity: 0.4;
}

@keyframes barberpole {
	100% {
		background-position: 100% 100%;
	}
}

.piece {
	width: 80%;
	height: 80%;
	border-radius: 50%;
	margin: 0;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(var(--player-color), 1);
	/* border:0.35rem solid rgb(var(--player-color)); */
	box-shadow: 0.2rem 0.2rem 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0 0.2rem inset rgba(0, 0, 0, 0.2);
	/* filter: drop-shadow(0px 0px red);*/

}

.cell.selected .piece {
	filter: brightness(0.6);
	/* animation-name: pulse;
	animation-duration: 1.4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite; */
}
.piece.must-capture {
	/* filter: brightness(0.6); */
	animation-name: pulse;
	animation-duration: 1.4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* .piece::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	/* border:0.35rem var(--border-style) var(--border-color); * /
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.piece.spin-ani::after {
	transform: translate(-50%, -50%) rotate(0deg);
	border: 0.35rem var(--border-style) var(--border-color);
	animation-name: spin;
} */

.piece.king {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='rgba(68,68,68,0.5)' d='M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6l277.2 0c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z'/></svg>");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

#winMessage {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #222;
	padding: 20px 30px;
	border: 8px solid rgb(68, 68, 68);
	color: rgb(68, 68, 68);
	border-radius: 8px;
	font-size: 24px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

#setPlayerNamesWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	border-radius: 8px;
	padding: 20px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0;
	background-image: url(http://62.68.75.171/themes/prismify-bootstrap-starter-kit/assets/images/dame_header_image.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	#setPlayerNamesInputs {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		input,
		label {
			font-family: "Caveat Brush", serif;
			font-size: 2rem;
			font-weight: 600;
			border-radius: 4px;
			border-width: 8px;
			border-style: solid;
			border-color: transparent;
			background-color: transparent;
		}

		#inputPlayerName1 {
			padding: 10px 20px;
			background-color: rgb(var(--player1-color));
			border-color: rgb(var(--player1-color));
			color: color-mix(in srgb, rgba(var(--player1-color), 1) 20%, rgb(14, 14, 64));
			transform: rotate(0.2deg);
			margin-left: 4px;
			margin-right: -4px;
		}

		#modeSelect {
			padding: 10px 20px;
			background-color: rgb(var(--player2-color));
			border-color: rgb(var(--player2-color));
			transform: rotate(-0.2deg);
			border-radius: 4px;
			border-width: 8px;
			margin-top: -8px;
			max-width: 60%;
			margin-left: 60px;
			#inputPlayerName2 {
				color: color-mix(in srgb, rgba(var(--player2-color), 1) 20%, rgb(38, 7, 7));
				text-align: right;
				max-width: calc(100% - 60px);
			}

			#cpuToggle {
				display: none;
			}

			label {
				padding: 10px 20px;
				background-color: rgb(var(--player2-color));
				border: 8px solid rgb(var(--player2-color));
				color: #555;
				font-size: 16px;
				cursor: pointer;
				transition: all 0.3s ease-in-out;
				background-repeat: no-repeat;
				background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(81,40,42,1)' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/></svg>");
			}

			label:has(#cpuToggle:checked) {
				background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='rgba(81,40,42,1)' d='M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z'/></svg>");
			}
		}

		input:focus {
			outline: none;
		}

		span#vs {
			position: absolute;
			top: 50%;
			margin-top: -10px;
			font-family: "Caveat Brush", serif;
			font-size: 2rem;
			font-weight: 600;
			left: 50%;
			transform: translate(-50%, -50%);
			color: rgba(255, 255, 255, 1);
			text-shadow: #444 2px 2px 0px, #444 2px -2px 0px, #444 -2px 2px 0px, #444 -2px -2px 0px, #444 2px 0px 0px, #444 0px 2px 0px, #444 -2px 0px 0px, #444 0px -2px 0px;
		}
	}

	#savePlayerNames {
		padding: 10px 20px;
		background-color: #555;
		border: none;
		color: #fff;
		font-size: 16px;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 12px;
	}
}

#setPlayerNamesWrapperBackdrop {
	position: absolute;
	content: "";
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0;
	backdrop-filter: blur(10px);
}

@keyframes pulse {
	0% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(0.4);
	}

	100% {
		filter: brightness(1);
	}
}

@keyframes spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}