From a88cae3a0e2f7b8d40a2a84793c683e1e75fa3b2 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Mon, 17 Aug 2026 10:19:28 -0400
Subject: [PATCH] The pit reads as depth, not a dot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Its hole was a near-black disc that sat on the parchment like spilled
ink. Now an earthen gradient ellipse, offset toward the far wall,
with the far lip catching the light — a hole you look INTO.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/web/src/fx-sprites/PitFall.svelte | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

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; }