// Stryke screens — setup flow
window.SCREENS = window.SCREENS || {};
const { useState: useS2 } = React;

// ───────────────────────── Create round
function CreateRound() {
  const S = window.STU; const { nav, back, group, round, setRound } = window.useStryke();
  const [course, setCourse] = useS2(round.course);
  return (
    <Page footer={<Button variant="primary" full onClick={() => { setRound(r => ({ ...r, course })); nav('chooseFormat'); }}>Choose format →</Button>}>
      <TopBar title="New round" onBack={back} sub="Step 1 of 5 · Setup" />
      <div style={{ padding: '6px 20px 16px' }}>
        <Label>GROUP</Label>
        <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: S.surface, borderRadius: 16 }}>
          <Avatar name={group.name} size={42} dark />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15.5, fontWeight: 700 }}>{group.name}</div>
            <div style={{ fontSize: 12.5, color: S.inkSoft }}>4 members · est. {group.founded}</div>
          </div>
          <Chip>Change</Chip>
        </div>

        <Label style={{ marginTop: 22 }}>COURSE <span style={{ color: S.inkFaint, fontWeight: 500 }}>· optional</span></Label>
        <input className="stu-input" style={{ marginTop: 8 }} value={course} onChange={e => setCourse(e.target.value)} placeholder="Search or type a course" />
        <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
          <Chip onClick={() => setCourse('Pine Hollow')} active={course === 'Pine Hollow'}>Pine Hollow</Chip>
          <Chip onClick={() => setCourse('Cypress Bend')} active={course === 'Cypress Bend'}>Cypress Bend</Chip>
          <Chip onClick={() => setCourse('')}>Skip</Chip>
        </div>

        <Label style={{ marginTop: 22 }}>WHEN</Label>
        <div style={{ marginTop: 8, display: 'flex', gap: 10 }}>
          <div style={{ flex: 1, padding: '14px 16px', background: S.surface, borderRadius: 16, fontSize: 15, fontWeight: 600 }}>Today</div>
          <div className="stu-num" style={{ width: 130, padding: '14px 16px', background: S.surface, borderRadius: 16, fontSize: 15, fontWeight: 600 }}>8:10 AM</div>
        </div>

        <div style={{ marginTop: 18, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
          <Spark size={13} color={S.inkFaint} style={{ marginTop: 2 }} />
          <div style={{ fontSize: 12.5, color: S.inkSoft, lineHeight: 1.45 }}>No course needed to play — Stryke uses standard pars, or you can enter them later.</div>
        </div>
      </div>
    </Page>
  );
}

