From 0f66034c0e448269e0ff83e0aabb2a8a66b7c971 Mon Sep 17 00:00:00 2001
From: Jerome Potter <jerome.potter@gmail.com>
Date: Wed, 14 Jan 2026 22:47:03 -0800
Subject: [PATCH 1/6] Refine UI controls and undo behavior

---
 index.html | 202 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 140 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index 4d812f0..ca8f51f 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,8 @@
             --panel-bg: #f4f4f2;
             --border: 1px solid #bbb;
             --shadow: 0 2px 5px rgba(0,0,0,0.1);
+            --slider-track: rgba(0,0,0,0.12);
+            --slider-border: rgba(0,0,0,0.08);
         }
 
         /* DARK MODE overrides */
@@ -24,6 +26,8 @@
             --panel-bg: #2a2a2a;
             --border: 1px solid #444;
             --shadow: 0 4px 10px rgba(0,0,0,0.4);
+            --slider-track: rgba(255,255,255,0.12);
+            --slider-border: rgba(255,255,255,0.12);
         }
 
         @font-face {
@@ -71,7 +75,13 @@
             font-weight: 500;
             letter-spacing: 0.5px;
             z-index: 10;
-            justify-content: space-between; 
+            justify-content: space-between;
+        }
+
+        .hud-group {
+            display: flex;
+            align-items: center;
+            gap: 16px;
         }
 
         h1.title {
@@ -83,7 +93,6 @@
         }
         @media (min-width: 768px) {
             h1.title { display: block; }
-            #hud-top { justify-content: flex-start; }
         }
 
         .hud-item {
@@ -125,6 +134,7 @@
 
         .volume-control input[type=range] {
             width: 90px;
+            --slider-height: 30px;
         }
 
         /* CONTROLS BAR */
@@ -144,7 +154,7 @@
         .controls-row {
             width: 100%;
             display: flex;
-            justify-content: space-between;
+            justify-content: center;
             align-items: flex-end;
             gap: 20px;
             pointer-events: none;
@@ -291,21 +301,41 @@
         }
         input[type=range] {
             -webkit-appearance: none;
-            width: 100px;
-            height: 4px;
-            background: #ccc;
-            border-radius: 2px;
+            appearance: none;
+            width: 140px;
+            --slider-height: 36px;
+            height: var(--slider-height);
+            background: transparent;
             outline: none;
+            cursor: pointer;
         }
         input[type=range]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 18px; 
-            height: 18px;
-            border-radius: 50%;
+            width: 4px;
+            height: 22px;
+            border-radius: 999px;
             background: var(--ink-color);
-            cursor: pointer;
-            border: 2px solid var(--bg-color);
-            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+            margin-top: calc((var(--slider-height) - 22px) / 2);
+            box-shadow: 0 0 0 6px rgba(255,255,255,0.25);
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            height: var(--slider-height);
+            background: var(--slider-track);
+            border-radius: 999px;
+            border: 1px solid var(--slider-border);
+        }
+        input[type=range]::-moz-range-track {
+            height: var(--slider-height);
+            background: var(--slider-track);
+            border-radius: 999px;
+            border: 1px solid var(--slider-border);
+        }
+        input[type=range]::-moz-range-thumb {
+            width: 4px;
+            height: 22px;
+            border-radius: 999px;
+            background: var(--ink-color);
+            border: none;
         }
 
         /* PANELS */
@@ -364,10 +394,9 @@
         .key-circle {
             width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-color);
             display: flex; justify-content: center; align-items: center; cursor: pointer;
-            font-size: 0.75em; font-weight: bold; opacity: 0.5;
+            font-size: 0.75em; font-weight: bold; opacity: 1; background: #fff; color: var(--ink-color);
         }
-        .key-circle.active { background: var(--ink-color); color: var(--bg-color); opacity: 1; }
-        .key-circle.black-key { background: rgba(0,0,0,0.1); }
+        .key-circle.active { background: #000; color: #fff; opacity: 1; }
 
         #start-overlay {
             position: absolute; top: 0; left: 0; width: 100%; height: 100%;
@@ -382,6 +411,7 @@
                 gap: 5px;
             }
             .hud-item { font-size: 0.75em; }
+            .hud-group { gap: 8px; }
             
             select.midi-select {
                 max-width: 80px;
@@ -412,9 +442,9 @@
                 gap: 8px 6px;
             }
             
-            input[type=range] { width: 70px; }
+            input[type=range] { width: 110px; --slider-height: 30px; }
             .macro-slider-container label { font-size: 0.7em !important; }
