From ae2f342434387c0a0b6fbde1f2e2e9f895740c66 Mon Sep 17 00:00:00 2001
From: darcy <laidaixi@163.com>
Date: Thu, 18 Jun 2026 23:55:59 +0800
Subject: [PATCH] Refine responsive game layout

---
 src/styles.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 2d1b920..66c8989 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -192,9 +192,9 @@ h1 {
 
 .stage-wrap {
   position: relative;
-  width: 100%;
+  width: min(100%, max(420px, calc((100vh - 320px) * 4 / 3)));
   aspect-ratio: 4 / 3;
-  max-height: calc(100vh - 185px);
+  margin: 0 auto;
   min-height: 280px;
   overflow: hidden;
   border: 2px solid var(--line-bright);
@@ -319,6 +319,7 @@ kbd {
   }
 
   .stage-wrap {
+    width: 100%;
     max-height: none;
   }
 }
@@ -345,11 +346,18 @@ kbd {
     min-height: 52px;
   }
 
+  .controls {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .controls div {
-    width: 100%;
+    width: auto;
+    min-width: 0;
   }
 
   .controls .action-group {
+    grid-column: 1 / -1;
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }