fix(ui): correct responsive breakpoints for desktop gaming

- Add proper desktop breakpoints (>1600px, 1200-1600px)
- Maintain comfortable game window width on desktop
- Only apply compact layout below 1200px
- Preserve 2-column grid until 1200px breakpoint
- Optimize sidebar widths for different screen sizes

static/styles.css

@@ -1133,8 +1133,38 @@ body {
     50% { opacity: 0.8; }
 }
 
-/* Responsive Design */
-@media (max-width: 1400px) {
+/* Responsive Design - Optimized for Desktop Gaming */
+
+/* Large Desktop (>1600px) - Optimal gaming experience */
+@media (min-width: 1600px) {
+    #left-sidebar, #right-sidebar {
+        width: 360px;
+    }
+    
+    #minimap-container {
+        width: 280px;
+        height: 210px;
+    }
+    
+    .build-buttons, .unit-buttons {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Standard Desktop (1200px-1600px) - Good gaming experience */
+@media (max-width: 1600px) {
+    #left-sidebar, #right-sidebar {
+        width: 320px;
+    }
+    
+    #minimap-container {
+        width: 240px;
+        height: 180px;
+    }
+}
+
+/* Small Desktop/Large Tablet (1024px-1200px) - Still playable */
+@media (max-width: 1200px) {
     #left-sidebar, #right-sidebar {
         width: 280px;
     }
@@ -1147,17 +1177,18 @@ body {
         width: 200px;
         height: 150px;
     }
+    
+    .sidebar-section {
+        padding: var(--space-md);
+    }
 }
 
+/* Tablet (768px-1024px) - Compact but playable */
 @media (max-width: 1024px) {
     #left-sidebar, #right-sidebar {
         width: 240px;
     }
     
-    .sidebar-section {
-        padding: var(--space-md);
-    }
-    
     #minimap-container {
         width: 180px;
         height: 135px;
@@ -1188,6 +1219,7 @@ body {
     }
 }
 
+/* Mobile (<768px) - Touch optimized */
 @media (max-width: 768px) {
     #topbar {
         padding: var(--space-sm) var(--space-md);