-            .volume-control input[type=range] { width: 70px; }
+            .volume-control input[type=range] { width: 80px; }
 
             .btn-text {
                 font-size: 0.7em;
@@ -453,19 +483,26 @@ <h1 style="font-size: 3em; letter-spacing: 4px; font-weight: 300; text-align: ce
 
     <div id="game-container">
         <div id="hud-top">
-            <h1 class="title">LES CERCLES</h1>
-            <div class="hud-item" onclick="toggleAudio()">AUDIO: <span id="audio-label">ON</span></div>
-            <div class="hud-item" onclick="openGlobal()">SETTINGS</div>
-
-            <div class="hud-item">
-                <select id="midi-select" class="midi-select" onchange="MidiEngine.selectOutput(this.value)">
-                    <option value="">MIDI...</option>
-                </select>
+            <div class="hud-group">
+                <h1 class="title">LES CERCLES</h1>
+                <div class="hud-item" onclick="toggleAudio()">AUDIO: <span id="audio-label">ON</span></div>
+                <div class="hud-item" onclick="openGlobal()">SETTINGS</div>
             </div>
 
-            <div class="hud-item volume-control">
-                <label for="volume-range">VOL</label>
-                <input id="volume-range" type="range" min="0" max="2" step="0.01" value="1" oninput="updateMasterVolume(this.value)">
+            <div class="hud-group">
+                <div class="hud-item">
+                    <select id="midi-select" class="midi-select" onchange="MidiEngine.selectOutput(this.value)">
+                        <option value="">MIDI...</option>
+                    </select>
+                </div>
+
+                <div class="hud-item volume-control">
+                    <label for="volume-range">VOL</label>
+                    <input id="volume-range" type="range" min="0" max="2" step="0.01" value="1" oninput="updateMasterVolume(this.value)">
+                </div>
+
+                <button id="btn-play" class="btn-text" onclick="togglePlay()">PLAY</button>
+                <button class="btn-text" onclick="toggleSlingshot()">ORB</button>
             </div>
         </div>
 
@@ -474,8 +511,6 @@ <h1 class="title">LES CERCLES</h1>
         <div id="controls-bar">
             <div class="controls-row">
                 <div class="control-group">
-                    <button id="btn-play" class="btn-text" onclick="togglePlay()">PLAY</button>
-
                     <div class="macro-slider-container">
                         <label>SPEED</label>
                         <input id="speed-range" type="range" min="0.1" max="3.0" step="0.1" value="1.0" oninput="updateGlobalSpeed(this.value)">
@@ -483,36 +518,33 @@ <h1 class="title">LES CERCLES</h1>
 
                     <button id="btn-dir" class="btn-text" onclick="toggleDirection()">CCW</button>
 
-                    <button id="btn-undo" class="btn-text" onclick="undoLastMove()" disabled>UNDO</button>
-                    <button class="btn-text" onclick="clearAll()">CLEAR</button>
                     <button class="btn-text" onclick="syncRPMs()">SYNC</button>
                     <button class="btn-text" onclick="evenSpacePlanets()">EVEN</button>
-                    <button class="btn-text" onclick="toggleSlingshot()">ORB</button>
                 </div>
+            </div>
 
-                <div class="control-group">
-                    <div class="gate-settings">
-                        <div class="macro-slider-container">
-                            <label>GATES: <span id="gate-label">1</span></label>
-                            <input id="gate-range" type="range" min="1" max="32" step="1" value="1" oninput="updateGates(this.value)">
-                        </div>
-
-                        <div class="macro-slider-container">
-                            <label>TRANSPOSE: <span id="transpose-label">0</span></label>
-                            <input id="transpose-range" type="range" min="-7" max="7" step="1" value="0" oninput="updateGlobalTranspose(this.value)">
-                        </div>
-
-                        <button class="btn-text" onclick="randomizeGateTranspose()">RND TRNS</button>
-                        <button class="btn-text" onclick="randomizeGateSpacing()">RND SPC</button>
-                        <button id="btn-gate-play" class="btn-text" onclick="toggleGateSpin()">PLAY</button>
-
-                        <div class="macro-slider-container">
-                            <label>GATE SPEED</label>
-                            <input id="gate-speed-range" type="range" min="1" max="60" step="1" value="10" oninput="updateGateSpinSpeed(this.value)">
-                        </div>
-
-                        <button id="btn-gate-dir" class="btn-text" onclick="toggleGateSpinDirection()">CW</button>
+            <div class="controls-row">
+                <div class="control-group gate-settings">
+                    <div class="macro-slider-container">
+                        <label>GATES: <span id="gate-label">1</span></label>
+                        <input id="gate-range" type="range" min="1" max="32" step="1" value="1" oninput="updateGates(this.value)">
+                    </div>
+
+                    <div class="macro-slider-container">
+                        <label>TRANSPOSE: <span id="transpose-label">0</span></label>
+                        <input id="transpose-range" type="range" min="-7" max="7" step="1" value="0" oninput="updateGlobalTranspose(this.value)">
+                    </div>
+
+                    <button class="btn-text" onclick="randomizeGateTranspose()">RND TRNS</button>
+                    <button class="btn-text" onclick="randomizeGateSpacing()">RND SPC</button>
+                    <button id="btn-gate-play" class="btn-text" onclick="toggleGateSpin()">PLAY</button>
+
+                    <div class="macro-slider-container">
+                        <label>GATE SPEED</label>
+                        <input id="gate-speed-range" type="range" min="1" max="60" step="1" value="10" oninput="updateGateSpinSpeed(this.value)">
                     </div>
+
+                    <button id="btn-gate-dir" class="btn-text" onclick="toggleGateSpinDirection()">CW</button>
                 </div>
             </div>
 
@@ -612,6 +644,13 @@ <h2>Settings</h2>
                 <button class="btn-full" onclick="savePattern()">SAVE .JSON</button>
                 <button class="btn-full" onclick="triggerLoad()">LOAD .JSON</button>
             </div>
+            <div class="btn-group">
+                <button id="btn-undo" class="btn-full" onclick="undoLastMove()" disabled>UNDO</button>
+                <button id="btn-redo" class="btn-full" onclick="redoLastMove()" disabled>REDO</button>
+            </div>
+            <div class="btn-group">
+                <button class="btn-full btn-danger" onclick="clearAll()">CLEAR</button>
+            </div>
         </div>
 
         <div id="scale-editor" class="modal">
@@ -683,30 +722,37 @@ <h2>CUSTOM SCALE</h2>
 
 const UNDO_LIMIT = 20;
 const undoStack = [];
+const redoStack = [];
 
 function createUndoSnapshot() {
     return {
         planets: STATE.planets.map(p => ({ ...p })),
         triggers: STATE.triggers.map(t => ({ ...t })),
+        projectiles: STATE.projectiles.map(o => ({ ...o })),
         root: STATE.root,
         scale: STATE.scale,
         customScale: [...STATE.customScale],
         globalSpeed: STATE.globalSpeed,
         gateTranspose: STATE.gateTranspose,
         direction: STATE.direction,
-        isPaused: STATE.isPaused
+        isPaused: STATE.isPaused,
+        gateSpinActive: STATE.gateSpinActive,
+        gateSpinRPM: STATE.gateSpinRPM,
+        gateSpinDirection: STATE.gateSpinDirection
     };
 }
 
 function pushUndoState() {
     undoStack.push(createUndoSnapshot());
     if (undoStack.length > UNDO_LIMIT) undoStack.shift();
-    updateUndoButton();
+    redoStack.length = 0;
+    updateUndoRedoButtons();
 }
 
 function applyUndoSnapshot(snapshot) {
     STATE.planets = snapshot.planets.map(p => ({ ...p }));
     STATE.triggers = snapshot.triggers.map(t => ({ ...t }));
+    STATE.projectiles = (snapshot.projectiles || []).map(o => ({ ...o }));
     STATE.root = snapshot.root;
     STATE.scale = snapshot.scale;
     STATE.customScale = [...snapshot.customScale];
@@ -714,6 +760,9 @@ <h2>CUSTOM SCALE</h2>
     STATE.gateTranspose = snapshot.gateTranspose ?? 0;
     STATE.direction = snapshot.direction;
     STATE.isPaused = snapshot.isPaused;
+    STATE.gateSpinActive = snapshot.gateSpinActive ?? false;
+    STATE.gateSpinRPM = snapshot.gateSpinRPM ?? 10;
+    STATE.gateSpinDirection = snapshot.gateSpinDirection ?? (STATE.direction * -1);
     STATE.orbPanelPrevSlingshot = null;
 
     STATE.editingId = null;
@@ -737,21 +786,33 @@ <h2>CUSTOM SCALE</h2>
     const transposeLabel = document.getElementById('transpose-label');
     if (transposeLabel) transposeLabel.innerText = STATE.gateTranspose;
     syncGateUI();
+    updateGateSpinUI();
     updatePlayButton();
     updatePlanetList();
 }
 
 function undoLastMove() {
     if (undoStack.length === 0) return;
+    redoStack.push(createUndoSnapshot());
     const snapshot = undoStack.pop();
     applyUndoSnapshot(snapshot);
-    updateUndoButton();
+    updateUndoRedoButtons();
+}
+
+function redoLastMove() {
+    if (redoStack.length === 0) return;
+    undoStack.push(createUndoSnapshot());
+    const snapshot = redoStack.pop();
+    applyUndoSnapshot(snapshot);
+    updateUndoRedoButtons();
 }
 
-function updateUndoButton() {
+function updateUndoRedoButtons() {
     const btn = document.getElementById('btn-undo');
     if (!btn) return;
     btn.disabled = undoStack.length === 0;
+    const redoBtn = document.getElementById('btn-redo');
+    if (redoBtn) redoBtn.disabled = redoStack.length === 0;
 }
 
 /**
@@ -1024,6 +1085,15 @@ <h2>CUSTOM SCALE</h2>
     if (speedRange) speedRange.value = STATE.gateSpinRPM;
 }
 
+const gateSpeedRange = document.getElementById('gate-speed-range');
+if (gateSpeedRange) {
+    const stopGateSpeedAdjust = () => { gateSpeedIsAdjusting = false; };
+    gateSpeedRange.addEventListener('change', stopGateSpeedAdjust);
+    gateSpeedRange.addEventListener('pointerup', stopGateSpeedAdjust);
+    gateSpeedRange.addEventListener('touchend', stopGateSpeedAdjust, { passive: true });
+    gateSpeedRange.addEventListener('blur', stopGateSpeedAdjust);
+}
+
 function togglePlay() {
     STATE.isPaused = !STATE.isPaused;
     updatePlayButton();
@@ -1040,16 +1110,23 @@ <h2>CUSTOM SCALE</h2>
 }
 
 function toggleGateSpin() {
+    pushUndoState();
     STATE.gateSpinActive = !STATE.gateSpinActive;
     updateGateSpinUI();
 }
 
 function toggleGateSpinDirection() {
+    pushUndoState();
     STATE.gateSpinDirection *= -1;
     updateGateSpinUI();
 }
 
+let gateSpeedIsAdjusting = false;
 function updateGateSpinSpeed(val) {
+    if (!gateSpeedIsAdjusting) {
+        pushUndoState();
+        gateSpeedIsAdjusting = true;
+    }
     STATE.gateSpinRPM = Math.min(60, Math.max(1, parseFloat(val)));
     updateGateSpinUI();
 }
@@ -1153,7 +1230,6 @@ <h2>CUSTOM SCALE</h2>
     notes.forEach((n, i) => {
         const div = document.createElement('div');
         div.className = 'key-circle';
-        if (n.includes('#')) div.classList.add('black-key');
         div.innerText = n;
         
         if (STATE.customScale.includes(i)) {
@@ -1257,7 +1333,8 @@ <h2>CUSTOM SCALE</h2>
             updatePlanetList();
             closePanel('global-panel');
             undoStack.length = 0;
-            updateUndoButton();
+            redoStack.length = 0;
+            updateUndoRedoButtons();
             alert("Pattern Loaded!");
         } catch(err) {
             console.error(err);
@@ -1817,6 +1894,7 @@ <h2>CUSTOM SCALE</h2>
         
         // Spawn New Orb (Limit 32)
         if (STATE.projectiles.length < 32) {
+            pushUndoState();
             STATE.projectiles.push({
                 id: Date.now() + Math.random(),
                 x: centerX,

From 93c2714b99b6804c21a8007952ee5e262c646f1e Mon Sep 17 00:00:00 2001
From: Jerome Potter <jerome.potter@gmail.com>
Date: Wed, 14 Jan 2026 23:05:10 -0800
Subject: [PATCH 2/6] Adjust slider UI and settings modal behavior

---
 index.html | 290 +++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 227 insertions(+), 63 deletions(-)

diff --git a/index.html b/index.html
index ca8f51f..2e554fc 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,8 @@
             --panel-bg: #f4f4f2;
             --border: 1px solid #bbb;
             --shadow: 0 2px 5px rgba(0,0,0,0.1);
-            --slider-track: rgba(0,0,0,0.12);
-            --slider-border: rgba(0,0,0,0.08);
+            --slider-pill-bg: rgba(0,0,0,0.12);
+            --slider-pill-border: rgba(0,0,0,0.08);
         }
 
         /* DARK MODE overrides */
@@ -26,8 +26,8 @@
             --panel-bg: #2a2a2a;
             --border: 1px solid #444;
             --shadow: 0 4px 10px rgba(0,0,0,0.4);
-            --slider-track: rgba(255,255,255,0.12);
-            --slider-border: rgba(255,255,255,0.12);
+            --slider-pill-bg: rgba(255,255,255,0.12);
+            --slider-pill-border: rgba(255,255,255,0.12);
         }
 
         @font-face {
@@ -124,19 +124,6 @@
             gap: 6px;
         }
 
-        .volume-control label {
-            font-size: inherit;
-            font-weight: inherit;
-            font-family: inherit;
-            letter-spacing: inherit;
-            white-space: nowrap;
-        }
-
-        .volume-control input[type=range] {
-            width: 90px;
-            --slider-height: 30px;
-        }
-
         /* CONTROLS BAR */
         #controls-bar {
             position: absolute;
@@ -217,6 +204,10 @@
             padding: 8px 10px; 
             white-space: nowrap;
         }
