.game-board {
	--ratio: 0.9;
	display: grid;
	grid-template-areas: "board side-board icons";
	grid-template-columns: auto minmax(10rem, 30rem) 1fr;
	background-color: #444;
	position: relative; /* For absolute positioned promote prompt. */
}

.board {
	grid-area: board;
}

.side-board {
	grid-area: side-board;
}

.icons {
	grid-area: icons;
}

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

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


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

		.board .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: flex;
	flex-direction: column;
	place-content: space-between;
	padding: 1rem;
}

	.side-board .player-area {
		display: grid;
		place-items: stretch;
	}

	.side-board .hand {
		display: grid;
		border: 1px solid #ccc;
		grid-template-columns: repeat(auto-fill, 3rem);
		grid-template-rows: 3rem;
		place-items: center start;
		padding: 0.5rem;
	}

.promote-prompt {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid #444;
	padding: 1rem;
	box-shadow: 1px 1px 1px #444;
	text-align: center;
}

	.promote-prompt[data-visible="true"] {
		display: block;
	}