Move game state controls above playfield

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>

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));
   }