// ───────────────────────── Choose format
const FORMATS = [
  { k: 'skins', name: 'Skins', desc: 'Low score wins the hole; ties carry over and stack.', tag: 'Most popular' },
  { k: 'dots', name: 'Side Pots · Dots', desc: 'Closest-to-pin, longest drive, greenies, birdies.', tag: null },
  { k: 'nassau', name: 'Nassau', desc: 'Front 9, back 9, and overall — with presses.', tag: null },
  { k: 'match', name: 'Match Play', desc: 'Hole-by-hole; up, down, dormie, closed out.', tag: null },
  { k: 'teams', name: 'Teams · Best Ball', desc: 'Two teams; each hole counts the best ball.', tag: null },
];
function ChooseFormat() {
  const S = window.STU; const { nav, back, round, setRound } = window.useStryke();
  const toggle = (k) => setRound(r => ({ ...r, formats: { ...r.formats, [k]: !r.formats[k] } }));
  const count = Object.values(round.formats).filter(Boolean).length;
  return (
    <Page footer={<Button variant="primary" full disabled={!count} onClick={() => nav('gameSetup')}>Continue · {count} {count === 1 ? 'game' : 'games'}</Button>}>
      <TopBar title="Choose format" onBack={back} sub="Step 2 of 5 · Pick one or more" />
      <div style={{ padding: '6px 20px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {FORMATS.map(f => {
          const on = round.formats[f.k];
          return (
            <div key={f.k} className="stu-tap stu-press" onClick={() => toggle(f.k)} style={{
              padding: '16px 18px', borderRadius: 18, background: on ? S.ink : S.surface, color: on ? S.white : S.ink,
              transition: 'background .18s, color .18s',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.02em' }}>{f.name}</div>
                {f.tag && <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.03em', color: S.ink, background: S.lime, padding: '3px 8px', borderRadius: 100, whiteSpace: 'nowrap' }}>{f.tag.toUpperCase()}</span>}
                <div style={{ flex: 1 }}></div>
                <div style={{ width: 24, height: 24, borderRadius: '50%', border: `2px solid ${on ? S.lime : S.lineMid}`, background: on ? S.lime : 'transparent', display: 'grid', placeItems: 'center' }}>
                  {on && <svg width="13" height="13" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" stroke={S.ink} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </div>
              </div>
              <div style={{ fontSize: 13, color: on ? 'rgba(255,255,255,0.62)' : S.inkSoft, marginTop: 5, lineHeight: 1.35 }}>{f.desc}</div>
            </div>
          );
        })}
        <div className="stu-tap" style={{ padding: '16px 18px', borderRadius: 18, background: S.surface, opacity: 0.55, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ fontSize: 17, fontWeight: 700 }}>Wolf</div>
          <div style={{ flex: 1 }}></div>
          <span style={{ fontSize: 11, fontWeight: 700, color: S.inkSoft }}>COMING IN V1</span>
        </div>
      </div>
    </Page>
  );
}

// ───────────────────────── Game setup details
function GameSetup() {
  const S = window.STU; const { nav, back, round, setRound } = window.useStryke();
  const dotTypes = ['Closest to pin', 'Longest drive', 'Greenie', 'Birdie', 'Sandie'];
  const [liveDots, setLiveDots] = useS2(['Closest to pin', 'Longest drive', 'Greenie', 'Birdie']);
  const toggleDot = (d) => setLiveDots(ds => ds.includes(d) ? ds.filter(x => x !== d) : [...ds, d]);
  const set = (k, v) => setRound(r => ({ ...r, [k]: v }));
  return (
    <Page footer={<Button variant="primary" full onClick={() => nav('invite')}>Continue →</Button>}>
      <TopBar title="Game setup" onBack={back} sub="Step 3 of 5 · Sensible defaults set" />
      <div style={{ padding: '6px 20px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {round.formats.skins && (
          <div style={{ padding: 18, background: S.surface, borderRadius: 20 }}>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Skins</div>
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 14, color: S.inkSoft }}>Value per skin</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: S.white, borderRadius: 100, padding: '4px 6px' }}>
                <button className="stu-btn" onClick={() => set('skinValue', Math.max(1, round.skinValue - 1))} style={{ width: 32, height: 32, borderRadius: '50%', background: S.surface, fontSize: 18 }}>−</button>
                <span className="stu-num" style={{ width: 44, textAlign: 'center', fontSize: 18, fontWeight: 700 }}>${round.skinValue}</span>
                <button className="stu-btn" onClick={() => set('skinValue', round.skinValue + 1)} style={{ width: 32, height: 32, borderRadius: '50%', background: S.ink, color: '#fff', fontSize: 18 }}>+</button>
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <span style={{ fontSize: 14, color: S.inkSoft }}>Scoring</span>
              <Segmented style={{ marginTop: 8 }} options={[{ value: 'net', label: 'Net (handicap)' }, { value: 'gross', label: 'Gross' }]} value={round.netGross} onChange={v => set('netGross', v)} />
            </div>
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div><div style={{ fontSize: 14, fontWeight: 600 }}>Carryover</div><div style={{ fontSize: 12, color: S.inkSoft }}>Ties roll the skin to the next hole</div></div>
              <Toggle on={round.carryover} onChange={v => set('carryover', v)} />
            </div>
          </div>
        )}
        {round.formats.dots && (
          <div style={{ padding: 18, background: S.surface, borderRadius: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontSize: 16, fontWeight: 700, whiteSpace: 'nowrap' }}>Side Pots · Dots</div>
              <span className="stu-num" style={{ fontSize: 14, fontWeight: 700 }}>${round.dotValue}/dot</span>
            </div>
            <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {dotTypes.map(d => <Chip key={d} active={liveDots.includes(d)} onClick={() => toggleDot(d)}>{liveDots.includes(d) && '✓ '}{d}</Chip>)}
            </div>
          </div>
        )}
        {round.formats.nassau && (
          <div style={{ padding: 18, background: S.surface, borderRadius: 20 }}>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Nassau</div>
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div><div style={{ fontSize: 14, fontWeight: 600 }}>Auto-press</div><div style={{ fontSize: 12, color: S.inkSoft }}>Open a press when 2 down</div></div>
              <Toggle on={round.autoPress} onChange={v => set('autoPress', v)} />
            </div>
          </div>
        )}
        {round.formats.teams && (
          <div style={{ padding: 18, background: S.surface, borderRadius: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div><div style={{ fontSize: 16, fontWeight: 700 }}>Teams · Best Ball</div><div style={{ fontSize: 12.5, color: S.inkSoft, marginTop: 2 }}>Set teams in step 5</div></div>
            <Chip lime>Best 1 ball</Chip>
          </div>
        )}
        <LegalNote />
      </div>
    </Page>
  );
}

// ───────────────────────── QR placeholder
function QR({ size = 132 }) {
  const S = window.STU; const n = 21; const cell = size / n;
  const finderAt = (x, y) => {
    for (const [ox, oy] of [[0, 0], [n - 7, 0], [0, n - 7]]) {
      if (x >= ox && x < ox + 7 && y >= oy && y < oy + 7) {
        const lx = x - ox, ly = y - oy;
        const ring = lx === 0 || lx === 6 || ly === 0 || ly === 6;
        const core = lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4;
        return ring || core ? 'on' : 'off';
      }
    }
    return null;
  };
  const rects = [];
  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
    const f = finderAt(x, y);
    let on;
    if (f !== null) on = f === 'on';
    else {
      const nearFinder = (x < 8 && y < 8) || (x > n - 9 && y < 8) || (x < 8 && y > n - 9);
      if (nearFinder) on = false;
      else if (x === 6 || y === 6) on = (x + y) % 2 === 0; // timing
      else on = ((x * 5 + y * 3 + ((x * y) % 7) + ((x + y) % 4)) % 3 === 0);
    }
    if (on) rects.push(<rect key={x + '-' + y} x={x * cell} y={y * cell} width={cell + 0.4} height={cell + 0.4} fill={S.ink} />);
  }
  return <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>{rects}</svg>;
}

