iOS Journey Check

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 tiny, single-screen tap game titled “iOS Journey Check.” It is a clean responsive web game designed primarily for quick portrait play, with no character, scrolling world, enemies, timer, win state, or loss state. The sole mechanic is tapping one large button to increase a journey score by exactly 1 each time; tapping/clicking should respond immediately on pointer-down, including touch. Start the score at 0 and display it prominently, allowing it to grow without an upper limit.

Visual presentation: use a pale blue-to-white diagonal gradient page background (#dbeafe through #eff6ff to white), centered around a translucent white glass-like panel with a subtle white border, large rounded corners, blur/backdrop effect, and a soft blue shadow. In portrait, make the panel narrow and tall, roughly 92vw wide with a maximum width around 420px and a maximum height around 660px, with generous rounded corners and a vertical flex layout. Use a modern system/Inter-like sans-serif font and dark navy text.

The panel’s top/header area contains a small uppercase blue eyebrow reading “TINY TAP GAME,” with wide letter spacing and bold weight. Under it, show the large dark-navy title “iOS Journey Check,” with tight line height and negative letter spacing; on narrow portrait screens it wraps into two lines as shown. Beneath the title, show centered gray-blue helper text: “Tap the button and watch your journey score climb.”

Place a score card in the panel with a very pale blue fill (#eff6ff), thin light-blue border, and rounded corners. It contains the uppercase, letter-spaced light-blue label “YOUR SCORE” and a huge, heavy, dark-blue numeric value starting at “0”; the number updates to 1, 2, 3, etc. as the button is tapped. The score card should have generous padding in portrait and be readable as the primary status display.

Include one large full-width rounded blue button labeled exactly “Add one point.” It has white bold text, a bright royal-blue face (#2563eb), a darker blue lower offset shadow that gives it a chunky raised appearance, and a soft blue glow/shadow. On press, animate it downward and reduce the shadow while briefly using the darker blue pressed color. It must have a visible light-blue keyboard focus outline. The button should be touch-friendly, at least about 64px tall in portrait.

At the bottom of the panel, show small muted gray footer text: “Made for quick portrait play.” Also include a small decorative phone icon near the lower portion of the content: a simple upright rounded-rectangle phone outline in dark navy, filled light blue, with a tiny top speaker, a small circular home button, and an inner screen whose upper portion is royal blue and lower portion pale blue. This is decoration only and has no interaction.

Implement responsive behavior matching the supplied layout: in a short landscape viewport (approximately max-height 420px), switch the panel to a compact horizontal grid, up to about 680px wide and 288px tall. Put the header in the left grid area, a compact score card in the middle, and the button on the right; reduce title, hint, icon, score, padding, and button sizes appropriately, and place the footer across the lower right grid area. Keep the same colors, wording, rounded/glass styling, and single score-increment interaction in both orientations. Expose optional game-state helpers equivalent to getGameState returning the current points and setGameState accepting a finite points value clamped to zero or above, but do not add any other gameplay systems.