课堂互动游戏

- 主要场景（餐厅、厨房、超市、学校等）
- 人物角色（厨师、老师、学生、卡通形象等）
- 物品道具（食物、文具、玩具等）
- 色彩风格（明亮、温馨、活泼等）

核心词汇（5-8个）:
  - 中文含义
  - 英文单词
  - 配图/emoji

拓展词汇（3-5个）:
  - 相关联的词汇

句型结构（2-3个）:
  - 核心对话
  - 关键表达方式
  - Chant/Rap句型

## 📸 图片分析报告

**识别到的内容:**
- 页面来源: 人教版 PEP 英语 P44
- 单元主题: Unit 5 - My Healthy Plate
- 核心词汇: soup, rice, fruit, meat, vegetables (+ water, milk, juice)
- 核心句型: "This is my healthy plate." / "I have..." / "We are healthy."
- 情感基调: 健康、积极、生活化、欢快
- 目标年级: 小学三年级

✅ 真实贴近生活（8-9岁学生熟悉的场景：超市、仓库、厨房、餐厅等）
✅ 有趣有吸引力（融入魔法、冒险、闯关、奖励）
✅ 有明确目标（通过英语学习完成任务）
✅ 贯穿全课（延伸到导入→新授→练习→巩固→复习→总结）
✅ 语言融合自然（目标词汇和句型融入任务）
✅ 场景沉浸感（让学生感觉自己真的在仓库整理、超市购物、厨房做饭）

1. 角色设定：玩家是谁？（仓库管理员、小厨师、超市收银员...）
2. 任务目标：要完成什么？（整理仓库、准备晚餐、完成购物清单...）
3. 场景描述：在哪里？周围有什么？
4. 语言融入：在这个场景中自然使用英语
5. 成功反馈：完成任务后的成就感

## 📦 场景：帮仓库管理员整理货物

**角色:** 你是小小仓库管理员
**任务:** 货物到了！请把食材分类放到正确的货架上
**场景描述:** 
  - 面前有4个货架：Grains（谷物）、Protein（蛋白质）、Vegetables（蔬菜）、Fruits（水果）
  - 传送带上不断送来各种食材
  - 需要把每个食材拖到正确的货架

**语言融入:**
  - "Put the rice in the grains shelf!"
  - "Where does the meat go?"
  - "This is the vegetables section!"

**成功反馈:** 
  - 货架被填满时亮起绿灯
  - 播放"货物整理完成"的庆祝动画
  - 获得"金牌管理员"徽章

## 📖 整节课大主线故事：[故事名称]

**故事背景：**
[用2-3段话描述故事的背景设定，包括时间、地点、人物、起因]

**主角设定：**
- 学生角色：[学生在故事中扮演的角色，如"小小仓库管理员"]
- NPC角色：[故事中的配角/引导者，如"仓库管理员小美"、"店长王叔叔"]
- 目标：[学生要完成什么大任务]

**故事时间线（贯穿全课）：**

**故事开篇（教师在课堂上讲述）：**
> "[用生动的语言讲述故事开头，引入第一个场景]"

**关卡间的情节过渡（教师串词）：**
- 关卡1 → 关卡2："[过渡语]"
- 关卡2 → 关卡3："[过渡语]"
- 关卡3 → 关卡4："[过渡语]"

**故事结局：**
> "[故事如何圆满结束，给学生成就感和情感共鸣]"

**核心情感线：**
- 起始情感：[好奇/兴奋/紧张]
- 中间情感：[挑战/成长/成就感]
- 结束情感：[自豪/喜悦/满足]

##  整节课大主线故事：小小店员成长记

### 故事背景

今天是阳光超市新开业的日子！超市老板王叔叔在招聘小小店员。你和小伙伴们都来应聘了。王叔叔说："要成为我们超市的金牌店员，需要通过四个考验哦！"

**主角设定：**
- 学生角色：应聘的小小店员
- NPC角色：仓库管理员小美（关卡1-2的引导者）、店长王叔叔（关卡3-4的引导者）
- 大目标：通过四个考验，成为金牌店员，学会认识健康食物

### 故事时间线

### 故事开篇（教师课前讲述）

> 🗣️ "同学们，今天老师要带大家去一个特别的地方——阳光超市！你们看（展示图片），阳光超市今天新开业啦，里面堆满了各种好吃的食物。
> 
> 超市的王叔叔说，他想招聘一些聪明能干的小小店员来帮忙。你们想不想来试试？好！那我们先来认识一下阳光超市里的食材仓库吧！"

### 关卡间的情节过渡（教师串词）

**🔄 关卡1 → 关卡2（认识食材 → 整理分类）：**
> 🗣️ "哇，你们太厉害了！这么快就认识了这么多食材！小美阿姨说，仓库里新到了一批货，需要有人帮忙整理到正确的货架上。你们愿意帮这个忙吗？好！让我们一起把食材分类整理好吧！"

**🔄 关卡2 → 关卡3（整理分类 → 超市购物）：**
> 🗣️ "太棒了！你们把仓库整理得整整齐齐的！小美阿姨对你们竖起大拇指。王叔叔走过来说：'你们太能干了！今天超市有特价活动，需要有人去帮忙采购一些健康食材。这是购物清单，你们能完成这个任务吗？'"

**🔄 关卡3 → 关卡4（超市购物 → 店长考核）：**
> ️ "恭喜你们完成了购物任务！所有食材都买齐了！王叔叔笑着说：'你们真的很出色！不过，要成为我们阳光超市的金牌店员，还需要通过最后的考核哦！准备好了吗？让我们开始吧！'"

### 故事结局

