// Sporda — Phase I · News sub-screens. 3 mobile + 2 desktop.
// 020 News feed shipped Session 1. New: 063 Reader · 064 Topic · 065 Comments
// + 063D Reader desktop + 064D Topic desktop.

// ===========================================================================
// 063 — NEWS · ARTICLE READER (mobile)
// ===========================================================================
const ScreenNewsArticle = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      {/* Header — back + utility */}
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 12px', gap: 12 }}>
        <RoundBtn><I.chevL size={18}/></RoundBtn>
        <div style={{ flex: 1, fontSize: 11, color: 'var(--text-secondary)', textAlign: 'center', fontWeight: 600 }}>The Athletic</div>
        <RoundBtn><I.share size={16}/></RoundBtn>
        <RoundBtn><I.star size={16}/></RoundBtn>
      </div>
      <div className="body">
        {/* Hero */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{
            aspectRatio: '16/10', borderRadius: 16, overflow: 'hidden',
            position: 'relative',
            background: 'linear-gradient(135deg, #EF0107 0%, #6D050A 50%, #182320 100%)',
            display: 'flex', alignItems: 'flex-end', padding: 16,
          }}>
            <div className="tag-micro" style={{ position: 'absolute', top: 14, left: 14, background: 'var(--accent)', color: 'var(--accent-ink)', padding: '4px 10px', borderRadius: 999 }}>Title race</div>
            <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', height: '40%', opacity: 0.2 }}>
              <path d="M0,40 Q20,20 40,30 T80,28 T120,32 T160,26 T200,30 L200,60 L0,60 Z" fill="white"/>
            </svg>
            <div style={{ position: 'relative', zIndex: 1, color: 'white' }}>
              <div className="mono" style={{ fontSize: 48, fontWeight: 900, lineHeight: 1 }}>3 pts</div>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.06em', marginTop: 4 }}>BETWEEN LIVERPOOL & ARSENAL</div>
            </div>
          </div>
        </div>

        {/* Title block */}
        <div style={{ padding: '0 20px 16px' }}>
          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.2, textWrap: 'pretty' }}>
            The Premier League title race tightens: 24 games to go, three points and 50 miles between top and second.
          </h1>
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 28, height: 28, borderRadius: '50%', background: hashColor('Adam Hurrey'), display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700 }}>AH</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>Adam Hurrey</div>
              <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>2h ago · 4 min read</div>
            </div>
            <button style={{ padding: '6px 12px', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 999, fontSize: 11, fontWeight: 700 }}>+ Follow</button>
          </div>
        </div>

        {/* Body — paragraphs + pull quote */}
        <div style={{ padding: '0 20px 16px', fontSize: 15, lineHeight: 1.6, color: 'var(--text-primary)' }}>
          <p style={{ marginTop: 0, fontSize: 16, fontWeight: 600 }}>
            Arteta's defense has conceded the fewest. Slot's attack has scored the most. The Anfield clash this weekend may settle which side holds the lead at Christmas.
          </p>
          <p>
            After fourteen matchweeks the gap is razor-thin. Liverpool sit on 35 points, Arsenal 32, and the rest of the chasing pack — including Manchester City — already feel cup-tied to the Champions League knockout phase.
          </p>
          {/* Inline scoreline embed */}
          <div style={{
            background: 'var(--hero-grad)', border: '1px solid rgba(200,255,62,0.12)',
            borderRadius: 14, padding: 14, margin: '16px 0',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Last meeting</span>
              <span style={{ fontSize: 10, color: 'var(--text-muted)' }}>Feb 4, 2026 · Emirates</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                <span style={{ fontSize: 13, fontWeight: 700 }}>Arsenal</span>
                <ArsenalCrest size={28}/>
              </div>
              <div className="mono" style={{ fontSize: 18, fontWeight: 800 }}>2 – 2</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
                <span style={{ fontSize: 13, fontWeight: 700 }}>Liverpool</span>
              </div>
            </div>
          </div>
          {/* Pull quote */}
          <div style={{
            margin: '16px -4px', padding: '0 0 0 14px',
            borderLeft: '3px solid var(--accent)',
          }}>
            <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.35, fontStyle: 'italic' }}>"It's the one fixture every player circles. You don't need to motivate anyone for it."</div>
            <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-muted)' }}>— Mikel Arteta, pre-match presser</div>
          </div>
          <p>
            What's striking is the goal difference. Arsenal have conceded eleven all season; the next-best defense (Newcastle) has shipped sixteen. If the gap is to close, it'll come at Anfield this Saturday.
          </p>
        </div>

        {/* Reactions */}
        <div style={{ padding: '4px 20px 16px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Reactions · 1,247</div>
          <GoalReactBar/>
        </div>

        {/* Engagement bar */}
        <div style={{ padding: '0 20px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid var(--border-hairline)', paddingTop: 14 }}>
          <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600 }}>
            <I.heart size={16}/> 4.2k
          </button>
          <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600 }}>
            <I.cmt size={16}/> 312
          </button>
          <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600 }}>
            <I.share size={16}/> Share
          </button>
          <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--accent)', fontSize: 13, fontWeight: 700 }}>
            View comments
          </button>
        </div>

        {/* Related articles */}
        <div style={{ padding: '20px 20px 24px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Related</div>
          {[
            { tag: 'Tactics', title: "How Slot's high line is forcing teams to change their press", meta: 'The Athletic · 8h ago', c: '#C8102E' },
            { tag: 'Analysis', title: "Saliba's anti-Henry: defending Arsenal back to the top", meta: 'BBC · 1d ago', c: '#EF0107' },
          ].map((n, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderTop: '1px solid var(--border-hairline)' }}>
              <div style={{ width: 64, height: 64, borderRadius: 10, flex: 'none', background: `linear-gradient(135deg, ${n.c} 0%, #1A2320 100%)` }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>{n.tag}</div>
                <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 6 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BottomNav active="news"/>
    </div>
  </div>
);

// ===========================================================================
// 064 — NEWS · TOPIC PAGE (mobile)
// "Topic" = a tag/page like #ArsenalTransfers, #PremierLeagueTitleRace, etc.
// ===========================================================================
const ScreenNewsTopic = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header
          left={<RoundBtn><I.chevL size={18}/></RoundBtn>}
          right={<RoundBtn><I.share size={16}/></RoundBtn>}
        />
        {/* Topic hero */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>Topic · trending</div>
          <h1 style={{ margin: 0, fontSize: 28, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
            Premier League<br/>title race
          </h1>
          <div style={{ marginTop: 8, fontSize: 13, color: 'var(--text-secondary)', textWrap: 'pretty' }}>
            247 articles since August. Live updates from Liverpool, Arsenal, and Man City beats.
          </div>
          <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
            <button style={{ padding: '10px 18px', background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 999, fontSize: 13, fontWeight: 800, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <I.bell size={14}/> Following
            </button>
            <button style={{ padding: '10px 14px', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 999, fontSize: 13, fontWeight: 600 }}>
              Customize alerts
            </button>
          </div>
        </div>

        {/* Snapshot card */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{
            background: 'var(--hero-grad)',
            border: '1px solid rgba(200,255,62,0.15)',
            borderRadius: 16, padding: 16,
          }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Live snapshot</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
                  <span className="mono" style={{ fontSize: 18, fontWeight: 800 }}>35</span>
                  <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>1st</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <ArsenalCrest size={28}/>
                  <span className="mono" style={{ fontSize: 18, fontWeight: 800, color: 'var(--accent)' }}>32</span>
                  <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>2nd · −3</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Crest name="Man City" code="MCI" bg="#6CABDD"/>
                  <span className="mono" style={{ fontSize: 18, fontWeight: 800 }}>30</span>
                  <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>3rd · −5</span>
                </div>
              </div>
              <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-hairline)' }}/>
              <div style={{ minWidth: 96 }}>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.04em' }}>NEXT</div>
                <div style={{ marginTop: 4, fontSize: 12, fontWeight: 700 }}>LIV vs ARS</div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>Sat 21:00</div>
                <div className="pill live" style={{ marginTop: 8, fontSize: 9, height: 18, padding: '0 6px' }}><span className="dot"/>2d 4h</div>
              </div>
            </div>
          </div>
        </div>

        {/* Sub-filter pills */}
        <div style={{ padding: '0 20px 14px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['Top stories', 'Latest', 'Tactics', 'Predictions', 'Player focus'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>

        {/* Article list */}
        <div style={{ padding: '0 20px 16px' }}>
          {[
            { tag: 'Analysis', title: 'The Premier League title race tightens: 24 games to go, three points apart.', meta: 'The Athletic · 2h ago · 1,247 reactions', c: '#3D5AFE', current: true },
            { tag: 'Tactics',  title: "How Slot's high line is forcing teams to change their press", meta: 'The Athletic · 8h ago · 542 reactions', c: '#C8102E' },
            { tag: 'Predictions', title: "Title odds shift: Arsenal back in front for the first time since November", meta: 'OddsCheck · 12h ago · 218 reactions', c: '#FFB547' },
            { tag: 'Player focus', title: "Saliba's anti-Henry: defending Arsenal back to the top", meta: 'BBC · 1d ago · 891 reactions', c: '#EF0107' },
            { tag: 'Tactics', title: "Why Man City might already be out of the title race", meta: 'The Times · 1d ago · 1,021 reactions', c: '#6CABDD' },
          ].map((n, i, arr) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0 }}>
              <div style={{ width: 72, height: 72, borderRadius: 12, flex: 'none', position: 'relative', background: `linear-gradient(135deg, ${n.c} 0%, #1A2320 100%)` }}>
                {n.current && <div style={{ position: 'absolute', top: -4, right: -4, padding: '2px 6px', background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 4, fontSize: 9, fontWeight: 800 }}>READ</div>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>{n.tag}</div>
                <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3, textWrap: 'pretty', opacity: n.current ? 0.6 : 1 }}>{n.title}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 6 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BottomNav active="news"/>
    </div>
  </div>
);

// ===========================================================================
// 065 — NEWS · COMMENTS (mobile)
// ===========================================================================
const ScreenNewsComments = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body" style={{ paddingBottom: 120 }}>
        <Header
          left={<RoundBtn><I.chevL size={18}/></RoundBtn>}
          title="312 comments"
          right={<RoundBtn><I.more/></RoundBtn>}
        />
        {/* Article ref */}
        <div style={{ padding: '0 20px 14px' }}>
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 12, padding: 12, display: 'flex', gap: 10 }}>
            <div style={{ width: 40, height: 40, borderRadius: 8, flex: 'none', background: 'linear-gradient(135deg, #EF0107 0%, #1A2320 100%)' }}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                The Premier League title race tightens
              </div>
              <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>The Athletic · 2h ago</div>
            </div>
          </div>
        </div>

        {/* Sort */}
        <div style={{ padding: '0 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {['Top', 'Newest', 'Followed'].map((s, i) => (
              <div key={s} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ height: 28, fontSize: 11 }}>{s}</div>
            ))}
          </div>
          <button style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>Subscribe</button>
        </div>

        {/* Comment list */}
        <div style={{ padding: '0 20px' }}>
          {[
            { name: 'JohnE.', team: 'ARS', tb: '#EF0107', time: '14m', text: "The Saliba stat is the headline. Arsenal can outscore anyone but they win titles by conceding nothing. We've finally got the spine.", likes: 124, replies: 18, mine: true },
            { name: 'KopRed',  team: 'LIV', tb: '#C8102E', time: '32m', text: "Three points is nothing. Anfield decides this. The script writes itself.", likes: 88, replies: 32, op: true },
            { name: 'Sam P.', team: 'MCI', tb: '#6CABDD', time: '1h',  text: "City fan here. We're not done. Five points down means nothing in May.", likes: 64, replies: 41 },
            { name: 'TacticsHead', time: '1h', text: "Article slightly underplays how much the Saka/Saliba double-act is Arteta's masterstroke this season. Both top-3 in their positions across the league.", likes: 51, replies: 7 },
            { name: 'DaveCoulthard', team: 'LIV', tb: '#C8102E', time: '2h', text: "If we win Saturday, the title's ours. Simple.", likes: 31, replies: 14 },
          ].map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, padding: '14px 0', borderBottom: '1px solid var(--border-hairline)' }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: c.tb || hashColor(c.name),
                color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 11, flex: 'none', position: 'relative',
              }}>
                {c.name.slice(0, 2).toUpperCase()}
                {c.team && <span style={{ position: 'absolute', bottom: -2, right: -2, fontSize: 8, padding: '1px 4px', background: c.tb, color: 'white', borderRadius: 4, fontWeight: 800, border: '2px solid var(--bg-base)' }}>{c.team}</span>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>{c.name}</span>
                  {c.mine && <span style={{ padding: '1px 5px', background: 'rgba(200,255,62,0.15)', color: 'var(--accent)', fontSize: 9, fontWeight: 700, borderRadius: 3 }}>YOU</span>}
                  {c.op && <span style={{ padding: '1px 5px', background: 'rgba(255,181,71,0.15)', color: 'var(--warning)', fontSize: 9, fontWeight: 700, borderRadius: 3 }}>SUB</span>}
                  <span style={{ fontSize: 10, color: 'var(--text-muted)', marginLeft: 'auto' }}>{c.time}</span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--text-primary)', lineHeight: 1.4, textWrap: 'pretty' }}>{c.text}</div>
                <div style={{ marginTop: 8, display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>
                  <button style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: c.mine ? 'var(--accent)' : 'var(--text-secondary)' }}>
                    <I.heart size={13} fill={c.mine}/> {c.likes}
                  </button>
                  <button>Reply · {c.replies}</button>
                  <button>Share</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Sticky comment composer */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: 'var(--bg-base)', borderTop: '1px solid var(--border-hairline)',
        padding: '12px 20px 32px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'linear-gradient(135deg, #7158E2, #3D5AFE)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 10 }}>BR</div>
          <div style={{ flex: 1, background: 'var(--bg-inset)', borderRadius: 999, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <input placeholder="Add a comment…" style={{ flex: 1, border: 0, background: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13, fontFamily: 'var(--font-ui)' }}/>
            <span style={{ fontSize: 16 }}>🔥</span>
          </div>
          <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
);

// ===========================================================================
// 063D — NEWS · ARTICLE READER (desktop) — long-form layout
// ===========================================================================
const ScreenNewsArticleDesktop = () => (
  <DesktopPage>
    <TopNav active="news"/>
    <div style={{ flex: 1, overflow: 'auto' }}>
      <div style={{ padding: '32px 48px 16px', display: 'grid', gridTemplateColumns: '1fr 720px 1fr', gap: 32 }}>
        {/* Left rail — TOC */}
        <div style={{ paddingTop: 60, position: 'sticky', top: 32, alignSelf: 'flex-start' }}>
          <div className="tag-micro" style={{ color: 'var(--text-muted)', marginBottom: 12 }}>In this article</div>
          {[
            { lbl: 'The gap at the top', active: true },
            { lbl: 'Last meeting · 2–2 at Emirates' },
            { lbl: 'What Arteta said' },
            { lbl: 'Saliba and the back four' },
            { lbl: 'What to watch Saturday' },
          ].map(t => (
            <div key={t.lbl} style={{
              padding: '8px 12px', borderLeft: '2px solid ' + (t.active ? 'var(--accent)' : 'var(--border-hairline)'),
              fontSize: 12, fontWeight: t.active ? 700 : 500,
              color: t.active ? 'var(--text-primary)' : 'var(--text-secondary)',
              marginBottom: 2, cursor: 'pointer',
            }}>{t.lbl}</div>
          ))}
        </div>

        {/* Center column — article */}
        <article>
          <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 12 }}>Title race · The Athletic</div>
          <h1 style={{ margin: 0, fontSize: 44, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1, textWrap: 'pretty', maxWidth: 680 }}>
            The Premier League title race tightens: 24 games to go, three points and 50 miles between top and second.
          </h1>
          <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: hashColor('Adam Hurrey'), display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700 }}>AH</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Adam Hurrey · The Athletic</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>2h ago · 4 min read · 1,247 reactions</div>
            </div>
            <button style={{ padding: '8px 16px', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>+ Follow</button>
            <button style={{ padding: '8px 16px', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 999, fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <I.share size={14}/> Share
            </button>
          </div>

          {/* Hero photo */}
          <div style={{
            margin: '28px 0', borderRadius: 16, overflow: 'hidden',
            aspectRatio: '16/8', position: 'relative',
            background: 'linear-gradient(135deg, #EF0107 0%, #6D050A 50%, #182320 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', height: '35%', opacity: 0.18 }}>
              <path d="M0,40 Q20,20 40,30 T80,28 T120,32 T160,26 T200,30 L200,60 L0,60 Z" fill="white"/>
            </svg>
            <div style={{ position: 'relative', zIndex: 1, color: 'white', textAlign: 'center' }}>
              <div className="mono" style={{ fontSize: 96, fontWeight: 900, lineHeight: 1 }}>3 pts</div>
              <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '0.08em', marginTop: 6 }}>BETWEEN LIVERPOOL & ARSENAL</div>
            </div>
          </div>

          <p style={{ fontSize: 18, lineHeight: 1.55, fontWeight: 600, color: 'var(--text-primary)', marginTop: 0 }}>
            Arteta's defense has conceded the fewest. Slot's attack has scored the most. The Anfield clash this weekend may settle which side holds the lead at Christmas.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-primary)' }}>
            After fourteen matchweeks the gap is razor-thin. Liverpool sit on 35 points, Arsenal 32, and the rest of the chasing pack — including Manchester City — already feel cup-tied to the Champions League knockout phase.
          </p>

          {/* Inline scoreline embed */}
          <div style={{ background: 'var(--hero-grad)', border: '1px solid rgba(200,255,62,0.12)', borderRadius: 16, padding: 18, margin: '24px 0' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Last meeting</span>
              <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Feb 4, 2026 · Emirates</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'flex-end' }}>
                <span style={{ fontSize: 16, fontWeight: 700 }}>Arsenal</span>
                <ArsenalCrest size={40}/>
              </div>
              <div className="mono" style={{ fontSize: 28, fontWeight: 800 }}>2 – 2</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
                <span style={{ fontSize: 16, fontWeight: 700 }}>Liverpool</span>
              </div>
            </div>
          </div>

          {/* Pull quote */}
          <div style={{ margin: '28px 0', padding: '12px 0 12px 24px', borderLeft: '4px solid var(--accent)' }}>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.35, fontStyle: 'italic' }}>"It's the one fixture every player circles. You don't need to motivate anyone for it."</div>
            <div style={{ marginTop: 10, fontSize: 12, color: 'var(--text-muted)' }}>— Mikel Arteta, pre-match presser</div>
          </div>

          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-primary)' }}>
            What's striking is the goal difference. Arsenal have conceded eleven all season; the next-best defense (Newcastle) has shipped sixteen. If the gap is to close, it'll come at Anfield this Saturday.
          </p>

          {/* Reactions row */}
          <div style={{ marginTop: 32, padding: '20px 0', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', gap: 24 }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Reactions · 1,247</div>
            <div style={{ flex: 1 }}><GoalReactBar/></div>
            <button style={{ padding: '10px 18px', background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 999, fontSize: 13, fontWeight: 700 }}>312 comments →</button>
          </div>
        </article>

        {/* Right rail — author + related */}
        <div style={{ paddingTop: 60, position: 'sticky', top: 32, alignSelf: 'flex-start' }}>
          <div className="card" style={{ padding: 16, marginBottom: 16 }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>About the author</div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ width: 42, height: 42, borderRadius: '50%', background: hashColor('Adam Hurrey'), display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14 }}>AH</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Adam Hurrey</div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>Senior football writer</div>
              </div>
            </div>
            <button style={{ marginTop: 12, width: '100%', padding: 8, background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>+ Follow author</button>
          </div>

          <div className="card" style={{ padding: 16 }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 12 }}>Related</div>
            {[
              { tag: 'Tactics', title: "How Slot's high line is forcing teams to change their press", meta: 'The Athletic · 8h', c: '#C8102E' },
              { tag: 'Analysis', title: "Saliba's anti-Henry: defending Arsenal back to the top", meta: 'BBC · 1d', c: '#EF0107' },
              { tag: 'Predictions', title: 'Title odds shift: Arsenal back in front', meta: 'OddsCheck · 12h', c: '#FFB547' },
            ].map((n, i) => (
              <button key={i} style={{ display: 'flex', gap: 10, padding: '10px 0', textAlign: 'left', borderTop: i > 0 ? '1px solid var(--border-hairline)' : 0, width: '100%' }}>
                <div style={{ width: 48, height: 48, borderRadius: 8, flex: 'none', background: `linear-gradient(135deg, ${n.c} 0%, #1A2320 100%)` }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 2 }}>{n.tag}</div>
                  <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 4 }}>{n.meta}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
      <SourceLineDesktop text="Article via The Athletic · refreshed 2 min ago"/>
    </div>
  </DesktopPage>
);

// ===========================================================================
// 064D — NEWS · TOPIC (desktop)
// ===========================================================================
const ScreenNewsTopicDesktop = () => (
  <DesktopPage>
    <TopNav active="news"/>
    <div style={{ flex: 1, overflow: 'auto', padding: '32px 48px' }}>
      {/* Hero band */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, marginBottom: 28 }}>
        <div>
          <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 8 }}>Topic · trending</div>
          <h1 style={{ margin: 0, fontSize: 48, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.05, textWrap: 'balance' }}>
            Premier League<br/>title race
          </h1>
          <div style={{ marginTop: 12, fontSize: 15, color: 'var(--text-secondary)', textWrap: 'pretty', maxWidth: 560 }}>
            247 articles since August. Live updates from Liverpool, Arsenal, and Man City beats.
          </div>
          <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
            <button style={{ padding: '10px 20px', background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 8, fontSize: 13, fontWeight: 800, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <I.bell size={14}/> Following
            </button>
            <button style={{ padding: '10px 16px', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 8, fontSize: 13, fontWeight: 600 }}>
              Customize alerts
            </button>
            <button style={{ padding: '10px 16px', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 8, fontSize: 13, fontWeight: 600 }}>
              Share topic
            </button>
          </div>
        </div>

        {/* Live snapshot card */}
        <div style={{ background: 'var(--hero-grad)', border: '1px solid rgba(200,255,62,0.15)', borderRadius: 18, padding: 22 }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 14 }}>Live snapshot</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div>
              {[
                { code: 'LIV', name: 'Liverpool', bg: '#C8102E', pts: 35, rank: 1, gap: '' },
                { code: 'ARS', name: 'Arsenal', bg: '#EF0107', pts: 32, rank: 2, gap: '−3', mine: true },
                { code: 'MCI', name: 'Man City', bg: '#6CABDD', pts: 30, rank: 3, gap: '−5' },
              ].map(t => (
                <div key={t.code} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
                  <Crest name={t.name} code={t.code} bg={t.bg}/>
                  <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{t.name}</span>
                  <span className="mono" style={{ fontSize: 18, fontWeight: 800, color: t.mine ? 'var(--accent)' : 'var(--text-primary)' }}>{t.pts}</span>
                  <span style={{ fontSize: 10, color: 'var(--text-muted)', width: 32, textAlign: 'right' }}>{t.rank}{t.gap}</span>
                </div>
              ))}
            </div>
            <div style={{ background: 'rgba(0,0,0,0.3)', borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div className="tag-micro" style={{ color: 'var(--text-muted)' }}>Next</div>
              <div style={{ marginTop: 4, fontSize: 14, fontWeight: 800 }}>Liverpool vs Arsenal</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4 }}>Sat 28 May · 21:00 · Anfield</div>
              <div style={{ marginTop: 10 }}>
                <Countdown d={2} h={4} m={32} s={11} label="Kick-off in"/>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Sub-filter */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
        {['Top stories', 'Latest', 'Tactics', 'Predictions', 'Player focus'].map((c, i) => (
          <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`}>{c}</div>
        ))}
      </div>

      {/* Article grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          { tag: 'Analysis', title: 'The title race tightens: 24 games to go, 3 points apart.', meta: 'The Athletic · 2h', reactions: 1247, c: '#3D5AFE', big: true },
          { tag: 'Tactics',  title: "How Slot's high line is forcing teams to change their press", meta: 'The Athletic · 8h', reactions: 542, c: '#C8102E' },
          { tag: 'Predictions', title: "Title odds shift: Arsenal back in front for the first time since November", meta: 'OddsCheck · 12h', reactions: 218, c: '#FFB547' },
          { tag: 'Player focus', title: "Saliba's anti-Henry: defending Arsenal back to the top", meta: 'BBC · 1d', reactions: 891, c: '#EF0107' },
          { tag: 'Tactics', title: "Why Man City might already be out of the title race", meta: 'The Times · 1d', reactions: 1021, c: '#6CABDD' },
          { tag: 'Predictions', title: 'Title race simulation: 10,000 runs, 3 different winners', meta: 'FiveThirtyEight · 1d', reactions: 612, c: '#A855F7' },
        ].map((n, i) => (
          <div key={i} style={{
            background: n.big ? 'var(--hero-grad)' : 'var(--bg-surface)',
            border: '1px solid ' + (n.big ? 'rgba(200,255,62,0.15)' : 'var(--border-hairline)'),
            borderRadius: 14, overflow: 'hidden',
            gridColumn: n.big ? 'span 1' : 'span 1',
          }}>
            <div style={{ aspectRatio: '16/9', background: `linear-gradient(135deg, ${n.c} 0%, #1A2320 100%)` }}/>
            <div style={{ padding: 14 }}>
              <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>{n.tag}</div>
              <div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty', minHeight: 56 }}>{n.title}</div>
              <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-muted)' }}>
                <span>{n.meta}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  <span>🔥</span> {n.reactions.toLocaleString()}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </DesktopPage>
);

Object.assign(window, {
  ScreenNewsArticle, ScreenNewsTopic, ScreenNewsComments,
  ScreenNewsArticleDesktop, ScreenNewsTopicDesktop,
});