{/* FLOATING PETALS */} {(sparkles || []).map(s => { const age = (Date.now() - s.born) / 4000; return (

{s.type}

); })} {/* LACE TOP BORDER */}

{/* HEADER */}

✧ le boudoir de ✧

{userName}

🎀 coquette · dreamer · muse 🎀

{/* HERO: NOW PLAYING CARD */}

♫ NOW PLAYING

{currentSong.emoji}

{currentSong.title}

{currentSong.artist}

{/* Play bar */}

{playing ? '⏸' : '▶️'}

{currentSong.mood}

{/* SONG CAROUSEL */}

{(songs || []).map((song, i) => (

handleSongSelect(i)} style={{ minWidth: 90, padding: '12px 8px', borderRadius: 16, background: i === activeSong ? `linear-gradient(135deg, ${song?.color ?? '#E8B4C8'}88, #FFFFFF77)` : '#FFFFFF44', border: i === activeSong ? `2px solid ${song?.color ?? '#E8B4C8'}` : '1px solid #F0D0E040', textAlign: 'center', cursor: 'pointer', transform: i === activeSong ? 'scale(1.05)' : 'scale(1)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', boxShadow: i === activeSong ? `0 4px 16px ${song?.color ?? '#E8B4C8'}44` : 'none' }}>

{song?.emoji ?? '🎵'}

{song?.title ?? 'Song'}

{song?.artist ?? ''}

))}

{/* WHISPER & REVEAL TAPESTRY */}

✧ whispered secrets ✧

{(secrets || []).map((secret, i) => { const s = secret ?? { icon: '✨', revealed: false, text: '...', type: 'thought' }; const isAnimating = revealAnim === i; const isRevealed = s.revealed; return (

handleReveal(i)} style={{ aspectRatio: '1', borderRadius: 20, background: isRevealed ? `linear-gradient(135deg, ${currentSong.color}44, #FFF5F8, #FFFFFF88)` : 'linear-gradient(135deg, #FFF5F8, #FFEEF5, #FDF0F5)', border: isRevealed ? `1.5px solid ${currentSong.color}66` : '1px solid #F0D0E050', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 8, transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)', transform: isAnimating ? 'scale(1.12) rotate(3deg)' : 'scale(1)', boxShadow: isRevealed ? `0 4px 20px ${currentSong.color}33, inset 0 0 20px #FFFFFF66` : '0 2px 8px #E8B4C822', position: 'relative', overflow: 'hidden' }}> {/* Locket shimmer */} {isAnimating && (

)} {!isRevealed ? ( <>

{s.icon}

tap me

) : (

{s.icon}

{s.text}

)}

); })}

{/* BOTTOM FLOURISH */}

🎀 🌸 💌 🦋 🎀

"she wore her secrets like pearls"

{/* KEYFRAMES */}

); }