The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Cozy Isometric Farm Game

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original, self-contained isometric farming game set in [SETTING]. The playable farm is [FARM_NAME]. Use the three crop names in [CROPS] and call the soft currency [CURRENCY]. The first screen is the game itself, not a landing page: a code-drawn 6×6 SVG plot, four working tools, a seed shop, a player-controlled day cycle, and automatic local progress. Keep every string, crop definition, default value, notification, and label in src/content.ts. Rewrite all default-specific names, visual details, and copy when the variables change while preserving the mechanics and composition.

- Audience: Casual players who want a calm two-minute farming session, and creators or developers who want an original browser game they can reskin without setting up a backend.
- Goal: Make the complete till → plant → water → end day → harvest → buy seeds loop immediately playable with mouse, touch, or keyboard, then persist every meaningful state change locally so returning players can continue.
- Tone: Warm, patient, lightly whimsical, and tactile. Use concise friendly instructions and satisfying visual feedback, never competitive pressure, real-money language, or childish mascot copy.

## Stack
- Framework: Vite 5 + React 18 + TypeScript 5
- Styling: Vanilla CSS + inline SVG
- Libraries: react (MIT), react-dom (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), lucide-react (ISC), @fontsource/fraunces (OFL), @fontsource/nunito-sans (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite React TypeScript project with package.json scripts dev=vite and build=tsc && vite build; use @vitejs/plugin-react and no other runtime framework.
  - Set base: './' and build.sourcemap: false in vite.config.ts. Production output must be minified static files in dist/ and stay below 20 MB.
  - Use src/content.ts for all variables, default game configuration, crop names and colors, interface copy, help text, notifications, and dialog text. Derive a lowercase BRAND_SLUG from BRAND for the localStorage key; never duplicate default-specific copy inside components.
  - Separate the typed game reducer and persistence helpers from rendering: src/game/engine.ts owns legal actions and transactions, src/game/storage.ts validates saved data, and React components only dispatch actions and render state.
  - Import Fraunces weights 600 and 700 and Nunito Sans weights 400, 600, 700, and 800 from their Fontsource packages in src/main.tsx. Use no external font URLs.
  - Render the field and all scenery as inline SVG with reusable React components and CSS classes. Use Lucide only for interface icons; do not install an icon font, canvas engine, physics package, or 3D library.
  - Define reusable CSS custom properties, keyframes, focus states, and responsive breakpoints in src/styles.css. Include explicit 1440×900 and 390×844 layouts and prefers-reduced-motion overrides.

## Variables
- [BRAND] — Game brand (default: "Mossy Acres"). A short invented game name used in the header, document title, and footer.
- [FARM_NAME] — Farm name (default: "Brindlebrook Farm"). The name of this particular playable place.
- [SETTING] — Setting (default: "a sheltered valley beside a slow river"). A concise invented setting; adapt decorative scenery and introductory copy to it.
- [CURRENCY] — Currency label (default: "sun coins"). A fictional in-game currency name, never real money.
- [CROPS] — Three crop names (default: "Carrot, Turnip, Strawberry"). Exactly three comma-separated invented or generic crop names in shop order; give each an original code-drawn appearance.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/cozy-isometric-farm-game in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Parchment `#F6EFD8` — Page background and quiet outer negative space
- Cream `#FFF9EA` — Panels, dialogs, and primary text on dark green
- Forest Ink `#304032` — Primary text, outlines, and dark icon strokes
- Pine `#2F5D50` — Header accents, primary buttons, and selected tools
- Moss `#6E9B61` — Grass tiles, healthy foliage, and success states
- New Leaf `#A8C686` — Grass highlights and young crop leaves
- Earth `#9A6248` — Untilled soil edges, fences, and wooden panels
- Furrow `#6F4336` — Dry tilled soil and deep contact shadows
- Brook `#78B7C2` — Water tool, droplets, river, and watered-soil glints
- Sunbeam `#F3C969` — Sun, currency, ripe-crop sparkles, and harvest bursts
- Apricot `#D9825B` — Warm accents, dusk wash, and selected secondary details
- Blue Hour `#27344B` — Night overlay and darkened scenery during the day transition

### Typography
- Display: brand, farm name, day heading, and dialog titles; 700 weight, tight -0.02em tracking: Fraunces (OFL), weights 600/700
- Interface: buttons, resources, crop names, prices, instructions, and notifications; 400–800 weights: Nunito Sans (OFL), weights 400/600/700/800

### Layout & motion
- Spacing: Use a 4px base unit. Page gutters are 24px desktop and 12px mobile; panel padding is 18px desktop and 14px mobile; grid gaps are 16px; control gaps are 8px. Keep all touch targets at least 44×44px and the main tool buttons at least 52px tall.
- Radius: Large panels 24px, resource pills 999px, buttons and seed cards 14px, dialogs 28px, and SVG scenery joins rounded. Use 2px Forest Ink outlines at 18–28% opacity rather than heavy black strokes; shadows are soft olive-brown, never neon.
- Motion: Hovering or keyboard-focusing a legal tile raises its crop and highlight by 3px over 120ms; the focused diamond receives a 3px Cream and Pine double outline. Illegal actions use one restrained 180ms horizontal nudge and a text reason.
- Motion: Planting scales the seed mound from 0.7 to 1 with a 220ms ease-out. Watering drops three SVG droplets for 450ms and darkens the soil immediately. Harvesting lifts the crop 16px, fades it over 300ms, and releases six small leaf-and-coin shapes for 600ms.
- Motion: Buying a seed pulses the relevant inventory count for 240ms and briefly displays a '-4 sun coins' style delta using the actual price and CURRENCY value. Currency and inventory totals update without animated counting delays.
- Motion: End day runs a single 1400ms sequence: 0–550ms Apricot dusk wash, 550–900ms Blue Hour night wash with three small stars, then 900–1400ms return to morning. Advance the reducer once at the night midpoint and announce the new day after the transition.
- Motion: Two small clouds drift no more than 24px over 18 seconds and ready crops gently bob by 2px on a staggered 2.8-second loop. Disable clouds, bobbing, particles, nudges, and the long day transition under prefers-reduced-motion; retain immediate state and color changes.
- Imagery: Create every visual from original inline SVG and CSS: rounded diamond soil tiles, simple geometric crops at four growth stages, two generic round-canopy trees, a short fence, rounded hills, two clouds, a narrow river ribbon, tiny stones, and grass marks. Use a fixed 2:1 isometric projection, layered SVG shading, sparse hand-drawn-looking dashes, and no downloaded sprites, raster textures, people, animals, mascots, logos, or recognizable game assets. Adapt crop colors and distant decorative scenery to CROPS and SETTING while retaining the palette roles, composition, and exact field geometry.

## Pages & Sections
### Playable farm (`index.html`)
1. **Game shell and compact header** — Set the document title to [BRAND] and use a simple original two-leaf SVG favicon. The header shows a small Sprout Lucide icon, [BRAND] in Fraunces 700 at 26px, and [FARM_NAME] as a 13px subtitle. Default header copy is 'Mossy Acres' and 'Brindlebrook Farm'. On the right show three compact status pills: 'Day 1 · Morning', a sun symbol with '30 sun coins', and a check icon with 'Saved on this device'. Add icon-plus-text buttons for 'How to play' and 'New game'. Use no marketing navigation or account controls.
   Layout: The shell fills the viewport with Parchment. Header height is 72px on desktop with 24px horizontal padding and a bottom 1px Forest Ink/10% line. Below it, use a three-column grid of 240px / minmax(480px, 1fr) / 276px with 16px gaps, max-width 1440px, centered. The center column contains the board first, then the toolbelt. Left and right rails align to the board top. At 1440×900, the header, complete board, tools, day card, and shop must all be visible without clipping. At 390×844 use a 56px header with the brand at 20px, farm subtitle hidden, two-line Day and currency pills, and only icons for help and reset with accessible labels. Main columns become one; board is first, toolbelt second, day card third, and seed/shop content fourth.
   Motion: On initial load, fade and rise the header, board, and rails by 8px over 350ms with 60ms stagger. Do not delay pointer interaction. Reduced motion renders everything immediately.
2. **Isometric farm board** — The board is the visual anchor. Above it place the small label 'YOUR FIELD' and the dynamic instruction 'Choose a tool, then choose a tile.' Inside the scene render exactly 36 interactive tiles in six rows and six columns. Use a responsive SVG viewBox of 0 0 640 430. For zero-based row r and column c, set each tile center to x=320+(c-r)*42 and y=102+(r+c)*21; diamond half-width is 42 and half-height is 21. Paint in ascending r+c order so crops overlap correctly. Leave room above the rear tiles for hills and trees and below the front tiles for a soft ground shadow. Initial state is Day 1 with 30 CURRENCY; all tiles are grass except (r1,c1) crop 0 at progress 2, ready and dry, (r1,c2) crop 0 at progress 1 and watered, (r2,c1) crop 1 at progress 1 and dry, (r2,c2) crop 2 at progress 2 and watered, and (r3,c2) empty tilled soil. Start with seed inventory 2 / 1 / 0 in shop order. These examples make every major visual state discoverable while leaving 30 grass tiles to till.
   Layout: The scene sits in a Cream 24px-radius panel with a subtle 0 18px 50px #30403214 shadow and occupies the full center width. Desktop SVG height is clamp(390px, 51vh, 500px); toolbar and field label sit above it with 16px padding. Grass diamonds alternate Moss and a 4% lighter tint, with tiny original grass strokes. Tilled tiles use Furrow with three curved rows; watered tiles darken by 16% and gain two Brook glints. Crops have four original SVG stages: seed mound at progress 0, two-leaf sprout when progress/growDays is greater than 0 and below 0.5, fuller leafy plant when that ratio is at least 0.5 but progress is below growDays, and ripe produce with a tiny Sunbeam sparkle when progress equals growDays. Every tile is a keyboard-focusable SVG group with role=button, an accessible name such as 'Row 2, column 2: Carrot, ready to harvest', and Enter/Space activation. On mobile the panel radius is 18px and SVG height is 330px; preserve the full viewBox with meet scaling and never crop or horizontally scroll the field.
   Motion: Legal target highlighting follows the design motion rules. Ready crops have a very small bob and one sparkle; watered soil receives a one-time droplet animation after the Water action. Keep all SVG decorative elements pointer-events:none so tile hit areas remain reliable on touch.
3. **Toolbelt and tile feedback** — Provide four persistent tool buttons in this order: 'Till' with Shovel, 'Plant' with Sprout, 'Water' with Droplets, and 'Harvest' with Hand. The default selected tool is Till and the default selected seed is crop 0. Directly under the tools show a contextual line: Till='Turn grass into soft soil.'; Plant='Choose a seed, then plant in tilled soil.'; Water='Water crops so they grow overnight.'; Harvest='Gather ripe crops for sun coins.' Use CURRENCY in place of the default currency label. Below that line, a compact inspector reports the last focused or selected tile, initially 'Row 2, column 2 · Carrot · Ready to harvest', plus the most useful next action. Invalid actions never spend resources: explain 'Only grass can be tilled.', 'Till this tile before planting.', 'This crop is already watered.', 'This crop is still growing.', or 'Choose a seed with stock.' as appropriate.
   Layout: Use a Cream panel directly below the board with a four-equal-column grid and 8px gaps. Each button has a 22px icon above a 13px label and is at least 56px tall. Selected tool is Pine with Cream text; unselected tools are transparent with Forest Ink and a Forest Ink/12% border. The inspector is a separate 44px-high strip with a small soil swatch and ellipsizes only the secondary hint, never the tile state. On mobile the toolbelt follows the board and becomes sticky at the bottom with safe-area padding when the player scrolls to lower panels; it must not cover the board or any dialog controls.
   Motion: Tool selection crossfades color over 120ms and moves a small underline rather than scaling the whole button. Valid tile actions emit their specific plant, water, till-dust, or harvest effect; invalid actions show the reason in an aria-live polite toast for 2.5 seconds without stealing focus.
4. **Day card and concise field guide** — The left rail's main card is titled 'Today on the farm'. Default introductory copy is 'A fresh morning in a sheltered valley beside a slow river.' Derive that sentence from SETTING when values change. Show three numbered instructions: '1. Till open grass.', '2. Plant from your seed pouch.', '3. Water before ending the day.' Below them place a primary 'End day' button with a Sunset icon and the note 'Watered crops grow overnight.' Add a small two-row 'Field notes' card with '6 × 6 plots', '4 tools', and 'Progress saved locally'. The day cycle is player-controlled, not a real-time countdown. End day changes Morning to dusk and night, advances the day number once, adds one progress point only to non-ready watered crops, clears every watered flag, and returns to Morning. Ripe crops remain ripe and unwatered crops do not grow.
   Layout: Use a Cream 24px panel with a small Sunbeam sunrise illustration drawn in SVG, the day title at 24px, and instructions at 14px with 8px line gaps. The End day button spans the card and is 48px tall. Field notes sits 16px below with subdued values and no extra marketing sections. On mobile this card appears after the toolbelt; its three instructions collapse into one always-visible summary line and can be expanded with a 'How to play' text button. End day remains visible without opening the help dialog.
   Motion: Run the exact 1400ms dusk/night/morning lighting sequence from the design rules. Disable game input only during this transition. At the midpoint show new growth immediately, then announce 'Day 2 begins. 2 crops grew.' with the actual count. Save after the state advance and never repeatedly increment from a double click.
5. **Seed pouch and tiny shop** — The right rail begins with 'Seed pouch', three selectable seed chips, and their stock counts. Defaults are Carrot ×2, Turnip ×1, and Strawberry ×0. Selecting a stocked seed also selects Plant. The shop card below is titled 'Seed shop' with the subtitle 'A little stock for tomorrow.' Each of three rows shows an original crop thumbnail, name, grow time, buy price, sell value, and a 'Buy 1' button. Default crop 0 is Carrot: 2 days, costs 4 sun coins, harvests for 9. Crop 1 is Turnip: 3 days, costs 6, harvests for 14. Crop 2 is Strawberry: 4 days, costs 9, harvests for 22. Parse CROPS in this same order and use CURRENCY for every price label. Buying always decrements coins by the exact price and adds one seed; insufficient funds disables the button and shows 'Not enough sun coins yet.' Harvesting converts one ripe crop into its sell value and leaves an empty tilled tile. Planting consumes exactly one selected seed. There are no random prices, real purchases, or checkout forms.
   Layout: Seed chips are three full-width 48px rows with thumbnail left, name and count center, and selection ring. Shop rows are 82px tall with 44px thumbnails and compact 12px metadata; Buy 1 buttons are 64px wide and 40px tall with 44px invisible hit areas. Desktop shop content stays inside the right rail. On mobile replace the rail shop card with a 'Seed pouch & shop' button showing total stock; tapping it opens a bottom sheet with the same live inventory and three shop rows. The sheet is at most 82vh, has a visible Close button, focus trap, Escape dismissal, and returns focus to its trigger.
   Motion: Purchase and harvest feedback follows the resource-delta and harvest rules. The mobile sheet translates up 20px while fading in over 180ms and exits in 120ms; reduced motion uses an immediate appear/disappear. Never animate prices or disable a purchase while decorative motion completes.
6. **Help, saving, reset, and footer** — The How to play dialog is titled 'A little routine' and lists exactly: 'Till a grass tile.', 'Pick a seed and plant it in soil.', 'Water it, then end the day.', 'Harvest ripe crops and reinvest in seeds.' Add 'Mouse or touch: choose a tool and tap a tile. Keyboard: Tab to a tile and press Enter or Space.' Close with 'Let's grow'. Persist version, day, phase, coins, all 36 tile states, crop progress, watered flags, inventory, selected tool, and selected seed under a versioned key derived from BRAND_SLUG after every successful action. Restore and validate on load; if data is corrupt, safely create the specified initial state and show 'A fresh farm is ready.' The New game confirmation says 'Start a new farm?' and 'This clears this farm's crops, coins, and day count on this device.' Buttons are 'Keep farming' and 'Start over'. The footer reads '[BRAND] · A quiet little farming game' on the left and 'Progress stays in this browser.' on the right, with the optional [CREDIT] link after it when provided.
   Layout: Dialogs center on desktop at 440px maximum width and become bottom sheets on mobile. Use a Forest Ink/35% backdrop, Cream surface, 28px radius, and clear close button. Footer is a quiet 52px-high flex row below the main grid with 12px text; on mobile it stacks and is reachable below the shop content. The saving indicator changes to 'Saving…' only while a synchronous state update is being committed, then returns to 'Saved on this device'; do not pretend to save to a server.
   Motion: Dialogs fade with a 10px rise over 160ms, trap focus, close on Escape, and restore trigger focus. Reset clears only this game's derived storage key, restores the exact initial board, and shows 'Welcome back to Day 1.' No confetti, full-screen celebration, or motion when reduced motion is requested.

## Assets
- image: No raster or downloaded artwork is needed. Draw the complete farm, crop stages, scenery, resource symbols, favicon, and decorative feedback as original inline SVG/CSS in the React components. State in ASSETS.md that all game artwork is original code-drawn SVG and no external image files are used.
- icon: Use tree-shaken lucide-react icons for Sprout, Shovel, Droplets, Hand, Sunset, Sun, Check, HelpCircle, RotateCcw, X, Coins, and ShoppingBasket only. Do not use Lucide artwork as crop sprites. Record lucide-react, its package URL, author Lucide contributors, and ISC license in ASSETS.md.
- font: Self-host Fraunces 600/700 through @fontsource/fraunces and Nunito Sans 400/600/700/800 through @fontsource/nunito-sans. Record both package paths, Fontsource and upstream font authors, source package URLs, and OFL licenses in ASSETS.md; no font CDN or manually downloaded commercial font.

## Don'ts
- Do not add a backend, serverless functions, API routes, database, authentication, analytics, remote forms, third-party APIs, multiplayer, real payments, or network-dependent game state. All gameplay and saving must work from static files offline after loading.
- Do not change the prescribed Vite/React/TypeScript stack, add a game engine, use Unity/Unreal/Godot, or introduce Three.js for this 2D SVG isometric game. Build with npm run build to dist/ using base './', minification, no source maps, no src/ copied to dist/, and total output below 20 MB.
- Do not hotlink or download stock photos, sprites, textures, audio, placeholder services, scripts, stylesheets, or fonts. Everything must be local; use original inline SVG/CSS art, bundled Lucide icons, and Fontsource packages only.
- Do not load fonts from Google Fonts, Adobe Fonts, or any CDN, and do not use commercial fonts or license-restricted libraries, including Aceternity UI source, Tailwind Plus source, purchased templates, packages without licenses, or CC BY-NC/CC BY-SA assets.
- Do not use existing farming-game or other brand names, logos, mascots, character designs, signature scenery, recognizable sprites, crop illustrations, icons, exact interface layouts, dialogue, slogans, or copied copy. Do not depict real people, branded products, or anime/game characters.
- Do not make the first screen a marketing hero, landing page, title-only splash, or instructions wall. The complete playable 6×6 field and its controls must be immediately visible and interactive on desktop and mobile.
- Do not enlarge the field, add levels, random events, combat, energy timers, loot boxes, real-time countdown pressure, automatic day advancement, or a backend economy. Preserve the specified 6×6 grid, four tools, three crops, prices, player-controlled day cycle, and deterministic growth rules.
- Do not create additional routes or bare-directory links. Keep the experience in index.html with dialogs and a mobile bottom sheet; any internal link must point to ./index.html or an in-page anchor, and the optional credit may be external.
- Do not rely on hover, right-click, drag, or pointer-only SVG targets. Every action must work with mouse, single tap, and keyboard; maintain visible focus, 44px minimum targets, accessible tile names, focus-managed dialogs, and aria-live feedback.
- Do not allow negative coins or inventory, double-charge repeated taps, grow unwatered crops, advance a day more than once per transition, or lose progress on reload. Validate localStorage and confine reset to this game's own versioned key.
- Do not hard-code BRAND, FARM_NAME, SETTING, CURRENCY, CROPS, or their default-specific sentences outside src/content.ts. Rewrite interface and decorative details when variables change, and never mention VibeFather in the site except the optional [CREDIT] link.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemap code, keyword-stuffed headings, or dates from the real calendar. A plain [BRAND] document title, original favicon, and in-game day counter are sufficient.
- Do not ignore prefers-reduced-motion, crop the SVG field on mobile, cause horizontal overflow, obscure controls with sticky UI, or ship console errors. Verify the real game at 1440×900 and 390×844 with touch emulation and a production build.

---
— Prompt by VibeFather · https://vibefather.ai/t/cozy-isometric-farm-game · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.