+        .btn-fixed {
+            min-width: 64px;
+            text-align: center;
+        }
         .btn-text:active { background: rgba(0,0,0,0.05); opacity: 1; }
         .btn-active { color: var(--accent-orange); opacity: 1; border-bottom: 2px solid var(--accent-orange); }
         .btn-text:disabled { opacity: 0.3; cursor: not-allowed; }
@@ -302,12 +293,15 @@
         input[type=range] {
             -webkit-appearance: none;
             appearance: none;
-            width: 140px;
-            --slider-height: 36px;
-            height: var(--slider-height);
+            width: 100%;
+            height: 100%;
             background: transparent;
             outline: none;
             cursor: pointer;
+            position: absolute;
+            inset: 0;
+            margin: 0;
+            z-index: 2;
         }
         input[type=range]::-webkit-slider-thumb {
             -webkit-appearance: none;
@@ -315,20 +309,15 @@
             height: 22px;
             border-radius: 999px;
             background: var(--ink-color);
-            margin-top: calc((var(--slider-height) - 22px) / 2);
-            box-shadow: 0 0 0 6px rgba(255,255,255,0.25);
+            box-shadow: 0 0 0 6px rgba(255,255,255,0.2);
         }
         input[type=range]::-webkit-slider-runnable-track {
-            height: var(--slider-height);
-            background: var(--slider-track);
-            border-radius: 999px;
-            border: 1px solid var(--slider-border);
+            height: 100%;
+            background: transparent;
         }
         input[type=range]::-moz-range-track {
-            height: var(--slider-height);
-            background: var(--slider-track);
-            border-radius: 999px;
-            border: 1px solid var(--slider-border);
+            height: 100%;
+            background: transparent;
         }
         input[type=range]::-moz-range-thumb {
             width: 4px;
@@ -337,11 +326,46 @@
             background: var(--ink-color);
             border: none;
         }
+        input[type=range]::-moz-focus-outer { border: 0; }
+
+        .slider-pill {
+            position: relative;
+            width: 190px;
+            height: 40px;
+            border-radius: 999px;
+            background: var(--slider-pill-bg);
+            border: 1px solid var(--slider-pill-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            box-sizing: border-box;
+            overflow: hidden;
+            font-size: 0.8em;
+            letter-spacing: 0.3px;
+            font-weight: 600;
+        }
+
+        .slider-pill__label,
+        .slider-pill__value {
+            z-index: 1;
+            pointer-events: none;
+        }
+
+        .slider-pill__value {
+            opacity: 0.7;
+        }
+
+        .slider-pill--compact {
+            width: 150px;
+            height: 34px;
+            font-size: 0.7em;
+        }
 
         /* PANELS */
         .modal {
             display: none;
-            position: absolute;
+            position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
@@ -354,6 +378,28 @@
             border-radius: 4px;
         }
 
+        #global-panel {
+            top: 80px;
+            right: 20px;
+            left: auto;
+            transform: none;
+        }
+
+        #modal-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.12);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s ease;
+            z-index: 90;
+        }
+
+        #modal-overlay.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
         .modal h2 {
             margin: 0 0 20px 0;
             text-transform: uppercase;
@@ -442,9 +488,9 @@
                 gap: 8px 6px;
             }
             
