Fix Press E vs Press A hint per device, narrow dirt path with grass above and below

index.html

@@ -115,7 +115,7 @@
       <!-- Pixel player — position driven by JS -->
       <div class="map-player" id="map-player">🧢</div>
       <!-- interaction speech bubble -->
-      <div class="map-talk-hint" id="map-talk-hint" style="display:none">Press A</div>
+      <div class="map-talk-hint" id="map-talk-hint" style="display:none"><span class="hint-pc">Press E</span><span class="hint-touch">Press A</span></div>
       <!-- directional nudge arrow — points player toward NPC -->
       <div class="map-dir-arrow" id="map-dir-arrow" style="display:none">▶</div>
     </div>

style.css

@@ -392,18 +392,35 @@ html, body {
 .map-ground {
   position: absolute;
   bottom: 0; left: 0; right: 0;
-  height: 32%;
+  height: 48%;   /* taller overall area so grass shows top and bottom */
-  /* layered: green grass strip at top, then dirt path */
+  background:
-  background: linear-gradient(
+    /* bottom grass strip */
-    180deg,
+    linear-gradient(
-    #4a9e30 0%,        /* bright grass edge */
+      180deg,
-    #3d8a28 6%,        /* darker grass */
+      transparent 0%,
-    #c0a060 6%,        /* dirt path starts */
+      transparent 54%,
-    #b89858 50%,
+      #3d8a28 54%,
-    #a08848 100%
+      #4a9e30 58%,
-  );
+      #3d8a28 62%,
-  border-top: 4px solid #2d6e1a;  /* crisp grass line */
+      #4aaa32 66%,
-  box-shadow: inset 0 4px 0 rgba(80,160,30,.35);  /* soft green glow into path */
+      #3d8a28 100%
+    ),
+    /* dirt path in the middle */
+    linear-gradient(
+      180deg,
+      #4a9e30 0%,          /* top grass */
+      #3d8a28 8%,
+      #2d6e1a 10%,         /* sharp grass/dirt border top */
+      #c8aa6a 10%,         /* dirt path starts */
+      #b89858 30%,
+      #c0a060 50%,
+      #b89858 70%,
+      #a88848 88%,         /* dirt path ends */
+      #2d6e1a 90%,         /* sharp grass/dirt border bottom */
+      #3d8a28 92%,         /* bottom grass */
+      #4a9e30 100%
+    );
+  border-top: 3px solid #2d6e1a;
 }
 
 /* Directional nudge arrow — floats at bottom of map, points toward NPC */
@@ -452,6 +469,14 @@ html, body {
   animation: talkBubble .6s ease-in-out infinite;
   pointer-events: none;
 }
+/* Desktop: show "Press E", hide "Press A" */
+.hint-touch { display: none; }
+.hint-pc    { display: inline; }
+/* Touch/mobile: show "Press A", hide "Press E" */
+@media (pointer: coarse) {
+  .hint-touch { display: inline; }
+  .hint-pc    { display: none; }
+}
 
 /* HUD below map */
 .map-hud { background:var(--dialog-bg); border-top:4px solid var(--dialog-bd); padding:8px 10px; display:flex; gap:0; flex-shrink:0; }