diff --git a/index.html b/index.html
index 5b8eccb..7eea6e5 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,10 @@
             <circle id="rpg-sun-core" cx="100" cy="100" r="3" fill="#f3ede1"/>
 
             <!-- Moon position (with phase) -->
-            <g id="rpg-moon"></g>
+            <g id="rpg-moon">
+                <circle id="rpg-moon-bg" cx="100" cy="100" r="9" fill="#1c1b1f"/>
+                <path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
+            </g>
 
             <!-- Clock hands (on top of everything) -->
             <line id="hour-hand" x1="100" y1="100" x2="100" y2="35" stroke="#e6dfd1" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
@@ -256,6 +259,7 @@
         var rpgSunGlow = document.getElementById('rpg-sun-glow');
         var rpgSunCore = document.getElementById('rpg-sun-core');
         var rpgMoon = document.getElementById('rpg-moon');
+        var rpgMoonLit = document.getElementById('rpg-moon-lit');
         var sunRiseArrow = document.getElementById('sun-rise-arrow');
         var sunSetArrow = document.getElementById('sun-set-arrow');
         var moonRiseArrow = document.getElementById('moon-rise-arrow');
@@ -449,30 +453,17 @@
         }
 
         function renderRpgMoon(phase) {
-            rpgMoon.innerHTML = '';
             var r = 9;
-            // Background
-            var bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            bg.setAttribute('cx', '100'); bg.setAttribute('cy', '100'); bg.setAttribute('r', r);
-            bg.setAttribute('fill', '#1c1b1f');
-            rpgMoon.appendChild(bg);
-            // Illuminated part
             if (phase < 0.5) {
-                var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                 var phaseAngle = phase * 360;
                 var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
                 var sweepFlag = phase < 0.25 ? 0 : 1;
-                lit.setAttribute('d', 'M 100 91 A 9 9 0 0 1 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
-                lit.setAttribute('fill', '#e6dfd1');
-                rpgMoon.appendChild(lit);
+                rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 1 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
             } else {
-                var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                 var phaseAngle = (1 - phase) * 360;
                 var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
                 var sweepFlag = phase > 0.75 ? 0 : 1;
-                lit.setAttribute('d', 'M 100 91 A 9 9 0 0 0 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
-                lit.setAttribute('fill', '#e6dfd1');
-                rpgMoon.appendChild(lit);
+                rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 0 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
             }
         }