-            input[type=range] { width: 110px; --slider-height: 30px; }
+            .slider-pill { width: 160px; height: 34px; font-size: 0.7em; }
+            .slider-pill--compact { width: 130px; height: 30px; }
             .macro-slider-container label { font-size: 0.7em !important; }
-            .volume-control input[type=range] { width: 80px; }
 
             .btn-text {
                 font-size: 0.7em;
@@ -469,6 +515,12 @@
             }
             
             .modal { width: 85vw; }
+            #global-panel {
+                top: 50%;
+                left: 50%;
+                right: auto;
+                transform: translate(-50%, -50%);
+            }
         }
     </style>
 </head>
@@ -497,23 +549,30 @@ <h1 class="title">LES CERCLES</h1>
                 </div>
 
                 <div class="hud-item volume-control">
-                    <label for="volume-range">VOL</label>
-                    <input id="volume-range" type="range" min="0" max="2" step="0.01" value="1" oninput="updateMasterVolume(this.value)">
+                    <div class="slider-pill slider-pill--compact">
+                        <span class="slider-pill__label">Volume</span>
+                        <span class="slider-pill__value" id="volume-value">100%</span>
+                        <input id="volume-range" type="range" min="0" max="2" step="0.01" value="1" data-value-target="volume-value" data-format="percent" oninput="updateMasterVolume(this.value); updateSliderValue(this)">
+                    </div>
                 </div>
 
-                <button id="btn-play" class="btn-text" onclick="togglePlay()">PLAY</button>
+                <button id="btn-play" class="btn-text btn-fixed" onclick="togglePlay()">PLAY</button>
                 <button class="btn-text" onclick="toggleSlingshot()">ORB</button>
             </div>
         </div>
 
         <canvas id="mainCanvas"></canvas>
+        <div id="modal-overlay" onclick="closePanel('global-panel')"></div>
         
         <div id="controls-bar">
             <div class="controls-row">
                 <div class="control-group">
                     <div class="macro-slider-container">
-                        <label>SPEED</label>
-                        <input id="speed-range" type="range" min="0.1" max="3.0" step="0.1" value="1.0" oninput="updateGlobalSpeed(this.value)">
+                        <div class="slider-pill">
+                            <span class="slider-pill__label">Speed</span>
+                            <span class="slider-pill__value" id="speed-value">1.0x</span>
+                            <input id="speed-range" type="range" min="0.1" max="3.0" step="0.1" value="1.0" data-value-target="speed-value" data-format="speed" oninput="updateGlobalSpeed(this.value); updateSliderValue(this)">
+                        </div>
                     </div>
 
                     <button id="btn-dir" class="btn-text" onclick="toggleDirection()">CCW</button>
@@ -526,22 +585,31 @@ <h1 class="title">LES CERCLES</h1>
             <div class="controls-row">
                 <div class="control-group gate-settings">
                     <div class="macro-slider-container">
-                        <label>GATES: <span id="gate-label">1</span></label>
-                        <input id="gate-range" type="range" min="1" max="32" step="1" value="1" oninput="updateGates(this.value)">
+                        <div class="slider-pill">
+                            <span class="slider-pill__label">Gates</span>
+                            <span class="slider-pill__value" id="gate-label">1</span>
+                            <input id="gate-range" type="range" min="1" max="32" step="1" value="1" data-value-target="gate-label" data-format="int" oninput="updateGates(this.value); updateSliderValue(this)">
+                        </div>
                     </div>
 
                     <div class="macro-slider-container">
-                        <label>TRANSPOSE: <span id="transpose-label">0</span></label>
-                        <input id="transpose-range" type="range" min="-7" max="7" step="1" value="0" oninput="updateGlobalTranspose(this.value)">
+                        <div class="slider-pill">
+                            <span class="slider-pill__label">Transpose</span>
+                            <span class="slider-pill__value" id="transpose-label">0</span>
+                            <input id="transpose-range" type="range" min="-7" max="7" step="1" value="0" data-value-target="transpose-label" data-format="signed" oninput="updateGlobalTranspose(this.value); updateSliderValue(this)">
+                        </div>
                     </div>
 
                     <button class="btn-text" onclick="randomizeGateTranspose()">RND TRNS</button>
                     <button class="btn-text" onclick="randomizeGateSpacing()">RND SPC</button>
-                    <button id="btn-gate-play" class="btn-text" onclick="toggleGateSpin()">PLAY</button>
+                    <button id="btn-gate-play" class="btn-text btn-fixed" onclick="toggleGateSpin()">PLAY</button>
 
                     <div class="macro-slider-container">
-                        <label>GATE SPEED</label>
-                        <input id="gate-speed-range" type="range" min="1" max="60" step="1" value="10" oninput="updateGateSpinSpeed(this.value)">
+                        <div class="slider-pill">
+                            <span class="slider-pill__label">Gate Speed</span>
+                            <span class="slider-pill__value" id="gate-speed-label">10 RPM</span>
+                            <input id="gate-speed-range" type="range" min="1" max="60" step="1" value="10" data-value-target="gate-speed-label" data-format="rpm" oninput="updateGateSpinSpeed(this.value); updateSliderValue(this)">
+                        </div>
                     </div>
 
                     <button id="btn-gate-dir" class="btn-text" onclick="toggleGateSpinDirection()">CW</button>
@@ -565,12 +633,18 @@ <h1 class="title">LES CERCLES</h1>
                 <input type="number" id="p-rpm" step="0.1" min="0.1" max="100">
             </div>
             <div class="control-row">
-                <label></label>
-                <input type="range" id="p-rpm-range" min="0.1" max="100" step="0.01">
+                <div class="slider-pill">
+                    <span class="slider-pill__label">RPM</span>
+                    <span class="slider-pill__value" id="p-rpm-value">0.00</span>
+                    <input type="range" id="p-rpm-range" min="0.1" max="100" step="0.01" data-value-target="p-rpm-value" data-format="rpm-fine">
+                </div>
             </div>
             <div class="control-row">
-                <label>Volume</label>
-                <input type="range" id="p-vol" min="0" max="1" step="0.01">
+                <div class="slider-pill">
+                    <span class="slider-pill__label">Volume</span>
+                    <span class="slider-pill__value" id="p-vol-value">70%</span>
+                    <input type="range" id="p-vol" min="0" max="1" step="0.01" data-value-target="p-vol-value" data-format="percent-100">
+                </div>
             </div>
             <div class="btn-group">
                 <button class="btn-full btn-danger" onclick="deletePlanet()">DELETE</button>
@@ -581,8 +655,11 @@ <h1 class="title">LES CERCLES</h1>
         <div id="trigger-panel" class="modal">
             <h2>Trigger Settings</h2>
             <div class="control-row">
-                <label>Transpose: <span id="t-shift-label">0</span></label>
-                <input type="range" id="t-shift-range" min="-7" max="7" step="1" value="0">
+                <div class="slider-pill">
+                    <span class="slider-pill__label">Transpose</span>
+                    <span class="slider-pill__value" id="t-shift-label">0</span>
+                    <input type="range" id="t-shift-range" min="-7" max="7" step="1" value="0" data-value-target="t-shift-label" data-format="signed">
+                </div>
             </div>
             <div class="btn-group">
                 <button class="btn-full btn-danger" onclick="deleteTrigger()">DELETE</button>
