optimierung PinPanel Layout

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

@@ -6,8 +6,8 @@
 
 <style>
     .pin {
-        width: 48px;
+        width: 64px;
-        height: 48px;
+        height: 64px;
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -16,9 +16,9 @@
         user-select: none;
         transition: all 0.15s ease;
         font-weight: bold;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
         border: 3px solid transparent;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        box-shadow: 0 3px 6px rgba(0,0,0,0.25);
     }
 
     .pin:hover:not(.pin-disabled) {
@@ -54,9 +54,9 @@
 
     @@media (max-width: 600px) {
         .pin {
-            width: 40px;
+            width: 52px;
-            height: 40px;
+            height: 52px;
-            font-size: 1rem;
+            font-size: 1.25rem;
         }
     }
 </style>

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

@@ -37,26 +37,54 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 8px;
+        gap: 12px;
-        padding: 16px;
+        padding: 20px;
         background: var(--mud-palette-surface);
         border-radius: 8px;
+        width: 100%;
+        max-width: 400px;
     }
 
     .pin-row {
         display: flex;
-        gap: 8px;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .pin-row-1 {
+        justify-content: center;
+    }
+
+    .pin-row-2 {
+        gap: 80px;
+    }
+
+    .pin-row-3 {
+        gap: 70px;
+    }
+
+    .pin-row-4 {
+        gap: 80px;
+    }
+
+    .pin-row-5 {
         justify-content: center;
     }
 
     @@media (max-width: 600px) {
         .pin-panel {
-            gap: 6px;
+            gap: 10px;
-            padding: 12px;
+            padding: 16px;
+            max-width: 320px;
         }
 
-        .pin-row {
+        .pin-row-2,
-            gap: 6px;
+        .pin-row-4 {
+            gap: 60px;
+        }
+
+        .pin-row-3 {
+            gap: 50px;
         }
     }
 </style>