feat(ui): update health gauge and HUD styling for a cleaner look

index.html

@@ -69,34 +69,63 @@
     .bl { bottom: 20px; left: 20px; }
     .br { bottom: 20px; right: 20px; }
 
-    /* Health gauge */
-    #ui-health { width: 360px; padding: 14px 16px; }
+    /* Health gauge (modern white-on-white) */
+    #ui-health {
+      width: 360px;
+      padding: 14px 16px;
+      /* remove container visuals for a cleaner look */
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      backdrop-filter: none !important;
+      -webkit-backdrop-filter: none !important;
+    }
     #health-bar {
       position: relative;
-      width: 100%; height: 18px;
-      background: linear-gradient(180deg, rgba(20,30,36,0.9), rgba(12,16,22,0.9));
-      border: 1px solid rgba(80, 120, 140, 0.55);
-      border-radius: 8px;
+      width: 100%;
+      height: 18px;
+      /* subtle track in white tones */
+      background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
+      border: none;
+      border-radius: 10px;
       overflow: hidden;
-      box-shadow: inset 0 0 10px rgba(0,0,0,0.45);
+      box-shadow:
+        inset 0 1px 0 rgba(255,255,255,0.35),
+        inset 0 -1px 0 rgba(0,0,0,0.06);
     }
     #health-fill {
-      position: absolute; left: 0; top: 0; bottom: 0; width: 60%;
-      background: linear-gradient(90deg, rgba(34,197,94,0.85), rgba(16,185,129,0.95));
-      box-shadow: 0 0 12px rgba(34,197,94,0.55);
+      position: absolute;
+      left: 0; top: 0; bottom: 0;
+      width: 60%;
+      /* white fill with soft sheen */
+      background: linear-gradient(90deg, #ffffff, #f3f6fb);
+      box-shadow: 0 0 16px rgba(255,255,255,0.35);
+      transition: width 140ms ease-out;
     }
     #health-stripes {
-      position: absolute; inset: 0;
-      background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 6px, transparent 6px, transparent 12px);
+      position: absolute;
+      inset: 0;
+      background: repeating-linear-gradient(
+        45deg,
+        rgba(255,255,255,0.18) 0,
+        rgba(255,255,255,0.18) 6px,
+        transparent 6px,
+        transparent 12px
+      );
+      mix-blend-mode: screen;
       pointer-events: none;
     }
-    #health-text { font-size: 16px; color: #eafff1; text-shadow: 0 0 6px rgba(34,197,94,0.6); }
+    #health-text {
+      font-size: 16px;
+      color: #ffffff;
+      text-shadow: 0 0 6px rgba(255,255,255,0.4);
+    }
     #health-label { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
     #health-label .hud-title { margin: 0; }
 
     /* Ammo */
     #ui-ammo { min-width: 220px; text-align: right; }
-    #ammo { font-size: 40px; font-weight: 800; color: #e6f7ff; text-shadow: 0 0 8px rgba(96,165,250,0.6); }
+    #ammo { font-size: 32px; font-weight: 800; color: #fff; text-shadow: none; }
     #ammo:before { content: 'AMMO'; display: block; font-size: 12px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 6px; text-align: right; }
 
     /* Score */
@@ -104,11 +133,20 @@
     #score:before { content: 'SCORE'; display: block; font-size: 12px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 6px; }
     #score { font-size: 28px; font-weight: 800; color: #fff; }
 
+    /* Make score, ammo, and top-right containers match health (no chrome) */
+    #ui-score, #ui-ammo, #ui-topright {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      backdrop-filter: none !important;
+      -webkit-backdrop-filter: none !important;
+    }
+
     /* Top-right stats */
-    #ui-topright { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-    .mini-card { padding: 8px 10px; background: rgba(12,18,26,0.55); border: 1px solid rgba(120, 200, 255, 0.35); border-radius: 8px; }
-    .mini-card .label { font-size: 11px; color: var(--muted); letter-spacing: 1.2px; }
-    .mini-card .value { font-size: 22px; font-weight: 700; color: #fff; }
+    #ui-topright { display: flex; gap: 16px; align-items: flex-start; }
+    .mini-card { padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; text-align: right; }
+    .mini-card .label { font-size: 12px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 2px; }
+    .mini-card .value { font-size: 18px; font-weight: 700; color: #fff; }
     #overlay {
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
@@ -151,7 +189,7 @@
       <div class="hud-value" id="score">0</div>
     </div>
 
-    <!-- Wave + Enemies Top-Right -->
+    <!-- Wave + Enemies + Grenades + FPS Top-Right (single row) -->
     <div id="ui-topright" class="hud-card tr">
       <div class="mini-card">
         <div class="label">WAVE</div>
@@ -161,14 +199,14 @@
         <div class="label">ENEMIES</div>
         <div class="value" id="enemies">0</div>
       </div>
-      <div class="mini-card">
-        <div class="label">FPS</div>
-        <div class="value" id="fps">-</div>
-      </div>
       <div class="mini-card">
         <div class="label">GRENADES</div>
         <div class="value" id="grenades">0</div>
       </div>
+      <div class="mini-card">
+        <div class="label">FPS</div>
+        <div class="value" id="fps">-</div>
+      </div>
     </div>
 
     <!-- Health Bottom-Left -->

src/main.js

@@ -258,8 +258,7 @@ function animate() {
     const fps = Math.round(G._fpsFrames / G._fpsAccum);
     const el = document.getElementById('fps');
     if (el) {
-      const info = G.renderer?.info?.render || { calls: 0, triangles: 0 };
-      el.textContent = `${fps} | calls:${info.calls} tris:${info.triangles}`;
+      el.textContent = String(fps);
     }
     G._fpsAccum = 0; G._fpsFrames = 0;
   }