Move from the hand.

Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css

@@ -1,7 +1,7 @@
 .game-board {
 	display: grid;
 	grid-template-areas: "board side-board icons";
-	grid-template-columns: 3fr minmax(10rem, 1fr) auto;
+	grid-template-columns: max-content minmax(25rem, 1fr) 2fr;
 	gap: 0.5rem;
 	background-color: #444;
 	position: relative; /* For absolute positioned children. */
@@ -58,17 +58,18 @@
 	}
 
 .tile {
-	background-color: beige;
 	display: grid;
 	place-content: center;
-	padding: 0.25rem;
-	overflow: hidden; /* Because SVGs are shaped weird */
 	transition: filter linear 0.25s;
 }
 
-	.tile[data-selected] {
-		filter: invert(0.8);
-	}
+.board .tile {
+	background-color: beige;
+}
+
+.tile[data-selected] {
+	filter: invert(0.8);
+}
 
 .ruler {
 	color: beige;
@@ -90,22 +91,32 @@
 	}
 
 .side-board {
-	display: grid;
-	grid-auto-rows: 1fr;
+	display: flex;
+	flex-direction: column;
+	place-content: space-between;
 	padding: 1rem;
 	background-color: var(--contrast-color);
 }
 
 	.side-board .player-area {
 		display: grid;
+		place-items: stretch;
 	}
 
 	.side-board .hand {
 		display: grid;
-		grid-auto-columns: 1fr;
 		border: 1px solid #ccc;
+		grid-template-columns: repeat(7, 1fr);
+		grid-template-rows: 4rem;
+		place-items: center start;
+		padding: 0.5rem;
 	}
 
+		.side-board .hand .tile {
+			max-height: 100%; /* I have no idea why I need to set this here to prevent a height blowout. */
+			background-color: var(--secondary-color);
+		}
+
 .promote-prompt {
 	display: none;
 	position: absolute;