{/* HEADER / PRESENCE */}

THE AGORA 🏛️

{state.energy === 'curiosity' ? '🦢 CURIOSITY' : '🍷 CHAOS'}

{/* ORBIT VISUALIZER */}

{(state.orbit || []).map((o, i) => (

{['🎀', '✨', '🗡️'][i]}

))}

{/* DAILY TRIAL INPUT */}

{state.energy === 'chaos' ? '🔥 TODAY\'S PROVOCATION' : '📜 TODAY\'S MUSE'}

setActiveTrial(e.target.value)}
          placeholder={state.energy === 'chaos' ? "Start a fight (intellectually)..." : "Share a secret myth..."}
          style={{ 
            width: '100%', background: 'transparent', border: 'none', color: theme.text, fontSize: 16, fontFamily: 'inherit', 
            outline: 'none', resize: 'none', minHeight: 60, marginBottom: 10
          }}
        />
        <button onClick={addTrial} style={{ 
          width: '100%', padding: 12, borderRadius: 15, border: 'none', background: theme.accent, color: 'white', 
          fontWeight: 'bold', letterSpacing: 1, cursor: 'pointer', transform: activeTrial ? 'scale(1)' : 'scale(0.95)', opacity: activeTrial ? 1 : 0.5,
          transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
        }}>
          {state.energy === 'chaos' ? 'IGNITE' : 'ENSHRINE'}
        </button>
      </div>

{/* FEED */}
      <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 15, paddingBottom: 40 }}>
        {(state.trials || []).map(trial => (
          <div key={trial.id} style={{ 
            padding: 20, borderRadius: 20, background: isRemixing === trial.id ? theme.accent : 'rgba(255,255,255,0.5)', 
            border: theme.border, position: 'relative', transition: 'all 0.4s', transform: isRemixing === trial.id ? 'rotate(3deg) scale(1.05)' : 'none'
          }}>
            <div style={{ position: 'absolute', top: -10, left: 20, background: theme.bg, padding: '0 8px', fontSize: 12, borderRadius: 10, border: theme.border }}>
              {trial.type === 'lore' ? '📜 LORE' : '⚖️ DILEMMA'}
            </div>
            <p style={{ margin: '10px 0', fontSize: 18, lineHeight: 1.4 }}>{trial.content}</p>
            
            {trial.type === 'dilemma' && (
              <div style={{ display: 'flex', gap: 10, marginTop: 15 }}>
                <button style={{ flex: 1, padding: 8, borderRadius: 10, border: `1px solid ${theme.accent}`, background: 'transparent', color: theme.text }}>
                  {trial.optionA} ({trial.aScore})
                </button>
                <button style={{ flex: 1, padding: 8, borderRadius: 10, border: `1px solid ${theme.accent}`, background: theme.accent, color: 'white' }}>
                  {trial.optionB} ({trial.bScore})
                </button>
              </div>
            )}

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 15, opacity: 0.7 }}>
              <span style={{ fontSize: 12 }}>FROM: {user.name?.split(' ')[0] || 'YOU'}</span>
              <button 
                onClick={() => triggerRemix(trial.id)} 
                style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 20, filter: isRemixing === trial.id ? 'hue-rotate(90deg)' : 'none' }}
              >
                🔄
              </button>
            </div>
          </div>
        ))}
      </div>