{ setSelectedStar(star); setView('details'); }} style={{ position: 'absolute', left: `${star.x}%`, top: `${star.y}%`, transform: 'translate(-50%, -50%)', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 10, }} > {/* Glowing Orb */}

{getTypeEmoji(star.type)}

{/* Label */}

{star.content}

); // 🖥️ MAIN RENDER return (

{/* GLOBAL STYLES */} {/* 🌌 DYNAMIC VAPORWAVE BACKGROUND */}

{/* 🌅 SUNSET GLOW OVERLAY */}

{/* 🧭 HEADER */}

🪐

UNSW ORBIT

{(memberList || []).length} Star-Drifters Online

{getVibeTitle(myPoints).split(' ').pop()} {myPoints} pts

{/* 🗺️ MAP AREA */}

{/* AI CONCIERGE BUBBLE */} {showAi && (

👾

{aiMessage}

)} {/* CONSTELLATIONS */} {(constellations || []).map(star => ( ))} {/* USER AVATAR (YOU) CENTERED */}

YOU

{/* ➕ FAB (ADD BUTTON) */} {/* 📝 CREATE POST MODAL */} {view === 'create' && (

LAUNCH A STAR 🚀

{['favor', 'hot-take', 'giveaway', 'idea'].map(type => ( ))}

setNewPostContent(e.target.value)}
            style={{
              width: '100%',
              height: 120,
              background: 'rgba(0,0,0,0.3)',
              border: `1px solid ${THEME.neonPink}`,
              borderRadius: 12,
              padding: 16,
              color: 'white',
              fontFamily: 'inherit',
              fontSize: 16,
              resize: 'none',
              boxSizing: 'border-box'
            }}
          />

<div style={{ display: 'flex', gap: 12, marginTop: 'auto' }}>
            <button
              onClick={() => setView('map')}
              style={{
                flex: 1,
                padding: 16,
                background: 'transparent',
                border: '1px solid rgba(255,255,255,0.3)',
                color: 'white',
                borderRadius: 12,
                fontSize: 16
              }}
            >
              Abort
            </button>
            <button
              onClick={handleAddStar}
              style={{
                flex: 2,
                padding: 16,
                background: `linear-gradient(45deg, ${THEME.neonPink}, ${THEME.primary})`,
                border: 'none',
                color: '#000',
                fontWeight: 'bold',
                borderRadius: 12,
                fontSize: 16,
                boxShadow: `0 0 20px ${THEME.neonPink}`
              }}
            >
              LAUNCH IT 🛰️
            </button>
          </div>
        </div>
      )}

{/* 🔍 DETAIL MODAL */}
      {view === 'details' && selectedStar && (
        <div style={{
          position: 'absolute',
          top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(0,0,0,0.85)',
          backdropFilter: 'blur(5px)',
          zIndex: 100,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 20
        }} onClick={() => setView('map')}>
          <div 
            onClick={(e) => e.stopPropagation()}
            style={{
              width: '100%',
              maxWidth: 400,
              background: '#1a0b2e',
              border: `2px solid ${THEME.accent}`,
              borderRadius: 24,
              padding: 24,
              boxShadow: `0 0 40px ${THEME.accent}`,
              position: 'relative',
              overflow: 'hidden'
            }}
          >
            {/* Decorative Header */}
            <div style={{ 
              position: 'absolute', top: 0, left: 0, right: 0, height: 6, 
              background: `linear-gradient(90deg, ${THEME.neonPink}, ${THEME.primary})` 
            }} />

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
              <div style={{
                width: 60, height: 60, borderRadius: '50%',
                background: `radial-gradient(circle at 30% 30%, #fff, ${THEME.neonPink})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 32,
                boxShadow: `0 0 20px ${THEME.neonPink}`
              }}>
                {getTypeEmoji(selectedStar.type)}
              </div>
              <button onClick={() => setView('map')} style={{ background: 'none', border: 'none', fontSize: 24, color: 'white' }}>✕</button>
            </div>

<h3 style={{ margin: '0 0 8px 0', color: THEME.primary, fontSize: 14 }}>@{selectedStar.author} transmitted:</h3>
            <p style={{ fontSize: 20, lineHeight: 1.4, marginBottom: 24 }}>
              {selectedStar.content}
            </p>

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontSize: 12, opacity: 0.6 }}>
                {new Date(selectedStar.timestamp || Date.now()).toLocaleTimeString()}
              </div>
              <button 
                onClick={(e) => handleLike(e, selectedStar.id)}
                style={{
                  background: 'rgba(255,255,255,0.1)',
                  border: `1px solid ${THEME.accent}`,
                  color: 'white',
                  padding: '8px 16px',
                  borderRadius: 20,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  cursor: 'pointer'
                }}
              >
                <span>❤️</span> {selectedStar.points || 0} 
              </button>
            </div>

{selectedStar.replies && (selectedStar.replies || []).length > 0 && (
              <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                <div style={{ fontSize: 12, color: THEME.accent, marginBottom: 8 }}>INCOMING SIGNALS:</div>
                {(selectedStar.replies || []).map(reply => (
                  <div key={reply.id} style={{ background: 'rgba(255,255,255,0.05)', padding: 10, borderRadius: 8, marginBottom: 8, fontSize: 14 }}>
                    <span style={{ color: THEME.primary, fontWeight: 'bold' }}>{reply.author}:</span> {reply.text}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>