Add toggle for debug panel (collapse/expand)

index.html

@@ -35,6 +35,26 @@
             border-bottom: 1px solid rgba(230, 223, 209, 0.3);
             padding-bottom: 4px;
             margin-bottom: 6px;
+            cursor: pointer;
+            user-select: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .debug-title-toggle {
+            font-size: 0.8em;
+            color: var(--icon);
+            margin-left: 8px;
+        }
+        .debug-content {
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .debug-content.collapsed {
+            max-height: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+            margin: 0;
         }
         .debug-section {
             font-size: 1em;
@@ -268,7 +288,8 @@
 <body>
     <div id="vanta"></div>
     <div id="debug-panel">
-        <div class="debug-title">DEBUG - Palette: Ash</div>
+        <div class="debug-title" onclick="toggleDebugPanel()"><span>DEBUG - Palette: Ash</span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
+        <div id="debug-content" class="debug-content">
             <div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
             <div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div>
             <div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div>
@@ -289,6 +310,7 @@
             <div id="dbg-theme-table" class="theme-table"></div>
             <div id="dbg-color-table" class="theme-table"></div>
         </div>
+    </div>
     <div id="info-panel">
         <svg id="analog-clock" viewBox="0 0 280 280">
             <!-- Clock face -->
@@ -1117,6 +1139,18 @@ var weatherThemes = {
             return (now.getTime() - startOfDay.getTime()) / 86400000;
         }
 
+        function toggleDebugPanel() {
+            var content = document.getElementById('debug-content');
+            var icon = document.getElementById('debug-toggle-icon');
+            if (content.style.display === 'none') {
+                content.style.display = '';
+                icon.textContent = '▼';
+            } else {
+                content.style.display = 'none';
+                icon.textContent = '▶';
+            }
+        }
+
         function updateDebug(t, palette, vantaColors, themeName, realDayProgress) {
             var now = new Date();
             var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds();