Improve character selection UX and accessibility (scroll + visual feedback)

[vitorRibeiro7]

Problem

While testing the registration flow (GitHub login → character selection), I noticed some UX and accessibility issues:

1. The character list does not have scroll enabled.
2. On 135% Windows display scaling, the "Continue with {character}" button is pushed below the viewport and becomes invisible.
3. There is no visual feedback when selecting a character (no hover/selected state).
4. Users may click multiple characters without realizing one has been selected.

This results in a confusing user experience, especially for users with adjusted display scaling or limited screen space.

---

Proposed Improvements

• Added vertical scroll to the character container.
• Implemented a visual selected state:
  • Background highlight
  • Border emphasis
  • Subtle shadow for depth
• Added hover state for better affordance.
• Ensured the "Continue" button remains visible within typical viewport constraints.

---

Impact

• Improves accessibility (display scaling support).
• Enhances visual clarity and feedback.
• Prevents user confusion during character selection.
• Improves overall registration UX.

---

How to Test

1. Log in with GitHub.
2. Navigate to the character selection screen.
3. Try selecting multiple characters.
4. Test with browser zoom or 125%+ display scaling.
5. Confirm:
   • Scroll works properly.
   • Selected character is clearly highlighted.
   • Continue button is visible.