@@ -784,11 +861,12 @@ <h2>CUSTOM SCALE</h2>
     const transposeRange = document.getElementById('transpose-range');
     if (transposeRange) transposeRange.value = STATE.gateTranspose;
     const transposeLabel = document.getElementById('transpose-label');
-    if (transposeLabel) transposeLabel.innerText = STATE.gateTranspose;
+    if (transposeLabel) transposeLabel.innerText = formatSliderValue('signed', STATE.gateTranspose);
     syncGateUI();
     updateGateSpinUI();
     updatePlayButton();
     updatePlanetList();
+    refreshSliderDisplays();
 }
 
 function undoLastMove() {
@@ -1070,6 +1148,57 @@ <h2>CUSTOM SCALE</h2>
     AudioEngine.setVolume(volume);
 }
 
+function formatSliderValue(format, value) {
+    const num = parseFloat(value);
+    if (Number.isNaN(num)) return value;
+    switch (format) {
+        case 'percent':
+            return `${Math.round(num * 100)}%`;
+        case 'percent-100':
+            return `${Math.round(num * 100)}%`;
+        case 'speed':
+            return `${num.toFixed(1)}x`;
+        case 'rpm':
+            return `${Math.round(num)} RPM`;
+        case 'rpm-fine':
+            return num.toFixed(2);
+        case 'signed': {
+            const intVal = Math.round(num);
+            return intVal > 0 ? `+${intVal}` : `${intVal}`;
+        }
+        case 'int':
+            return `${Math.round(num)}`;
+        default:
+            return `${num}`;
+    }
+}
+
+function updateSliderValue(input) {
+    if (!input) return;
+    const targetId = input.dataset.valueTarget;
+    if (!targetId) return;
+    const target = document.getElementById(targetId);
+    if (!target) return;
+    const format = input.dataset.format || 'raw';
+    target.textContent = formatSliderValue(format, input.value);
+}
+
+function refreshSliderDisplays() {
+    const ids = [
+        'volume-range',
+        'speed-range',
+        'gate-range',
+        'transpose-range',
+        'gate-speed-range',
+        'p-rpm-range',
+        'p-vol'
+    ];
+    ids.forEach(id => {
+        const input = document.getElementById(id);
+        if (input) updateSliderValue(input);
+    });
+}
+
 function updatePlayButton() {
     const btn = document.getElementById('btn-play');
     if (!btn) return;
@@ -1082,7 +1211,10 @@ <h2>CUSTOM SCALE</h2>
     const dirBtn = document.getElementById('btn-gate-dir');
     if (dirBtn) dirBtn.innerText = STATE.gateSpinDirection === 1 ? "CW" : "CCW";
     const speedRange = document.getElementById('gate-speed-range');
-    if (speedRange) speedRange.value = STATE.gateSpinRPM;
+    if (speedRange) {
+        speedRange.value = STATE.gateSpinRPM;
+        updateSliderValue(speedRange);
+    }
 }
 
 const gateSpeedRange = document.getElementById('gate-speed-range');
@@ -1135,7 +1267,10 @@ <h2>CUSTOM SCALE</h2>
     const gateCount = STATE.triggers.length;
     document.getElementById('gate-label').innerText = gateCount;
     const gateRange = document.getElementById('gate-range');
-    if (gateRange) gateRange.value = gateCount;
+    if (gateRange) {
+        gateRange.value = gateCount;
+        updateSliderValue(gateRange);
+    }
 }
 
 function updatePlanetList() {
@@ -1164,6 +1299,8 @@ <h2>CUSTOM SCALE</h2>
     document.getElementById('g-root').value = STATE.root;
     document.getElementById('g-scale').value = STATE.scale;
     document.getElementById('global-panel').style.display = 'block';
+    document.getElementById('modal-overlay').classList.add('active');
+    refreshSliderDisplays();
 }
 
 function applyGlobal() {
@@ -1326,9 +1463,10 @@ <h2>CUSTOM SCALE</h2>
             const transposeRange = document.getElementById('transpose-range');
             if (transposeRange) transposeRange.value = STATE.gateTranspose;
             const transposeLabel = document.getElementById('transpose-label');
-            if (transposeLabel) transposeLabel.innerText = STATE.gateTranspose;
+            if (transposeLabel) transposeLabel.innerText = formatSliderValue('signed', STATE.gateTranspose);
             syncGateUI();
             updateGateSpinUI();
+            refreshSliderDisplays();
 
             updatePlanetList();
             closePanel('global-panel');
@@ -1352,7 +1490,9 @@ <h2>CUSTOM SCALE</h2>
         if (p) {
              const effectiveRPM = p.rpm * STATE.globalSpeed;
              document.getElementById('p-rpm').value = effectiveRPM.toFixed(2);
-             document.getElementById('p-rpm-range').value = effectiveRPM.toFixed(2);
+             const rpmRange = document.getElementById('p-rpm-range');
+             rpmRange.value = effectiveRPM.toFixed(2);
+             updateSliderValue(rpmRange);
         }
     }
 }
@@ -1388,15 +1528,21 @@ <h2>CUSTOM SCALE</h2>
     pushUndoState();
     STATE.gateTranspose = clampShift(parseInt(val, 10) || 0);
     const transposeRange = document.getElementById('transpose-range');
-    if (transposeRange) transposeRange.value = STATE.gateTranspose;
+    if (transposeRange) {
+        transposeRange.value = STATE.gateTranspose;
+        updateSliderValue(transposeRange);
+    }
     const transposeLabel = document.getElementById('transpose-label');
-    if (transposeLabel) transposeLabel.innerText = STATE.gateTranspose;
+    if (transposeLabel) transposeLabel.innerText = formatSliderValue('signed', STATE.gateTranspose);
     if (STATE.editingTriggerId) {
         const t = STATE.triggers.find(x => x.id === STATE.editingTriggerId);
         if (t) {
             const shiftRange = document.getElementById('t-shift-range');
             const shiftLabel = document.getElementById('t-shift-label');
-            if (shiftRange) shiftRange.value = clampShift(t.shift);
+            if (shiftRange) {
+                shiftRange.value = clampShift(t.shift);
+                updateSliderValue(shiftRange);
+            }
             if (shiftLabel) shiftLabel.innerText = getEffectiveTriggerShift(t.shift);
         }
     }
@@ -1452,8 +1598,12 @@ <h2>CUSTOM SCALE</h2>
 
     const effectiveRPM = p.rpm * STATE.globalSpeed;
     document.getElementById('p-rpm').value = effectiveRPM.toFixed(2);
-    document.getElementById('p-rpm-range').value = effectiveRPM.toFixed(2);
-    document.getElementById('p-vol').value = p.velocity;
+    const rpmRange = document.getElementById('p-rpm-range');
+    rpmRange.value = effectiveRPM.toFixed(2);
+    updateSliderValue(rpmRange);
+    const volumeRange = document.getElementById('p-vol');
+    volumeRange.value = p.velocity;
+    updateSliderValue(volumeRange);
     panel.style.display = 'block';
 }
 
@@ -1469,7 +1619,9 @@ <h2>CUSTOM SCALE</h2>
     closePanel('orb-panel');
     closePanel('planet-panel');
     STATE.editingTriggerId = t.id;
-    document.getElementById('t-shift-range').value = clampShift(t.shift);
+    const shiftRange = document.getElementById('t-shift-range');
+    shiftRange.value = clampShift(t.shift);
+    updateSliderValue(shiftRange);
     document.getElementById('t-shift-label').innerText = getEffectiveTriggerShift(t.shift);
     document.getElementById('trigger-panel').style.display = 'block';
 }
