// screens-home.jsx — MAP-FIRST home: live Strip map + POY tracker + actions

const { useState: uS_h, useEffect: uE_h, useMemo: uM_h, useRef: uR_h } = React;

function HomeScreen({ onTab, onTournamentTap, onCoach, onSubScreen }) {
  const data = window.APP_DATA;
  const tournaments = uM_h(() => [...data.tournaments].sort(
    (a, b) => a.regClose.getTime() - b.regClose.getTime()
  ), []);
  const friends = data.friends;
  const poy = data.poy;
  const profile = data.profile;
  const [pin, setPin] = uS_h(null); // {kind, payload}

  const firstName = profile.name.split(' ')[0];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--felt)', overflow: 'hidden' }}>
      {/* Top bar — minimal */}
      <div style={{
        padding: '12px 18px 10px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderBottom: '1px solid var(--line-d)', background: 'var(--felt-2)',
        flexShrink: 0,
      }}>
        <div>
          <Wordmark />
          <div className="mono" style={{ fontSize: 9, color: 'var(--muted-d)', letterSpacing: '0.1em', marginTop: 2 }}>
            HEY, {firstName.toUpperCase()} · DAY 12 OF 47
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <PacificClock />
          <button onClick={() => onSubScreen('settings')} style={{
            all: 'unset', cursor: 'pointer', padding: '4px 8px',
            border: '1px solid var(--line-d)',
            color: 'var(--paper-d)',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <circle cx="12" cy="12" r="9"/>
              <circle cx="12" cy="8" r="3"/>
              <path d="M5.5 19c1-3 4-5 6.5-5s5.5 2 6.5 5"/>
            </svg>
          </button>
        </div>
      </div>

      {/* Body — scrolls, 3-section dashboard */}
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 90, background: 'var(--felt)' }}>

        {/* ──── SECTION 1: GET TO IT ──── */}
        <div style={{ padding: '14px 16px 6px' }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>◆ GET TO IT</div>
          <h2 className="serif" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 2, marginBottom: 10, color: '#fff' }}>Tournaments you can still catch</h2>
          {tournaments.slice(0, 4).map(t => {
            const mins = Math.max(0, Math.round((t.regClose.getTime() - Date.now()) / 60000));
            const canMake = mins > t.walkMin;
            return (
              <div key={t.id} onClick={() => onTournamentTap(t)} style={{
                padding: '12px 14px', marginBottom: 8,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid ' + (canMake ? 'rgba(58,138,92,0.5)' : 'rgba(200,49,43,0.4)'),
                cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
              }}>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="serif" style={{ fontSize: 16, color: '#fff', lineHeight: 1.15 }}>{t.title}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', letterSpacing: '0.06em', marginTop: 3 }}>
                    {t.casino.toUpperCase()} · ${t.buyin} · {t.walkMin} MIN WALK
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="num serif" style={{ fontSize: 22, color: canMake ? 'var(--green-bright)' : 'var(--red-bright)', lineHeight: 1 }}>{mins}m</div>
                  <div className="mono" style={{ fontSize: 9, color: 'var(--muted-d)', letterSpacing: '0.08em' }}>{canMake ? 'TILL CLOSE' : 'WON\'T MAKE'}</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* ──── SECTION 2: YOUR BOYS (with map) ──── */}
        <div style={{ padding: '18px 16px 6px', borderTop: '1px solid var(--line-d)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>◆ YOUR BOYS</div>
              <h2 className="serif" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 2, color: '#fff' }}>Who's where, who's alive</h2>
            </div>
            <button onClick={() => onTab('friends')} className="mono" style={{
              all: 'unset', cursor: 'pointer', color: 'var(--gold)',
              fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>See all →</button>
          </div>

          {/* Inline map (smaller, contextual) */}
          <div style={{ height: 240, margin: '10px 0 14px', position: 'relative', overflow: 'hidden', border: '1px solid var(--line-d)' }}>
            <HomeMap tournaments={tournaments} friends={friends} pin={pin} onPin={setPin}/>
          </div>
          {pin && <div style={{ marginBottom: 12 }}><PinPreview pin={pin} onClear={() => setPin(null)} onTournamentTap={onTournamentTap}/></div>}

          {/* Friend status list */}
          {friends.slice(0, 5).map(f => (
            <div key={f.name} onClick={() => onTab('friends')} style={{
              padding: '10px 0', borderBottom: '1px solid var(--line-d)',
              cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
            }}>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div className="serif" style={{ fontSize: 15, color: '#fff', lineHeight: 1.15 }}>{f.name}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted-d)', letterSpacing: '0.06em', marginTop: 2 }}>
                  {(f.where || 'Off-strip').toUpperCase()}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="mono" style={{
                  fontSize: 9, letterSpacing: '0.1em', fontWeight: 700,
                  color: f.status === 'alive' ? 'var(--green-bright)' : f.status === 'busted' ? 'var(--red-bright)' : 'var(--muted-d)',
                }}>
                  ● {(f.status || '').toUpperCase()}
                </div>
                {f.chips != null && f.chips > 0 && (
                  <div className="num serif" style={{ fontSize: 14, color: '#fff', lineHeight: 1.1, marginTop: 1 }}>{(f.chips / 1000).toFixed(0)}K</div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* ──── SECTION 3: COACH KYLE ──── */}
        <div style={{ padding: '18px 16px 24px', borderTop: '1px solid var(--line-d)' }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.14em', fontWeight: 700 }}>◆ COACH KYLE</div>
          <h2 className="serif" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 2, color: '#fff' }}>Need a take? Ask the Box.</h2>
          <p className="mono" style={{ fontSize: 11, color: 'var(--muted-d)', letterSpacing: '0.04em', marginTop: 4, marginBottom: 10 }}>
            a.k.a. Jack in the Box. The voice in your head before you sit down.
          </p>

          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
            {[
              'Should I play this one?',
              'I just busted',
              'Morning brief',
              'Talk me off the rebuy',
            ].map(prompt => (
              <button key={prompt} onClick={onCoach} className="mono" style={{
                all: 'unset', cursor: 'pointer',
                padding: '6px 10px',
                border: '1px solid var(--line-d-2)',
                color: '#fff', background: 'rgba(255,255,255,0.04)',
                fontSize: 11, letterSpacing: '0.04em',
              }}>{prompt}</button>
            ))}
          </div>

          <button onClick={onCoach} style={{
            all: 'unset', cursor: 'pointer', display: 'block',
            background: 'var(--gold)', color: '#0e1422',
            padding: '12px 16px', textAlign: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
            letterSpacing: '0.1em', textTransform: 'uppercase', width: '100%',
          }}>◆ Talk to Coach Kyle</button>
        </div>

      </div>
    </div>
  );
}

// ─── HOME MAP — multi-zoom: Strip → Casino → Room ────────────────────────
function HomeMap({ tournaments, friends, pin, onPin }) {
  const [zoom, setZoom] = uS_h('strip'); // 'strip' | 'wsop' (casino floor)
  return zoom === 'wsop'
    ? <WSOPFloorMap tournaments={tournaments} friends={friends} pin={pin} onPin={onPin} onZoomOut={() => setZoom('strip')}/>
    : <StripOverview tournaments={tournaments} friends={friends} pin={pin} onPin={onPin} onZoomIn={() => setZoom('wsop')}/>;
}

// ─── Strip overview ──────────────────────────────────────────────────────
function StripOverview({ tournaments, friends, pin, onPin, onZoomIn }) {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <IsoStripMap tournaments={tournaments} friends={friends} onZoomIn={onZoomIn} onPin={onPin}/>
    </div>
  );
}

function _UNUSED_StripOverview({ tournaments, friends, pin, onPin, onZoomIn }) {
  const venues = {
    'Resorts World': { x: 60, y: 8, label: 'Resorts World' },
    'Wynn':          { x: 62, y: 22, label: 'Wynn' },
    'Venetian':      { x: 60, y: 32, label: 'Venetian' },
    'Venetian Poker':{ x: 60, y: 32, label: 'Venetian' },
    'Horseshoe':     { x: 38, y: 50, label: 'WSOP @ Horseshoe + Paris' },
    'Paris':         { x: 38, y: 53, label: 'Paris' },
    'Bellagio':      { x: 38, y: 60, label: 'Bellagio' },
    'Aria':          { x: 50, y: 66, label: 'Aria' },
    'Cosmopolitan':  { x: 48, y: 64, label: 'Cosmopolitan' },
    'MGM':           { x: 50, y: 76, label: 'MGM' },
    'Orleans':       { x: 12, y: 92, label: 'Orleans' },
  };
  const me = { x: 70, y: 65 };

  // Group counts per venue
  const venueCounts = {};
  tournaments.forEach(t => {
    const v = t.casino;
    if (!venueCounts[v]) venueCounts[v] = { tournaments: 0, friends: 0 };
    venueCounts[v].tournaments++;
  });
  friends.forEach(f => {
    const v = (f.where || '').split(' · ')[1];
    if (!venueCounts[v]) venueCounts[v] = { tournaments: 0, friends: 0 };
    if (f.status === 'alive') venueCounts[v].friends++;
  });

  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: 'radial-gradient(circle at 50% 40%, #f0f4fa 0%, #dde3ec 45%, #c8d0dc 100%)',
    }}>
      {/* Topographic grid */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.18 }} preserveAspectRatio="none">
        {[...Array(20)].map((_,i) => <line key={'h'+i} x1="0" x2="100%" y1={`${i*5}%`} y2={`${i*5}%`} stroke="#1a3e7a" strokeWidth="0.4"/>)}
        {[...Array(12)].map((_,i) => <line key={'v'+i} y1="0" y2="100%" x1={`${i*8.33}%`} x2={`${i*8.33}%`} stroke="#1a3e7a" strokeWidth="0.4"/>)}
      </svg>

      {/* Cross streets */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
        <line x1="0%" x2="100%" y1="14%" y2="14%" stroke="rgba(20,30,50,0.18)" strokeWidth="1"/>
        <line x1="0%" x2="100%" y1="28%" y2="28%" stroke="rgba(20,30,50,0.18)" strokeWidth="1"/>
        <line x1="0%" x2="100%" y1="56%" y2="56%" stroke="rgba(20,30,50,0.18)" strokeWidth="1"/>
        <line x1="0%" x2="100%" y1="78%" y2="78%" stroke="rgba(20,30,50,0.18)" strokeWidth="1"/>
      </svg>

      {[
        { y: 14, label: 'SAHARA' },
        { y: 28, label: 'SPRING MTN' },
        { y: 56, label: 'FLAMINGO' },
        { y: 78, label: 'TROPICANA' },
      ].map(s => (
        <div key={s.label} className="mono" style={{
          position: 'absolute', top: `${s.y}%`, right: 6, transform: 'translateY(-50%)',
          fontSize: 8, color: '#475065', letterSpacing: '0.12em',
          background: 'rgba(255,255,255,0.85)', padding: '0 4px',
        }}>{s.label}</div>
      ))}

      {/* The Strip line */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
        <path d="M 52 4 Q 50 30, 48 50 T 46 96"
          stroke="#1a3e7a" strokeWidth="0.5" fill="none" opacity="0.55"
          vectorEffect="non-scaling-stroke" strokeDasharray="2 1.5"/>
      </svg>
      <div className="mono" style={{
        position: 'absolute', top: 6, right: 100,
        fontSize: 8, color: '#1a3e7a', letterSpacing: '0.18em',
        background: 'rgba(255,255,255,0.9)', padding: '2px 6px',
        border: '1px solid rgba(20,30,50,0.15)',
      }}>↑ LV BLVD ↑</div>

      {/* Venue clusters — when multiple things at one venue, show stacked */}
      {Object.entries(venues).filter(([name]) => venueCounts[name]).map(([name, v]) => {
        const counts = venueCounts[name] || { tournaments: 0, friends: 0 };
        const isWSOP = name === 'Horseshoe';
        return (
          <div key={name} style={{
            position: 'absolute', left: `${v.x}%`, top: `${v.y}%`,
            transform: 'translate(-50%, -50%)', zIndex: 3,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
          }}>
            {/* Venue label box */}
            <button
              onClick={() => isWSOP && onZoomIn()}
              style={{
                all: 'unset', cursor: isWSOP ? 'pointer' : 'default',
                background: isWSOP ? 'linear-gradient(180deg, #2a5fb8, #1a3e7a)' : 'rgba(255,255,255,0.95)',
                border: isWSOP ? '1px solid #1a3e7a' : '1px solid rgba(20,30,50,0.2)',
                color: isWSOP ? '#fff' : '#0e1422',
                padding: '4px 8px',
                boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                minWidth: 64,
              }}>
              <div className="mono" style={{
                fontSize: 9, letterSpacing: '0.08em', fontWeight: 600,
                color: isWSOP ? '#fff' : '#0e1422',
                textTransform: 'uppercase',
              }}>
                {isWSOP ? '◆ WSOP' : name.split(' ')[0]}
              </div>
              {(counts.tournaments > 0 || counts.friends > 0) && (
                <div style={{ display: 'flex', gap: 6, marginTop: 2 }}>
                  {counts.tournaments > 0 && (
                    <span className="mono" style={{ fontSize: 8, color: isWSOP ? '#e0bb55' : '#b8901c', fontWeight: 600 }}>
                      ◆{counts.tournaments}
                    </span>
                  )}
                  {counts.friends > 0 && (
                    <span className="mono" style={{ fontSize: 8, color: isWSOP ? '#8ab8f5' : '#3aa168', fontWeight: 600 }}>
                      ●{counts.friends}
                    </span>
                  )}
                </div>
              )}
              {isWSOP && (
                <div className="mono" style={{ fontSize: 7, color: '#8ab8f5', letterSpacing: '0.12em', marginTop: 2 }}>
                  TAP TO ZOOM →
                </div>
              )}
            </button>
          </div>
        );
      })}

      {/* You */}
      <div style={{
        position: 'absolute', left: `${me.x}%`, top: `${me.y}%`, transform: 'translate(-50%,-50%)',
        zIndex: 6,
      }}>
        <div style={{
          width: 14, height: 14, borderRadius: '50%',
          background: '#2a5fb8', border: '3px solid #fff',
          boxShadow: '0 0 0 2px #2a5fb8, 0 2px 8px rgba(42,95,184,0.4)',
        }}/>
        <div className="mono" style={{
          position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)',
          fontSize: 8, color: '#fff', whiteSpace: 'nowrap',
          background: '#2a5fb8', padding: '2px 5px', letterSpacing: '0.1em', fontWeight: 600,
        }}>YOU · COSMO</div>
      </div>

      {/* Legend */}
      <div style={{
        position: 'absolute', bottom: 8, left: 8,
        background: 'rgba(255,255,255,0.95)', border: '1px solid rgba(20,30,50,0.15)',
        padding: '6px 10px', display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
      }}>
        <LegendItem text="◆" color="#b8901c" label="Events"/>
        <LegendItem text="●" color="#3aa168" label="Friends alive"/>
      </div>
    </div>
  );
}

// ─── WSOP Casino Floor map (Horseshoe + Paris) ───────────────────────────
function WSOPFloorMap({ tournaments, friends, pin, onPin, onZoomOut }) {
  const fantasy = window.APP_DATA.fantasy.myLeague;
  const [showRoster, setShowRoster] = uS_h(false);

  // Floor plan in 100×100 coords. Two buildings (Horseshoe + Paris) with a skybridge.
  // Horseshoe is the bigger building (left/top), Paris is right/bottom.
  const ROOMS = [
    // Horseshoe rooms
    { id: 'Pavilion',   building: 'horseshoe', x: 8,  y: 12, w: 38, h: 22, capacity: 'Main floor · bracelets', tables: 320 },
    { id: 'Amazon',     building: 'horseshoe', x: 8,  y: 36, w: 38, h: 26, capacity: '350 tables · MAIN', tables: 350, big: true },
    { id: 'Brasilia',   building: 'horseshoe', x: 8,  y: 64, w: 18, h: 18, capacity: 'High roller · livestream', tables: 60 },
    { id: 'Rio',        building: 'horseshoe', x: 28, y: 64, w: 18, h: 18, capacity: 'Bovada secondary', tables: 80 },
    // Paris rooms
    { id: 'Paris Ballroom',   building: 'paris', x: 56, y: 18, w: 36, h: 28, capacity: 'Daily turbos · satellites', tables: 220 },
    { id: "Bally's Event",    building: 'paris', x: 56, y: 50, w: 36, h: 22, capacity: 'Final tables · feature', tables: 90 },
    { id: "Paris Promenade",  building: 'paris', x: 56, y: 74, w: 36, h: 10, capacity: 'Cash games · 24h', tables: 40 },
  ];

  // Which room each tournament is in
  const tRoom = { t1: 'Amazon', t5: "Bally's Event", t6: 'Paris Ballroom' };

  // Friends' table coordinates within their room (random-ish but stable)
  // Each friend ID → { room, dx, dy } where dx/dy are 0..1 within the room.
  const friendInRoom = {
    f1: { room: 'Amazon',        dx: 0.30, dy: 0.55 }, // Marco
    f2: { room: 'Amazon',        dx: 0.62, dy: 0.30 }, // Tasha
    f4: { room: "Bally's Event", dx: 0.45, dy: 0.50 }, // Jess (busted)
    f6: { room: "Bally's Event", dx: 0.70, dy: 0.40 }, // Pete
  };

  // Fantasy roster table positions
  const rosterInRoom = {
    r1: { room: "Bally's Event", dx: 0.25, dy: 0.35 }, // Marco Vela #54
    r3: { room: 'Amazon',        dx: 0.50, dy: 0.65 }, // Tasha Riggs Mystery
    r4: { room: 'Amazon',        dx: 0.35, dy: 0.20 }, // Phil H. busted area
  };

  const visiblePeople = [];
  friends.forEach(f => {
    const pos = friendInRoom[f.id];
    if (pos) visiblePeople.push({ ...f, ...pos, kind: 'friend', avatar: f.name.slice(0,2).toUpperCase() });
  });
  if (showRoster) {
    fantasy.myRoster.forEach(r => {
      const pos = rosterInRoom[r.id];
      if (pos) visiblePeople.push({ ...r, ...pos, kind: 'roster', avatar: r.avatar });
    });
  }

  // Heat per room = max chip ratio of any alive person there
  const roomHeat = {};
  visiblePeople.forEach(p => {
    if (p.status !== 'alive' || !p.avg || !p.chips) return;
    const r = p.chips / p.avg;
    if (!roomHeat[p.room] || r > roomHeat[p.room]) roomHeat[p.room] = r;
  });

  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background:
        `radial-gradient(circle at 30% 25%, rgba(20,80,55,0.55), transparent 60%),
         radial-gradient(circle at 70% 75%, rgba(20,80,55,0.40), transparent 60%),
         #0a1812`,
    }}>
      {/* Felt texture overlay */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.18, mixBlendMode: 'overlay' }}>
        <defs>
          <pattern id="feltDots" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
            <circle cx="3" cy="3" r="0.7" fill="#d4af37"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#feltDots)"/>
      </svg>

      {/* Header */}
      <div style={{
        position: 'absolute', top: 6, left: 6, right: 6, zIndex: 10,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        gap: 8, pointerEvents: 'none',
      }}>
        <div style={{
          background: 'rgba(14,20,34,0.92)',
          border: '1px solid rgba(212,175,55,0.4)',
          padding: '6px 10px',
          boxShadow: '0 2px 10px rgba(0,0,0,0.6)',
          pointerEvents: 'auto',
        }}>
          <div className="mono" style={{ fontSize: 8.5, color: '#d4af37', letterSpacing: '0.14em', fontWeight: 700 }}>
            ◆ WSOP 2026 · INDOOR
          </div>
          <div className="serif" style={{ fontSize: 15, lineHeight: 1.05, marginTop: 1, color: '#fff' }}>
            Horseshoe + Paris
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, pointerEvents: 'auto' }}>
          <button onClick={() => setShowRoster(s => !s)} style={{
            all: 'unset', cursor: 'pointer',
            background: showRoster ? '#d4af37' : 'rgba(14,20,34,0.92)',
            color: showRoster ? '#0e1422' : '#d4af37',
            border: '1px solid #d4af37',
            padding: '6px 10px',
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700,
            boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
          }}>{showRoster ? '◆ Fantasy ON' : '◆ Show Fantasy'}</button>
          <button onClick={onZoomOut} style={{
            all: 'unset', cursor: 'pointer',
            background: 'rgba(14,20,34,0.92)', color: '#fff',
            border: '1px solid rgba(255,255,255,0.3)',
            padding: '6px 10px',
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
          }}>← Strip</button>
        </div>
      </div>

      {/* Buildings */}
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
      }}>
        {/* Horseshoe building outline */}
        <rect x="4" y="8" width="46" height="78"
          fill="rgba(14,20,34,0.6)" stroke="rgba(212,175,55,0.55)" strokeWidth="0.25"/>
        {/* Paris building outline */}
        <rect x="52" y="14" width="44" height="74"
          fill="rgba(14,20,34,0.6)" stroke="rgba(212,175,55,0.55)" strokeWidth="0.25"/>
        {/* Skybridge between buildings */}
        <rect x="50" y="48" width="2" height="6"
          fill="rgba(212,175,55,0.4)" stroke="rgba(212,175,55,0.6)" strokeWidth="0.15"/>
        <text x="51" y="46" textAnchor="middle"
          fontFamily="JetBrains Mono, monospace" fontSize="1.4"
          letterSpacing="0.15" fill="#d4af37" fontWeight="600">SKYBRIDGE</text>

        {/* Building labels */}
        <text x="27" y="6" textAnchor="middle"
          fontFamily="JetBrains Mono, monospace" fontSize="2"
          letterSpacing="0.25" fill="#d4af37" fontWeight="700">◆ HORSESHOE</text>
        <text x="74" y="12" textAnchor="middle"
          fontFamily="JetBrains Mono, monospace" fontSize="2"
          letterSpacing="0.25" fill="#d4af37" fontWeight="700">PARIS</text>
      </svg>

      {/* Rooms */}
      {ROOMS.map(r => {
        const ts = tournaments.filter(t => tRoom[t.id] === r.id);
        const heat = roomHeat[r.id] || 0;
        const hasHot = heat > 1.0;
        const hasEvents = ts.length > 0;
        return (
          <div key={r.id} style={{
            position: 'absolute',
            left: `${r.x}%`, top: `${r.y}%`,
            width: `${r.w}%`, height: `${r.h}%`,
            zIndex: 2,
          }}>
            {/* Room block */}
            <div style={{
              position: 'absolute', inset: 0,
              background: hasEvents
                ? 'rgba(212,175,55,0.10)'
                : 'rgba(255,255,255,0.04)',
              border: '1.5px solid ' + (hasEvents ? '#d4af37' : 'rgba(255,255,255,0.18)'),
              boxShadow: hasHot
                ? `0 0 24px rgba(212,175,55,${Math.min(0.55, heat * 0.4)}), inset 0 0 18px rgba(212,175,55,0.18)`
                : 'inset 0 0 14px rgba(0,0,0,0.4)',
              transition: 'box-shadow 240ms ease',
            }}/>
            {/* Heat plume animation on top */}
            {hasHot && (
              <div style={{
                position: 'absolute', inset: -8, pointerEvents: 'none',
                background: 'radial-gradient(circle, rgba(212,175,55,0.20), transparent 65%)',
                animation: 'mapPulse 2.8s ease-in-out infinite',
              }}/>
            )}
            {/* Subtle table-grid texture inside the room */}
            <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none' }}>
              <defs>
                <pattern id={`tblGrid-${r.id.replace(/[^a-z]/gi,'')}`}
                  x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
                  <circle cx="7" cy="7" r="2.6" fill="none" stroke="#d4af37" strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill={`url(#tblGrid-${r.id.replace(/[^a-z]/gi,'')})`}/>
            </svg>

            {/* Room label */}
            <div style={{
              position: 'absolute', top: 4, left: 4, right: 4,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
              gap: 4,
            }}>
              <div>
                <div className="mono" style={{
                  fontSize: r.big ? 11 : 9.5, color: '#fff',
                  fontWeight: 700, letterSpacing: '0.12em',
                  textShadow: '0 1px 2px rgba(0,0,0,0.8)',
                }}>{r.id.toUpperCase()}</div>
                <div className="mono" style={{
                  fontSize: 8, color: '#a8b0c0', letterSpacing: '0.08em',
                  marginTop: 1,
                  textShadow: '0 1px 2px rgba(0,0,0,0.8)',
                }}>{r.capacity}</div>
              </div>
              {ts.length > 0 && (
                <div style={{
                  background: '#d4af37', color: '#0e1422',
                  padding: '1px 5px',
                  fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700,
                  letterSpacing: '0.08em',
                  flexShrink: 0,
                }}>♠ {ts.length}</div>
              )}
            </div>

            {/* Tournament title inside the room */}
            {ts.map((t, i) => (
              <button key={t.id} onClick={() => onPin && onPin({ kind: 'tournament', payload: t })} style={{
                all: 'unset', cursor: 'pointer',
                position: 'absolute', left: '50%', bottom: 6,
                transform: 'translateX(-50%)',
                color: '#d4af37',
                fontFamily: 'var(--font-serif)',
                fontSize: r.big ? 13 : 11, fontStyle: 'italic',
                whiteSpace: 'nowrap',
                textShadow: '0 1px 3px rgba(0,0,0,0.9)',
              }}>♦ {t.title}</button>
            ))}
          </div>
        );
      })}

      {/* People pins at exact table positions within rooms */}
      {visiblePeople.map((p, i) => {
        const r = ROOMS.find(rr => rr.id === p.room);
        if (!r) return null;
        const left = r.x + r.w * p.dx;
        const top  = r.y + r.h * p.dy;
        const color = p.status === 'alive' ? '#3aa168'
          : p.status === 'busted' ? '#d63b32'
          : p.status === 'on_break' ? '#c98a1a' : '#7a8295';
        return (
          <button key={p.id} onClick={() => onPin && onPin({ kind: 'friend', payload: p })} style={{
            all: 'unset', cursor: 'pointer',
            position: 'absolute',
            left: `${left}%`, top: `${top}%`,
            transform: 'translate(-50%, -50%)',
            zIndex: 6,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
          }}>
            {p.status === 'alive' && (
              <div style={{
                position: 'absolute', width: 32, height: 32, borderRadius: '50%',
                background: color, opacity: 0.25,
                animation: 'mapPulse 2.4s ease-in-out infinite',
              }}/>
            )}
            <div style={{
              position: 'relative',
              width: 28, height: 28, borderRadius: '50%',
              background: '#0e1422', border: `2.5px solid ${color}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
              color: '#fff',
              boxShadow: p.kind === 'roster'
                ? '0 0 0 1.5px #d4af37, 0 2px 6px rgba(0,0,0,0.6)'
                : '0 2px 6px rgba(0,0,0,0.6)',
            }}>{p.avatar}</div>
            {p.status === 'alive' && p.chips && (
              <div style={{
                marginTop: 3, padding: '1px 5px',
                background: p.kind === 'roster' ? '#1a3e7a' : '#0e1422',
                border: p.kind === 'roster' ? '1px solid #d4af37' : '1px solid rgba(255,255,255,0.2)',
                color: '#fff',
                fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700,
                whiteSpace: 'nowrap',
              }}>{(p.chips/1000).toFixed(0)}k</div>
            )}
          </button>
        );
      })}

      {/* YOU at entrance */}
      <div style={{
        position: 'absolute', left: '74%', top: '85%',
        transform: 'translate(-50%,-50%)', zIndex: 7,
      }}>
        <div style={{
          position: 'absolute', width: 36, height: 36, borderRadius: '50%',
          background: '#4a90e2', opacity: 0.25,
          animation: 'mapPulse 2.2s ease-in-out infinite',
          left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
        }}/>
        <div style={{
          width: 16, height: 16, borderRadius: '50%',
          background: '#4a90e2', border: '3px solid #fff',
          boxShadow: '0 0 14px rgba(74,144,226,0.7)',
        }}/>
        <div className="mono" style={{
          position: 'absolute', top: 22, left: '50%', transform: 'translateX(-50%)',
          fontSize: 9, color: '#fff', whiteSpace: 'nowrap',
          background: '#4a90e2', padding: '1px 6px', letterSpacing: '0.12em', fontWeight: 700,
        }}>YOU · ENTRANCE</div>
      </div>

      {/* Legend at bottom */}
      <div style={{
        position: 'absolute', bottom: 8, left: 8, right: 8, zIndex: 10,
        background: 'rgba(14,20,34,0.92)',
        border: '1px solid rgba(212,175,55,0.3)',
        padding: '5px 10px',
        display: 'flex', gap: 12, alignItems: 'center', justifyContent: 'space-around',
        flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#3aa168' }}/>
          <span className="mono" style={{ fontSize: 9, color: '#a8b0c0', letterSpacing: '0.1em' }}>FRIEND</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#3aa168', boxShadow: '0 0 0 1.5px #d4af37' }}/>
          <span className="mono" style={{ fontSize: 9, color: '#a8b0c0', letterSpacing: '0.1em' }}>ROSTER</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <div style={{ width: 10, height: 10, background: 'rgba(212,175,55,0.45)', borderRadius: '50%', boxShadow: '0 0 6px rgba(212,175,55,0.6)' }}/>
          <span className="mono" style={{ fontSize: 9, color: '#a8b0c0', letterSpacing: '0.1em' }}>HEAT · DEEP</span>
        </div>
      </div>
    </div>
  );
}

function LegendItem({ shape, color, label, text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      {text ? (
        <span style={{ fontSize: 11, color, fontWeight: 700, fontFamily: 'var(--font-mono)' }}>{text}</span>
      ) : (
        <div style={{ width: 8, height: 8, background: color, border: '1px solid #fff', boxShadow: '0 0 0 1px ' + color, borderRadius: shape === 'circle' ? '50%' : 0 }}/>
      )}
      <span className="mono" style={{ fontSize: 9, color: '#475065', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</span>
    </div>
  );
}

// ─── Pin preview — appears below map when something tapped ───────────────
function PinPreview({ pin, onClear, onTournamentTap }) {
  if (pin.kind === 'tournament') {
    const t = pin.payload;
    const mins = Math.max(0, Math.floor((t.regClose.getTime() - Date.now()) / 60000));
    const closing = mins < 15;
    return (
      <div style={{
        background: 'linear-gradient(180deg, var(--blue-tint), transparent)',
        borderTop: '1px solid rgba(42,95,184,0.35)',
        borderBottom: '1px solid var(--line-d)',
        padding: '14px 18px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ width: 6, alignSelf: 'stretch', background: closing ? 'var(--red-bright)' : 'var(--gold)' }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mono" style={{ fontSize: 9, color: 'var(--blue)', letterSpacing: '0.12em', marginBottom: 3 }}>
            ● {t.casino.toUpperCase()} · {t.tag.toUpperCase()}
          </div>
          <div className="serif" style={{ fontSize: 18, lineHeight: 1.1, marginBottom: 3 }}>{t.title}</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--paper-d)' }}>
            ${t.buyin.toLocaleString()} · {t.walkMin}min walk · closes in <span style={{ color: closing ? 'var(--red-bright)' : 'var(--gold-deep)', fontWeight: 600 }}>{mins}m</span>
          </div>
        </div>
        <button onClick={() => onTournamentTap(t)} className="btn btn-blue" style={{ padding: '8px 14px' }}>Open</button>
        <button onClick={onClear} style={{ all: 'unset', cursor: 'pointer', color: 'var(--muted-d)', fontSize: 18, padding: 4 }}>×</button>
      </div>
    );
  }
  if (pin.kind === 'friend') {
    const f = pin.payload;
    const stateColor = f.status === 'alive' ? 'var(--green-bright)' : f.status === 'busted' ? 'var(--red-bright)' : 'var(--amber-c)';
    return (
      <div style={{
        background: 'linear-gradient(180deg, var(--green-tint), transparent)',
        borderTop: `1px solid ${stateColor}`,
        borderBottom: '1px solid var(--line-d)',
        padding: '14px 18px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%',
          background: '#fff', border: `2.5px solid ${stateColor}`,
          fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>{f.avatar}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="serif" style={{ fontSize: 17, lineHeight: 1.1, marginBottom: 2 }}>
            {f.name} <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: stateColor }}>· {f.status.toUpperCase()}</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--paper-d)' }}>
            {f.where}{f.table ? ` · ${f.table}` : ''}
          </div>
          {f.chips > 0 && (
            <div className="mono" style={{ fontSize: 11, color: 'var(--ivory-d)', marginTop: 3 }}>
              <span style={{ color: f.chips > f.avg ? 'var(--green)' : 'var(--red)' }}>{(f.chips/1000).toFixed(1)}k</span>
              {f.avg > 0 && <span style={{ color: 'var(--muted-d)' }}> / avg {(f.avg/1000).toFixed(1)}k</span>}
            </div>
          )}
          {f.lastResult && (
            <div className="mono" style={{ fontSize: 10, color: 'var(--red)', marginTop: 3 }}>{f.lastResult}</div>
          )}
        </div>
        <button onClick={onClear} style={{ all: 'unset', cursor: 'pointer', color: 'var(--muted-d)', fontSize: 18, padding: 4 }}>×</button>
      </div>
    );
  }
  return null;
}

// ─── POY tracker hero ────────────────────────────────────────────────────
function PoyTracker({ poy, onTap }) {
  const top = poy.rivals[0];
  return (
    <button onClick={onTap} style={{
      all: 'unset', cursor: 'pointer', display: 'block', width: '100%',
      background: '#ffffff',
      border: '1px solid rgba(42,95,184,0.30)',
      boxShadow: '0 2px 12px rgba(42,95,184,0.08)',
      padding: 16,
      color: '#0e1422',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
        <div>
          <div className="mono" style={{ fontSize: 9, color: '#2a5fb8', letterSpacing: '0.14em', marginBottom: 3 }}>
            ◆ WSOP PLAYER OF THE YEAR · 2026
          </div>
          <div className="serif" style={{ fontSize: 22, lineHeight: 1.05, color: '#0e1422' }}>
            You're <span style={{ color: '#2a5fb8' }}>#{poy.you.rank}</span> in the world.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="num serif" style={{ fontSize: 28, color: '#1a3e7a', lineHeight: 1 }}>{poy.you.points}</div>
          <div className="mono" style={{ fontSize: 9, color: '#7a8295', letterSpacing: '0.1em' }}>POY PTS</div>
        </div>
      </div>

      {/* Gap to leader visualized */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
          <span className="mono" style={{ fontSize: 10, color: '#475065', letterSpacing: '0.08em' }}>YOU · {poy.you.points}</span>
          <span className="mono" style={{ fontSize: 10, color: '#475065', letterSpacing: '0.08em' }}>{top.name.toUpperCase()} · {top.points}</span>
        </div>
        <div style={{ position: 'relative', height: 6, background: '#e3e7ed', overflow: 'hidden' }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, height: '100%',
            width: `${(poy.you.points / top.points) * 100}%`,
            background: 'linear-gradient(90deg, #2a5fb8, #3b7adf)',
          }}/>
        </div>
      </div>

      {/* Coach quote */}
      <div style={{
        padding: '10px 12px', background: 'rgba(42,95,184,0.08)',
        borderLeft: '2px solid #2a5fb8', marginBottom: 10,
      }}>
        <div className="serif" style={{ fontSize: 14, lineHeight: 1.35, color: '#0e1422', fontStyle: 'italic' }}>
          "{poy.coachQuote.split('.')[0]}."
        </div>
        <div className="mono" style={{ fontSize: 9, color: '#2a5fb8', letterSpacing: '0.1em', marginTop: 4 }}>— COACH DOYLE</div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 10, color: '#475065', letterSpacing: '0.08em' }}>
          PROJECTED: <span style={{ color: '#0e1422', fontWeight: 600 }}>{poy.plan.projectedFinish.toUpperCase()}</span>
        </div>
        <span className="mono" style={{ fontSize: 11, color: '#2a5fb8', letterSpacing: '0.08em' }}>SEE PLAN ›</span>
      </div>
    </button>
  );
}

// ─── Coach button — bigger, with active state ────────────────────────────
function CoachButton({ onTap, poy }) {
  return (
    <button onClick={onTap} style={{
      all: 'unset', cursor: 'pointer', display: 'block', width: '100%',
      padding: '18px 20px',
      background: 'linear-gradient(180deg, #1a3050 0%, #122340 100%)',
      border: '1px solid var(--blue-deep)',
      boxShadow: '0 2px 12px rgba(42,95,184,0.25)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ position: 'relative', width: 44, height: 44, flexShrink: 0 }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: 'rgba(107,160,232,0.4)',
            animation: 'voicePulse 2.2s infinite',
          }}/>
          <div style={{
            position: 'absolute', inset: 6, borderRadius: '50%',
            background: 'linear-gradient(180deg, #6ba0e8, var(--blue))',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
          }}>
            <svg width="16" height="18" viewBox="0 0 20 22" fill="none">
              <rect x="7" y="2" width="6" height="11" rx="3" fill="#fff"/>
              <path d="M3 10c0 4 3 7 7 7s7-3 7-7" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/>
              <line x1="10" y1="17" x2="10" y2="20" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div className="mono" style={{ fontSize: 9, color: '#8ab8f5', letterSpacing: '0.14em', marginBottom: 3 }}>
            ● COACH DOYLE · TAP TO TALK
          </div>
          <div className="serif" style={{ fontSize: 19, lineHeight: 1.1, color: '#fff' }}>
            "{poy.you.rank > 30 ? `Skip Sean Deeb. Top 25's the play.` : `Stick with me. Top 10 is real.`}"
          </div>
        </div>
        <div style={{ color: '#8ab8f5', fontSize: 18 }}>›</div>
      </div>
      <style>{`
        @keyframes voicePulse {
          0%   { transform: scale(0.95); opacity: 0.7; }
          50%  { transform: scale(1.20); opacity: 0.1; }
          100% { transform: scale(0.95); opacity: 0.7; }
        }
      `}</style>
    </button>
  );
}

// ─── Silver button ───────────────────────────────────────────────────────
function SilverButton({ label, sub, onTap }) {
  return (
    <button onClick={onTap} style={{
      all: 'unset', cursor: 'pointer', display: 'block', width: '100%',
      padding: '16px 18px',
      background: 'linear-gradient(180deg, #fbfcfd 0%, #e3e7ed 55%, #ced4de 100%)',
      borderTop: '1px solid rgba(255,255,255,0.9)',
      borderBottom: '1px solid rgba(20,30,50,0.18)',
      borderLeft: '1px solid rgba(255,255,255,0.5)',
      borderRight: '1px solid rgba(20,30,50,0.10)',
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(20,30,50,0.10)',
      transition: 'all 120ms var(--ease)',
      color: '#0e1422',
    }}
    onMouseEnter={e => { e.currentTarget.style.background = 'linear-gradient(180deg, #ffffff 0%, #ebeef3 55%, #d8dde5 100%)'; }}
    onMouseLeave={e => { e.currentTarget.style.background = 'linear-gradient(180deg, #fbfcfd 0%, #e3e7ed 55%, #ced4de 100%)'; }}
    onMouseDown={e => e.currentTarget.style.transform = 'translateY(1px)'}
    onMouseUp={e => e.currentTarget.style.transform = 'translateY(0)'}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div className="serif" style={{ fontSize: 19, lineHeight: 1.1, color: '#0e1422', marginBottom: 2 }}>{label}</div>
          <div className="mono" style={{ fontSize: 10, color: '#475065', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{sub}</div>
        </div>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'linear-gradient(180deg, #ffffff, #c8ceda)',
          border: '1px solid rgba(20,30,50,0.15)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#2a5fb8', fontSize: 16, fontWeight: 600,
        }}>›</div>
      </div>
    </button>
  );
}

function formatMins(target) {
  const diff = Math.max(0, Math.floor((target.getTime() - Date.now()) / 60000));
  if (diff < 60) return `${diff} min`;
  return `${Math.floor(diff/60)}h ${diff%60}m`;
}

// ─── Poker Late Reg sub-screen (still useful, but secondary) ──────────────────
function PokerLateRegScreen({ onBack, onTournamentTap }) {
  const data = window.APP_DATA;
  const tournaments = uM_h(() => [...data.tournaments].sort(
    (a, b) => a.regClose.getTime() - b.regClose.getTime()
  ), []);

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--felt)' }}>
      <div style={{ padding: '8px 16px 12px', borderBottom: '1px solid var(--line-d)', display: 'flex', alignItems: 'center', gap: 12, background: 'var(--felt-2)' }}>
        <button onClick={onBack} style={{ all: 'unset', cursor: 'pointer', color: 'var(--paper-d)', fontSize: 22 }}>←</button>
        <div style={{ flex: 1 }}>
          <div className="eyebrow" style={{ color: 'var(--red-bright)' }}>● LATE REG · LIVE</div>
          <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>Find a seat</div>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 20 }}>
        {tournaments.map(t => <TournamentCard key={t.id} t={t} onTap={onTournamentTap}/>)}
      </div>
    </div>
  );
}

// ─── Strip Map (kept for friends screen / other uses) ────────────────────
function StripMap({ mode, tournaments, selected, onSelect, friends, selectedFriend, onSelectFriend }) {
  // Reuse HomeMap-style rendering but allow modes
  return <HomeMap tournaments={tournaments || []} friends={friends || window.APP_DATA.friends} pin={null} onPin={() => {}}/>;
}

function ResponsibleFooter() {
  return (
    <div style={{ padding: '14px 0', borderTop: '1px solid var(--line-d)' }}>
      <div className="eyebrow" style={{ color: 'var(--muted-d)', marginBottom: 6 }}>Play responsibly</div>
      <p style={{ fontSize: 12, color: 'var(--muted-d)', lineHeight: 1.5, fontFamily: 'var(--font-system)' }}>
        Problem gambling? <a href="#">1-800-GAMBLER</a>. Pause your bankroll any time.
      </p>
    </div>
  );
}

Object.assign(window, { HomeScreen, PokerLateRegScreen, ResponsibleFooter, StripMap, HomeMap, PoyTracker });