Add leagues screen and bottom-navigation integration

[TrentIndeed]

Motivation

• Provide a dedicated Leagues leaderboard screen reachable when the 4th bottom icon is clicked.
• Add a visual phone shell and styling to match the provided League Competition design for a realistic preview.
• Include a simple client-side preview of Friends/Global leaderboard state to validate UI behavior.

Description

• Add three new files: index.html, styles.css, and app.js containing the UI shell, styling, and client-side logic respectively.
• Implement the Leagues screen markup (trophy header, segmented Friends Only / Global control, leaderboard #board, and timeline) and the bottom navigation with data-nav attributes.
• Implement leaderboard data and rendering helpers (render, rankClass, fillGradient) plus tab switching via setTabs to toggle between friendsOnly and global datasets.
• Wire navigation via setScreen to toggle .screen.active states and update nav button active classes when buttons are clicked.

Testing

• Served the site locally with python -m http.server and loaded index.html, which returned HTTP 200 (successful).
• Ran a Playwright script to navigate to the Leagues tab and capture a screenshot, which produced artifacts/leagues-screen.png (successful).
• No unit or integration test suite was added or executed for this change.

---

Codex Task