From c879229c1fbad0a00d5ffad8946ce0953b4ccf45 Mon Sep 17 00:00:00 2001
From: darcy <laidaixi@163.com>
Date: Sat, 20 Jun 2026 21:21:05 +0800
Subject: [PATCH] Move game state controls above playfield

---
 index.html     | 11 ++++++-----
 src/styles.css | 24 ++++++++++++------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 06e020a..bb7ea12 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,12 @@
           </div>
         </header>
 
+        <div class="action-group" aria-label="游戏操作">
+          <button id="startAction" type="button">开始</button>
+          <button id="pauseAction" class="secondary-action" type="button">暂停</button>
+          <button id="stopAction" class="danger-action" type="button">结束</button>
+        </div>
+
         <div class="stage-wrap">
           <canvas id="game" width="800" height="600" aria-label="Tank Battle canvas"></canvas>
           <div id="overlay" class="overlay">
@@ -50,11 +56,6 @@
         </div>
 
         <footer class="controls">
-          <div class="action-group" aria-label="游戏操作">
-            <button id="startAction" type="button">开始</button>
-            <button id="pauseAction" class="secondary-action" type="button">暂停</button>
-            <button id="stopAction" class="danger-action" type="button">结束</button>
-          </div>
           <div class="touch-controls" aria-label="触摸操作">
             <div class="dpad" aria-label="方向控制">
               <button class="touch-button dpad-up" type="button" data-control="up" aria-label="向上">▲</button>
diff --git a/src/styles.css b/src/styles.css
index 5e6cf54..0749c6d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -277,6 +277,17 @@ canvas {
   gap: 10px;
 }
 
+.action-group {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.action-group button {
+  width: 100%;
+  padding-inline: 0.6rem;
+}
+
 .touch-controls {
   display: grid;
   grid-template-columns: minmax(150px, 190px) minmax(112px, 1fr);
@@ -370,17 +381,6 @@ canvas {
   flex-shrink: 0;
 }
 
-.controls .action-group {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.controls .action-group button {
-  width: 100%;
-  padding-inline: 0.6rem;
-}
-
 kbd {
   min-width: 30px;
   min-height: 28px;
@@ -436,7 +436,7 @@ kbd {
     min-height: 52px;
   }
 
-  .controls .action-group {
+  .action-group {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }