diff --git a/index.html b/index.html
index 48c4284..d98b614 100644
--- a/index.html
+++ b/index.html
@@ -193,7 +193,7 @@
 
             <!-- Moon position (with phase) -->
             <g id="rpg-moon">
-                <circle id="rpg-moon-bg" cx="0" cy="0" r="9" fill="#b0a89a" stroke="#e6dfd1" stroke-width="1"/>
+                <circle id="rpg-moon-bg" cx="0" cy="0" r="9" fill="#1c1b1f" stroke="#999187" stroke-width="1"/>
                 <path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
                 <path id="rpg-moon-dark" d="" fill="#54514f"/>
             </g>
@@ -219,7 +219,7 @@
         </div>
         <div class="info-row">
             <div class="info-icon">
-                <svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#e6dfd1"/></svg>
+                <svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#1c1b1f"/></svg>
             </div>
             <div class="info-content"><span class="info-label">Mondphase</span><span class="info-value" id="moon-phase-text">--</span></div>
         </div>
@@ -500,50 +500,73 @@
             }
         }
 
-        function renderMoonPhaseIcon(phase) {
+        function renderMoonPhaseIcon(phase, fraction) {
             var icon = document.getElementById('moon-phase-icon');
             icon.innerHTML = '';
+
+            var r = 9;
+            // Background: dark full circle
             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', '#b0a89a');
-            bg.setAttribute('stroke', '#e6dfd1');
+            bg.setAttribute('cx', '12'); bg.setAttribute('cy', '12'); bg.setAttribute('r', r);
+            bg.setAttribute('fill', '#1c1b1f');
+            bg.setAttribute('stroke', '#999187');
             bg.setAttribute('stroke-width', '0.5');
             icon.appendChild(bg);
+
+            // Calculate terminator ellipse radius from fraction
+            // rx > 0 (crescent): terminator curves into the lit area
+            // rx < 0 (gibbous): terminator curves into the dark area
+            var rx = r * (1 - 2 * fraction);
+
+            var path;
             if (phase < 0.5) {
-                var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                var r = 9;
-                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 12 3 A 9 9 0 0 1 12 21 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 12 3 Z');
-                lit.setAttribute('fill', '#e6dfd1');
-                icon.appendChild(lit);
+                // Waxing: right side lit, left side dark
+                if (rx > 0) {
+                    // Crescent
+                    path = 'M 12 3 A 9 9 0 0 0 12 21 A ' + rx + ' 9 0 0 1 12 3 Z';
+                } else {
+                    // Gibbous
+                    path = 'M 12 3 A 9 9 0 0 0 12 21 A ' + Math.abs(rx) + ' 9 0 0 0 12 3 Z';
+                }
             } else {
-                var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                var r = 9;
-                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 12 3 A 9 9 0 0 0 12 21 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 12 3 Z');
-                lit.setAttribute('fill', '#e6dfd1');
-                icon.appendChild(lit);
+                // Waning: left side lit, right side dark
+                if (rx > 0) {
+                    // Crescent
+                    path = 'M 12 3 A 9 9 0 0 1 12 21 A ' + rx + ' 9 0 0 0 12 3 Z';
+                } else {
+                    // Gibbous
+                    path = 'M 12 3 A 9 9 0 0 1 12 21 A ' + Math.abs(rx) + ' 9 0 0 1 12 3 Z';
+                }
             }
+
+            var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            lit.setAttribute('d', path);
+            lit.setAttribute('fill', '#e6dfd1');
+            icon.appendChild(lit);
         }
 
-        function renderRpgMoon(phase) {
+        function renderRpgMoon(phase, fraction) {
             var r = 9;
             rpgMoonDark.setAttribute('d', '');
+
+            var rx = r * (1 - 2 * fraction);
+
+            var path;
             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;
-                rpgMoonLit.setAttribute('d', 'M 0 -9 A 9 9 0 0 1 0 9 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 0 -9 Z');
+                if (rx > 0) {
+                    path = 'M 0 -9 A 9 9 0 0 0 0 9 A ' + rx + ' 9 0 0 1 0 -9 Z';
+                } else {
+                    path = 'M 0 -9 A 9 9 0 0 0 0 9 A ' + Math.abs(rx) + ' 9 0 0 0 0 -9 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;
-                rpgMoonLit.setAttribute('d', 'M 0 -9 A 9 9 0 0 0 0 9 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 0 -9 Z');
+                if (rx > 0) {
+                    path = 'M 0 -9 A 9 9 0 0 1 0 9 A ' + rx + ' 9 0 0 0 0 -9 Z';
+                } else {
+                    path = 'M 0 -9 A 9 9 0 0 1 0 9 A ' + Math.abs(rx) + ' 9 0 0 1 0 -9 Z';
+                }
             }
+
+            rpgMoonLit.setAttribute('d', path);
         }
 
         function updateClockAndEvents() {
@@ -648,8 +671,8 @@
             var moonIllum = SunCalc.getMoonIllumination(now);
             document.getElementById('moon-phase-text').textContent =
                 getMoonPhaseText(moonIllum.phase) + ' ' + Math.round(moonIllum.fraction * 100) + '%';
-            renderMoonPhaseIcon(moonIllum.phase);
-            renderRpgMoon(moonIllum.phase);
+            renderMoonPhaseIcon(moonIllum.phase, moonIllum.fraction);
+            renderRpgMoon(moonIllum.phase, moonIllum.fraction);
         }
 
         var startTime = Date.now();