{/* Header & Sparkle Meter */}

Magic Chores ✨

{isMultiplayer && ( )}

{/* Streak Bar */}

Level {level} Sparkle {streak} completed!

{/* Chores List */}

{/* Active Chores */} {(chores || []).filter(c => !c.completed).length === 0 && (

🌈

All caught up! Add a new chore to keep the magic going.

)} {(chores || []).filter(c => !c.completed).map(chore => (

toggleChore(chore.id)} style={{ background: '#ffffff', borderRadius: 24, padding: '16px 20px', marginBottom: 12, boxShadow: '0 4px 20px rgba(0,0,0,0.03)', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer', border: '2px solid transparent', transition: 'transform 0.2s, border-color 0.2s', }} >

{chore.text}

))} {/* Done Section Header */} {(chores || []).some(c => c.completed) && (

Done & Dusted

)} {/* Completed Chores */} {(chores || []).filter(c => c.completed).map(chore => (

toggleChore(chore.id)} style={{ background: 'rgba(255,255,255,0.6)', borderRadius: 24, padding: '16px 20px', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer', opacity: 0.8 }} >

✓

{chore.text}

{chore.completedBy && (

{getMemberAvatar(chore.completedBy) && (

e.currentTarget.style.display = 'none'} /> )} Sparkled by {getMemberName(chore.completedBy)}

)}

))}

{/* Input Area */}

setNewChore(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleAddChore()} placeholder="What needs a little magic? ✨" style={{ flex: 1, border: 'none', padding: '0 16px', fontSize: 16, background: 'transparent', outline: 'none', minHeight: 48, color: '#4a4a4a', fontFamily: 'inherit' }} />

{/* Sparkle Overlay */} {(sparkles || []).map(sparkle => (

✨

))}

); }