Add '...' chat bubble above player when pressing talk before reaching NPC

style.css

@@ -483,6 +483,38 @@ html, body {
 .npc-bubble   { font-size:14px; font-family:var(--font); color:var(--black); background:var(--yellow); border:2px solid var(--black); width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 2px; animation:bounce .7s ease-in-out infinite; }
 .map-npc      { font-size:clamp(36px,10vw,52px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); cursor:pointer; }
 /* Player is fixed to the viewport centre horizontally; only Y moves */
+/* "..." bubble above player when pressing talk away from NPC */
+.player-bubble {
+  font-size: 11px;
+  font-family: var(--font);
+  color: var(--black);
+  background: #fff;
+  border: 2px solid var(--black);
+  padding: 0 5px;
+  height: 20px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  white-space: nowrap;
+  position: absolute;
+  z-index: 100;
+  box-shadow: 1px 1px 0 rgba(0,0,0,.3);
+}
+.player-bubble::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 3px solid transparent;
+  border-top-color: var(--black);
+}
+.player-bubble.visible {
+  display: flex;
+  animation: bounce .5s ease-in-out 3;
+}
+
 .map-player {
   position: absolute;
   width:  32px;
@@ -493,7 +525,7 @@ html, body {
   background-position: 0 0;
   image-rendering: pixelated;
   filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
-  z-index: 99;
+  z-index: 10;
   font-size: 0;
   color: transparent;
 }