{/* Background Pattern */}

{/* Floating decorative elements */} {['🏮', '✨', '🧧', '✨', '🏮'].map((emoji, i) => (

{emoji}

))} {/* Firework particles overlay */} {local.showFireworks && (local.fireworkParticles ?? []).map(p => (

))} {/* Coin shower */} {local.coinShower && Array.from({ length: 12 }, (_, i) => (

🪙

))} {/* CONTENT */}

{/* UNSW Badge */}

🎓 UNSW ENGLISH SCHOLAR

{/* Members row for multiplayer */} {(memberList || []).length > 1 && (

{(memberList || []).slice(0, 6).map((m, i) => (

{!m?.avatarUrl && (m?.displayName?.[0] ?? '🧑')}

))}

)} {/* === HERO: PROSPERITY LANTERN === */}

{/* Lantern string */}

{/* Lantern top */}

{/* Lantern body */}

{/* Inner glow pattern */}

{/* Chinese character for progress */}

{progressPercent >= 80 ? '福' : progressPercent >= 50 ? '學' : '進'}

{/* Progress number */}

{progressPercent}%

MASTERY

{/* Lantern bottom */}

{/* Lantern tassel */}

TAP TO ILLUMINATE ✨

{/* === STATS BENTO === */}

{[ { label: 'Words', value: stats?.wordsLearned ?? 0, emoji: '📖', color: '#FFD700' }, { label: 'Hours', value: stats?.hoursStudied ?? 0, emoji: '⏰', color: '#FF6347' }, { label: 'Day Streak', value: stats?.daysStreak ?? 0, emoji: '🔥', color: '#FF8C00' }, { label: 'Lessons', value: stats?.lessonsCompleted ?? 0, emoji: '📚', color: '#FFE4B5' } ].map((s, i) => (

{s.emoji}

{s.value}

{s.label.toUpperCase()}

))}

{/* === ACHIEVEMENT SCROLLS === */}

🧧 Achievement Scrolls

{(achievements || []).map((ach, i) => { const a = ach ?? {}; const isSelected = local.selectedAchievement === a.id; const isUnlocked = a.unlocked ?? false; const isOpened = a.opened ?? false; return (

handleEnvelopeOpen(a.id)} style={{ background: isUnlocked ? 'linear-gradient(135deg, #8B0000 0%, #CC0000 50%, #8B0000 100%)' : 'linear-gradient(135deg, #333 0%, #555 100%)', border: isSelected ? '2px solid #FFD700' : `1px solid ${isUnlocked ? 'rgba(255,215,0,0.3)' : 'rgba(255,255,255,0.1)'}`, borderRadius: 14, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12, cursor: isUnlocked ? 'pointer' : 'default', transition: 'all 0.3s cubic-bezier(0.4,0,0.2,1)', transform: isSelected ? 'scale(1.02)' : 'scale(1)', boxShadow: isSelected ? '0 4px 20px rgba(255,215,0,0.3)' : 'none', opacity: isUnlocked ? 1 : 0.5, position: 'relative', overflow: 'hidden' }} > {/* Golden shimmer on unlocked */} {isUnlocked && (

)}

{a.emoji ?? '🏆'}

{a.title ?? 'Achievement'}

{isUnlocked ? (isOpened ? '🪙 Opened' : '🧧 Tap to open') : '🔒 Locked'}

{isUnlocked && (

+{a.coins ?? 0} 🪙

)}

{/* Unfurled scroll detail */} {isSelected && isUnlocked && (

"{a.detail ?? 'A remarkable achievement on your journey.'}"

{['🎆', '🧧', '🪙', '🏮'].map((e, j) => ( {e} ))}

)}

); })}

{/* Bottom fortune */}

學無止境 · LEARNING NEVER ENDS

🏮

); }