diff --git a/packages/web/src/fx-sprites/PitFall.svelte b/packages/web/src/fx-sprites/PitFall.svelte
index 799f048..e6f3bae 100644
--- a/packages/web/src/fx-sprites/PitFall.svelte
+++ b/packages/web/src/fx-sprites/PitFall.svelte
@@ -8,14 +8,17 @@
 </script>
 
 <defs>
-  <radialGradient id={`pit-hole-${uid}`}>
-    <stop offset="0" stop-color="#0c0905" />
-    <stop offset="0.75" stop-color="#241b10" />
-    <stop offset="1" stop-color="#241b10" stop-opacity="0" />
+  <radialGradient id={`pit-hole-${uid}`} cy="0.42">
+    <stop offset="0" stop-color="#1a130a" />
+    <stop offset="0.55" stop-color="#3a2c1a" stop-opacity="0.9" />
+    <stop offset="0.85" stop-color="#5f4a33" stop-opacity="0.55" />
+    <stop offset="1" stop-color="#5f4a33" stop-opacity="0" />
   </radialGradient>
 </defs>
 
-<circle cx={c.x} cy={c.y} r="14" fill={`url(#pit-hole-${uid})`} class="hole" />
+<ellipse cx={c.x} cy={c.y} rx="14" ry="11" fill={`url(#pit-hole-${uid})`} class="hole" />
+<!-- The far lip catches the light: reads as depth, not a dot -->
+<path d={`M ${c.x - 10} ${c.y - 5} a 12 8 0 0 1 20 0`} class="lip" />
 <circle cx={c.x} cy={c.y - 2} r="8" class="faller" style={`transform-origin: ${c.x}px ${c.y}px`} />
 <g class="rim-dust">
   <circle cx={c.x - 11} cy={c.y - 6} r="3" class="dust" />
@@ -33,6 +36,13 @@
     fill: rgba(120, 100, 70, 0.85);
     animation: fall-in 0.55s ease-in 0.06s forwards;
   }
+  .lip {
+    fill: none;
+    stroke: rgba(233, 225, 203, 0.7);
+    stroke-width: 1.6;
+    stroke-linecap: round;
+    animation: hole-open 0.75s ease-out forwards;
+  }
   .dust { fill: rgba(160, 150, 130, 0.75); animation: dust-drift 0.7s ease-out 0.15s forwards; opacity: 0; }
   .dust.late { animation-delay: 0.24s; }
   .dust.later { animation-delay: 0.32s; }