layout optimization for tablets

src/Koogle.Web/Components/Game/GameInputPanel.razor

@@ -14,6 +14,8 @@
 @GameState.Value.ThrowPanelBefore *@
 
 <div class="game-input-panel">
+    @* Left column: Player + Pins *@
+    <div class="left-column">
         @* Current player display *@
         <div class="current-player-section">
             <MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
@@ -39,10 +41,9 @@
                       OnPinClicked="HandlePinClick" />
         </div>
 
-    
+        @* Number quick-entry (below pins) *@
         @if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition)
         {
-        @* Number quick-entry *@
             <div class="number-input-section">
                 <NumberPanel IsInteractive="@IsInteractive"
                              CanConfirmThrow="@CanConfirmThrow"
@@ -50,7 +51,10 @@
                              OnNumberClicked="HandleNumberClick" />
             </div>
         }
+    </div>
 
+    @* Right column: Controls *@
+    <div class="right-column">
         <ConfirmPanel IsInteractive="@IsInteractive"
                       CanConfirmThrow="@CanConfirmThrow"
                       OnBellClicked="HandleBellClick"
@@ -70,16 +74,17 @@
 
         @* Game-specific actions *@
         <GameActionPanel />
+    </div>
 
-    @* Error display *@
+    @* Error display (full width) *@
     @if (!string.IsNullOrEmpty(GameState.Value.Error))
     {
-        <MudAlert Severity="Severity.Error" Class="mt-2">
+        <MudAlert Severity="Severity.Error" Class="mt-2 error-section">
             @GameState.Value.Error
         </MudAlert>
     }
 
-    @* Saving indicator *@
+    @* Saving indicator (full width) *@
     @if (GameState.Value.IsSaving)
     {
         <div class="saving-indicator">
@@ -95,10 +100,44 @@
         flex-direction: column;
         gap: 16px;
         padding: 16px;
-        max-width: 500px;
+        max-width: 900px;
         margin: 0 auto;
     }
 
+    .left-column {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .right-column {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    /* Tablet and larger: two-column layout */
+    @@media (min-width: 768px) {
+        .game-input-panel {
+            display: grid;
+            grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
+            gap: 24px;
+            align-items: start;
+        }
+
+        .error-section,
+        .saving-indicator {
+            grid-column: 1 / -1;
+        }
+    }
+
+    /* Mobile: stack everything vertically */
+    @@media (max-width: 767px) {
+        .game-input-panel {
+            max-width: 500px;
+        }
+    }
+
     .current-player-section {
         text-align: center;
         padding: 16px;