<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>

<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>

<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>

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

<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>

<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>

<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>