Word Splash

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 responsive browser spelling quiz titled “Word Splash.” It is a single-screen educational arcade game with a bold, friendly cartoon UI. Use a sky-blue upper background fading into a light green lower background, and center a large cream-colored game container with a dark navy thick border, rounded corners, and a soft offset shadow. Use a dark navy ink color throughout, with pale yellow, mint/teal, green, pink, and gold accents; use a heavy rounded/system sans-serif type style.

The header should show the large title “Word Splash” and subtitle “Guess the spelling from the meaning.” On the right, show difficulty controls labeled Level with three buttons: Easy, Medium, and Hard; Easy is initially active and pink, while the others are white. Also show a bordered score badge reading “⭐ 0 pts” and a lives badge initially reading “❤️❤️❤️ 3 lives.”

The core play area has two bordered rounded panels. The main clue panel displays the label “SPELL THIS WORD,” a large definition, a first-letter hint followed by “• One word,” a text input with placeholder “Type the word…,” a green “Check it!” submit button, and a feedback message area. The player must type the correctly spelled word that matches the definition and submit it. Trim and lowercase the entered answer for checking, but accept only an exact match to the target spelling. If the input is empty, show “Type a spelling first!” in pink/red and do not advance. Correct answers show “Correct!”, add 10 points, and trigger a brief colorful falling confetti celebration and cheerful sound.

Use exactly these word banks, six words per difficulty, with the definitions and first-letter hints shown to the player:
Easy: brave — “Not afraid to face danger or something difficult.” — “Starts with B”; happy — “Feeling good, cheerful, and full of joy.” — “Starts with H”; quiet — “Making very little or no sound.” — “Starts with Q”; journey — “A trip from one place to another.” — “Starts with J”; sparkle — “To shine with tiny flashes of light.” — “Starts with S”; delicious — “Having a very pleasant taste.” — “Starts with D”.
Medium: ancient — “Very old; from a long time ago.” — “Starts with A”; curious — “Wanting to know or learn something.” — “Starts with C”; whisper — “To speak very softly and quietly.” — “Starts with W”; gigantic — “Extremely large or huge.” — “Starts with G”; separate — “To move apart or keep things apart.” — “Starts with S”; necessary — “Needed or required; not optional.” — “Starts with N”.
Hard: conscience — “The inner feeling that helps you know right from wrong.” — “Starts with C”; mischievous — “Playfully causing trouble or being naughty.” — “Starts with M”; rhythm — “A repeated pattern of beats or sounds.” — “Starts with R”; guarantee — “A promise that something will happen or work.” — “Starts with G”; exaggerate — “To make something seem bigger or more important than it is.” — “Starts with E”; embarrass — “To make someone feel shy or awkward.” — “Starts with E”.

The side panel should be pale mint and show an uppercase progress label such as “EASY · Round 1 of 6,” with a navy-outlined horizontal meter whose gold fill starts at 0% and advances according to the current round. Below it list these rules: “Correct spelling = +10 points,” “Miss it = the pit opens!”, and “Use the first-letter hint if stuck.” At the bottom show a dark gray-blue rounded crocodile pit containing “🐊 🐊 🐊” and “THE PIT,” with a subtle striped texture and splash marks. On narrow/mobile screens, switch to one column, put the side/progress panel above the clue, hide the rules and pit, make the clue vertically scrollable, put the definition in a pale-yellow inset card, and stack the input and button full width.

There are 6 rounds for the selected difficulty. Each round starts unlocked with the next definition, clears the answer and feedback, focuses the input, and updates the round label and progress meter. On a wrong nonempty answer show “Not quite…”, subtract one life (down to zero), and open a centered dark translucent overlay. The wrong-answer overlay should animate three cartoon crocodiles eating with water splashes, play a comic munch sound, then animate a burp and play a descending comic sound. For one remaining life, title it “🐊 OH NO!” and explain: “The word was “[target]”. You lost a life — [lives] left.” The button should say “Climb out and continue” unless this was the final round. At zero lives title it “🐊 GAME OVER!”, explain “The crocodiles got you! Your final score was [score] points.” and make the button say “Try again.” Do not depict realistic violence; the footer should reinforce the tone with “Big cheer for correct answers • Crocodiles are cartoon-only.”

For a correct answer, use a centered cream overlay card with navy border/shadow, title “🎉 HOORAY!”, and text `Correct! “[target]” is spelled perfectly. You earned 10 points!`; the button says “Next word,” or “See your score” on the last round. Advance only after the overlay button is pressed. After all six rounds, show a finish overlay titled “🏆 FINISH LINE!” with “You scored [score] out of 60 points.” and a “Play again” button. Restarting resets round to 1, score to 0, lives to 3, and the selected difficulty remains available. Selecting any difficulty at any time resets that difficulty to round 1 with 0 points and 3 lives. Include polished pressed button states, rounded heavy borders, animated confetti for correct answers, and crocodile eating/burping animations for wrong answers.