From 59de1f2b36f7d83ab60b584fcb99d3c355164554 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Sun, 12 Jul 2026 15:42:07 -0400
Subject: [PATCH] feat(ui): regroup the sidebar into labeled sections (Loadout
 / Explore / Progress)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per the menu redesign: PLAY on top, then Loadout (Character + Style/render-picker), Explore
(Watch + Tavern), Progress & account (Shop + Anim + the hud-chip toolbar). Pure reorder +
group headers — every id/handler preserved, no grid change. Bottom-console (#3) is next.
---
 html/index.html            | 20 +++++++++++++++-----
 html/styles/stylesheet.css |  7 +++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/html/index.html b/html/index.html
index 0b17a10..493c685 100644
--- a/html/index.html
+++ b/html/index.html
@@ -128,20 +128,30 @@
             <div id="publicStats" style="display:none; margin-top:4px; font-size:11px; color:#9cf; font-family:monospace; line-height:1.4;"></div>
             <div id="liveCta" style="display:none; margin-top:6px; cursor:pointer; background:rgba(80,0,0,0.55); border:1px solid #f33; border-radius:4px; padding:5px 10px; font-size:12px; font-family:monospace; color:#ff8a8a; font-weight:bold;" title="Watch a live game"></div>
             <div id="creditsDisplay" style="display:none; margin-top:4px; font-size:13px; font-family:monospace; color:#0f0; background:#001a00; padding:4px 8px; border:1px solid #0a0; border-radius:4px; font-weight:bold;"></div>
+            <!-- PLAY -->
             <button id="startButton" class="ctrl-btn ctrl-btn--start" style="display: none;">
                 🎮 <span class="lbl-full">START GAME</span><span class="lbl-short">START</span>
             </button>
+
+            <!-- LOADOUT · set once, remembered -->
+            <div class="menu-grp-h">Loadout</div>
+            <button id="characterButton" class="ctrl-btn ctrl-btn--character" title="Create / customize your character">
+                🎭 <span id="characterButtonLabel" class="lbl-full">CHARACTER</span><span class="lbl-short">CHAR</span>
+            </button>
+            <!-- Render mode + tile-pack picker (Style) — populated by spRenderPicker.js from entitlements. -->
+            <div id="renderPicker" class="hidden"></div>
+
+            <!-- EXPLORE -->
+            <div class="menu-grp-h">Explore</div>
             <button id="watchGamesButton" class="ctrl-btn ctrl-btn--watch">
                 👁️ <span class="lbl-full">WATCH GAMES</span><span class="lbl-short">WATCH</span>
             </button>
             <button id="tavernButton" class="ctrl-btn ctrl-btn--tavern" style="display: none;" onclick="window.location.href='/tavern'">
                 🍺 <span class="lbl-full">TAVERN</span><span class="lbl-short">TAVERN</span>
             </button>
-            <button id="characterButton" class="ctrl-btn ctrl-btn--character" title="Create / customize your character">
-                🎭 <span id="characterButtonLabel" class="lbl-full">CHARACTER</span><span class="lbl-short">CHAR</span>
-            </button>
-            <!-- Render mode + tile-pack picker (populated by spRenderPicker.js from entitlements). -->
-            <div id="renderPicker" class="hidden"></div>
+
+            <!-- PROGRESS & ACCOUNT -->
+            <div class="menu-grp-h">Progress &amp; account</div>
             <button id="shopButton" class="ctrl-btn ctrl-btn--shop" style="display: none;">
                 🛒 SHOP
             </button>
diff --git a/html/styles/stylesheet.css b/html/styles/stylesheet.css
index bfc0fc0..ac32ee4 100644
--- a/html/styles/stylesheet.css
+++ b/html/styles/stylesheet.css
@@ -193,6 +193,13 @@ body {
 .ctrl-btn--start { animation: torch-glow 3.4s ease-in-out infinite; }
 .ctrl-btn--start:hover { animation: none; }
 
+/* Sidebar group headers (Loadout / Explore / Progress) — the redesigned menu grouping. */
+.menu-grp-h {
+    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
+    color: #7a8a5f; font-weight: 700; margin: 12px 0 5px; padding: 9px 0 0 2px;
+    border-top: 1px solid rgba(255,255,255,0.055);
+}
+
 /* =========================================================================
    HUD TOOLBAR — secondary "chip" controls (audio toggle + help / history /
    scores / manage-address). Small, bordered, glow-on-hover.