fix: Playground surface on screen

public/style.css

@@ -1147,19 +1147,15 @@ button:hover {
   filter: brightness(1.2);
 }
 
-/* ── Galaxy: square, fills viewport height, 1:1 ratio ────────────────────── */
+/* ── Galaxy: fills remaining viewport space, map maintains 1:1 tile ratio via JS ── */
 
 .galaxyMain {
-  /* Fit the tallest square that fits in the viewport without overlapping the info column */
-  --map-size: min(100vh, calc(100vw - 340px));
   position: relative;
-  width: var(--map-size);
-  height: var(--map-size);
-  flex-shrink: 0;
-  flex-grow: 0;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100vh;
   background: #050810;
   overflow: hidden;
-  align-self: flex-start;
 }
 
 canvas {
@@ -1248,11 +1244,10 @@ canvas {
     display: flex;
   }
 
-  /* Galaxy scales to viewport width (square) */
+  /* Galaxy fills the full screen on mobile */
   .galaxyMain {
-    --map-size: 100vw;
-    width: 100vw;
-    height: 100vw;
+    width: 100%;
+    height: 100dvh;
   }
 
   /* Scoreboard wraps nicely on narrow screens */