# 🎮 遊戲化元件

成就、等級、排行榜、任務等遊戲化元件

## 成就卡片 (Achievement Cards)

🏆
首次勝利
完成第一個學習單元
🔥
連續學習者
連續學習7天
🎯
完美精準
連續答對50題

    <div class="achievement-card">
        <div class="achievement-icon">🏆</div>
        <div class="achievement-title">首次勝利</div>
        <div class="achievement-description">完成第一個學習單元</div>
    </div>

    <!-- 鎖定狀態 -->
    <div class="achievement-card achievement-locked">
        <div class="achievement-icon">🎯</div>
        <div class="achievement-title">完美精準</div>
        <div class="achievement-description">連續答對50題</div>
    </div>

## 等級進度 (Level Progress)

12
當前等級
中級學習者
下一級： 高級學習者
1,950 / 3,000 XP

    <div class="level-progress">
        <div class="level-header">
            <div class="level-info">
                <div class="level-badge">12</div>
                <div class="level-text">
                    <div class="level-title">當前等級</div>
                    <div class="level-value">中級學習者</div>
                </div>
            </div>
        </div>
        <div class="level-progress-bar">
            <div class="level-progress-fill" style="width: 65%">
                <span class="level-progress-text">1,950 / 3,000 XP</span>
            </div>
        </div>
    </div>

## 經驗值與金幣計數器 (XP & Coin Counters)

⚡
+50 XP
💰
1,250

    <div class="xp-counter">
        <div class="xp-icon">⚡</div>
        <span class="xp-value">+50 XP</span>
    </div>

    <div class="coin-counter">
        <div class="coin-icon">💰</div>
        <span class="coin-value">1,250</span>
    </div>

## 連續天數 (Streak Counter)

🔥
7
連續學習天數

    <div class="streak-counter">
        <div class="streak-flames">🔥</div>
        <div class="streak-number">7</div>
        <div class="streak-label">連續學習天數</div>
    </div>

## 排行榜 (Leaderboard)

🏆 本週排行榜
1
Alice Chen
Level 15
2,450
2
Bob Wang
Level 14
2,320
3
Carol Liu
Level 13
2,180
4
David Lin
Level 12
1,950

    <div class="leaderboard">
        <div class="leaderboard-header">🏆 本週排行榜</div>
        <div class="leaderboard-item">
            <div class="leaderboard-rank gold">1</div>
            <div class="leaderboard-user">
                <div class="leaderboard-name">Alice Chen</div>
                <div class="leaderboard-score">Level 15</div>
            </div>
            <div class="leaderboard-points">2,450</div>
        </div>
    </div>

## 任務卡片 (Quest Card)

每日任務

### 學習大師

完成今天的學習目標，獲得豐厚獎勵

- ✓ 學習10個新詞彙
- ✓ 完成3次口說練習
- 參與1次情境對話

⚡ 100 XP
💰 50 金幣
🎁 神秘寶箱

    <div class="quest-card">
        <span class="quest-badge">每日任務</span>
        <h3 class="quest-title">學習大師</h3>
        <p class="quest-description">完成今天的學習目標</p>
        <ul class="quest-objectives">
            <li class="quest-objective completed">
                <span class="quest-objective-checkbox">✓</span>
                學習10個新詞彙
            </li>
        </ul>
        <div class="quest-rewards">
            <div class="quest-reward">
                <span>⚡</span> 100 XP
            </div>
        </div>
    </div>

## 道具 (Power-ups)

⏰
時間凍結
3
💡
提示
5
🛡️
護盾
2
⚡
雙倍經驗
1
🎯
完美通關
1

    <div class="powerup-grid">
        <div class="powerup-item active">
            <div class="powerup-icon">⏰</div>
            <div class="powerup-name">時間凍結</div>
            <span class="powerup-count">3</span>
        </div>
        <div class="powerup-item">
            <div class="powerup-icon">💡</div>
            <div class="powerup-name">提示</div>
            <span class="powerup-count">5</span>
        </div>
    </div>