Card Clash

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.

Recreate "Card Clash" as a fast, readable 2D turn-based card battler in a dark neon arena. Use an orthographic 2D presentation with a full-screen canvas and a DOM HUD layered over it; cards should look like flat 3D planes but render visually as textured 2D cards. The background is a deep navy/black vertical gradient with subtle darker blue arena panels. Near the top center, show the enemy as a large pink/magenta glowing ring around a dark core with the label ENEMY beneath it. Near the lower center, show the player as a cyan glowing ring around a dark core with the label YOU above/near the hand. There are no illustrated character bodies; the rings and labels are the fighter avatars.

Begin on a full-screen translucent menu overlay titled CARD CLASH. Subtitle: "Pick your fighter — each has a normal move + a special ability." Show four selectable fighter panels in a grid: Ninja, Knight, Archer, and Wizard. Each panel lists its normal and special move, their energy costs, and descriptions. Highlight the selected panel with a cyan border. Provide Battle and Random Fighter buttons; Battle is disabled until a fighter is selected. Include the hint that the special card is Exhaust and can be used once per battle. Random Fighter selects one of the four and starts immediately. Once battle starts, hide the menu.

The player and enemy each start at 60/60 HP, with 0 Block and 0 Poison. At the beginning of a fighter's turn, reset that fighter's Block to zero, apply poison damage if present, decrease poison by 1, refill their hand to 5 cards from a shuffled draw pile (recycling and shuffling discard when needed), and restore 3 Energy. The player starts the first turn. The player's hand is displayed along the bottom center as a row of large cards, slightly fanned/rotated. Each card has a rounded border, a cyan circular cost gem in the upper-left, title, divider, description, and an ATTACK pink pill or SKILL cyan pill near the bottom. Attack cards use dark purple/magenta gradients; skill cards use dark blue gradients. Cards that cost more than current Energy are visibly dimmed. Hovering a card raises it, slightly enlarges it, and brings it forward. Clicking an affordable card spends its Energy, removes it from the hand, applies its effect, and discards it unless it is Exhaust. Clicking a card when there is insufficient Energy does nothing except show a "Not enough energy." message.

The neutral/base cards are: Strike (cost 1, deal 6 damage), Heavy Blow (2, deal 12 damage), Guard (1, gain 6 Block), Fortify (2, gain 12 Block), Quick Jab (0, deal 3 damage), Second Wind (2, heal 8), and Poison Cut (1, deal 4 damage and apply 3 Poison). The actual starter deck should contain four copies of the chosen character's normal move, one copy of its special, two Strikes, two Guards, one Quick Jab, one Heavy Blow, and one Poison Cut. The chosen fighter's cards are: Ninja normal Shuriken (1, deal 7 damage), special Smoke Bomb (2, gain 12 Block and draw 1, Exhaust); Knight normal Steel Slash (1, deal 6 damage and gain 2 Block), special Shield Bash (2, deal 10 damage and gain 10 Block, Exhaust); Archer normal Arrow Shot (1, deal 8 damage), special Rain of Arrows (2, deal 4 damage three times, Exhaust); Wizard normal Arc Bolt (1, deal 7 damage and apply 1 Poison), special Fireball (2, deal 14 damage and apply 2 Poison, Exhaust). The enemy randomly chooses a character different from the player's when possible and uses the same deck structure.

Damage first consumes the target's Block, then reduces HP by the remainder. Block does not carry into the fighter's next turn. Poison ticks at the start of that character's turn for the current poison amount, then poison decreases by one. End the player turn with an End Turn button (Space is also a shortcut). Discard the remaining player hand, switch to the enemy, and have the simple AI take one or two affordable actions, with a slight preference for attacks. The enemy spends Energy, removes played cards from its hand, applies effects to the player, then discards its hand and starts the player's next turn. Disable player card interaction while the enemy acts. Win when enemy HP reaches 0; lose when player HP reaches 0. On game over, stop the battle, show the appropriate win/lose message in the log, and make the main button read Game Over. Press R or click Restart (R) to return to the fighter-selection menu.

The battle HUD is a set of translucent near-black rounded panels with thin blue-violet borders. At upper left show YOU, HP as a numeric value and segmented-looking bar/text, Block, Poison, and Energy. At upper right show ENEMY with HP, Block, and Poison. Place End Turn and Restart (R) controls in a right-side panel. Below the stats show a translucent message log with the most recent few events, including battle start, whose turn it is, cards played, damage and blocked amounts, healing, poison, and win/lose status. At the bottom-left show help text: click a card if affordable, End Turn to let the enemy act, Block reduces damage, and Poison ticks at the start of a turn. Keep the interface responsive, with the hand and panels adapting to viewport size.

Use subtle Tone.js-style synthesized audio feedback: short notes for playing cards, block, healing, poison, and turn events; noisy hit sounds for damage; ascending notes on victory and descending notes on defeat. Maintain the restrained visual style: navy background, cyan player accents, pink enemy/attack accents, pale blue-white text, translucent glassy UI panels, and crisp readable typography.