// Sporda — Phase H · Watch sub-screens. 3 mobile + 1 desktop.
// 019 Watch root mobile already shipped (ScreenWatch in screens-2.jsx).
// New: 066 Live player · 067 Replay / VOD · 068 Schedule · 019D Watch desktop.

// ===========================================================================
// 066 — WATCH · LIVE PLAYER (mobile, portrait full-screen)
// Full-bleed video surface with overlay chrome + match HUD docked at bottom.
// ===========================================================================
const ScreenWatchLive = () => (
  <div className="phone">
    <div className="viewport" style={{ background: '#000' }}>
      <StatusBar/>
      {/* Top chrome */}
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px', gap: 12, position: 'relative', zIndex: 2 }}>
        <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(10px)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I.chevD size={16}/>
        </button>
        <div style={{ flex: 1, textAlign: 'center', color: 'white' }}>
          <div style={{ fontSize: 11, opacity: 0.7 }}>Premier League · Anfield</div>
          <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>Liverpool vs Arsenal</div>
        </div>
        <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(10px)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I.more/>
        </button>
      </div>

      {/* Pitch suggestion — green field, players as dots */}
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: 'linear-gradient(180deg, #1A3A2A 0%, #0F2A1C 100%)' }}>
        <svg viewBox="0 0 200 280" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.22 }}>
          <rect x="6" y="6" width="188" height="268" fill="none" stroke="#fff" strokeWidth="0.5"/>
          <line x1="6" y1="140" x2="194" y2="140" stroke="#fff" strokeWidth="0.5"/>
          <circle cx="100" cy="140" r="22" fill="none" stroke="#fff" strokeWidth="0.5"/>
        </svg>
        {/* Player dots */}
        {[[40, 70, '#EF0107'], [120, 80, '#EF0107'], [80, 110, '#EF0107'], [160, 130, '#EF0107'], [110, 160, '#C8102E'], [60, 190, '#C8102E'], [140, 210, '#C8102E'], [100, 250, '#FFC83D']]
          .map(([x, y, c], i) => (
            <div key={i} style={{
              position: 'absolute', left: `${x/2}%`, top: `${y/2.8}%`,
              width: 10, height: 10, borderRadius: '50%', background: c,
              transform: 'translate(-50%, -50%)',
              boxShadow: c === '#FFC83D' ? '0 0 10px rgba(255,200,61,0.9)' : 'none',
            }}/>
          ))}

        {/* Live pill top-left over video */}
        <div style={{ position: 'absolute', top: 12, left: 16, display: 'flex', gap: 6 }}>
          <div className="pill live" style={{ height: 24, fontSize: 10 }}><span className="dot"/>LIVE · 67'</div>
          <div style={{ padding: '2px 8px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', borderRadius: 12, fontSize: 10, fontWeight: 700, color: 'white' }} className="mono">2.4K watching</div>
        </div>

        {/* Tap-to-show control hint (transient) */}
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 64, height: 64, borderRadius: '50%', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white' }}>
          <I.play size={28}/>
        </div>

        {/* Scrubber + controls — bottom-anchored over video */}
        <div style={{ position: 'absolute', bottom: 200, left: 0, right: 0, padding: '0 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, fontSize: 11, color: 'white' }}>
            <span className="mono">67:14</span>
            <div style={{ flex: 1, height: 4, background: 'rgba(255,255,255,0.20)', borderRadius: 2, position: 'relative' }}>
              <div style={{ width: '74%', height: '100%', background: 'var(--accent)', borderRadius: 2, position: 'relative' }}>
                <div style={{ position: 'absolute', right: -6, top: -4, width: 12, height: 12, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px rgba(200,255,62,0.6)' }}/>
              </div>
            </div>
            <span className="mono">90:00</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', color: 'white' }}>
              <button><svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/></svg></button>
              <button style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgba(255,255,255,0.95)', color: '#0A1400', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.play size={22}/></button>
              <button><svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z"/></svg></button>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', color: 'white' }}>
              <button><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 6 9H2v6h4l5 4V5zM19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></button>
              <button><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75"><path d="M3 5v4M3 5h4M21 5v4M21 5h-4M3 19v-4M3 19h4M21 19v-4M21 19h-4"/></svg></button>
              <button><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75"><rect x="2" y="6" width="20" height="14" rx="2"/><polyline points="17 2 12 7 7 2"/></svg></button>
            </div>
          </div>
        </div>
      </div>

      {/* Score HUD docked at bottom */}
      <div style={{
        background: 'var(--bg-base)',
        borderTop: '1px solid var(--border-hairline)',
        padding: '14px 16px 12px',
        flex: 'none',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
            <span style={{ fontSize: 12, fontWeight: 600 }}>Liverpool</span>
            <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, padding: '4px 12px', background: 'var(--bg-inset)', borderRadius: 10 }}>
            <span className="mono" style={{ fontSize: 22, fontWeight: 800 }}>1</span>
            <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>:</span>
            <span className="mono" style={{ fontSize: 22, fontWeight: 800, color: 'var(--accent)' }}>2</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <ArsenalCrest size={32}/>
            <span style={{ fontSize: 12, fontWeight: 600 }}>Arsenal</span>
          </div>
        </div>
        {/* Mini tab bar — Stats / Chat / Stream */}
        <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
          <button style={{ flex: 1, padding: '8px 0', background: 'var(--bg-inset)', borderRadius: 8, fontSize: 11, fontWeight: 700 }}>Stats</button>
          <button style={{ flex: 1, padding: '8px 0', background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 8, fontSize: 11, fontWeight: 800 }}>Live chat · 234</button>
          <button style={{ flex: 1, padding: '8px 0', background: 'var(--bg-inset)', borderRadius: 8, fontSize: 11, fontWeight: 700 }}>Multi-view</button>
        </div>
      </div>
    </div>
  </div>
);

// ===========================================================================
// 067 — WATCH · REPLAY / VOD (mobile)
// Detail view for a finished match's full replay + highlight chapters.
// ===========================================================================
const ScreenWatchReplay = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 12px', gap: 12 }}>
        <RoundBtn><I.chevL size={18}/></RoundBtn>
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Replay · 2h 14m</div>
          <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>Arsenal 3–1 Aston Villa</div>
        </div>
        <RoundBtn><I.share size={16}/></RoundBtn>
      </div>

      <div className="body">
        {/* Video poster */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{
            position: 'relative', aspectRatio: '16/9', borderRadius: 14, overflow: 'hidden',
            background: 'linear-gradient(135deg, #EF0107 0%, #1A0000 100%)',
          }}>
            <svg viewBox="0 0 200 113" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }}>
              <rect x="0" y="0" width="200" height="113" fill="none" stroke="#fff" strokeWidth="0.5"/>
              <circle cx="100" cy="56" r="14" fill="none" stroke="#fff" strokeWidth="0.5"/>
            </svg>
            <div style={{ position: 'absolute', top: 12, left: 12, padding: '4px 10px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', borderRadius: 999, fontSize: 10, fontWeight: 800, color: 'white', letterSpacing: '0.04em' }}>FT · 2:14 RUNTIME</div>
            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 72, height: 72, borderRadius: '50%', background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-fab)' }}>
              <I.play size={32}/>
            </div>
            <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'white' }}>
              <div style={{ fontSize: 12, fontWeight: 700 }}>Sat 21 May · Emirates</div>
              <div style={{ display: 'flex', gap: 10 }}>
                <button style={{ padding: '6px 10px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', borderRadius: 8, fontSize: 11, fontWeight: 700 }}>Reveal score</button>
              </div>
            </div>
          </div>
        </div>

        {/* Watch options */}
        <div style={{ padding: '0 20px 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { lbl: 'Full match', t: '2h 14m', primary: true },
            { lbl: 'Highlights', t: '6m 22s' },
            { lbl: 'Goals only', t: '1m 48s' },
            { lbl: 'Press conf.', t: '14m' },
          ].map(o => (
            <button key={o.lbl} style={{
              padding: '12px 14px',
              background: o.primary ? 'var(--accent)' : 'var(--bg-surface)',
              color: o.primary ? 'var(--accent-ink)' : 'var(--text-primary)',
              border: '1px solid ' + (o.primary ? 'var(--accent)' : 'var(--border-hairline)'),
              borderRadius: 12, textAlign: 'left',
            }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{o.lbl}</div>
              <div className="mono" style={{ fontSize: 11, opacity: 0.7, marginTop: 4, fontWeight: 600 }}>{o.t}</div>
            </button>
          ))}
        </div>

        {/* Chapters */}
        <div style={{ padding: '0 20px 4px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Chapters · 6</span>
            <button style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>Skip ads</button>
          </div>
          <div className="card" style={{ padding: 0 }}>
            {[
              { tc: '0:00', title: 'Kick-off', minutes: "0–10'", note: 'High press from both sides' },
              { tc: '12:42', title: 'GOAL · Saka', minutes: "12'", note: 'Counter from a corner', highlight: true },
              { tc: '24:08', title: 'GOAL · Bellini', minutes: "27'", note: 'Header from a free-kick', highlight: true },
              { tc: '45:18', title: 'Half time', minutes: "45'+", note: '2–0 — Arsenal in control' },
              { tc: '63:22', title: 'GOAL · Solberg (AVL)', minutes: "63'", note: 'Counter, near post', highlight: true },
              { tc: '88:54', title: 'GOAL · Havertz', minutes: "89'", note: 'Late stoppage-time strike', highlight: true },
            ].map((c, i, arr) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '50px 1fr 14px',
                gap: 12, padding: '12px 14px', alignItems: 'center',
                borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0,
              }}>
                <div className="mono" style={{ fontSize: 11, fontWeight: 700, color: c.highlight ? 'var(--accent)' : 'var(--text-muted)' }}>{c.tc}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: c.highlight ? 700 : 600, color: c.highlight ? 'var(--text-primary)' : 'var(--text-secondary)' }}>{c.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{c.minutes} · {c.note}</div>
                </div>
                <I.chevR/>
              </div>
            ))}
          </div>
        </div>

        <SourceLine text="Replay rights · Premier League · expires in 6d"/>
      </div>
      <BottomNav active="watch"/>
    </div>
  </div>
);

