diff --git a/src/components/GameLayout.tsx b/src/components/GameLayout.tsx
index 6524cbf..a13a9ce 100644
--- a/src/components/GameLayout.tsx
+++ b/src/components/GameLayout.tsx
@@ -26,6 +26,7 @@ import { SettingsPanel } from "./SettingsPanel";
 import { StatsBar } from "./StatsBar";
 import { StatsPanel } from "./StatsPanel";
 import { StorageBanner } from "./StorageBanner";
+import { TutorialOverlay } from "./TutorialOverlay";
 import { UpgradesSidebar } from "./UpgradesSidebar";
 
 export function GameLayout() {
@@ -155,6 +156,7 @@ export function GameLayout() {
         opened={settingsOpen}
         onClose={() => setSettingsOpen(false)}
       />
+      <TutorialOverlay />
       <CrtOverlay />
       <StorageBanner />
 
diff --git a/src/components/PetDisplay.tsx b/src/components/PetDisplay.tsx
index 79968d6..b23639d 100644
--- a/src/components/PetDisplay.tsx
+++ b/src/components/PetDisplay.tsx
@@ -227,7 +227,7 @@ export function PetDisplay() {
       />
       <Stack align="center" justify="center" gap="lg" h="100%">
         <SpeechBubble text={dialogueLine} />
-        <Text size="xs" ff="monospace" c="dimmed">
+        <Text id="tutorial-evolution-stage" size="xs" ff="monospace" c="dimmed">
           Stage {evolutionStage}: {stageMeta.name} [{MOOD_LABELS[mood] ?? mood}]
         </Text>
         <div
@@ -259,6 +259,7 @@ export function PetDisplay() {
         />
         <Group gap="sm">
           <Button
+            id="tutorial-feed-btn"
             size="lg"
             variant="outline"
             color="green"
diff --git a/src/components/StatsBar.tsx b/src/components/StatsBar.tsx
index 9bb7954..8250316 100644
--- a/src/components/StatsBar.tsx
+++ b/src/components/StatsBar.tsx
@@ -132,7 +132,7 @@ export function StatsBar() {
         borderBottom: "1px solid var(--mantine-color-dark-4)",
       }}
     >
-      <Text size="sm" ff="monospace">
+      <Text id="tutorial-td-counter" size="sm" ff="monospace">
         Training Data:{" "}
         <Text span fw={700} c="green">
           {fmt(trainingData)}
diff --git a/src/components/TutorialOverlay.tsx b/src/components/TutorialOverlay.tsx
new file mode 100644
index 0000000..3616d55
--- /dev/null
+++ b/src/components/TutorialOverlay.tsx
@@ -0,0 +1,231 @@
+import { Box, Button, Group, Portal, Text } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { UPGRADES } from "../data/upgrades";
+import { getUpgradeCost } from "../engine/upgradeEngine";
+import { useReducedMotion } from "../hooks/useReducedMotion";
+import { useGameStore } from "../store";
+import {
+  getActiveStep,
+  TUTORIAL_STEP,
+  type TutorialStep,
+  useTutorialStore,
+} from "../store/tutorialStore";
+
+interface StepConfig {
+  targetId: string;
+  message: string;
+  placement: "top" | "bottom" | "left" | "right";
+}
+
+const STEP_CONFIG: { [K in TutorialStep]: StepConfig } = {
+  [TUTORIAL_STEP.FEED_BUTTON]: {
+    targetId: "tutorial-feed-btn",
+    message: "Click to give GLORP training data!",
+    placement: "bottom",
+  },
+  [TUTORIAL_STEP.TD_COUNTER]: {
+    targetId: "tutorial-td-counter",
+    message: "Training Data (TD) is your currency. Earn more by clicking!",
+    placement: "bottom",
+  },
+  [TUTORIAL_STEP.UPGRADES_PANEL]: {
+    targetId: "tutorial-upgrades-panel",
+    message: "Buy upgrades to automate TD generation.",
+    placement: "right",
+  },
+  [TUTORIAL_STEP.EVOLUTION]: {
+    targetId: "tutorial-evolution-stage",
+    message: "GLORP is growing! Evolution unlocks new upgrades and dialogue.",
+    placement: "bottom",
+  },
+};
+
+const TOOLTIP_GAP = 12;
+
+function computeTooltipPosition(
+  rect: DOMRect,
+  placement: StepConfig["placement"],
+): { top: number; left: number; transform: string } {
+  switch (placement) {
+    case "bottom":
+      return {
+        top: rect.bottom + TOOLTIP_GAP,
+        left: rect.left + rect.width / 2,
+        transform: "translateX(-50%)",
+      };
+    case "top":
+      return {
+        top: rect.top - TOOLTIP_GAP,
+        left: rect.left + rect.width / 2,
+        transform: "translate(-50%, -100%)",
+      };
+    case "right":
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.right + TOOLTIP_GAP,
+        transform: "translateY(-50%)",
+      };
+    case "left":
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.left - TOOLTIP_GAP,
+        transform: "translate(-100%, -50%)",
+      };
+  }
+}
+
+export function TutorialOverlay() {
+  const completedSteps = useTutorialStore((s) => s.completedSteps);
+  const dismissed = useTutorialStore((s) => s.dismissed);
+  const completeStep = useTutorialStore((s) => s.completeStep);
+  const skipTutorial = useTutorialStore((s) => s.skipTutorial);
+
+  const totalClicks = useGameStore((s) => s.totalClicks);
+  const evolutionStage = useGameStore((s) => s.evolutionStage);
+  const trainingData = useGameStore((s) => s.trainingData);
+  const upgradeOwned = useGameStore((s) => s.upgradeOwned);
+
+  const prefersReduced = useReducedMotion();
+  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  const activeStep = getActiveStep({ completedSteps, dismissed });
+
+  // Auto-advance step 0 → 1: player made their first click
+  useEffect(() => {
+    if (activeStep === TUTORIAL_STEP.FEED_BUTTON && totalClicks >= 1) {
+      completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    }
+  }, [activeStep, totalClicks, completeStep]);
+
+  // Auto-advance step 1 → 2: player can afford at least one upgrade
+  useEffect(() => {
+    if (activeStep !== TUTORIAL_STEP.TD_COUNTER) return;
+    const canAfford = UPGRADES.some((u) => {
+      const cost = getUpgradeCost(u, upgradeOwned[u.id] ?? 0);
+      return trainingData.gte(cost);
+    });
+    if (canAfford) {
+      completeStep(TUTORIAL_STEP.TD_COUNTER);
+    }
+  }, [activeStep, trainingData, upgradeOwned, completeStep]);
+
+  // Auto-advance step 2 → 3: GLORP first evolves
+  useEffect(() => {
+    if (activeStep === TUTORIAL_STEP.UPGRADES_PANEL && evolutionStage >= 1) {
+      completeStep(TUTORIAL_STEP.UPGRADES_PANEL);
+    }
+  }, [activeStep, evolutionStage, completeStep]);
+
+  // Track the bounding rect of the active tutorial target element.
+  // Retries with rAF in case the element isn't mounted yet on first render.
+  useEffect(() => {
+    if (activeStep === null) {
+      setTargetRect(null);
+      return;
+    }
+
+    const config = STEP_CONFIG[activeStep];
+
+    const updateRect = () => {
+      const el = document.getElementById(config.targetId);
+      setTargetRect(el ? el.getBoundingClientRect() : null);
+    };
+
+    let retries = 0;
+    const tryUpdate = () => {
+      const el = document.getElementById(config.targetId);
+      if (el) {
+        setTargetRect(el.getBoundingClientRect());
+      } else if (retries < 20) {
+        retries++;
+        rafRef.current = requestAnimationFrame(tryUpdate);
+      }
+    };
+
+    rafRef.current = requestAnimationFrame(tryUpdate);
+    window.addEventListener("resize", updateRect);
+    window.addEventListener("scroll", updateRect, true);
+
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      window.removeEventListener("resize", updateRect);
+      window.removeEventListener("scroll", updateRect, true);
+    };
+  }, [activeStep]);
+
+  if (activeStep === null || targetRect === null) return null;
+
+  const config = STEP_CONFIG[activeStep];
+  const pos = computeTooltipPosition(targetRect, config.placement);
+
+  return (
+    <Portal>
+      {/* Pulsing highlight ring drawn around the target element */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: "fixed",
+          top: targetRect.top - 4,
+          left: targetRect.left - 4,
+          width: targetRect.width + 8,
+          height: targetRect.height + 8,
+          borderRadius: 6,
+          border: "2px solid rgba(64, 192, 87, 0.9)",
+          pointerEvents: "none",
+          zIndex: 9000,
+          animation: prefersReduced
+            ? undefined
+            : "tutorial-pulse 1.5s ease-in-out infinite",
+        }}
+      />
+
+      {/* Tooltip card */}
+      <Box
+        role="status"
+        aria-live="polite"
+        style={{
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          transform: pos.transform,
+          zIndex: 9001,
+          background: "var(--mantine-color-dark-6)",
+          border: "1px solid var(--mantine-color-green-7)",
+          borderRadius: 6,
+          padding: "10px 14px",
+          maxWidth: 280,
+          boxShadow: "0 4px 20px rgba(0,0,0,0.6)",
+        }}
+      >
+        <Text size="xs" c="green" fw={700} mb={6} ff="monospace">
+          ▶ TUTORIAL
+        </Text>
+        <Text size="sm" c="white" ff="monospace" mb={10}>
+          {config.message}
+        </Text>
+        <Group justify="space-between" gap="xs" wrap="nowrap">
+          <Button
+            size="compact-xs"
+            variant="subtle"
+            color="gray"
+            ff="monospace"
+            onClick={skipTutorial}
+          >
+            Skip tutorial
+          </Button>
+          <Button
+            size="compact-xs"
+            variant="subtle"
+            color="green"
+            ff="monospace"
+            onClick={() => completeStep(activeStep)}
+            aria-label="Dismiss this tutorial step"
+          >
+            ✕
+          </Button>
+        </Group>
+      </Box>
+    </Portal>
+  );
+}
diff --git a/src/components/UpgradesSidebar.tsx b/src/components/UpgradesSidebar.tsx
index 7128b1d..2ab8bb0 100644
--- a/src/components/UpgradesSidebar.tsx
+++ b/src/components/UpgradesSidebar.tsx
@@ -173,7 +173,11 @@ export function UpgradesSidebar() {
     visibleClickUpgrades.length > 0 || visibleTiers.length > 0;
 
   return (
-    <aside aria-label="Upgrades" className="sidebar-upgrades">
+    <aside
+      id="tutorial-upgrades-panel"
+      aria-label="Upgrades"
+      className="sidebar-upgrades"
+    >
       <Stack
         gap={0}
         style={{
diff --git a/src/components/index.ts b/src/components/index.ts
index 21ba58a..8b5bb14 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -13,4 +13,5 @@ export { SpeechBubble } from "./SpeechBubble";
 export { StatsBar } from "./StatsBar";
 export { StatsPanel } from "./StatsPanel";
 export { StorageBanner } from "./StorageBanner";
+export { TutorialOverlay } from "./TutorialOverlay";
 export { UpgradesSidebar } from "./UpgradesSidebar";
diff --git a/src/global.css b/src/global.css
index c6229d1..c65d9cd 100644
--- a/src/global.css
+++ b/src/global.css
@@ -177,6 +177,22 @@ body {
   }
 }
 
+/* -- Tutorial highlight ring: green glow pulse (1.5 s infinite) ---------- */
+
+@keyframes tutorial-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 4px rgba(64, 192, 87, 0.4);
+    opacity: 1;
+  }
+  50% {
+    box-shadow:
+      0 0 14px rgba(64, 192, 87, 0.8),
+      0 0 28px rgba(64, 192, 87, 0.4);
+    opacity: 0.85;
+  }
+}
+
 /* ── ASCII art color classes ─────────────────────────────── */
 
 .ascii-eyes {
diff --git a/src/store/tutorialStore.test.ts b/src/store/tutorialStore.test.ts
new file mode 100644
index 0000000..ef51e0d
--- /dev/null
+++ b/src/store/tutorialStore.test.ts
@@ -0,0 +1,138 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  getActiveStep,
+  initialTutorialState,
+  TUTORIAL_STEP,
+  useTutorialStore,
+} from "./tutorialStore";
+
+beforeEach(() => {
+  useTutorialStore.setState(initialTutorialState);
+});
+
+describe("useTutorialStore", () => {
+  it("has correct initial state", () => {
+    const state = useTutorialStore.getState();
+    expect(state.completedSteps).toEqual([]);
+    expect(state.dismissed).toBe(false);
+  });
+
+  it("completeStep adds the step to completedSteps", () => {
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    expect(useTutorialStore.getState().completedSteps).toContain(
+      TUTORIAL_STEP.FEED_BUTTON,
+    );
+  });
+
+  it("completeStep is idempotent (does not duplicate steps)", () => {
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    const { completedSteps } = useTutorialStore.getState();
+    expect(
+      completedSteps.filter((s) => s === TUTORIAL_STEP.FEED_BUTTON),
+    ).toHaveLength(1);
+  });
+
+  it("completeStep does not affect other steps", () => {
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    expect(useTutorialStore.getState().completedSteps).not.toContain(
+      TUTORIAL_STEP.TD_COUNTER,
+    );
+  });
+
+  it("can complete multiple different steps", () => {
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.TD_COUNTER);
+    const { completedSteps } = useTutorialStore.getState();
+    expect(completedSteps).toContain(TUTORIAL_STEP.FEED_BUTTON);
+    expect(completedSteps).toContain(TUTORIAL_STEP.TD_COUNTER);
+  });
+
+  it("skipTutorial sets dismissed to true", () => {
+    useTutorialStore.getState().skipTutorial();
+    expect(useTutorialStore.getState().dismissed).toBe(true);
+  });
+
+  it("skipTutorial does not clear completedSteps", () => {
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    useTutorialStore.getState().skipTutorial();
+    expect(useTutorialStore.getState().completedSteps).toContain(
+      TUTORIAL_STEP.FEED_BUTTON,
+    );
+  });
+
+  it("resetTutorial restores initial state", () => {
+    useTutorialStore.getState().completeStep(TUTORIAL_STEP.FEED_BUTTON);
+    useTutorialStore.getState().skipTutorial();
+    useTutorialStore.getState().resetTutorial();
+    const state = useTutorialStore.getState();
+    expect(state.completedSteps).toEqual([]);
+    expect(state.dismissed).toBe(false);
+  });
+});
+
+describe("getActiveStep", () => {
+  it("returns FEED_BUTTON (0) when no steps are completed", () => {
+    expect(getActiveStep({ completedSteps: [], dismissed: false })).toBe(
+      TUTORIAL_STEP.FEED_BUTTON,
+    );
+  });
+
+  it("returns TD_COUNTER (1) after FEED_BUTTON is completed", () => {
+    expect(
+      getActiveStep({
+        completedSteps: [TUTORIAL_STEP.FEED_BUTTON],
+        dismissed: false,
+      }),
+    ).toBe(TUTORIAL_STEP.TD_COUNTER);
+  });
+
+  it("returns UPGRADES_PANEL (2) after first two steps are completed", () => {
+    expect(
+      getActiveStep({
+        completedSteps: [TUTORIAL_STEP.FEED_BUTTON, TUTORIAL_STEP.TD_COUNTER],
+        dismissed: false,
+      }),
+    ).toBe(TUTORIAL_STEP.UPGRADES_PANEL);
+  });
+
+  it("returns EVOLUTION (3) after first three steps are completed", () => {
+    expect(
+      getActiveStep({
+        completedSteps: [
+          TUTORIAL_STEP.FEED_BUTTON,
+          TUTORIAL_STEP.TD_COUNTER,
+          TUTORIAL_STEP.UPGRADES_PANEL,
+        ],
+        dismissed: false,
+      }),
+    ).toBe(TUTORIAL_STEP.EVOLUTION);
+  });
+
+  it("returns null when all steps are completed", () => {
+    expect(
+      getActiveStep({
+        completedSteps: [
+          TUTORIAL_STEP.FEED_BUTTON,
+          TUTORIAL_STEP.TD_COUNTER,
+          TUTORIAL_STEP.UPGRADES_PANEL,
+          TUTORIAL_STEP.EVOLUTION,
+        ],
+        dismissed: false,
+      }),
+    ).toBeNull();
+  });
+
+  it("returns null when dismissed, regardless of completedSteps", () => {
+    expect(getActiveStep({ completedSteps: [], dismissed: true })).toBeNull();
+  });
+
+  it("returns null when dismissed even with some steps incomplete", () => {
+    expect(
+      getActiveStep({
+        completedSteps: [TUTORIAL_STEP.FEED_BUTTON],
+        dismissed: true,
+      }),
+    ).toBeNull();
+  });
+});
diff --git a/src/store/tutorialStore.ts b/src/store/tutorialStore.ts
new file mode 100644
index 0000000..1f0d64c
--- /dev/null
+++ b/src/store/tutorialStore.ts
@@ -0,0 +1,75 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { safeStorage } from "../utils/safeStorage";
+
+/**
+ * Tutorial step indices in order:
+ * - FEED_BUTTON (0): pulsing highlight on FEED button, shown on first load
+ * - TD_COUNTER (1): tooltip on TD counter, shown after first click
+ * - UPGRADES_PANEL (2): tooltip on upgrades panel, shown when first upgrade affordable
+ * - EVOLUTION (3): tooltip on evolution indicator, shown on first evolution
+ */
+export const TUTORIAL_STEP = {
+  FEED_BUTTON: 0,
+  TD_COUNTER: 1,
+  UPGRADES_PANEL: 2,
+  EVOLUTION: 3,
+} as const;
+
+export type TutorialStep = (typeof TUTORIAL_STEP)[keyof typeof TUTORIAL_STEP];
+
+export const TUTORIAL_TOTAL_STEPS = 4;
+
+export interface TutorialState {
+  /** Steps completed by the player (individually dismissed or auto-advanced). */
+  completedSteps: TutorialStep[];
+  /** True when the player clicked "Skip tutorial" to dismiss all at once. */
+  dismissed: boolean;
+}
+
+interface TutorialActions {
+  /** Mark a single step as complete (idempotent). */
+  completeStep: (step: TutorialStep) => void;
+  /** Permanently skip the entire tutorial. */
+  skipTutorial: () => void;
+  /** Reset tutorial to initial state (for testing / dev tools). */
+  resetTutorial: () => void;
+}
+
+export type TutorialStore = TutorialState & TutorialActions;
+
+export const initialTutorialState: TutorialState = {
+  completedSteps: [],
+  dismissed: false,
+};
+
+/**
+ * Returns the first step that has not been completed yet, or null if the
+ * tutorial is dismissed or all steps are done.
+ */
+export function getActiveStep(state: TutorialState): TutorialStep | null {
+  if (state.dismissed) return null;
+  for (let i = 0; i < TUTORIAL_TOTAL_STEPS; i++) {
+    if (!state.completedSteps.includes(i as TutorialStep)) {
+      return i as TutorialStep;
+    }
+  }
+  return null;
+}
+
+export const useTutorialStore = create<TutorialStore>()(
+  persist(
+    (set) => ({
+      ...initialTutorialState,
+      completeStep: (step) =>
+        set((state) => ({
+          completedSteps: state.completedSteps.includes(step)
+            ? state.completedSteps
+            : [...state.completedSteps, step],
+        })),
+      skipTutorial: () => set({ dismissed: true }),
+      resetTutorial: () => set(initialTutorialState),
+    }),
+    { name: "glorp-tutorial", storage: safeStorage },
+  ),
+);