// screens-me.jsx — Profile / Bankroll / History / Bustout / Recap / Fantasy / News

const { useState: uS_m } = React;

function MeScreen({ onTab, onSubScreen }) {
  const p = window.APP_DATA.profile;
  const b = window.APP_DATA.bankroll;
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100 }}>
      {/* Hero portrait card */}
      <div style={{ padding: '20px', borderBottom: '1px solid var(--line-d)' }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%',
            background: 'linear-gradient(145deg, #2a1a0a, #1a0c0c)',
            border: '2px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-serif)', fontSize: 28, color: 'var(--gold)',
          }}>AH</div>
          <div style={{ flex: 1 }}>
            <h1 className="serif" style={{ fontSize: 28, lineHeight: 1, marginBottom: 4 }}>{p.name}</h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)' }}>{p.handle}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--gold)', marginTop: 4, letterSpacing: '0.08em' }}>● {p.location.toUpperCase()}</div>
          </div>
        </div>
      </div>

      {/* Bankroll quick card */}
      <div style={{ padding: '20px', borderBottom: '1px solid var(--line-d)' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>Trip bankroll</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <div className="num serif" style={{ fontSize: 44, lineHeight: 1, color: 'var(--gold)' }}>${b.current.toLocaleString()}</div>
          <div className="mono" style={{ fontSize: 14, color: b.delta >= 0 ? 'var(--green-bright)' : 'var(--red-bright)' }}>
            {b.delta >= 0 ? '+' : ''}${b.delta.toLocaleString()}
          </div>
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', marginTop: 6 }}>
          {b.sessions} SESSIONS · {b.cashes} CASHES · STARTED ${b.startOfTrip.toLocaleString()}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
          <div className="card" style={{ padding: 10 }}>
            <div className="eyebrow" style={{ color: 'var(--green-bright)', fontSize: 10, marginBottom: 3 }}>BIGGEST</div>
            <div className="serif" style={{ fontSize: 14, lineHeight: 1.1 }}>{b.biggest.event}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--green-bright)' }}>+${b.biggest.net.toLocaleString()}</div>
          </div>
          <div className="card" style={{ padding: 10 }}>
            <div className="eyebrow" style={{ color: 'var(--red-bright)', fontSize: 10, marginBottom: 3 }}>WORST</div>
            <div className="serif" style={{ fontSize: 14, lineHeight: 1.1 }}>{b.worst.event}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--red-bright)' }}>${b.worst.net.toLocaleString()}</div>
          </div>
        </div>
      </div>

      {/* Sub-screen tiles */}
      <div style={{ padding: '8px 0' }}>
        {[
          { id: 'history',  title: 'Poker history',     sub: `${p.careerCashes} cashes · $${(p.careerWinnings/1000).toFixed(0)}k career`, icon: '⌖' },
          { id: 'rankings', title: 'All-time rankings', sub: 'WSOP summer leaderboard', icon: '☰' },
          { id: 'mind',     title: 'Mind · sleep · mood',sub: 'Sleep 5.0h last night · check-in due', icon: '☾' },
          { id: 'recap',    title: 'Summer recap',      sub: 'Voice-record your trip · vlog assist', icon: '◉' },
          { id: 'news',     title: 'Poker news + feuds',sub: 'Latest from the wire', icon: '⟶' },
          { id: 'bustout',  title: '[demo] Bustout flow', sub: 'See what happens when you bust', icon: '✕' },
          { id: 'settings', title: 'Settings · responsible play', sub: 'Limits, pauses, resources', icon: '◐' },
        ].map(row => (
          <button key={row.id} onClick={() => onSubScreen(row.id)} style={{
            all: 'unset', cursor: 'pointer', display: 'flex', width: '100%',
            padding: '14px 20px', borderTop: '1px solid var(--line-d)',
            alignItems: 'center', gap: 14,
          }}>
            <div style={{ width: 30, textAlign: 'center', fontFamily: 'var(--font-mono)', color: 'var(--gold)', fontSize: 18 }}>{row.icon}</div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 18, lineHeight: 1.1 }}>{row.title}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', marginTop: 3 }}>{row.sub}</div>
            </div>
            <div style={{ color: 'var(--muted-d)', fontSize: 18 }}>›</div>
          </button>
        ))}
      </div>
      <ResponsibleFooter/>
    </div>
  );
}

// ─── Sub-screens (modal-style) ──────────────────────────────────────────
function SubHeader({ title, eyebrow, onBack }) {
  return (
    <div style={{ padding: '8px 16px 12px', borderBottom: '1px solid var(--line-d)', display: 'flex', alignItems: 'center', gap: 12 }}>
      <button onClick={onBack} style={{ all: 'unset', cursor: 'pointer', color: 'var(--paper-d)', fontSize: 22 }}>←</button>
      <div>
        {eyebrow && <div className="eyebrow" style={{ color: 'var(--gold)' }}>{eyebrow}</div>}
        <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>{title}</div>
      </div>
    </div>
  );
}

