From 390476d4e842a881e68a810f200519c266064536 Mon Sep 17 00:00:00 2001
From: Justin Oros <JustinOros@gmail.com>
Date: Wed, 20 May 2026 22:24:53 -0700
Subject: [PATCH] Center progress bar in map header using three-column flex
 layout

---
 index.html | 4 +++-
 style.css  | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 40fcb8e..ceab725 100644
--- a/index.html
+++ b/index.html
@@ -92,9 +92,11 @@
         <span class="map-pin">📍</span>
         <span class="map-town-name">AZ-900 TOWN</span>
       </div>
-      <div class="map-right">
+      <div class="map-center">
         <div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div>
         <span class="prog-text" id="map-prog-text">0/100</span>
+      </div>
+      <div class="map-right">
         <span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span>
       </div>
     </div>
diff --git a/style.css b/style.css
index 0f9b76c..cd6c94c 100644
--- a/style.css
+++ b/style.css
@@ -407,10 +407,11 @@ html, body {
 
 /* ─── MAP ────────────────────────────────────────────────── */
 .map-header { background:var(--dark-bg); padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:3px solid var(--black); flex-shrink:0; }
-.map-left   { display:flex; align-items:center; gap:6px; }
+.map-left   { display:flex; align-items:center; gap:6px; flex:1; }
+.map-center { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; }
+.map-right  { display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end; }
 .map-pin    { font-size:12px; }
 .map-town-name { font-size:clamp(5.5px,1.6vw,7px); color:var(--yellow); letter-spacing:.5px; word-spacing:-1px; }
-.map-right  { display:flex; align-items:center; gap:6px; }
 .prog-bar-outer { width:80px; height:9px; background:var(--black); border:2px solid var(--lightgray); overflow:hidden; }
 .prog-bar-inner { height:100%; width:0%; background:var(--hp-green); transition:width .5s ease; }
 .prog-text  { font-size:6px; color:var(--white); }