Friends World Cup 2026 Prediction League

@AppDeploy build a mobile-first app called Friends World Cup 2026 Prediction League. It is a private friends-only World Cup 2026 prediction league. For fun only: no betting, money, gambling, odds, or wagers. Use this World Cup API as the source of truth for teams, flags, groups, stadiums, fixtures, standings, and results: https://world-cup-api.appdeploy.ai/llms.txt Generate all required visual assets inside the app. Generate mobile and desktop welcome background images with the app title, a World Cup-style trophy, soccer ball, stadium lights, red/blue atmosphere, and premium sports poster energy. Use them full-screen on the welcome/sign-in screen with only the bottom button overlay. Generate matching mobile and desktop app background images without title text, used behind the rest of the app under a translucent dark/glassy overlay. Generate a soccer-ball favicon/logo asset with transparent background, then create the full favicon set from it: favicon.ico, SVG favicon, 16x16, 32x32, 48x48, 180x180 apple touch icon, 192x192 and 512x512 PWA icons. Preload and optimize all generated background images for web. Use the 48x48 ball icon as a borderless rotating loading spinner. Authentication is required. The welcome screen shows only the generated full-screen landing background image and a white 60px “SIGN IN” button at the bottom. After sign-in, send users directly to their league dashboard if they already belong to a league, otherwise directly to Create League. Users may belong to only one league. Use a mobile-first glassy UI: deep blue, red, and white; frosted cards, translucent panels, soft borders, backdrop blur, rounded cards, glassy top bar. Navigation: Dashboard is the main page. Dashboard top bar shows the league name, Fixtures icon, Leaderboard trophy icon, and Settings gear. Other pages show Back, page title, and no extra dashboard nav. Create League: Show a “League name” card with validated name input, 1-25 chars. Creating a league immediately opens the Dashboard. Invite sharing uses invite links. Join League: Invite links auto-capture the invite. If anonymous, show the welcome-style screen with a “JOIN THE LEAGUE” button that signs in and then joins automatically. If already signed in and not in a league, join automatically and go directly to Dashboard. If already a member, go directly to Dashboard. Dashboard: Show cards in this order: 1. “GROW YOUR LEAGUE” card with text “Invite your friends and predict your way to the top.”, Share button, and X dismiss button. 2. “NEVER MISS A PREDICTION” reminder card with Enable primary button and X dismiss button. 3. “UPCOMING MATCHES” section. Dismissed dashboard cards stay hidden locally. Upcoming match cards show teams on the left. If the user has a prediction, show predicted scores on the right and a pencil edit icon at top right; otherwise show a full-width primary “PREDICTION MISSING” button with red uppercase text. Games disappear from Dashboard 5 minutes before kickoff. Prediction Page: Title: “Make your prediction”. Show time and venue, then: Team 1 - 0 + vs Team 2 - 0 + Save prediction Add a secondary Rules button below Save. The score starts 0-0. Disable saving if teams are unknown/TBD, if final result exists, or within 5 minutes before kickoff. Enforce this on both client and backend API. After lock, users can see all league predictions. Show final score and per-user points when finished. Do not allow creator result override. Scoring: Exact score = 5 pts. Correct result only = 3 pts. Wrong/no prediction = 0. Exact includes result. Leaderboard stores total points, correct count, exact count. Points should be recalculated whenever fresh API results are available, not only by cron. Also run a backend cron every 5 minutes near active match windows to sync results and send notifications. The API is the source of truth. Fixtures: Page title “Scores & Fixtures”. Tabs: GROUPS and BRACKET, uppercase. Groups view shows each group as a glassy card, one column desktop and mobile, max width 1200px. Each group table has only TEAM and PTS visually, no header row. Each row looks like the match cards: flag + team name on left, points on right, horizontal dividers. Sort teams by World Cup group tiebreakers: points, goal difference, goals scored, then head-to-head among tied teams. Add a thin clickable “Detailed statistics” header-line with a two-arrows expand icon attached to each group card. Detailed stats show cards for each team with flag, name, MP, W, D, L, GF, GA, GD, PTS. Fixture match cards: For scheduled games show teams left, countdown on first line right, date + exact time on second line right. For finished games show teams left and final scores right, no time. Bracket: Round headings like ROUND OF 32, QUARTERFINAL, FINAL should be glassy cards like group headings. Match cards should look like group fixture cards. TBD slots show their source, e.g. Winner Group A or Runner-up Group B. Do not allow predictions for unresolved/TBD games. Leaderboard: Leaderboard page should be a list of user cards, no table header. Each card: #1 🏆 Player name 14 Correct: 3 | Exact: 1 Use gold/silver/bronze cups for top 3. Settings: Profile card title “PROFILE”. Display name input, Save and Sign out secondary buttons. Show toast after saving. Show “GROW YOUR LEAGUE” share card after Profile with Share button. Show “REMINDERS” card. Show “LEAGUE” card, with text “To switch leagues, quit this one first.” and a secondary Quit league button. Quit league must use a confirmation popup. Global behavior: Use bottom-positioned toasts for success/errors with fixed positioning, auto-hide after max 5 seconds. Card titles are uppercase and consistent. Body text 18px. h1 24px. Primary/secondary buttons min-height 48px except welcome/sign-in buttons are 60px. Secondary buttons font size 20px where used as major actions. All cards need comfortable spacing so text/buttons never overlap. Notifications: Send one reminder notification one hour before each game if predictions are still open. If several games are at the same time, one notification is enough. When new points are awarded/recalculated, notify league users to check their points. Notification copy should be friendly and non-gambling. Backend: Use AppDeploy auth, database, notifications, invites, and cron. Store leagues, members, profiles, predictions, notification preferences, dismissed cards, and scoring history. Bootstrap should fetch latest World Cup API data, sync/recalculate prediction scores, then return fresh dashboard/leaderboard data. Cron should sync results and standings every 5 minutes during relevant match windows. Ensure API result reverts are handled by recalculating from current API state.