function HistoryScreen({ onBack }) {
  const p = window.APP_DATA.profile;
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100 }}>
      <SubHeader title="Poker history" eyebrow="Career" onBack={onBack}/>
      <div style={{ padding: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 20 }}>
          <div><div className="eyebrow">Cashes</div><div className="serif" style={{ fontSize: 28 }}>{p.careerCashes}</div></div>
          <div><div className="eyebrow">Winnings</div><div className="serif" style={{ fontSize: 28 }}>${(p.careerWinnings/1000).toFixed(0)}k</div></div>
          <div><div className="eyebrow">Best</div><div className="serif" style={{ fontSize: 22 }}>{p.biggest.place}</div></div>
        </div>

        <div className="section-num" style={{ marginBottom: 8 }}>SEASONS</div>
        {p.seasons.map(s => (
          <div key={s.year} style={{ padding: '12px 0', borderTop: '1px solid var(--line-d)', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <div>
              <div className="serif" style={{ fontSize: 18 }}>{s.label}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)' }}>{s.cashes} cashes · {s.fpoints} fantasy pts</div>
            </div>
            <div className="num serif" style={{ fontSize: 22, color: 'var(--gold)' }}>${(s.winnings/1000).toFixed(1)}k</div>
          </div>
        ))}

        <div className="section-num" style={{ marginTop: 24, marginBottom: 8 }}>RECENT SESSIONS</div>
        {p.recentSessions.map((s, i) => (
          <div key={i} style={{ padding: '12px 0', borderTop: '1px solid var(--line-d)', display: 'flex', gap: 12 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', width: 40 }}>{s.date}</div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 16, lineHeight: 1.1 }}>{s.event}</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 2 }}>{s.place} · {s.hours}h</div>
            </div>
            <div className="num serif" style={{ fontSize: 18, color: s.net >= 0 ? 'var(--green-bright)' : 'var(--red-bright)' }}>
              {s.net >= 0 ? '+' : ''}${Math.abs(s.net).toLocaleString()}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Bustout flow ────────────────────────────────────────────────────────
function BustoutScreen({ onBack, onCoach }) {
  const [step, setStep] = uS_m(0);
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100, background: 'radial-gradient(circle at 50% 0%, #2a0a0a 0%, var(--felt) 50%)' }}>
      <SubHeader title="Just busted" eyebrow="Decompress" onBack={onBack}/>
      {step === 0 && (
        <div style={{ padding: 20 }}>
          <div className="eyebrow" style={{ color: 'var(--red-bright)', marginBottom: 8 }}>● 3:08 AM · LV</div>
          <h1 className="serif" style={{ fontSize: 38, lineHeight: 1, marginBottom: 10 }}>That's the game.</h1>
          <p className="serif" style={{ fontSize: 18, color: 'var(--paper-d)', lineHeight: 1.4, marginBottom: 24 }}>
            Take a breath. Pick one. Doyle's here either way.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <ActionRow tag="REBUY" tone="gold" title="Rebuy this event" sub="Reg open 22 min · 380 BB starting" onTap={() => setStep(1)}/>
            <ActionRow tag="NEXT"  tone="green" title="Find the next reg" sub="3 events still open within 30 min walk" onTap={() => setStep(1)}/>
            <ActionRow tag="DONE"  tone="paper" title="Call it a night" sub="Log it, get sleep, talk in the morning" onTap={() => setStep(2)}/>
            <ActionRow tag="D"    tone="red"   title="Talk to Doyle" sub="Walk through the hand · voice or text" onTap={onCoach}/>
          </div>

          <div style={{ marginTop: 32, padding: 16, background: 'var(--felt-2)', border: '1px solid var(--line-d)' }}>
            <div className="eyebrow" style={{ marginBottom: 6 }}>Quick log · busts feed history</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['AK<QQ pre','set vs. set','flush draw missed','levelled myself','cooler','tilt','good fold','bad call'].map(t => (
                <span key={t} className="tag" style={{ cursor: 'pointer' }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      )}
      {step === 1 && (
        <div style={{ padding: 20 }}>
          <div className="eyebrow" style={{ color: 'var(--green-bright)', marginBottom: 8 }}>NEXT MOVE</div>
          <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, marginBottom: 16 }}>One more bullet?</h1>
          <p style={{ color: 'var(--paper-d)', marginBottom: 16 }}>You've got buy-ins. Doyle has thoughts.</p>
          <div className="card card-gold" style={{ marginBottom: 12 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <CoachAvatar size={28} mode="sharp"/>
              <div>
                <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 4 }}>Doyle · sharp mode</div>
                <p className="serif" style={{ fontSize: 16, lineHeight: 1.35 }}>
                  "It's 3 AM. You busted on a coin flip you played fine. The next reg's a $400 turbo — variance soup. Sleep beats it. We re-evaluate at noon."
                </p>
              </div>
            </div>
          </div>
          <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => setStep(2)}>Listen to him. Call it.</button>
          <button className="btn btn-ghost" style={{ width: '100%', marginTop: 8 }} onClick={onCoach}>Argue with him →</button>
        </div>
      )}
      {step === 2 && (
        <div style={{ padding: 20, textAlign: 'center', paddingTop: 60 }}>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 12 }}>CHECK-OUT</div>
          <h1 className="serif" style={{ fontSize: 36, lineHeight: 1.05, marginBottom: 16 }}>Get some sleep.</h1>
          <p className="serif" style={{ fontSize: 17, color: 'var(--paper-d)', lineHeight: 1.4, marginBottom: 28 }}>
            We'll do the bust-out hand in the morning. Your bankroll is logged. Mind tab will nudge you when it's time to play again.
          </p>
          <div style={{ width: 100, height: 100, margin: '0 auto 20px', borderRadius: '50%',
            border: '1px solid var(--line-gold)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'radial-gradient(circle, rgba(212,175,55,0.15), transparent)' }}>
            <span className="serif" style={{ fontSize: 36, color: 'var(--gold)' }}>☾</span>
          </div>
          <button className="btn btn-gold" onClick={onBack}>Goodnight</button>
        </div>
      )}
    </div>
  );
}

function ActionRow({ tag, tone, title, sub, onTap }) {
  const colors = {
    gold:  'var(--gold)', green: 'var(--green-bright)',
    red:   'var(--red-bright)', paper: 'var(--paper-d)',
  };
  return (
    <button onClick={onTap} style={{
      all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14,
      padding: 16, border: '1px solid var(--line-d-2)', background: 'var(--felt-2)',
    }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: colors[tone], width: 50, textAlign: 'center' }}>{tag}</div>
      <div style={{ flex: 1 }}>
        <div className="serif" style={{ fontSize: 18, lineHeight: 1.1 }}>{title}</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', marginTop: 3 }}>{sub}</div>
      </div>
      <div style={{ color: 'var(--muted-d)' }}>›</div>
    </button>
  );
}

// ─── Recap / Vlog assist ─────────────────────────────────────────────────
function RecapScreen({ onBack }) {
  const [recording, setRecording] = uS_m(false);
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100 }}>
      <SubHeader title="Summer recap" eyebrow="Vlog assist" onBack={onBack}/>
      <div style={{ padding: 20 }}>
        <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 6 }}>WSOP 2026 · Day 12 of 47</div>
        <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, marginBottom: 12 }}>Tell us how today went.</h1>
        <p style={{ color: 'var(--paper-d)', fontSize: 15, marginBottom: 24, lineHeight: 1.5 }}>
          Just talk. Doyle will ask a few questions, edit it down, and turn it into a vlog draft, blog post, or podcast cut. Or just keep it for yourself.
        </p>

        {/* Big record button */}
        <div style={{ display: 'flex', justifyContent: 'center', margin: '24px 0' }}>
          <button onClick={() => setRecording(!recording)} style={{
            all: 'unset', cursor: 'pointer', width: 140, height: 140, borderRadius: '50%',
            background: recording ? 'var(--red)' : 'var(--felt-3)',
            border: '2px solid ' + (recording ? 'var(--red-bright)' : 'var(--line-gold)'),
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative',
            boxShadow: recording ? '0 0 60px rgba(231,76,60,0.4)' : '0 0 40px rgba(212,175,55,0.15)',
            transition: 'all 240ms var(--ease)',
          }}>
            {recording ? (
              <div style={{ width: 30, height: 30, background: 'var(--ivory-d)' }}/>
            ) : (
              <div style={{ width: 50, height: 50, borderRadius: '50%', background: 'var(--red-bright)' }}/>
            )}
            {recording && [0,1,2].map(i => (
              <div key={i} style={{ position: 'absolute', inset: 0, borderRadius: '50%',
                border: '1px solid var(--red-bright)', animation: `mapPulse ${2+i*0.5}s infinite ${i*0.3}s` }}/>
            ))}
          </button>
        </div>
        <div className="mono" style={{ textAlign: 'center', fontSize: 11, color: recording ? 'var(--red-bright)' : 'var(--muted-d)', letterSpacing: '0.15em', marginBottom: 32 }}>
          {recording ? '● RECORDING · 0:47' : 'TAP TO START'}
        </div>

        {/* Doyle's prompts */}
        <div className="card card-gold">
          <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
            <CoachAvatar size={28} mode="mentor"/>
            <div className="eyebrow" style={{ color: 'var(--gold)', alignSelf: 'center' }}>Doyle will ask…</div>
          </div>
          <ol style={{ paddingLeft: 18, color: 'var(--paper-d)' }}>
            {[
              "What was today's vibe in one sentence?",
              "Best hand you played — not biggest pot, best decision.",
              "Worst spot. What were you missing?",
              "Friends update — anyone deep, anyone busted?",
              "What does tomorrow look like?",
            ].map((q, i) => (
              <li key={i} className="serif" style={{ fontSize: 15, lineHeight: 1.4, marginBottom: 6 }}>{q}</li>
            ))}
          </ol>
        </div>

        <div className="section-num" style={{ marginTop: 28, marginBottom: 8 }}>EXPORT AS</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <button className="btn btn-ghost">▶ Vlog draft</button>
          <button className="btn btn-ghost">✎ Blog post</button>
          <button className="btn btn-ghost">♪ Podcast cut</button>
          <button className="btn btn-ghost">⌖ Just save</button>
        </div>

        <div className="section-num" style={{ marginTop: 28, marginBottom: 8 }}>YOUR LAST RECAPS</div>
        {[
          { date: 'Jul 7', title: 'Day 11 · "I finally folded the king-jack offsuit"', dur: '6:42' },
          { date: 'Jul 6', title: 'Day 10 · Mystery Bounty deep run',                  dur: '11:18' },
          { date: 'Jul 5', title: 'Day 9 · Tilt diary',                                dur: '4:02' },
        ].map((r, i) => (
          <div key={i} style={{ padding: '12px 0', borderTop: '1px solid var(--line-d)', display: 'flex', gap: 12, alignItems: 'center' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', width: 40 }}>{r.date}</div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 15, lineHeight: 1.2 }}>{r.title}</div>
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--gold)' }}>{r.dur}</div>
            <div style={{ color: 'var(--muted-d)' }}>▶</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Fantasy League — full-fledged team management ─────────────────────
function FantasyScreen({ onBack, fullscreen, onSubScreen }) {
  const f = window.APP_DATA.fantasy;
  const L = f.myLeague;
  const scoring = window.APP_DATA.fantasyScoringToday;
  const waivers = window.APP_DATA.waiverWire;
  const activity = window.APP_DATA.leagueActivity;
  const [tab, setTab] = uS_m('team'); // team | scoring | standings | wire | league
  const [chatOpen, setChatOpen] = uS_m(false);

  const todayPts = scoring.reduce((s, e) => s + e.pts, 0);
  const leaderGap = L.leader.points - L.points;

  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: fullscreen ? 100 : 40, background: 'var(--felt)' }}>
      {/* Top: tab header (no back button when fullscreen tab) */}
      <div style={{
        padding: '64px 18px 0',
        background: 'linear-gradient(180deg, #0e1422 0%, #1a2236 100%)',
        color: '#fff',
        borderBottom: '1px solid rgba(212,175,55,0.3)',
      }}>
        {!fullscreen && (
          <button onClick={onBack} style={{
            all: 'unset', cursor: 'pointer', color: '#d4af37',
            fontSize: 22, marginBottom: 6, display: 'inline-block',
          }}>←</button>
        )}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="mono" style={{ fontSize: 9, color: '#d4af37', letterSpacing: '0.14em', fontWeight: 700 }}>
              ◆ {L.season.toUpperCase()} · COMMISSIONER
            </div>
            <h1 className="serif" style={{ fontSize: 26, lineHeight: 1, margin: '2px 0 0', color: '#fff' }}>
              {L.name}
            </h1>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {onSubScreen && <button onClick={() => onSubScreen('draft')} style={{
              all: 'unset', cursor: 'pointer',
              background: 'transparent', color: '#d4af37',
              border: '1px solid #d4af37',
              padding: '5px 10px',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700,
            }}>◆ Draft Room</button>}
            <button onClick={() => setChatOpen(true)} style={{
              all: 'unset', cursor: 'pointer',
              background: '#d4af37', color: '#0e1422',
              padding: '6px 10px',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700,
            }}>◆ Crew Chat</button>
          </div>
        </div>

        {/* Hero stats */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 16,
          marginTop: 14, paddingBottom: 14,
          alignItems: 'baseline',
        }}>
          <div>
            <div className="num serif" style={{ fontSize: 64, lineHeight: 1, color: '#d4af37' }}>#{L.myRank}</div>
            <div className="mono" style={{ fontSize: 9, color: '#a8b0c0', letterSpacing: '0.12em', marginTop: 2 }}>OF {L.teams}</div>
          </div>
          <div>
            <div className="num serif" style={{ fontSize: 34, lineHeight: 1, color: '#fff' }}>
              {L.points}
              <span className="mono" style={{ fontSize: 11, color: '#a8b0c0', marginLeft: 6 }}>pts</span>
            </div>
            <div className="mono" style={{
              fontSize: 11, marginTop: 6, color: todayPts >= 0 ? '#3aa168' : '#d63b32',
              letterSpacing: '0.06em',
            }}>
              {todayPts >= 0 ? '+' : ''}{todayPts} TODAY
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="mono" style={{ fontSize: 9, color: '#a8b0c0', letterSpacing: '0.12em' }}>GAP TO #1</div>
            <div className="num serif" style={{ fontSize: 22, color: '#d63b32', lineHeight: 1.1 }}>
              −{leaderGap}
            </div>
          </div>
        </div>

        {/* Progress bar to leader */}
        <div style={{ paddingBottom: 14 }}>
          <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', position: 'relative' }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, height: '100%',
              width: `${(L.points / L.leader.points) * 100}%`,
              background: 'linear-gradient(90deg, #d4af37, #f0d97a)',
            }}/>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between', marginTop: 4,
            fontFamily: 'var(--font-mono)', fontSize: 9, color: '#a8b0c0',
          }}>
            <span>YOU · {L.points}</span>
            <span>{L.leader.team.toUpperCase()} · {L.leader.points}</span>
          </div>
        </div>

        {/* Tab strip */}
        <div style={{ display: 'flex', gap: 0, marginBottom: -1 }}>
          {[
            { k: 'team',      label: 'My Team' },
            { k: 'scoring',   label: 'Live' },
            { k: 'wire',      label: 'Wire' },
            { k: 'standings', label: 'Standings' },
            { k: 'league',    label: 'League' },
          ].map(t => (
            <button key={t.k} onClick={() => setTab(t.k)} style={{
              all: 'unset', cursor: 'pointer', flex: 1, textAlign: 'center',
              padding: '10px 4px',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              borderBottom: '2px solid ' + (tab === t.k ? '#d4af37' : 'transparent'),
              color: tab === t.k ? '#d4af37' : '#a8b0c0',
              fontWeight: tab === t.k ? 700 : 500,
            }}>{t.label}</button>
          ))}
        </div>
      </div>

      {/* Content panes */}
      {tab === 'team'      && <FantasyTeam roster={L.myRoster}/>}
      {tab === 'scoring'   && <FantasyScoring scoring={scoring} todayPts={todayPts}/>}
      {tab === 'wire'      && <FantasyWire waivers={waivers} roster={L.myRoster}/>}
      {tab === 'standings' && <FantasyStandings standings={f.standings}/>}
      {tab === 'league'    && <FantasyLeague league={L} activity={activity}/>}

      {/* Crew chat modal */}
      {chatOpen && (
        <FantasyChatModal roster={L.myRoster} onClose={() => setChatOpen(false)}/>
      )}
    </div>
  );
}

