// ============================================================
// ECHO — personalised AI rival that mirrors your weaknesses
// Behavioral spine: adaptive flow · parasocial rivalry · codex
// ============================================================

// ─── Echo avatar — humanoid silhouette w/ holographic gradient ──
function EchoAvatar({ size = 200, tier = 3, hue = 178 }) {
  // tier 1-5: form complexity. We draw a stylised silhouette with shimmering aura.
  const tierAura = Math.min(tier, 5);
  return (
    <svg viewBox="0 0 200 240" width={size} height={size * 1.2}>
      <defs>
        <radialGradient id={`echo-aura-${hue}`} cx="50%" cy="55%">
          <stop offset="0%" stopColor={`hsl(${hue} 90% 70% / 0.5)`}/>
          <stop offset="60%" stopColor={`hsl(${hue} 90% 50% / 0.18)`}/>
          <stop offset="100%" stopColor={`hsl(${hue} 90% 50% / 0)`}/>
        </radialGradient>
        <linearGradient id={`echo-body-${hue}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={`hsl(${hue} 80% 70%)`}/>
          <stop offset="50%" stopColor={`hsl(${hue + 20} 75% 55%)`}/>
          <stop offset="100%" stopColor={`hsl(${hue + 40} 85% 35%)`}/>
        </linearGradient>
        <linearGradient id={`echo-edge-${hue}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={`hsl(${hue} 100% 85%)`}/>
          <stop offset="100%" stopColor={`hsl(${hue + 40} 90% 55%)`}/>
        </linearGradient>
      </defs>
      {/* Aura */}
      <ellipse cx="100" cy="130" rx="95" ry="105" fill={`url(#echo-aura-${hue})`}/>
      {tierAura >= 3 && (
        <circle cx="100" cy="130" r="92" fill="none" stroke={`hsl(${hue} 80% 60% / 0.25)`} strokeWidth="1.2" strokeDasharray="4 4"/>
      )}
      {tierAura >= 4 && (
        <circle cx="100" cy="130" r="104" fill="none" stroke={`hsl(${hue} 80% 60% / 0.18)`} strokeWidth="1.2" strokeDasharray="2 6"/>
      )}

      {/* Humanoid silhouette — head + shoulders */}
      {/* head */}
      <ellipse cx="100" cy="80" rx="32" ry="36" fill={`url(#echo-body-${hue})`} stroke={`url(#echo-edge-${hue})`} strokeWidth="2"/>
      {/* neck */}
      <rect x="88" y="108" width="24" height="14" rx="4" fill={`url(#echo-body-${hue})`}/>
      {/* shoulders / torso */}
      <path d="M 50 195 Q 60 138 100 122 Q 140 138 150 195 Q 150 215 100 220 Q 50 215 50 195 Z"
        fill={`url(#echo-body-${hue})`} stroke={`url(#echo-edge-${hue})`} strokeWidth="2"/>

      {/* face — eyes are glowing slits */}
      <path d="M 78 78 L 94 80" stroke={`hsl(${hue} 100% 90%)`} strokeWidth="3" strokeLinecap="round"/>
      <path d="M 106 80 L 122 78" stroke={`hsl(${hue} 100% 90%)`} strokeWidth="3" strokeLinecap="round"/>
      {/* mouth — geometric */}
      <path d="M 90 100 L 110 100" stroke={`hsl(${hue} 90% 60%)`} strokeWidth="2" strokeLinecap="round"/>

      {/* surface circuitry — pattern density rises with tier */}
      {tierAura >= 2 && (
        <>
          <path d="M 65 160 L 80 160 L 80 175" stroke={`hsl(${hue} 100% 85% / 0.7)`} strokeWidth="1" fill="none"/>
          <path d="M 135 160 L 120 160 L 120 175" stroke={`hsl(${hue} 100% 85% / 0.7)`} strokeWidth="1" fill="none"/>
          <circle cx="80" cy="175" r="1.5" fill={`hsl(${hue} 100% 90%)`}/>
          <circle cx="120" cy="175" r="1.5" fill={`hsl(${hue} 100% 90%)`}/>
        </>
      )}
      {tierAura >= 3 && (
        <>
          <path d="M 100 130 L 100 145 M 90 138 L 110 138" stroke={`hsl(${hue} 100% 85% / 0.6)`} strokeWidth="1" fill="none"/>
          <circle cx="100" cy="138" r="2" fill={`hsl(${hue} 100% 90%)`}/>
        </>
      )}
      {tierAura >= 4 && (
        <>
          <path d="M 60 200 L 75 205 M 140 200 L 125 205" stroke={`hsl(${hue} 100% 85% / 0.5)`} strokeWidth="1" fill="none"/>
        </>
      )}
      {tierAura >= 5 && (
        <>
          {/* crown — final form */}
          <path d="M 78 50 L 84 38 L 92 48 L 100 32 L 108 48 L 116 38 L 122 50" stroke={`hsl(${hue} 100% 85%)`} strokeWidth="2.5" fill="none" strokeLinejoin="round"/>
          <circle cx="100" cy="32" r="3" fill={`hsl(${hue} 100% 90%)`}/>
        </>
      )}

      {/* glitch fragments around silhouette */}
      <rect x="40" y="180" width="6" height="2" fill={`hsl(${hue} 100% 85% / 0.7)`}/>
      <rect x="156" y="140" width="3" height="3" fill={`hsl(${hue} 100% 85% / 0.6)`}/>
      <rect x="38" y="105" width="2" height="6" fill={`hsl(${hue} 100% 85% / 0.5)`}/>
      <rect x="160" y="95" width="4" height="2" fill={`hsl(${hue} 100% 85% / 0.6)`}/>
    </svg>
  );
}

// ─── Mini Echo (codex thumb) ────────────────────────────────────
function MiniEcho({ tier, hue, size = 60 }) {
  return (
    <div style={{
      width: size, height: size,
      background: `radial-gradient(circle at 50% 60%, hsl(${hue} 80% 35% / 0.6) 0%, hsl(${hue + 30} 70% 15% / 0.4) 80%)`,
      borderRadius: 14,
      display: 'grid',
      placeItems: 'center',
      border: `1.5px solid hsl(${hue} 70% 40%)`,
      overflow: 'hidden',
    }}>
      <EchoAvatar size={size * 0.9} tier={tier} hue={hue}/>
    </div>
  );
}

// ─── 1. ENCOUNTER (mobile) ──────────────────────────────────────
function EcEncounter() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="4:18">
        <div className="ec-encounter">
          <div className="ec-bg-grid"></div>
          <div className="ec-head">
            <div className="ec-eyebrow">DAILY RIVAL · ECHO PROTOCOL</div>
            <div className="ec-title-row">
              <div className="ec-title-side">
                <div className="ec-title-label">CHALLENGER</div>
                <div className="ec-title-name">Echo-3 of Maya</div>
              </div>
              <div className="ec-vs">vs</div>
              <div className="ec-title-side r">
                <div className="ec-title-label">YOU</div>
                <div className="ec-title-name">Maya K.</div>
              </div>
            </div>
          </div>

          <div className="ec-arena">
            <div className="ec-arena-rings">
              <span></span><span></span><span></span>
            </div>
            <div className="ec-arena-floor"></div>
            <div className="ec-avatar">
              <EchoAvatar size={210} tier={3} hue={178}/>
            </div>
            <div className="ec-arena-tag">
              <span className="ec-arena-dot"></span> ANALYSING YOUR WEAK TOPICS
            </div>
          </div>

          <div className="ec-profile">
            <div className="ec-profile-label">YOUR ECHO IS TRAINED ON</div>
            <div className="ec-profile-row">
              <div className="ec-profile-chip strong">
                <small>2.1×</small>
                Photosynthesis
              </div>
              <div className="ec-profile-chip strong">
                <small>1.7×</small>
                Light-dep reactions
              </div>
              <div className="ec-profile-chip">
                <small>1.3×</small>
                Cell transport
              </div>
            </div>
            <div className="ec-profile-foot">
              Your 3 worst topics this week. Echo will weight questions <strong>2× harder</strong> here.
            </div>
          </div>

          <div className="ec-stats">
            <div className="ec-stat">
              <div className="ec-stat-label">YOUR HEAD-TO-HEAD</div>
              <div className="ec-stat-val">
                <strong>4</strong> – <strong>2</strong>
                <small>vs previous forms</small>
              </div>
            </div>
            <div className="ec-stat">
              <div className="ec-stat-label">FORMS DEFEATED</div>
              <div className="ec-stat-val">
                <strong>2</strong> / 7
                <small>·  Echo-1, Echo-2</small>
              </div>
            </div>
          </div>

          <button className="ec-cta">
            ENTER THE MATCH
            <small>5 questions · ~3 minutes · adapts as you play</small>
          </button>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 2. LIVE BATTLE (mobile) ────────────────────────────────────
function EcBattle() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="4:21">
        <div className="ec-battle">
          <div className="ec-battle-head">
            <div className="ec-battle-q-num">Q 3<small>/ 5</small></div>
            <div className="ec-battle-timer">07s</div>
          </div>

          {/* opposing portraits with HP-like bars */}
          <div className="ec-vs-block">
            <div className="ec-fighter you">
              <div className="ec-fighter-portrait you">
                <CharGlyph kind="helix" size={56}/>
              </div>
              <div className="ec-fighter-info">
                <div className="ec-fighter-name">YOU<small>· streak 2</small></div>
                <div className="ec-fighter-bar you">
                  <div style={{ width: '60%' }}></div>
                </div>
                <div className="ec-fighter-score">2 / 3 correct</div>
              </div>
            </div>
            <div className="ec-vs-strike">⚡</div>
            <div className="ec-fighter rival">
              <div className="ec-fighter-portrait rival">
                <EchoAvatar size={56} tier={3} hue={178}/>
              </div>
              <div className="ec-fighter-info">
                <div className="ec-fighter-name">ECHO-3<small>· streak 2</small></div>
                <div className="ec-fighter-bar rival">
                  <div style={{ width: '67%' }}></div>
                </div>
                <div className="ec-fighter-score">2 / 3 correct</div>
              </div>
            </div>
          </div>

          {/* current question */}
          <div className="ec-q">
            <div className="ec-q-eyebrow">PHOTOSYNTHESIS · YOUR WEAK SPOT</div>
            <div className="ec-q-text">
              Where in the chloroplast do <strong>light-dependent reactions</strong> take place?
            </div>
            <div className="ec-q-opts">
              <button className="ec-q-opt">Stroma</button>
              <button className="ec-q-opt rival-pick">Thylakoid membrane<span className="ec-q-rival-pin">ECHO</span></button>
              <button className="ec-q-opt">Outer membrane</button>
              <button className="ec-q-opt">Intermembrane space</button>
            </div>
            <div className="ec-q-rival-think">
              <span className="ec-q-rival-think-dot"></span>
              <span>Echo answered <strong>2.4s ago</strong></span>
              <span>·</span>
              <span>locked in</span>
            </div>
          </div>

          {/* adaptive flow badge */}
          <div className="ec-flow">
            <div className="ec-flow-icon">∿</div>
            <div className="ec-flow-text">
              <strong>Flow mode active</strong>
              <small>Echo is matching your speed — questions feel right at the edge.</small>
            </div>
            <div className="ec-flow-dial">
              <span></span><span></span><span></span><span></span><span className="on"></span><span></span><span></span>
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 3. VICTORY · EVOLUTION (mobile) ─────────────────────────────
function EcEvolution() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="4:25">
        <div className="ec-evo">
          <div className="ec-bg-grid"></div>
          <div className="ec-evo-head">
            <div className="ec-evo-eyebrow">RIVAL DEFEATED</div>
            <div className="ec-evo-title">4 – 3</div>
            <div className="ec-evo-sub">Maya K. · ECHO-3 broken</div>
          </div>

          {/* before / after — same Echo, evolved */}
          <div className="ec-evo-stage">
            <div className="ec-evo-side faded">
              <EchoAvatar size={150} tier={3} hue={178}/>
              <div className="ec-evo-side-label">ECHO-3<small>· archived to codex</small></div>
            </div>
            <div className="ec-evo-arrow">
              <svg viewBox="0 0 80 32" width="80" height="32">
                <defs>
                  <linearGradient id="ec-arrow-g">
                    <stop offset="0%" stopColor="hsl(178 80% 70%)"/>
                    <stop offset="100%" stopColor="hsl(28 90% 65%)"/>
                  </linearGradient>
                </defs>
                <path d="M 6 16 L 64 16 M 56 8 L 64 16 L 56 24" stroke="url(#ec-arrow-g)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
              </svg>
              <div className="ec-evo-arrow-tag">EVOLVES</div>
            </div>
            <div className="ec-evo-side fresh">
              <EchoAvatar size={170} tier={4} hue={28}/>
              <div className="ec-evo-side-label fresh">ECHO-4<small>· new · unlocked</small></div>
            </div>
          </div>

          <div className="ec-evo-card">
            <div className="ec-evo-card-row">
              <div className="ec-evo-card-icon">⬡</div>
              <div className="ec-evo-card-text">
                <strong>New trait — Adaptive Recall</strong>
                <small>Echo-4 will surface mistakes from any session in the last <strong>14 days</strong>.</small>
              </div>
            </div>
            <div className="ec-evo-card-row">
              <div className="ec-evo-card-icon">⌬</div>
              <div className="ec-evo-card-text">
                <strong>Focus topic — Cell Transport</strong>
                <small>Your 2nd-weakest topic this week. Tomorrow's match leans <strong>2.1× harder</strong> there.</small>
              </div>
            </div>
          </div>

          {/* curiosity gap — silhouette teaser */}
          <div className="ec-tease">
            <div className="ec-tease-label">PATH AHEAD</div>
            <div className="ec-tease-row">
              {[
                { tier: 4, hue: 28, label: 'E-4', state: 'next' },
                { tier: 4, hue: 290, label: '?', state: 'hidden' },
                { tier: 5, hue: 320, label: '?', state: 'hidden' },
                { tier: 5, hue: 0, label: 'PRIME', state: 'final' },
              ].map((t, i) => (
                <div key={i} className={`ec-tease-cell ${t.state}`}>
                  {t.state !== 'hidden' && <MiniEcho tier={t.tier} hue={t.hue} size={48}/>}
                  {t.state === 'hidden' && <div className="ec-tease-q">?</div>}
                  <small>{t.label}</small>
                </div>
              ))}
            </div>
            <div className="ec-tease-foot">
              4 more wins to face <strong>Echo Prime</strong> — fully mirrored on your full record.
            </div>
          </div>

          <button className="ec-evo-cta">
            FACE ECHO-4 NOW
            <small>or come back tomorrow · keeps your daily streak alive</small>
          </button>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 4. RIVAL CODEX (mobile) ────────────────────────────────────
function EcCodex() {
  const allForms = [
    { tier: 1, hue: 200, label: 'E-1',   topic: 'Osmosis',          beaten: '12 May', won: true,  best: '4-3' },
    { tier: 2, hue: 215, label: 'E-2',   topic: 'Membrane proteins', beaten: '14 May', won: true,  best: '5-2' },
    { tier: 3, hue: 178, label: 'E-3',   topic: 'Photosynthesis',    beaten: 'today',  won: true,  best: '4-3' },
    { tier: 4, hue: 28,  label: 'E-4',   topic: 'Cell transport',    beaten: '—',      won: false, best: '—' },
    { tier: 4, hue: 290, label: 'E-5',   topic: '???',               beaten: '—',      won: false, best: '—',  hidden: true },
    { tier: 5, hue: 320, label: 'E-6',   topic: '???',               beaten: '—',      won: false, best: '—',  hidden: true },
    { tier: 5, hue: 0,   label: 'PRIME', topic: 'You.',              beaten: '—',      won: false, best: '—',  final: true },
  ];
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="4:32">
        <div className="ec-codex">
          <div className="ec-codex-head">
            <div className="ec-codex-eyebrow">RIVAL CODEX · MAYA K.</div>
            <div className="ec-codex-title">3 forms broken<br/>4 to go.</div>
            <div className="ec-codex-progress">
              {allForms.map((f, i) => (
                <span key={i} className={`ec-codex-pill ${f.won ? 'won' : ''} ${f.final ? 'final' : ''}`}></span>
              ))}
            </div>
          </div>

          <div className="ec-codex-grid">
            {allForms.map((f, i) => (
              <div key={i} className={`ec-codex-card ${f.won ? 'won' : ''} ${f.hidden ? 'hidden' : ''} ${f.final ? 'final' : ''}`}>
                <div className="ec-codex-card-portrait">
                  {f.hidden
                    ? <div className="ec-codex-card-hidden">?</div>
                    : <MiniEcho tier={f.tier} hue={f.hue} size={72}/>}
                  {f.final && <div className="ec-codex-final-crown">PRIME</div>}
                </div>
                <div className="ec-codex-card-body">
                  <div className="ec-codex-card-name">{f.label}</div>
                  <div className="ec-codex-card-topic">{f.topic}</div>
                  <div className="ec-codex-card-foot">
                    {f.won
                      ? <><span className="won-tag">DEFEATED</span> <small>· {f.best} · {f.beaten}</small></>
                      : f.final
                        ? <><span className="final-tag">FINAL FORM</span></>
                        : f.hidden
                          ? <><small>UNLOCKS AFTER NEXT WIN</small></>
                          : <><span className="next-tag">UP NEXT</span> <small>· tomorrow 4 PM</small></>
                    }
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="ec-codex-summary">
            <div className="ec-codex-summary-row">
              <strong>23 matches</strong><small>played</small>
            </div>
            <div className="ec-codex-summary-row">
              <strong>14 – 9</strong><small>head-to-head</small>
            </div>
            <div className="ec-codex-summary-row">
              <strong>67%</strong><small>flow-state matches</small>
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── OVERVIEW ────────────────────────────────────────────────────
function EcOverview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'radial-gradient(ellipse at 50% 0%, #1a2540 0%, #0a0f1e 80%)',
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 18,
      fontFamily: 'DM Sans, system-ui, sans-serif',
      color: '#e0f3ff',
      overflow: 'hidden',
    }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.8px', color: 'hsl(178 80% 65%)', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · GAME TYPE 7 · SOLO ASYMMETRIC
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: '#fff' }}>Echo</div>
          <div style={{ fontSize: 14, color: 'rgba(224,243,255,0.6)', fontWeight: 500 }}>— a personalised AI rival that learns from your mistakes and evolves when you beat it.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 14 }}>
        <div style={{ background: 'linear-gradient(140deg, hsl(220 60% 12%), hsl(178 70% 25%) 60%, hsl(28 80% 50%))', borderRadius: 14, padding: 22, color: '#fff', border: '1.5px solid hsl(178 60% 35%)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1.6px', color: 'hsl(178 90% 80%)', textTransform: 'uppercase', marginBottom: 4 }}>THE BEHAVIORAL HOOK</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 22, fontWeight: 800, lineHeight: 1.15, marginBottom: 10 }}>
            Adaptive flow + parasocial rivalry + curiosity gap.
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)' }}>
            Echo is fitted to <strong>your own mistake data</strong> — guaranteed flow state (Csíkszentmihályi), the optimal engagement zone. The rival is named and has a face; you build a <strong>parasocial relationship</strong> with it the way trainers do with their starter Pokémon. Defeating Echo evolves it into a stranger, harder form — the <strong>curiosity gap</strong> (what does the next one look like?) is the strongest pull-back lever ever measured in apps.
          </div>
        </div>
        <div style={{ background: '#101830', borderRadius: 14, padding: 18, border: '1.5px solid hsl(178 40% 30%)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: 'hsl(178 80% 70%)', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Flow-matched difficulty</div>
          <div style={{ fontSize: 12.5, color: 'rgba(224,243,255,0.7)', lineHeight: 1.5 }}>
            Echo's accuracy adapts in real time to keep matches at ~60% win-probability — the documented sweet spot for sustained play.
          </div>
        </div>
        <div style={{ background: '#101830', borderRadius: 14, padding: 18, border: '1.5px solid hsl(178 40% 30%)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: 'hsl(178 80% 70%)', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Codex of defeated forms</div>
          <div style={{ fontSize: 12.5, color: 'rgba(224,243,255,0.7)', lineHeight: 1.5 }}>
            A Pokedex but of <em>past versions of you</em>. Slots are visible-but-locked — completionism + curiosity drive return visits.
          </div>
        </div>
        <div style={{ background: '#101830', borderRadius: 14, padding: 18, border: '1.5px solid hsl(178 40% 30%)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: 'hsl(178 80% 70%)', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>The Prime narrative</div>
          <div style={{ fontSize: 12.5, color: 'rgba(224,243,255,0.7)', lineHeight: 1.5 }}>
            Form 7 is "Echo Prime" — a perfect mirror of your full record. The whole arc is a 6-week story with a known climax. People finish things they can see ending.
          </div>
        </div>
      </div>

      <div style={{
        background: '#101830', border: '1.5px solid hsl(178 40% 30%)', borderRadius: 14,
        padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
      }}>
        {['Encounter · meet your Echo', 'Live match · side-by-side', 'Victory + evolution', 'Codex · forms collection'].map((label, i) => (
          <div key={i} style={{
            background: 'hsl(178 60% 25% / 0.2)', borderRadius: 10, padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 4, border: '1px solid hsl(178 50% 35%)',
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, background: 'hsl(178 70% 55%)', color: '#082023',
              fontFamily: 'Outfit, sans-serif', fontSize: 12, fontWeight: 800,
              display: 'grid', placeItems: 'center',
            }}>{i+1}</div>
            <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 13, fontWeight: 700, color: '#fff' }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── App ─────────────────────────────────────────────────────────
function App() {
  return (
    <div className="wc-scope" style={{ background: '#f0eee9', padding: '32px', minHeight: '100vh', overflowY: 'auto' }}>
      <EcOverview/>
      <EcEncounter/>
      <EcBattle/>
      <EcEvolution/>
      <EcCodex/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);