> 🗣️ "太棒了！你们全部通过了！王叔叔拿出一个金光闪闪的奖牌说：'从今天起，你们就是阳光超市的金牌店员了！你们认识了这么多健康食物，学会了分类整理，还能完成购物任务。记住，我们要多吃健康的食物，这样我们的身体才会棒棒的！'"

### 核心情感线

- **起始**：好奇 + 兴奋（"哇！超市！我想当店员！"）
- **关卡1-2**：成就感（"我认识了好多食物！""我整理好了！"）
- **关卡3**：挑战感（"购物清单好长，我要认真找！"）
- **关卡4**：紧张 → 自豪（"考核通过了！我是金牌店员！"）
- **结束**：满足 + 情感升华（"健康食物让我们更健康！"）

## 📖 整节课大主线故事：[故事名称]

###  故事背景
[2-3段生动的背景描述]

### 👤 角色设定
| 角色 | 身份 | 功能 |
|------|------|------|
| 学生 | [角色名] | [学生在故事中的任务] |
| NPC1 | [名字] | [引导关卡1-2] |
| NPC2 | [名字] | [引导关卡3-4] |

###  故事时间线
[用文字或图表展示故事发展脉络]

### 🗣️ 教师串词（完整版）

**课前导入（2分钟）：**
> "[完整的开场白]"

**关卡1 → 关卡2 过渡：**
> "[完整的过渡语]"

**关卡2 → 关卡3 过渡：**
> "[完整的过渡语]"

**关卡3 → 关卡4 过渡：**
> "[完整的过渡语]"

**课后总结（2分钟）：**
> "[完整的结束语]"

### 💫 情感线索
[描述学生在整个过程中的情感变化]

1. 课前2分钟：教师用生动的语言讲述故事开头，吸引学生注意力
2. 每个关卡前：教师用过渡语连接情节，让学生沉浸在故事中
3. 游戏过程中：NPC角色可以在屏幕上给予提示和鼓励
4. 通关后：教师用故事结局升华主题，联系生活实际
5. 全程配合：教师可以佩戴简单道具（如店员围裙、魔法帽子等）增强沉浸感

关卡1（认识食材） → 关卡2（整理分类） → 关卡3（实际应用） → 关卡4（能力考核）
     ↓                   ↓                    ↓                    ↓
   认识货物             整理仓库              完成购物任务          店长综合考核

Purpose（目的）: 小学低年级英语教学游戏 - 要可爱！要吸引孩子！
Tone（基调）: 
  - Round & Cute（圆润可爱）
  - Playful & Bouncy（活泼弹跳）
  - Warm & Friendly（温暖友好）
  
Differentiation（差异化）: 
  什么是让人难忘的 ONE THING？
  → 一切都是圆圆的！按钮是圆的、卡片是圆的、动画是弹跳的！
  → 像糖果一样甜美的马卡龙色系！
  → 像果冻一样Q弹的交互动画！

/* Display Font（标题/强调）- 超圆润 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* Body Font（正文/UI）- 圆润友好 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* 使用 */
h1, h2, .game-title { font-family: 'Fredoka One', cursive; }
body, p, .instruction { font-family: 'Quicksand', sans-serif; }

@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

h1, h2 { font-family: 'Bubblegum Sans', cursive; }
body { font-family: 'Nunito', sans-serif; }

❌ Inter, Roboto, Arial, system-ui（太生硬）
❌ Space Grotesk（太技术感）
❌ 任何尖锐/棱角的字体

:root {
    /* 主色 - 糖果粉 */
    --color-primary: #FF6B9D;          /* 粉红 */
    --color-primary-light: #FFB8D0;    /* 浅粉 */
    --color-primary-dark: #E84A7F;     /* 深粉 */
    
    /* 辅助色 - 奶油黄 */
    --color-secondary: #FFD93D;         /* 明黄 */
    --color-secondary-light: #FFE566;   /* 浅黄 */
    
    /* 功能色 - 薄荷绿 */
    --color-success: #6BCB77;           /* 成功绿 */
    --color-success-light: #A8E6CF;     /* 浅绿 */
    
    /* 警告色 - 天空蓝 */
    --color-info: #4D96FF;              /* 信息蓝 */
    --color-info-light: #A8C8FF;        /* 浅蓝 */
    
    /* 错误色 - 珊瑚橙 */
    --color-error: #FF6B6B;             /* 错误红 */
    --color-error-light: #FFB3B3;       /* 浅红 */
    
    /* 中性色 - 云朵白 */
    --color-bg: #FFF9F5;                /* 暖白背景 */
    --color-surface: #FFFFFF;           /* 纯白卡片 */
    --color-text: #2D3436;              /* 深灰文字 */
    --color-text-muted: #95A5A6;        /* 浅灰文字 */
}

