refactor(frontend): self-styled coffee link instead of the Ko-fi image badge

Replace the external Ko-fi badge image (storage.ko-fi.com) with a small
styled link to the same ko-fi.com/N4N31DPNUS. It matches the UI, drops a
cross-origin request, and — unlike the badge image — works offline now that
Pongo is a PWA (the service worker only caches same-origin assets). The
README keeps the image badge, which is the right convention there.

Author: rgilks

lobby_worker/index.html

@@ -203,13 +203,13 @@ <h1 class="game-title">PONGO</h1>
           </div>
 
           <div style="margin-top: 10px; display: flex; justify-content: center">
-            <a href="https://ko-fi.com/N4N31DPNUS" target="_blank" rel="noopener noreferrer">
-              <img
-                height="34"
-                style="border: 0px; height: 34px"
-                src="https://storage.ko-fi.com/cdn/kofi2.png?v=6"
-                alt="Buy Me a Coffee at ko-fi.com"
-              />
+            <a
+              class="kofi-link"
+              href="https://ko-fi.com/N4N31DPNUS"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span aria-hidden="true">☕</span> Buy me a coffee
             </a>
           </div>
         </div>

lobby_worker/style.css

@@ -1049,3 +1049,28 @@ body.touch-enabled .popout-btn {
   padding: 8px 10px;
   font-size: 14px;
 }
+
+/* "Buy me a coffee" tip-jar link — links to Ko-fi, self-styled (no external
+   image), so it matches the UI and works offline in the PWA. */
+.kofi-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  color: var(--text-muted, #94a3b8);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    color 0.2s,
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.kofi-link:hover {
+  color: #fff;
+  border-color: rgba(99, 102, 241, 0.5);
+  background: rgba(99, 102, 241, 0.12);
+}