From 39a8b0b980963b6dbb1c75d1c8beb74050ee6788 Mon Sep 17 00:00:00 2001
From: Justin Oros <JustinOros@gmail.com>
Date: Wed, 20 May 2026 13:01:13 -0700
Subject: [PATCH] =?UTF-8?q?Fix=20black=20diagonal=20line=20=E2=80=94=20syn?=
 =?UTF-8?q?c=20player-bubble=20CSS=20exactly=20to=20SQL=20game=20including?=
 =?UTF-8?q?=20::after=20tail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style.css | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 3346a86..f981a7e 100644
--- a/style.css
+++ b/style.css
@@ -485,8 +485,39 @@ 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 */
-.player-bubble   { font-size:11px; font-family:var(--font); color:var(--black); background:#fff; border:2px solid var(--black); padding:0 4px; height:20px; display:none; align-items:center; justify-content:center; border-radius:2px; white-space:nowrap; position:absolute; z-index:100; left:-9999px; }
-.player-bubble.visible { display:flex; animation:bounce .5s ease-in-out 3; }
+/* "..." 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);
+  left: -9999px;
+}
+.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;