body {
    background: 
        /* 多层柔和径向渐变 */
        radial-gradient(at 20% 30%, rgba(255,107,157,0.15) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(255,217,61,0.12) 0px, transparent 50%),
        radial-gradient(at 50% 90%, rgba(107,203,119,0.10) 0px, transparent 50%),
        radial-gradient(at 90% 20%, rgba(77,150,255,0.08) 0px, transparent 50%),
        /* 主背景渐变 */
        linear-gradient(135deg, #FFF9F5 0%, #FFE8F0 50%, #F0FFF4 100%);
}

❌ 紫色渐变 (#667eea → #764ba2) - 太成人化
❌ 黑暗模式配色 - 不适合小学生
❌ 高对比度冷色调 - 太严肃
❌ 默认 Bootstrap/Tailwind 配色 - 无特色

:root {
    /* 超大圆角 - 用于主要容器 */
    --radius-xl: 40px;
    --radius-xxl: 50px;
    
    /* 大圆角 - 用于卡片 */
    --radius-lg: 28px;
    
    /* 中圆角 - 用于按钮 */
    --radius-md: 20px;
    
    /* 小圆角 - 用于标签 */
    --radius-sm: 14px;
    
    /* 完全圆形 - 用于头像/图标 */
    --radius-full: 9999px;
    
    /* 胶囊形 - 用于按钮/标签 */
    --radius-pill: 9999px;
}

/* 实际应用 */
.game-container {
    border-radius: var(--radius-xxl);  /* 50px 超圆 */
}

.card {
    border-radius: var(--radius-lg);   /* 28px 大圆 */
}

.btn {
    border-radius: var(--radius-pill); /* 胶囊形 */
}

.tag {
    border-radius: var(--radius-pill); /* 胶囊形 */
}

✅ 按钮：胶囊形（border-radius: 9999px）
✅ 卡片：大圆角（28-40px）
✅ 图标容器：完全圆形
✅ 进度条：胶囊形
✅ 徽章/标签：椭圆形或胶囊形
✅ 输入框：大圆角（20px）
✅ 图片：超大圆角或圆形

✅ 所有动画都要有弹性（bounce/spring效果）
✅ 使用 cubic-bezier(0.68, -0.55, 0.265, 1.55) - 果冻曲线
✅ 元素像糖果一样跳跃入场
✅ 悬停时轻微放大+旋转（不超过5度）
✅ 成功时庆祝跳动（scale + rotate 组合）
✅ 错误时左右摇晃（像摇头一样）

/* Staggered Candy Drop（交错糖果掉落） */
.game-container > * {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
    animation: candyDrop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.game-container > *:nth-child(1) { animation-delay: 0.05s; }
.game-container > *:nth-child(2) { animation-delay: 0.1s; }
.game-container > *:nth-child(3) { animation-delay: 0.15s; }

@keyframes candyDrop {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }
    60% {
        transform: translateY(5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hover States with Bounce（弹跳悬停） */
.food-card {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.food-card:hover {
    transform: translateY(-10px) scale(1.08) rotate(-3deg);
    box-shadow: 
        0 20px 40px rgba(255,107,157,0.25),
        0 0 0 6px rgba(255,107,157,0.15);
}

.correct-answer {
    animation: celebrateBounce 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes celebrateBounce {
    0% { transform: scale(1); }
    25% { transform: scale(1.25) rotate(-8deg); }
    50% { transform: scale(1.15) rotate(8deg); }
    75% { transform: scale(1.2) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}

.wrong-answer {
    animation: cuteShake 0.6s ease;
}

@keyframes cuteShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-12px) rotate(-5deg); }
    30% { transform: translateX(10px) rotate(4deg); }
    45% { transform: translateX(-8px) rotate(-3deg); }
    60% { transform: translateX(6px) rotate(2deg); }
    75% { transform: translateX(-4px) rotate(-1deg); }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

.trophy, .medal, .mascot {
    animation: gentleFloat 3s ease-in-out infinite;
}

@keyframes heartbeatPulse {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

.btn-primary:hover::after,
.highlight-element {
    animation: heartbeatPulse 2s infinite;
}

.btn-primary {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    padding: 18px 42px;
    border: none;
    border-radius: var(--radius-pill);  /* 胶囊形 */
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 24px rgba(255,107,157,0.35),
        inset 0 3px 0 rgba(255,255,255,0.25),
        inset 0 -3px 0 rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn-primary:hover {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 
        0 16px 36px rgba(255,107,157,0.45),
        inset 0 3px 0 rgba(255,255,255,0.25),
        inset 0 -3px 0 rgba(0,0,0,0.1);
}

.btn-primary:active {
    transform: translateY(-2px) scale(0.98);
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 30px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, 
        var(--color-primary), 
        var(--color-secondary), 
        var(--color-success)
    );
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover {
    transform: translateY(-10px) scale(1.03) rotate(-1deg);
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.12),
        0 0 0 4px rgba(255,107,157,0.12);
}

.card:hover::before {
    opacity: 1;
}

.input-field {
    width: 100%;
    padding: 18px 28px;
    font-size: 18px;
    font-family: var(--font-body);
    font-weight: 600;
    border: 3px solid #E8E8E8;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FFFFFF, #FAFAFA);
    outline: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.04);
}

.input-field:focus {
    border-color: var(--color-primary);
    box-shadow: 
        0 0 0 6px rgba(255,107,157,0.15),
        inset 0 2px 8px rgba(0,0,0,0.04),
        0 8px 24px rgba(255,107,157,0.15);
    transform: translateY(-3px);
}

.progress-bar-container {
    width: 100%;
    height: 20px;
    background: #F0F0F0;
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.1);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--color-primary), 
        var(--color-secondary), 
        var(--color-success),
        var(--color-info)
    );
    border-radius: var(--radius-pill);
    transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.5), 
        transparent
    );
    animation: shimmerMove 2s infinite;
}

@keyframes shimmerMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.cloud-decoration {
    position: absolute;
    background: rgba(255,255,255,0.7);
    border-radius: 100px;
    filter: blur(2px);
}

.cloud-1 {
    width: 120px;
    height: 50px;
    top: -20px;
    right: 10%;
}

.cloud-2 {
    width: 80px;
    height: 35px;
    bottom: 20px;
    left: 5%;
}

.star-sparkle {
    position: absolute;
    font-size: 20px;
    animation: twinkle 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

function createConfetti() {
    const colors = [
        '#FF6B9D', '#FFD93D', '#6BCB77', '#4D96FF',
        '#FF9F43', '#EE5A6F', '#A29BFE', '#FD79A8'
    ];
    const shapes = ['circle', 'star', 'heart'];
    // ... 创建150片彩纸
}

body {
    background: 
        /* 柔和光晕层 */
        radial-gradient(at 20% 30%, rgba(255,107,157,0.12) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(255,217,61,0.10) 0px, transparent 50%),
        radial-gradient(at 50% 90%, rgba(107,203,119,0.08) 0px, transparent 50%),
        radial-gradient(at 90% 20%, rgba(77,150,255,0.06) 0px, transparent 50%),
        /* 主背景 */
        linear-gradient(135deg, #FFF9F5 0%, #FFE8F0 50%, #F0FFF4 100%);
}

.pattern-dots {
    background-image: radial-gradient(circle, rgba(255,107,157,0.08) 2px, transparent 2px);
    background-size: 32px 32px;
}

// 本地存储结构（localStorage）
const playerData = {
    // 基础信息
    playerName: "小玩家",
    playerAvatar: "🌟",
    
    // 英语星积分
    englishStars: 0,              // 当前总英语星数量
    totalStarsEarned: 0,          // 历史累计获得英语星
    starsByLevel: {               // 各关卡获得英语星明细
        level1: 0,
        level2: 0,
        level3: 0,
        level4: 0
    },
    
    // 闯关记录
    levelRecords: {               // 各关卡闯关记录
        level1: {
            attempts: 0,          // 闯关次数
            successes: 0,         // 成功次数
            bestScore: 0,         // 最佳成绩
            lastRating: ""        // 最后一次评级
        },
        level2: { ... },
        level3: { ... },
        level4: { ... }
    },
    
    // 奖励兑换记录
    redeemedRewards: [],          // 已兑换奖励列表
    rewardHistory: [              // 兑换历史
        {
            rewardId: "badge_001",
            rewardName: "勇敢之星徽章",
            cost: 50,
            redeemedAt: "2026-05-05 10:30"
        }
    ],
    
    // 成就系统
    achievements: [],             // 已解锁成就
    lastPlayDate: "2026-05-05"    // 最后游玩日期
};

| 行为 | 奖励英语星 | 说明 |
|------|------------|------|
| 完成关卡1（首次） | +10 ⭐ | 词汇认知关卡通过 |
| 完成关卡1（重复） | +5 ⭐ | 再次挑战成功 |
| 完成关卡2（首次） | +15 ⭐ | 分类整理关卡通过 |
| 完成关卡2（重复） | +8 ⭐ | 再次挑战成功 |
| 完成关卡3（首次） | +20 ⭐ | 任务执行关卡通过 |
| 完成关卡3（重复） | +10 ⭐ | 再次挑战成功 |
| 完成关卡4（首次） | +30 ⭐ | 复习巩固关卡通过 |
| 完成关卡4（重复） | +15 ⭐ | 再次挑战成功 |
| 完美通关（0错误） | +额外10 ⭐ | 无任何错误完成 |
| 连续闯关成功 | +5 ⭐/关 | 连续2关以上成功 |
| 每日首次登录 | +5 ⭐ | 每天第一次游戏 |

**评级加成：**
- ⭐⭐⭐ 完美评级：额外 +15 英语星
- ⭐⭐ 优秀评级：额外 +10 英语星
- ⭐ 良好评级：额外 +5 英语星

/* 1. 英语星获取动画 - 星星飞入 */
@keyframes starFlyIn {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    30% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    60% {
        transform: scale(1.2) rotate(360deg);
    }
    100% {
        transform: scale(1) rotate(720deg);
        opacity: 1;
    }
}

.star-earn-animation {
    animation: starFlyIn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* 2. 积分累加动画 - 数字滚动 */
@keyframes numberRollUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.score-increase {
    animation: numberRollUp 0.5s ease-out;
    color: var(--color-secondary);
    font-weight: bold;
}

/* 3. 成就解锁动画 - 徽章弹出 */
@keyframes badgePopUp {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.3) rotate(10deg); }
    75% { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
}

.achievement-badge {
    animation: badgePopUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* 4. 彩纸庆祝动画 */
@keyframes confettiFall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: fixed;
    width: 12px;
    height: 12px;
    animation: confettiFall 3s ease-out forwards;
}

/* 5. 成功提示横幅 - Q弹滑入 */
@keyframes bannerSlideIn {
    0% { transform: translateY(-100px) scale(0.8); opacity: 0; }
    60% { transform: translateY(10px) scale(1.05); }
    80% { transform: translateY(-5px) scale(0.98); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.success-banner {
    animation: bannerSlideIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

// 音效管理器
class SoundManager {
    constructor() {
        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
        this.enabled = true;
    }
    
    // 播放成功音效
    playSuccess() {
        if (!this.enabled) return;
        
        // 欢快的上升音阶
        const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
        notes.forEach((freq, index) => {
            setTimeout(() => this.playTone(freq, 0.15), index * 100);
        });
    }
    
    // 播放英语星获取音效
    playStarEarn(starCount) {
        if (!this.enabled) return;
        
        // 叮叮叮的星星音效
        for (let i = 0; i < Math.min(starCount, 5); i++) {
            setTimeout(() => {
                this.playTone(1200 + i * 100, 0.1, 'sine');
            }, i * 150);
        }
    }
    
    // 播放成就解锁音效
    playAchievementUnlock() {
        if (!this.enabled) return;
        
        // 庄严的解锁音效
        const notes = [440, 554.37, 659.25, 880]; // A4, C#5, E5, A5
        notes.forEach((freq, index) => {
            setTimeout(() => this.playTone(freq, 0.3), index * 200);
        });
    }
    
    // 播放基础音调
    playTone(frequency, duration, type = 'triangle') {
        const oscillator = this.audioContext.createOscillator();
        const gainNode = this.audioContext.createGain();
        
        oscillator.connect(gainNode);
        gainNode.connect(this.audioContext.destination);
        
        oscillator.frequency.value = frequency;
        oscillator.type = type;
        
        gainNode.gain.setValueAtTime(0.3, this.audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, this.audioContext.currentTime + duration);
        
        oscillator.start(this.audioContext.currentTime);
        oscillator.stop(this.audioContext.currentTime + duration);
    }
}

const soundManager = new SoundManager();

// 关卡完成处理函数
function handleLevelComplete(levelNumber, score, errorCount, rating) {
    // 1. 计算获得的英语星
    const starsEarned = calculateStarsEarned(levelNumber, score, errorCount, rating);
    
    // 2. 更新玩家数据
    updatePlayerStars(levelNumber, starsEarned, score, errorCount, rating);
    
    // 3. 触发视觉反馈
    triggerVisualFeedback(starsEarned, rating);
    
    // 4. 触发听觉反馈
    triggerAudioFeedback(starsEarned, rating);
    
    // 5. 显示完成界面
    showCompletionModal(starsEarned, rating, score);
    
    // 6. 检查成就解锁
    checkAndUnlockAchievements();
}

// 触发视觉反馈
function triggerVisualFeedback(starsEarned, rating) {
    // 显示英语星飞入动画
    const starElement = createStarAnimation(starsEarned);
    document.body.appendChild(starElement);
    
    // 显示彩纸庆祝
    createConfetti();
    
    // 显示成功横幅
    showSuccessBanner(starsEarned, rating);
    
    // 播放音效
    soundManager.playSuccess();
    setTimeout(() => soundManager.playStarEarn(starsEarned), 500);
}

// 显示成功横幅
function showSuccessBanner(starsEarned, rating) {
    const banner = document.createElement('div');
    banner.className = 'success-banner';
    banner.innerHTML = `
        <div class="banner-content">
            <h2>🎉 关卡完成！</h2>
            <div class="stars-earned">+${starsEarned} ⭐</div>
            <div class="rating-display">${rating}</div>
            <p class="encouragement">太棒了！继续加油！</p>
        </div>
    `;
    document.body.appendChild(banner);
    
    // 3秒后自动消失
    setTimeout(() => {
        banner.style.animation = 'bannerSlideIn 0.5s ease reverse forwards';
        setTimeout(() => banner.remove(), 500);
    }, 3000);
}

<!-- 固定在页面顶部的英语星展示栏 -->
<div class="top-bar">
    <div class="player-info">
        <span class="player-avatar">🌟</span>
        <span class="player-name">小玩家</span>
    </div>
    
    <div class="stars-display" id="starsDisplay" onclick="openStarsPanel()">
        <span class="star-icon">⭐</span>
        <span class="star-count" id="starCount">0</span>
        <span class="star-label">英语星</span>
    </div>
    
    <div class="top-actions">
        <button class="btn-icon" onclick="openRewardShop()" title="奖励商城">🎁</button>
        <button class="btn-icon" onclick="toggleSound()" title="音效开关">🔊</button>
    </div>
</div>

/* 顶部导航栏样式 */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(135deg, #FFF9F5, #FFE8F0);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    z-index: 1000;
}

.stars-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #FFD93D, #FF9F43);
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255,217,61,0.35);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.stars-display:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 12px 30px rgba(255,217,61,0.5);
}

.star-icon {
    font-size: 28px;
    animation: heartbeatPulse 2s infinite;
}

.star-count {
    font-family: 'Fredoka One', cursive;
    font-size: 24px;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

<!-- 英语星详情面板 -->
<div class="stars-panel" id="starsPanel">
    <div class="panel-header">
        <h3>⭐ 我的英语星</h3>
        <button class="btn-close" onclick="closeStarsPanel()">✕</button>
    </div>
    
    <div class="panel-content">
        <!-- 总览 -->
        <div class="stars-overview">
            <div class="total-stars">
                <span class="star-icon-large">⭐</span>
                <div class="star-info">
                    <div class="total-count" id="totalStars">0</div>
                    <div class="total-label">当前英语星</div>
                </div>
            </div>
            <div class="total-earned">
                <div class="earned-label">历史累计获得</div>
                <div class="earned-count" id="totalEarned">0</div>
            </div>
        </div>
        
        <!-- 各关卡获得明细 -->
        <div class="stars-by-level">
            <h4>📊 各关卡获得明细</h4>
            <div class="level-stats">
                <div class="level-stat">
                    <span class="level-name">关卡1</span>
                    <div class="level-bar">
                        <div class="level-fill" id="level1Bar" style="width: 0%"></div>
                    </div>
                    <span class="level-stars" id="level1Stars">0 ⭐</span>
                </div>
                <!-- 关卡2-4 类似 -->
            </div>
        </div>
        
        <!-- 闯关记录 -->
        <div class="level-records">
            <h4>🏆 闯关记录</h4>
            <div class="record-list">
                <div class="record-item">
                    <span class="record-level">关卡1</span>
                    <span class="record-attempts">挑战 3 次</span>
                    <span class="record-success">成功 2 次</span>
                    <span class="record-best">最佳 85分</span>
                </div>
                <!-- 更多记录 -->
            </div>
        </div>
        
        <!-- 快捷操作 -->
        <div class="quick-actions">
            <button class="btn-action" onclick="openRewardShop()">
                🎁 去兑换奖励
            </button>
            <button class="btn-action" onclick="closeStarsPanel()">
                ✓ 知道了
            </button>
        </div>
    </div>
</div>

// 奖励商品列表
const rewardCatalog = [
    {
        id: "badge_001",
        name: "勇敢之星徽章",
        description: "授予勇敢挑战的玩家",
        icon: "🏅",
        category: "badge",
        cost: 50,
        unlockCondition: null,
        isConsumable: false
    },
    {
        id: "badge_002",
        name: "词汇大师徽章",
        description: "在词汇关卡获得满分",
        icon: "🎖️",
        category: "badge",
        cost: 100,
        unlockCondition: "level1_perfect",
        isConsumable: false
    },
    {
        id: "theme_001",
        name: "彩虹主题",
        description: "解锁彩虹色游戏界面",
        icon: "🌈",
        category: "theme",
        cost: 200,
        unlockCondition: null,
        isConsumable: false
    },
    {
        id: "hint_001",
        name: "提示卡 ×3",
        description: "游戏中可使用3次提示机会",
        icon: "💡",
        category: "consumable",
        cost: 30,
        unlockCondition: null,
        isConsumable: true,
        quantity: 3
    },
    {
        id: "double_001",
        name: "双倍星卡",
        description: "下次闯关获得双倍英语星",
        icon: "⭐",
        category: "consumable",
        cost: 80,
        unlockCondition: null,
        isConsumable: true,
        quantity: 1,
        effect: "double_stars_next_level"
    },
    {
        id: "certificate_001",
        name: "金牌店员证书",
        description: "关卡4获得金牌后解锁",
        icon: "📜",
        category: "certificate",
        cost: 150,
        unlockCondition: "level4_gold",
        isConsumable: false
    }
];

<!-- 奖励商城 -->
<div class="reward-shop" id="rewardShop">
    <div class="shop-header">
        <h3>🎁 奖励商城</h3>
        <div class="shop-stars">
            <span class="star-icon">⭐</span>
            <span class="star-count" id="shopStarCount">0</span>
        </div>
        <button class="btn-close" onclick="closeRewardShop()">✕</button>
    </div>
    
    <div class="shop-content">
        <!-- 分类标签 -->
        <div class="category-tabs">
            <button class="tab active" data-category="all">全部</button>
            <button class="tab" data-category="badge">徽章</button>
            <button class="tab" data-category="theme">主题</button>
            <button class="tab" data-category="consumable">道具</button>
            <button class="tab" data-category="certificate">证书</button>
        </div>
        
        <!-- 奖励商品网格 -->
        <div class="reward-grid">
            <div class="reward-item" data-id="badge_001">
                <div class="reward-icon">🏅</div>
                <div class="reward-info">
                    <h4>勇敢之星徽章</h4>
                    <p>授予勇敢挑战的玩家</p>
                </div>
                <div class="reward-footer">
                    <span class="reward-cost">
                        <span class="star-icon-small">⭐</span>
                        50
                    </span>
                    <button class="btn-redeem" onclick="redeemReward('badge_001')">
                        兑换
                    </button>
                </div>
            </div>
            <!-- 更多奖励商品 -->
        </div>
    </div>
</div>

/* 奖励商城样式 */
.reward-shop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: white;
    border-radius: var(--radius-xxl);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2000;
}

.reward-shop.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 24px;
}

.reward-item {
    background: linear-gradient(135deg, #FFF9F5, #FFE8F0);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 3px solid transparent;
}

.reward-item:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 16px 40px rgba(255,107,157,0.2);
    border-color: var(--color-primary-light);
}

.reward-item.locked {
    opacity: 0.5;
    pointer-events: none;
}

.reward-icon {
    font-size: 56px;
    text-align: center;
    margin-bottom: 12px;
}

.reward-cost {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Fredoka One', cursive;
    font-size: 20px;
    color: var(--color-secondary);
}

.btn-redeem {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-redeem:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(255,107,157,0.4);
}

.btn-redeem:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.btn-redeem:disabled:hover {
    box-shadow: none;
}

// 兑换奖励
function redeemReward(rewardId) {
    const reward = rewardCatalog.find(r => r.id === rewardId);
    if (!reward) return;
    
    // 检查是否满足解锁条件
    if (reward.unlockCondition && !checkUnlockCondition(reward.unlockCondition)) {
        showFeedback('error', '🔒 该奖励需要完成特定条件才能解锁！');
        return;
    }
    
    // 检查英语星是否足够
    if (playerData.englishStars < reward.cost) {
        showFeedback('error', `❌ 英语星不足！需要 ${reward.cost} ⭐，当前只有 ${playerData.englishStars} ⭐`);
        soundManager.playError();
        return;
    }
    
    // 确认兑换
    if (!confirm(`确定要兑换「${reward.name}」吗？将消耗 ${reward.cost} ⭐`)) {
        return;
    }
    
    // 执行兑换
    playerData.englishStars -= reward.cost;
    playerData.redeemedRewards.push({
        rewardId: reward.id,
        rewardName: reward.name,
        cost: reward.cost,
        redeemedAt: new Date().toLocaleString()
    });
    
    // 保存数据
    savePlayerData();
    
    // 更新显示
    updateStarsDisplay();
    
    // 播放兑换成功音效和动画
    soundManager.playAchievementUnlock();
    showFeedback('success', `🎉 恭喜！成功兑换「${reward.name}」！`);
    
    // 应用奖励效果
    applyRewardEffect(reward);
}

// 应用奖励效果
function applyRewardEffect(reward) {
    switch (reward.effect) {
        case 'double_stars_next_level':
            playerData.doubleStarsActive = true;
            break;
        case 'theme_unlock':
            playerData.unlockedThemes.push(reward.id);
            break;
        // 更多效果...
    }
    savePlayerData();
}

// 保存玩家数据到localStorage
function savePlayerData() {
    localStorage.setItem('lessonContextPro_playerData', JSON.stringify(playerData));
}

// 从localStorage加载玩家数据
function loadPlayerData() {
    const saved = localStorage.getItem('lessonContextPro_playerData');
    if (saved) {
        const loaded = JSON.parse(saved);
        // 合并默认值，确保数据结构完整
        playerData = { ...getDefaultPlayerData(), ...loaded };
    } else {
        playerData = getDefaultPlayerData();
    }
    updateStarsDisplay();
}

// 获取默认玩家数据
function getDefaultPlayerData() {
    return {
        playerName: "小玩家",
        englishStars: 0,
        totalStarsEarned: 0,
        starsByLevel: { level1: 0, level2: 0, level3: 0, level4: 0 },
        levelRecords: {
            level1: { attempts: 0, successes: 0, bestScore: 0, lastRating: "" },
            level2: { attempts: 0, successes: 0, bestScore: 0, lastRating: "" },
            level3: { attempts: 0, successes: 0, bestScore: 0, lastRating: "" },
            level4: { attempts: 0, successes: 0, bestScore: 0, lastRating: "" }
        },
        redeemedRewards: [],
        rewardHistory: [],
        achievements: [],
        lastPlayDate: new Date().toISOString().split('T')[0]
    };
}

// 检查每日首次登录奖励
function checkDailyLoginBonus() {
    const today = new Date().toISOString().split('T')[0];
    if (playerData.lastPlayDate !== today) {
        playerData.englishStars += 5;
        playerData.totalStarsEarned += 5;
        playerData.lastPlayDate = today;
        savePlayerData();
        updateStarsDisplay();
        showFeedback('info', '🌅 每日登录奖励：+5 ⭐');
    }
}

✅ 背景：仓库货架/储物柜/传送带等元素
✅ 角色：仓库管理员/帮工
✅ 交互：点击仓库中的物品箱子
✅ 反馈：正确时箱子打开显示内容，错误时箱子摇晃
✅ 语言融入："Welcome to the food warehouse!" / "Can you find the rice?"

✅ 背景：仓库分区货架，每个区域有标签
✅ 角色：仓库理货员
✅ 交互：拖拽物品到货架区域（带碰撞检测防重叠）
✅ 反馈：正确时箱子飞到货架上并亮起绿灯，错误时箱子弹回
✅ 语言融入："Put the rice in the Grains section!" / "Meat goes to Protein!"

✅ 背景：超市场景，有货架、购物车、收银台等元素
✅ 角色：购物者/小顾客
✅ 交互：从货架拖拽食材到购物车，完成清单
✅ 反馈：每找到一个食材打勾✓，完成清单后收银台结算
✅ 语言融入："Shopping list: soup, rice, fruit..." / "Add to cart!"
✅ 场景元素：价格标签、购物车图标、收银台

✅ 背景：厨房台面，有锅碗瓢盆
✅ 角色：小厨师
✅ 任务：根据菜谱准备健康餐
✅ 语言融入："First, add the vegetables..." / "Now, put some rice"

### 🎮 关卡4：金牌店员考核

**场景包装:** 店长考核室，墙上挂着考核题目
**题目类型（场景化）:**
1. 📦 仓库找货（看图选词）- 5题 - "Find the right item!"
2. 🛒 购物清单（听音选图）- 3题 - "Listen and choose!"
3. 📋 货架整理（句子排序）- 2题 - "Put in order!"
4. ✅ 质量检查（判断正误）- 2题 - "Check if correct!"

**场景元素:**
- 考核计时器
- 成绩单面板
- 店长头像（给予鼓励）
- 通过后颁发证书动画

**计分规则:**
- 每题20分，满分120分
- 答错不扣分（鼓励尝试）
- 显示答题时间和准确率

**最终评级:**
- ⭐⭐⭐ 金牌店员（≥100分）- 颁发证书
- ⭐⭐ 资深店员（≥80分）
- ⭐ 见习店员（≥60分）
- 💪 继续努力（<60分）

**语言融入:**
- "Welcome to the final assessment!"
- "You're doing great!"
- "Congratulations! You're now a Gold Member!"

level1-[theme]-[action].html
level2-[theme]-[action].html  
level3-[theme]-[action].html
level4-[theme]-review.html        ← 新增！复习关卡

示例:
level1-food-search.html
level2-plate-match.html
level3-my-creation.html
level4-final-challenge.html       ← 新增！

// 全局变量
let errorCount = 0;
let totalScore = 0;
const baseScore = 100;
const errorPenalty = 15;

// 错误处理函数
function handleError() {
    errorCount++;
    totalScore = Math.max(0, totalScore - errorPenalty);
    
    // 更新UI
    document.getElementById('errorCount').textContent = errorCount;
    document.getElementById('totalScore').textContent = totalScore;
    
    // 播放错误音效和动画
    playSound('wrong');
    showFeedback('error', `❌ 第 ${errorCount} 次错误`);
}

// 评级计算函数
function getRating(errorRate) {
    if (errorRate <= 0.2) return { text: '⭐⭐⭐ 完美', class: 'rating-perfect' };
    if (errorRate <= 0.4) return { text: '⭐⭐ 很棒', class: 'rating-great' };
    if (errorRate <= 0.6) return { text: '⭐ 不错', class: 'rating-good' };
    return { text: '💪 加油', class: 'rating-keep-going' };
}

# [情境名称] —— 完整课堂情境方案（Round & Cute 版）

## 📖 整节课大主线故事：[故事名称]

### 📚 故事背景
[2-3段生动的背景描述，让学生沉浸其中]

### 👤 角色设定
| 角色 | 身份 | 功能 |
|------|------|------|
| 学生 | [角色名] | [学生在故事中的任务] |
| NPC1 | [名字] | [引导关卡1-2] |
| NPC2 | [名字] | [引导关卡3-4] |

### 🗺️ 故事时间线
[用文字或图表展示故事发展脉络，从课前导入到课后总结]

### 🗣️ 教师串词（完整版）

**课前导入（2分钟）：**
> "[完整的开场白，引入故事世界]"

**关卡1 → 关卡2 过渡：**
> "[完整的过渡语]"

**关卡2 → 关卡3 过渡：**
> "[完整的过渡语]"

**关卡3 → 关卡4 过渡：**
> "[完整的过渡语]"

**课后总结（2分钟）：**
> "[完整的结束语，升华主题]"

### 💫 情感线索
[描述学生在整个过程中的情感变化：好奇→挑战→成就感→自豪]

---

## 🎯 情境概述
[2-3段话]

## 🎮 互动关卡详情
[4个关卡的详细说明]

## 🔢 错误记录与评价体系
[统一的错误处理规则和评级标准]

## 💾 已创建文件
[4个HTML文件的列表和路径]

## 📋 教师使用指南
[详细的课堂使用建议]

## ✅ 任务完成！

已为您创建 **4个** Round & Cute 风格的互动游戏：

1. **[file1.html]** - 关卡1：[description]
2. **[file2.html]** - 关卡2：[description]
3. **[file3.html]** - 关卡3：[description]
4. **[file4.html]** - 关卡4：[description] ⭐新增复习巩固

**📖 整节课大主线故事：** [故事名称]
- **故事背景：** [1句话概括]
- **学生角色：** [学生在故事中的身份]
- **NPC角色：** [引导者角色]
- **故事时间线：** 导入 → 关卡1 → 关卡2 → 关卡3 → 关卡4 → 总结

**文件路径:** `[absolute/path/to/files]`

祝您上课顺利！如需调整，随时告诉我！😊

✅ 每个关卡都是真实任务场景（仓库整理、超市购物、厨房做饭等）
✅ 学生有明确角色（仓库管理员、购物者、小厨师等）
✅ 场景中有真实的道具和元素（货架、购物车、收银台等）
✅ 语言自然融入场景（不是在真空中学习英语，而是在完成任务中使用英语）
✅ 完成任务有成就感（整理好仓库、完成购物清单、通过考核等）

❌ 纯抽象的点击选择界面（没有场景包装）
❌ 脱离实际的虚拟练习（学生不知道为什么要做这个）
❌ 没有故事线的孤立关卡（关卡通关后没有成就感）
❌ 缺乏场景元素的单调页面（只有按钮和文字）

❌ 尖锐的直角矩形（用大圆角替代）
❌ 冷色调高对比度配色（用暖色马卡龙替代）
❌ 生硬的线性动画（用弹性缓动曲线替代）
❌ 棱角分明的字体（用圆润字体替代）
❌ 苍白单调的背景（用彩色渐变替代）

✅ 一切都是圆的（按钮、卡片、图标、输入框）
✅ 色彩像糖果一样甜美（粉、黄、绿、蓝的马卡龙色）
✅ 动画像果冻一样Q弹（cubic-bezier 弹跳曲线）
✅ 整体氛围像童话世界（温暖、友好、安全）
✅ 孩子看到就想点击（吸引力优先）
✅ 场景元素也要圆润可爱（圆角货架、圆形货架标签等）

level1-*.html  → 词汇认知（Remember）- 场景化找货
level2-*.html  → 分类整理（Understand）- 场景化分类
level3-*.html  → 任务执行（Create）- 场景化任务
level4-*.html  → 复习巩固（Evaluate）⭐必选- 场景化考核

✅ errorCount 变量
✅ handleError() 函数
✅ 扣分机制（baseScore - errorPenalty）
✅ 错误次数显示UI
✅ getRating() 评级函数
✅ 完成界面的评级徽章

✅ 优先使用 CSS Animations（性能更好）
✅ 合理控制动画数量（不要太多同时运行）
✅ 图片使用 emoji 或 SVG（不依赖外部资源）
✅ 字体使用 Google Fonts（CDN加速）
⚠️ 移动端简化动画效果（保持流畅）

✅ 语义化 HTML 标签
✅ 足够的颜色对比度（WCAG AA 标准）
✅ 键盘可访问（Tab 键导航）
✅ ARIA 标签（动态内容更新时）
✅ Focus states（清晰的焦点指示器）
✅ 大尺寸触摸目标（最小 48x48px）

✅ 已创建 4 个现实场景互动游戏（Round & Cute 风格）:
  - level1-food-search.html (🏭 食材仓库找货)
  - level2-plate-match.html (📦 仓库整理货物)
  - level3-my-creation.html (🛒 超市购物清单)
  - level4-final-challenge.html (🏆 金牌店员考核) ⭐

🎮 场景特色:
  - 关卡1：仓库货架场景，扮演管理员找货
  - 关卡2：仓库分区货架，拖拽分类整理
  - 关卡3：超市场景，按清单完成购物任务
  - 关卡4：店长考核室，综合能力测评

🎨 视觉特色:
  - 字体: Fredoka One + Quicksand（超圆润）
  - 配色: 马卡龙色系（糖果粉/奶油黄/薄荷绿）
  - 形状: 超大圆角 + 胶囊形
  - 动影: Q弹果冻 + 糖果掉落
  - 氛围: 温暖甜美童话世界