@@ -1504,6 +1656,7 @@ <h2>CUSTOM SCALE</h2>
 
 document.getElementById('t-shift-range').oninput = (e) => {
     const val = clampShift(parseInt(e.target.value, 10) || 0);
+    updateSliderValue(e.target);
     const t = STATE.triggers.find(x => x.id === STATE.editingTriggerId);
     if (t) {
         pushUndoState();
@@ -1551,6 +1704,8 @@ <h2>CUSTOM SCALE</h2>
     const count = parseInt(val);
     pushUndoState();
     document.getElementById('gate-label').innerText = count;
+    const gateRange = document.getElementById('gate-range');
+    if (gateRange) updateSliderValue(gateRange);
     const previousShifts = STATE.triggers
         .slice()
         .sort((a, b) => a.angle - b.angle)
@@ -1616,7 +1771,10 @@ <h2>CUSTOM SCALE</h2>
     const inputVal = parseFloat(e.target.value);
     updatePlanetRPM(inputVal);
     const range = document.getElementById('p-rpm-range');
-    if (range && !isNaN(inputVal)) range.value = inputVal;
+    if (range && !isNaN(inputVal)) {
+        range.value = inputVal;
+        updateSliderValue(range);
+    }
 };
 
 document.getElementById('p-rpm-range').oninput = (e) => {
@@ -1624,15 +1782,20 @@ <h2>CUSTOM SCALE</h2>
     updatePlanetRPM(inputVal);
     const numberInput = document.getElementById('p-rpm');
     if (numberInput && !isNaN(inputVal)) numberInput.value = inputVal.toFixed(2);
+    updateSliderValue(e.target);
 };
 
 document.getElementById('p-vol').oninput = (e) => {
     const p = STATE.planets.find(x => x.id === STATE.editingId);
     if(p) p.velocity = parseFloat(e.target.value);
+    updateSliderValue(e.target);
 };
 
 function closePanel(id) {
     document.getElementById(id).style.display = 'none';
+    if (id === 'global-panel') {
+        document.getElementById('modal-overlay').classList.remove('active');
+    }
     if(id === 'planet-panel') STATE.editingId = null;
     if(id === 'trigger-panel') STATE.editingTriggerId = null;
     if(id === 'orb-panel') {
@@ -2262,6 +2425,7 @@ <h2>CUSTOM SCALE</h2>
     AudioEngine.init();
     MidiEngine.init();
     updatePlanetList();
+    refreshSliderDisplays();
     STATE.isRunning = true;
     lastTime = 0; 
     document.getElementById('start-overlay').style.display = 'none';

From aa946c2e1d5ca6f152a442d4ae521cef2bffd6a8 Mon Sep 17 00:00:00 2001
From: Jerome Potter <jerome.potter@gmail.com>
Date: Thu, 15 Jan 2026 13:19:11 -0800
Subject: [PATCH 3/6] Rework control layout and slider fill

---
 index.html | 147 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 116 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 2e554fc..c69873f 100644
--- a/index.html
+++ b/index.html
@@ -212,6 +212,50 @@
         .btn-active { color: var(--accent-orange); opacity: 1; border-bottom: 2px solid var(--accent-orange); }
         .btn-text:disabled { opacity: 0.3; cursor: not-allowed; }
 
+        details.side-panel {
+            pointer-events: auto;
+            width: 260px;
+            border: 1px solid rgba(0,0,0,0.08);
+            border-radius: 16px;
+            padding: 10px 12px;
+            background: rgba(255,255,255,0.6);
+            backdrop-filter: blur(6px);
+        }
+
+        details.side-panel summary {
+            list-style: none;
+            cursor: pointer;
+            font-size: 0.85em;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            font-weight: 700;
+            opacity: 0.7;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        details.side-panel summary::-webkit-details-marker {
+            display: none;
+        }
+
+        .side-panel-content {
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        #side-controls {
+            position: absolute;
+            inset: 0 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            pointer-events: none;
+            z-index: 20;
+        }
+
         /* PLANET LIST */
         #planet-list-wrap {
             --chip-size: 18px;
@@ -305,11 +349,10 @@
         }
         input[type=range]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 4px;
-            height: 22px;
-            border-radius: 999px;
-            background: var(--ink-color);
-            box-shadow: 0 0 0 6px rgba(255,255,255,0.2);
+            width: 0;
+            height: 0;
+            background: transparent;
+            box-shadow: none;
         }
         input[type=range]::-webkit-slider-runnable-track {
             height: 100%;
@@ -320,10 +363,9 @@
             background: transparent;
         }
         input[type=range]::-moz-range-thumb {
-            width: 4px;
-            height: 22px;
-            border-radius: 999px;
-            background: var(--ink-color);
+            width: 0;
+            height: 0;
+            background: transparent;
             border: none;
         }
         input[type=range]::-moz-focus-outer { border: 0; }
@@ -333,7 +375,13 @@
             width: 190px;
             height: 40px;
             border-radius: 999px;
-            background: var(--slider-pill-bg);
+            background: linear-gradient(
+                to right,
+                rgba(0,0,0,0.22) 0%,
+                rgba(0,0,0,0.22) var(--slider-fill, 0%),
+                var(--slider-pill-bg) var(--slider-fill, 0%),
+                var(--slider-pill-bg) 100%
+            );
             border: 1px solid var(--slider-pill-border);
             display: flex;
             align-items: center;
@@ -379,9 +427,9 @@
         }
 
         #global-panel {
-            top: 80px;
-            right: 20px;
-            left: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
             transform: none;
         }
 
@@ -513,7 +561,18 @@
                 flex-wrap: wrap;
                 justify-content: center;
             }
-            
+
+            #side-controls {
+                inset: auto 10px 90px;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            details.side-panel {
+                width: 100%;
+                max-width: 320px;
+            }
+
             .modal { width: 85vw; }
             #global-panel {
                 top: 50%;
@@ -538,7 +597,7 @@ <h1 style="font-size: 3em; letter-spacing: 4px; font-weight: 300; text-align: ce
             <div class="hud-group">
                 <h1 class="title">LES CERCLES</h1>
                 <div class="hud-item" onclick="toggleAudio()">AUDIO: <span id="audio-label">ON</span></div>
-                <div class="hud-item" onclick="openGlobal()">SETTINGS</div>
+            <div class="hud-item" id="settings-button" onclick="openGlobal()">SETTINGS</div>
             </div>
 
             <div class="hud-group">
@@ -556,7 +615,6 @@ <h1 class="title">LES CERCLES</h1>
                     </div>
                 </div>
 
-                <button id="btn-play" class="btn-text btn-fixed" onclick="togglePlay()">PLAY</button>
                 <button class="btn-text" onclick="toggleSlingshot()">ORB</button>
             </div>
         </div>
@@ -564,9 +622,12 @@ <h1 class="title">LES CERCLES</h1>
         <canvas id="mainCanvas"></canvas>
         <div id="modal-overlay" onclick="closePanel('global-panel')"></div>
         
