Add floating goal messages

styles.css

@@ -195,6 +195,39 @@ canvas {
     border: 1px solid rgba(255, 255, 255, 0.12);
     display: inline-block;
 }
+.floating-messages {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+.floating-message {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transform: translate(-50%, 0) scale(0.98);
+    background: rgba(15, 23, 42, 0.76);
+    color: #f8fafc;
+    padding: 12px 16px;
+    border-radius: 14px;
+    border: 1px solid rgba(226, 232, 240, 0.16);
+    font-weight: 800;
+    letter-spacing: 0.4px;
+    text-shadow:
+        0 10px 30px rgba(0, 0, 0, 0.45),
+        0 2px 6px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(6px);
+    opacity: 0;
+    transition:
+        opacity 220ms ease,
+        transform 220ms ease;
+    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.2));
+}
+.floating-message.visible {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+}
 .pause-overlay {
     position: absolute;
     top: 12px;