Made with Nano Banana 2 Lite · CC0 · 8 Oct 2026

Flat colour

Generated from: a scene from a small video game about: ARCANE FRONTIER: a complete ORIGINAL browser-based 2.5D real-time 1v1 card battle game, distinct from Clash Royale. TECH: TypeScript + Three.js + Vite + HTML/CSS. Use WebGPU when available with WebGL2 fallback. Runs in a web browser. ARENA: Real 3D battlefield viewed from an elevated 2.5D camera. Two lanes, a central bridge, deployment zones, and 3 towers per player: left, right, and central core. Original fantasy + futuristic energy visual style: crystals, stone, glowing energy, particles, lighting, shadows, VFX and animations. All characters, cards, abilities, models, UI, sounds, arena and branding must be original. GAMEPLAY: Player vs AI real-time battle. Arc Energy resource, maximum 10, automatic regeneration. 8-card deck with a 4-card hand. Cards are dragged or tapped into the arena and consume Arc Energy. CARDS: At least 24 original cards total — 12 troops, 6 spells, 6 buildings. Troops move, target enemies, attack, take damage and die. Support melee, ranged, projectiles, area damage, healing, shields and status effects such as slow, stun, burn and freeze. Buildings can attack or support. Spells create original area or temporary effects. Towers automatically target and attack enemies. AI: Easy, Normal and Hard AI. The AI must use the same rules as the player and must NOT cheat. It evaluates threats, energy, cards, lanes, defense and attack opportunities. UI: Original polished interface: Main Menu, Play, Practice, Deck Builder, Collection, Arena, Profile and Settings. Battle HUD shows timer, towers, Arc Energy and the 4-card hand. Support mouse, touch and pointer controls. Fully responsive. PROGRESSION: XP, fictional coins, card levels, upgrades, unlocks, rewards, and browser-local saving using localStorage. PERFORMANCE: Target 60 FPS. Use object pooling, optimize particles, shadows, geometry, AI and rendering. Add Low/Medium/High graphics settings. ARCHITECTURE: Keep game state separate from Three.js objects. Modular systems for rendering, battle, cards, AI, UI, input, saving, audio and assets. Prepare clean interfaces for future multiplayer, but do NOT create fake multiplayer. CRITICAL FIRST LOOP (build → run → test → fix): Open → Play → 3D arena → towers → Arc Energy → choose card → deploy troop → troop moves → troop attacks → tower defends → tower can be destroyed → victory/defeat screen. Then continue with all cards, AI, UI, progression, VFX, audio, optimization and polish., as an in-game screenshot in flat colour 2D shapes with a bright limited palette. Palette: sky blue #8ecae6, grass #3a7d44, player sunflower #ffb703, threat red #d62828, accent white #fdfcdc. Everything is original: never draw or resemble characters, places or logos from existing games, films or brands (no red-capped plumbers, no famous mascots), even when the idea names one. Keep the pictures honest: they promise what a small first version of this game, made in a game engine in a few days, can look like. Simple readable shapes, clear silhouettes, few flat materials, the in-game camera view. Never film stills, photoreal renders, AAA key art, detailed textures, cinematic lighting, or anything that looks like a big-studio game. No text, UI, HUD, logos or editor screens inside any image.