Cyber Agents: Mission SicherNetz

1. 1Purpose: Establishes gameplay mechanics, user flow, and the technical blueprint for an educational browser game aimed at 10-to-12-year-olds.
2. 2Core topics: Covers phishing threats (Dr. Phish), data privacy (Data Kraken), cyberbullying (Viral Troll), and influencer marketing (Commander Clickbait).
3. 3Tech stack: Built on Next.js 14+ (App Router), TypeScript, Tailwind CSS, Framer Motion, Vercel hosting, and state management via Zustand or React Context using localStorage.
4. 4Prompting techniques: Uses structured context injection (Markdown headers, itemised sections), explicit role and scope definitions, and detailed scenario modeling rather than few-shot prompting.
5. 5Beneficiaries: Software engineers, product leads, and educators creating interactive digital literacy experiences.

# Product Requirements Document: Cyber Agents: Mission SicherNetz

## 1. Product Overview

### 1.1 Product Name
**Cyber Agents: Mission SicherNetz** (Cyber Agents: Mission SafeNet)

### 1.2 Product Vision
To create an immersive, narrative-driven adventure game where young users become "Cyber Agents," learning critical digital literacy and safety skills through engaging mini-games and simulations, rather than traditional quizzes.

### 1.3 Target Audience
* **Primary:** Students aged 10-12 (The "Tween" demographic, highly engaged in gaming and early social media use).
* **Secondary:** Educators looking for engaging teaching tools.

### 1.4 Product Goals
* Educate users on digital safety (phishing, privacy, cyberbullying, influencer marketing, filters).
* Foster critical thinking through simulated real-world scenarios.
* Provide a highly engaging, gamified experience that encourages replayability.

---

## 2. Core Concept & Narrative

### 2.1 The Narrative Hook
The user is a new recruit at the prestigious **"Cyber Agent Academy."** Their mission is to protect the digital world (the "SicherNetz") from various villains:
* **Dr. Phish:** Sends tricky messages to steal data.
* **The Viral Troll:** Spreads rumors and mean comments.
* **The Data Kraken:** Tries to collect excessive personal information.
* **Commander Clickbait:** Creates irresistible but misleading advertisements.

### 2.2 Game Structure
The app moves away from a linear quiz. Instead, it features a central hub (**The Agent HQ**) where users can customize their avatar, view their progress, and select "Missions." Each mission focuses on a specific topic and utilizes a unique mini-game format.

### 2.3 Tone and Style
* **Visuals:** Vibrant, comic-book style, or modern cartoon aesthetic. High energy, moving away from corporate gradients.
* **Language:** Engaging, direct address ("Agent, your mission is..."), humorous, and age-appropriate German.
* **Sound:** Engaging sound effects for interactions and subtle background music.

---

## 3. Key Features

### 3.1 Agent HQ (The Dashboard)
The central hub of the application.
* **Mission Selector:** A dynamic map or console showing available missions.
* **Avatar Display:** Prominently featuring the user's customized avatar.
* **Stats & Trophies:** Displaying "Agent Points" (XP), Rank (e.g., Rookie, Pro, Elite), and collected badges/trophies.
* **The "Sicher-Code" Vault:** A visual representation of the final goal (see 3.5).

### 3.2 Advanced Avatar System (The "Agent Creator")
Evolution of the existing avatar system. Instead of just selecting a pre-made avatar, users customize their own.
* **Base Selection:** Choose basic face shape, hair, and skin tone.
* **Customization Unlocks:** Users spend "Agent Points" earned from missions to unlock cool gear:
    * Cyber-goggles
    * Agent jackets/uniforms
    * Gadgets (e.g., a "Privacy Shield" accessory)
    * Funny hats or pets (e.g., a robot dog)
* *Note:* This system replaces the PDF certificate as the primary reward mechanism.

### 3.3 Mission Modules (Mini-Games)
This replaces the "Quiz Engine." Each mission is a self-contained interactive experience.

**Mission 1: The Phishing Pier (Simulation)**
* **Topic:** Recognizing phishing, spam, and dangerous links.
* **Mechanic:** A simulated smartphone interface (like WhatsApp or Discord). The user receives messages from known contacts and strangers (Dr. Phish).
* **Gameplay:** Users must decide whether to "Reply," "Click Link," "Block," or "Report." Incorrect choices provide immediate feedback on what went wrong.

