diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 53f869a..9abc643 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -254,6 +254,7 @@ Mock `electron-log` with `jest.unstable_mockModule('electron-log', ...)` in Node
 For renderer-side tests that exercise code which calls `logger.*`, set `global.window.api.invoke`
 to a `jest.fn()` and assert on `'log:send'` calls, or simply verify the call count is correct.
 
+
 ---
 
 ### 5b — Shared Game Screen Components
@@ -302,8 +303,107 @@ See `app/games/_template/interface.html` for a complete annotated example.
 
 ---
 
+### 5d — Tutorial Service (`app/components/tutorialService.js`)
+
+All games **may** offer a tutorial shown automatically the first time the player opens the game.
+The Tutorial Service provides a shared framework so every game's tutorial looks and behaves the
+same way, with no repeated boilerplate.
+
+#### Stored state
+
+Tutorial seen-state is persisted under the top-level `tutorials` key of the player's progress
+file — separate from game scores stored under `games`. The key for each game is its manifest `id`:
+
+```json
+{
+  "playerId": "default",
+  "games": { ... },
+  "tutorials": {
+    "my-game-id": true
+  }
+}
+```
+
+#### Defining tutorial steps
+
+Define tutorial steps as an array of `{ title, content }` objects. `content` may contain inline
+HTML (e.g. `<strong>`, `<kbd>`, `<ul>`).
+
+```js
+const TUTORIAL_STEPS = [
+  {
+    title: 'Welcome to My Game',
+    content: '<p>Match the pattern before the timer runs out.</p>',
+  },
+  {
+    title: 'Scoring',
+    content: '<p>Each correct match earns <strong>10 points</strong>.</p>',
+  },
+  {
+    title: 'Controls',
+    content: '<ul><li>Click a card to select it.</li><li>Press <kbd>Esc</kbd> to end early.</li></ul>',
+  },
+];
+```
+
+#### Typical `init()` usage
+
+Call `showTutorialIfNeeded` at the end of your plugin's `init()` function. It will show the
+overlay the first time the player opens the game and call your callback when done (or
+immediately if the tutorial has already been seen):
+
+```js
+import { showTutorialIfNeeded } from '../../components/tutorialService.js';
+
+async function init(gameContainer) {
+  // ... bind DOM elements and event listeners ...
+
+  await showTutorialIfNeeded('my-game-id', TUTORIAL_STEPS, gameContainer, () => {
+    // Called when the player finishes or skips the tutorial.
+    // Optionally auto-start the game here.
+  });
+}
+```
+
+#### Public API
+
+| Function | Purpose |
+|---|---|
+| `showTutorialIfNeeded(gameId, steps, container, onComplete?)` | Show overlay if tutorial not yet seen; call `onComplete` immediately if already seen. **Primary entry point.** |
+| `showTutorial(gameId, steps, container, onComplete?)` | Always show the overlay (bypasses seen-check). |
+| `hasTutorialBeenSeen(gameId)` | `Promise<boolean>` — check seen state without showing the overlay. |
+| `markTutorialSeen(gameId)` | `Promise<void>` — mark tutorial seen without showing the overlay. |
+| `createTutorialOverlay(steps)` | Build and return the overlay DOM element (not yet appended). |
+| `renderTutorialStep(overlay, steps, stepIndex)` | Update an existing overlay for the given step index. |
+
+#### CSS classes
+
+The overlay is styled with classes from `app/styles/game-shared.css`. Do **not** duplicate these
+styles in game stylesheets.
+
+| Class | Purpose |
+|---|---|
+| `.tutorial-overlay` | Full-screen wrapper (positions backdrop + panel) |
+| `.tutorial-overlay__backdrop` | Semi-transparent scrim |
+| `.tutorial-overlay__panel` | White card holding tutorial content |
+| `.tutorial-overlay__step-indicator` | "Step N of M" counter |
+| `.tutorial-overlay__title` | Step heading |
+| `.tutorial-overlay__content` | Step body text / HTML |
+| `.tutorial-overlay__actions` | Prev / Next button row |
+| `.tutorial-overlay__btn` | Base nav button style |
+| `.tutorial-overlay__btn--primary` | "Next" / "Got it!" button |
+| `.tutorial-overlay__btn--secondary` | "Previous" button |
+| `.tutorial-overlay__skip` | "Skip Tutorial" link-style button |
+
+#### Testing
+
+Mock `logService.js` and provide a `globalThis.window.api.invoke` mock. Assert on
+`'progress:save'` payloads to verify `tutorials[gameId]` is set to `true` after the overlay
+is finished or skipped. See `app/components/tests/tutorialService.test.js` for full examples.
+
+---
 
-All files and functions must include JSDoc comments. Use descriptive names for variables and functions. Use US English spelling (e.g. "initialize" not "initialise").
+---l files and functions must include JSDoc comments. Use descriptive names for variables and functions. Use US English spelling (e.g. "initialize" not "initialise").
 
 When files get too large, break them into smaller modules. For example, if `index.js` exceeds 500 lines, consider moving game logic to `game.js` and UI rendering to `render.js`. Any file over 1000 lines is a red flag.
 