// ───────────────────────── Add players / invite
function AddPlayersInvite() {
  const S = window.STU; const { nav, back, players, joinPlayer, flash } = window.useStryke();
  const [copied, setCopied] = useS2(false);
  const joined = players.filter(p => p.joined).length;
  return (
    <Page footer={<Button variant="primary" full onClick={() => nav('handicaps')}>Continue · {joined}/{players.length} joined</Button>}>
      <TopBar title="Invite your group" onBack={back} sub="Step 4 of 5 · No download needed" />
      <div style={{ padding: '6px 20px 16px' }}>
        {/* invite card */}
        <div style={{ background: S.ink, color: S.white, borderRadius: 22, padding: 22, textAlign: 'center' }}>
          <div style={{ background: S.white, borderRadius: 16, padding: 14, display: 'inline-block' }}><QR /></div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', marginTop: 14 }}>Scan to join, or share the link</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <div className="stu-num" style={{ flex: 1, background: 'rgba(255,255,255,0.1)', borderRadius: 100, padding: '11px 14px', fontSize: 13, color: 'rgba(255,255,255,0.85)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>stryke.gg/r/9F2K</div>
            <button className="stu-btn" onClick={() => { setCopied(true); flash('Link copied'); setTimeout(() => setCopied(false), 1500); }} style={{ background: S.lime, color: S.ink, borderRadius: 100, padding: '11px 18px', fontSize: 13.5 }}>{copied ? 'Copied' : 'Copy'}</button>
          </div>
        </div>

        <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Label>ROSTER</Label>
          <span style={{ fontSize: 12, color: S.good, fontWeight: 700, whiteSpace: 'nowrap' }}>{joined} joined</span>
        </div>
        <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {players.map(p => (
            <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', background: S.surface, borderRadius: 16 }}>
              <Avatar name={p.name} size={38} dark={p.joined} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600 }}>{p.name}{p.captain && <span style={{ fontSize: 11, color: S.inkSoft, fontWeight: 600 }}> · You</span>}</div>
                <div style={{ fontSize: 12, color: S.inkSoft }}>{p.guest ? 'Guest' : 'Member'} · HCP {p.hcp}</div>
              </div>
              {p.joined
                ? <Chip style={{ background: S.goodSoft, color: S.good }}>✓ Joined</Chip>
                : <button className="stu-btn stu-tap" onClick={() => { joinPlayer(p.id); flash(p.name.split(' ')[0] + ' joined'); }} style={{ background: S.ink, color: '#fff', borderRadius: 100, padding: '8px 14px', fontSize: 12.5 }}>Mark joined</button>}
            </div>
          ))}
        </div>
        <button className="stu-btn stu-tap" onClick={() => nav('guestJoin')} style={{ marginTop: 10, background: 'transparent', color: S.inkSoft, width: '100%', padding: '12px', fontSize: 13.5 }}>Preview the guest join screen →</button>
      </div>
    </Page>
  );
}

