UX: Non clickable element has 'pointer' cursor

This is a must requirement for good UX.
- https://guessync.netlify.app/how-to-play page has steps which isn't clickable yet have 'cursor: pointer'.
- Profile button on the navbar isn't accessible by the keyboard.

<img width="1189" height="259" alt="Image" src="https://github.com/user-attachments/assets/67461edb-a1bd-4d92-80c3-4966c011e713" />

I want to fix these issues.