// ===========================================================================
// 068 — WATCH · SCHEDULE (mobile)
// Upcoming streams listed by day with reminder bell per row.
// ===========================================================================
const ScreenWatchSchedule = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header
          left={<RoundBtn><I.chevL size={18}/></RoundBtn>}
          title="Watch schedule"
          right={<RoundBtn><I.cal size={16}/></RoundBtn>}
        />

        {/* Filters */}
        <div style={{ padding: '0 20px 14px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['All sources', 'Followed only', 'Free', 'Subscription'].map((c, i) => (
            <div key={c} className={`pill ${i === 1 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>

        {/* Day groups */}
        {[
          { day: 'Tonight', when: 'Wed 24 May', items: [
            { t: '20:00', dur: '120 min', sport: '⚽', match: 'Real Madrid vs Barcelona', sub: 'La Liga · El Clásico', source: 'ESPN+', logo: '#FF6B6B', live: false, primary: true },
            { t: '22:00', dur: '180 min', sport: '🏀', match: 'Lakers vs Celtics',          sub: 'NBA · Game 4 of 7', source: 'NBA TV', logo: '#552583', live: false },
            { t: '23:30', dur: '300 min', sport: '🎾', match: 'Mendez vs Volker',           sub: 'ATP Masters · QF', source: 'Tennis Channel', logo: '#1E5BC6', live: false },
          ]},
          { day: 'Tomorrow', when: 'Thu 25 May', items: [
            { t: '19:45', dur: '120 min', sport: '⚽', match: 'Bayern Munich vs Inter',     sub: 'Champions League · QF leg 1', source: 'Amazon Prime', logo: '#00A8E1', live: false },
            { t: '21:00', dur: '120 min', sport: '⚽', match: 'PSG vs Atletico',            sub: 'Champions League · QF leg 1', source: 'Amazon Prime', logo: '#00A8E1', live: false },
          ]},
          { day: 'Saturday', when: 'Sat 28 May', items: [
            { t: '17:30', dur: '120 min', sport: '⚽', match: 'Liverpool vs Arsenal',       sub: 'Premier League', source: 'Sky Sports', logo: '#0066CC', live: false, primary: true },
            { t: '14:00', dur: '180 min', sport: '🏎', match: 'Monaco Grand Prix',         sub: 'Formula 1', source: 'F1 TV Pro', logo: '#E10600', live: false },
          ]},
        ].map(g => (
          <div key={g.day}>
            <div style={{ padding: '4px 20px 10px', display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 800 }}>{g.day}</span>
              <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{g.when}</span>
            </div>
            <div style={{ padding: '0 20px 12px' }}>
              {g.items.map((it, i) => (
                <div key={i} style={{
                  background: it.primary ? 'var(--hero-grad)' : 'var(--bg-surface)',
                  border: '1px solid var(--border-hairline)',
                  borderRadius: 14, padding: 12, marginBottom: 8,
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, width: 50, flex: 'none' }}>
                    <span className="mono" style={{ fontSize: 13, fontWeight: 800 }}>{it.t}</span>
                    <span style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 700 }}>{it.dur}</span>
                  </div>
                  <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-hairline)' }}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                      <span style={{ fontSize: 12 }}>{it.sport}</span>
                      <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700 }}>{it.sub}</span>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.match}</div>
                    <div style={{ marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 5, padding: '2px 8px', background: 'rgba(0,0,0,0.3)', borderRadius: 4, fontSize: 10, fontWeight: 700 }}>
                      <span style={{ width: 8, height: 8, borderRadius: 2, background: it.logo }}/>
                      {it.source}
                    </div>
                  </div>
                  <button style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-inset)', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                    <I.bell size={14}/>
                  </button>
                </div>
              ))}
            </div>
          </div>
        ))}

        <SourceLine text="Broadcast info · LiveSchedule API · refreshed 8 min ago · region: UK"/>
      </div>
      <BottomNav active="watch"/>
    </div>
  </div>
);

// ===========================================================================
// 019D — WATCH home (desktop)
// Hero featured match left + side rail with sport filters + grid below.
// ===========================================================================
const ScreenWatchDesktop = () => (
  <DesktopPage>
    <TopNav active="watch"/>
    <div style={{ flex: 1, overflow: 'auto', padding: '24px 48px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 24, marginBottom: 24 }}>
        {/* Hero — live featured match */}
        <div style={{
          borderRadius: 18, overflow: 'hidden',
          background: 'linear-gradient(135deg, #1A3A2A 0%, #182320 70%, #0F2218 100%)',
          aspectRatio: '16/9', position: 'relative',
        }}>
          <svg viewBox="0 0 200 112" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.20 }}>
            <rect x="0" y="0" width="200" height="112" fill="none" stroke="#fff" strokeWidth="0.5"/>
            <line x1="100" y1="0" x2="100" y2="112" stroke="#fff" strokeWidth="0.5"/>
            <circle cx="100" cy="56" r="14" fill="none" stroke="#fff" strokeWidth="0.5"/>
          </svg>
          <div className="pill live" style={{ position: 'absolute', top: 18, left: 18 }}><span className="dot"/>LIVE · 67'</div>
          <div style={{ position: 'absolute', top: 18, right: 18, display: 'flex', gap: 6, padding: '4px 10px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', borderRadius: 999, fontSize: 11, fontWeight: 700, color: 'white' }}>2.4K watching</div>
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 88, height: 88, borderRadius: '50%', background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-fab)' }}>
            <I.play size={36}/>
          </div>
          <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18, padding: '14px 18px', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)', borderRadius: 14, display: 'flex', alignItems: 'center', gap: 18, color: 'white' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
              <span style={{ fontSize: 14, fontWeight: 700 }}>Liverpool</span>
            </div>
            <div className="mono" style={{ fontSize: 22, fontWeight: 800 }}>1 – 2</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 700 }}>Arsenal</span>
              <ArsenalCrest size={32}/>
            </div>
            <div style={{ marginLeft: 'auto', fontSize: 11, opacity: 0.7 }}>Premier League · Anfield</div>
          </div>
        </div>

        {/* Sport sidebar */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div className="tag-micro" style={{ color: 'var(--text-muted)', marginBottom: 4 }}>Sources</div>
          {[
            { lbl: 'All sources', live: 7, active: true },
            { lbl: 'Sky Sports',  live: 2 },
            { lbl: 'NBA TV',      live: 2 },
            { lbl: 'F1 TV Pro',   live: 1 },
            { lbl: 'Tennis Ch.',  live: 1 },
            { lbl: 'ESPN+',       live: 1 },
          ].map(s => (
            <button key={s.lbl} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 12px', borderRadius: 10,
              background: s.active ? 'var(--bg-surface)' : 'transparent',
              border: '1px solid ' + (s.active ? 'var(--border-strong)' : 'transparent'),
              fontSize: 13, fontWeight: s.active ? 700 : 500,
              color: s.active ? 'var(--text-primary)' : 'var(--text-secondary)',
              textAlign: 'left',
            }}>
              <span style={{ flex: 1 }}>{s.lbl}</span>
              {s.live > 0 && (
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 6px', background: 'rgba(255,59,92,0.12)', borderRadius: 4, fontSize: 10, color: 'var(--live)', fontWeight: 800 }}>
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--live)' }}/>
                  {s.live}
                </span>
              )}
            </button>
          ))}
        </div>
      </div>

      {/* 4-card live row */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ fontSize: 18, fontWeight: 800 }}>More live matches</div>
        <button style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>See all 7 →</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 28 }}>
        {[
          { match: 'Real Madrid vs Barcelona', sub: 'El Clásico · La Liga', min: "32'", score: '0–0', from: '#FFFFFF', to: '#A50044' },
          { match: 'Lakers vs Celtics', sub: 'NBA · Game 4', min: 'Q3 4:32', score: '78–82', from: '#552583', to: '#007A33' },
          { match: 'Bayern vs Dortmund', sub: 'Bundesliga', min: "12'", score: '1–0', from: '#DC052D', to: '#FDE100' },
          { match: 'Mendez vs Volker', sub: 'ATP Masters · QF', min: 'S4 4–4', score: '2–1 sets', from: '#1E5BC6', to: '#FFE66D' },
        ].map((m, i) => (
          <div key={i} style={{ borderRadius: 14, overflow: 'hidden', background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)' }}>
            <div style={{ aspectRatio: '16/9', background: `linear-gradient(135deg, ${m.from} 0%, ${m.to} 100%)`, position: 'relative' }}>
              <div className="pill live" style={{ position: 'absolute', top: 10, left: 10, height: 22, fontSize: 10 }}><span className="dot"/>{m.min}</div>
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', color: '#0A1400', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <I.play size={20}/>
              </div>
            </div>
            <div style={{ padding: 12 }}>
              <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.match}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontSize: 10, color: 'var(--text-muted)' }}>
                <span>{m.sub}</span>
                <span className="mono" style={{ color: 'var(--accent)', fontWeight: 700 }}>{m.score}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Schedule preview */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ fontSize: 18, fontWeight: 800 }}>Tonight & tomorrow</div>
        <button style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>Full schedule →</button>
      </div>
      <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 14 }}>
        {[
          { day: 'Tonight', t: '20:00', match: 'Real Madrid vs Barcelona', sub: 'La Liga · El Clásico', source: 'ESPN+' },
          { day: 'Tonight', t: '22:00', match: 'Lakers vs Celtics', sub: 'NBA · Game 4 of 7', source: 'NBA TV' },
          { day: 'Tomorrow', t: '19:45', match: 'Bayern Munich vs Inter', sub: 'UCL · QF leg 1', source: 'Amazon Prime' },
          { day: 'Tomorrow', t: '21:00', match: 'PSG vs Atletico', sub: 'UCL · QF leg 1', source: 'Amazon Prime' },
        ].map((r, i, arr) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 70px 1fr 140px 50px', gap: 16, padding: '14px 20px', alignItems: 'center', borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0 }}>
            <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 700 }}>{r.day}</span>
            <span className="mono" style={{ fontSize: 14, fontWeight: 800 }}>{r.t}</span>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{r.match}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.sub}</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>{r.source}</div>
            <button style={{ width: 34, height: 34, borderRadius: 8, background: 'var(--bg-inset)', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: 'auto' }}>
              <I.bell size={14}/>
            </button>
          </div>
        ))}
      </div>

      <SourceLineDesktop text="Broadcast schedule · region: UK · refreshed 8 min ago"/>
    </div>
  </DesktopPage>
);

Object.assign(window, { ScreenWatchLive, ScreenWatchReplay, ScreenWatchSchedule, ScreenWatchDesktop });