{/* Background texture overlay */}

{/* Header */}

✦ The Codex

UNSW · A Living Portrait

{(memberList || []).length} {(memberList || []).length === 1 ? 'soul' : 'souls'}

{!user?.avatarUrl && '🕯️'}

{/* Unhinged Meter */}

Expressiveness Flux 66 ? 'none' : 'none', textShadow: unhingedMeter > 80 ? `0 0 10px ${meterColor}` : 'none' }}>{meterLabel} · {unhingedMeter}%

60 ? `0 0 12px ${meterColor}40` : 'none' }} />

{/* Nav tabs */}

{['constellation', 'codex', 'duels'].map(v => ( ))}

{/* Main content area */}

{/* CONSTELLATION VIEW */} {local.view === 'constellation' && (

{/* Surreal prompt */}

"{activePrompt}"

{/* Star field */}

{/* Connection lines */} {/* Stars */} {(constellation || []).map((star, i) => { if (!star) return null; const isSelected = local.selectedStar === i; const sz = star?.size ?? 12; return ( ); })} {/* Ambient particles */} {[...Array(8)].map((_, i) => (

))}

Tap stars to nudge the constellation · {(constellation || []).length} facets mapped

)} {/* CODEX VIEW */} {local.view === 'codex' && (

{[...entries].reverse().slice(0, 12).map((entry, i) => { if (!entry) return null; const eType = entry?.type ?? 'wild-thought'; return (

{typeEmojis[eType] ?? '✨'} {typeLabels[eType] ?? 'Thought'} {entry?.author ?? 'Anon'}

{eType === 'confession' && '"'}{entry?.text ?? ''}{eType === 'confession' && '"'}

{/* Gold corner ornament */}

✦

); })}

)} {/* DUELS VIEW */} {local.view === 'duels' && (

Choose a side. Let the constellation shift.

{(duels || []).map((duel, i) => { if (!duel) return null; const total = (duel?.leftVotes ?? 0) + (duel?.rightVotes ?? 0); const leftPct = total > 0 ? Math.round(((duel?.leftVotes ?? 0) / total) * 100) : 50; const rightPct = 100 - leftPct; const chosen = local.duelChoice; const thisChosen = chosen === (duel?.id + '-left') || chosen === (duel?.id + '-right'); return (

⚔️ Vibe Duel #{duel?.id ?? i + 1}

{thisChosen && (

)}

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

Wandering Souls

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

{m?.displayName ?? 'Anon'}

))}

)}

{/* Entry panel overlay */} {local.showEntryPanel && (

{ if (e.target === e.currentTarget) setLocal(p => ({ ...p, showEntryPanel: false })); }}>

Inscribe the Codex

"{activePrompt}"

{/* Type selector */}

{['mood', 'confession', 'wild-thought'].map(t => ( ))}

setLocal(p => ({ ...p, newEntry: e.target.value }))}
              placeholder={local.entryType === 'confession' ? 'Confess something deliciously unhinged...' : local.entryType === 'mood' ? 'How does the void feel today?' : 'Let a wild thought escape...'}
              style={{
                width: '100%', height: 100, padding: 14,
                background: 'rgba(201, 161, 74, 0.04)',
                border: '1px solid rgba(201, 161, 74, 0.15)',
                borderRadius: 12, color: '#E8DCC8',
                fontSize: 15, fontFamily: 'inherit',
                resize: 'none', outline: 'none',
                lineHeight: 1.6, boxSizing: 'border-box'
              }}
            />

<button onClick={addEntry} style={{
              width: '100%', padding: 16, marginTop: 12,
              background: (local.newEntry ?? '').trim() ? 'linear-gradient(135deg, #8B4513, #C9A14A)' : 'rgba(139, 115, 85, 0.2)',
              border: 'none', borderRadius: 14,
              color: (local.newEntry ?? '').trim() ? '#1a1410' : '#5A4A3A',
              fontSize: 16, fontWeight: 700, cursor: 'pointer',
              fontFamily: 'inherit', letterSpacing: 1,
              transition: baseTransition,
              transform: local.animPulse ? 'scale(1.03)' : 'scale(1)'
            }}
            onMouseDown={e => e.currentTarget.style.transform = 'scale(0.96)'}
            onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
            >
              ✦ Inscribe
            </button>
          </div>
        </div>
      )}

{/* FAB */}
      <button onClick={() => setLocal(p => ({ ...p, showEntryPanel: true }))} style={{
        position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)',
        right: 20, width: 60, height: 60, borderRadius: '50%',
        background: 'linear-gradient(135deg, #8B4513, #C9A14A)',
        border: '2px solid rgba(201, 161, 74, 0.4)',
        color: '#1a1410', fontSize: 26, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 4px 20px rgba(201, 161, 74, 0.3)',
        zIndex: 50, transition: baseTransition,
        animation: local.animPulse ? 'none' : 'none'
      }}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(0.9)'}
      onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
      >
        ✦
      </button>