.game-board {
	--ratio: 0.9;
	display: grid;
	grid-template-areas:
		"rank	board opponent-side-board"
		"rank board player-info"
		"rank	board player-side-board"
		".		file	.";
	grid-template-columns: auto 1fr auto;
	grid-template-rows: repeat(3, 1fr) auto;
	background-color: #444;
	gap: 5px;
	place-self: center;
	color: beige;
}

.board {
	display: grid;
	grid-template-areas:
		"A9 B9 C9 D9 E9 F9 G9 H9 I9"
		"A8 B8 C8 D8 E8 F8 G8 H8 I8"
		"A7 B7 C7 D7 E7 F7 G7 H7 I7"
		"A6 B6 C6 D6 E6 F6 G6 H6 I6"
		"A5 B5 C5 D5 E5 F5 G5 H5 I5"
		"A4 B4 C4 D4 E4 F4 G4 H4 I4"
		"A3 B3 C3 D3 E3 F3 G3 H3 I3"
		"A2 B2 C2 D2 E2 F2 G2 H2 I2"
		"A1 B1 C1 D1 E1 F1 G1 H1 I1";
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(9, 1fr);
	background-color: #444444;
	gap: 3px;
	max-height: 80vmin;
	aspect-ratio: var(--ratio);
}

	.board[data-perspective="Player2"] {
		grid-template-areas:
			"I1 H1 G1 F1 E1 D1 C1 B1 A1"
			"I2 H2 G2 F2 E2 D2 C2 B2 A2"
			"I3 H3 G3 F3 E3 D3 C3 B3 A3"
			"I4 H4 G4 F4 E4 D4 C4 B4 A4"
			"I5 H5 G5 F5 E5 D5 C5 B5 A5"
			"I6 H6 G6 F6 E6 D6 C6 B6 A6"
			"I7 H7 G7 F7 E7 D7 C7 B7 A7"
			"I8 H8 G8 F8 E8 D8 C8 B8 A8"
			"I9 H9 G9 F9 E9 D9 C9 B9 A9";
	}


.tile {
	display: grid;
	place-content: center;
	aspect-ratio: var(--ratio);
	background-color: beige;
	transition: filter linear 0.25s;
}

	.tile[data-selected] {
		filter: invert(0.8);
	}

.ruler {
	color: beige;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

	.ruler.vertical {
		flex-direction: column;
	}

.board[data-perspective="Player2"] .ruler {
	flex-direction: row-reverse;
}

	.board[data-perspective="Player2"] .ruler.vertical {
		flex-direction: column-reverse;
	}

.side-board {
	display: grid;
	grid-template-columns: repeat(auto-fill, 3rem);
	place-items: end start;
	gap: 5px;
	padding: 0.25rem;
	background: linear-gradient(45deg, beige, white);
}

	.side-board.opponent {
		place-items: start;
	}

	.side-board:empty {
		content: 'Captured Pieces';
	}

.player-info {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-content: stretch;
}

@media all and (max-width: 900px) {
	.game-board {
		grid-template-areas:
			".		opponent-side-board		."
			"rank	board									player-info"
			".		file									."
			".		player-side-board			.";
		grid-template-rows: auto 1fr auto auto;
		gap: 1rem;
	}

	.side-board {
		min-height: 2rem;
	}
}