{/* 🌌 HEADER: Minimal & Mythic */}

ARENA

{isMultiplayer ? `${memberList.length} Active` : 'Solo Mode'}

{/* 🏮 VIEW: ARENA MAP */} {view === 'arena' && (

{(worlds || []).map((world, i) => (

setActiveWorldId(world.id)} style={{ ...styles.glassPanel, padding: 16, position: 'relative', transform: bloomAnimation === world.id ? 'scale(1.05)' : 'scale(1)', transition: 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', animation: bloomAnimation === world.id ? 'bloom 0.5s ease-out' : 'float 6s ease-in-out infinite', animationDelay: `${i * 0.5}s`, border: activeWorldId === world.id ? '2px solid #FFD700' : styles.glassPanel.border, cursor: 'pointer' }} >

{world.icon}

{world.title}

by {world.creator.name}

{world.responses?.length || 0} ✨

))}

{/* Empty State Hint */} {(worlds || []).length < 2 && (

The arena is quiet.

Spark something.

)}

)} {/* ✨ VIEW: SPARK CREATOR */} {view === 'create' && (

Spark a New World

{['prompt', 'dare', 'map'].map(type => ( ))}

TITLE setNewSpark({ ...newSpark, title: e.target.value })} /> THE CHALLENGE

setNewSpark({ ...newSpark, prompt: e.target.value })}
            />
            
            <button onClick={handlePublish} style={styles.goldBtn}>
              Ignite Spark ✨
            </button>
          </div>
        </div>
      )}

{/* 👤 VIEW: CONTROL PANEL */}
      {view === 'profile' && (
        <div style={{ flex: 1, padding: 20 }}>
          <div style={{ textAlign: 'center', marginBottom: 30 }}>
            <div style={{ 
              width: 80, height: 80, borderRadius: '50%', margin: '0 auto 16px',
              border: '2px solid #FFD700',
              background: user.avatarUrl ? `url(${user.avatarUrl}) center/cover` : '#4A0404',
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 32
            }}>
              {!user.avatarUrl && '👤'}
            </div>
            <h2 style={{ margin: 0, color: '#FFD700' }}>{user.name || 'Anonymous'}</h2>
            <p style={{ opacity: 0.6, fontSize: 14 }}>Arena Architect</p>
          </div>

<h3 style={{ fontSize: 14, letterSpacing: 1, color: '#FFD700', borderBottom: '1px solid rgba(255,215,0,0.3)', paddingBottom: 8 }}>
            YOUR CONSTELLATION
          </h3>
          
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16 }}>
            {(worlds || []).filter(w => w.creator.id === user.id).length === 0 ? (
              <div style={{ opacity: 0.5, fontStyle: 'italic' }}>No worlds created yet.</div>
            ) : (
              (worlds || []).filter(w => w.creator.id === user.id).map(w => (
                <div key={w.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 8 }}>
                  <span style={{ fontSize: 20 }}>{w.icon}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ color: '#fff' }}>{w.title}</div>
                    <div style={{ fontSize: 12, opacity: 0.6 }}>{w.responses?.length || 0} participants</div>
                  </div>
                  <div style={{ color: '#FFD700' }}>Active</div>
                </div>
              ))
            )}
          </div>
        </div>
      )}

{/* 🧧 MODAL: WORLD DETAIL (Bottom Sheet) */}
      {activeWorldId && activeWorld && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 100,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end'
        }}>
          <div 
            onClick={() => setActiveWorldId(null)} 
            style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)' }} 
          />
          <div style={{
            background: '#2A0909',
            borderTop: '2px solid #FFD700',
            borderTopLeftRadius: 24, borderTopRightRadius: 24,
            padding: '24px 24px calc(env(safe-area-inset-bottom, 20px) + 24px)',
            position: 'relative',
            maxHeight: '85dvh',
            overflowY: 'auto',
            boxShadow: '0 -10px 40px rgba(0,0,0,0.5)',
            animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
          }}>
            {/* Gold Confetti Canvas would go here */}
            {goldShower && (
              <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', display: 'flex', justifyContent: 'center', overflow: 'hidden' }}>
                <span style={{ fontSize: 40, animation: 'fall 1s linear infinite', position: 'absolute', left: '20%' }}>✨</span>
                <span style={{ fontSize: 40, animation: 'fall 1.5s linear infinite', position: 'absolute', left: '50%' }}>✨</span>
                <span style={{ fontSize: 40, animation: 'fall 1.2s linear infinite', position: 'absolute', left: '80%' }}>✨</span>
              </div>
            )}