**Mission 2: Influencer City (Spot the Difference/Sorting)**
* **Topic:** Beauty filters, sponsored content, and realistic expectations.
* **Mechanic 1 (Filters):** A "Spot the Fake" game. Users are shown images and must identify if they are filtered/manipulated, perhaps using a "De-Filter Ray" tool.
* **Mechanic 2 (Ads):** A simulated "Insta-Tok" feed. Users rapidly scroll and must tap on posts that are sponsored content (identifying #Werbung, #Ad, or subtle product placement).

**Mission 3: The Data Kraken's Lair (Strategy/Puzzle)**
* **Topic:** Privacy settings and password security.
* **Mechanic 1 (Passwords):** A "Password Strength Tester." Users create a password and evaluate its strength based on criteria (length, complexity).
* **Mechanic 2 (Privacy):** A simulated social media profile setup. Users must adjust settings (Who can see my posts? Who can message me?) to protect their data from the Data Kraken.

**Mission 4: Troll Bridge (Branching Narrative)**
* **Topic:** Cyberbullying, reporting, and digital citizenship.
* **Mechanic:** A "Choose Your Own Adventure" style scenario. The user witnesses someone being bullied online (by The Viral Troll).
* **Gameplay:** Users choose how to react (Join in, Ignore, Defend the victim, Report). Choices have consequences for their "Citizenship Score."

### 3.4 Gamification & Rewards
* **Agent Points (XP):** Awarded for completing missions and making correct choices.
* **Ranks:** Leveling up based on XP.
* **Unlocks:** Using XP to buy gear in the Avatar System.
* **Badges:** Achievements for specific actions (e.g., "Phish Blocker 5000," "Ad Detective").

### 3.5 The "Sicher-Code" (Final Puzzle Integration)
Similar to the existing letter collection, but integrated into the narrative.
* Upon successful completion of each mission, the user receives a "Code Fragment."
* Once all 4 fragments are collected, they access the "Final Challenge" or "Sicher-Code Vault."
* The final puzzle involves assembling the fragments to form a key phrase (like "SICHER" or something more thematic like "STOP-THE-VIRUS").

---

## 4. User Journey
1.  **Onboarding:** High-energy intro cinematic explaining the Cyber Agent Academy and the villains.
2.  **Agent Creation:** User enters their Agent Name and creates their base avatar.
3.  **HQ Tutorial:** A brief tour of the Agent HQ.
4.  **Mission 1:** User selects and plays the first mini-game (e.g., Phishing Pier).
5.  **Feedback & Reward:** Mission debrief, awarding of XP and the first Code Fragment.
6.  **Customization:** User returns to HQ and uses initial XP to buy their first piece of gear.
7.  **Progression:** User completes the remaining missions in their chosen order.
8.  **Final Challenge:** Once all Code Fragments are collected, the user completes the final puzzle to "Save the SicherNetz."
9.  **Conclusion:** Final rank achieved, encouragement to replay missions for higher scores and more unlocks.

---

## 5. Technical Implementation
The technical stack remains robust and suitable for this evolution.

* **Framework:** `Next.js 14+` (App Router)
* **Language:** `TypeScript`
* **Styling:** `Tailwind CSS`
* **Hosting:** `Vercel`
* **State Management:** `React Context` or `Zustand` for managing global game state (Avatar configuration, XP, unlocked missions, collected fragments).
* **Data Persistence:** Continue using `localStorage` for Vercel compatibility to store user progress and customizations. This is crucial for ensuring users don't lose their progress and gear.
* **Animations:** `Framer Motion` or similar library to add engaging animations and transitions, crucial for the game feel.
* **Mini-Game Logic:** Each mission will be a distinct component with its own internal logic (e.g., the simulation logic for the smartphone interface in Mission 1).

---

## 6. Success Metrics
* **Mission Completion Rate:** How many users complete all 4 missions?
* **Replayability:** How often do users return to the app (tracked via localStorage timestamps)?
* **Customization Engagement:** How many avatar items are unlocked on average?
* **Learning Effectiveness:** Average scores within the mini-games (e.g., percentage of phishing attempts correctly identified).

---

# Development Plan: Cyber Agents: Mission SicherNetz

This plan transitions the existing app into the new concept in phases.

## Phase 1: Foundation and Rebranding (4-6 Weeks)
*Goal: Establish the new theme, the core game loop, and one playable mission.*

* **UI/UX Design:**
    * Design the new "Cyber Agent" visual identity (comic book style).
    * Wireframe the Agent HQ, the Avatar Creator, and the Mission Selector.
    * Design the assets for the Villains (Dr. Phish, etc.).
* **Architecture Refactoring:**
    * Transition state management from basic hooks to a more robust solution (like Zustand) to handle the complex game state.
    * Implement the `localStorage` structure for the new data (XP, Ranks, Avatar Config, Unlocks).
* **Agent HQ Implementation:**
    * Develop the central dashboard.
* **Advanced Avatar System:**
    * Develop the base Avatar Creator.
    * Implement the customization system (selecting and saving different gear).
    * Create the initial set of unlockable items.
* **Gamification Core:**
    * Implement the XP and Rank system.
    * Implement the logic for unlocking and purchasing avatar gear.
* **MVP Mission - The Phishing Pier:**
    * Design the simulated smartphone interface (UI).
    * Develop the logic for the simulation (receiving messages, handling user choices).
    * Integrate the mission with the XP reward system and the Code Fragment collection.

## Phase 2: Content Expansion (4-6 Weeks)
*Goal: Build out the educational content and increase engagement.*

* **Mission 2: Influencer City:**
    * Develop the "Spot the Fake" (Filter) mini-game.
    * Develop the "Insta-Tok" feed simulation (Ad spotting).
* **Mission 3: The Data Kraken's Lair:**
    * Develop the Password Strength evaluation mini-game.
    * Develop the Privacy Settings simulation.
* **Expanded Rewards:**
    * Design and implement 10-15 new avatar unlocks.
    * Implement the Badge/Trophy system.

## Phase 3: Final Content, Polish, and Deployment (3-4 Weeks)
*Goal: Complete the narrative and ensure a high-quality user experience.*

* **Mission 4: Troll Bridge:**
    * Write the branching narrative scenarios for cyberbullying.
    * Develop the "Choose Your Own Adventure" mechanic.
* **The "Sicher-Code" (Final Puzzle):**
    * Implement the vault interface.
    * Develop the final puzzle logic using the collected fragments.
* **Audio and Animations:**
    * Integrate sound effects for interactions (clicks, successes, failures).
    * Add engaging animations and transitions using Framer Motion.
* **Testing and QA:**
    * Comprehensive testing across devices (especially mobile and tablets).
    * Usability testing with the target demographic (10-12-year-olds) to ensure the games are fun and the concepts are understood.
* **Deployment:**
    * Final optimization for Vercel and launch.