-        <div id="controls-bar">
-            <div class="controls-row">
-                <div class="control-group">
+        <div id="side-controls">
+            <details class="side-panel" id="notes-panel" open>
+                <summary>NOTES</summary>
+                <div class="side-panel-content">
+                    <button id="btn-play" class="btn-text btn-fixed" onclick="togglePlay()">PLAY</button>
+
                     <div class="macro-slider-container">
                         <div class="slider-pill">
                             <span class="slider-pill__label">Speed</span>
@@ -576,14 +637,20 @@ <h1 class="title">LES CERCLES</h1>
                     </div>
 
                     <button id="btn-dir" class="btn-text" onclick="toggleDirection()">CCW</button>
-
                     <button class="btn-text" onclick="syncRPMs()">SYNC</button>
                     <button class="btn-text" onclick="evenSpacePlanets()">EVEN</button>
+
+                    <div id="planet-list-wrap">
+                        <button class="planet-chip-btn" onclick="addPlanet()">+</button>
+                        <div id="planet-list"></div>
+                        <button class="planet-chip-btn" onclick="deleteLastPlanet()">-</button>
+                    </div>
                 </div>
-            </div>
+            </details>
 
-            <div class="controls-row">
-                <div class="control-group gate-settings">
+            <details class="side-panel" id="gates-panel" open>
+                <summary>GATES</summary>
+                <div class="side-panel-content">
                     <div class="macro-slider-container">
                         <div class="slider-pill">
                             <span class="slider-pill__label">Gates</span>
@@ -614,13 +681,7 @@ <h1 class="title">LES CERCLES</h1>
 
                     <button id="btn-gate-dir" class="btn-text" onclick="toggleGateSpinDirection()">CW</button>
                 </div>
-            </div>
-
-            <div id="planet-list-wrap">
-                <button class="planet-chip-btn" onclick="addPlanet()">+</button>
-                <div id="planet-list"></div>
-                <button class="planet-chip-btn" onclick="deleteLastPlanet()">-</button>
-            </div>
+            </details>
         </div>
 
         <div id="planet-panel" class="modal">
@@ -1181,6 +1242,18 @@ <h2>CUSTOM SCALE</h2>
     if (!target) return;
     const format = input.dataset.format || 'raw';
     target.textContent = formatSliderValue(format, input.value);
+    updateSliderFill(input);
+}
+
+function updateSliderFill(input) {
+    const container = input.closest('.slider-pill');
+    if (!container) return;
+    const min = parseFloat(input.min || 0);
+    const max = parseFloat(input.max || 100);
+    const val = parseFloat(input.value || 0);
+    const percent = max > min ? ((val - min) / (max - min)) * 100 : 0;
+    const clamped = Math.max(0, Math.min(100, percent));
+    container.style.setProperty('--slider-fill', `${clamped}%`);
 }
 
 function refreshSliderDisplays() {
@@ -1298,7 +1371,19 @@ <h2>CUSTOM SCALE</h2>
 function openGlobal() {
     document.getElementById('g-root').value = STATE.root;
     document.getElementById('g-scale').value = STATE.scale;
-    document.getElementById('global-panel').style.display = 'block';
+    const panel = document.getElementById('global-panel');
+    const settingsButton = document.getElementById('settings-button');
+    const container = document.getElementById('game-container');
+    panel.style.display = 'block';
+    if (panel && settingsButton && container) {
+        const btnRect = settingsButton.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const desiredTop = btnRect.bottom - containerRect.top + 8;
+        const desiredLeft = btnRect.left - containerRect.left;
+        const maxLeft = containerRect.width - panel.offsetWidth - 10;
+        panel.style.top = `${Math.max(10, desiredTop)}px`;
+        panel.style.left = `${Math.max(10, Math.min(desiredLeft, maxLeft))}px`;
+    }
     document.getElementById('modal-overlay').classList.add('active');
     refreshSliderDisplays();
 }

From 62d1722c32063daffc98fb1b47bbabd11c3dc9a1 Mon Sep 17 00:00:00 2001
From: Jerome Potter <jerome.potter@gmail.com>
Date: Thu, 15 Jan 2026 14:37:30 -0800
Subject: [PATCH 4/6] Fix mobile layout cleanup

---
 index.html | 44 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index c69873f..9deb661 100644
--- a/index.html
+++ b/index.html
@@ -256,6 +256,13 @@
             z-index: 20;
         }
 
+        #planet-list-wrap {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
         /* PLANET LIST */
         #planet-list-wrap {
             --chip-size: 18px;
@@ -272,7 +279,6 @@
             overflow-x: auto;
             z-index: 15;
             overflow: hidden; 
-}
         }
 
         #planet-list-wrap .planet-chip-btn {
@@ -563,7 +569,7 @@
             }
 
             #side-controls {
-                inset: auto 10px 90px;
+                inset: auto 10px 120px;
                 flex-direction: column;
                 gap: 12px;
             }
@@ -573,6 +579,10 @@
                 max-width: 320px;
             }
 
+            #planet-list-wrap {
+                bottom: 20px;
+            }
+
             .modal { width: 85vw; }
             #global-panel {
                 top: 50%;
@@ -623,7 +633,7 @@ <h1 class="title">LES CERCLES</h1>
         <div id="modal-overlay" onclick="closePanel('global-panel')"></div>
         
         <div id="side-controls">
-            <details class="side-panel" id="notes-panel" open>
+            <details class="side-panel" id="notes-panel">
                 <summary>NOTES</summary>
                 <div class="side-panel-content">
                     <button id="btn-play" class="btn-text btn-fixed" onclick="togglePlay()">PLAY</button>
@@ -640,15 +650,10 @@ <h1 class="title">LES CERCLES</h1>
                     <button class="btn-text" onclick="syncRPMs()">SYNC</button>
                     <button class="btn-text" onclick="evenSpacePlanets()">EVEN</button>
 
-                    <div id="planet-list-wrap">
-                        <button class="planet-chip-btn" onclick="addPlanet()">+</button>
-                        <div id="planet-list"></div>
-                        <button class="planet-chip-btn" onclick="deleteLastPlanet()">-</button>
-                    </div>
                 </div>
             </details>
 
-            <details class="side-panel" id="gates-panel" open>
+            <details class="side-panel" id="gates-panel">
                 <summary>GATES</summary>
                 <div class="side-panel-content">
                     <div class="macro-slider-container">
@@ -684,6 +689,12 @@ <h1 class="title">LES CERCLES</h1>
             </details>
         </div>
 
+        <div id="planet-list-wrap">
+            <button class="planet-chip-btn" onclick="addPlanet()">+</button>
+            <div id="planet-list"></div>
+            <button class="planet-chip-btn" onclick="deleteLastPlanet()">-</button>
+        </div>
+
         <div id="planet-panel" class="modal">
             <div class="control-row">
                 <label>Note</label>
@@ -1187,6 +1198,7 @@ <h2>CUSTOM SCALE</h2>
 const canvas = document.getElementById('mainCanvas');
 const ctx = canvas.getContext('2d');
 let canvasW, canvasH, centerX, centerY;
+let isMobileLayout = null;
 
 function resize() {
     canvasW = window.innerWidth;
@@ -1196,11 +1208,23 @@ <h2>CUSTOM SCALE</h2>
     centerX = canvasW/2;
     centerY = canvasH/2;
     const dim = Math.min(canvasW, canvasH);
-    STATE.orbitRadius = dim * (dim < 600 ? 0.35 : 0.35);
+    STATE.orbitRadius = dim * (dim < 600 ? 0.25 : 0.35);
+    updateSidePanelsForViewport();
 }
 window.addEventListener('resize', resize);
 resize();
 
