Improve HUD and control clarity

index.html

@@ -55,11 +55,13 @@
             <button id="pauseAction" class="secondary-action" type="button">暂停</button>
             <button id="stopAction" class="danger-action" type="button">结束</button>
           </div>
-          <div><kbd>WASD</kbd><kbd>Arrow</kbd><span>Move</span></div>
+          <div class="key-hints" aria-label="键盘快捷键">
-          <div><kbd>Space</kbd><span>Fire</span></div>
+            <div class="key-hint"><kbd>WASD</kbd><kbd>↑↓←→</kbd><span>Move</span></div>
-          <div><kbd>P</kbd><span>Pause</span></div>
+            <div class="key-hint"><kbd>Space</kbd><span>Fire</span></div>
-          <div><kbd>Esc</kbd><span>End</span></div>
+            <div class="key-hint"><kbd>P</kbd><span>Pause</span></div>
-          <div><kbd>Enter</kbd><span>Start / Restart</span></div>
+            <div class="key-hint"><kbd>Esc</kbd><span>End</span></div>
+            <div class="key-hint"><kbd>Enter</kbd><span>Start / Restart</span></div>
+          </div>
         </footer>
       </section>
     </main>

src/styles.css

@@ -95,8 +95,7 @@ button:focus-visible {
 }
 
 .brand,
-.hud-item,
+.hud-item {
-.controls div {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background:
@@ -155,22 +154,28 @@ h1 {
 .hud-item {
   min-height: 70px;
   padding: 10px 12px;
+  border-left: 3px solid var(--olive);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .hud-item span {
   display: block;
   color: var(--muted);
-  font-size: 0.76rem;
+  font-size: 0.72rem;
   font-weight: 800;
   text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1;
 }
 
 .hud-item strong {
   display: block;
-  margin-top: 4px;
+  margin-top: 6px;
   color: var(--amber);
   font-family: Consolas, "Courier New", monospace;
-  font-size: clamp(1.3rem, 2.5vw, 2rem);
+  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
   font-weight: 900;
   line-height: 1;
   overflow-wrap: anywhere;
@@ -265,22 +270,44 @@ canvas {
 }
 
 .controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.key-hints {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
+    var(--panel);
+  padding: 10px 12px;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 6px 14px;
+  align-items: center;
   color: var(--muted);
+  font-size: 0.82rem;
 }
 
-.controls div {
+.key-hint {
-  min-height: 38px;
-  padding: 7px 10px;
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.key-hint + .key-hint::before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: 16px;
+  background: var(--line);
+  margin-right: 8px;
+  flex-shrink: 0;
 }
 
 .controls .action-group {
-  width: 100%;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
@@ -337,27 +364,28 @@ kbd {
   }
 
   .hud-item {
-    min-height: 62px;
+    min-height: 58px;
-    padding: 8px;
+    padding: 8px 10px;
+    border-left-width: 2px;
   }
 
   .status-chip {
     min-height: 52px;
   }
 
-  .controls {
+  .controls .action-group {
-    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
-    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .controls div {
+  .key-hints {
-    width: auto;
+    display: grid;
-    min-width: 0;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px 10px;
+    padding: 8px 10px;
   }
 
-  .controls .action-group {
+  .key-hint + .key-hint::before {
-    grid-column: 1 / -1;
+    display: none;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   button {