{(pearlDots || []).map(i => (

))}

✧ Harvard Edition ✧

Main Character Mode ✨

{['moment', 'eras', 'episode'].map(zone => ( ))}

{activeZone === 'moment' && (

setVibePickerOpen(!vibePickerOpen)} style={{ background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(20px)', borderRadius: 24, padding: '16px 20px', border: '1px solid rgba(255,180,200,0.4)', cursor: 'pointer', transition: 'all 0.3s ease', transform: vibePickerOpen ? 'scale(1.02)' : 'scale(1)', animation: 'pulseGlow 3s ease-in-out infinite' }} >

today's vibe ♡

{currentVibe ? (

{currentVibeData?.emoji ?? '🎀'} {currentVibe}

) : (

tap to choose your vibe...

)}

{vibePickerOpen && (

{(vibes || []).map((v, i) => ( ))}

)} {!vibePickerOpen && latestMoment && (

{ setCardFlipped(!cardFlipped); handleTap('card'); }} style={{ flex: 1, minHeight: 280, background: cardFlipped ? 'linear-gradient(145deg, rgba(200,167,235,0.4), rgba(255,212,232,0.5))' : 'rgba(255,255,255,0.5)', backdropFilter: 'blur(20px)', borderRadius: 28, padding: 24, border: '1px solid rgba(255,180,200,0.4)', cursor: 'pointer', transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)', transform: tapScale['card'] ? 'scale(0.97)' : 'scale(1)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', position: 'relative', overflow: 'hidden', animation: 'flipIn 0.5s ease-out' }} >

🎀

{!cardFlipped ? (

{latestMoment?.emoji ?? '✨'}

✧ latest moment ✧

"{latestMoment?.text ?? ''}"

♡ {latestMoment?.vibe ?? ''}

tap to flip ↻

) : (

✧ energy reactions ✧

{(reactionEmojis || []).map(emoji => { const count = latestMoment?.reactions?.[emoji] ?? 0; return ( ); })}

era: {latestMoment?.era ?? 'uncharted'}

tap to flip back ↻

)}

)} {!vibePickerOpen && (

{(moments || []).slice(1, 4).map((m, i) => { const moment = m ?? {}; return (

handleTap('mini-' + i)} style={{ minWidth: 130, padding: 14, background: 'rgba(255,255,255,0.45)', backdropFilter: 'blur(15px)', borderRadius: 18, border: '1px solid rgba(255,180,200,0.25)', transition: 'all 0.3s ease', transform: tapScale['mini-' + i] ? 'scale(0.95)' : 'scale(1)', cursor: 'pointer' }} >

{moment?.emoji ?? '✨'}

{(moment?.text ?? '').slice(0, 40)}...

); })}

)}

)} {activeZone === 'eras' && (

✧ your personal eras ✧

growth isn't linear, it's fashionable

{(eras || []).map((era, i) => { const eraItem = era ?? {}; const isSelected = selectedEra === i; return (

{ setSelectedEra(isSelected ? null : i); handleTap('era-' + i); }} style={{ background: isSelected ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.45)', backdropFilter: 'blur(20px)', borderRadius: 22, padding: isSelected ? '20px' : '16px 20px', border: isSelected ? '2px solid ' + (eraItem?.color ?? '#FFD4E8') : '1px solid rgba(255,180,200,0.3)', cursor: 'pointer', transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)', transform: tapScale['era-' + i] ? 'scale(0.97)' : 'scale(1)', animation: `slideUp 0.4s ease-out ${i * 0.1}s both` }} >

{eraItem?.icon ?? '✨'}

{eraItem?.name ?? 'Unknown Era'}

{eraItem?.count ?? 0} moments logged

♡

{isSelected && (

{['✨', '🎀', '💭'].map((sparkle, j) => (

{sparkle}

))}

{(moments || []).filter(m => m?.era === eraItem?.name).map(m => m?.text ?? '').join(' • ') || 'Memories are being curated...'}

🎀 mood collage: {eraItem?.count ?? 0} aesthetic spirals documented

)}

); })}

)} {activeZone === 'episode' && (

✧ today's city episode ✧

📖

"{state?.cityEpisode ?? 'Write your episode...'}"

— {memberList?.[0]?.displayName ?? 'main character'}, Harvard Yard

🌀 weekly unhinged prompt

{state?.prompt ?? 'What\'s your current delusion?'}

"{state?.promptAnswer ?? 'Tap to share your delusion...'}"

{isMultiplayer && (memberList || []).length > 1 && (

🎀 main characters in this scene

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

♡ {member?.displayName ?? 'anon'}

))}

)}

{[ { label: 'total moments', value: (moments || []).length, icon: '💫' }, { label: 'active eras', value: (eras || []).length, icon: '🦢' }, { label: 'reactions given', value: (moments || []).reduce((sum, m) => sum + Object.values(m?.reactions ?? {}).reduce((a, b) => a + b, 0), 0), icon: '✨' }, { label: 'main character days', value: (moments || []).length + 3, icon: '👑' } ].map((stat, i) => (

handleTap('stat-' + i)} style={{ padding: 16, background: 'rgba(255,255,255,0.45)', backdropFilter: 'blur(15px)', borderRadius: 18, textAlign: 'center', border: '1px solid rgba(255,180,200,0.25)', cursor: 'pointer', transition: 'all 0.3s ease', transform: tapScale['stat-' + i] ? 'scale(0.93)' : 'scale(1)' }} >

{stat.icon}

{stat.value}

{stat.label}

))}

)}

♡ your story is the main event ♡

); }