.game-board {
	--ratio: 0.9;
	display: grid;
	grid-template-columns: min-content repeat(9, minmax(2rem, 4rem)) max-content;
	grid-template-rows: repeat(9, 1fr) auto;
	background-color: #444;
	gap: 3px;
	place-self: center;
}

.board {
	display: grid;
	grid-column: span 10;
	grid-row: span 10;
	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: subgrid;
	grid-template-rows: subgrid;
	background-color: #444444;
	max-height: 100%;
	aspect-ratio: var(--ratio);
}

	.board[data-perspective="Player2"] {
		grid-template-areas:
			"rank 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"
			". file file file file file file file file file";
	}


.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 {
	grid-row: span 9;
	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;
	}


@media all and (max-width: 1000px) {
	.game-board {
		grid-template-columns: min-content repeat(9, minmax(2rem, 4rem));
		grid-template-rows: repeat(9, 1fr) auto max-content;
	}

	.side-board {
		grid-row: unset;
		grid-column: span 10;
		flex-direction: row;
	}
}