diff --git a/app/components/tests/tutorialService.test.js b/app/components/tests/tutorialService.test.js
new file mode 100644
index 0000000..93d60ef
--- /dev/null
+++ b/app/components/tests/tutorialService.test.js
@@ -0,0 +1,447 @@
+/**
+ * tutorialService.test.js — Unit tests for the shared tutorial framework.
+ *
+ * Exercises hasTutorialBeenSeen, markTutorialSeen, createTutorialOverlay,
+ * renderTutorialStep, showTutorial, and showTutorialIfNeeded.
+ *
+ * @file Tests for app/components/tutorialService.js
+ */
+
+import { jest } from '@jest/globals';
+
+// ── Module-level mock setup ───────────────────────────────────────────────────
+
+jest.unstable_mockModule('../logService.js', () => ({
+  logger: {
+    error: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+    verbose: jest.fn(),
+    debug: jest.fn(),
+  },
+}));
+
+const {
+  hasTutorialBeenSeen,
+  markTutorialSeen,
+  createTutorialOverlay,
+  renderTutorialStep,
+  showTutorial,
+  showTutorialIfNeeded,
+} = await import('../tutorialService.js');
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** @type {TutorialStep[]} */
+const SAMPLE_STEPS = [
+  { title: 'Step One', content: '<p>First step content.</p>' },
+  { title: 'Step Two', content: '<p>Second step content.</p>' },
+  { title: 'Step Three', content: '<p>Third step content.</p>' },
+];
+
+/**
+ * Build a mock window.api.invoke that simulates progress:load / progress:save.
+ * @param {object} [existingProgress]
+ * @returns {{ mock: jest.Mock, saved: object }}
+ */
+function buildApiMock(existingProgress = { playerId: 'default', games: {}, tutorials: {} }) {
+  const saved = { ...existingProgress };
+  const mock = jest.fn((channel, payload) => {
+    if (channel === 'progress:load') return Promise.resolve({ ...saved });
+    if (channel === 'progress:save') {
+      Object.assign(saved, payload.data);
+      return Promise.resolve();
+    }
+    return Promise.resolve();
+  });
+  return { mock, saved };
+}
+
+/**
+ * Create a minimal DOM container element.
+ * @returns {HTMLElement}
+ */
+function makeContainer() {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  return div;
+}
+
+// Clean up DOM and window.api after each test.
+afterEach(() => {
+  document.body.innerHTML = '';
+  delete globalThis.window.api;
+  jest.clearAllMocks();
+});
+
+// ── hasTutorialBeenSeen ───────────────────────────────────────────────────────
+
+describe('hasTutorialBeenSeen', () => {
+  test('returns false when window.api is unavailable', async () => {
+    const result = await hasTutorialBeenSeen('my-game');
+    expect(result).toBe(false);
+  });
+
+  test('returns false when tutorials key is absent', async () => {
+    const { mock } = buildApiMock({ playerId: 'default', games: {} });
+    globalThis.window.api = { invoke: mock };
+
+    const result = await hasTutorialBeenSeen('my-game');
+    expect(result).toBe(false);
+  });
+
+  test('returns false when game entry is absent from tutorials', async () => {
+    const { mock } = buildApiMock({
+      playerId: 'default', games: {}, tutorials: { 'other-game': true },
+    });
+    globalThis.window.api = { invoke: mock };
+
+    const result = await hasTutorialBeenSeen('my-game');
+    expect(result).toBe(false);
+  });
+
+  test('returns true when game entry is present in tutorials', async () => {
+    const { mock } = buildApiMock({
+      playerId: 'default', games: {}, tutorials: { 'my-game': true },
+    });
+    globalThis.window.api = { invoke: mock };
+
+    const result = await hasTutorialBeenSeen('my-game');
+    expect(result).toBe(true);
+  });
+
+  test('returns false when progress:load rejects (safe fallback)', async () => {
+    globalThis.window.api = {
+      invoke: jest.fn().mockRejectedValue(new Error('IPC error')),
+    };
+
+    const result = await hasTutorialBeenSeen('my-game');
+    expect(result).toBe(false);
+  });
+});
+
+// ── markTutorialSeen ──────────────────────────────────────────────────────────
+
+describe('markTutorialSeen', () => {
+  test('does nothing when window.api is unavailable', async () => {
+    await expect(markTutorialSeen('my-game')).resolves.toBeUndefined();
+  });
+
+  test('calls progress:save with tutorials key set to true', async () => {
+    const { mock, saved } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    await markTutorialSeen('my-game');
+
+    expect(mock).toHaveBeenCalledWith('progress:save', expect.objectContaining({
+      playerId: 'default',
+    }));
+    expect(saved.tutorials['my-game']).toBe(true);
+  });
+
+  test('preserves other tutorial flags when setting a new one', async () => {
+    const { mock, saved } = buildApiMock({
+      playerId: 'default',
+      games: {},
+      tutorials: { 'other-game': true },
+    });
+    globalThis.window.api = { invoke: mock };
+
+    await markTutorialSeen('my-game');
+
+    expect(saved.tutorials['other-game']).toBe(true);
+    expect(saved.tutorials['my-game']).toBe(true);
+  });
+
+  test('does not throw when progress:save rejects', async () => {
+    const loadResult = { playerId: 'default', games: {}, tutorials: {} };
+    globalThis.window.api = {
+      invoke: jest.fn((channel) => {
+        if (channel === 'progress:load') return Promise.resolve(loadResult);
+        return Promise.reject(new Error('save error'));
+      }),
+    };
+
+    await expect(markTutorialSeen('my-game')).resolves.toBeUndefined();
+  });
+});
+
+// ── createTutorialOverlay ─────────────────────────────────────────────────────
+
+describe('createTutorialOverlay', () => {
+  test('throws when steps array is empty', () => {
+    expect(() => createTutorialOverlay([])).toThrow();
+  });
+
+  test('throws when steps is null or undefined', () => {
+    expect(() => createTutorialOverlay(null)).toThrow();
+    expect(() => createTutorialOverlay(undefined)).toThrow();
+  });
+
+  test('returns an element with class tutorial-overlay', () => {
+    const el = createTutorialOverlay(SAMPLE_STEPS);
+    expect(el.classList.contains('tutorial-overlay')).toBe(true);
+  });
+
+  test('has role="dialog" and aria-modal="true"', () => {
+    const el = createTutorialOverlay(SAMPLE_STEPS);
+    expect(el.getAttribute('role')).toBe('dialog');
+    expect(el.getAttribute('aria-modal')).toBe('true');
+  });
+
+  test('contains prev, next, and skip buttons', () => {
+    const el = createTutorialOverlay(SAMPLE_STEPS);
+    expect(el.querySelector('#tutorial-overlay-prev')).not.toBeNull();
+    expect(el.querySelector('#tutorial-overlay-next')).not.toBeNull();
+    expect(el.querySelector('#tutorial-overlay-skip')).not.toBeNull();
+  });
+});
+
+// ── renderTutorialStep ────────────────────────────────────────────────────────
+
+describe('renderTutorialStep', () => {
+  test('shows step 1 of N in the indicator', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 0);
+    const indicator = overlay.querySelector('.tutorial-overlay__step-indicator');
+    expect(indicator.textContent).toBe('Step 1 of 3');
+  });
+
+  test('shows step title in the heading', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 0);
+    const title = overlay.querySelector('.tutorial-overlay__title');
+    expect(title.textContent).toBe('Step One');
+  });
+
+  test('renders step content as innerHTML', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 1);
+    const content = overlay.querySelector('.tutorial-overlay__content');
+    expect(content.innerHTML).toBe('<p>Second step content.</p>');
+  });
+
+  test('prev button is hidden on first step', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 0);
+    const prev = overlay.querySelector('#tutorial-overlay-prev');
+    expect(prev.hidden).toBe(true);
+    expect(prev.disabled).toBe(true);
+  });
+
+  test('prev button is visible on non-first steps', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 1);
+    const prev = overlay.querySelector('#tutorial-overlay-prev');
+    expect(prev.hidden).toBe(false);
+    expect(prev.disabled).toBe(false);
+  });
+
+  test('next button text is "Next" on intermediate steps', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 0);
+    const next = overlay.querySelector('#tutorial-overlay-next');
+    expect(next.textContent).toBe('Next');
+  });
+
+  test('next button text is "Got it!" on last step', () => {
+    const overlay = createTutorialOverlay(SAMPLE_STEPS);
+    renderTutorialStep(overlay, SAMPLE_STEPS, 2);
+    const next = overlay.querySelector('#tutorial-overlay-next');
+    expect(next.textContent).toBe('Got it!');
+  });
+});
+
+// ── showTutorial ──────────────────────────────────────────────────────────────
+
+describe('showTutorial', () => {
+  test('appends overlay to the container', () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    showTutorial('my-game', SAMPLE_STEPS, container);
+    expect(container.querySelector('.tutorial-overlay')).not.toBeNull();
+  });
+
+  test('returns the overlay element', () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    expect(overlay.classList.contains('tutorial-overlay')).toBe(true);
+  });
+
+  test('advances to step 2 when Next is clicked', () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    overlay.querySelector('#tutorial-overlay-next').click();
+
+    const indicator = overlay.querySelector('.tutorial-overlay__step-indicator');
+    expect(indicator.textContent).toBe('Step 2 of 3');
+  });
+
+  test('goes back to step 1 when Previous is clicked after advancing', () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    overlay.querySelector('#tutorial-overlay-next').click(); // step 2
+    overlay.querySelector('#tutorial-overlay-prev').click(); // back to step 1
+
+    const indicator = overlay.querySelector('.tutorial-overlay__step-indicator');
+    expect(indicator.textContent).toBe('Step 1 of 3');
+  });
+
+  test('removes overlay when Got it! is clicked on last step', async () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    // Navigate to last step
+    overlay.querySelector('#tutorial-overlay-next').click();
+    overlay.querySelector('#tutorial-overlay-next').click();
+
+    // Click finish
+    overlay.querySelector('#tutorial-overlay-next').click();
+
+    // Allow async markTutorialSeen to run
+    await new Promise(process.nextTick);
+
+    expect(container.querySelector('.tutorial-overlay')).toBeNull();
+  });
+
+  test('calls onComplete after finishing', async () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+    const onComplete = jest.fn();
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container, onComplete);
+    overlay.querySelector('#tutorial-overlay-next').click();
+    overlay.querySelector('#tutorial-overlay-next').click();
+    overlay.querySelector('#tutorial-overlay-next').click();
+
+    await new Promise(process.nextTick);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  test('removes overlay when Skip Tutorial is clicked', async () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    overlay.querySelector('#tutorial-overlay-skip').click();
+
+    await new Promise(process.nextTick);
+
+    expect(container.querySelector('.tutorial-overlay')).toBeNull();
+  });
+
+  test('calls onComplete when tutorial is skipped', async () => {
+    const container = makeContainer();
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+    const onComplete = jest.fn();
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container, onComplete);
+    overlay.querySelector('#tutorial-overlay-skip').click();
+
+    await new Promise(process.nextTick);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  test('marks tutorial as seen after finishing', async () => {
+    const { mock, saved } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+    const container = makeContainer();
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    overlay.querySelector('#tutorial-overlay-next').click();
+    overlay.querySelector('#tutorial-overlay-next').click();
+    overlay.querySelector('#tutorial-overlay-next').click();
+
+    await new Promise(process.nextTick);
+    expect(saved.tutorials['my-game']).toBe(true);
+  });
+
+  test('marks tutorial as seen after skipping', async () => {
+    const { mock, saved } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+    const container = makeContainer();
+
+    const overlay = showTutorial('my-game', SAMPLE_STEPS, container);
+    overlay.querySelector('#tutorial-overlay-skip').click();
+
+    await new Promise(process.nextTick);
+    expect(saved.tutorials['my-game']).toBe(true);
+  });
+});
+
+// ── showTutorialIfNeeded ──────────────────────────────────────────────────────
+
+describe('showTutorialIfNeeded', () => {
+  test('shows overlay when tutorial has not been seen', async () => {
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+    const container = makeContainer();
+
+    const overlay = await showTutorialIfNeeded('new-game', SAMPLE_STEPS, container);
+    expect(overlay).not.toBeNull();
+    expect(container.querySelector('.tutorial-overlay')).not.toBeNull();
+  });
+
+  test('returns null and calls onComplete when tutorial already seen', async () => {
+    const { mock } = buildApiMock({
+      playerId: 'default',
+      games: {},
+      tutorials: { 'seen-game': true },
+    });
+    globalThis.window.api = { invoke: mock };
+    const container = makeContainer();
+    const onComplete = jest.fn();
+
+    const overlay = await showTutorialIfNeeded('seen-game', SAMPLE_STEPS, container, onComplete);
+
+    expect(overlay).toBeNull();
+    expect(container.querySelector('.tutorial-overlay')).toBeNull();
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls onComplete with no arguments when skipping already-seen tutorial', async () => {
+    const { mock } = buildApiMock({
+      playerId: 'default',
+      games: {},
+      tutorials: { 'seen-game': true },
+    });
+    globalThis.window.api = { invoke: mock };
+    const container = makeContainer();
+    const onComplete = jest.fn();
+
+    await showTutorialIfNeeded('seen-game', SAMPLE_STEPS, container, onComplete);
+    expect(onComplete).toHaveBeenCalledWith();
+  });
+
+  test('does not throw when called without onComplete and tutorial is completed', async () => {
+    const { mock } = buildApiMock();
+    globalThis.window.api = { invoke: mock };
+    const container = makeContainer();
+
+    // No onComplete provided — the default () => {} must be invoked without error
+    // when the tutorial is finished (skip is clicked).
+    const overlay = await showTutorialIfNeeded('no-callback-game', SAMPLE_STEPS, container);
+    expect(overlay).not.toBeNull();
+
+    const skipBtn = overlay.querySelector('#tutorial-overlay-skip');
+    expect(skipBtn).not.toBeNull();
+    skipBtn.click();
+    await Promise.resolve();
+  });
+});
diff --git a/app/components/tutorialService.js b/app/components/tutorialService.js
new file mode 100644
index 0000000..66d8a40
--- /dev/null
+++ b/app/components/tutorialService.js
@@ -0,0 +1,290 @@
+/**
+ * tutorialService.js — Reusable tutorial framework for BrainSpeedExercises.
+ *
+ * Provides a shared mechanism to:
+ *   1. Track whether a player has seen a game's tutorial (persisted in progress data).
+ *   2. Render a multi-step tutorial overlay inside any game container.
+ *
+ * All persistence calls go through the window.api IPC bridge; never import
+ * Electron APIs directly in this module.
+ *
+ * Typical usage inside a game plugin's init():
+ * ```js
+ * import { showTutorialIfNeeded } from '../../components/tutorialService.js';
+ *
+ * async function init(gameContainer) {
+ *   // ... other init work ...
+ *   await showTutorialIfNeeded('my-game-id', TUTORIAL_STEPS, gameContainer, () => {
+ *     start();
+ *   });
+ * }
+ * ```
+ *
+ * @file Shared tutorial overlay service.
+ */
+
+import { logger } from './logService.js';
+
+/** Default player ID used throughout the application. */
+const DEFAULT_PLAYER_ID = 'default';
+
+/**
+ * @typedef {object} TutorialStep
+ * @property {string} title   - Heading for this step.
+ * @property {string} content - Body text (may contain HTML).
+ */
+
+// ── Persistence helpers ───────────────────────────────────────────────────────
+
+/**
+ * Load the full progress record for the default player.
+ * Returns a safe fallback on any error.
+ *
+ * @returns {Promise<object>} Raw progress data from IPC, or a minimal fallback object.
+ */
+async function _loadProgress() {
+  const fallback = { playerId: DEFAULT_PLAYER_ID, games: {}, tutorials: {} };
+  if (typeof window === 'undefined' || !window.api) return fallback;
+  try {
+    return await window.api.invoke(
+      'progress:load',
+      { playerId: DEFAULT_PLAYER_ID },
+    ) || fallback;
+  } catch (err) {
+    logger.warn('tutorialService: failed to load progress', err);
+    return fallback;
+  }
+}
+
+/**
+ * Save updated progress data via IPC.
+ *
+ * @param {object} data - Full progress object to persist.
+ * @returns {Promise<void>}
+ */
+async function _saveProgress(data) {
+  if (typeof window === 'undefined' || !window.api) return;
+  try {
+    await window.api.invoke('progress:save', { playerId: DEFAULT_PLAYER_ID, data });
+  } catch (err) {
+    logger.warn('tutorialService: failed to save progress', err);
+  }
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Check whether the tutorial for the given game has already been seen.
+ *
+ * @param {string} gameId - The game ID matching the manifest.json `id` field.
+ * @returns {Promise<boolean>} `true` if the tutorial has been seen, `false` otherwise.
+ */
+export async function hasTutorialBeenSeen(gameId) {
+  const progress = await _loadProgress();
+  return !!(progress.tutorials && progress.tutorials[gameId]);
+}
+
+/**
+ * Mark the tutorial for the given game as seen, persisting the flag to disk.
+ *
+ * @param {string} gameId - The game ID matching the manifest.json `id` field.
+ * @returns {Promise<void>}
+ */
+export async function markTutorialSeen(gameId) {
+  const progress = await _loadProgress();
+  const updated = {
+    ...progress,
+    tutorials: {
+      ...(progress.tutorials || {}),
+      [gameId]: true,
+    },
+  };
+  await _saveProgress(updated);
+}
+
+// ── DOM helpers ───────────────────────────────────────────────────────────────
+
+/**
+ * Build and return the tutorial overlay DOM element.
+ *
+ * The overlay is a modal dialog with:
+ *   - A step indicator (e.g. "Step 1 of 3").
+ *   - A heading and body for the current step.
+ *   - "Previous" / "Next" navigation buttons.
+ *   - A "Got it!" / "Finish" button on the last step.
+ *   - A "Skip Tutorial" link.
+ *
+ * The element is **not** appended to the DOM by this function; call
+ * {@link showTutorial} to insert and display it.
+ *
+ *
+ * @warning The `content` field of each step is inserted as `innerHTML`.
+ *   It must **never** include user-provided data, only trusted static strings
+ *   authored by the game plugin developer. Interpolating user input into step
+ *   content would introduce a cross-site scripting (XSS) vulnerability.
+ *
+ * @param {TutorialStep[]} steps - Ordered list of tutorial steps (minimum 1).
+ * @returns {HTMLElement} The root `.tutorial-overlay` element.
+ * @throws {Error} If `steps` is empty.
+ */
+export function createTutorialOverlay(steps) {
+  if (!steps || steps.length === 0) {
+    throw new Error('tutorialService: steps array must not be empty.');
+  }
+
+  const overlay = document.createElement('div');
+  overlay.className = 'tutorial-overlay';
+  overlay.setAttribute('role', 'dialog');
+  overlay.setAttribute('aria-modal', 'true');
+  overlay.setAttribute('aria-labelledby', 'tutorial-overlay-title');
+
+  overlay.innerHTML = `
+    <div class="tutorial-overlay__backdrop"></div>
+    <div class="tutorial-overlay__panel">
+      <p class="tutorial-overlay__step-indicator" aria-live="polite"></p>
+      <h2 class="tutorial-overlay__title" id="tutorial-overlay-title"></h2>
+      <div class="tutorial-overlay__content" aria-live="polite"></div>
+      <div class="tutorial-overlay__actions" role="group" aria-label="Tutorial navigation">
+        <button type="button" class="tutorial-overlay__btn tutorial-overlay__btn--secondary"
+          id="tutorial-overlay-prev">
+          Previous
+        </button>
+        <button type="button" class="tutorial-overlay__btn tutorial-overlay__btn--primary"
+          id="tutorial-overlay-next">
+          Next
+        </button>
+      </div>
+      <button type="button" class="tutorial-overlay__skip"
+        id="tutorial-overlay-skip">
+        Skip Tutorial
+      </button>
+    </div>
+  `;
+
+  return overlay;
+}
+
+/**
+ * Update the visible content of an existing overlay element for the given step index.
+ *
+ * @param {HTMLElement}     overlay   - The root `.tutorial-overlay` element.
+ * @param {TutorialStep[]}  steps     - Full ordered list of tutorial steps.
+ * @param {number}          stepIndex - Zero-based index of the step to display.
+ * @returns {void}
+ */
+export function renderTutorialStep(overlay, steps, stepIndex) {
+  const total = steps.length;
+  const step = steps[stepIndex];
+  const isFirst = stepIndex === 0;
+  const isLast = stepIndex === total - 1;
+
+  const indicatorEl = overlay.querySelector('.tutorial-overlay__step-indicator');
+  const titleEl = overlay.querySelector('.tutorial-overlay__title');
+  const contentEl = overlay.querySelector('.tutorial-overlay__content');
+  const prevBtn = overlay.querySelector('#tutorial-overlay-prev');
+  const nextBtn = overlay.querySelector('#tutorial-overlay-next');
+
+  if (indicatorEl) indicatorEl.textContent = `Step ${stepIndex + 1} of ${total}`;
+  if (titleEl) titleEl.textContent = step.title;
+  if (contentEl) contentEl.innerHTML = step.content;
+
+  if (prevBtn) {
+    prevBtn.hidden = isFirst;
+    prevBtn.disabled = isFirst;
+  }
+
+  if (nextBtn) {
+    nextBtn.textContent = isLast ? 'Got it!' : 'Next';
+    nextBtn.setAttribute(
+      'aria-label',
+      isLast ? 'Finish tutorial' : `Go to step ${stepIndex + 2} of ${total}`,
+    );
+  }
+}
+
+/**
+ * Show a multi-step tutorial overlay inside `container`.
+ *
+ * Appends the overlay to the container, renders the first step, and sets up
+ * navigation. When the player completes or skips the tutorial:
+ *   1. The game tutorial is marked as seen via {@link markTutorialSeen}.
+ *   2. The overlay is removed from the DOM.
+ *   3. `onComplete` is called.
+ *
+ * @param {string}          gameId      - Game ID used to persist seen state.
+ * @param {TutorialStep[]}  steps       - Ordered list of tutorial steps.
+ * @param {HTMLElement}     container   - DOM element to append the overlay into.
+ * @param {Function}        [onComplete=()=>{}] - Callback invoked after the tutorial ends.
+ * @returns {HTMLElement} The overlay element (already appended to `container`).
+ */
+export function showTutorial(gameId, steps, container, onComplete = () => {}) {
+  const overlay = createTutorialOverlay(steps);
+  let currentStep = 0;
+
+  renderTutorialStep(overlay, steps, currentStep);
+  container.appendChild(overlay);
+
+  // Move focus into the overlay panel for keyboard accessibility.
+  const panel = overlay.querySelector('.tutorial-overlay__panel');
+  if (panel) {
+    panel.setAttribute('tabindex', '-1');
+    panel.focus();
+  }
+
+  /** Finish the tutorial: persist seen state, remove overlay, invoke callback. */
+  async function _finish() {
+    try {
+      await markTutorialSeen(gameId);
+    } finally {
+      overlay.remove();
+      onComplete();
+    }
+  }
+
+  overlay.querySelector('#tutorial-overlay-next').addEventListener('click', () => {
+    if (currentStep < steps.length - 1) {
+      currentStep += 1;
+      renderTutorialStep(overlay, steps, currentStep);
+    } else {
+      _finish();
+    }
+  });
+
+  overlay.querySelector('#tutorial-overlay-prev').addEventListener('click', () => {
+    if (currentStep > 0) {
+      currentStep -= 1;
+      renderTutorialStep(overlay, steps, currentStep);
+    }
+  });
+
+  overlay.querySelector('#tutorial-overlay-skip').addEventListener('click', () => {
+    _finish();
+  });
+
+  return overlay;
+}
+
+/**
+ * Show the tutorial overlay only if the player has not yet seen it.
+ *
+ * If the tutorial has already been seen, `onComplete` is called immediately
+ * and no overlay is created. This is the primary entry point for game plugins.
+ *
+ * @param {string}          gameId      - Game ID (must match manifest.json `id`).
+ * @param {TutorialStep[]}  steps       - Ordered list of tutorial steps.
+ * @param {HTMLElement}     container   - DOM element to append the overlay into.
+ * @param {Function}        [onComplete=()=>{}] - Callback invoked after the tutorial ends
+ *   (or immediately if already seen).
+ * @returns {Promise<HTMLElement|null>} The overlay element, or `null` if the
+ *   tutorial was skipped because it has already been seen.
+ */
+export async function showTutorialIfNeeded(
+  gameId, steps, container, onComplete = () => {},
+) {
+  const seen = await hasTutorialBeenSeen(gameId);
+  if (seen) {
+    onComplete();
+    return null;
+  }
+  return showTutorial(gameId, steps, container, onComplete);
+}
diff --git a/app/games/card-rat/images/tutorialScreenshot.png b/app/games/card-rat/images/tutorialScreenshot.png
new file mode 100644
index 0000000..73ac960
Binary files /dev/null and b/app/games/card-rat/images/tutorialScreenshot.png differ
diff --git a/app/games/card-rat/index.js b/app/games/card-rat/index.js
index 7bf5b33..102e48e 100644
--- a/app/games/card-rat/index.js
+++ b/app/games/card-rat/index.js
@@ -16,7 +16,9 @@ import {
 import { saveScore } from '../../components/scoreService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
 import { renderTrendChart } from '../../components/trendChartService.js';
+import { showTutorial, showTutorialIfNeeded } from '../../components/tutorialService.js';
 import { getDeckBackImagePath, getJokerImagePath, getStandardCardSpriteStyle } from './cardSvg.js';
+import { getTutorialSteps } from './tutorial/tutorial.js';
 
 /** Human-readable plugin name. */
 const name = 'Card Rat';
@@ -39,6 +41,9 @@ let _endPanelEl = null;
 /** @type {HTMLButtonElement|null} */
 let _startBtn = null;
 
+/** @type {HTMLButtonElement|null} */
+let _replayTutorialBtn = null;
+
 /** @type {HTMLButtonElement|null} */
 let _stopBtn = null;
 
@@ -123,6 +128,12 @@ let _dealTimer = null;
  */
 let _isGlobalKeyListenerAttached = false;
 
+/**
+ * Whether a tutorial launch call is currently in flight.
+ * @type {boolean}
+ */
+let _isTutorialLaunchPending = false;
+
 /**
  * Apply a card image URL to a card element.
  *
@@ -358,6 +369,15 @@ export function showEndPanel(result) {
   if (_finalDeckPassesEl) _finalDeckPassesEl.textContent = String(result.deckPasses);
 }
 
+/**
+ * Return whether a tutorial overlay is currently visible.
+ *
+ * @returns {boolean}
+ */
+function isTutorialOpen() {
+  return Boolean(_container && _container.querySelector('.tutorial-overlay'));
+}
+
 /**
  * Initialize plugin DOM references and event listeners.
  *
@@ -372,6 +392,7 @@ function init(gameContainer) {
   _endPanelEl = _container.querySelector('#cr-end-panel');
 
   _startBtn = _container.querySelector('#cr-start-btn');
+  _replayTutorialBtn = _container.querySelector('#cr-replay-tutorial-btn');
   _stopBtn = _container.querySelector('#cr-stop-btn');
   _playAgainBtn = _container.querySelector('#cr-play-again-btn');
   _returnBtn = _container.querySelector('#cr-return-btn');
@@ -406,6 +427,7 @@ function init(gameContainer) {
   updateStats();
 
   if (_startBtn) _startBtn.addEventListener('click', start);
+  if (_replayTutorialBtn) _replayTutorialBtn.addEventListener('click', replayTutorial);
   if (_stopBtn) _stopBtn.addEventListener('click', stop);
   if (_playAgainBtn) _playAgainBtn.addEventListener('click', start);
   if (_returnBtn) _returnBtn.addEventListener('click', returnToMainMenu);
@@ -418,9 +440,9 @@ function init(gameContainer) {
 }
 
 /**
- * Start the Card Rat game.
+ * Start the Card Rat game session immediately (without tutorial gating).
  */
-function start() {
+function beginGameSession() {
   clearDealTimer();
   detachGlobalKeyListener();
 
@@ -451,6 +473,37 @@ function start() {
   beginDealLoop();
 }
 
+/**
+ * Start the Card Rat game, showing the tutorial if needed.
+ *
+ * @returns {Promise<void>}
+ */
+async function start() {
+  if (!_container || _isTutorialLaunchPending || isTutorialOpen()) return;
+
+  _isTutorialLaunchPending = true;
+  try {
+    const tutorialSteps = await getTutorialSteps();
+    await showTutorialIfNeeded(GAME_ID, tutorialSteps, _container, beginGameSession);
+  } finally {
+    _isTutorialLaunchPending = false;
+  }
+}
+
+/**
+ * Replay the tutorial on demand, then start a fresh session.
+ */
+async function replayTutorial() {
+  if (!_container || _isTutorialLaunchPending || isTutorialOpen()) return;
+  _isTutorialLaunchPending = true;
+  try {
+    const tutorialSteps = await getTutorialSteps();
+    showTutorial(GAME_ID, tutorialSteps, _container, beginGameSession);
+  } finally {
+    _isTutorialLaunchPending = false;
+  }
+}
+
 /**
  * Stop the game, persist score, and show summary.
  *
diff --git a/app/games/card-rat/interface.html b/app/games/card-rat/interface.html
index c755375..5125f1f 100644
--- a/app/games/card-rat/interface.html
+++ b/app/games/card-rat/interface.html
@@ -14,9 +14,14 @@ <h3>How to Play</h3>
       <li>You must react before the next card is dealt.</li>
       <li>Every streak of 3 correct slaps speeds up future deals.</li>
     </ul>
-    <button id="cr-start-btn" type="button" class="game-btn game-btn--primary">
-      Start Game
-    </button>
+    <div class="card-rat__instruction-actions">
+      <button id="cr-start-btn" type="button" class="game-btn game-btn--primary">
+        Start Game
+      </button>
+      <button id="cr-replay-tutorial-btn" type="button" class="game-btn game-btn--secondary">
+        Replay Tutorial
+      </button>
+    </div>
   </div>
 
   <div id="cr-game-area" class="card-rat__game-area" hidden>
diff --git a/app/games/card-rat/style.css b/app/games/card-rat/style.css
index 5fff98a..7a5c2fe 100644
--- a/app/games/card-rat/style.css
+++ b/app/games/card-rat/style.css
@@ -2,6 +2,9 @@
 
 .card-rat {
   --card-rat-card-gap: 0.65rem;
+  --card-rat-tutorial-highlight-stats: #1976d2;
+  --card-rat-tutorial-highlight-cards: #2e7d32;
+  --card-rat-tutorial-highlight-controls: #ed6c02;
 
   display: flex;
   flex-direction: column;
@@ -15,6 +18,13 @@
   margin: 0;
 }
 
+.card-rat__instruction-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 .card-rat__game-area {
   display: flex;
   flex-direction: column;
@@ -67,7 +77,7 @@
   transform: rotate(-8deg);
 }
 
-@media (width <= 720px) {
+@media (width <=720px) {
   .card-rat__card {
     width: min(50vw, 158px);
   }
@@ -97,3 +107,50 @@
   font-size: 0.95rem;
   font-weight: 600;
 }
+
+.card-rat__tutorial-figure {
+  margin: 0.75rem 0 0;
+}
+
+.card-rat__tutorial-image-wrap {
+  position: relative;
+}
+
+.card-rat__tutorial-image {
+  display: block;
+  width: 100%;
+  max-width: 540px;
+  border-radius: 12px;
+  border: 1px solid var(--border-soft);
+}
+
+.card-rat__tutorial-caption {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.card-rat__tutorial-highlight {
+  position: absolute;
+  border-radius: 10px;
+  border: 4px solid;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.card-rat__tutorial-highlight--stats {
+  left: 7.5%;
+  top: 9%;
+  width: 84.5%;
+  height: 8%;
+  border-color: var(--card-rat-tutorial-highlight-stats, #1976d2);
+  background: rgb(25 118 210 / 16%);
+}
+
+.card-rat__tutorial-highlight--controls {
+  left: 29%;
+  top: 55%;
+  width: 40%;
+  height: 9%;
+  border-color: var(--card-rat-tutorial-highlight-controls, #ed6c02);
+  background: rgb(237 108 2 / 16%);
+}
\ No newline at end of file
diff --git a/app/games/card-rat/tests/index.test.js b/app/games/card-rat/tests/index.test.js
index 365f932..bb146c7 100644
--- a/app/games/card-rat/tests/index.test.js
+++ b/app/games/card-rat/tests/index.test.js
@@ -34,6 +34,24 @@ jest.unstable_mockModule('../../../components/trendChartService.js', () => ({
   renderTrendChart: jest.fn(),
 }));
 
+jest.unstable_mockModule('../../../components/tutorialService.js', () => ({
+  showTutorial: jest.fn((_gameId, _steps, _container, onComplete) => {
+    if (typeof onComplete === 'function') onComplete();
+    return document.createElement('div');
+  }),
+  showTutorialIfNeeded: jest.fn(async (_gameId, _steps, _container, onComplete) => {
+    if (typeof onComplete === 'function') onComplete();
+    return null;
+  }),
+}));
+
+jest.unstable_mockModule('../tutorial/tutorial.js', () => ({
+  getTutorialSteps: jest.fn(async () => [
+    { title: 'Welcome to Card Rat', content: '<p>Welcome</p>' },
+    { title: 'Find the Main Play Area', content: '<p>Layout</p>' },
+  ]),
+}));
+
 jest.unstable_mockModule('../game.js', () => ({
   RANKS: ['A', '2', '3'],
   SUITS: ['hearts', 'spades'],
@@ -107,6 +125,7 @@ function buildContainer() {
     <div id="cr-game-area" hidden></div>
     <div id="cr-end-panel" hidden></div>
     <button id="cr-start-btn"></button>
+    <button id="cr-replay-tutorial-btn"></button>
     <button id="cr-stop-btn"></button>
     <button id="cr-play-again-btn"></button>
     <button id="cr-return-btn"></button>
@@ -213,10 +232,10 @@ describe('init', () => {
 });
 
 describe('start', () => {
-  test('shows game area and hides instructions', () => {
+  test('shows game area and hides instructions', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     expect(container.querySelector('#cr-game-area').hidden).toBe(false);
     expect(container.querySelector('#cr-instructions').hidden).toBe(true);
@@ -224,28 +243,28 @@ describe('start', () => {
     expect(gameMock.startGame).toHaveBeenCalled();
   });
 
-  test('beginDealLoop schedules next deal', () => {
+  test('beginDealLoop schedules next deal', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
     expect(gameMock.dealNextCard).toHaveBeenCalled();
     expect(container.querySelector('#cr-feedback').textContent).toContain('sandwich');
   });
 
-  test('beginDealLoop plays card flick sound on each deal', () => {
+  test('beginDealLoop plays card flick sound on each deal', async () => {
     const container = buildContainer();
     plugin.init(container);
     audioMock.playCardFlickSound.mockClear();
-    plugin.start();
+    await plugin.start();
     expect(audioMock.playCardFlickSound).toHaveBeenCalled();
   });
 
-  test('beginDealLoop skips card sound when card sound toggle is off', () => {
+  test('beginDealLoop skips card sound when card sound toggle is off', async () => {
     const container = buildContainer();
     plugin.init(container);
     container.querySelector('#cr-card-sound-toggle').checked = false;
     audioMock.playCardFlickSound.mockClear();
-    plugin.start();
+    await plugin.start();
     expect(audioMock.playCardFlickSound).not.toHaveBeenCalled();
   });
 
@@ -267,10 +286,10 @@ describe('start', () => {
     expect(audioMock.playFailureSound).toHaveBeenCalled();
   });
 
-  test('Space key on document reacts without card focus', () => {
+  test('Space key on document reacts without card focus', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
     document.dispatchEvent(event);
@@ -278,10 +297,10 @@ describe('start', () => {
     expect(gameMock.respondToCurrentCard).toHaveBeenCalled();
   });
 
-  test('deal loop timer callback continues the loop', () => {
+  test('deal loop timer callback continues the loop', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     gameMock.dealNextCard.mockClear();
     jest.advanceTimersByTime(1200);
@@ -291,10 +310,10 @@ describe('start', () => {
 });
 
 describe('reaction handlers', () => {
-  test('handleReaction plays success sound on hit', () => {
+  test('handleReaction plays success sound on hit', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     gameMock.respondToCurrentCard.mockReturnValueOnce('hit');
     handleReaction();
@@ -302,10 +321,10 @@ describe('reaction handlers', () => {
     expect(audioMock.playSuccessSound).toHaveBeenCalled();
   });
 
-  test('handleReaction plays failure sound on false alarm', () => {
+  test('handleReaction plays failure sound on false alarm', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     gameMock.respondToCurrentCard.mockReturnValueOnce('false-alarm');
     handleReaction();
@@ -319,30 +338,30 @@ describe('reaction handlers', () => {
     expect(event.preventDefault).not.toHaveBeenCalled();
   });
 
-  test('handleKeyDown triggers on space key', () => {
+  test('handleKeyDown triggers on space key', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     const event = { key: ' ', preventDefault: jest.fn() };
     handleKeyDown(event);
     expect(event.preventDefault).toHaveBeenCalled();
   });
 
-  test('handleKeyDown accepts legacy "Space" key value', () => {
+  test('handleKeyDown accepts legacy "Space" key value', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     const event = { key: 'Space', preventDefault: jest.fn() };
     handleKeyDown(event);
     expect(event.preventDefault).toHaveBeenCalled();
   });
 
-  test('handleKeyDown accepts legacy "Spacebar" key value', () => {
+  test('handleKeyDown accepts legacy "Spacebar" key value', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     const event = { key: 'Spacebar', preventDefault: jest.fn() };
     handleKeyDown(event);
@@ -401,7 +420,7 @@ describe('stop and reset', () => {
   test('stop returns game result and shows end panel', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     const result = plugin.stop();
     await Promise.resolve();
@@ -426,10 +445,10 @@ describe('stop and reset', () => {
     expect(result).toMatchObject({ score: 3, triggerHits: 2 });
   });
 
-  test('reset returns to instructions panel', () => {
+  test('reset returns to instructions panel', async () => {
     const container = buildContainer();
     plugin.init(container);
-    plugin.start();
+    await plugin.start();
 
     plugin.reset();
 
diff --git a/app/games/card-rat/tests/tutorial.test.js b/app/games/card-rat/tests/tutorial.test.js
new file mode 100644
index 0000000..db4ed5c
--- /dev/null
+++ b/app/games/card-rat/tests/tutorial.test.js
@@ -0,0 +1,221 @@
+import {
+  describe,
+  test,
+  expect,
+  beforeEach,
+  afterEach,
+  jest,
+} from '@jest/globals';
+
+jest.unstable_mockModule('../../../components/timerService.js', () => ({
+  startTimer: jest.fn(),
+  stopTimer: jest.fn(() => 1000),
+  resetTimer: jest.fn(),
+  formatDuration: jest.fn(() => '00:01'),
+}));
+
+jest.unstable_mockModule('../../../components/scoreService.js', () => ({
+  saveScore: jest.fn(() => Promise.resolve({})),
+}));
+
+jest.unstable_mockModule('../../../components/gameUtils.js', () => ({
+  returnToMainMenu: jest.fn(),
+}));
+
+jest.unstable_mockModule('../../../components/audioService.js', () => ({
+  playSuccessSound: jest.fn(),
+  playFailureSound: jest.fn(),
+  playCardFlickSound: jest.fn(),
+}));
+
+jest.unstable_mockModule('../../../components/trendChartService.js', () => ({
+  renderTrendChart: jest.fn(),
+}));
+
+jest.unstable_mockModule('../../../components/tutorialService.js', () => ({
+  showTutorial: jest.fn((_gameId, _steps, _container, onComplete) => {
+    if (typeof onComplete === 'function') onComplete();
+    return document.createElement('div');
+  }),
+  showTutorialIfNeeded: jest.fn(async (_gameId, _steps, _container, onComplete) => {
+    if (typeof onComplete === 'function') onComplete();
+    return null;
+  }),
+}));
+
+jest.unstable_mockModule('../game.js', () => ({
+  RANKS: ['A', '2', '3'],
+  initGame: jest.fn(),
+  startGame: jest.fn(),
+  stopGame: jest.fn(() => ({
+    score: 3,
+    triggerHits: 2,
+    misses: 1,
+    falseAlarms: 1,
+    cardsShown: 10,
+    deckPasses: 0,
+    lowestDisplayTime: 900,
+    duration: 5000,
+  })),
+  dealNextCard: jest.fn(() => ({
+    card: { rank: 'A', suit: 'hearts', isJoker: false },
+    mustReact: false,
+    missedTrigger: false,
+    displayDurationMs: 1200,
+  })),
+  respondToCurrentCard: jest.fn(() => 'hit'),
+  getScore: jest.fn(() => 3),
+  getTriggerHits: jest.fn(() => 2),
+  getMisses: jest.fn(() => 1),
+  getFalseAlarms: jest.fn(() => 1),
+  getCardsShown: jest.fn(() => 10),
+  getDeckPasses: jest.fn(() => 0),
+  getDeckIndex: jest.fn(() => 1),
+  getDeckSize: jest.fn(() => 55),
+  getDisplayDurationMs: jest.fn(() => 900),
+  getLowestDisplayTimeMs: jest.fn(() => 900),
+  getSpeedHistory: jest.fn(() => [1200, 1100, 1000]),
+  isRunning: jest.fn(() => true),
+}));
+
+const tutorialServiceMock = await import('../../../components/tutorialService.js');
+const plugin = (await import('../index.js')).default;
+const tutorialModule = await import('../tutorial/tutorial.js');
+
+/**
+ * Build a minimal game container with tutorial action controls.
+ *
+ * @returns {HTMLElement}
+ */
+function buildContainer() {
+  const el = document.createElement('div');
+  el.innerHTML = `
+    <div id="cr-instructions"></div>
+    <div id="cr-game-area" hidden></div>
+    <div id="cr-end-panel" hidden></div>
+    <button id="cr-start-btn"></button>
+    <button id="cr-replay-tutorial-btn"></button>
+    <button id="cr-stop-btn"></button>
+    <button id="cr-play-again-btn"></button>
+    <button id="cr-return-btn"></button>
+    <button id="cr-reaction-zone"></button>
+    <input id="cr-card-sound-toggle" type="checkbox" checked>
+    <input id="cr-hint-toggle" type="checkbox" checked>
+    <div id="cr-deck-card"></div>
+    <div id="cr-card"></div>
+    <p id="cr-feedback"></p>
+    <strong id="cr-score">0</strong>
+    <strong id="cr-hits">0</strong>
+    <strong id="cr-misses">0</strong>
+    <strong id="cr-false-alarms">0</strong>
+    <strong id="cr-display-time">0</strong>
+    <strong id="cr-deck-progress">0 / 55</strong>
+    <strong id="cr-session-timer">00:00</strong>
+    <polyline id="cr-trend-line"></polyline>
+    <p id="cr-trend-empty"></p>
+    <strong id="cr-trend-latest"></strong>
+    <dd id="cr-final-score">0</dd>
+    <dd id="cr-final-hits">0</dd>
+    <dd id="cr-final-misses">0</dd>
+    <dd id="cr-final-false-alarms">0</dd>
+    <dd id="cr-final-speed">0 ms</dd>
+    <dd id="cr-final-deck-passes">0</dd>
+  `;
+  return el;
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  tutorialModule.clearTutorialMarkupCache();
+  global.fetch = jest.fn(async (path) => ({
+    ok: true,
+    text: async () => (path === './games/card-rat/tutorial/tutorial-screenshot-step.html'
+      ? `
+        <figure class="card-rat__tutorial-figure">
+          <img src="./games/card-rat/images/tutorialScreenshot.png" class="card-rat__tutorial-image">
+          <span class="card-rat__tutorial-highlight card-rat__tutorial-highlight--stats"></span>
+          <span class="card-rat__tutorial-highlight card-rat__tutorial-highlight--controls"></span>
+        </figure>
+      `
+      : '<p>mock step</p>'),
+  }));
+});
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  delete global.fetch;
+});
+
+describe('Card Rat tutorial content', () => {
+  test('loads screenshot step from dedicated HTML markup file', async () => {
+    const tutorialSteps = await tutorialModule.getTutorialSteps();
+    const screenshotStep = tutorialSteps.find(
+      (step) => step.title === 'Find the Main Play Area',
+    );
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      './games/card-rat/tutorial/tutorial-step-welcome.html');
+    expect(global.fetch).toHaveBeenCalledWith(
+      './games/card-rat/tutorial/tutorial-screenshot-step.html');
+    expect(global.fetch).toHaveBeenCalledWith(
+      './games/card-rat/tutorial/tutorial-step-when-to-slap.html');
+    expect(global.fetch).toHaveBeenCalledWith(
+      './games/card-rat/tutorial/tutorial-step-game-controls.html');
+    expect(global.fetch).toHaveBeenCalledWith(
+      './games/card-rat/tutorial/tutorial-step-how-to-score.html');
+    expect(tutorialSteps).toHaveLength(5);
+    expect(screenshotStep).toBeDefined();
+    expect(screenshotStep.content).toContain('tutorialScreenshot.png');
+    expect(screenshotStep.content).toContain('card-rat__tutorial-highlight--stats');
+    expect(screenshotStep.content).toContain('card-rat__tutorial-highlight--controls');
+  });
+});
+
+describe('Card Rat tutorial flow', () => {
+  test('start calls showTutorialIfNeeded before starting gameplay', async () => {
+    const container = buildContainer();
+    plugin.init(container);
+
+    await plugin.start();
+
+    expect(tutorialServiceMock.showTutorialIfNeeded).toHaveBeenCalledWith(
+      'card-rat',
+      expect.any(Array),
+      container,
+      expect.any(Function),
+    );
+    expect(container.querySelector('#cr-game-area').hidden).toBe(false);
+    expect(container.querySelector('#cr-instructions').hidden).toBe(true);
+  });
+
+  test('replay button calls showTutorial with current container', async () => {
+    const container = buildContainer();
+    plugin.init(container);
+
+    container.querySelector('#cr-replay-tutorial-btn').click();
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+
+    expect(tutorialServiceMock.showTutorial).toHaveBeenCalledWith(
+      'card-rat',
+      expect.any(Array),
+      container,
+      expect.any(Function),
+    );
+  });
+
+  test('replay button does nothing when tutorial overlay is already open', () => {
+    const container = buildContainer();
+    plugin.init(container);
+
+    const overlay = document.createElement('div');
+    overlay.className = 'tutorial-overlay';
+    container.appendChild(overlay);
+    tutorialServiceMock.showTutorial.mockClear();
+
+    container.querySelector('#cr-replay-tutorial-btn').click();
+
+    expect(tutorialServiceMock.showTutorial).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/games/card-rat/tutorial/tutorial-screenshot-step.html b/app/games/card-rat/tutorial/tutorial-screenshot-step.html
new file mode 100644
index 0000000..bf52505
--- /dev/null
+++ b/app/games/card-rat/tutorial/tutorial-screenshot-step.html
@@ -0,0 +1,14 @@
+<p>This is the main game interface. The cards will be automatically played. As you improve they will be shown faster.
+</p>
+<figure class="card-rat__tutorial-figure">
+  <div class="card-rat__tutorial-image-wrap">
+    <img src="./games/card-rat/images/tutorialScreenshot.png"
+      alt="Card Rat gameplay layout with score stats, card row, and controls." class="card-rat__tutorial-image">
+    <span class="card-rat__tutorial-highlight card-rat__tutorial-highlight--stats" aria-hidden="true"></span>
+    <span class="card-rat__tutorial-highlight card-rat__tutorial-highlight--controls" aria-hidden="true"></span>
+  </div>
+  <figcaption class="card-rat__tutorial-caption">
+    Live stats in blue<br>
+    Game controls in orange<br>
+  </figcaption>
+</figure>
\ No newline at end of file
diff --git a/app/games/card-rat/tutorial/tutorial-step-game-controls.html b/app/games/card-rat/tutorial/tutorial-step-game-controls.html
new file mode 100644
index 0000000..6d976fd
--- /dev/null
+++ b/app/games/card-rat/tutorial/tutorial-step-game-controls.html
@@ -0,0 +1,6 @@
+<p>There are three controls in the middle of the interface.</p>
+<ul>
+  <li>The End Game button stops play wherever you are.</li>
+  <li>Card Sound checkbox enables or disables the audio feedback.</li>
+  <li>Show hints shows text below the cards that reminds you when you need to slap.</li>
+</ul>
\ No newline at end of file
diff --git a/app/games/card-rat/tutorial/tutorial-step-how-to-score.html b/app/games/card-rat/tutorial/tutorial-step-how-to-score.html
new file mode 100644
index 0000000..29fa626
--- /dev/null
+++ b/app/games/card-rat/tutorial/tutorial-step-how-to-score.html
@@ -0,0 +1,5 @@
+<p>To "slap" press <kbd>Space</kbd> or click on the cards.</p>
+<p>
+  Correct slaps build streaks and speed up the deck.
+  Repeated false alarms (slapping when without the correct sequence) and misses slow the game down again.
+</p>
\ No newline at end of file
diff --git a/app/games/card-rat/tutorial/tutorial-step-welcome.html b/app/games/card-rat/tutorial/tutorial-step-welcome.html
new file mode 100644
index 0000000..ffe32a4
--- /dev/null
+++ b/app/games/card-rat/tutorial/tutorial-step-welcome.html
@@ -0,0 +1,2 @@
+<p>React quickly, but only slap when you see the correct sequence of cards. Your goal is to make the cards appear as
+  fast as possible.</p>
\ No newline at end of file
diff --git a/app/games/card-rat/tutorial/tutorial-step-when-to-slap.html b/app/games/card-rat/tutorial/tutorial-step-when-to-slap.html
new file mode 100644
index 0000000..d816901
--- /dev/null
+++ b/app/games/card-rat/tutorial/tutorial-step-when-to-slap.html
@@ -0,0 +1,6 @@
+<p>There are three valid sequences to slap on:</p>
+<ul>
+  <li>Pair: two cards in a row match.</li>
+  <li>Sandwich: one card between two matching ranks.</li>
+  <li>Joker: slap immediately.</li>
+</ul>
\ No newline at end of file
diff --git a/app/games/card-rat/tutorial/tutorial.js b/app/games/card-rat/tutorial/tutorial.js
new file mode 100644
index 0000000..288a97e
--- /dev/null
+++ b/app/games/card-rat/tutorial/tutorial.js
@@ -0,0 +1,101 @@
+/**
+ * tutorial.js — Card Rat tutorial step definitions.
+ *
+ * @file Card Rat tutorial content.
+ */
+
+import { logger } from '../../../components/logService.js';
+
+/**
+ * Ordered Card Rat tutorial step definitions.
+ * Each step stores only metadata and an external HTML content file path.
+ *
+ * @type {Array<{title: string, contentPath: string}>}
+ */
+const TUTORIAL_STEP_DEFINITIONS = [
+  {
+    title: 'Welcome to Card Rat',
+    contentPath: './games/card-rat/tutorial/tutorial-step-welcome.html',
+  },
+  {
+    title: 'Find the Main Play Area',
+    contentPath: './games/card-rat/tutorial/tutorial-screenshot-step.html',
+  },
+  {
+    title: 'How to Score',
+    contentPath: './games/card-rat/tutorial/tutorial-step-how-to-score.html',
+  },
+  {
+    title: 'When to Slap',
+    contentPath: './games/card-rat/tutorial/tutorial-step-when-to-slap.html',
+  },
+  {
+    title: 'Game Controls',
+    contentPath: './games/card-rat/tutorial/tutorial-step-game-controls.html',
+  },
+];
+
+/**
+ * Fallback content shown if a tutorial step file cannot be loaded.
+ * This intentionally uses plain text only (no HTML markup).
+ *
+ * @type {string}
+ */
+const FALLBACK_STEP_CONTENT = 'Tutorial content is temporarily unavailable.';
+
+/**
+ * Cached markup for tutorial step files.
+ *
+ * @type {Map<string, string>}
+ */
+let tutorialMarkupCache = new Map();
+
+/**
+ * Clear cached tutorial step markup.
+ *
+ * @returns {void}
+ */
+export function clearTutorialMarkupCache() {
+  tutorialMarkupCache = new Map();
+}
+
+/**
+ * Fetch tutorial step markup from a dedicated HTML file.
+ *
+ * @param {string} contentPath
+ * @returns {Promise<string>}
+ */
+async function loadStepMarkup(contentPath) {
+  if (tutorialMarkupCache.has(contentPath)) {
+    return tutorialMarkupCache.get(contentPath);
+  }
+
+  try {
+    const response = await fetch(contentPath);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    tutorialMarkupCache.set(contentPath, await response.text());
+  } catch (error) {
+    logger.warn(`Card Rat tutorial markup failed to load: ${contentPath}`, error);
+    tutorialMarkupCache.set(contentPath, FALLBACK_STEP_CONTENT);
+  }
+
+  return tutorialMarkupCache.get(contentPath);
+}
+
+/**
+ * Build Card Rat tutorial steps shown for first-time players and replay flow.
+ *
+ * @returns {Promise<Array<{title: string, content: string}>>}
+ */
+export async function getTutorialSteps() {
+  const steps = await Promise.all(
+    TUTORIAL_STEP_DEFINITIONS.map(async ({ title, contentPath }) => ({
+      title,
+      content: await loadStepMarkup(contentPath),
+    })),
+  );
+  return steps;
+}
diff --git a/app/styles/game-shared.css b/app/styles/game-shared.css
index 325abf8..8250b4c 100644
--- a/app/styles/game-shared.css
+++ b/app/styles/game-shared.css
@@ -207,3 +207,155 @@
   margin: 0.5rem 0 0;
   font-size: 0.875rem;
 }
+
+/* ── Tutorial overlay ────────────────────────────────────────────────────── */
+/*
+ * The tutorial overlay is a full-screen modal dialog rendered inside the game
+ * container. It is appended and removed dynamically by tutorialService.js.
+ *
+ * Structure (generated by createTutorialOverlay):
+ *
+ *   .tutorial-overlay              — full-screen wrapper (positions the backdrop + panel)
+ *     .tutorial-overlay__backdrop  — semi-transparent scrim
+ *     .tutorial-overlay__panel     — white card containing tutorial content
+ *       .tutorial-overlay__step-indicator — "Step N of M" counter
+ *       .tutorial-overlay__title          — step heading <h2>
+ *       .tutorial-overlay__content        — step body text / HTML
+ *       .tutorial-overlay__actions        — Prev / Next button row
+ *         .tutorial-overlay__btn.tutorial-overlay__btn--primary    — Next / Got it!
+ *         .tutorial-overlay__btn.tutorial-overlay__btn--secondary  — Previous
+ *       .tutorial-overlay__skip           — "Skip Tutorial" link-style button
+ */
+
+.tutorial-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tutorial-overlay__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.tutorial-overlay__panel {
+  position: relative;
+  z-index: 1;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  max-width: 480px;
+  width: calc(100% - 2rem);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+
+.tutorial-overlay__panel:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.tutorial-overlay__step-indicator {
+  margin: 0;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.tutorial-overlay__title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-heading);
+}
+
+.tutorial-overlay__content {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text-muted);
+}
+
+.tutorial-overlay__content p {
+  margin: 0 0 0.5rem;
+}
+
+.tutorial-overlay__content ul,
+.tutorial-overlay__content ol {
+  margin: 0 0 0.5rem 1.25rem;
+  padding: 0;
+}
+
+.tutorial-overlay__actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+/* Tutorial nav buttons reuse the same base shape as .game-btn */
+.tutorial-overlay__btn {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+
+.tutorial-overlay__btn:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+.tutorial-overlay__btn--primary {
+  background: var(--btn-primary-bg);
+  color: var(--bg-card);
+  border-color: var(--btn-primary-border);
+}
+
+.tutorial-overlay__btn--primary:hover {
+  background: var(--btn-primary-hover);
+}
+
+.tutorial-overlay__btn--secondary {
+  background: transparent;
+  color: var(--text-muted);
+  border-color: var(--border-color);
+}
+
+.tutorial-overlay__btn--secondary:hover {
+  background: var(--bg-subtle);
+}
+
+.tutorial-overlay__skip {
+  align-self: center;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.85rem;
+  color: var(--text-subtle);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color var(--transition-fast);
+}
+
+.tutorial-overlay__skip:hover {
+  color: var(--text-muted);
+}
+
+.tutorial-overlay__skip:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}