// ───────────────────────── Guest join (the no-download entry)
function GuestJoin() {
  const S = window.STU; const { nav, back, group, round } = window.useStryke();
  const [name, setName] = useS2('');
  const [hcp, setHcp] = useS2('');
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: S.white }}>
      <div className="stu-scroll" style={{ flex: 1 }}>
        <div style={{ padding: '20px 24px 0' }}>
          <button className="stu-tap" onClick={back} style={{ border: 'none', background: S.surface, width: 36, height: 36, borderRadius: '50%', display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M15 5l-7 7 7 7" stroke={S.ink} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 26 }}>
            <Spark size={15} /><span style={{ fontSize: 15, fontWeight: 700 }}>Stryke</span>
          </div>
          <div style={{ fontSize: 13, color: S.inkSoft, marginTop: 22, fontWeight: 600 }}>You've been invited to</div>
          <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.05, marginTop: 3 }}>{group.name} — Week {round.week}</div>
          <div style={{ fontSize: 14, color: S.inkSoft, marginTop: 6 }}>{round.course} · Skins + Dots · Trevor is captain</div>

          <div style={{ marginTop: 28 }}>
            <Label>YOUR NAME</Label>
            <input className="stu-input" autoFocus style={{ marginTop: 8, fontSize: 18, fontWeight: 600 }} value={name} onChange={e => setName(e.target.value)} placeholder="Enter your name" />
            <Label style={{ marginTop: 18 }}>HANDICAP <span style={{ color: S.inkFaint, fontWeight: 500 }}>· optional</span></Label>
            <input className="stu-input stu-num" style={{ marginTop: 8 }} value={hcp} onChange={e => setHcp(e.target.value.replace(/[^0-9]/g, ''))} placeholder="Leave blank to play gross" />
          </div>

          <div style={{ marginTop: 20, display: 'flex', gap: 8, alignItems: 'center', color: S.inkSoft, fontSize: 12.5 }}>
            <Spark size={13} color={S.inkFaint} /> No account, no app store. You're in the game in seconds.
          </div>
        </div>
      </div>
      <div style={{ padding: '12px 24px calc(20px + env(safe-area-inset-bottom))' }}>
        <Button variant="lime" full disabled={!name.trim()} onClick={() => nav('roundDash')}>Join the game</Button>
      </div>
    </div>
  );
}

