{[0, 1, 2].map(i => (

setLocal(p => ({ ...p, screen: i, tappedSeg: null, editingStat: null }))} style={{ width: local.screen === i ? 28 : 10, height: 10, borderRadius: 5, background: local.screen === i ? accentGrad : '#c8d0d8', boxShadow: local.screen === i ? '0 0 12px rgba(108,92,231,0.4)' : 'none', transition, cursor: 'pointer' }} /> ))}

); const renderQuestScreen = () => (

⚔️ Active Side Quest

{quest?.icon ?? '⭐'}

{quest?.title ?? 'No quest'}

{(quest?.companions ?? []).map(c => `@${c}`).join(' · ')}

Progress {quest?.progress ?? 0}%

👆 Tap to log progress & summon cheers

{(local.cheerBursts ?? []).map(c => (

{c?.text ?? '✨'}

))}

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

{m?.avatarUrl ?

: '👤'} {m?.displayName ?? 'Companion'}

))}

{secretMode && (

🤫 Hyper-Independent Mode: Support only, no unsolicited advice

)}

); const moodColors = { chaos: ['#e17055', '#d63031'], sleep: ['#74b9ff', '#0984e3'], movement: ['#00b894', '#00cec9'] }; const moodLabels = { chaos: '🌀 Chaos', sleep: '😴 Sleep', movement: '🏃 Movement' }; const moodUnits = { chaos: '%', sleep: 'hrs', movement: '%' }; const renderMoodRing = () => { const stats = ['chaos', 'sleep', 'movement']; const total = (mood?.chaos ?? 50) + ((mood?.sleep ?? 6) * 8.33) + (mood?.movement ?? 30); const ringHue = Math.round((total / 300) * 280); return (

💎 Mood Ring

{(mood?.chaos ?? 50) > 70 ? '🤯' : (mood?.sleep ?? 6) < 4 ? '😵' : (mood?.movement ?? 30) > 70 ? '⚡' : '✨'}

{(stats || []).map((key) => { const val = mood?.[key] ?? (key === 'sleep' ? 6 : 50); const colors = moodColors[key]; const isEditing = local.editingStat === key; const isTapped = local.tappedSeg === key; return (

setLocal(p => ({ ...p, tappedSeg: p.tappedSeg === key ? null : key, editingStat: null, editVal: null }))} style={{ background: bg, borderRadius: 20, padding: '16px 20px', boxShadow: isTapped ? shadowInset : shadowSmall, transition, cursor: 'pointer', transform: isTapped ? 'scale(0.98)' : 'scale(1)' }}>

{moodLabels[key]} {key === 'sleep' ? `${val}${moodUnits[key]}` : `${val}${moodUnits[key]}`}

{isTapped && (

)}

); })}

); }; const renderCompanions = () => (

🛡️ Quest Board

{(quests ?? []).map((q, i) => { const item = q ?? { title: 'Unknown', icon: '❓', progress: 0 }; const isActive = item.title === quest?.title; return (

{ saveData({ ...d, activeQuest: { ...item, cheers: quest?.cheers ?? [], companions: quest?.companions ?? ['Luna', 'Kai', 'Remy'] } }); setLocal(p => ({ ...p, screen: 0 })); }} style={{ background: bg, borderRadius: 20, padding: '18px 20px', boxShadow: isActive ? shadowInset : shadowSmall, cursor: 'pointer', transition, transform: isActive ? 'scale(0.97)' : 'scale(1)', display: 'flex', alignItems: 'center', gap: 14, animation: `fadeSlideUp 0.${3 + i}s ease both` }}>

{item.icon}

{item.title}

{item.progress ?? 0}%

); })}

{secretMode ? 'Friends can support but no unsolicited advice 💜' : 'Companions can freely share ideas & encouragement'}

); const screens = [renderQuestScreen, renderMoodRing, renderCompanions]; const screenTitles = ['Side Quest', 'Mood Ring', 'Quest Board']; return (

⚔️ Side Quester

{screenTitles[local.screen] ?? 'Quest'}

{renderDots()}

{(screens[local.screen] ?? screens[0])()}

← swipe to navigate →

); }