{ handleTapFeedback(frag.id); setExpandedId(isExpanded ? null : frag.id); }} style={{ gridColumn: isSpan2 ? 'span 2' : 'span 1', background: `linear-gradient(135deg, ${frag.color ?? '#FFD700'}22, ${frag.color ?? '#FFD700'}44)`, border: `1.5px solid ${frag.color ?? '#FFD700'}66`, borderRadius: 20, padding: isExpanded ? 24 : 16, cursor: 'pointer', transition: baseTransition, transform: `scale(${isTapped ? 0.93 : chaosAnim ? (0.85 + Math.random() * 0.3) : 1}) rotate(${chaosAnim ? (-5 + Math.random() * 10) : 0}deg)`, opacity: mountAnim ? 1 : 0, animation: mountAnim ? `slideUp 0.5s ease ${idx * 0.08}s both` : 'none', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', overflow: 'hidden', position: 'relative', minHeight: isExpanded ? 180 : 90, boxShadow: isExpanded ? `0 8px 32px ${frag.color ?? '#FFD700'}44` : `0 2px 12px rgba(0,0,0,0.2)`, }} >

{frag.emoji ?? '⭐'}

{frag.label ?? ''}

{isExpanded && (

{frag.content ?? ''}

{frag.type === 'poll' && (

{(frag.options ?? []).map((opt, oi) => { const key = oi === 0 ? 'a' : 'b'; const total = (frag.votes?.a ?? 0) + (frag.votes?.b ?? 0); const pct = total > 0 ? Math.round(((frag.votes?.[key] ?? 0) / total) * 100) : 50; return (

{ e.stopPropagation(); handleVote(frag.id, oi); }} style={{ flex: 1, padding: '12px 8px', borderRadius: 14, textAlign: 'center', background: `linear-gradient(135deg, ${frag.color}33, ${frag.color}66)`, border: `1px solid ${frag.color}88`, cursor: 'pointer', transition: baseTransition, fontSize: 14, fontWeight: 600, color: '#fff' }}> {opt} {pct}%

); })}

)} {frag.type === 'challenge' && (

{ e.stopPropagation(); if (!frag.completed) handleComplete(frag.id); }} style={{ padding: '12px 20px', borderRadius: 14, textAlign: 'center', background: frag.completed ? '#4CAF5044' : `${frag.color}44`, border: `1px solid ${frag.completed ? '#4CAF50' : frag.color}88`, cursor: frag.completed ? 'default' : 'pointer', fontWeight: 700, fontSize: 15, color: frag.completed ? '#4CAF50' : '#fff', transition: baseTransition }}> {frag.completed ? '✅ Completed!' : '⚡ Accept Dare'}

)} {frag.type === 'mood' && (

)}

); }; return (

{/* Confetti Layer */} {(confetti || []).map(p => (

0.5 ? '50%' : 2, animation: `confettiFall ${1.5 + p.delay}s ease-out ${p.delay}s forwards`, transform: `rotate(${p.rotation}deg)`, zIndex: 1000, pointerEvents: 'none' }} /> ))} {/* Ambient Glow Orbs */}

{/* Header */}

{moodEmojis[currentMood] ?? '✨'}

PULSE & CHAOS

{(memberList || []).length} soul{(memberList || []).length > 1 ? 's' : ''} connected · {chaosCount} chaos event{chaosCount !== 1 ? 's' : ''}

{/* Nav Tabs */}

{[{ key: 'board', label: '🎆 Board' }, { key: 'reflect', label: '🔮 Reflect' }].map(tab => (

setView(tab.key)} style={{ flex: 1, padding: '12px 0', borderRadius: 16, textAlign: 'center', fontSize: 15, fontWeight: 700, cursor: 'pointer', transition: baseTransition, background: view === tab.key ? 'linear-gradient(135deg, #FFD70033, #FF6B9D33)' : 'rgba(255,255,255,0.04)', border: view === tab.key ? '1px solid #FFD70066' : '1px solid rgba(255,255,255,0.08)', color: view === tab.key ? '#FFD700' : '#888', transform: view === tab.key ? 'scale(1.02)' : 'scale(1)' }}> {tab.label}

))}

{/* Board View */} {view === 'board' && (

{(fragments || []).map((frag, idx) => renderFragment(frag, idx))}

{/* Members Strip */} {(memberList || []).length > 1 && (

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

{m?.avatarUrl ?

: '🎭'}

{m?.displayName ?? 'Anon'}

))}

)}

)} {/* Reflection View */} {view === 'reflect' && (

🔮

Reflection Chamber

Messages unfold when the time is right

{(reflections || []).map((ref, idx) => { if (!ref) return null; const isRevealed = ref.revealed ?? false; return (

{ if (!isRevealed) { revealReflection(ref.id); spawnConfetti(); } }} style={{ padding: 20, borderRadius: 20, cursor: isRevealed ? 'default' : 'pointer', background: isRevealed ? 'linear-gradient(135deg, rgba(255,215,0,0.08), rgba(192,192,192,0.08))' : 'linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06))', border: isRevealed ? '1px solid #FFD70033' : '1px solid rgba(255,255,255,0.08)', transition: baseTransition, animation: `slideUp 0.4s ease ${idx * 0.1}s both`, backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', boxShadow: isRevealed ? '0 4px 20px rgba(255,215,0,0.1)' : 'none' }} > {isRevealed ? (

"{ref.text ?? ''}"

— {ref.from ?? 'Unknown'}

) : (

📜

A message awaits...

Tap to unfold

)}

); })}

{/* Add Note */}

setNewNote(e.target.value)} placeholder="Leave a cryptic note..." style={{ flex: 1, padding: '14px 18px', borderRadius: 16, border: '1px solid rgba(255,215,0,0.2)', background: 'rgba(255,255,255,0.04)', color: '#E8D5B7', fontSize: 15, outline: 'none', fontFamily: 'inherit', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)' }} onKeyDown={(e) => { if (e.key === 'Enter') addReflection(); }} />

✨

)} {/* Chaos Button - Fixed */}

🎆 {chaosAnim ? 'CHAOS!' : 'TRIGGER CHAOS'} 🎆

{/* Art Deco Corner Lines */}

); }