Starbound Pact

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.

Create a responsive, mobile-first single-page web game titled “Starbound Pact,” an offline-ready anime mecha gacha / collection interface. It is primarily a polished interactive UI rather than an action game. Use a very dark navy-purple space background with a subtle radial purple glow, animated white starfield particles behind the interface, translucent panels, rounded cards, thin low-opacity borders, and neon pink, cyan, and gold accents. Use system sans-serif typography with bold, high-contrast headings.

Overall layout: fill the viewport without page-level scrolling, with a top header, central scrollable content area, and fixed bottom navigation. The header has the brand “STARBOUND PACT” with “PACT” in pink, plus two rounded currency pills on the right: “✦ 120” gems and “◈ 3” tickets on a fresh save. Persist all save data in localStorage under an equivalent save key so the collection and currencies survive reloads; show a small cyan “OFFLINE READY” badge near the top. Include a reset-save control that confirms before deleting the local save and reloading.

At the top of the main content, show a hero section. On the left, display the gold all-caps label “ORIGINAL ANIME MECHA GACHA,” a large headline “Bond with a star pilot.” with “star pilot.” in hot pink, and the muted description “Build a squad of paired pilots and living mecha to protect the last garden colony.” On the right, show a large glowing pink-to-purple orb with a white sparkle/star in its center, made with CSS gradients and an inner shadow rather than external image assets. On narrower screens let the hero fit beside the orb as shown; on wider screens enlarge the orb and constrain the app content to a centered column no wider than about 760px.

Under the hero, provide three tab buttons: “Summon,” “Roster,” and “Missions.” The active tab has a dark-purple rounded background and white text; inactive tabs are muted lavender. The fixed bottom navigation contains a sparkle icon labeled “Summon” and a reset icon labeled “Reset save.”

Summon tab: show a gradient banner labeled “FEATURED BANNER · 8 DAYS,” titled “Garden of First Light,” with subtext “5★ rate up: Aster Vale & Mira Sol” and a decorative flower symbol. Below it, place two side-by-side large summon buttons. The pink primary button says “1 Resonance” and “Cost: 30 ✦ gems.” The dark secondary button says “10 Resonances” and “Cost: 270 ✦ gems · guaranteed 4★.” Clicking either checks gems, subtracts the cost, increments total pulls by 1 or 10, and opens a centered dark modal titled “Resonance draw” with the label “NEW BONDS FORMED,” showing every result and a “Continue” button. If there are insufficient gems, show a temporary toast reading “Not enough gems” and do not alter the save.

Implement the actual summon pool and rates with six units: Aster Vale, role “Dawn Striker,” symbol ✦, rarity 5, pink portrait color; Mira Sol, “Bloom Weaver,” symbol ❀, rarity 5, gold color; Rin Kestrel, “Sky Lancer,” symbol ⚡, rarity 4, cyan color; Noa Ember, “Cinder Guard,” symbol 🔥, rarity 4, orange color; Lio Fern, “Garden Scout,” symbol ☘, rarity 3, green color; and Yuki Vale, “Moon Tactician,” symbol ☾, rarity 3, lavender color. For each draw, use a random roll with 5% chance of 5★, 20% chance of 4★, and 75% chance of 3★, then randomly select from units of that rarity. For a 10-pull, make the final result guaranteed 4★ or better (the reference implementation guarantees a 4★ result in that slot). Add newly obtained unit names to the owned collection; duplicates do not add a second copy. The initial save owns Aster Vale, starts with 120 gems, 3 tickets, and 0 pulls. Tickets are displayed but are not consumed by these gem-based summon buttons.

Below the summon buttons, show a “Featured bonds” heading and the current “X total pulls,” then a responsive card grid. The featured grid shows the first four units (Aster, Mira, Rin, Noa) in the summon view. Each card is a dark rounded panel with a large gradient portrait area containing the unit symbol, a gold row of repeated stars matching rarity, the unit name, and muted role text. Below that, show a “How it works” heading and a banner stating “Rates” and “5★ 5% · 4★ 20% · 3★ 75%” plus “Every 10-pull guarantees a 4★ or better.”

Roster tab: show a banner labeled “MY STARBOUND CREW,” with “N / 6 bonds,” the subtext “Duplicates become resonance shards.” and a diamond decoration. (This is descriptive UI; do not invent a shard currency or shard behavior.) Below it show “Collected” and “Offline save enabled,” followed by cards for only the currently owned units, in a responsive two-column mobile grid and four-column wider grid. Use the same portrait, rarity, name, and role card styling.

Missions tab: show a banner labeled “DAILY MISSION,” title “Water the sky garden,” subtext “Claim 20 gems after your first summon.” and a cyan/outlined “CLAIM” button. Clicking CLAIM adds 20 gems to the save, updates the header, persists the save, and displays a toast “+20 gems added.” Keep the behavior simple and faithful to the reference: the button is present and adds the reward when clicked. Below show a “Colony log” heading and a banner titled “Chapter 01 · The Quiet Signal,” with the text “A strange heartbeat echoes beyond the greenhouse wall. Your bond is the only key.” and a small cyan circular glyph.

Use rounded modal dialogs for summon results: dim the entire screen with a translucent black overlay, show a centered purple gradient box, arrange results in a compact three-column grid, and for each result show its symbol in its unit color, name, and gold rarity stars. “Continue” closes the modal and returns to the summon view. Add short animated toast feedback near the bottom above the fixed navigation. Buttons should have pressed-scale feedback and be touch-friendly. The starfield should be lightweight canvas animation with roughly up to 90 slowly drifting dots, no external assets required. Maintain the visual feel of the supplied screenshot: premium sci-fi gacha dashboard, deep space atmosphere, pink/cyan neon highlights, large white typography, and dense but readable mobile cards.