// ───────────────────────── Handicaps / strokes
function Handicaps() {
  const S = window.STU; const { nav, back, players, setPlayers, round, setRound } = window.useStryke();
  const playGross = round.netGross === 'gross';
  return (
    <Page footer={<Button variant="primary" full onClick={() => nav('teams')}>Continue →</Button>}>
      <TopBar title="Handicaps & strokes" onBack={back} sub="Step 5 of 5 · Fair game" />
      <div style={{ padding: '6px 20px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '13px 16px', background: S.surface, borderRadius: 16 }}>
          <div><div style={{ fontSize: 14.5, fontWeight: 600 }}>Play gross</div><div style={{ fontSize: 12, color: S.inkSoft }}>No strokes — everyone off scratch</div></div>
          <Toggle on={playGross} onChange={v => setRound(r => ({ ...r, netGross: v ? 'gross' : 'net' }))} />
        </div>

        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10, opacity: playGross ? 0.4 : 1, transition: 'opacity .2s', pointerEvents: playGross ? 'none' : 'auto' }}>
          {players.map(p => {
            const dots = window.SI.map((si, i) => ({ hole: i + 1, on: si <= p.hcp })).filter(x => x.on).length;
            return (
              <div key={p.id} style={{ padding: '14px 16px', background: S.surface, borderRadius: 18 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Avatar name={p.name} size={40} dark />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600 }}>{p.name}</div>
                    <div style={{ fontSize: 12, color: S.inkSoft }}>{dots} strokes · 1 per indexed hole</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: S.white, borderRadius: 100, padding: '4px 6px' }}>
                    <button className="stu-btn" onClick={() => setPlayers(ps => ps.map(x => x.id === p.id ? { ...x, hcp: Math.max(0, x.hcp - 1) } : x))} style={{ width: 30, height: 30, borderRadius: '50%', background: S.surface, fontSize: 17 }}>−</button>
                    <span className="stu-num" style={{ width: 28, textAlign: 'center', fontSize: 16, fontWeight: 700 }}>{p.hcp}</span>
                    <button className="stu-btn" onClick={() => setPlayers(ps => ps.map(x => x.id === p.id ? { ...x, hcp: x.hcp + 1 } : x))} style={{ width: 30, height: 30, borderRadius: '50%', background: S.ink, color: '#fff', fontSize: 17 }}>+</button>
                  </div>
                </div>
                {/* stroke allocation dots across 18 holes */}
                <div style={{ display: 'flex', gap: 3, marginTop: 12 }}>
                  {window.SI.map((si, i) => (
                    <div key={i} style={{ flex: 1, height: 6, borderRadius: 3, background: si <= p.hcp ? S.lime : S.lineMid }}></div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Page>
  );
}

// ───────────────────────── Team setup
function TeamSetup() {
  const S = window.STU; const { nav, back, players, setPlayers, round } = window.useStryke();
  const move = (pid, team) => setPlayers(ps => ps.map(p => p.id === pid ? { ...p, team } : p));
  const auto = () => setPlayers(ps => { const sorted = [...ps].sort((a, b) => a.hcp - b.hcp); return ps.map(p => { const i = sorted.findIndex(s => s.id === p.id); return { ...p, team: i % 2 === 0 ? 'A' : 'B' }; }); });
  const teamA = players.filter(p => p.team === 'A');
  const teamB = players.filter(p => p.team === 'B');
  const TeamCol = ({ id, list, label }) => (
    <div style={{ flex: 1, background: S.surface, borderRadius: 20, padding: 14, minHeight: 220 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: id === 'A' ? S.ink : S.lime }}></div>
        <div style={{ fontSize: 14, fontWeight: 700 }}>{label}</div>
        <span className="stu-num" style={{ fontSize: 11, color: S.inkSoft }}>· HCP {list.reduce((a, p) => a + p.hcp, 0)}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {list.map(p => (
          <div key={p.id} className="stu-tap" onClick={() => move(p.id, id === 'A' ? 'B' : 'A')} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 11px', background: S.white, borderRadius: 13 }}>
            <Avatar name={p.name} size={32} dark={id === 'A'} lime={id === 'B'} />
            <div style={{ flex: 1, fontSize: 13.5, fontWeight: 600 }}>{p.name.split(' ')[0]}</div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M8 7l4-4 4 4M8 17l4 4 4-4" stroke={S.inkFaint} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        ))}
        {!list.length && <div style={{ fontSize: 12, color: S.inkFaint, padding: 8 }}>Tap a player to move them here</div>}
      </div>
    </div>
  );
  return (
    <Page footer={<Button variant="primary" full onClick={() => nav('roundDash')}>Looks good →</Button>}>
      <TopBar title="Teams" onBack={back} right={<Chip lime onClick={auto}>Auto-balance</Chip>} sub="Tap a player to switch sides" />
      <div style={{ padding: '6px 20px 16px' }}>
        <div style={{ display: 'flex', gap: 12 }}>
          <TeamCol id="A" list={teamA} label="Team A" />
          <TeamCol id="B" list={teamB} label="Team B" />
        </div>
        <div style={{ marginTop: 16, padding: 16, background: S.ink, color: '#fff', borderRadius: 18, display: 'flex', alignItems: 'center', gap: 10 }}>
          <Spark size={14} color={S.lime} />
          <div style={{ fontSize: 13, lineHeight: 1.35 }}>Best ball — each hole counts the lower team score. Teams look even (HCP {teamA.reduce((a,p)=>a+p.hcp,0)} vs {teamB.reduce((a,p)=>a+p.hcp,0)}).</div>
        </div>
      </div>
    </Page>
  );
}

Object.assign(window.SCREENS, { createRound: CreateRound, chooseFormat: ChooseFormat, gameSetup: GameSetup, invite: AddPlayersInvite, guestJoin: GuestJoin, handicaps: Handicaps, teams: TeamSetup });