FanLine FC

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Rebuild a polished responsive browser game/app titled “FanLine FC,” an AI football fan-experience prototype rather than an on-pitch football match. Use a dark navy football-themed interface with a subtle radial blue-black page background, rounded bordered panels, soft shadows, neon mint green accents, pale blue text, and responsive behavior: on desktop show two main columns, and on narrow screens stack the panels vertically in a scrollable main area.

At the top, place a header with a rounded blue gradient crest containing a soccer-ball glyph and the bold brand name “FanLine FC” on the left. On the right show a dark rounded status pill reading “Demo wallet · Not connected,” with “Not connected” in mint green.

The main area has two large rounded panels. The left panel is the hero/arena panel with a blue-tinted gradient from medium navy-blue to dark navy and faint transparent horizontal and vertical pitch/grid lines. At the top show the uppercase mint eyebrow “AI FAN EXPERIENCE · SEASON 01.” Below it show the large headline on two lines: “Talk football.” and “Feel the match.”, with the second line mint green. Add the exact supporting copy: “Choose a fictional football star, start a voice conversation, and unlock a cinematic video-room preview. This prototype uses browser speech and simulated players so the game is playable now.” At the bottom of this panel, show a translucent dark call card with the selected player’s initials in a colorful rounded-square avatar, their name, status text, and a glowing mint pulse dot. The initial selected player is Leo Marquez, initials LM, with status “Ready for a fan call · Tap start to begin.”

The right panel is titled “Players Lounge,” with the subtitle “Original fictional stars — not real people or endorsements.” Beneath it, render a selectable list of four fictional football stars as rounded dark cards. Each card has an initials avatar with a player-specific color gradient, name, position/location, and a status tag. The roster is exactly:
- Leo Marquez — “Striker · Buenos Aires”, initials LM, gold/orange avatar, FREE
- Amina Okafor — “Midfielder · Lagos”, initials AO, blue avatar, FREE
- Niko Petrov — “Goalkeeper · Sofia”, initials NP, pink avatar, PRO
- Sofia Costa — “Winger · Lisbon”, initials SC, mint avatar, PRO
The first card starts selected with a brighter blue border and blue-tinted background. Hovering or selecting a card should raise it slightly and apply the same highlighted styling. Selecting a player updates the hero avatar, hero name, and all subsequent call/video text to that player.

At the bottom of the lounge panel place two equal-width buttons: a mint/teal gradient primary button labeled “☎ Start AI Call” and a dark blue secondary button labeled “▣ Unlock Video Room.”

Implement the exact interaction mechanics. Clicking a roster card selects it and refreshes the hero. Clicking Start AI Call toggles a simulated call for the selected player. When it starts, change the button to “■ End AI Call,” use a pink-orange gradient on it, change the hero status to “AI call connected · speaking now,” add 10 to an internal score, speak a browser SpeechSynthesis message in a natural near-normal voice: “Hi, this is [selected player name]. [that player’s scripted line],” and show a temporary bottom toast saying “Connected to [name] — demo voice call started.” Use these exact scripted lines: Leo Marquez: “That last-minute goal feeling never gets old. What do you want to talk about?”; Amina Okafor: “The best pass is the one that creates a chance for everyone. Ask me about match vision.”; Niko Petrov: “A clean sheet is a team story. I can tell you how I read a penalty taker.”; Sofia Costa: “Speed is useful, but timing changes the whole game. Pick a football topic for us.” The call automatically ends after about 11 seconds if the user does not end it, restoring the button label/style and setting the hero status to “Call ended · Start another conversation.” Clicking End AI Call cancels speech, ends the timer, restores “☎ Start AI Call,” restores the default status “Ready for a fan call · Tap start to begin,” and shows a “Call ended” toast. If browser speech synthesis is unavailable, show a toast saying “Speech synthesis is not available in this browser.”

Clicking Unlock Video Room opens a centered dark modal overlay. If the room is not unlocked, show “Unlock Video Room,” explain that the user can enter secure checkout to unlock a simulated 1:1 camera room with the selected player, and present two payment option cards: “💳 International card” with “Visa · Mastercard · Apple Pay,” and “₿ Crypto” with “Wallet checkout · stablecoin or BTC.” Include a yellow warning notice explaining: “This is a playable prototype. No real charge happens here. Real payment, identity verification, consent, and live AI/video need a secure backend plus a licensed payment provider.” Add a Close button. Clicking either payment option must not charge or unlock anything; close the modal and show a toast stating either “Card checkout is a demo — no money was taken” or “Crypto checkout is a demo — no money was taken.” Clicking outside the modal closes it. If a room is marked unlocked by the game state, change the button label to “▣ Open Video Room”; clicking it opens a “Video Room Preview” modal with a dark blue camera-preview rectangle, a camera glyph, and the text “Camera room unlocked for [selected player].” Below explain that a real release would connect a verified player, consented camera, moderation, and secure WebRTC session. Include a “Leave room” button.

Use temporary centered bottom toast notifications with dark navy backgrounds and light borders. Add a footer with “Prototype build · Voice uses your browser’s speech synthesis” on the left and “Payments and live AI require a secure server” on the right, using muted small text. Keep the experience clearly fictional and prototype-oriented, with no real wallet connection, payment, live video, or real football match simulation. Maintain rounded corners around 14–22px, compact bold typography, accessible high contrast, and mobile adaptation where the two columns stack and the player list remains scrollable.