// ─── Tab: My Team ────────────────────────────────────────────────────────
function FantasyTeam({ roster }) {
  const alive    = roster.filter(p => p.status === 'alive');
  const busted   = roster.filter(p => p.status === 'busted');
  const inactive = roster.filter(p => p.status === 'inactive' || p.status === 'on_break');

  return (
    <div style={{ padding: '14px 0 24px' }}>
      <div style={{ padding: '0 18px 6px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', letterSpacing: '0.12em' }}>
          {roster.length} ROSTERED · {alive.length} ALIVE · {busted.length} OUT
        </div>
      </div>

      {/* Alive (green) */}
      {alive.length > 0 && (
        <FantasyRosterSection title="● ALIVE" color="var(--green-bright)" players={alive}/>
      )}
      {inactive.length > 0 && (
        <FantasyRosterSection title="◐ RESTING / BREAK" color="var(--amber-c)" players={inactive}/>
      )}
      {busted.length > 0 && (
        <FantasyRosterSection title="✕ BUSTED" color="var(--red-bright)" players={busted}/>
      )}

      <div style={{ padding: '18px 18px 0', display: 'flex', gap: 8 }}>
        <button className="btn btn-gold" style={{ flex: 1 }}>+ Add player</button>
        <button className="btn btn-ghost" style={{ flex: 1 }}>Optimize lineup</button>
      </div>
    </div>
  );
}

