diff --git a/src/forest/reward.ts b/src/forest/reward.ts
new file mode 100644
index 0000000..745fcb1
--- /dev/null
+++ b/src/forest/reward.ts
@@ -0,0 +1,218 @@
+/**
+ * Reward module: Pre-generates forest element images during lessons
+ * and displays the reward screen after lesson completion.
+ *
+ * Strategy: Start image generation at lesson begin (pre-generation),
+ * show placeholder while awaiting, display result with companion comment.
+ */
+
+import { loadConfig } from "../api/config";
+import {
+ generateImage,
+ checkRateLimit,
+ incrementApiCall,
+} from "../api/gemini";
+import {
+ getStyleReference,
+ saveForestElement,
+ getForestElements,
+} from "../storage/db";
+import { getForestComment } from "../companion/companion";
+import { getRandomFallbackForestComment } from "../companion/fallbacks";
+import type { CompanionType, ForestElement } from "../types";
+
+// --- Element types for random selection ---
+
+const ELEMENT_TYPES = [
+ "Blume",
+ "Pilz",
+ "Schmetterling",
+ "Vogel",
+ "Reh",
+ "Eichhoernchen",
+ "Hase",
+ "Frosch",
+ "Igel",
+ "Marienkaefer",
+ "Libelle",
+ "Schnecke",
+];
+
+// --- Fallback images (static SVGs) ---
+
+const FALLBACK_SVGS = [
+ "/src/assets/fallback-images/blume.svg",
+ "/src/assets/fallback-images/pilz.svg",
+ "/src/assets/fallback-images/vogel.svg",
+ "/src/assets/fallback-images/schmetterling.svg",
+ "/src/assets/fallback-images/reh.svg",
+ "/src/assets/fallback-images/baum.svg",
+ "/src/assets/fallback-images/bach.svg",
+];
+
+async function getRandomFallbackImage(): Promise<{
+ blob: Blob;
+ description: string;
+}> {
+ const idx = Math.floor(Math.random() * FALLBACK_SVGS.length);
+ const path = FALLBACK_SVGS[idx]!;
+ const name = path.split("/").pop()!.replace(".svg", "");
+ try {
+ const res = await fetch(path);
+ const blob = await res.blob();
+ return { blob, description: name };
+ } catch {
+ // Ultimate fallback: empty SVG blob
+ const svg =
+ '
';
+ return {
+ blob: new Blob([svg], { type: "image/svg+xml" }),
+ description: "element",
+ };
+ }
+}
+
+// --- Pre-generation ---
+
+let pregenPromise: Promise<{
+ blob: Blob;
+ description: string;
+ prompt: string;
+}> | null = null;
+
+export function startPreGeneration(db: IDBDatabase): void {
+ pregenPromise = generateForestElement(db);
+}
+
+async function generateForestElement(db: IDBDatabase): Promise<{
+ blob: Blob;
+ description: string;
+ prompt: string;
+}> {
+ // Check rate limit
+ const canGenerate = await checkRateLimit(db, "image");
+ if (!canGenerate) {
+ const fallback = await getRandomFallbackImage();
+ return { ...fallback, prompt: "fallback" };
+ }
+
+ // Load config
+ const config = await loadConfig();
+ if (!config) {
+ const fallback = await getRandomFallbackImage();
+ return { ...fallback, prompt: "fallback" };
+ }
+
+ // Get style reference for visual consistency
+ const styleRef = await getStyleReference(db);
+ const referenceImages: Blob[] = [];
+ if (styleRef) {
+ referenceImages.push(styleRef.imageBlob);
+ }
+
+ // Pick random element type
+ const elementType =
+ ELEMENT_TYPES[Math.floor(Math.random() * ELEMENT_TYPES.length)]!;
+
+ // Build prompt
+ const prompt = `Kinderbuch-Illustration, Aquarell-Stil, ${elementType}, magischer Wald, warm, einladend, fuer Kinder, Pastellfarben, kein Text, einzelnes Element auf transparentem Hintergrund`;
+
+ // Generate image
+ const blob = await generateImage(prompt, referenceImages, config);
+ if (!blob) {
+ const fallback = await getRandomFallbackImage();
+ return { ...fallback, prompt };
+ }
+
+ // Track API usage
+ await incrementApiCall(db, "image");
+
+ return { blob, description: elementType, prompt };
+}
+
+// --- Reward screen ---
+
+export async function initRewardScreen(
+ db: IDBDatabase,
+ level: number,
+ characterType: CompanionType,
+ onContinue: () => void,
+ onBackToForest: () => void,
+): Promise
{
+ const imageArea = document.getElementById("reward-image-area")!;
+ const companionTextEl = document.getElementById("reward-companion-text")!;
+ const continueBtn = document.getElementById(
+ "reward-continue-btn",
+ ) as HTMLButtonElement;
+ const backBtn = document.getElementById(
+ "reward-back-btn",
+ ) as HTMLButtonElement;
+
+ // 1. Show placeholder immediately
+ imageArea.innerHTML = `
+
+
\uD83C\uDF43
+
\uD83C\uDF42
+
\uD83C\uDF43
+
Der Wald denkt nach...
+