+function updateSidePanelsForViewport() {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobileLayout === isMobile) return;
+    isMobileLayout = isMobile;
+    const notesPanel = document.getElementById('notes-panel');
+    const gatesPanel = document.getElementById('gates-panel');
+    if (!notesPanel || !gatesPanel) return;
+    notesPanel.open = !isMobile;
+    gatesPanel.open = !isMobile;
+}
+
 function toggleAudio() { AudioEngine.toggle(); }
 
 function updateMasterVolume(value) {

From 4a751844a4bbeba7db41d9fc7a934e664669b2d2 Mon Sep 17 00:00:00 2001
From: Jerome Potter <jerome.potter@gmail.com>
Date: Thu, 15 Jan 2026 14:46:16 -0800
Subject: [PATCH 5/6] Adjust side panel ordering

---
 index.html | 52 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 9deb661..bb70b7e 100644
--- a/index.html
+++ b/index.html
@@ -212,6 +212,18 @@
         .btn-active { color: var(--accent-orange); opacity: 1; border-bottom: 2px solid var(--accent-orange); }
         .btn-text:disabled { opacity: 0.3; cursor: not-allowed; }
 
+        .btn-small {
+            font-size: 0.75em;
+            padding: 6px 10px;
+        }
+
+        .control-buttons-row {
+            display: flex;
+            gap: 8px;
+            justify-content: center;
+            margin-top: 6px;
+        }
+
         details.side-panel {
             pointer-events: auto;
             width: 260px;
@@ -636,6 +648,9 @@ <h1 class="title">LES CERCLES</h1>
             <details class="side-panel" id="notes-panel">
                 <summary>NOTES</summary>
                 <div class="side-panel-content">
+                    <button id="btn-dir" class="btn-text" onclick="toggleDirection()">CCW</button>
+                    <button class="btn-text" onclick="syncRPMs()">SYNC</button>
+                    <button class="btn-text" onclick="evenSpacePlanets()">EVEN</button>
                     <button id="btn-play" class="btn-text btn-fixed" onclick="togglePlay()">PLAY</button>
 
                     <div class="macro-slider-container">
@@ -646,16 +661,14 @@ <h1 class="title">LES CERCLES</h1>
                         </div>
                     </div>
 
-                    <button id="btn-dir" class="btn-text" onclick="toggleDirection()">CCW</button>
-                    <button class="btn-text" onclick="syncRPMs()">SYNC</button>
-                    <button class="btn-text" onclick="evenSpacePlanets()">EVEN</button>
-
                 </div>
             </details>
 
             <details class="side-panel" id="gates-panel">
                 <summary>GATES</summary>
                 <div class="side-panel-content">
+                    <button id="btn-gate-play" class="btn-text btn-fixed" onclick="toggleGateSpin()">PLAY</button>
+
                     <div class="macro-slider-container">
                         <div class="slider-pill">
                             <span class="slider-pill__label">Gates</span>
@@ -664,17 +677,8 @@ <h1 class="title">LES CERCLES</h1>
                         </div>
                     </div>
 
-                    <div class="macro-slider-container">
-                        <div class="slider-pill">
-                            <span class="slider-pill__label">Transpose</span>
-                            <span class="slider-pill__value" id="transpose-label">0</span>
-                            <input id="transpose-range" type="range" min="-7" max="7" step="1" value="0" data-value-target="transpose-label" data-format="signed" oninput="updateGlobalTranspose(this.value); updateSliderValue(this)">
-                        </div>
-                    </div>
-
                     <button class="btn-text" onclick="randomizeGateTranspose()">RND TRNS</button>
                     <button class="btn-text" onclick="randomizeGateSpacing()">RND SPC</button>
-                    <button id="btn-gate-play" class="btn-text btn-fixed" onclick="toggleGateSpin()">PLAY</button>
 
                     <div class="macro-slider-container">
                         <div class="slider-pill">
@@ -684,6 +688,18 @@ <h1 class="title">LES CERCLES</h1>
                         </div>
                     </div>
 
+                    <div class="macro-slider-container">
+                        <div class="slider-pill">
+                            <span class="slider-pill__label">Transpose</span>
+                            <span class="slider-pill__value" id="transpose-label">0</span>
+                            <input id="transpose-range" type="range" min="-7" max="7" step="1" value="0" data-value-target="transpose-label" data-format="signed" oninput="updateGlobalTranspose(this.value); updateSliderValue(this)">
+                        </div>
+                        <div class="control-buttons-row">
+                            <button class="btn-text btn-small" onclick="adjustGlobalTranspose(-1)">-1</button>
+                            <button class="btn-text btn-small" onclick="adjustGlobalTranspose(1)">+1</button>
+                        </div>
+                    </div>
+
                     <button id="btn-gate-dir" class="btn-text" onclick="toggleGateSpinDirection()">CW</button>
                 </div>
             </details>
@@ -1657,6 +1673,16 @@ <h2>CUSTOM SCALE</h2>
     }
 }
 
+function adjustGlobalTranspose(delta) {
+    const next = clampShift((STATE.gateTranspose || 0) + delta);
+    updateGlobalTranspose(next);
+    const transposeRange = document.getElementById('transpose-range');
+    if (transposeRange) {
+        transposeRange.value = next;
+        updateSliderValue(transposeRange);
+    }
+}
+
 function addPlanet() {
     if(STATE.planets.length >= 32) return;
     pushUndoState();

From f413720120e33defa6696303635fe80a1027bd69 Mon Sep 17 00:00:00 2001
From: Jerome Potter <jerome.potter@gmail.com>
Date: Thu, 15 Jan 2026 16:52:58 -0800
Subject: [PATCH 6/6] Improve mobile spacing and scroll

---
 index.html | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index bb70b7e..c45dbd6 100644
--- a/index.html
+++ b/index.html
@@ -74,7 +74,7 @@
             align-items: center;
             font-weight: 500;
             letter-spacing: 0.5px;
-            z-index: 10;
+            z-index: 30;
             justify-content: space-between;
         }
 
@@ -273,6 +273,7 @@
             bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
+            z-index: 25;
         }
 
         /* PLANET LIST */
@@ -581,9 +582,13 @@
             }
 
             #side-controls {
-                inset: auto 10px 120px;
+                inset: 180px 10px 20px;
                 flex-direction: column;
                 gap: 12px;
+                pointer-events: auto;
+                overflow-y: auto;
+                max-height: calc(100% - 220px);
+                -webkit-overflow-scrolling: touch;
             }
 
             details.side-panel {
@@ -592,7 +597,8 @@
             }
 
             #planet-list-wrap {
-                bottom: 20px;
+                top: 130px;
+                bottom: auto;
             }
 
             .modal { width: 85vw; }
@@ -1224,7 +1230,12 @@ <h2>CUSTOM SCALE</h2>
     centerX = canvasW/2;
     centerY = canvasH/2;
     const dim = Math.min(canvasW, canvasH);
-    STATE.orbitRadius = dim * (dim < 600 ? 0.25 : 0.35);
+    if (dim < 600) {
+        STATE.orbitRadius = dim * 0.28;
+        centerY = canvasH * 0.32;
+    } else {
+        STATE.orbitRadius = dim * 0.35;
+    }
     updateSidePanelsForViewport();
 }
 window.addEventListener('resize', resize);