Fix moon visibility on dark background

index.html

@@ -76,7 +76,6 @@
 <body>
     <div id="vanta"></div>
     <div id="info-panel">
-        <div id="debug" style="font-size:10px;color:#999187;"></div>
         <svg id="analog-clock" viewBox="0 0 200 200">
             <!-- Clock face -->
             <circle cx="100" cy="100" r="95" fill="rgba(28,27,31,0.3)" stroke="#e6dfd1" stroke-width="2"/>
@@ -123,8 +122,9 @@
 
             <!-- Moon position (with phase) -->
             <g id="rpg-moon">
-                <circle id="rpg-moon-bg" cx="100" cy="100" r="9" fill="#1c1b1f"/>
+                <circle id="rpg-moon-bg" cx="100" cy="100" r="9" fill="#b0a89a" stroke="#e6dfd1" stroke-width="1"/>
                 <path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
+                <path id="rpg-moon-dark" d="" fill="#54514f"/>
             </g>
 
             <!-- Clock hands (on top of everything) -->
@@ -261,6 +261,7 @@
         var rpgSunCore = document.getElementById('rpg-sun-core');
         var rpgMoon = document.getElementById('rpg-moon');
         var rpgMoonLit = document.getElementById('rpg-moon-lit');
+        var rpgMoonDark = document.getElementById('rpg-moon-dark');
         var sunRiseArrow = document.getElementById('sun-rise-arrow');
         var sunSetArrow = document.getElementById('sun-set-arrow');
         var moonRiseArrow = document.getElementById('moon-rise-arrow');
@@ -430,7 +431,9 @@
             icon.innerHTML = '';
             var bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
             bg.setAttribute('cx', '12'); bg.setAttribute('cy', '12'); bg.setAttribute('r', '9');
-            bg.setAttribute('fill', '#1c1b1f');
+            bg.setAttribute('fill', '#b0a89a');
+            bg.setAttribute('stroke', '#e6dfd1');
+            bg.setAttribute('stroke-width', '0.5');
             icon.appendChild(bg);
             if (phase < 0.5) {
                 var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -455,15 +458,19 @@
 
         function renderRpgMoon(phase) {
             var r = 9;
+            // Always start with empty dark path
+            rpgMoonDark.setAttribute('d', '');
             if (phase < 0.5) {
                 var phaseAngle = phase * 360;
                 var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
                 var sweepFlag = phase < 0.25 ? 0 : 1;
+                // Lit area (right side, waxing)
                 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 phaseAngle = (1 - phase) * 360;
                 var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
                 var sweepFlag = phase > 0.75 ? 0 : 1;
+                // Lit area (left side, waning)
                 rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 0 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
             }
         }
@@ -570,11 +577,6 @@
                 getMoonPhaseText(moonIllum.phase) + ' ' + Math.round(moonIllum.fraction * 100) + '%';
             renderMoonPhaseIcon(moonIllum.phase);
             renderRpgMoon(moonIllum.phase);
-
-            document.getElementById('debug').textContent =
-                'rpg-moon exists: ' + (rpgMoon !== null) +
-                ' | lit: ' + (rpgMoonLit !== null) +
-                ' | moonPos: ' + (moonPos ? Math.round(moonPos.point.x) + ',' + Math.round(moonPos.point.y) : 'null');
         }
 
         var startTime = Date.now();