{/* Falling Confetti Background Effect */} {[...Array(15)].map((_, i) => (

))} {/* Header */}

RESONANCE

New Year Edition

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

0 ? -12 : 0, boxShadow: '0 0 10px rgba(0,0,0,0.5)', zIndex: 4 - i, }}> {!m?.avatarUrl && (m?.displayName?.[0] ?? '?')}

))}

{/* Navigation */}

{(navZones || []).map(z => ( ))}

{/* Content Area */}

{/* ===== PARTY ZONE (Soundscape) ===== */} {activeZone === 'soundscape' && (

{/* Visualizer */}

{/* Art Deco Sunburst Lines */} {[...Array(12)].map((_, i) => (

))} {/* Center Countdown Clock / Disco Ball */}

Live Sounds

{activeCount}

{/* Clock Hands Animation */}

{/* Fragments as Bubbles */} {(fragments || []).map((f, i) => { const frag = f ?? {}; const isSelected = selectedFragment === frag.id; const isActive = frag.active; // Orbit animation const angle = (phase * 0.5 + i * (360 / (fragments || []).length)) * (Math.PI / 180); const radius = 100; const ox = Math.cos(angle) * radius; const oy = Math.sin(angle) * radius; return ( ); })}

{/* Selected Detail - Ticket Stub Style */} {selectedFragment && (() => { const sel = (fragments || []).find(f => f?.id === selectedFragment); if (!sel) return null; return (

{/* Corner Accents */}

{sel.emoji}

{sel.label}

Curated by {sel.owner}

Emotion

{sel.emotion}

Sensation

{sel.bodyFeel}

); })()}

)} {/* ===== UNMASKED ZONE (Confessions) ===== */} {activeZone === 'unmasked' && (

MIDNIGHT CONFESSIONS

{(unmaskedPrompts || []).map((p, pi) => { const prompt = p ?? {}; const isExpanded = local.selectedPromptId === prompt.id; return (

{(prompt.responses || []).length > 0 && (

{(prompt.responses || []).map((r, ri) => (

"{r.text}"

— {r.name}

))}

)} {isExpanded && (

setLocal(prev => ({ ...prev, unmaskedInput: e.target.value }))} placeholder="Speak your truth..." style={{ flex: 1, background: 'transparent', border: 'none', borderBottom: '1px solid #666', color: '#FFF', padding: 8, outline: 'none' }} />

)}

); })}

)} {/* ===== REFLECT ZONE (Resolutions) ===== */} {activeZone === 'reflect' && (

Current Vibe

{appData?.currentMood ?? 'Sparkling'}

{['glamorous', 'nostalgic', 'wild', 'peaceful', 'electric'].map(mood => ( ))}

setLocal(prev => ({ ...prev, reflectionInput: e.target.value }))}
                  placeholder="Write your resolution or wish..."
                  rows={3}
                  style={{ width: '100%', background: 'transparent', border: 'none', color: '#FFF', fontSize: 16, outline: 'none', fontFamily: "'Inter', sans-serif", resize: 'none' }}
               />
               <button 
                 onClick={addReflection}
                 style={{ ...btnBase, width: '100%', marginTop: 12, background: '#FFD700', color: '#000', padding: 12, borderRadius: 4, fontWeight: 700 }}
               >SEAL IT 🥂</button>
            </div>

{(reflections || []).map((r, i) => (
               <div key={i} style={{ ...decoStyle, border: 'none', borderBottom: '1px solid #333', borderRadius: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                     <span style={{ fontSize: 11, color: '#FFD700', textTransform: 'uppercase' }}>{r.timestamp}</span>
                     <span style={{ fontSize: 11, color: '#666' }}>{r.owner}</span>
                  </div>
                  <div style={{ fontSize: 14, color: '#BBB', marginBottom: 4 }}>{r.prompt}</div>
                  <div style={{ fontSize: 16, color: '#FFF', fontFamily: "'Playfair Display', serif" }}>{r.answer}</div>
               </div>
            ))}
          </div>
        )}

</div>
    </div>
  );
}</article></body></html>