Show goal intro then milestone reminders

src/main.js

@@ -520,6 +520,7 @@
       spawnInitialBurst();
       startSpawner();
     }
+    showGoalIntro();
   };
 
   const setHighlight = (body, on) => {
@@ -1074,11 +1075,11 @@
     return null;
   };
 
-  const formatGoalMessage = (goal) => {
+  const formatGoalMessage = (goal, { includeProgress = true } = {}) => {
     if (!goal) return null;
     const title = goal.hint || goal.label || "Goal";
     const pieces = [`Goal: ${title}`];
-    if (Number.isFinite(goal.progress)) {
+    if (includeProgress && Number.isFinite(goal.progress)) {
       const pct = Math.max(0, Math.min(100, Math.round(goal.progress)));
       pieces.push(`${pct}% complete`);
     }
@@ -1109,6 +1110,25 @@
     }
   };
 
+  const showGoalIntro = () => {
+    const goal = getGoalState();
+    const text =
+      config.messages?.text ||
+      formatGoalMessage(goal, { includeProgress: false });
+    if (!text) return;
+    const colors =
+      (Array.isArray(config.messages?.colors) && config.messages.colors) ||
+      goal?.colors ||
+      null;
+    ui.showFloatingMessage(
+      { text, colors },
+      {
+        durationMs: config.messages.durationMs,
+        position: config.messages.position,
+      },
+    );
+  };
+
   const clampBodiesIntoView = (prevWidth, prevHeight) => {
     const scaleX = width / (prevWidth || width);
     const scaleY = height / (prevHeight || height);