{/* 🎉 CONFETTI OVERLAY */} {showConfetti && (

🎉✨🎊

)} {/* 🔊 SOUND TOAST */} {lastSound && (

{lastSound}

)} {/* 🧭 HEADER: PORTAL & VIBE */}

{/* Vibe Meter */}

{Object.keys(VIBES || {}).map(key => ( ))}

{/* Portal Switcher */}

{/* 📜 FEED AREA */}

{/* Empty State */} {(displayedMissions || []).length === 0 && (

📭

No missions yet!

Start the chaos by creating one below.

)} {/* Mission Cards */} {(displayedMissions || []).map((m, i) => (

{/* Author Header */}

{!m.author?.avatar && (m.mode === 'UMICH' ? '🐺' : '👔')}

{m.author?.name || 'Anonymous'}

{m.type === 'hot-take' ? '🔥 HOT TAKE' : m.type === 'strategy' ? '📊 STRATEGY' : m.type === 'dilemma' ? '⚖️ DILEMMA' : '🗳️ POLL'}

{/* Chat Button */} {isMultiplayer && m.author?.id !== user.id && ( )}

{/* Content */}

{m.text}

{/* Poll Options (Visual only for sample) */} {m.options && (

{(m.options || []).map(opt => (

{opt.text} {opt.votes}%

))}

)} {/* Reaction Bar */}

{['🔥','😂','💀','💎','🤔'].map(emoji => ( ))}

))}

{/* ➕ FAB: NEW MISSION */} {/* 🛠️ BOTTOM SHEET: CREATE MISSION */} {isCreating && (

setIsCreating(false)} style={{ flex: 1, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }} />

{activeMode === 'UMICH' ? '🐺 New Chaos Mission' : '🏙️ New Strategic Initiative'}

setNewMissionText(e.target.value)}
              placeholder={activeMode === 'UMICH' 
                ? "Share a hot take, a poll, or a dare..."
                : "Propose a framework, a dilemma, or 'circle back' on something..."}
              style={{
                width: '100%', height: 100, borderRadius: 16, padding: 16,
                border: '2px solid #EEE', fontSize: 16, fontFamily: 'inherit',
                resize: 'none', boxSizing: 'border-box', marginBottom: 16,
                background: '#F9F9F9', color: '#333'
              }}
              autoFocus
            />

<button onClick={handleAddMission} style={{
              width: '100%', height: 52, borderRadius: 16, border: 'none',
              background: 'linear-gradient(90deg, #FFD700, #FFA500)',
              color: '#FFF', fontSize: 18, fontWeight: 700,
              boxShadow: '0 4px 12px rgba(255,165,0,0.3)'
            }}>
              Launch Mission 🚀
            </button>
          </div>
        </div>
      )}

{/* 👥 MEMBER AVATARS (Shared Context) */}
      {isMultiplayer && (
        <div style={{
          position: 'fixed', top: 'max(env(safe-area-inset-top, 20px), 20px)', right: 16,
          display: 'flex', gap: -8
        }}>
          {(memberList || []).slice(0, 3).map((m, i) => (
            <div key={m.id} onClick={() => openProfile(m.handle)} style={{
              width: 32, height: 32, borderRadius: '50%', border: '2px solid #FFF',
              background: m.avatarUrl ? `url(${m.avatarUrl})` : '#DDD',
              backgroundSize: 'cover', marginLeft: i > 0 ? -10 : 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12,
              cursor: 'pointer', zIndex: 10 - i
            }}>
              {!m.avatarUrl && (m.displayName?.[0] || '?')}
            </div>
          ))}
          {(memberList || []).length > 3 && (
             <div style={{
              width: 32, height: 32, borderRadius: '50%', border: '2px solid #FFF',
              background: '#333', color: '#FFF', marginLeft: -10,
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10,
              zIndex: 0
            }}>+{(memberList || []).length - 3}</div>
          )}
        </div>
      )}