# Arcane Depths ## About This App A roguelike deck-building card game with procedural dungeons, strategic combat, and permadeath progression ## Specification # Arcane Depths: A Roguelike Card Battler Create an immersive, single-page roguelike deck-building card game inspired by Magic: The Gathering, with procedurally generated encounters, strategic card combat, and permadeath progression. The game should feel like a dark fantasy dungeon crawl where every decision matters. ## App Type **React Web App** — Best suited for complex state management (deck building, combat phases, health tracking, procedural map generation) with rich interactive UI elements, card animations, and layered game screens. ## Visual Theme & Styling - **Dark fantasy aesthetic**: Deep blacks (#0a0a0f), rich purples (#2d1b4e), midnight blues (#1a1a3e), with glowing accent colors — gold (#d4af37) for legendary, crimson (#8b0000) for damage, emerald (#00c853) for healing, electric blue (#00bcd4) for mana. - **Card design**: Cards should have ornate borders with a parchment-like inner texture. Each card type (Attack, Defense, Spell, Curse) has a distinct colored gem/border accent. - **Typography**: Use a fantasy-style serif font for card names and headers (e.g., Google Fonts "Cinzel" or "MedievalSharp"), with a clean sans-serif for stats and descriptions. - **Animations**: Cards should have hover effects (slight scale + glow), drag-to-play feel (or click-to-select + click-to-play), damage shake effects on portraits, and a satisfying "card draw" slide animation. - **Particle effects**: Subtle CSS particle/glow effects around mana crystals and when powerful cards are played. ## Game Structure & Screens ### 1. Title Screen - Dramatic game logo "ARCANE DEPTHS" with a glowing/pulsing animation. - A shadowy dungeon background (can use a dark gradient with CSS patterns or a generated image via Retrodiffusion API for pixel art dungeon entrance). - Buttons: **"Begin Descent"** (new run), **"Lore Codex"** (card collection/bestiary), **"Graveyard"** (past run history). - Display best run depth achieved (persisted via localStorage or backend API). ### 2. Class/Hero Selection Screen - Choose from 3 hero classes, each with a unique starter deck and passive ability: - **Shadowblade** (rogue — fast attacks, poison, card draw) — purple theme - **Ironward** (warrior — heavy hits, armor, retaliation) — red/gold theme - **Voidcaller** (mage — powerful spells, mana manipulation, AoE) — blue theme - Each hero displays: pixel art portrait (generated via Retrodiffusion API as a sprite), HP, starting mana, passive ability description, and a preview of their 10-card starter deck. - Hovering over a hero shows their starter cards fanned out. ### 3. Dungeon Map Screen (Roguelike Progression) - A procedurally generated branching path map (like Slay the Spire), displayed vertically with the player progressing upward through floors. - **Node types** (shown as distinct icons): - ⚔️ **Combat** — standard enemy encounter - 💀 **Elite** — harder enemy, better rewards - 🏪 **Merchant** — buy/remove cards, buy relics - ⛺ **Rest** — heal HP or upgrade a card - ❓ **Mystery** — random event (could be good or bad) - 👑 **Boss** — end-of-act boss fight - Each act has 12-15 nodes across 3-4 branching paths. The game has 3 acts, each with increasing difficulty and a unique boss. - Current player position is highlighted with a glowing marker. Completed nodes are dimmed. Available next nodes pulse gently. ### 4. Combat Screen (Core Gameplay) This is the heart of the game. A turn-based card battle system: #### Layout - **Top section**: Enemy area — enemy portrait (pixel art via Retrodiffusion), enemy name, HP bar, status effects, and **intent indicator** (shows what the enemy will do next turn: attack for X damage, defend, buff, etc.). - **Middle section**: Battlefield/action area — played cards animate here, damage numbers float up, visual effects for spells. - **Bottom section**: Player's hand of cards fanned out, with the player's HP bar, mana crystals, and deck/discard pile counters on either side. #### Combat Mechanics - **Mana System**: Player starts each turn with their max mana (starts at 3, can increase). Each card costs mana to play. - **Card Types**: - **Attack** (red border) — Deal damage. Examples: "Slash (1 mana, 6 damage)", "Fireball (3 mana, 12 damage to all enemies)" - **Defend** (blue border) — Gain block/armor that absorbs damage this turn. Example: "Shield Wall (1 mana, 5 block)" - **Skill** (green border) — Utility effects. Draw cards, gain mana, apply debuffs. Example: "Dark Ritual (0 mana, gain 2 mana this turn)" - **Power** (gold border) — Persistent effects that last the whole combat. Example: "Thorns (2 mana, deal 3 damage to attackers each turn)" - **Curse** (purple/black border) — Bad cards that clog your deck (acquired from events or enemies). Example: "Doubt (unplayable, takes up hand space)" - **Turn flow**: Draw 5 cards → Play cards (spend mana) → Click "End Turn" → Enemy acts → Repeat. - **Status effects**: Poison (damage over time), Weakness (deal less damage), Vulnerable (take more damage), Strength (deal more damage), Regeneration, Frozen (skip turn). - **Enemy AI**: Each enemy type has a defined pattern of intents (attack, defend, buff, debuff) shown to the player so they can strategize. #### Card Interactions - Click a card to select it (it rises up and glows). - Click the enemy to target attack cards, or click yourself for defense/buff cards. AoE cards auto-target. - Cards slide from hand to the play area with animation, then the effect resolves with visual feedback (damage numbers, screen shake for big hits, flash effects). - Discard pile and draw pile are clickable to review their contents. ### 5. Reward Screen (Post-Combat) - After winning combat, the player is offered: - **Card reward**: Choose 1 of 3 randomly generated cards to add to your deck (or skip). Cards are displayed large with full art and stats. - **Gold**: Currency for the merchant. - **Relic** (from elites/bosses): Powerful passive items. Display as icons in a relic bar below the HP bar. Examples: "Burning Ring (deal 1 damage to all enemies at start of turn)", "Mana Crystal (+1 max mana)". ### 6. Merchant Screen - A cozy shop UI with a pixel art merchant character. - **Buy cards**: 5 random cards for sale at varying gold costs. - **Buy relics**: 2 random relics, expensive. - **Remove a card**: Pay gold to permanently remove a card from your deck (critical for deck thinning strategy). - **Buy potions**: One-time use items (heal 20 HP, deal 15 damage, draw 3 cards). ### 7. Rest Site Screen - A campfire scene (atmospheric CSS gradient/glow effect). - Two choices: **Rest** (heal 30% of max HP) or **Upgrade** (select a card from your deck to upgrade — upgraded cards have enhanced stats and a shiny border). ### 8. Mystery Event Screen - A narrative text box with atmospheric description. - 2-3 choices with hidden or partially revealed outcomes. Examples: - "You find a glowing altar..." → Sacrifice 10 HP to gain a random relic, OR pray for a blessing (random buff), OR leave. - "A wounded traveler blocks your path..." → Help them (lose gold, gain card), rob them (gain gold, gain a Curse card), ignore them. ### 9. Game Over / Victory Screen - **Death**: Dramatic screen with stats — floors cleared, cards played, damage dealt, enemies slain. "Your soul joins the depths..." Save run to Graveyard. - **Victory**: Celebratory screen with full run stats and a "score" calculated from floors, speed, HP remaining, etc. - **Leaderboard**: Use backend API to save and display global high scores. ## Card Generation System - Use **Retrodiffusion API** to generate pixel art for card illustrations (e.g., "dark fantasy sword slash pixel art", "fire spell explosion pixel art", "skeleton warrior pixel art"). - Generate 40-50 unique cards across all types, with balanced mana costs and effects. - Cards have: Name, Mana Cost, Type, Art, Description, Effect values. All defined in a card database object. ## Enemy Design - Use **Retrodiffusion API** to generate pixel art enemy sprites. - **Act 1 enemies**: Slimes, Goblins, Skeletons, Cultists. Boss: "The Warden" (heavy armor, retaliation damage). - **Act 2 enemies**: Dark Knights, Wraiths, Mushroom Beasts, Cursed Monks. Boss: "The Void Serpent" (poison, multi-attack). - **Act 3 enemies**: Demons, Liches, Corrupted Angels, Time Weavers. Boss: "The Arcane Heart" (copies player cards, adaptive AI). - Each enemy has defined HP, attack patterns (cycling through a list of intents), and possible status effect attacks. ## Key UI Elements ### Player HUD (Always Visible During Gameplay) - Hero portrait (small, top-left) - HP bar (red, with current/max numbers) - Mana crystals (glowing blue orbs, filled = available, empty = spent) - Gold counter (coin icon + number) - Potion slots (up to 3, clickable to use) - Relic bar (row of small icons, hoverable for tooltip descriptions) - Current floor/act indicator - Deck count, Discard count ### Card Component - Rounded rectangle with ornate border (color-coded by type) - Card art area (top 60%) - Card name (fantasy font, centered) - Mana cost (gem in top-left corner) - Type badge (small label below name) - Description text (bottom area, clean font) - Hover state: scale 1.15, glow effect, z-index bump so it overlaps neighbors - Upgraded cards: Sparkle effect on border, green "+" next to enhanced values ### Tooltips - Hovering over any keyword (Poison, Vulnerable, Block, etc.) shows a tooltip explaining the mechanic. Essential for learnability. ## Responsive Design - Primarily designed for desktop (landscape), but should gracefully adapt to tablet. - On mobile, cards could be displayed in a scrollable row with tap-to-select, tap-target-to-play. - Map should scroll vertically on all screen sizes. ## Persistence - Use **localStorage** for current run state (so refreshing doesn't lose progress). - Use **backend API** for leaderboard scores and run history (Graveyard). - Save unlocked cards/classes for meta-progression between runs. ## Audio & Feedback (CSS-based) - Since we can't use audio easily, compensate with strong visual feedback: - Screen shake on big damage - Flash overlays (red for damage taken, gold for level-up moments) - Floating damage numbers with CSS animations - Card play "whoosh" effect (fast translate + opacity) - Enemy death: fade out + particle burst ## Footer - Small, unobtrusive footer: `Remix on Berrry` with a subtle glow effect matching the game theme. ## About Berrry Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain. **Visit**: https://berrry.app Transform your social media ideas into real web applications today.