// ==================== FLOATING NAV ====================
function Nav({ screens, current, onJump }) {
  return (
    <div style={{
      position:'fixed', right: 20, top:'50%', transform:'translateY(-50%)',
      display:'flex', flexDirection:'column', gap: 14, zIndex: 50,
      padding:'14px 10px', background:'rgba(251,243,227,.7)',
      backdropFilter:'blur(10px)',
      borderRadius: 999, border:'1px solid var(--gold-300)',
      boxShadow:'var(--shadow-card)',
    }}>
      {screens.map((s) => (
        <button key={s.id}
          onClick={() => onJump(s.id)}
          title={s.label}
          style={{
            width:10, height:10, borderRadius:999,
            border:'none', padding:0,
            background: current === s.id ? 'var(--marsala-700)' : 'var(--gold-400)',
            cursor:'pointer', transition:'all .2s',
            transform: current === s.id ? 'scale(1.4)' : 'scale(1)',
          }}
        />
      ))}
    </div>
  );
}

window.Nav = Nav;