<div style={{ width: 40, height: 4, background: '#FFD700', borderRadius: 2, margin: '0 auto 20px', opacity: 0.3 }} />
            
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <span style={{ fontSize: 32 }}>{activeWorld.icon}</span>
              <div>
                <h2 style={{ margin: 0, color: '#FFD700', fontSize: 20 }}>{activeWorld.title}</h2>
                <span style={{ fontSize: 12, opacity: 0.6 }}>Hosted by {activeWorld.creator.name}</span>
              </div>
            </div>

<div style={{ 
              background: 'rgba(255, 215, 0, 0.05)', 
              border: '1px solid rgba(255, 215, 0, 0.2)', 
              padding: 16, borderRadius: 12, marginBottom: 24, 
              fontSize: 18, lineHeight: 1.5, fontStyle: 'italic', textAlign: 'center', color: '#fff'
            }}>
              "{activeWorld.prompt}"
            </div>

{/* Responses List */}
            <div style={{ marginBottom: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {(activeWorld.responses || []).map(r => (
                <div key={r.id} style={{ display: 'flex', gap: 12, padding: 12, background: 'rgba(255,255,255,0.05)', borderRadius: 12 }}>
                  <div style={{ width: 24, height: 24, borderRadius: '50%', background: '#C5A059', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#000', fontWeight: 'bold' }}>
                    {r.user[0]}
                  </div>
                  <div>
                    <div style={{ fontSize: 12, color: '#FFD700', marginBottom: 2 }}>{r.user}</div>
                    <div style={{ fontSize: 15, fontFamily: 'sans-serif' }}>{r.text}</div>
                  </div>
                </div>
              ))}
            </div>

{/* Input Area */}
            <div style={{ position: 'relative' }}>
              <input 
                value={response} 
                onChange={e => setResponse(e.target.value)} 
                placeholder="Add your spark..." 
                style={{ 
                  width: '100%', height: 50, borderRadius: 25, 
                  padding: '0 50px 0 20px', background: 'rgba(0,0,0,0.4)', 
                  border: '1px solid #C5A059', color: '#fff', fontSize: 16 
                }}
              />
              <button 
                onClick={handleSubmitResponse}
                style={{ 
                  position: 'absolute', right: 4, top: 4, width: 42, height: 42, 
                  borderRadius: '50%', border: 'none', background: '#FFD700', 
                  display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
                }}
              >
                ➜
              </button>
            </div>
          </div>
        </div>
      )}

{/* 🧭 NAVIGATION BAR */}
      <div style={{ 
        display: 'flex', 
        background: '#2A0909', 
        borderTop: '1px solid rgba(255,215,0,0.2)',
        paddingBottom: 'env(safe-area-inset-bottom, 20px)',
        paddingTop: 12,
        flexShrink: 0,
        zIndex: 50
      }}>
        <div 
          style={{ ...styles.navItem, color: view === 'arena' ? '#FFD700' : '#888', opacity: view === 'arena' ? 1 : 0.6 }}
          onClick={() => setView('arena')}
        >
          <span style={{ fontSize: 24 }}>🏮</span>
          <span style={{ fontSize: 10, marginTop: 4 }}>Arena</span>
        </div>
        <div 
          style={{ ...styles.navItem, color: view === 'create' ? '#FFD700' : '#888', opacity: view === 'create' ? 1 : 0.6 }}
          onClick={() => setView('create')}
        >
          <span style={{ fontSize: 32, marginTop: -10, filter: 'drop-shadow(0 0 5px #FFD700)' }}>➕</span>
          <span style={{ fontSize: 10, marginTop: 4 }}>Spark</span>
        </div>
        <div 
          style={{ ...styles.navItem, color: view === 'profile' ? '#FFD700' : '#888', opacity: view === 'profile' ? 1 : 0.6 }}
          onClick={() => setView('profile')}
        >
          <span style={{ fontSize: 24 }}>✨</span>
          <span style={{ fontSize: 10, marginTop: 4 }}>Control</span>
        </div>
      </div>

{/* CSS Animations */}
      <style>{`
        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
        @keyframes bloom { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(300px) rotate(360deg); opacity: 0; } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      `}</style>
    </div>
  );
}</article></body></html>