function FantasyRosterSection({ title, color, players }) {
  return (
    <div style={{ marginTop: 14 }}>
      <div className="mono" style={{
        padding: '0 18px 4px', fontSize: 10, color, letterSpacing: '0.14em', fontWeight: 700,
      }}>{title} · {players.length}</div>
      {players.map(p => <FantasyPlayerRow key={p.id || p.name} p={p}/>)}
    </div>
  );
}

function FantasyPlayerRow({ p }) {
  const [open, setOpen] = uS_m(false);
  const stateColor =
    p.status === 'alive'    ? 'var(--green-bright)' :
    p.status === 'busted'   ? 'var(--red-bright)'   :
    p.status === 'on_break' ? 'var(--amber-c)'      : 'var(--muted-d)';

  return (
    <div style={{ borderTop: '1px solid var(--line-d)' }}>
      <button onClick={() => setOpen(o => !o)} style={{
        all: 'unset', cursor: 'pointer', width: '100%',
        padding: '12px 18px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 38, height: 38, borderRadius: '50%',
          background: 'var(--felt-3)', border: `2px solid ${stateColor}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700,
          color: 'var(--ivory-d)', flexShrink: 0,
        }}>{p.avatar || p.name.slice(0,2).toUpperCase()}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="serif" style={{ fontSize: 17, lineHeight: 1.1 }}>{p.name}</div>
          <div className="mono" style={{ fontSize: 10, color: stateColor, letterSpacing: '0.08em', marginTop: 2, fontWeight: 600 }}>
            {p.status.toUpperCase()} {p.where ? `· ${p.where}` : ''}
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 2 }}>
            {p.lastEvent}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="num serif" style={{ fontSize: 22, color: 'var(--gold)', lineHeight: 1 }}>
            {p.pts}
          </div>
          <div className="mono" style={{ fontSize: 9, color: 'var(--muted-d)', letterSpacing: '0.08em' }}>POY</div>
        </div>
        <div style={{ color: 'var(--muted-d)', fontSize: 14, marginLeft: 4 }}>{open ? '▾' : '›'}</div>
      </button>
      {open && (
        <div style={{
          padding: '0 18px 14px', background: 'var(--felt-2)',
          borderTop: '1px solid var(--line-d)',
        }}>
          {p.status === 'alive' && p.chips && (
            <div style={{ paddingTop: 12, paddingBottom: 8 }}>
              <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted-d)' }}>STACK</div>
              <div className="num serif" style={{ fontSize: 20 }}>
                {(p.chips/1000).toFixed(1)}k
                {p.avg ? <span className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', marginLeft: 8 }}>
                  / avg {(p.avg/1000).toFixed(1)}k
                </span> : null}
              </div>
              {p.table && (
                <div className="mono" style={{ fontSize: 11, color: 'var(--paper-d)', marginTop: 2 }}>{p.table}</div>
              )}
            </div>
          )}
          <div style={{ display: 'flex', gap: 6, paddingTop: 8, flexWrap: 'wrap' }}>
            <button className="btn btn-ghost" style={{ padding: '6px 10px', fontSize: 11 }}>
              Nudge
            </button>
            <button className="btn btn-ghost" style={{ padding: '6px 10px', fontSize: 11 }}>
              View profile
            </button>
            <button className="btn btn-ghost" style={{ padding: '6px 10px', fontSize: 11 }}>
              Trade
            </button>
            <button className="btn btn-ghost" style={{ padding: '6px 10px', fontSize: 11, color: 'var(--red-bright)' }}>
              Drop
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Tab: Live scoring feed ──────────────────────────────────────────────
function FantasyScoring({ scoring, todayPts }) {
  return (
    <div style={{ padding: '14px 0 24px' }}>
      <div style={{ padding: '0 18px 12px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>
          ● LIVE · TODAY
        </div>
        <div className="serif" style={{ fontSize: 30, lineHeight: 1, marginTop: 2 }}>
          <span style={{ color: todayPts >= 0 ? 'var(--green-bright)' : 'var(--red-bright)' }}>
            {todayPts >= 0 ? '+' : ''}{todayPts}
          </span>
          <span className="mono" style={{ fontSize: 12, color: 'var(--muted-d)', marginLeft: 8, letterSpacing: '0.1em' }}>
            POY TODAY
          </span>
        </div>
      </div>

      {scoring.map((e, i) => {
        const isPlus = e.pts >= 0;
        const c = isPlus ? 'var(--green-bright)' : 'var(--red-bright)';
        const iconBg = e.kind === 'cash'      ? 'var(--gold)'
                     : e.kind === 'chip_lead' ? 'var(--green-bright)'
                     : e.kind === 'bust'      ? 'var(--red-bright)'
                     : 'var(--paper-d)';
        const icon  = e.kind === 'cash'      ? '$'
                     : e.kind === 'chip_lead' ? '◆'
                     : e.kind === 'bust'      ? '✕'
                     : '●';
        return (
          <div key={i} style={{
            padding: '12px 18px', borderTop: '1px solid var(--line-d)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: '50%',
              background: iconBg, color: '#0e1422',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, flexShrink: 0,
            }}>{icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="serif" style={{ fontSize: 16, lineHeight: 1.15 }}>
                {e.who} <span style={{ color: 'var(--muted-d)' }}>· {e.event}</span>
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 2 }}>
                {e.note} · {e.time}
              </div>
            </div>
            <div className="num serif" style={{
              fontSize: 20, color: c, fontWeight: 600,
            }}>
              {isPlus ? '+' : ''}{e.pts}
            </div>
          </div>
        );
      })}

      <div style={{ padding: '18px 18px 0' }}>
        <div className="mono" style={{ fontSize: 9, color: 'var(--muted-d)', letterSpacing: '0.1em', textAlign: 'center' }}>
          AUTO-SCORED · WSOP OFFICIAL FEED · UPDATES EVERY 90s
        </div>
      </div>
    </div>
  );
}

// ─── Tab: Waiver Wire (pickups) ──────────────────────────────────────────
function FantasyWire({ waivers, roster }) {
  return (
    <div style={{ padding: '14px 0 24px' }}>
      <div style={{ padding: '0 18px 8px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>
          ◇ FREE AGENTS
        </div>
        <div className="serif" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 2 }}>
          Pick up a pro
        </div>
        <p style={{ fontSize: 12, color: 'var(--paper-d)', marginTop: 4, lineHeight: 1.4 }}>
          Anyone not on a roster in your league. Higher cost = hotter form.
        </p>
      </div>

      {waivers.map(w => {
        const heatColor = w.form === 'on fire' ? 'var(--red-bright)'
                        : w.form === 'rising'  ? 'var(--gold)'
                        : 'var(--muted-d)';
        const arrow = w.trend === 'hot' ? '↑↑' : w.trend === 'rising' ? '↑' : '↓';
        return (
          <div key={w.id} style={{
            padding: '14px 18px', borderTop: '1px solid var(--line-d)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="mono" style={{
                fontSize: 10, color: heatColor, letterSpacing: '0.08em', fontWeight: 700,
                marginBottom: 2,
              }}>{arrow} {w.form.toUpperCase()}</div>
              <div className="serif" style={{ fontSize: 17, lineHeight: 1.1 }}>{w.name}</div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted-d)', marginTop: 4, lineHeight: 1.35 }}>
                {w.note}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="num serif" style={{ fontSize: 18 }}>{w.cost}</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--muted-d)', letterSpacing: '0.08em' }}>FAAB</div>
            </div>
            <button className="btn btn-gold" style={{ padding: '6px 10px', fontSize: 11 }}>+ Bid</button>
          </div>
        );
      })}

      <div style={{ padding: '18px 18px 0' }}>
        <div className="card card-gold" style={{ background: 'rgba(212,175,55,0.06)' }}>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 6 }}>◆ DOYLE'S WIRE TAKE</div>
          <p className="serif" style={{ fontSize: 14, lineHeight: 1.35 }}>
            Mateos is the play. PLO specialist, two $1k PLOs left this week. Drop Maria — she's been resting four days, that's bankroll, not fantasy.
          </p>
        </div>
      </div>
    </div>
  );
}

// ─── Tab: Standings ──────────────────────────────────────────────────────
function FantasyStandings({ standings }) {
  return (
    <div style={{ padding: '14px 0 24px' }}>
      <div style={{ padding: '0 18px 8px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>
          ☰ DEGEN SUNDAYS
        </div>
        <div className="serif" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 2 }}>
          League standings
        </div>
      </div>

      {standings.map((s, i) => {
        const me = s.team === 'You';
        const top3 = s.rank <= 3;
        return (
          <div key={s.rank} style={{
            padding: '12px 18px', borderTop: '1px solid var(--line-d)',
            display: 'flex', alignItems: 'center', gap: 12,
            background: me ? 'var(--gold-tint)' : 'transparent',
          }}>
            <div className="num serif" style={{
              fontSize: 24, width: 34,
              color: top3 ? 'var(--gold)' : 'var(--muted-d)',
              fontWeight: 600,
            }}>#{s.rank}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="serif" style={{ fontSize: 16, lineHeight: 1.1 }}>
                {s.team}{me && <span className="mono" style={{ marginLeft: 6, color: 'var(--gold-deep)', fontSize: 10, letterSpacing: '0.1em' }}>· YOU</span>}
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 1 }}>{s.mgr}</div>
            </div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
              width: 30, textAlign: 'right',
              color: s.change > 0 ? 'var(--green-bright)' : s.change < 0 ? 'var(--red-bright)' : 'var(--muted-d)',
            }}>
              {s.change > 0 ? `↑${s.change}` : s.change < 0 ? `↓${Math.abs(s.change)}` : '—'}
            </div>
            <div className="num serif" style={{ fontSize: 20, minWidth: 56, textAlign: 'right' }}>{s.pts}</div>
          </div>
        );
      })}
    </div>
  );
}

// ─── Tab: League activity + commissioner ────────────────────────────────
function FantasyLeague({ league, activity }) {
  const rules = league.rules;
  return (
    <div style={{ padding: '14px 0 24px' }}>
      <div style={{ padding: '0 18px 8px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>
          ⟶ LEAGUE FEED
        </div>
      </div>

      {activity.map((a, i) => {
        const iconBg = a.kind === 'trade'  ? 'var(--blue)'
                     : a.kind === 'smack'  ? 'var(--red-bright)'
                     : 'var(--gold)';
        const icon = a.kind === 'trade' ? '⇄' : a.kind === 'smack' ? '"' : '☰';
        return (
          <div key={i} style={{
            padding: '11px 18px', borderTop: '1px solid var(--line-d)',
            display: 'flex', gap: 12, alignItems: 'flex-start',
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: '50%',
              background: iconBg, color: '#0e1422',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, flexShrink: 0,
            }}>{icon}</div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 15, lineHeight: 1.25 }}>
                <span style={{ fontWeight: 600 }}>{a.who}</span>{' '}
                <span style={{ color: 'var(--paper-d)' }}>{a.text}</span>
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 3, letterSpacing: '0.08em' }}>
                {a.ts.toUpperCase()}
              </div>
            </div>
          </div>
        );
      })}

      <div style={{ padding: '20px 18px 0' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700, marginBottom: 6 }}>
          ◐ COMMISSIONER · {league.commissioner.toUpperCase()}
        </div>
        <div className="card">
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '8px 16px', fontSize: 13 }}>
            <div className="mono" style={{ color: 'var(--muted-d)' }}>FORMAT</div>
            <div className="serif" style={{ fontSize: 14 }}>{rules.format}</div>
            <div className="mono" style={{ color: 'var(--muted-d)' }}>ROSTER</div>
            <div className="serif" style={{ fontSize: 14 }}>{rules.roster}</div>
            <div className="mono" style={{ color: 'var(--muted-d)' }}>SCORING</div>
            <div className="serif" style={{ fontSize: 14 }}>{rules.scoring}</div>
            <div className="mono" style={{ color: 'var(--muted-d)' }}>TRADES</div>
            <div className="serif" style={{ fontSize: 14 }}>{rules.trades}</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
          <button className="btn btn-ghost" style={{ flex: 1, minWidth: 130 }}>Invite players</button>
          <button className="btn btn-ghost" style={{ flex: 1, minWidth: 130 }}>Edit rules</button>
          <button className="btn btn-ghost" style={{ flex: '0 0 100%' }}>+ Create another league</button>
        </div>
      </div>
    </div>
  );
}

// ─── Crew chat modal (popup over Fantasy tab) ───────────────────────────
function FantasyChatModal({ roster, onClose }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.6)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      backdropFilter: 'blur(2px)',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxHeight: '85%',
        background: 'rgba(14,20,34,0.97)',
        borderTop: '1px solid #d4af37',
        display: 'flex', flexDirection: 'column',
        color: '#fff',
      }}>
        <div style={{
          padding: '12px 14px',
          borderBottom: '1px solid rgba(212,175,55,0.3)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          background: 'linear-gradient(90deg, #1a3e7a, #0e1422)',
        }}>
          <div>
            <div className="mono" style={{ fontSize: 9, color: '#d4af37', letterSpacing: '0.14em', fontWeight: 700 }}>
              ◆ DEGEN SUNDAYS · CREW CHAT
            </div>
            <div className="serif" style={{ fontSize: 17, lineHeight: 1.05, marginTop: 2 }}>
              You + {roster.length} roster · Coach Doyle
            </div>
          </div>
          <button onClick={onClose} style={{
            all: 'unset', cursor: 'pointer', color: '#d4af37',
            fontSize: 24, padding: 4, lineHeight: 1,
          }}>×</button>
        </div>

        <div style={{
          padding: '14px 14px 18px',
          display: 'flex', flexDirection: 'column', gap: 10,
          overflowY: 'auto', maxHeight: 360,
        }}>
          {[
            { who: 'You',     avatar: 'AH', text: "Phil busted #54 L8. Throwing him in $1k Mystery if he wants.", ts: '2:08 PM' },
            { who: 'Phil H.', avatar: 'PH', text: "tilted but in. $1k buyin?", ts: '2:11 PM' },
            { who: 'Doyle',   avatar: '◆',  text: "Phil on a soft Mystery field = +60 POY EV. Send it.", ts: '2:12 PM', isCoach: true },
            { who: 'Marco',   avatar: 'MV', text: 'walking him over. closes in 38m', ts: '2:14 PM' },
            { who: 'Doyle',   avatar: '◆',  text: "Tasha at chip avg, Daniel cashed for 24 pts. Tonight's lineup is locked.", ts: '2:18 PM', isCoach: true },
          ].map((m, i) => {
            const isMe = m.who === 'You';
            const isCoach = m.isCoach;
            return (
              <div key={i} style={{
                display: 'flex', gap: 8,
                flexDirection: isMe ? 'row-reverse' : 'row',
                alignItems: 'flex-end',
              }}>
                <div style={{
                  width: 24, height: 24, borderRadius: '50%',
                  background: isCoach ? '#1a3e7a' : '#0e1422',
                  border: `1.5px solid ${isCoach ? '#d4af37' : '#a8b0c0'}`,
                  fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700,
                  color: isCoach ? '#d4af37' : '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>{m.avatar}</div>
                <div style={{ maxWidth: '78%' }}>
                  <div className="mono" style={{
                    fontSize: 8.5, color: isCoach ? '#d4af37' : '#a8b0c0',
                    textAlign: isMe ? 'right' : 'left',
                    letterSpacing: '0.06em', marginBottom: 2, fontWeight: isCoach ? 700 : 500,
                  }}>{m.who.toUpperCase()} · {m.ts}</div>
                  <div style={{
                    padding: '7px 10px',
                    background: isMe ? '#3aa168'
                      : isCoach ? '#1a3e7a' : 'rgba(255,255,255,0.08)',
                    color: isMe ? '#0e1422' : '#fff',
                    fontFamily: 'var(--font-serif)', fontSize: 14, lineHeight: 1.3,
                    border: isCoach ? '1px solid #d4af37' : 'none',
                  }}>{m.text}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.08)',
          padding: 12,
          display: 'flex', gap: 6,
        }}>
          <input placeholder="Message the crew…"
            style={{
              flex: 1, padding: '8px 10px',
              border: '1px solid rgba(255,255,255,0.15)',
              fontFamily: 'var(--font-system)', fontSize: 13,
              background: 'rgba(0,0,0,0.3)', color: '#fff',
              outline: 'none',
            }}/>
          <button style={{
            all: 'unset', cursor: 'pointer',
            background: '#d4af37', color: '#0e1422',
            padding: '8px 14px',
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700,
          }}>Send</button>
        </div>
      </div>
    </div>
  );
}

// ─── News + Feuds ────────────────────────────────────────────────────────
function NewsScreen({ onBack }) {
  const news = window.APP_DATA.news;
  const feuds = window.APP_DATA.feuds;
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100 }}>
      <SubHeader title="The Wire" eyebrow="Poker news + feuds" onBack={onBack}/>
      <div style={{ padding: 20 }}>
        <div className="section-num" style={{ marginBottom: 8 }}>↯ FEUDS</div>
        {feuds.map((f, i) => {
          const heatColor = f.heat === 'BOILING' ? 'var(--red-bright)' : f.heat === 'ETERNAL' ? 'var(--gold)' : 'var(--paper-d)';
          return (
            <div key={i} style={{ padding: 14, marginBottom: 10, border: `1px solid ${f.heat === 'BOILING' ? 'rgba(231,76,60,0.4)' : 'var(--line-d)'}`, background: f.heat === 'BOILING' ? 'var(--red-tint)' : 'var(--felt-2)' }}>
              <div className="eyebrow" style={{ color: heatColor, marginBottom: 6 }}>{f.heat} · {f.round}</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.05, marginBottom: 6 }}>
                {f.a} <span style={{ color: 'var(--muted-d)', fontStyle: 'italic' }}>vs.</span> {f.b}
              </div>
              <p style={{ fontSize: 13, color: 'var(--paper-d)', lineHeight: 1.4 }}>{f.summary}</p>
            </div>
          );
        })}

        <div className="section-num" style={{ marginTop: 20, marginBottom: 8 }}>↗ HEADLINES</div>
        {news.map((n, i) => (
          <div key={i} style={{ padding: '14px 0', borderTop: '1px solid var(--line-d)', display: 'flex', gap: 14 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', whiteSpace: 'nowrap', width: 70, paddingTop: 2 }}>
              {n.src}<br/><span style={{ color: 'var(--muted-d)' }}>{n.time}</span>
            </div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 17, lineHeight: 1.25, marginBottom: 4 }}>{n.title}</div>
              <span className="tag tag-gold" style={{ fontSize: 9 }}>{n.tag}</span>
            </div>
          </div>
        ))}

        <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 24, textAlign: 'center', letterSpacing: '0.1em' }}>
          FEEDS · POKERNEWS · POKERGO · POKERATLAS · POKERWIRED
        </div>
      </div>
    </div>
  );
}

// ─── Rankings ────────────────────────────────────────────────────────────
function RankingsScreen({ onBack }) {
  const ranks = [
    { rank: 1, name: 'Daniel Negreanu',  pts: 3420, cashes: 11, change: 0 },
    { rank: 2, name: 'Phil Ivey',        pts: 3180, cashes: 9,  change: 1 },
    { rank: 3, name: 'Phil Hellmuth',    pts: 3142, cashes: 8,  change: -1 },
    { rank: 4, name: 'Maria Ho',         pts: 2980, cashes: 10, change: 2 },
    { rank: 5, name: 'Bryn Kenney',      pts: 2870, cashes: 7,  change: 0 },
    { rank: 11, name: 'Marco Vela',      pts: 1890, cashes: 6, change: 4, friend: true },
    { rank: 47, name: 'You',             pts: 312, cashes: 4, change: 8, me: true },
  ];
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100 }}>
      <SubHeader title="WSOP rankings" eyebrow="2026 summer · live" onBack={onBack}/>
      <div style={{ padding: 20 }}>
        {ranks.map(r => (
          <div key={r.rank} style={{ padding: '14px 12px', borderTop: '1px solid var(--line-d)',
            display: 'flex', alignItems: 'center', gap: 12,
            background: r.me ? 'var(--gold-tint)' : 'transparent',
          }}>
            <div className="serif num" style={{ fontSize: 28, color: r.rank <= 3 ? 'var(--gold)' : 'var(--paper-d)', width: 40 }}>#{r.rank}</div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 18, lineHeight: 1.1 }}>
                {r.name} {r.friend && <span className="tag tag-gold" style={{ marginLeft: 6 }}>FRIEND</span>}
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', marginTop: 2 }}>{r.cashes} cashes this summer</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="num serif" style={{ fontSize: 18 }}>{r.pts.toLocaleString()}</div>
              <div className="mono" style={{ fontSize: 10, color: r.change > 0 ? 'var(--green-bright)' : r.change < 0 ? 'var(--red-bright)' : 'var(--muted-d)' }}>
                {r.change > 0 ? `↑${r.change}` : r.change < 0 ? `↓${Math.abs(r.change)}` : '—'}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Settings / Responsible ─────────────────────────────────────────────
function SettingsScreen({ onBack }) {
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 100 }}>
      <SubHeader title="Responsible play" eyebrow="Limits · resources · pause" onBack={onBack}/>
      <div style={{ padding: 20 }}>
        <div className="card card-gold" style={{ marginBottom: 16 }}>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 6 }}>If you need to step away</div>
          <div className="serif" style={{ fontSize: 20, marginBottom: 12, lineHeight: 1.2 }}>1-800-GAMBLER · 24/7</div>
          <p style={{ fontSize: 13, color: 'var(--paper-d)', lineHeight: 1.4 }}>
            Free, confidential. Nevada Council on Problem Gambling.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <a href="tel:1-800-426-2537" className="btn btn-gold" style={{ flex: 1 }}>Call</a>
            <a href="#" className="btn btn-ghost" style={{ flex: 1 }}>Chat now</a>
          </div>
        </div>

        <div className="section-num" style={{ marginBottom: 8 }}>YOUR LIMITS</div>
        {[
          { k: 'Daily buy-in cap', v: '$1,500' },
          { k: 'Session length',   v: '8 hours then nudge' },
          { k: 'Loss-in-trip',     v: '$5,000 then pause' },
          { k: 'Doyle bust-check', v: 'On after 2 busts/day' },
          { k: 'Hide bankroll on lock screen', v: 'On' },
        ].map((row, i) => (
          <div key={i} style={{ padding: '14px 0', borderTop: '1px solid var(--line-d)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div className="serif" style={{ fontSize: 16 }}>{row.k}</div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--gold)' }}>{row.v} ›</div>
          </div>
        ))}

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 24 }}>
          <button className="btn btn-ghost">Pause Doyle (24h)</button>
          <button className="btn btn-ghost">Pause bankroll tracking</button>
          <button className="btn btn-red">Self-exclude · 7 days</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MeScreen, HistoryScreen, BustoutScreen, RecapScreen, FantasyScreen, NewsScreen, RankingsScreen, SettingsScreen });