Getting started on how-to-play instructions.

Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor

@@ -66,7 +66,7 @@
 	</section>
 
 	<!-- Side board -->
-	@if (Session != null)
+	@if (Session != null && UseSideboard == true)
 	{
 		<aside class="side-board PrimaryTheme ThemeVariant--Contrast">
 			<div class="player-area">
@@ -121,6 +121,13 @@
 </article>
 
 @code {
+
+
+
+
+
+
+
 	static readonly string[] Files = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I" };
 
 	/// <summary>
@@ -136,6 +143,7 @@
 	[Parameter] public Func<Piece, Task>? OnClickHand { get; set; }
 	[Parameter] public Func<Task>? OnClickJoinGame { get; set; }
 	[Parameter] public bool IsMyTurn { get; set; }
+	[Parameter] public bool UseSideboard { get; set; } = true;
 
 	private IReadOnlyCollection<Piece> opponentHand;
 	private IReadOnlyCollection<Piece> userHand;

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

@@ -2,7 +2,7 @@
 	--ratio: 0.9;
 	display: grid;
 	grid-template-areas: "board side-board icons";
-	grid-template-columns: auto minmax(10rem, 30rem) 1fr;
+	grid-template-columns: minmax(min-content, calc(100vmin * var(--ratio) - 2rem)) 1fr 1fr;
 	background-color: #444;
 	position: relative; /* For absolute positioned promote prompt. */
 }
@@ -38,7 +38,7 @@
 	gap: 3px;
 	padding: 1rem;
 	background-color: #444444;
-	height: calc(100vmin - 2rem);
+	max-height: 100%;
 	aspect-ratio: var(--ratio);
 }
 
@@ -76,6 +76,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-around;
+	font-size: 1.2vmin;
 }
 
 	.ruler.vertical {