:root {
	--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

	--square-light: oklch(87% 0.06 72);
	--square-dark: oklch(62% 0.08 55);
	--board-border: oklch(38% 0.07 48);
	--coord-label: oklch(50% 0.08 52);

	--piece-white-fill: oklch(99% 0 0);
	--piece-white-ring: oklch(78% 0.06 60);
	--piece-black-fill: oklch(22% 0 0);
	--piece-black-ring: oklch(38% 0 0);
	--piece-label-white: oklch(35% 0.07 52);
	--piece-label-black: oklch(93% 0 0);

	--highlight-move: oklch(82% 0.1 145 / 55%);
	--highlight-move-dark: oklch(82% 0.1 145 / 40%);
	--highlight-selected: oklch(85% 0.17 90 / 75%);
	--highlight-last-move: oklch(78% 0.07 220 / 45%);

	--background: oklch(0.9 0.09 81.66 / 0.79);

	--cell-size: 12.5cqi; /* 100cqi / 8 columns = 12.5cqi */
}

@keyframes pulse {
	50% {
		opacity: 0.5;
	}
}

.wrapper {
	border: 1px solid var(--board-border);
	border-radius: 4px;
	overflow: hidden;
	width: min(90vw, 90vh);
	max-width: 640px;
	aspect-ratio: 1 / 1;
	container-type: inline-size; /* enables cqi */
}

.cell {
	width: var(--cell-size);
	height: var(--cell-size);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cell[data-is-in-path="True"]:not(:first-child):before,
.cell[data-is-in-path="True"]:first-child:after {
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: var(--highlight-move);
	position: absolute;
	content: "";
	animation: var(--animate-pulse);
	cursor: pointer;
}

.cell:has([data-focused="True"]) {
	/* biome-ignore lint/complexity/noImportantStyles: ignore */
	background-color: var(--highlight-selected) !important;
}

.row {
	display: grid;
	grid-template-columns: repeat(8, var(--cell-size));
}

.row:nth-child(odd) .cell:nth-child(odd) {
	background-color: var(--square-light);
}

.row:nth-child(even) .cell:nth-child(odd) {
	background-color: var(--square-dark);
}

.row:nth-child(even) .cell:nth-child(even) {
	background-color: var(--square-light);
}

.row:nth-child(odd) .cell:nth-child(even) {
	background-color: var(--square-dark);
}

.piece {
	height: calc(var(--cell-size) * 0.5);
	width: calc(var(--cell-size) * 0.5);
	border-radius: 1000px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.piece[data-color="black"] {
	background-color: var(--piece-black-fill);
	border: 1px solid var(--piece-black-ring);
	color: var(--piece-label-black);
}

.piece[data-color="white"] {
	background-color: var(--piece-white-fill);
	border: 1px solid var(--piece-white-ring);
	color: var(--piece-label-white);
}

#app {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
}

body,
html {
	padding: 0;
	margin: 0;
	background-color: var(--background);
}