// The Drift - UI with Dialogue System, Zone Banners, HUD & Menus // Reads from player's stats-holder object // === CENTRAL ITEM DATABASE === // All items in the game - used by shop, inventory, and battle UI const ITEM_DATABASE = { // Healing items healingSalve: { id: 'healingSalve', shopId: 'healing_salve', name: 'Healing Salve', description: 'Restores 30 HP to one spirit', icon: '/cdn/sprite-ghibli-healing-potion-green-leaf-small-bottle-chibi-transparent.png', color: '#2ecc71', price: 50, category: 'healing', usableInBattle: true, usableOutOfBattle: true, action: 'heal', healAmount: 30, }, spiritTonic: { id: 'spiritTonic', shopId: 'spirit_tonic', name: 'Spirit Tonic', description: 'Restores 60 HP to one spirit', icon: '/cdn/sprite-ghibli-healing-potion-blue-glowing-medium-bottle-chibi-transparent.png', color: '#3498db', price: 120, category: 'healing', usableInBattle: true, usableOutOfBattle: true, action: 'heal', healAmount: 60, }, revivalEssence: { id: 'revivalEssence', shopId: 'revival_essence', name: 'Revival Essence', description: 'Revives a fainted spirit at 50% HP', icon: '/cdn/sprite-ghibli-revival-crystal-gold-sparkle-feather-chibi-transparent.png', color: '#b8860b', price: 300, category: 'healing', usableInBattle: true, usableOutOfBattle: true, action: 'revive', isRevive: true, }, // Bonding crystals bondingCrystal: { id: 'bondingCrystal', shopId: 'bonding_crystal', name: 'Bonding Crystal', description: 'Basic crystal for forming bonds', icon: '/cdn/sprite-ghibli-mystical-bonding-crystal-purple-teal-glow-chibi-transparent.png', color: '#9b59b6', price: 100, category: 'crystals', usableInBattle: true, usableOutOfBattle: false, action: 'capture', crystalTier: 'bonding', }, resonantCrystal: { id: 'resonantCrystal', shopId: 'resonant_crystal', name: 'Resonant Crystal', description: '+20% bond chance', icon: '/cdn/sprite-ghibli-mystical-bonding-crystal-blue-bright-glow-chibi-transparent.png', color: '#3498db', price: 350, category: 'crystals', usableInBattle: true, usableOutOfBattle: false, action: 'capture', crystalTier: 'resonant', }, harmonicCrystal: { id: 'harmonicCrystal', shopId: 'harmonic_crystal', name: 'Harmonic Crystal', description: '+35% bond chance', icon: '/cdn/sprite-ghibli-mystical-bonding-crystal-gold-radiant-glow-chibi-transparent.png', color: '#b8860b', price: 800, category: 'crystals', usableInBattle: true, usableOutOfBattle: false, action: 'capture', crystalTier: 'harmonic', }, }; // === SPIRIT PORTRAITS DATABASE (used by trade UI and battle UI) === const SPIRIT_PORTRAITS = { // Starter spirits (cute chibi style) Ember: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', Brook: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', Pebble: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-round-chibi-transparent.png', Zephyr: '/cdn/sprite-ghibli-cute-wind-spirit-green-white-feathery-chibi-transparent.png', Lumina: '/cdn/sprite-ghibli-cute-light-moth-spirit-gold-warm-glowing-chibi-transparent.png', Nyx: '/cdn/sprite-ghibli-cute-shadow-cat-spirit-purple-mysterious-chibi-transparent.png', // Advanced spirits (majestic/dramatic) Solara: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', Tideling: '/cdn/sprite-ghibli-graceful-water-seahorse-spirit-teal-flowing-fins-elegant-transparent.png', Terravox: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-majestic-transparent.png', Gale: '/cdn/sprite-ghibli-swift-wind-falcon-spirit-silver-sleek-elegant-transparent.png', Seraphine: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', Vesperon: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', Solienne: '/cdn/sprite-ghibli-primordial-goddess-solienne-platinum-blonde-hair-flowing-past-feet-white-flower-wreath-luminous-gold-eyes-white-radiant-petal-dress-golden-light-particles-divine-healing-aura-full-body-transparent.png', // BATCH 1 SPIRITS Cinderpup: '/cdn/sprite-ghibli-cute-flame-puppy-spirit-orange-ember-fluffy-small-chibi-transparent.png', Blazehound: '/cdn/sprite-ghibli-sleek-flame-hound-spirit-red-orange-fierce-elegant-transparent.png', Infernowolf: '/cdn/sprite-ghibli-majestic-inferno-wolf-spirit-black-red-flame-mane-fierce-dramatic-transparent.png', Droplet: '/cdn/sprite-ghibli-cute-water-droplet-spirit-blue-translucent-blob-chibi-transparent.png', Streamling: '/cdn/sprite-ghibli-elegant-water-serpent-spirit-flowing-blue-teal-graceful-transparent.png', Torrentis: '/cdn/sprite-ghibli-majestic-water-dragon-spirit-deep-blue-silver-scales-powerful-dramatic-transparent.png', Mudling: '/cdn/sprite-ghibli-cute-mud-blob-spirit-brown-earthy-round-chibi-transparent.png', Claywarden: '/cdn/sprite-ghibli-armored-clay-golem-spirit-terracotta-orange-stoic-guardian-transparent.png', Obsidianite: '/cdn/sprite-ghibli-majestic-obsidian-golem-spirit-black-volcanic-crystal-imposing-dramatic-transparent.png', Breezeling: '/cdn/sprite-ghibli-cute-wind-fairy-spirit-mint-green-wispy-small-chibi-transparent.png', Gustwing: '/cdn/sprite-ghibli-swift-wind-hawk-spirit-silver-teal-feathers-elegant-transparent.png', Tempestrix: '/cdn/sprite-ghibli-majestic-storm-phoenix-spirit-purple-lightning-fierce-dramatic-transparent.png', Glimmer: '/cdn/sprite-ghibli-cute-light-firefly-spirit-golden-sparkly-tiny-chibi-transparent.png', Luxwing: '/cdn/sprite-ghibli-elegant-light-butterfly-spirit-iridescent-gold-white-graceful-transparent.png', Radiantia: '/cdn/sprite-ghibli-majestic-light-dragon-spirit-white-gold-radiant-wings-divine-dramatic-transparent.png', Shadeling: '/cdn/sprite-ghibli-cute-shadow-wisp-spirit-purple-black-smoky-chibi-transparent.png', Duskweaver: '/cdn/sprite-ghibli-mysterious-shadow-spider-spirit-dark-purple-elegant-sinister-transparent.png', Umbralith: '/cdn/sprite-ghibli-terrifying-shadow-beast-spirit-black-purple-void-eyes-menacing-dramatic-transparent.png', // STARTER EVOLUTION LINES Flarekin: '/cdn/sprite-ghibli-elegant-flame-fox-spirit-crimson-gold-fierce-flowing-tail-transparent.png', Pyranthos: '/cdn/sprite-ghibli-majestic-nine-tailed-flame-fox-spirit-white-gold-fire-divine-dramatic-transparent.png', Coraline: '/cdn/sprite-ghibli-elegant-water-koi-dragon-spirit-sapphire-silver-graceful-transparent.png', Tsunamara: '/cdn/sprite-ghibli-majestic-water-dragon-koi-spirit-azure-pearl-flowing-whiskers-dramatic-transparent.png', Boulderkin: '/cdn/sprite-ghibli-sturdy-earth-golem-spirit-granite-moss-armored-stoic-transparent.png', Terradon: '/cdn/sprite-ghibli-ancient-mountain-golem-spirit-obsidian-crystal-massive-dramatic-transparent.png', Galewing: '/cdn/sprite-ghibli-swift-wind-hare-spirit-silver-teal-long-ears-elegant-transparent.png', Cyclonix: '/cdn/sprite-ghibli-majestic-storm-hare-spirit-white-lightning-crackling-ears-dramatic-transparent.png', Aurelis: '/cdn/sprite-ghibli-radiant-light-moth-spirit-golden-white-luminous-wings-elegant-transparent.png', Solarius: '/cdn/sprite-ghibli-divine-sun-moth-spirit-platinum-gold-radiant-six-wings-dramatic-transparent.png', Umbris: '/cdn/sprite-ghibli-sleek-shadow-cat-spirit-midnight-purple-glowing-eyes-elegant-transparent.png', Eclipsar: '/cdn/sprite-ghibli-majestic-void-panther-spirit-black-purple-cosmic-eyes-dramatic-transparent.png', // PRE-RARE BASICS Flickling: '/cdn/sprite-ghibli-cute-flame-chick-spirit-orange-tiny-wings-chibi-transparent.png', Bubbling: '/cdn/sprite-ghibli-cute-water-seahorse-baby-spirit-cyan-tiny-chibi-transparent.png', Pebblet: '/cdn/sprite-ghibli-cute-baby-tortoise-spirit-brown-tiny-shell-chibi-transparent.png', Wisplet: '/cdn/sprite-ghibli-cute-wind-chick-spirit-silver-fluffy-tiny-chibi-transparent.png', Glowmote: '/cdn/sprite-ghibli-cute-light-orb-spirit-golden-tiny-sparkle-chibi-transparent.png', Shadowkit: '/cdn/sprite-ghibli-cute-shadow-raven-chick-spirit-purple-tiny-chibi-transparent.png', // POST-RARE ADVANCED Phoenixia: '/cdn/sprite-ghibli-divine-flame-phoenix-spirit-white-gold-rebirth-flames-dramatic-transparent.png', Leviathos: '/cdn/sprite-ghibli-majestic-sea-leviathan-spirit-deep-blue-ancient-colossal-dramatic-transparent.png', Colossadon: '/cdn/sprite-ghibli-ancient-world-turtle-spirit-mountain-shell-colossal-dramatic-transparent.png', Stormravian: '/cdn/sprite-ghibli-legendary-storm-eagle-spirit-silver-lightning-wings-dramatic-transparent.png', Celestine: '/cdn/sprite-ghibli-divine-celestial-crane-spirit-platinum-rainbow-wings-dramatic-transparent.png', Nocturnax: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-black-cosmic-feathers-dramatic-transparent.png', // BATCH 2: Salamander, Jellyfish, Mole, Cloud, Deer, Bat lines Sizzlescale: '/cdn/sprite-ghibli-cute-flame-salamander-spirit-orange-red-tiny-scales-chibi-transparent.png', Magmalisk: '/cdn/sprite-ghibli-sleek-magma-lizard-spirit-red-black-molten-cracks-elegant-transparent.png', Volcanorus: '/cdn/sprite-ghibli-majestic-volcanic-dragon-salamander-spirit-obsidian-lava-veins-dramatic-transparent.png', Jellydrop: '/cdn/sprite-ghibli-cute-jellyfish-spirit-translucent-blue-tiny-bell-chibi-transparent.png', Driftbell: '/cdn/sprite-ghibli-elegant-jellyfish-spirit-luminous-teal-flowing-tendrils-graceful-transparent.png', Abyssalume: '/cdn/sprite-ghibli-majestic-deep-sea-jellyfish-spirit-bioluminescent-purple-blue-ethereal-dramatic-transparent.png', Burrowkit: '/cdn/sprite-ghibli-cute-mole-spirit-brown-fuzzy-tiny-claws-chibi-transparent.png', Terramole: '/cdn/sprite-ghibli-sturdy-giant-mole-spirit-brown-armored-claws-powerful-transparent.png', Quakebeast: '/cdn/sprite-ghibli-massive-earth-beast-spirit-brown-stone-plates-seismic-dramatic-transparent.png', Cloudpuff: '/cdn/sprite-ghibli-cute-cloud-spirit-fluffy-white-tiny-wings-chibi-transparent.png', Nimbuswing: '/cdn/sprite-ghibli-graceful-cloud-bird-spirit-white-silver-wispy-feathers-elegant-transparent.png', Stratosoul: '/cdn/sprite-ghibli-majestic-stratosphere-spirit-white-gold-ethereal-cloud-form-dramatic-transparent.png', Fawnlight: '/cdn/sprite-ghibli-cute-light-fawn-spirit-white-gold-spots-tiny-chibi-transparent.png', Gleamstag: '/cdn/sprite-ghibli-elegant-light-stag-spirit-white-gold-glowing-antlers-majestic-transparent.png', Auroralope: '/cdn/sprite-ghibli-majestic-aurora-elk-spirit-white-rainbow-antlers-ethereal-dramatic-transparent.png', Squeakwing: '/cdn/sprite-ghibli-cute-bat-spirit-purple-tiny-fangs-fluffy-chibi-transparent.png', Nightfang: '/cdn/sprite-ghibli-sleek-vampire-bat-spirit-dark-purple-red-eyes-elegant-transparent.png', Dreadwyvern: '/cdn/sprite-ghibli-terrifying-dark-wyvern-spirit-black-red-demonic-wings-dramatic-transparent.png', // BATCH 3: Dragon, Frog, Crystal, Butterfly, Rabbit, Snake lines Drakeling: '/cdn/sprite-ghibli-cute-baby-dragon-spirit-orange-red-tiny-wings-chibi-transparent.png', Wyrmblaze: '/cdn/sprite-ghibli-elegant-flame-dragon-spirit-red-gold-fierce-fire-breath-transparent.png', Infernodrake: '/cdn/sprite-ghibli-majestic-elder-dragon-spirit-crimson-black-massive-wings-dramatic-transparent.png', Puddlehopper: '/cdn/sprite-ghibli-cute-tiny-frog-spirit-blue-green-webbed-feet-chibi-transparent.png', Torrenttoad: '/cdn/sprite-ghibli-sturdy-large-toad-spirit-teal-blue-armored-back-powerful-transparent.png', Tsunamifrog: '/cdn/sprite-ghibli-majestic-giant-frog-spirit-deep-blue-wave-patterns-dramatic-transparent.png', Gemshard: '/cdn/sprite-ghibli-cute-tiny-crystal-creature-spirit-pink-purple-sparkly-chibi-transparent.png', Crystalguard: '/cdn/sprite-ghibli-elegant-crystal-golem-spirit-amethyst-purple-geometric-transparent.png', Diamondtitan: '/cdn/sprite-ghibli-majestic-diamond-colossus-spirit-prismatic-rainbow-dramatic-transparent.png', Flutterwind: '/cdn/sprite-ghibli-cute-tiny-butterfly-spirit-pale-blue-delicate-wings-chibi-transparent.png', Galefly: '/cdn/sprite-ghibli-elegant-butterfly-spirit-silver-teal-flowing-wings-graceful-transparent.png', Tempestmonarch: '/cdn/sprite-ghibli-majestic-giant-butterfly-spirit-storm-purple-lightning-wings-dramatic-transparent.png', Sunbun: '/cdn/sprite-ghibli-cute-tiny-bunny-spirit-golden-white-fluffy-glowing-ears-chibi-transparent.png', Radiantrabbit: '/cdn/sprite-ghibli-elegant-rabbit-spirit-white-gold-luminous-fur-graceful-transparent.png', Celestihare: '/cdn/sprite-ghibli-majestic-celestial-hare-spirit-platinum-rainbow-aura-divine-dramatic-transparent.png', Vipershade: '/cdn/sprite-ghibli-cute-tiny-snake-spirit-purple-black-glowing-eyes-chibi-transparent.png', Shadowserpent: '/cdn/sprite-ghibli-elegant-snake-spirit-dark-purple-shadowy-coils-sinister-transparent.png', Abyssalcoil: '/cdn/sprite-ghibli-terrifying-massive-serpent-spirit-void-black-cosmic-scales-dramatic-transparent.png', // BATCH 4: Scorpion, Turtle, Bear, Owl, Unicorn, Wolf lines Emberclaw: '/cdn/sprite-ghibli-cute-tiny-scorpion-spirit-orange-red-glowing-tail-chibi-transparent.png', Blazescorpion: '/cdn/sprite-ghibli-fierce-scorpion-spirit-red-black-fiery-pincers-elegant-transparent.png', Infernostinger: '/cdn/sprite-ghibli-majestic-emperor-scorpion-spirit-obsidian-lava-veins-dramatic-transparent.png', Shellsplash: '/cdn/sprite-ghibli-cute-tiny-turtle-spirit-cyan-blue-shell-chibi-transparent.png', Tidalshell: '/cdn/sprite-ghibli-graceful-sea-turtle-spirit-teal-coral-patterns-elegant-transparent.png', Oceanbastion: '/cdn/sprite-ghibli-majestic-giant-turtle-spirit-deep-blue-fortress-shell-dramatic-transparent.png', Cubite: '/cdn/sprite-ghibli-cute-tiny-bear-cub-spirit-brown-stone-fur-chibi-transparent.png', Grizzite: '/cdn/sprite-ghibli-powerful-bear-spirit-granite-grey-rocky-fur-fierce-transparent.png', Mountainroar: '/cdn/sprite-ghibli-majestic-massive-bear-spirit-mountain-stone-crystals-dramatic-transparent.png', Hootlet: '/cdn/sprite-ghibli-cute-tiny-owl-spirit-white-silver-fluffy-chibi-transparent.png', Galeowl: '/cdn/sprite-ghibli-elegant-owl-spirit-silver-teal-wind-feathers-graceful-transparent.png', Stormwatcher: '/cdn/sprite-ghibli-majestic-great-owl-spirit-white-storm-wings-lightning-eyes-dramatic-transparent.png', Sparkfoal: '/cdn/sprite-ghibli-cute-tiny-foal-spirit-white-gold-sparkle-mane-chibi-transparent.png', Gleamsteed: '/cdn/sprite-ghibli-elegant-horse-spirit-white-golden-luminous-mane-graceful-transparent.png', Celesticorn: '/cdn/sprite-ghibli-majestic-unicorn-spirit-platinum-rainbow-horn-divine-dramatic-transparent.png', Shadowpup: '/cdn/sprite-ghibli-cute-tiny-wolf-pup-spirit-black-purple-glowing-eyes-chibi-transparent.png', Duskhowl: '/cdn/sprite-ghibli-fierce-wolf-spirit-dark-grey-purple-mist-elegant-transparent.png', Voidfang: '/cdn/sprite-ghibli-terrifying-dire-wolf-spirit-void-black-cosmic-fur-dramatic-transparent.png', // BATCH 5: Lion, Otter, Rhino, Hummingbird, Peacock, Mantis lines Emberkitten: '/cdn/sprite-ghibli-cute-tiny-lion-cub-spirit-orange-flame-mane-fluffy-chibi-transparent.png', Pyroleo: '/cdn/sprite-ghibli-elegant-flame-lion-spirit-red-gold-fiery-mane-fierce-transparent.png', Solarmane: '/cdn/sprite-ghibli-majestic-solar-lion-spirit-white-gold-blazing-mane-divine-dramatic-transparent.png', Splashkit: '/cdn/sprite-ghibli-cute-tiny-otter-pup-spirit-cyan-blue-playful-chibi-transparent.png', Riverglide: '/cdn/sprite-ghibli-elegant-river-otter-spirit-teal-silver-sleek-graceful-transparent.png', Tsunotter: '/cdn/sprite-ghibli-majestic-tsunami-otter-spirit-deep-blue-wave-patterns-powerful-dramatic-transparent.png', Pebblecalf: '/cdn/sprite-ghibli-cute-tiny-rhino-calf-spirit-grey-brown-rocky-skin-chibi-transparent.png', Ironhorn: '/cdn/sprite-ghibli-sturdy-armored-rhino-spirit-iron-grey-plated-powerful-transparent.png', Tectodon: '/cdn/sprite-ghibli-majestic-tectonic-rhino-spirit-obsidian-crystal-horn-earthquake-dramatic-transparent.png', Buzzlet: '/cdn/sprite-ghibli-cute-tiny-hummingbird-spirit-mint-silver-fast-wings-chibi-transparent.png', Zephyrhum: '/cdn/sprite-ghibli-elegant-wind-hummingbird-spirit-teal-white-blur-wings-graceful-transparent.png', Tempesthover: '/cdn/sprite-ghibli-majestic-storm-hummingbird-spirit-silver-lightning-wings-dramatic-transparent.png', Glimchick: '/cdn/sprite-ghibli-cute-tiny-peacock-chick-spirit-golden-sparkle-feathers-chibi-transparent.png', Auroraplume: '/cdn/sprite-ghibli-elegant-light-peacock-spirit-iridescent-gold-rainbow-tail-graceful-transparent.png', Celestibird: '/cdn/sprite-ghibli-majestic-celestial-peacock-spirit-platinum-divine-thousand-eye-feathers-dramatic-transparent.png', Shadebug: '/cdn/sprite-ghibli-cute-tiny-mantis-spirit-purple-black-big-eyes-chibi-transparent.png', Duskmantis: '/cdn/sprite-ghibli-elegant-shadow-mantis-spirit-dark-purple-scythe-arms-sinister-transparent.png', Voidreaper: '/cdn/sprite-ghibli-terrifying-void-mantis-spirit-black-cosmic-blades-death-dramatic-transparent.png', // BATCH 6: Beetle, Shark, Armadillo, Dragonfly, Kirin, Phantom lines Sparkbug: '/cdn/sprite-ghibli-cute-tiny-beetle-spirit-orange-red-glowing-shell-chibi-transparent.png', Blazebeetle: '/cdn/sprite-ghibli-elegant-fire-beetle-spirit-red-black-ember-wings-fierce-transparent.png', Infernocarab: '/cdn/sprite-ghibli-majestic-scarab-spirit-obsidian-gold-blazing-hieroglyphs-dramatic-transparent.png', Finling: '/cdn/sprite-ghibli-cute-tiny-shark-pup-spirit-cyan-white-friendly-chibi-transparent.png', Reefshark: '/cdn/sprite-ghibli-elegant-reef-shark-spirit-teal-coral-patterns-sleek-transparent.png', Abyssaljaw: '/cdn/sprite-ghibli-terrifying-abyssal-shark-spirit-deep-blue-black-massive-jaws-dramatic-transparent.png', Shellpup: '/cdn/sprite-ghibli-cute-tiny-armadillo-spirit-brown-grey-curled-shell-chibi-transparent.png', Ironshell: '/cdn/sprite-ghibli-sturdy-armadillo-spirit-iron-grey-armored-plates-powerful-transparent.png', Terraplate: '/cdn/sprite-ghibli-majestic-giant-armadillo-spirit-obsidian-crystal-fortress-shell-dramatic-transparent.png', Zipfly: '/cdn/sprite-ghibli-cute-tiny-dragonfly-spirit-mint-silver-iridescent-wings-chibi-transparent.png', Windskimmer: '/cdn/sprite-ghibli-elegant-dragonfly-spirit-teal-white-blur-wings-graceful-transparent.png', Tempestglider: '/cdn/sprite-ghibli-majestic-storm-dragonfly-spirit-silver-lightning-four-wings-dramatic-transparent.png', Qilinkit: '/cdn/sprite-ghibli-cute-tiny-kirin-spirit-golden-white-fluffy-small-horn-chibi-transparent.png', Radiantkirin: '/cdn/sprite-ghibli-elegant-kirin-spirit-white-gold-flowing-mane-scales-graceful-transparent.png', Celestikirin: '/cdn/sprite-ghibli-majestic-celestial-kirin-spirit-platinum-rainbow-divine-aura-dramatic-transparent.png', Spooklet: '/cdn/sprite-ghibli-cute-tiny-ghost-spirit-purple-white-shy-wispy-chibi-transparent.png', Wraithling: '/cdn/sprite-ghibli-elegant-wraith-spirit-dark-purple-ethereal-cloak-sinister-transparent.png', Voidphantom: '/cdn/sprite-ghibli-terrifying-void-phantom-spirit-black-cosmic-ethereal-death-dramatic-transparent.png', // BATCH 7: Fox, Seahorse, Mole2, Crane, Seraph, Raven lines Flickit: '/cdn/sprite-ghibli-cute-tiny-fox-kit-spirit-orange-flame-tail-fluffy-chibi-transparent.png', Blazefox: '/cdn/sprite-ghibli-elegant-fire-fox-spirit-red-gold-multiple-tails-fierce-transparent.png', Infernokitsune: '/cdn/sprite-ghibli-majestic-kitsune-spirit-white-gold-nine-tails-divine-flames-dramatic-transparent.png', Driftfoal: '/cdn/sprite-ghibli-cute-tiny-seahorse-spirit-cyan-pearl-translucent-chibi-transparent.png', Tidalsteed: '/cdn/sprite-ghibli-elegant-seahorse-spirit-teal-silver-flowing-fins-graceful-transparent.png', Leviatide: '/cdn/sprite-ghibli-majestic-sea-dragon-seahorse-spirit-deep-blue-bioluminescent-dramatic-transparent.png', Burrkit: '/cdn/sprite-ghibli-cute-tiny-mole-spirit-brown-pink-nose-digging-claws-chibi-transparent.png', Tunnelclaw: '/cdn/sprite-ghibli-sturdy-mole-spirit-dark-brown-powerful-claws-determined-transparent.png', Gustchick: '/cdn/sprite-ghibli-cute-tiny-crane-chick-spirit-white-silver-fluffy-chibi-transparent.png', Skydancer: '/cdn/sprite-ghibli-elegant-crane-bird-spirit-white-feathers-red-head-crest-long-neck-graceful-transparent.png', Celesticrane: '/cdn/sprite-ghibli-majestic-celestial-crane-spirit-pure-white-golden-aura-divine-dramatic-transparent.png', Haloling: '/cdn/sprite-ghibli-cute-tiny-angel-spirit-golden-white-small-wings-halo-chibi-transparent.png', Seraphim: '/cdn/sprite-ghibli-elegant-seraph-spirit-white-gold-four-wings-radiant-transparent.png', Divinewing: '/cdn/sprite-ghibli-majestic-archangel-spirit-platinum-six-wings-holy-light-dramatic-transparent.png', Inkfeather: '/cdn/sprite-ghibli-cute-tiny-raven-chick-spirit-black-purple-fluffy-chibi-transparent.png', Duskcrow: '/cdn/sprite-ghibli-elegant-crow-spirit-black-purple-gleaming-eyes-sinister-transparent.png', Voidraven: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-cosmic-black-ethereal-feathers-dramatic-transparent.png', }; // Helper to get item by shop ID (for purchase handling) function getItemByShopId(shopId) { return Object.values(ITEM_DATABASE).find(item => item.shopId === shopId); } // === QUEST DATABASE === const QUEST_DATABASE = { legacy_of_whisper_wind: { id: 'legacy_of_whisper_wind', title: 'Legacy of Whisperwind', category: 'main', description: 'Begin your journey as a Drifter by bonding with your first spirit at the Spirit Shrine.', objectives: [ { id: 'talk_aeris', text: 'Speak with Aeris at the Spirit Shrine', type: 'talk', target: 'aeris' }, { id: 'bond_spirit', text: 'Bond with your first spirit', type: 'bond', count: 1 }, { id: 'set_captain', text: 'Set your spirit as Captain (P > drag to slot 1)', type: 'captain', count: 1 }, ], rewards: { dewdrops: 5500, items: [{ id: 'bondingCrystal', count: 10 }, { id: 'healingSalve', count: 10 }] }, }, // Keep legacy alias for backwards compatibility first_steps: { id: 'first_steps', title: 'Legacy of Whisperwind', category: 'main', description: 'Begin your journey as a Drifter by bonding with your first spirit at the Spirit Shrine.', objectives: [ { id: 'talk_aeris', text: 'Speak with Aeris at the Spirit Shrine', type: 'talk', target: 'aeris' }, { id: 'bond_spirit', text: 'Bond with your first spirit', type: 'bond', count: 1 }, { id: 'set_captain', text: 'Set your spirit as Captain (P > drag to slot 1)', type: 'captain', count: 1 }, ], rewards: { dewdrops: 5500, items: [{ id: 'bondingCrystal', count: 10 }, { id: 'healingSalve', count: 10 }] }, }, explore_village: { id: 'explore_village', title: 'Welcome to Whisperwind', category: 'main', description: 'Get to know the villagers of Whisperwind and learn about life in The Drift.', objectives: [ { id: 'talk_bramwell', text: 'Speak with Elder Bramwell', type: 'talk', target: 'bramwell' }, { id: 'talk_mira', text: 'Visit Mira\'s shop', type: 'talk', target: 'mira' }, { id: 'talk_finn', text: 'Meet young Finn', type: 'talk', target: 'finn' }, ], rewards: { dewdrops: 150, items: ['healingSalve'] }, }, wild_encounters: { id: 'wild_encounters', title: 'Into the Wild', category: 'main', description: 'Venture beyond the village and experience your first wild spirit encounter.', objectives: [ { id: 'leave_village', text: 'Leave Whisperwind Village', type: 'zone', target: 'outside_village' }, { id: 'battle_wild', text: 'Battle a wild spirit', type: 'battle', count: 1 }, { id: 'win_battle', text: 'Win a battle', type: 'win', count: 1 }, ], rewards: { dewdrops: 200, items: ['bondingCrystal'] }, }, spirit_collector: { id: 'spirit_collector', title: 'Spirit Collector', category: 'side', description: 'Build your team by bonding with different spirits across The Drift.', objectives: [ { id: 'bond_3', text: 'Bond with 3 spirits', type: 'bond', count: 3 }, ], rewards: { dewdrops: 300, items: ['resonantCrystal'] }, }, battle_hardened: { id: 'battle_hardened', title: 'Battle Hardened', category: 'side', description: 'Hone your skills through combat with wild spirits.', objectives: [ { id: 'win_5', text: 'Win 5 battles', type: 'win', count: 5 }, ], rewards: { dewdrops: 250, items: ['spiritTonic', 'spiritTonic'] }, }, the_drifters_path: { id: 'the_drifters_path', title: "The Drifter's Path", category: 'main', description: 'Learn the essential skills every Drifter needs to thrive in this world of spirits.', unlockedBy: 'legacy_of_whisper_wind', objectives: [ { id: 'talk_lunara', text: 'Speak with Lunara about spirit healing', type: 'talk', target: 'lunara' }, { id: 'purchase_item', text: "Purchase an item from Mira's shop", type: 'purchase', count: 1 }, { id: 'capture_spirit', text: 'Capture a wild spirit', type: 'bond', count: 1 }, { id: 'level_5_spirit', text: 'Obtain a level 5 spirit', type: 'spirit_level', level: 5 }, ], rewards: { dewdrops: 3000, items: [{ id: 'revivalEssence', count: 3 }, { id: 'harmonicCrystal', count: 5 }] }, }, }; // === QUEST TRACKER (always visible on left side - MMO style, no box) === function renderQuestTracker(state) { var quests = state.quests || {}; var questEntries = Object.entries(quests); var activeQuests = []; for (var i = 0; i < questEntries.length; i++) { if (questEntries[i][1].status === 'active' && questEntries[i][1].tracked !== false) { activeQuests.push(questEntries[i]); } } if (activeQuests.length === 0) return ''; var displayQuests = activeQuests.slice(0, 3); var questItems = ''; for (var i = 0; i < displayQuests.length; i++) { var id = displayQuests[i][0]; var quest = displayQuests[i][1]; var data = QUEST_DATABASE[id]; if (!data) continue; var nextObjective = null; for (var j = 0; j < data.objectives.length; j++) { var obj = data.objectives[j]; var progress = (quest.progress && quest.progress[obj.id]) ? quest.progress[obj.id] : 0; var isIncomplete = obj.count ? progress < obj.count : progress === 0; if (isIncomplete) { nextObjective = obj; break; } } if (!nextObjective) continue; var prog = (quest.progress && quest.progress[nextObjective.id]) ? quest.progress[nextObjective.id] : 0; var progressText = nextObjective.count ? ' (' + prog + '/' + nextObjective.count + ')' : ''; var icon = data.category === 'main' ? '⭐' : '•'; questItems += '

' + icon + ' ' + data.title + '

○ ' + nextObjective.text + progressText + '

'; } if (!questItems) return ''; return '

' + questItems + '

'; } // === QUEST LOG PANEL === function renderQuestLog(state) { var quests = state.quests || {}; var questEntries = Object.entries(quests); var activeQuests = questEntries.filter(function(e) { return e[1].status === 'active'; }); var completedQuests = questEntries.filter(function(e) { return e[1].status === 'completed'; }); var selectedQuestId = window._selectedQuestId || (activeQuests[0] ? activeQuests[0][0] : (completedQuests[0] ? completedQuests[0][0] : null)); var selectedQuest = selectedQuestId ? (quests[selectedQuestId] || null) : null; var questData = selectedQuestId ? QUEST_DATABASE[selectedQuestId] : null; var zIndex = (window._topPanel === 'questLog') ? 102 : 100; var defaultX = Math.max(50, (window.innerWidth - 700) / 2); var defaultY = Math.max(80, (window.innerHeight - 500) / 2); var posX = window._questLogPanelPos ? window._questLogPanelPos.x : defaultX; var posY = window._questLogPanelPos ? window._questLogPanelPos.y : defaultY; var questListItems = ''; var allQuests = activeQuests.concat(completedQuests); if (allQuests.length === 0) { questListItems = '

📜

No quests yet

Talk to villagers!

'; } else { for (var i = 0; i < allQuests.length; i++) { var id = allQuests[i][0]; var quest = allQuests[i][1]; var data = QUEST_DATABASE[id]; if (!data) continue; var isSelected = id === selectedQuestId; var isCompleted = quest.status === 'completed'; var icon = data.category === 'main' ? '⭐' : '📜'; questListItems += ''; } } var detailsContent = ''; if (questData && selectedQuest) { var objectivesList = ''; var foundCurrentObjective = false; for (var i = 0; i < questData.objectives.length; i++) { var obj = questData.objectives[i]; var prog = (selectedQuest.progress && selectedQuest.progress[obj.id]) ? selectedQuest.progress[obj.id] : 0; var isComplete = obj.count ? prog >= obj.count : prog > 0; var progressText = obj.count ? ' (' + prog + '/' + obj.count + ')' : ''; if (isComplete) { // Show completed objectives crossed out objectivesList += '

✓' + obj.text + '

'; } else if (!foundCurrentObjective) { // Show current objective (first incomplete one) foundCurrentObjective = true; objectivesList += '

○' + obj.text + progressText + '

'; } // Future objectives are hidden - don't render them } var rewardItems = ''; if (questData.rewards.dewdrops) { rewardItems += '

' + questData.rewards.dewdrops.toLocaleString() + '

'; } if (questData.rewards.items && questData.rewards.items.length > 0) { for (var j = 0; j < questData.rewards.items.length; j++) { var rawItem = questData.rewards.items[j]; // Support both old format (string) and new format ({ id, count }) var itemId = typeof rawItem === 'string' ? rawItem : rawItem.id; var itemCount = typeof rawItem === 'string' ? 1 : (rawItem.count || 1); var itemInfo = ITEM_DATABASE[itemId]; if (itemInfo) { rewardItems += '

' + '

' + (itemCount > 1 ? 'x' + itemCount + '' : '') + '

' + '' + itemInfo.name + (itemCount > 1 ? ' x' + itemCount : '') + '' + '

'; } } } var categoryIcon = questData.category === 'main' ? '⭐' : '📜'; detailsContent = '

' + categoryIcon + '

' + questData.title + '

' + (questData.category === 'main' ? '⭐ Main Quest' : '📜 Side Quest') + '

"' + questData.description + '"

Objectives

' + objectivesList + '

Rewards

' + rewardItems + '

'; } else { detailsContent = '

📜

Select a quest to view details

'; } return '

❧

Quest Log

' + (activeQuests.length > 0 ? 'Active (' + activeQuests.length + ')' : 'Quests') + '

' + questListItems + '

' + detailsContent + '

'; } // === SPIRIT CODEX (Collection Tracker / Pokédex) === function renderSpiritCodex(state) { // All 162 spirits in the game (excluding Solienne) const ALL_SPIRITS = [ // Starter spirits { name: 'Ember', type: 'flame', rarity: 'starter' }, { name: 'Brook', type: 'water', rarity: 'starter' }, { name: 'Pebble', type: 'earth', rarity: 'starter' }, { name: 'Zephyr', type: 'wind', rarity: 'starter' }, { name: 'Lumina', type: 'light', rarity: 'starter' }, { name: 'Nyx', type: 'dark', rarity: 'starter' }, // Starter evolutions (medium) { name: 'Flarekin', type: 'flame', rarity: 'uncommon' }, { name: 'Coraline', type: 'water', rarity: 'uncommon' }, { name: 'Boulderkin', type: 'earth', rarity: 'uncommon' }, { name: 'Galewing', type: 'wind', rarity: 'uncommon' }, { name: 'Aurelis', type: 'light', rarity: 'uncommon' }, { name: 'Umbris', type: 'dark', rarity: 'uncommon' }, // Starter evolutions (final) { name: 'Pyranthos', type: 'flame', rarity: 'rare' }, { name: 'Tsunamara', type: 'water', rarity: 'rare' }, { name: 'Terradon', type: 'earth', rarity: 'rare' }, { name: 'Cyclonix', type: 'wind', rarity: 'rare' }, { name: 'Solarius', type: 'light', rarity: 'rare' }, { name: 'Eclipsar', type: 'dark', rarity: 'rare' }, // Advanced spirits { name: 'Solara', type: 'flame', rarity: 'rare' }, { name: 'Tideling', type: 'water', rarity: 'uncommon' }, { name: 'Terravox', type: 'earth', rarity: 'rare' }, { name: 'Gale', type: 'wind', rarity: 'uncommon' }, { name: 'Seraphine', type: 'light', rarity: 'rare' }, { name: 'Vesperon', type: 'dark', rarity: 'rare' }, // Pre-rare basics { name: 'Flickling', type: 'flame', rarity: 'common' }, { name: 'Bubbling', type: 'water', rarity: 'common' }, { name: 'Pebblet', type: 'earth', rarity: 'common' }, { name: 'Wisplet', type: 'wind', rarity: 'common' }, { name: 'Glowmote', type: 'light', rarity: 'common' }, { name: 'Shadowkit', type: 'dark', rarity: 'common' }, // Post-rare advanced { name: 'Phoenixia', type: 'flame', rarity: 'legendary' }, { name: 'Leviathos', type: 'water', rarity: 'legendary' }, { name: 'Colossadon', type: 'earth', rarity: 'legendary' }, { name: 'Stormravian', type: 'wind', rarity: 'legendary' }, { name: 'Celestine', type: 'light', rarity: 'legendary' }, { name: 'Nocturnax', type: 'dark', rarity: 'legendary' }, // Batch 1: Canine, Serpent, Golem, Fairy, Insect, Shadow lines { name: 'Cinderpup', type: 'flame', rarity: 'common' }, { name: 'Blazehound', type: 'flame', rarity: 'uncommon' }, { name: 'Infernowolf', type: 'flame', rarity: 'rare' }, { name: 'Droplet', type: 'water', rarity: 'common' }, { name: 'Streamling', type: 'water', rarity: 'uncommon' }, { name: 'Torrentis', type: 'water', rarity: 'rare' }, { name: 'Mudling', type: 'earth', rarity: 'common' }, { name: 'Claywarden', type: 'earth', rarity: 'uncommon' }, { name: 'Obsidianite', type: 'earth', rarity: 'rare' }, { name: 'Breezeling', type: 'wind', rarity: 'common' }, { name: 'Gustwing', type: 'wind', rarity: 'uncommon' }, { name: 'Tempestrix', type: 'wind', rarity: 'rare' }, { name: 'Glimmer', type: 'light', rarity: 'common' }, { name: 'Luxwing', type: 'light', rarity: 'uncommon' }, { name: 'Radiantia', type: 'light', rarity: 'rare' }, { name: 'Shadeling', type: 'dark', rarity: 'common' }, { name: 'Duskweaver', type: 'dark', rarity: 'uncommon' }, { name: 'Umbralith', type: 'dark', rarity: 'rare' }, // Batch 2: Salamander, Jellyfish, Mole, Cloud, Deer, Bat lines { name: 'Sizzlescale', type: 'flame', rarity: 'common' }, { name: 'Magmalisk', type: 'flame', rarity: 'uncommon' }, { name: 'Volcanorus', type: 'flame', rarity: 'rare' }, { name: 'Jellydrop', type: 'water', rarity: 'common' }, { name: 'Driftbell', type: 'water', rarity: 'uncommon' }, { name: 'Abyssalume', type: 'water', rarity: 'rare' }, { name: 'Burrowkit', type: 'earth', rarity: 'common' }, { name: 'Terramole', type: 'earth', rarity: 'uncommon' }, { name: 'Quakebeast', type: 'earth', rarity: 'rare' }, { name: 'Cloudpuff', type: 'wind', rarity: 'common' }, { name: 'Nimbuswing', type: 'wind', rarity: 'uncommon' }, { name: 'Stratosoul', type: 'wind', rarity: 'rare' }, { name: 'Fawnlight', type: 'light', rarity: 'common' }, { name: 'Gleamstag', type: 'light', rarity: 'uncommon' }, { name: 'Auroralope', type: 'light', rarity: 'rare' }, { name: 'Squeakwing', type: 'dark', rarity: 'common' }, { name: 'Nightfang', type: 'dark', rarity: 'uncommon' }, { name: 'Dreadwyvern', type: 'dark', rarity: 'rare' }, // Batch 3: Dragon, Frog, Crystal, Butterfly, Rabbit, Snake lines { name: 'Drakeling', type: 'flame', rarity: 'common' }, { name: 'Wyrmblaze', type: 'flame', rarity: 'uncommon' }, { name: 'Infernodrake', type: 'flame', rarity: 'rare' }, { name: 'Puddlehopper', type: 'water', rarity: 'common' }, { name: 'Torrenttoad', type: 'water', rarity: 'uncommon' }, { name: 'Tsunamifrog', type: 'water', rarity: 'rare' }, { name: 'Gemshard', type: 'earth', rarity: 'common' }, { name: 'Crystalguard', type: 'earth', rarity: 'uncommon' }, { name: 'Diamondtitan', type: 'earth', rarity: 'rare' }, { name: 'Flutterwind', type: 'wind', rarity: 'common' }, { name: 'Galefly', type: 'wind', rarity: 'uncommon' }, { name: 'Tempestmonarch', type: 'wind', rarity: 'rare' }, { name: 'Sunbun', type: 'light', rarity: 'common' }, { name: 'Radiantrabbit', type: 'light', rarity: 'uncommon' }, { name: 'Celestihare', type: 'light', rarity: 'rare' }, { name: 'Vipershade', type: 'dark', rarity: 'common' }, { name: 'Shadowserpent', type: 'dark', rarity: 'uncommon' }, { name: 'Abyssalcoil', type: 'dark', rarity: 'rare' }, // Batch 4: Scorpion, Turtle, Bear, Owl, Unicorn, Wolf lines { name: 'Emberclaw', type: 'flame', rarity: 'common' }, { name: 'Blazescorpion', type: 'flame', rarity: 'uncommon' }, { name: 'Infernostinger', type: 'flame', rarity: 'rare' }, { name: 'Shellsplash', type: 'water', rarity: 'common' }, { name: 'Tidalshell', type: 'water', rarity: 'uncommon' }, { name: 'Oceanbastion', type: 'water', rarity: 'rare' }, { name: 'Cubite', type: 'earth', rarity: 'common' }, { name: 'Grizzite', type: 'earth', rarity: 'uncommon' }, { name: 'Mountainroar', type: 'earth', rarity: 'rare' }, { name: 'Hootlet', type: 'wind', rarity: 'common' }, { name: 'Galeowl', type: 'wind', rarity: 'uncommon' }, { name: 'Stormwatcher', type: 'wind', rarity: 'rare' }, { name: 'Sparkfoal', type: 'light', rarity: 'common' }, { name: 'Gleamsteed', type: 'light', rarity: 'uncommon' }, { name: 'Celesticorn', type: 'light', rarity: 'rare' }, { name: 'Shadowpup', type: 'dark', rarity: 'common' }, { name: 'Duskhowl', type: 'dark', rarity: 'uncommon' }, { name: 'Voidfang', type: 'dark', rarity: 'rare' }, // Batch 5: Lion, Otter, Rhino, Hummingbird, Peacock, Mantis lines { name: 'Emberkitten', type: 'flame', rarity: 'common' }, { name: 'Pyroleo', type: 'flame', rarity: 'uncommon' }, { name: 'Solarmane', type: 'flame', rarity: 'rare' }, { name: 'Splashkit', type: 'water', rarity: 'common' }, { name: 'Riverglide', type: 'water', rarity: 'uncommon' }, { name: 'Tsunotter', type: 'water', rarity: 'rare' }, { name: 'Pebblecalf', type: 'earth', rarity: 'common' }, { name: 'Ironhorn', type: 'earth', rarity: 'uncommon' }, { name: 'Tectodon', type: 'earth', rarity: 'rare' }, { name: 'Buzzlet', type: 'wind', rarity: 'common' }, { name: 'Zephyrhum', type: 'wind', rarity: 'uncommon' }, { name: 'Tempesthover', type: 'wind', rarity: 'rare' }, { name: 'Glimchick', type: 'light', rarity: 'common' }, { name: 'Auroraplume', type: 'light', rarity: 'uncommon' }, { name: 'Celestibird', type: 'light', rarity: 'rare' }, { name: 'Shadebug', type: 'dark', rarity: 'common' }, { name: 'Duskmantis', type: 'dark', rarity: 'uncommon' }, { name: 'Voidreaper', type: 'dark', rarity: 'rare' }, // Batch 6: Beetle, Shark, Armadillo, Dragonfly, Kirin, Phantom lines { name: 'Sparkbug', type: 'flame', rarity: 'common' }, { name: 'Blazebeetle', type: 'flame', rarity: 'uncommon' }, { name: 'Infernocarab', type: 'flame', rarity: 'rare' }, { name: 'Finling', type: 'water', rarity: 'common' }, { name: 'Reefshark', type: 'water', rarity: 'uncommon' }, { name: 'Abyssaljaw', type: 'water', rarity: 'rare' }, { name: 'Shellpup', type: 'earth', rarity: 'common' }, { name: 'Ironshell', type: 'earth', rarity: 'uncommon' }, { name: 'Terraplate', type: 'earth', rarity: 'rare' }, { name: 'Zipfly', type: 'wind', rarity: 'common' }, { name: 'Windskimmer', type: 'wind', rarity: 'uncommon' }, { name: 'Tempestglider', type: 'wind', rarity: 'rare' }, { name: 'Qilinkit', type: 'light', rarity: 'common' }, { name: 'Radiantkirin', type: 'light', rarity: 'uncommon' }, { name: 'Celestikirin', type: 'light', rarity: 'rare' }, { name: 'Spooklet', type: 'dark', rarity: 'common' }, { name: 'Wraithling', type: 'dark', rarity: 'uncommon' }, { name: 'Voidphantom', type: 'dark', rarity: 'rare' }, // Batch 7: Fox, Seahorse, Mole2, Crane, Seraph, Raven lines { name: 'Flickit', type: 'flame', rarity: 'common' }, { name: 'Blazefox', type: 'flame', rarity: 'uncommon' }, { name: 'Infernokitsune', type: 'flame', rarity: 'rare' }, { name: 'Driftfoal', type: 'water', rarity: 'common' }, { name: 'Tidalsteed', type: 'water', rarity: 'uncommon' }, { name: 'Leviatide', type: 'water', rarity: 'rare' }, { name: 'Burrkit', type: 'earth', rarity: 'common' }, { name: 'Tunnelclaw', type: 'earth', rarity: 'uncommon' }, { name: 'Gustchick', type: 'wind', rarity: 'common' }, { name: 'Skydancer', type: 'wind', rarity: 'uncommon' }, { name: 'Celesticrane', type: 'wind', rarity: 'rare' }, { name: 'Haloling', type: 'light', rarity: 'common' }, { name: 'Seraphim', type: 'light', rarity: 'uncommon' }, { name: 'Divinewing', type: 'light', rarity: 'rare' }, { name: 'Inkfeather', type: 'dark', rarity: 'common' }, { name: 'Duskcrow', type: 'dark', rarity: 'uncommon' }, { name: 'Voidraven', type: 'dark', rarity: 'rare' }, ]; const TOTAL_SPIRITS = ALL_SPIRITS.length; // Get owned spirit names const ownedSpirits = state.spirits ?? []; const ownedNames = new Set(ownedSpirits.map(s => s.name)); const collectedCount = ownedNames.size; // Element styles const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥', gradient: 'linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(200, 80, 30, 0.2))' }, water: { color: '#4ECDC4', bgColor: 'rgba(78, 205, 196, 0.15)', icon: '💧', gradient: 'linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(50, 160, 160, 0.2))' }, earth: { color: '#8B7355', bgColor: 'rgba(139, 115, 85, 0.15)', icon: '🪨', gradient: 'linear-gradient(135deg, rgba(139, 115, 85, 0.3), rgba(100, 80, 60, 0.2))' }, wind: { color: '#90EE90', bgColor: 'rgba(144, 238, 144, 0.15)', icon: '🍃', gradient: 'linear-gradient(135deg, rgba(144, 238, 144, 0.3), rgba(100, 180, 100, 0.2))' }, light: { color: '#DAA520', bgColor: 'rgba(218, 165, 32, 0.15)', icon: '☀️', gradient: 'linear-gradient(135deg, rgba(218, 165, 32, 0.3), rgba(180, 140, 20, 0.2))' }, dark: { color: '#6A5ACD', bgColor: 'rgba(106, 90, 205, 0.15)', icon: '🌙', gradient: 'linear-gradient(135deg, rgba(106, 90, 205, 0.3), rgba(80, 70, 160, 0.2))' }, }; // Rarity colors const rarityStyles = { common: { color: '#8b7355', label: 'Common' }, starter: { color: '#7a9b6d', label: 'Starter' }, uncommon: { color: '#4ECDC4', label: 'Uncommon' }, rare: { color: '#9b59b6', label: 'Rare' }, legendary: { color: '#FFD700', label: 'Legendary' }, }; // Calculate z-index based on top panel const zIndex = (window._topPanel === 'spiritCodex') ? 102 : 100; // Default position const defaultX = Math.max(50, (window.innerWidth - 800) / 2); const defaultY = Math.max(80, (window.innerHeight - 550) / 2); const posX = window._codexPanelPos?.x ?? defaultX; const posY = window._codexPanelPos?.y ?? defaultY; // Selected spirit for details const selectedName = window._selectedCodexSpirit ?? null; const selectedData = selectedName ? ALL_SPIRITS.find(s => s.name === selectedName) : null; const isSelectedOwned = selectedName ? ownedNames.has(selectedName) : false; // Build spirit grid const spiritGrid = ALL_SPIRITS.map(spirit => { const isOwned = ownedNames.has(spirit.name); const style = elementStyles[spirit.type] ?? elementStyles.earth; const portrait = SPIRIT_PORTRAITS[spirit.name] ?? ''; const isSelected = spirit.name === selectedName; return `

${portrait ? `

` : `

${style.icon}

`} ${isOwned ? `

✓

` : ''}

`; }).join(''); // Build details panel let detailsPanel = ''; if (selectedData) { const style = elementStyles[selectedData.type] ?? elementStyles.earth; const rarityStyle = rarityStyles[selectedData.rarity] ?? rarityStyles.common; const portrait = SPIRIT_PORTRAITS[selectedData.name] ?? ''; if (isSelectedOwned) { // Show full details for owned spirits const ownedSpirit = ownedSpirits.find(s => s.name === selectedData.name); detailsPanel = `

${selectedData.name}

${style.icon} ${selectedData.type.charAt(0).toUpperCase() + selectedData.type.slice(1)} ${rarityStyle.label}

${portrait ? `

` : `${style.icon}`}

✓ Collected

${ownedSpirit ? `

Level ${ownedSpirit.level ?? 1}

HP ${ownedSpirit.maxHp ?? '?'}

ATK ${ownedSpirit.attack ?? '?'}

DEF ${ownedSpirit.defense ?? '?'}

` : ''}

`; } else { // Show mystery info for unowned spirits detailsPanel = `

???

??? Type ???

${portrait ? `

` : `?`}

🔒 Not Yet Discovered

"This spirit has not yet been bonded with. Explore the world to discover it!"

`; } } else { // No spirit selected detailsPanel = `

📖

Select a spirit
to view details

`; } // Progress bar const progressPercent = Math.round((collectedCount / TOTAL_SPIRITS) * 100); return `

❧

📖

Spirit Codex

${collectedCount} / ${TOTAL_SPIRITS} Collected

ALL SPIRITS

${spiritGrid}

${detailsPanel}

`; } // === PLAYER INTERACTION UI === function renderPlayerInteractionUI(state, localPlayerId) { const lookingAtPlayerId = state.lookingAtPlayerId; const lookingAtPlayerName = state.lookingAtPlayerName; const nearbyPlayers = state.nearbyPlayers ?? []; const interactionMenuOpen = state.playerInteractionMenuOpen; const selectionMenuOpen = state.playerSelectionMenuOpen; const interactionTargetId = state.interactionTargetId; const interactionTargetName = state.interactionTargetName; const waitingForResponse = state.waitingForResponse; const pendingRequest = state.pendingInteractionRequest; const requestDeclined = state.requestDeclined; let html = ''; // "Press X to interact" prompt when looking at another player - positioned left of team bar if (lookingAtPlayerId && !interactionMenuOpen && !selectionMenuOpen && !waitingForResponse && !pendingRequest) { html += `

${lookingAtPlayerName}

X to interact

`; } // Interaction menu (Trade/Duel options) if (interactionMenuOpen && interactionTargetId) { html += `

${interactionTargetName}

What would you like to do?

`; } // Waiting for response if (waitingForResponse) { html += `

Waiting...

${waitingForResponse.type === 'trade' ? '🔄' : '⚔️'}

${waitingForResponse.type === 'trade' ? 'Trade' : 'Duel'} request sent to

${waitingForResponse.targetName}

Waiting for response...

`; } // Incoming request popup if (pendingRequest) { html += `

${pendingRequest.type === 'trade' ? '🔄 Trade Request' : '⚔️ Duel Request'}

${pendingRequest.fromPlayerName}
wants to ${pendingRequest.type} with you!

`; } // Request declined notification if (requestDeclined) { html += `

${requestDeclined.byName} declined your ${requestDeclined.type} request

`; } // === DUEL STAKE WINDOW (trade-like, both players see it) === const duelStakeOpen = state.duelStakeOpen; const duelOpponentName = state.duelOpponentName ?? 'Opponent'; const duelMyStake = state.duelMyStake; // The spirit I'm staking (full object) const duelTheirStake = state.duelTheirStake; // The spirit they're staking (synced) const duelMyConfirmed = state.duelMyConfirmed ?? false; const duelTheirConfirmed = state.duelTheirConfirmed ?? false; const duelFinalConfirmation = state.duelFinalConfirmation ?? false; const duelFinalConfirmed = state.duelFinalConfirmed ?? false; const duelTheirFinalConfirmed = state.duelTheirFinalConfirmed ?? false; const spirits = state.spirits ?? []; const teamSpirits = state.team ?? []; // Filter spirits that CAN be staked (not in team, must have at least 2 spirits) const teamSpiritIds = teamSpirits.filter(s => s).map(s => s.id); const stakableSpirits = spirits.filter(s => s && !teamSpiritIds.includes(s.id)); const canStake = spirits.length >= 2; const duelHoveredSpiritIndex = state.duelHoveredSpiritIndex ?? -1; const duelHoveredStakeSlot = state.duelHoveredStakeSlot ?? null; // Determine which spirit to show in details panel let hoveredSpirit = null; if (duelHoveredStakeSlot === 'my' && duelMyStake) { hoveredSpirit = duelMyStake; } else if (duelHoveredStakeSlot === 'their' && duelTheirStake) { hoveredSpirit = duelTheirStake; } else if (duelHoveredSpiritIndex >= 0) { hoveredSpirit = spirits[duelHoveredSpiritIndex]; } // Helper to render spirit details panel (fixed height) const renderSpiritDetails = (spirit) => { if (!spirit) return ''; const portrait = SPIRIT_PORTRAITS[spirit.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); const displayName = spirit.nickname ? `${spirit.nickname} (${spirit.name})` : spirit.name; const typeColors = { flame: '#FF6B35', water: '#4ECDC4', earth: '#8B7355', wind: '#A8E6CF', light: '#FFE66D', shadow: '#6B5B95', }; const typeColor = typeColors[spirit.type] || '#8b7355'; return `

${isEmoji ? `${portrait}` : `

` }

${displayName}

${spirit.type ? spirit.type.charAt(0).toUpperCase() + spirit.type.slice(1) : 'Unknown'} Spirit

Lv. ${spirit.level ?? 1}

HP: ${spirit.hp ?? '?'}/${spirit.maxHp ?? '?'}

ATK: ${spirit.attack ?? '?'}

DEF: ${spirit.defense ?? '?'}

SPD: ${spirit.speed ?? '?'}

${spirit.moves && spirit.moves.length > 0 ? `

Moves:

${spirit.moves.slice(0, 4).map(move => ` ${move.name} `).join('')}

` : ''}

`; }; if (duelStakeOpen && !duelFinalConfirmation) { // === STAKE SELECTION SCREEN - Ghibli Parchment Style === const spiritButtons = stakableSpirits.map((spirit, idx) => { const originalIdx = spirits.findIndex(s => s.id === spirit.id); const isSelected = duelMyStake && duelMyStake.id === spirit.id; const isHovered = duelHoveredSpiritIndex === originalIdx; const portrait = SPIRIT_PORTRAITS[spirit.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); const displayName = spirit.nickname || spirit.name; const level = spirit.level ?? 1; return ` `; }).join(''); // Render my stake slot (with hover for details) - Parchment style const myStakeDisplayName = duelMyStake ? (duelMyStake.nickname ? `${duelMyStake.nickname} (${duelMyStake.name})` : duelMyStake.name) : ''; const myStakeSlot = duelMyStake ? `

${(() => { const portrait = SPIRIT_PORTRAITS[duelMyStake.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); return isEmoji ? `${portrait}` : `

`; })()}

${duelMyStake.level ?? 1}

${myStakeDisplayName}

` : `

No Stake

`; // Render their stake slot (with hover for details) - Parchment style const theirStakeDisplayName = duelTheirStake ? (duelTheirStake.nickname ? `${duelTheirStake.nickname} (${duelTheirStake.name})` : duelTheirStake.name) : ''; const theirStakeSlot = duelTheirStake ? `

${(() => { const portrait = SPIRIT_PORTRAITS[duelTheirStake.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); return isEmoji ? `${portrait}` : `

`; })()}

${duelTheirStake.level ?? 1}

${theirStakeDisplayName}

` : `

No Stake

`; html += `

⚔️ Spirit Duel ⚔️

vs ${duelOpponentName}

Your Stake

${myStakeSlot}

${duelMyConfirmed ? '✓ Locked In' : 'Select below...'}

◆

${duelOpponentName}'s Stake

${theirStakeSlot}

${duelTheirConfirmed ? '✓ Locked In' : 'Waiting...'}

${duelMyConfirmed ? 'Your stake is locked!' : 'Select a spirit to wager (or leave empty):'}

${canStake && stakableSpirits.length > 0 ? `

${spiritButtons}

` : `

${spirits.length < 2 ? "You need at least 2 spirits to stake one." : "All your spirits are in your active team."}

${hoveredSpirit ? renderSpiritDetails(hoveredSpirit) : `

✨

Hover over a spirit to see its stats

${!duelMyConfirmed ? ` ` : ''}

`; } // === FINAL CONFIRMATION SCREEN - Warm Parchment Style === if (duelStakeOpen && duelFinalConfirmation) { // Build display for my stake const myFinalDisplayName = duelMyStake ? (duelMyStake.nickname ? `${duelMyStake.nickname} (${duelMyStake.name})` : duelMyStake.name) : ''; const myFinalStake = duelMyStake ? `

${(() => { const portrait = SPIRIT_PORTRAITS[duelMyStake.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); return isEmoji ? `${portrait}` : `

`; })()}

${duelMyStake.level ?? 1}

${myFinalDisplayName}

` : `

Nothing

`; // Build display for their stake const theirFinalDisplayName = duelTheirStake ? (duelTheirStake.nickname ? `${duelTheirStake.nickname} (${duelTheirStake.name})` : duelTheirStake.name) : ''; const theirFinalStake = duelTheirStake ? `

${(() => { const portrait = SPIRIT_PORTRAITS[duelTheirStake.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); return isEmoji ? `${portrait}` : `

`; })()}

${duelTheirStake.level ?? 1}

${theirFinalDisplayName}

` : `

Nothing

`; html += `

⚔️ Final Stakes ⚔️

The loser forfeits their staked spirit

You Risk

${myFinalStake}

❧

${duelOpponentName} Risks

${theirFinalStake}

Your Spirit

${duelMyStake ? `

HP: ${duelMyStake.hp ?? '?'}/${duelMyStake.maxHp ?? '?'}

ATK: ${duelMyStake.attack ?? '?'} | DEF: ${duelMyStake.defense ?? '?'}

Type: ${duelMyStake.type ? duelMyStake.type.charAt(0).toUpperCase() + duelMyStake.type.slice(1) : '?'}

` : `

No spirit at risk

Their Spirit

${duelTheirStake ? `

HP: ${duelTheirStake.hp ?? '?'}/${duelTheirStake.maxHp ?? '?'}

ATK: ${duelTheirStake.attack ?? '?'} | DEF: ${duelTheirStake.defense ?? '?'}

Type: ${duelTheirStake.type ? duelTheirStake.type.charAt(0).toUpperCase() + duelTheirStake.type.slice(1) : '?'}

` : `

No spirit at risk

⚠️ This cannot be undone. Winner takes all.

${duelFinalConfirmed ? '✓ You: Ready' : '○ You: Deciding...'}

${duelTheirFinalConfirmed ? '✓ ' + duelOpponentName + ': Ready' : '○ ' + duelOpponentName + ': Deciding...'}

`; } // === TRADE WINDOW === const tradeOpen = state.tradeOpen; const tradePartnerName = state.tradePartnerName ?? 'Player'; const tradeMyItems = state.tradeMyItems ?? new Array(12).fill(null); const tradeMySpirit = state.tradeMySpirit; const tradeTheirItems = state.tradeTheirItems ?? new Array(12).fill(null); const tradeTheirSpirit = state.tradeTheirSpirit; const tradeMyConfirmed = state.tradeMyConfirmed ?? false; const tradeTheirConfirmed = state.tradeTheirConfirmed ?? false; const inventorySlots = state.inventorySlots ?? []; const team = state.team ?? []; if (tradeOpen) { // Build my item slots (clickable to remove) const myItemSlots = tradeMyItems.map((item, i) => { const hasItem = item !== null; const itemData = hasItem ? ITEM_DATABASE[item.type] : null; return `

${hasItem && itemData ? `

` : ''}

`; }).join(''); // Build their item slots (display only) const theirItemSlots = tradeTheirItems.map((item, i) => { const hasItem = item !== null; const itemData = hasItem ? ITEM_DATABASE[item.type] : null; return `

${hasItem && itemData ? `

` : ''}

`; }).join(''); // Build inventory for selecting items to trade const inventoryItems = inventorySlots.map((item, i) => { if (!item) return ''; const itemData = ITEM_DATABASE[item.type]; if (!itemData) return ''; return ` `; }).join(''); // Element styles for tooltips const tradeElementStyles = { flame: { color: '#c75a2a', icon: '🔥' }, water: { color: '#4a8f8f', icon: '💧' }, earth: { color: '#8B7355', icon: '🪨' }, wind: { color: '#6a9b6a', icon: '🍃' }, light: { color: '#b8860b', icon: '☀️' }, dark: { color: '#483d8b', icon: '🌙' }, primordial: { color: '#B8860B', icon: '✧' }, }; // Helper to build spirit tooltip HTML const buildSpiritTooltip = (spirit) => { const elemStyle = tradeElementStyles[spirit.type] || tradeElementStyles.earth; const displayName = spirit.nickname || spirit.name; const hasNickname = !!spirit.nickname; const abilities = spirit.abilities || ['Tackle', 'Defend']; const abilitiesHtml = abilities.map(ab => '' + ab + '').join(' '); let html = '

'; html += '

' + displayName + '

'; if (hasNickname) { html += '

(' + spirit.name + ')

'; } html += '

'; html += elemStyle.icon + ' ' + spirit.type + ' • Lv.' + (spirit.level ?? 1); html += '

'; html += '

HP: ' + (spirit.hp ?? spirit.maxHp ?? 50) + '/' + (spirit.maxHp ?? 50) + '

'; html += '

ATK: ' + (spirit.atk ?? 10) + '

'; html += '

DEF: ' + (spirit.def ?? 8) + '

'; html += '

SPD: ' + (spirit.spd ?? 10) + '

'; html += '

Abilities:

'; html += '

' + abilitiesHtml + '

'; html += '

'; return html; }; // Spirit slots display with portraits (no tooltips - using preview panel instead) const mySpiritSlot = tradeMySpirit ? (() => { const portrait = SPIRIT_PORTRAITS[tradeMySpirit.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); const displayName = tradeMySpirit.nickname || tradeMySpirit.name; const hasNickname = !!tradeMySpirit.nickname; const spiritDataStr = JSON.stringify(tradeMySpirit).replace(/"/g, '"'); return `

${isEmoji ? `${portrait}` : `

` }

${displayName}

${hasNickname ? `

(${tradeMySpirit.name})

` : ''}

Lv.${tradeMySpirit.level ?? 1}

`; })() : `

No spirit offered

`; const theirSpiritSlot = tradeTheirSpirit ? (() => { const portrait = SPIRIT_PORTRAITS[tradeTheirSpirit.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); const displayName = tradeTheirSpirit.nickname || tradeTheirSpirit.name; const hasNickname = !!tradeTheirSpirit.nickname; const spiritDataStr = JSON.stringify(tradeTheirSpirit).replace(/"/g, '"'); return `

${isEmoji ? `${portrait}` : `

` }

${displayName}

${hasNickname ? `

(${tradeTheirSpirit.name})

` : ''}

Lv.${tradeTheirSpirit.level ?? 1}

`; })() : `

No spirit offered

`; // Spirit collection thumbnails - scrollable grid (no hover tooltips - using preview panel instead) const spirits = state.spirits ?? []; const spiritThumbnails = spirits.map((spirit, i) => { const isSelected = tradeMySpirit && tradeMySpirit.id === spirit.id; const portrait = SPIRIT_PORTRAITS[spirit.name] || '🔮'; const isEmoji = !portrait.startsWith('/'); const displayName = spirit.nickname || spirit.name; // Store spirit data as JSON for the hover handler const spiritDataStr = JSON.stringify(spirit).replace(/"/g, '"'); return ` `; }).join(''); // Show error if trying invalid spirit trade const spiritWarning = (tradeMySpirit && !tradeTheirSpirit) || (!tradeMySpirit && tradeTheirSpirit) ? `

⚠️ Waiting for partner to offer a spirit too

` : ''; // Can confirm? const canConfirm = !((tradeMySpirit && !tradeTheirSpirit) || (!tradeMySpirit && tradeTheirSpirit)); html += `

🔮 Your Spirits

${spiritThumbnails || '

No spirits yet

Click to offer • 1-for-1 only

🔄 Trade with ${tradePartnerName}

Your Offer

${mySpiritSlot}

Items:

${myItemSlots}

${tradeMyConfirmed ? `

✓ Confirmed

` : ''}

${tradePartnerName}'s Offer

${theirSpiritSlot}

Items:

${theirItemSlots}

${tradeTheirConfirmed ? `

✓ Confirmed

` : ''}

${spiritWarning}

✨ Hover over a spirit or item to see details ✨

Your Items (click to add)

${inventoryItems || 'No items'}

`; } return html; } export default function(localPlayer, world) { // Find this player's stats holder const statsHolders = world.query({ tags: ["stats-holder"] }); const myStatsHolder = statsHolders.find(h => h.tags.includes(`player-${localPlayer.id}`)); if (!myStatsHolder) { return ''; // No stats holder yet } const state = myStatsHolder.state ?? {}; // ============================================ // AUTO-SAVE SYSTEM // ============================================ // Saves progress to browser localStorage every 60 seconds // Restore happens when player clicks Start button (see menu UI below) const SAVE_KEY = 'drift_save_' + localPlayer.id; const AUTO_SAVE_INTERVAL = 60000; // 60 seconds // Initialize auto-save tracking (only once per page load) if (!window._autoSaveInitialized) { window._autoSaveInitialized = true; window._lastAutoSaveTime = 0; } // Current player progress state const currentSpirits = state.spirits ?? []; const hasProgress = currentSpirits.length > 0; // === AUTO-SAVE LOGIC === // Runs every 60 seconds if player has progress const now = Date.now(); const timeSinceLastSave = now - (window._lastAutoSaveTime || 0); if (hasProgress && timeSinceLastSave > AUTO_SAVE_INTERVAL) { window._lastAutoSaveTime = now; try { // Build save data object with only the important stuff const saveData = { savedAt: now, spirits: state.spirits ?? [], team: state.team ?? [null, null, null, null, null], dewdrops: state.dewdrops ?? 500, inventorySlots: state.inventorySlots ?? [], quests: state.quests ?? {}, bondingCrystals: state.bondingCrystals ?? 0, }; localStorage.setItem(SAVE_KEY, JSON.stringify(saveData)); // Show subtle save indicator (only if not in battle) if (!state.inBattle && !window._savingIndicatorShown) { window._savingIndicatorShown = true; setTimeout(() => { window._savingIndicatorShown = false; }, 2000); } } catch (e) { // Silently fail if localStorage is full or unavailable } } // Helper function to manually trigger save (called after important events) // This is exposed on window so sendAction handlers can call it window._triggerManualSave = function() { if (!hasProgress) return; try { const saveData = { savedAt: Date.now(), spirits: state.spirits ?? [], team: state.team ?? [null, null, null, null, null], dewdrops: state.dewdrops ?? 500, inventorySlots: state.inventorySlots ?? [], quests: state.quests ?? {}, bondingCrystals: state.bondingCrystals ?? 0, }; localStorage.setItem(SAVE_KEY, JSON.stringify(saveData)); window._lastAutoSaveTime = Date.now(); } catch (e) { // Silent fail } }; // ============================================ // Build save indicator HTML (shows briefly after auto-save) const saveIndicatorHtml = window._savingIndicatorShown ? `

💾 Progress saved

` : ''; // === MENU STATE UI (Fullscreen splash when player is in sky lobby) === if (state.inMenuState) { // Reset the fade-in flag so it can trigger when we exit menu window._gameFadeInComplete = false; return `

${Array.from({length: 5}, (_, i) => `

`).join('')}

${Array.from({length: 15}, (_, i) => `

`).join('')}

${Array.from({length: 40}, (_, i) => `

`).join('')}

Spirit-Catching RPG

`; } // === QUEST COMPLETION POPUP === // Check if there's a quest completion to show const questPopup = state.questCompletionPopup; let questCompletionPopupHtml = ''; if (questPopup && questPopup.showUntil > Date.now()) { const rewards = questPopup.rewards ?? {}; // Build reward items HTML let rewardItemsHtml = ''; // Dewdrops reward if (rewards.dewdrops) { rewardItemsHtml += `

${rewards.dewdrops.toLocaleString()} dewdrops

`; } // Item rewards if (rewards.items && rewards.items.length > 0) { for (const item of rewards.items) { const itemInfo = ITEM_DATABASE[item.id]; if (itemInfo) { rewardItemsHtml += `

${item.count}x ${itemInfo.name}

`; } } } questCompletionPopupHtml = `

⭐

Quest Complete

${questPopup.questTitle}

Rewards Received

${rewardItemsHtml}

`; } const dialogue = state.activeDialogue; const zoneBanner = renderZoneBanner(state); const hudBar = renderHudBar(state); // === DEBUG PANEL === const showDebug = window._showDebugPanel === true; const debugPanel = showDebug ? renderDebugPanel() : ''; // === BATTLE UI (takes priority over everything) === if (state.inBattle && state.battleData) { return renderBattleUI(state) + questCompletionPopupHtml + debugPanel; } // Reset battle trackers when not in battle window._lastBattleMessageKey = 0; window._battlePopupExpireTime = 0; window._battleMoveLocked = false; // Check LOCAL window state for panel visibility (instant, no server round-trip) const showSpirits = window._showSpirits === true; const showInventory = window._showInventory === true; const showMap = window._showMap === true; const showQuestLog = window._showQuestLog === true; const showSpiritCodex = window._showSpiritCodex === true; // MMO-style panels - all render alongside game, not blocking it const spiritsPanel = showSpirits ? renderSpiritsMenu(state) : ''; const inventoryPanel = showInventory ? renderInventoryMenu(state) : ''; const mapPanel = showMap ? renderMap(state, localPlayer) : ''; const questLogPanel = showQuestLog ? renderQuestLog(state) : ''; const spiritCodexPanel = showSpiritCodex ? renderSpiritCodex(state) : ''; const questTracker = renderQuestTracker(state); // Admin panels const spiritDatabasePanel = state.adminSpiritDatabaseOpen ? renderSpiritDatabase(state) : ''; const abilitiesDatabasePanel = state.adminAbilitiesDatabaseOpen ? renderAbilitiesDatabase(state) : ''; const codexPanel = state.adminCodexOpen ? renderCodex(state) : ''; // Shop panel const shopPanel = state.shopOpen ? renderShopUI(state) : ''; // Storage panel const storagePanel = state.storageOpen ? renderStorageUI(state) : ''; // Player interaction UI (looking at other players, trade/duel menus) const playerInteractionUI = renderPlayerInteractionUI(state, localPlayer.id); // If no dialogue active, show zone banner, HUD, and any open panels if (!dialogue) { // Fade in from black only once when transitioning from menu let fadeInOverlay = ''; if (!window._gameFadeInComplete) { window._gameFadeInComplete = true; // Use a unique ID so we can target it const fadeId = 'game-fade-in-' + Date.now(); // Schedule opacity change after a tiny delay (lets the DOM render first) setTimeout(() => { const el = document.getElementById(fadeId); if (el) el.style.opacity = '0'; }, 50); fadeInOverlay = `

`; } return zoneBanner + hudBar + spiritsPanel + inventoryPanel + mapPanel + questLogPanel + spiritCodexPanel + questTracker + spiritDatabasePanel + abilitiesDatabasePanel + codexPanel + shopPanel + storagePanel + playerInteractionUI + questCompletionPopupHtml + fadeInOverlay + debugPanel + saveIndicatorHtml; } // Check if this is spirit dialogue (during bonding cutscene) const isSpiritDialogue = dialogue.isSpiritDialogue; const spiritType = dialogue.spiritType; // Spirit colors for name styling const spiritColors = { ember: { name: "#FF6B35", glow: "rgba(255, 107, 53, 0.4)" }, brook: { name: "#4ECDC4", glow: "rgba(78, 205, 196, 0.4)" }, pebble: { name: "#8B7355", glow: "rgba(139, 115, 85, 0.4)" }, }; const spiritStyle = isSpiritDialogue && spiritType ? spiritColors[spiritType] : null; // Build response options if any const options = (dialogue.options ?? []).map((opt, i) => ` `).join(''); const optionsSection = dialogue.options?.length ? `

${options}

` : `

Click or press Space to continue...

`; // NPC portraits - select based on speaker name const npcPortraits = { 'Aeris': { image: '/cdn/image-anime-character-full-portrait-headroom-tribal-priestess-girl-orange-hair-bright-blue-eyes-white-feathered-headdress-white-dress-feathers-turquoise-necklace-soft-smile-chest-up-with-space-above-head-transparent-bg-v3.png', glow: 'rgba(255, 200, 100, 0.4)', }, 'Lunara': { image: '/cdn/image-anime-character-full-portrait-headroom-gentle-healer-woman-long-flowing-silver-blue-hair-soft-violet-purple-eyes-teal-blue-kimono-robes-brown-obi-sash-cream-wrap-skirt-glowing-crystal-pendant-serene-kind-expression-chest-up-plenty-space-above-head-transparent-bg.png', glow: 'rgba(136, 221, 255, 0.4)', }, 'Mira': { image: '/cdn/image-anime-character-full-portrait-headroom-young-woman-warm-brown-eyes-chestnut-braided-hair-friendly-smile-earth-toned-merchant-outfit-brown-vest-cream-blouse-soft-lighting-chest-up-with-space-above-head-transparent-bg.png', glow: 'rgba(200, 150, 100, 0.4)', }, 'Elder Bramwell': { image: '/cdn/image-anime-portrait-elderly-man-long-white-beard-kind-wrinkled-face-wise-eyes-simple-robes-wooden-staff-warm-gentle-expression-chest-up-space-above-head-ghibli-style-transparent-bg.png', glow: 'rgba(180, 160, 140, 0.4)', }, 'Finn': { image: '/cdn/image-anime-portrait-young-boy-teenager-messy-brown-hair-bright-eager-eyes-freckles-simple-tunic-excited-expression-adventurous-chest-up-space-above-head-ghibli-style-transparent-bg.png', glow: 'rgba(150, 200, 120, 0.4)', }, 'Garrick': { image: '/cdn/image-anime-character-full-portrait-headroom-middle-aged-man-friendly-face-short-brown-hair-grey-streaks-stubble-warm-brown-eyes-simple-brown-tunic-leather-apron-work-gloves-sturdy-build-kind-smile-chest-up-space-above-head-transparent-bg.png', glow: 'rgba(139, 115, 85, 0.4)', }, }; // Get portrait for current speaker const speakerPortrait = npcPortraits[dialogue.speaker]; const showPortrait = !isSpiritDialogue && speakerPortrait; // Portrait section - show for NPCs with portraits, not during spirit dialogue const portraitSection = showPortrait ? `

` : ''; // Adjust padding based on whether portrait is shown const contentPadding = showPortrait ? "p-6 pl-48" : "p-6"; // Speaker name style - elemental color for spirits const speakerNameStyle = spiritStyle ? `color: ${spiritStyle.name}; text-shadow: 0 0 15px ${spiritStyle.glow}, 0 1px 0 rgba(255,255,255,0.5);` : `color: #5a4632; text-shadow: 0 1px 0 rgba(255,255,255,0.5);`; return `

${zoneBanner} ${hudBar}

${showPortrait ? `

✦

✧

` : ''}

✦

✧

${dialogue.speaker} ${dialogue.role ? `${dialogue.role}` : ''}

${dialogue.text}

${dialogue.options?.length ? `

${(dialogue.options ?? []).map((opt, i) => ` `).join('')}

` : `

❧ Click or press Space to continue... ❧

${!dialogue.options?.length ? `

` : ''}

${spiritsPanel} ${inventoryPanel} ${mapPanel} ${questCompletionPopupHtml} `; } // Zone banner that slides in from the top when entering a new area function renderZoneBanner(state) { // Only show if we have a zone and we're within the show window if (!state?.currentZone || !state?.zoneBannerShowUntil) return ''; const now = Date.now(); if (now > state.zoneBannerShowUntil) return ''; // Banner expired const zoneName = state.currentZone; const subtitle = state.zoneSubtitle ?? ''; // Use a unique key based on the timestamp to identify this specific banner instance const bannerKey = state.zoneBannerShowUntil; // Client-side deduplication: track which banner we've already started showing // This prevents re-renders from restarting the animation if (window._lastShownBannerKey === bannerKey) { // Already showing this exact banner - check if it should still be visible const elapsed = now - (bannerKey - 4000); // Time since banner started if (elapsed > 4000) { return ''; // Animation complete } // Continue showing the current banner (don't restart animation) } else { // New banner! Mark it as shown window._lastShownBannerKey = bannerKey; } return `

❧

${zoneName}

${subtitle ? `

${subtitle}

` : ''}

`; } // Beautiful parchment-style map panel function renderMap(state, localPlayer) { const playerPos = localPlayer.feetPosition ?? { x: 0, z: 0 }; // Map settings - responsive scaling based on screen size // Base size is 2x larger, but scales down on smaller screens const screenWidth = typeof window !== 'undefined' ? window.innerWidth : 1920; const screenHeight = typeof window !== 'undefined' ? window.innerHeight : 1080; const scaleFactor = Math.min(1, Math.min(screenWidth / 1400, screenHeight / 900)); const baseMapWidth = 1200; const baseMapHeight = 760; const mapWidth = Math.round(baseMapWidth * scaleFactor); const mapHeight = Math.round(baseMapHeight * scaleFactor); const worldScale = 0.46 * scaleFactor; // pixels per world unit (zoomed out for exploration) const villageCenter = { x: 0, z: -18 }; // Convert world position to map position const worldToMap = (wx, wz) => { const mx = (wx - villageCenter.x) * worldScale + mapWidth / 2; const my = (wz - villageCenter.z) * worldScale + mapHeight / 2; return { x: Math.max(15, Math.min(mapWidth - 15, mx)), y: Math.max(15, Math.min(mapHeight - 15, my)) }; }; const playerMapPos = worldToMap(playerPos.x, playerPos.z); // Village landmarks const landmarks = [ { wx: 0, wz: -15, icon: "⛩️", size: "lg", label: "Whisperwind Village" }, // Spirit Shrine marks Whisperwind { wx: -26, wz: 599, icon: "🔥", size: "lg", label: "Emberhollow" }, // Flame icon for Emberhollow ]; const landmarkElements = landmarks.map(l => { const pos = worldToMap(l.wx, l.wz); const iconSize = l.size === 'lg' ? 'text-xl' : l.size === 'md' ? 'text-lg' : 'text-base'; return `

${l.icon}

`; }).join(''); // Path from Whisperwind to Emberhollow (dotted line) const whisperwindPos = worldToMap(0, -15); const emberhollowPos = worldToMap(-26, 599); const zIndex = (window._topPanel === 'map') ? 102 : 100; const panelWidth = mapWidth + 56; const defaultX = Math.max(20, (screenWidth - panelWidth) / 2); const defaultY = Math.max(80, (screenHeight - mapHeight - 120) / 2); return `

🗺️

Whisperwind Region

Northern
Wildlands

Eastern
Grasslands

The Sweeping
Plains

Southern
Reaches

Whisperwind Village

Emberhollow

🌲

🌳

🌲

🌳

🌲

🌳

🌲

${landmarkElements}

`; } // === SHOP UI === function renderShopUI(state) { const dewdrops = state.dewdrops ?? 0; // Get all shop items from the central database const shopItems = Object.values(ITEM_DATABASE); const itemCards = shopItems.map(item => { const canAfford = dewdrops >= item.price; const bgColor = canAfford ? 'rgba(122, 155, 109, 0.15)' : 'rgba(139, 115, 85, 0.1)'; const borderColor = canAfford ? '#7a9b6d' : '#8b7355'; return `

${item.name}

${item.description}

${item.price}

${canAfford ? ` ` : ` Can't afford `}

`; }).join(''); return `

🏪 Mira's Shop

${dewdrops.toLocaleString()}

${itemCards}

`; } // === STORAGE UI (warehouse/bank system) === function renderStorageUI(state) { const inventorySlots = state.inventorySlots ?? []; const storageSlots = state.storageSlots ?? new Array(24).fill(null); // Helper to get item info from database const getItemInfo = (item) => { if (!item) return null; const dbItem = ITEM_DATABASE[item.type]; if (dbItem) { return { name: dbItem.name, desc: dbItem.description, icon: dbItem.icon, color: dbItem.color, isSprite: true, }; } // Fallback for legacy items return { name: item.name ?? item.type, desc: '', icon: '📦', color: '#8b7355', isSprite: false, }; }; // Build inventory slots (left side - 16 slots in 4x4 grid) const inventorySlotElements = inventorySlots.slice(0, 16).map((slot, i) => { if (slot && slot.type) { const itemInfo = getItemInfo(slot); return `

${slot.count > 1 ? `×${slot.count}` : ''}

`; } else { return `

`; } }).join(''); // Build storage slots (right side - 24 slots in 4x6 grid) const storageSlotElements = storageSlots.map((slot, i) => { if (slot && slot.type) { const itemInfo = getItemInfo(slot); return `

${slot.count > 1 ? `×${slot.count}` : ''}

`; } else { return `

`; } }).join(''); // Drag initialization for storage system const dragInitScript = ` `; return ` ${dragInitScript}

📦 Garrick's Warehouse

🎒 Your Inventory

${inventorySlotElements}

Items here can be used in battle

⟷

Drag items
to transfer

📦 Storage (24 slots)

${storageSlotElements}

Safe keeping - not available in battle

💡 Tip: Store extra Bonding Crystals and potions here for safekeeping!

`; } // === HUD BAR (top-right corner) === function renderHudBar(state) { const spirits = state.spirits ?? []; const inventory = state.inventory ?? {}; const bondingCrystals = inventory.bondingCrystals ?? 3; const team = state.team ?? []; // Element styles for team bar const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥' }, water: { color: '#4ECDC4', bgColor: 'rgba(78, 205, 196, 0.15)', icon: '💧' }, earth: { color: '#8B7355', bgColor: 'rgba(139, 115, 85, 0.15)', icon: '🪨' }, wind: { color: '#90EE90', bgColor: 'rgba(144, 238, 144, 0.15)', icon: '🍃' }, light: { color: '#DAA520', bgColor: 'rgba(218, 165, 32, 0.15)', icon: '☀️' }, dark: { color: '#6A5ACD', bgColor: 'rgba(106, 90, 205, 0.15)', icon: '🌙' }, }; // Spirit portraits - all available spirits in the game // Starters are cute chibi style, advanced spirits are majestic/dramatic const spiritPortraits = { // Starter spirits (cute chibi style) Ember: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', Brook: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', Pebble: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-rocky-chibi-transparent.png', Zephyr: '/cdn/sprite-ghibli-cute-wind-hare-spirit-white-mint-feathery-chibi-transparent.png', Lumina: '/cdn/sprite-ghibli-cute-light-moth-spirit-golden-warm-glowing-chibi-transparent.png', Nyx: '/cdn/sprite-ghibli-cute-dark-cat-spirit-purple-shadow-mysterious-chibi-transparent.png', // Starter evolution mediums Flarekin: '/cdn/sprite-ghibli-elegant-flame-fox-spirit-crimson-gold-fierce-flowing-tail-transparent.png', Coraline: '/cdn/sprite-ghibli-elegant-water-koi-dragon-spirit-sapphire-silver-graceful-transparent.png', Boulderkin: '/cdn/sprite-ghibli-sturdy-earth-golem-spirit-granite-moss-armored-stoic-transparent.png', Galewing: '/cdn/sprite-ghibli-swift-wind-hare-spirit-silver-teal-long-ears-elegant-transparent.png', Aurelis: '/cdn/sprite-ghibli-radiant-light-moth-spirit-golden-white-luminous-wings-elegant-transparent.png', Umbris: '/cdn/sprite-ghibli-sleek-shadow-cat-spirit-midnight-purple-glowing-eyes-elegant-transparent.png', // Starter evolution advanced Pyranthos: '/cdn/sprite-ghibli-majestic-nine-tailed-flame-fox-spirit-white-gold-fire-divine-dramatic-transparent.png', Tsunamara: '/cdn/sprite-ghibli-majestic-water-dragon-koi-spirit-azure-pearl-flowing-whiskers-dramatic-transparent.png', Terradon: '/cdn/sprite-ghibli-ancient-mountain-golem-spirit-obsidian-crystal-massive-dramatic-transparent.png', Cyclonix: '/cdn/sprite-ghibli-majestic-storm-hare-spirit-white-lightning-crackling-ears-dramatic-transparent.png', Solarius: '/cdn/sprite-ghibli-divine-sun-moth-spirit-platinum-gold-radiant-six-wings-dramatic-transparent.png', Eclipsar: '/cdn/sprite-ghibli-majestic-void-panther-spirit-black-purple-cosmic-eyes-dramatic-transparent.png', // Pre-rare basics Flickling: '/cdn/sprite-ghibli-cute-flame-chick-spirit-orange-tiny-wings-chibi-transparent.png', Bubbling: '/cdn/sprite-ghibli-cute-water-seahorse-baby-spirit-cyan-tiny-chibi-transparent.png', Pebblet: '/cdn/sprite-ghibli-cute-baby-tortoise-spirit-brown-tiny-shell-chibi-transparent.png', Wisplet: '/cdn/sprite-ghibli-cute-wind-chick-spirit-silver-fluffy-tiny-chibi-transparent.png', Glowmote: '/cdn/sprite-ghibli-cute-light-orb-spirit-golden-tiny-sparkle-chibi-transparent.png', Shadowkit: '/cdn/sprite-ghibli-cute-shadow-raven-chick-spirit-purple-tiny-chibi-transparent.png', // Advanced spirits (mid-tier elegant style) Solara: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', Tideling: '/cdn/sprite-ghibli-elegant-water-seahorse-spirit-flowing-fins-luminous-teal-transparent.png', Terravox: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-mossy-transparent.png', Gale: '/cdn/sprite-ghibli-fierce-wind-falcon-spirit-silver-swift-piercing-eyes-transparent.png', Seraphine: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', Vesperon: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', // Post-rare advanced Phoenixia: '/cdn/sprite-ghibli-divine-flame-phoenix-spirit-white-gold-rebirth-flames-dramatic-transparent.png', Leviathos: '/cdn/sprite-ghibli-majestic-sea-leviathan-spirit-deep-blue-ancient-colossal-dramatic-transparent.png', Colossadon: '/cdn/sprite-ghibli-ancient-world-turtle-spirit-mountain-shell-colossal-dramatic-transparent.png', Stormravian: '/cdn/sprite-ghibli-legendary-storm-eagle-spirit-silver-lightning-wings-dramatic-transparent.png', Celestine: '/cdn/sprite-ghibli-divine-celestial-crane-spirit-platinum-rainbow-wings-dramatic-transparent.png', Nocturnax: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-black-cosmic-feathers-dramatic-transparent.png', // Batch 1: Canine, Serpent, Golem, Fairy, Insect, Shadow lines Cinderpup: '/cdn/sprite-ghibli-cute-flame-puppy-spirit-orange-ember-fluffy-small-chibi-transparent.png', Blazehound: '/cdn/sprite-ghibli-sleek-flame-hound-spirit-red-orange-fierce-elegant-transparent.png', Infernowolf: '/cdn/sprite-ghibli-majestic-inferno-wolf-spirit-black-red-flame-mane-fierce-dramatic-transparent.png', Droplet: '/cdn/sprite-ghibli-cute-water-droplet-spirit-blue-translucent-blob-chibi-transparent.png', Streamling: '/cdn/sprite-ghibli-elegant-water-serpent-spirit-flowing-blue-teal-graceful-transparent.png', Torrentis: '/cdn/sprite-ghibli-majestic-water-dragon-spirit-deep-blue-silver-scales-powerful-dramatic-transparent.png', Mudling: '/cdn/sprite-ghibli-cute-mud-blob-spirit-brown-earthy-round-chibi-transparent.png', Claywarden: '/cdn/sprite-ghibli-armored-clay-golem-spirit-terracotta-orange-stoic-guardian-transparent.png', Obsidianite: '/cdn/sprite-ghibli-majestic-obsidian-golem-spirit-black-volcanic-crystal-imposing-dramatic-transparent.png', Breezeling: '/cdn/sprite-ghibli-cute-wind-fairy-spirit-mint-green-wispy-small-chibi-transparent.png', Gustwing: '/cdn/sprite-ghibli-swift-wind-hawk-spirit-silver-teal-feathers-elegant-transparent.png', Tempestrix: '/cdn/sprite-ghibli-majestic-storm-phoenix-spirit-purple-lightning-fierce-dramatic-transparent.png', Glimmer: '/cdn/sprite-ghibli-cute-light-firefly-spirit-golden-sparkly-tiny-chibi-transparent.png', Luxwing: '/cdn/sprite-ghibli-elegant-light-butterfly-spirit-iridescent-gold-white-graceful-transparent.png', Radiantia: '/cdn/sprite-ghibli-majestic-light-dragon-spirit-white-gold-radiant-wings-divine-dramatic-transparent.png', Shadeling: '/cdn/sprite-ghibli-cute-shadow-wisp-spirit-purple-black-smoky-chibi-transparent.png', Duskweaver: '/cdn/sprite-ghibli-mysterious-shadow-spider-spirit-dark-purple-elegant-sinister-transparent.png', Umbralith: '/cdn/sprite-ghibli-terrifying-shadow-beast-spirit-black-purple-void-eyes-menacing-dramatic-transparent.png', // Batch 2: Salamander, Jellyfish, Mole, Cloud, Deer, Bat lines Sizzlescale: '/cdn/sprite-ghibli-cute-flame-salamander-spirit-orange-red-tiny-scales-chibi-transparent.png', Magmalisk: '/cdn/sprite-ghibli-sleek-magma-lizard-spirit-red-black-molten-cracks-elegant-transparent.png', Volcanorus: '/cdn/sprite-ghibli-majestic-volcanic-dragon-salamander-spirit-obsidian-lava-veins-dramatic-transparent.png', Jellydrop: '/cdn/sprite-ghibli-cute-jellyfish-spirit-translucent-blue-tiny-bell-chibi-transparent.png', Driftbell: '/cdn/sprite-ghibli-elegant-jellyfish-spirit-luminous-teal-flowing-tendrils-graceful-transparent.png', Abyssalume: '/cdn/sprite-ghibli-majestic-deep-sea-jellyfish-spirit-bioluminescent-purple-blue-ethereal-dramatic-transparent.png', Burrowkit: '/cdn/sprite-ghibli-cute-mole-spirit-brown-fuzzy-tiny-claws-chibi-transparent.png', Terramole: '/cdn/sprite-ghibli-sturdy-giant-mole-spirit-brown-armored-claws-powerful-transparent.png', Quakebeast: '/cdn/sprite-ghibli-massive-earth-beast-spirit-brown-stone-plates-seismic-dramatic-transparent.png', Cloudpuff: '/cdn/sprite-ghibli-cute-cloud-spirit-fluffy-white-tiny-wings-chibi-transparent.png', Nimbuswing: '/cdn/sprite-ghibli-graceful-cloud-bird-spirit-white-silver-wispy-feathers-elegant-transparent.png', Stratosoul: '/cdn/sprite-ghibli-majestic-stratosphere-spirit-white-gold-ethereal-cloud-form-dramatic-transparent.png', Fawnlight: '/cdn/sprite-ghibli-cute-light-fawn-spirit-white-gold-spots-tiny-chibi-transparent.png', Gleamstag: '/cdn/sprite-ghibli-elegant-light-stag-spirit-white-gold-glowing-antlers-majestic-transparent.png', Auroralope: '/cdn/sprite-ghibli-majestic-aurora-elk-spirit-white-rainbow-antlers-ethereal-dramatic-transparent.png', Squeakwing: '/cdn/sprite-ghibli-cute-bat-spirit-purple-tiny-fangs-fluffy-chibi-transparent.png', Nightfang: '/cdn/sprite-ghibli-sleek-vampire-bat-spirit-dark-purple-red-eyes-elegant-transparent.png', Dreadwyvern: '/cdn/sprite-ghibli-terrifying-dark-wyvern-spirit-black-red-demonic-wings-dramatic-transparent.png', // Batch 3: Dragon, Frog, Crystal, Butterfly, Rabbit, Snake lines Drakeling: '/cdn/sprite-ghibli-cute-baby-dragon-spirit-orange-red-tiny-wings-chibi-transparent.png', Wyrmblaze: '/cdn/sprite-ghibli-elegant-flame-dragon-spirit-red-gold-fierce-fire-breath-transparent.png', Infernodrake: '/cdn/sprite-ghibli-majestic-elder-dragon-spirit-crimson-black-massive-wings-dramatic-transparent.png', Puddlehopper: '/cdn/sprite-ghibli-cute-tiny-frog-spirit-blue-green-webbed-feet-chibi-transparent.png', Torrenttoad: '/cdn/sprite-ghibli-sturdy-large-toad-spirit-teal-blue-armored-back-powerful-transparent.png', Tsunamifrog: '/cdn/sprite-ghibli-majestic-giant-frog-spirit-deep-blue-wave-patterns-dramatic-transparent.png', Gemshard: '/cdn/sprite-ghibli-cute-tiny-crystal-creature-spirit-pink-purple-sparkly-chibi-transparent.png', Crystalguard: '/cdn/sprite-ghibli-elegant-crystal-golem-spirit-amethyst-purple-geometric-transparent.png', Diamondtitan: '/cdn/sprite-ghibli-majestic-diamond-colossus-spirit-prismatic-rainbow-dramatic-transparent.png', Flutterwind: '/cdn/sprite-ghibli-cute-tiny-butterfly-spirit-pale-blue-delicate-wings-chibi-transparent.png', Galefly: '/cdn/sprite-ghibli-elegant-butterfly-spirit-silver-teal-flowing-wings-graceful-transparent.png', Tempestmonarch: '/cdn/sprite-ghibli-majestic-giant-butterfly-spirit-storm-purple-lightning-wings-dramatic-transparent.png', Sunbun: '/cdn/sprite-ghibli-cute-tiny-bunny-spirit-golden-white-fluffy-glowing-ears-chibi-transparent.png', Radiantrabbit: '/cdn/sprite-ghibli-elegant-rabbit-spirit-white-gold-luminous-fur-graceful-transparent.png', Celestihare: '/cdn/sprite-ghibli-majestic-celestial-hare-spirit-platinum-rainbow-aura-divine-dramatic-transparent.png', Vipershade: '/cdn/sprite-ghibli-cute-tiny-snake-spirit-purple-black-glowing-eyes-chibi-transparent.png', Shadowserpent: '/cdn/sprite-ghibli-elegant-snake-spirit-dark-purple-shadowy-coils-sinister-transparent.png', Abyssalcoil: '/cdn/sprite-ghibli-terrifying-massive-serpent-spirit-void-black-cosmic-scales-dramatic-transparent.png', // Batch 4: Scorpion, Turtle, Bear, Owl, Unicorn, Wolf lines Emberclaw: '/cdn/sprite-ghibli-cute-tiny-scorpion-spirit-orange-red-glowing-tail-chibi-transparent.png', Blazescorpion: '/cdn/sprite-ghibli-fierce-scorpion-spirit-red-black-fiery-pincers-elegant-transparent.png', Infernostinger: '/cdn/sprite-ghibli-majestic-emperor-scorpion-spirit-obsidian-lava-veins-dramatic-transparent.png', Shellsplash: '/cdn/sprite-ghibli-cute-tiny-turtle-spirit-cyan-blue-shell-chibi-transparent.png', Tidalshell: '/cdn/sprite-ghibli-graceful-sea-turtle-spirit-teal-coral-patterns-elegant-transparent.png', Oceanbastion: '/cdn/sprite-ghibli-majestic-giant-turtle-spirit-deep-blue-fortress-shell-dramatic-transparent.png', Cubite: '/cdn/sprite-ghibli-cute-tiny-bear-cub-spirit-brown-stone-fur-chibi-transparent.png', Grizzite: '/cdn/sprite-ghibli-powerful-bear-spirit-granite-grey-rocky-fur-fierce-transparent.png', Mountainroar: '/cdn/sprite-ghibli-majestic-massive-bear-spirit-mountain-stone-crystals-dramatic-transparent.png', Hootlet: '/cdn/sprite-ghibli-cute-tiny-owl-spirit-white-silver-fluffy-chibi-transparent.png', Galeowl: '/cdn/sprite-ghibli-elegant-owl-spirit-silver-teal-wind-feathers-graceful-transparent.png', Stormwatcher: '/cdn/sprite-ghibli-majestic-great-owl-spirit-white-storm-wings-lightning-eyes-dramatic-transparent.png', Sparkfoal: '/cdn/sprite-ghibli-cute-tiny-foal-spirit-white-gold-sparkle-mane-chibi-transparent.png', Gleamsteed: '/cdn/sprite-ghibli-elegant-horse-spirit-white-golden-luminous-mane-graceful-transparent.png', Celesticorn: '/cdn/sprite-ghibli-majestic-unicorn-spirit-platinum-rainbow-horn-divine-dramatic-transparent.png', Shadowpup: '/cdn/sprite-ghibli-cute-tiny-wolf-pup-spirit-black-purple-glowing-eyes-chibi-transparent.png', Duskhowl: '/cdn/sprite-ghibli-fierce-wolf-spirit-dark-grey-purple-mist-elegant-transparent.png', Voidfang: '/cdn/sprite-ghibli-terrifying-dire-wolf-spirit-void-black-cosmic-fur-dramatic-transparent.png', // Batch 5: Lion, Otter, Rhino, Hummingbird, Peacock, Mantis lines Emberkitten: '/cdn/sprite-ghibli-cute-tiny-lion-cub-spirit-orange-flame-mane-fluffy-chibi-transparent.png', Pyroleo: '/cdn/sprite-ghibli-elegant-flame-lion-spirit-red-gold-fiery-mane-fierce-transparent.png', Solarmane: '/cdn/sprite-ghibli-majestic-solar-lion-spirit-white-gold-blazing-mane-divine-dramatic-transparent.png', Splashkit: '/cdn/sprite-ghibli-cute-tiny-otter-pup-spirit-cyan-blue-playful-chibi-transparent.png', Riverglide: '/cdn/sprite-ghibli-elegant-river-otter-spirit-teal-silver-sleek-graceful-transparent.png', Tsunotter: '/cdn/sprite-ghibli-majestic-tsunami-otter-spirit-deep-blue-wave-patterns-powerful-dramatic-transparent.png', Pebblecalf: '/cdn/sprite-ghibli-cute-tiny-rhino-calf-spirit-grey-brown-rocky-skin-chibi-transparent.png', Ironhorn: '/cdn/sprite-ghibli-sturdy-armored-rhino-spirit-iron-grey-plated-powerful-transparent.png', Tectodon: '/cdn/sprite-ghibli-majestic-tectonic-rhino-spirit-obsidian-crystal-horn-earthquake-dramatic-transparent.png', Buzzlet: '/cdn/sprite-ghibli-cute-tiny-hummingbird-spirit-mint-silver-fast-wings-chibi-transparent.png', Zephyrhum: '/cdn/sprite-ghibli-elegant-wind-hummingbird-spirit-teal-white-blur-wings-graceful-transparent.png', Tempesthover: '/cdn/sprite-ghibli-majestic-storm-hummingbird-spirit-silver-lightning-wings-dramatic-transparent.png', Glimchick: '/cdn/sprite-ghibli-cute-tiny-peacock-chick-spirit-golden-sparkle-feathers-chibi-transparent.png', Auroraplume: '/cdn/sprite-ghibli-elegant-light-peacock-spirit-iridescent-gold-rainbow-tail-graceful-transparent.png', Celestibird: '/cdn/sprite-ghibli-majestic-celestial-peacock-spirit-platinum-divine-thousand-eye-feathers-dramatic-transparent.png', Shadebug: '/cdn/sprite-ghibli-cute-tiny-mantis-spirit-purple-black-big-eyes-chibi-transparent.png', Duskmantis: '/cdn/sprite-ghibli-elegant-shadow-mantis-spirit-dark-purple-scythe-arms-sinister-transparent.png', Voidreaper: '/cdn/sprite-ghibli-terrifying-void-mantis-spirit-black-cosmic-blades-death-dramatic-transparent.png', // Batch 6: Beetle, Shark, Armadillo, Dragonfly, Kirin, Phantom lines Sparkbug: '/cdn/sprite-ghibli-cute-tiny-beetle-spirit-orange-red-glowing-shell-chibi-transparent.png', Blazebeetle: '/cdn/sprite-ghibli-elegant-fire-beetle-spirit-red-black-ember-wings-fierce-transparent.png', Infernocarab: '/cdn/sprite-ghibli-majestic-scarab-spirit-obsidian-gold-blazing-hieroglyphs-dramatic-transparent.png', Finling: '/cdn/sprite-ghibli-cute-tiny-shark-pup-spirit-cyan-white-friendly-chibi-transparent.png', Reefshark: '/cdn/sprite-ghibli-elegant-reef-shark-spirit-teal-coral-patterns-sleek-transparent.png', Abyssaljaw: '/cdn/sprite-ghibli-terrifying-abyssal-shark-spirit-deep-blue-black-massive-jaws-dramatic-transparent.png', Shellpup: '/cdn/sprite-ghibli-cute-tiny-armadillo-spirit-brown-grey-curled-shell-chibi-transparent.png', Ironshell: '/cdn/sprite-ghibli-sturdy-armadillo-spirit-iron-grey-armored-plates-powerful-transparent.png', Terraplate: '/cdn/sprite-ghibli-majestic-giant-armadillo-spirit-obsidian-crystal-fortress-shell-dramatic-transparent.png', Zipfly: '/cdn/sprite-ghibli-cute-tiny-dragonfly-spirit-mint-silver-iridescent-wings-chibi-transparent.png', Windskimmer: '/cdn/sprite-ghibli-elegant-dragonfly-spirit-teal-white-blur-wings-graceful-transparent.png', Tempestglider: '/cdn/sprite-ghibli-majestic-storm-dragonfly-spirit-silver-lightning-four-wings-dramatic-transparent.png', Qilinkit: '/cdn/sprite-ghibli-cute-tiny-kirin-spirit-golden-white-fluffy-small-horn-chibi-transparent.png', Radiantkirin: '/cdn/sprite-ghibli-elegant-kirin-spirit-white-gold-flowing-mane-scales-graceful-transparent.png', Celestikirin: '/cdn/sprite-ghibli-majestic-celestial-kirin-spirit-platinum-rainbow-divine-aura-dramatic-transparent.png', Spooklet: '/cdn/sprite-ghibli-cute-tiny-ghost-spirit-purple-white-shy-wispy-chibi-transparent.png', Wraithling: '/cdn/sprite-ghibli-elegant-wraith-spirit-dark-purple-ethereal-cloak-sinister-transparent.png', Voidphantom: '/cdn/sprite-ghibli-terrifying-void-phantom-spirit-black-cosmic-ethereal-death-dramatic-transparent.png', // Batch 7: Fox, Seahorse, Mole, Crane, Seraph, Raven lines Flickit: '/cdn/sprite-ghibli-cute-tiny-fox-kit-spirit-orange-flame-tail-fluffy-chibi-transparent.png', Blazefox: '/cdn/sprite-ghibli-elegant-fire-fox-spirit-red-gold-multiple-tails-fierce-transparent.png', Infernokitsune: '/cdn/sprite-ghibli-majestic-kitsune-spirit-white-gold-nine-tails-divine-flames-dramatic-transparent.png', Driftfoal: '/cdn/sprite-ghibli-cute-tiny-seahorse-spirit-cyan-pearl-translucent-chibi-transparent.png', Tidalsteed: '/cdn/sprite-ghibli-elegant-seahorse-spirit-teal-silver-flowing-fins-graceful-transparent.png', Leviatide: '/cdn/sprite-ghibli-majestic-sea-dragon-seahorse-spirit-deep-blue-bioluminescent-dramatic-transparent.png', Burrkit: '/cdn/sprite-ghibli-cute-tiny-mole-spirit-brown-pink-nose-digging-claws-chibi-transparent.png', Tunnelclaw: '/cdn/sprite-ghibli-sturdy-mole-spirit-dark-brown-powerful-claws-determined-transparent.png', Terramole: '/cdn/sprite-ghibli-majestic-giant-mole-spirit-obsidian-crystal-claws-earth-king-dramatic-transparent.png', Gustchick: '/cdn/sprite-ghibli-cute-tiny-crane-chick-spirit-white-silver-fluffy-chibi-transparent.png', Skydancer: '/cdn/sprite-ghibli-elegant-crane-bird-spirit-white-feathers-red-head-crest-long-neck-graceful-transparent.png', Celesticrane: '/cdn/sprite-ghibli-majestic-celestial-crane-spirit-pure-white-golden-aura-divine-dramatic-transparent.png', Haloling: '/cdn/sprite-ghibli-cute-tiny-angel-spirit-golden-white-small-wings-halo-chibi-transparent.png', Seraphim: '/cdn/sprite-ghibli-elegant-seraph-spirit-white-gold-four-wings-radiant-transparent.png', Divinewing: '/cdn/sprite-ghibli-majestic-archangel-spirit-platinum-six-wings-holy-light-dramatic-transparent.png', Inkfeather: '/cdn/sprite-ghibli-cute-tiny-raven-chick-spirit-black-purple-fluffy-chibi-transparent.png', Duskcrow: '/cdn/sprite-ghibli-elegant-crow-spirit-black-purple-gleaming-eyes-sinister-transparent.png', Voidraven: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-cosmic-black-ethereal-feathers-dramatic-transparent.png', }; // Build team bar slots (larger size) - JUICY DESIGN const teamSlots = team.slice(0, 5).map((spirit, idx) => { if (!spirit) { // Empty slot - darker inset pocket that clearly reads as "empty space" return `

${idx + 1}

`; } const style = elementStyles[spirit.type] ?? elementStyles.earth; const portrait = spiritPortraits[spirit.name] ?? spiritPortraits[spirit.species] ?? ''; const hp = spirit.hp ?? 0; const maxHp = spirit.maxHp ?? spirit.hp ?? 30; const isFainted = hp <= 0; const isCaptain = idx === 0; const hpPercent = Math.max(0, (hp / maxHp) * 100); // HP bar color with gradient const hpColor = hpPercent > 50 ? 'linear-gradient(90deg, #22c55e, #4ade80)' : hpPercent > 25 ? 'linear-gradient(90deg, #eab308, #facc15)' : 'linear-gradient(90deg, #dc2626, #ef4444)'; // Element glow colors for the frame const elementGlows = { flame: 'rgba(255, 107, 53, 0.5)', water: 'rgba(78, 205, 196, 0.5)', earth: 'rgba(166, 124, 61, 0.5)', wind: 'rgba(126, 200, 163, 0.5)', light: 'rgba(255, 215, 0, 0.5)', dark: 'rgba(155, 138, 196, 0.5)', }; const glowColor = elementGlows[spirit.type] ?? elementGlows.earth; return `

${portrait ? `

` : ''}

${isFainted ? `

💀

` : `

${spirit.level ?? 1}

${isCaptain ? `

👑

` : ''}

`; }).join(''); // Get captain's element for theming - MUST be defined before teamBar const captainElement = team[0]?.type ?? 'light'; const elementThemes = { flame: { glow: 'rgba(255, 107, 53, 0.4)', accent: '#ff6b35', particle: '🔥' }, water: { glow: 'rgba(78, 205, 196, 0.4)', accent: '#4ecdc4', particle: '💧' }, earth: { glow: 'rgba(166, 124, 61, 0.4)', accent: '#a67c3d', particle: '🍃' }, wind: { glow: 'rgba(126, 200, 163, 0.4)', accent: '#7ec8a3', particle: '✨' }, light: { glow: 'rgba(255, 215, 0, 0.4)', accent: '#ffd700', particle: '✨' }, dark: { glow: 'rgba(155, 138, 196, 0.4)', accent: '#9b8ac4', particle: '🌙' }, }; const theme = elementThemes[captainElement] ?? elementThemes.light; // Only show team bar if player has spirits const teamBar = `

${theme.particle}

${teamSlots}

`; return ` ${teamBar}

${theme.particle}

✦

${(state.dewdrops ?? 0).toLocaleString()}

`; } // === SPIRITS COLLECTION PANEL (MMO-style draggable) === function renderSpiritsMenu(state) { const spirits = state.spirits ?? []; const team = state.team ?? [null, null, null, null, null]; // 5 team slots // Calculate z-index based on which panel is on top const zIndex = (window._topPanel === 'spirits') ? 102 : 100; // Track selected spirit (browser-side) const selectedIndex = window._selectedSpiritIndex ?? 0; const selectedSpirit = spirits[selectedIndex] ?? null; // Element colors and icons const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥', gradient: 'linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%)' }, water: { color: '#4ECDC4', bgColor: 'rgba(78, 205, 196, 0.15)', icon: '💧', gradient: 'linear-gradient(135deg, #7fdbda 0%, #4ecdc4 100%)' }, earth: { color: '#8B7355', bgColor: 'rgba(139, 115, 85, 0.15)', icon: '🪨', gradient: 'linear-gradient(135deg, #a08b70 0%, #8b7355 100%)' }, wind: { color: '#90EE90', bgColor: 'rgba(144, 238, 144, 0.15)', icon: '🍃', gradient: 'linear-gradient(135deg, #b8f4b8 0%, #90ee90 100%)' }, light: { color: '#DAA520', bgColor: 'rgba(218, 165, 32, 0.15)', icon: '☀️', gradient: 'linear-gradient(135deg, #ffe066 0%, #daa520 100%)' }, dark: { color: '#6A5ACD', bgColor: 'rgba(106, 90, 205, 0.15)', icon: '🌙', gradient: 'linear-gradient(135deg, #9370db 0%, #6a5acd 100%)' }, primordial: { color: '#FFD700', bgColor: 'rgba(255, 215, 0, 0.2)', icon: '✧', gradient: 'linear-gradient(135deg, #fffacd 0%, #ffd700 50%, #ffec8b 100%)' }, }; // Spirit portraits (unique art for each spirit) - all available spirits // Starters are cute chibi style, advanced spirits are majestic/dramatic const spiritPortraits = { // Starter spirits (cute chibi style) Ember: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', Brook: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', Pebble: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-rocky-chibi-transparent.png', Zephyr: '/cdn/sprite-ghibli-cute-wind-hare-spirit-white-mint-feathery-chibi-transparent.png', Lumina: '/cdn/sprite-ghibli-cute-light-moth-spirit-golden-warm-glowing-chibi-transparent.png', Nyx: '/cdn/sprite-ghibli-cute-dark-cat-spirit-purple-shadow-mysterious-chibi-transparent.png', // Advanced spirits (mid-tier elegant style) Solara: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', Tideling: '/cdn/sprite-ghibli-elegant-water-seahorse-spirit-flowing-fins-luminous-teal-transparent.png', Terravox: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-mossy-transparent.png', Gale: '/cdn/sprite-ghibli-fierce-wind-falcon-spirit-silver-swift-piercing-eyes-transparent.png', Seraphine: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', Vesperon: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', // Primordial spirits (divine, transcendent) Solienne: '/cdn/sprite-ghibli-primordial-goddess-solienne-platinum-blonde-hair-flowing-past-feet-white-flower-wreath-luminous-gold-eyes-white-radiant-petal-dress-golden-light-particles-divine-healing-aura-full-body-transparent.png', // ========== BATCH 1 SPIRITS ========== // Flame evolution line Cinderpup: '/cdn/sprite-ghibli-cute-flame-puppy-spirit-orange-ember-fluffy-small-chibi-transparent.png', Blazehound: '/cdn/sprite-ghibli-sleek-flame-hound-spirit-red-orange-fierce-elegant-transparent.png', Infernowolf: '/cdn/sprite-ghibli-majestic-inferno-wolf-spirit-black-red-flame-mane-fierce-dramatic-transparent.png', // Water evolution line Droplet: '/cdn/sprite-ghibli-cute-water-droplet-spirit-blue-translucent-blob-chibi-transparent.png', Streamling: '/cdn/sprite-ghibli-elegant-water-serpent-spirit-flowing-blue-teal-graceful-transparent.png', Torrentis: '/cdn/sprite-ghibli-majestic-water-dragon-spirit-deep-blue-silver-scales-powerful-dramatic-transparent.png', // Earth evolution line Mudling: '/cdn/sprite-ghibli-cute-mud-blob-spirit-brown-earthy-round-chibi-transparent.png', Claywarden: '/cdn/sprite-ghibli-armored-clay-golem-spirit-terracotta-orange-stoic-guardian-transparent.png', Obsidianite: '/cdn/sprite-ghibli-majestic-obsidian-golem-spirit-black-volcanic-crystal-imposing-dramatic-transparent.png', // Wind evolution line Breezeling: '/cdn/sprite-ghibli-cute-wind-fairy-spirit-mint-green-wispy-small-chibi-transparent.png', Gustwing: '/cdn/sprite-ghibli-swift-wind-hawk-spirit-silver-teal-feathers-elegant-transparent.png', Tempestrix: '/cdn/sprite-ghibli-majestic-storm-phoenix-spirit-purple-lightning-fierce-dramatic-transparent.png', // Light evolution line Glimmer: '/cdn/sprite-ghibli-cute-light-firefly-spirit-golden-sparkly-tiny-chibi-transparent.png', Luxwing: '/cdn/sprite-ghibli-elegant-light-butterfly-spirit-iridescent-gold-white-graceful-transparent.png', Radiantia: '/cdn/sprite-ghibli-majestic-light-dragon-spirit-white-gold-radiant-wings-divine-dramatic-transparent.png', // Dark evolution line Shadeling: '/cdn/sprite-ghibli-cute-shadow-wisp-spirit-purple-black-smoky-chibi-transparent.png', Duskweaver: '/cdn/sprite-ghibli-mysterious-shadow-spider-spirit-dark-purple-elegant-sinister-transparent.png', Umbralith: '/cdn/sprite-ghibli-terrifying-shadow-beast-spirit-black-purple-void-eyes-menacing-dramatic-transparent.png', // ========== STARTER EVOLUTION LINES (Ember, Brook, etc.) ========== // Ember line mediums/advanced Flarekin: '/cdn/sprite-ghibli-elegant-flame-fox-spirit-crimson-gold-fierce-flowing-tail-transparent.png', Pyranthos: '/cdn/sprite-ghibli-majestic-nine-tailed-flame-fox-spirit-white-gold-fire-divine-dramatic-transparent.png', // Brook line mediums/advanced Coraline: '/cdn/sprite-ghibli-elegant-water-koi-dragon-spirit-sapphire-silver-graceful-transparent.png', Tsunamara: '/cdn/sprite-ghibli-majestic-water-dragon-koi-spirit-azure-pearl-flowing-whiskers-dramatic-transparent.png', // Pebble line mediums/advanced Boulderkin: '/cdn/sprite-ghibli-sturdy-earth-golem-spirit-granite-moss-armored-stoic-transparent.png', Terradon: '/cdn/sprite-ghibli-ancient-mountain-golem-spirit-obsidian-crystal-massive-dramatic-transparent.png', // Zephyr line mediums/advanced Galewing: '/cdn/sprite-ghibli-swift-wind-hare-spirit-silver-teal-long-ears-elegant-transparent.png', Cyclonix: '/cdn/sprite-ghibli-majestic-storm-hare-spirit-white-lightning-crackling-ears-dramatic-transparent.png', // Lumina line mediums/advanced Aurelis: '/cdn/sprite-ghibli-radiant-light-moth-spirit-golden-white-luminous-wings-elegant-transparent.png', Solarius: '/cdn/sprite-ghibli-divine-sun-moth-spirit-platinum-gold-radiant-six-wings-dramatic-transparent.png', // Nyx line mediums/advanced Umbris: '/cdn/sprite-ghibli-sleek-shadow-cat-spirit-midnight-purple-glowing-eyes-elegant-transparent.png', Eclipsar: '/cdn/sprite-ghibli-majestic-void-panther-spirit-black-purple-cosmic-eyes-dramatic-transparent.png', // ========== PRE-RARE BASICS (evolve into Solara, Tideling, etc.) ========== Flickling: '/cdn/sprite-ghibli-cute-flame-chick-spirit-orange-tiny-wings-chibi-transparent.png', Bubbling: '/cdn/sprite-ghibli-cute-water-seahorse-baby-spirit-cyan-tiny-chibi-transparent.png', Pebblet: '/cdn/sprite-ghibli-cute-baby-tortoise-spirit-brown-tiny-shell-chibi-transparent.png', Wisplet: '/cdn/sprite-ghibli-cute-wind-chick-spirit-silver-fluffy-tiny-chibi-transparent.png', Glowmote: '/cdn/sprite-ghibli-cute-light-orb-spirit-golden-tiny-sparkle-chibi-transparent.png', Shadowkit: '/cdn/sprite-ghibli-cute-shadow-raven-chick-spirit-purple-tiny-chibi-transparent.png', // ========== POST-RARE ADVANCED (final forms for Solara, Tideling, etc.) ========== Phoenixia: '/cdn/sprite-ghibli-divine-flame-phoenix-spirit-white-gold-rebirth-flames-dramatic-transparent.png', Leviathos: '/cdn/sprite-ghibli-majestic-sea-leviathan-spirit-deep-blue-ancient-colossal-dramatic-transparent.png', Colossadon: '/cdn/sprite-ghibli-ancient-world-turtle-spirit-mountain-shell-colossal-dramatic-transparent.png', Stormravian: '/cdn/sprite-ghibli-legendary-storm-eagle-spirit-silver-lightning-wings-dramatic-transparent.png', Celestine: '/cdn/sprite-ghibli-divine-celestial-crane-spirit-platinum-rainbow-wings-dramatic-transparent.png', Nocturnax: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-black-cosmic-feathers-dramatic-transparent.png', // ========== BATCH 2: Salamander, Jellyfish, Mole, Cloud, Deer, Bat lines ========== Sizzlescale: '/cdn/sprite-ghibli-cute-flame-salamander-spirit-orange-red-tiny-scales-chibi-transparent.png', Magmalisk: '/cdn/sprite-ghibli-sleek-magma-lizard-spirit-red-black-molten-cracks-elegant-transparent.png', Volcanorus: '/cdn/sprite-ghibli-majestic-volcanic-dragon-salamander-spirit-obsidian-lava-veins-dramatic-transparent.png', Jellydrop: '/cdn/sprite-ghibli-cute-jellyfish-spirit-translucent-blue-tiny-bell-chibi-transparent.png', Driftbell: '/cdn/sprite-ghibli-elegant-jellyfish-spirit-luminous-teal-flowing-tendrils-graceful-transparent.png', Abyssalume: '/cdn/sprite-ghibli-majestic-deep-sea-jellyfish-spirit-bioluminescent-purple-blue-ethereal-dramatic-transparent.png', Burrowkit: '/cdn/sprite-ghibli-cute-mole-spirit-brown-fuzzy-tiny-claws-chibi-transparent.png', Terramole: '/cdn/sprite-ghibli-sturdy-giant-mole-spirit-brown-armored-claws-powerful-transparent.png', Quakebeast: '/cdn/sprite-ghibli-massive-earth-beast-spirit-brown-stone-plates-seismic-dramatic-transparent.png', Cloudpuff: '/cdn/sprite-ghibli-cute-cloud-spirit-fluffy-white-tiny-wings-chibi-transparent.png', Nimbuswing: '/cdn/sprite-ghibli-graceful-cloud-bird-spirit-white-silver-wispy-feathers-elegant-transparent.png', Stratosoul: '/cdn/sprite-ghibli-majestic-stratosphere-spirit-white-gold-ethereal-cloud-form-dramatic-transparent.png', Fawnlight: '/cdn/sprite-ghibli-cute-light-fawn-spirit-white-gold-spots-tiny-chibi-transparent.png', Gleamstag: '/cdn/sprite-ghibli-elegant-light-stag-spirit-white-gold-glowing-antlers-majestic-transparent.png', Auroralope: '/cdn/sprite-ghibli-majestic-aurora-elk-spirit-white-rainbow-antlers-ethereal-dramatic-transparent.png', Squeakwing: '/cdn/sprite-ghibli-cute-bat-spirit-purple-tiny-fangs-fluffy-chibi-transparent.png', Nightfang: '/cdn/sprite-ghibli-sleek-vampire-bat-spirit-dark-purple-red-eyes-elegant-transparent.png', Dreadwyvern: '/cdn/sprite-ghibli-terrifying-dark-wyvern-spirit-black-red-demonic-wings-dramatic-transparent.png', // ========== BATCH 3: Dragon, Frog, Crystal, Butterfly, Rabbit, Snake lines ========== Drakeling: '/cdn/sprite-ghibli-cute-baby-dragon-spirit-orange-red-tiny-wings-chibi-transparent.png', Wyrmblaze: '/cdn/sprite-ghibli-elegant-flame-dragon-spirit-red-gold-fierce-fire-breath-transparent.png', Infernodrake: '/cdn/sprite-ghibli-majestic-elder-dragon-spirit-crimson-black-massive-wings-dramatic-transparent.png', Puddlehopper: '/cdn/sprite-ghibli-cute-tiny-frog-spirit-blue-green-webbed-feet-chibi-transparent.png', Torrenttoad: '/cdn/sprite-ghibli-sturdy-large-toad-spirit-teal-blue-armored-back-powerful-transparent.png', Tsunamifrog: '/cdn/sprite-ghibli-majestic-giant-frog-spirit-deep-blue-wave-patterns-dramatic-transparent.png', Gemshard: '/cdn/sprite-ghibli-cute-tiny-crystal-creature-spirit-pink-purple-sparkly-chibi-transparent.png', Crystalguard: '/cdn/sprite-ghibli-elegant-crystal-golem-spirit-amethyst-purple-geometric-transparent.png', Diamondtitan: '/cdn/sprite-ghibli-majestic-diamond-colossus-spirit-prismatic-rainbow-dramatic-transparent.png', Flutterwind: '/cdn/sprite-ghibli-cute-tiny-butterfly-spirit-pale-blue-delicate-wings-chibi-transparent.png', Galefly: '/cdn/sprite-ghibli-elegant-butterfly-spirit-silver-teal-flowing-wings-graceful-transparent.png', Tempestmonarch: '/cdn/sprite-ghibli-majestic-giant-butterfly-spirit-storm-purple-lightning-wings-dramatic-transparent.png', Sunbun: '/cdn/sprite-ghibli-cute-tiny-bunny-spirit-golden-white-fluffy-glowing-ears-chibi-transparent.png', Radiantrabbit: '/cdn/sprite-ghibli-elegant-rabbit-spirit-white-gold-luminous-fur-graceful-transparent.png', Celestihare: '/cdn/sprite-ghibli-majestic-celestial-hare-spirit-platinum-rainbow-aura-divine-dramatic-transparent.png', Vipershade: '/cdn/sprite-ghibli-cute-tiny-snake-spirit-purple-black-glowing-eyes-chibi-transparent.png', Shadowserpent: '/cdn/sprite-ghibli-elegant-snake-spirit-dark-purple-shadowy-coils-sinister-transparent.png', Abyssalcoil: '/cdn/sprite-ghibli-terrifying-massive-serpent-spirit-void-black-cosmic-scales-dramatic-transparent.png', // ========== BATCH 4: Scorpion, Turtle, Bear, Owl, Unicorn, Wolf lines ========== Emberclaw: '/cdn/sprite-ghibli-cute-tiny-scorpion-spirit-orange-red-glowing-tail-chibi-transparent.png', Blazescorpion: '/cdn/sprite-ghibli-fierce-scorpion-spirit-red-black-fiery-pincers-elegant-transparent.png', Infernostinger: '/cdn/sprite-ghibli-majestic-emperor-scorpion-spirit-obsidian-lava-veins-dramatic-transparent.png', Shellsplash: '/cdn/sprite-ghibli-cute-tiny-turtle-spirit-cyan-blue-shell-chibi-transparent.png', Tidalshell: '/cdn/sprite-ghibli-graceful-sea-turtle-spirit-teal-coral-patterns-elegant-transparent.png', Oceanbastion: '/cdn/sprite-ghibli-majestic-giant-turtle-spirit-deep-blue-fortress-shell-dramatic-transparent.png', Cubite: '/cdn/sprite-ghibli-cute-tiny-bear-cub-spirit-brown-stone-fur-chibi-transparent.png', Grizzite: '/cdn/sprite-ghibli-powerful-bear-spirit-granite-grey-rocky-fur-fierce-transparent.png', Mountainroar: '/cdn/sprite-ghibli-majestic-massive-bear-spirit-mountain-stone-crystals-dramatic-transparent.png', Hootlet: '/cdn/sprite-ghibli-cute-tiny-owl-spirit-white-silver-fluffy-chibi-transparent.png', Galeowl: '/cdn/sprite-ghibli-elegant-owl-spirit-silver-teal-wind-feathers-graceful-transparent.png', Stormwatcher: '/cdn/sprite-ghibli-majestic-great-owl-spirit-white-storm-wings-lightning-eyes-dramatic-transparent.png', Sparkfoal: '/cdn/sprite-ghibli-cute-tiny-foal-spirit-white-gold-sparkle-mane-chibi-transparent.png', Gleamsteed: '/cdn/sprite-ghibli-elegant-horse-spirit-white-golden-luminous-mane-graceful-transparent.png', Celesticorn: '/cdn/sprite-ghibli-majestic-unicorn-spirit-platinum-rainbow-horn-divine-dramatic-transparent.png', Shadowpup: '/cdn/sprite-ghibli-cute-tiny-wolf-pup-spirit-black-purple-glowing-eyes-chibi-transparent.png', Duskhowl: '/cdn/sprite-ghibli-fierce-wolf-spirit-dark-grey-purple-mist-elegant-transparent.png', Voidfang: '/cdn/sprite-ghibli-terrifying-dire-wolf-spirit-void-black-cosmic-fur-dramatic-transparent.png', // ========== BATCH 5: Lion, Otter, Rhino, Hummingbird, Peacock, Mantis lines ========== Emberkitten: '/cdn/sprite-ghibli-cute-tiny-lion-cub-spirit-orange-flame-mane-fluffy-chibi-transparent.png', Pyroleo: '/cdn/sprite-ghibli-elegant-flame-lion-spirit-red-gold-fiery-mane-fierce-transparent.png', Solarmane: '/cdn/sprite-ghibli-majestic-solar-lion-spirit-white-gold-blazing-mane-divine-dramatic-transparent.png', Splashkit: '/cdn/sprite-ghibli-cute-tiny-otter-pup-spirit-cyan-blue-playful-chibi-transparent.png', Riverglide: '/cdn/sprite-ghibli-elegant-river-otter-spirit-teal-silver-sleek-graceful-transparent.png', Tsunotter: '/cdn/sprite-ghibli-majestic-tsunami-otter-spirit-deep-blue-wave-patterns-powerful-dramatic-transparent.png', Pebblecalf: '/cdn/sprite-ghibli-cute-tiny-rhino-calf-spirit-grey-brown-rocky-skin-chibi-transparent.png', Ironhorn: '/cdn/sprite-ghibli-sturdy-armored-rhino-spirit-iron-grey-plated-powerful-transparent.png', Tectodon: '/cdn/sprite-ghibli-majestic-tectonic-rhino-spirit-obsidian-crystal-horn-earthquake-dramatic-transparent.png', Buzzlet: '/cdn/sprite-ghibli-cute-tiny-hummingbird-spirit-mint-silver-fast-wings-chibi-transparent.png', Zephyrhum: '/cdn/sprite-ghibli-elegant-wind-hummingbird-spirit-teal-white-blur-wings-graceful-transparent.png', Tempesthover: '/cdn/sprite-ghibli-majestic-storm-hummingbird-spirit-silver-lightning-wings-dramatic-transparent.png', Glimchick: '/cdn/sprite-ghibli-cute-tiny-peacock-chick-spirit-golden-sparkle-feathers-chibi-transparent.png', Auroraplume: '/cdn/sprite-ghibli-elegant-light-peacock-spirit-iridescent-gold-rainbow-tail-graceful-transparent.png', Celestibird: '/cdn/sprite-ghibli-majestic-celestial-peacock-spirit-platinum-divine-thousand-eye-feathers-dramatic-transparent.png', Shadebug: '/cdn/sprite-ghibli-cute-tiny-mantis-spirit-purple-black-big-eyes-chibi-transparent.png', Duskmantis: '/cdn/sprite-ghibli-elegant-shadow-mantis-spirit-dark-purple-scythe-arms-sinister-transparent.png', Voidreaper: '/cdn/sprite-ghibli-terrifying-void-mantis-spirit-black-cosmic-blades-death-dramatic-transparent.png', // ========== BATCH 6: Beetle, Shark, Armadillo, Dragonfly, Kirin, Phantom lines ========== Sparkbug: '/cdn/sprite-ghibli-cute-tiny-beetle-spirit-orange-red-glowing-shell-chibi-transparent.png', Blazebeetle: '/cdn/sprite-ghibli-elegant-fire-beetle-spirit-red-black-ember-wings-fierce-transparent.png', Infernocarab: '/cdn/sprite-ghibli-majestic-scarab-spirit-obsidian-gold-blazing-hieroglyphs-dramatic-transparent.png', Finling: '/cdn/sprite-ghibli-cute-tiny-shark-pup-spirit-cyan-white-friendly-chibi-transparent.png', Reefshark: '/cdn/sprite-ghibli-elegant-reef-shark-spirit-teal-coral-patterns-sleek-transparent.png', Abyssaljaw: '/cdn/sprite-ghibli-terrifying-abyssal-shark-spirit-deep-blue-black-massive-jaws-dramatic-transparent.png', Shellpup: '/cdn/sprite-ghibli-cute-tiny-armadillo-spirit-brown-grey-curled-shell-chibi-transparent.png', Ironshell: '/cdn/sprite-ghibli-sturdy-armadillo-spirit-iron-grey-armored-plates-powerful-transparent.png', Terraplate: '/cdn/sprite-ghibli-majestic-giant-armadillo-spirit-obsidian-crystal-fortress-shell-dramatic-transparent.png', Zipfly: '/cdn/sprite-ghibli-cute-tiny-dragonfly-spirit-mint-silver-iridescent-wings-chibi-transparent.png', Windskimmer: '/cdn/sprite-ghibli-elegant-dragonfly-spirit-teal-white-blur-wings-graceful-transparent.png', Tempestglider: '/cdn/sprite-ghibli-majestic-storm-dragonfly-spirit-silver-lightning-four-wings-dramatic-transparent.png', Qilinkit: '/cdn/sprite-ghibli-cute-tiny-kirin-spirit-golden-white-fluffy-small-horn-chibi-transparent.png', Radiantkirin: '/cdn/sprite-ghibli-elegant-kirin-spirit-white-gold-flowing-mane-scales-graceful-transparent.png', Celestikirin: '/cdn/sprite-ghibli-majestic-celestial-kirin-spirit-platinum-rainbow-divine-aura-dramatic-transparent.png', Spooklet: '/cdn/sprite-ghibli-cute-tiny-ghost-spirit-purple-white-shy-wispy-chibi-transparent.png', Wraithling: '/cdn/sprite-ghibli-elegant-wraith-spirit-dark-purple-ethereal-cloak-sinister-transparent.png', Voidphantom: '/cdn/sprite-ghibli-terrifying-void-phantom-spirit-black-cosmic-ethereal-death-dramatic-transparent.png', // ========== BATCH 7: Fox, Seahorse, Mole, Crane, Seraph, Raven lines ========== Flickit: '/cdn/sprite-ghibli-cute-tiny-fox-kit-spirit-orange-flame-tail-fluffy-chibi-transparent.png', Blazefox: '/cdn/sprite-ghibli-elegant-fire-fox-spirit-red-gold-multiple-tails-fierce-transparent.png', Infernokitsune: '/cdn/sprite-ghibli-majestic-kitsune-spirit-white-gold-nine-tails-divine-flames-dramatic-transparent.png', Driftfoal: '/cdn/sprite-ghibli-cute-tiny-seahorse-spirit-cyan-pearl-translucent-chibi-transparent.png', Tidalsteed: '/cdn/sprite-ghibli-elegant-seahorse-spirit-teal-silver-flowing-fins-graceful-transparent.png', Leviatide: '/cdn/sprite-ghibli-majestic-sea-dragon-seahorse-spirit-deep-blue-bioluminescent-dramatic-transparent.png', Burrkit: '/cdn/sprite-ghibli-cute-tiny-mole-spirit-brown-pink-nose-digging-claws-chibi-transparent.png', Tunnelclaw: '/cdn/sprite-ghibli-sturdy-mole-spirit-dark-brown-powerful-claws-determined-transparent.png', Terramole: '/cdn/sprite-ghibli-majestic-giant-mole-spirit-obsidian-crystal-claws-earth-king-dramatic-transparent.png', Gustchick: '/cdn/sprite-ghibli-cute-tiny-crane-chick-spirit-white-silver-fluffy-chibi-transparent.png', Skydancer: '/cdn/sprite-ghibli-elegant-crane-bird-spirit-white-feathers-red-head-crest-long-neck-graceful-transparent.png', Celesticrane: '/cdn/sprite-ghibli-majestic-celestial-crane-spirit-pure-white-golden-aura-divine-dramatic-transparent.png', Haloling: '/cdn/sprite-ghibli-cute-tiny-angel-spirit-golden-white-small-wings-halo-chibi-transparent.png', Seraphim: '/cdn/sprite-ghibli-elegant-seraph-spirit-white-gold-four-wings-radiant-transparent.png', Divinewing: '/cdn/sprite-ghibli-majestic-archangel-spirit-platinum-six-wings-holy-light-dramatic-transparent.png', Inkfeather: '/cdn/sprite-ghibli-cute-tiny-raven-chick-spirit-black-purple-fluffy-chibi-transparent.png', Duskcrow: '/cdn/sprite-ghibli-elegant-crow-spirit-black-purple-gleaming-eyes-sinister-transparent.png', Voidraven: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-cosmic-black-ethereal-feathers-dramatic-transparent.png', }; // Build spirit grid (left side) const spiritGrid = spirits.length === 0 ? `

No spirits yet

Visit Aeris at the shrine!

` : spirits.map((spirit, idx) => { const style = elementStyles[spirit.type] ?? elementStyles.earth; const isSelected = idx === selectedIndex; const isInTeam = team.some(t => t?.id === spirit.id); const portrait = spiritPortraits[spirit.species] ?? spiritPortraits[spirit.name] ?? ''; const displayName = spirit.nickname || spirit.name; return `

${spirit.nickname ? `

${displayName}

` : ''}

${style.icon}

Lv.${spirit.level ?? 1}

${isInTeam ? '

⭐

' : ''}

`; }).join(''); // Build spirit details (right side) const detailsPanel = selectedSpirit ? (() => { const style = elementStyles[selectedSpirit.type] ?? elementStyles.earth; const portrait = spiritPortraits[selectedSpirit.species] ?? spiritPortraits[selectedSpirit.name] ?? ''; const hp = selectedSpirit.hp ?? 100; const maxHp = selectedSpirit.maxHp ?? 100; const hpPercent = (hp / maxHp) * 100; // XP calculation const currentLevel = selectedSpirit.level ?? 1; const currentXp = selectedSpirit.xp ?? 0; const xpForNextLevel = currentLevel * 100; // Same formula as stats-holder.js const xpPercent = Math.min(100, (currentXp / xpForNextLevel) * 100); const isMaxLevel = currentLevel >= 100; // Display name: nickname if set, otherwise species name const displayName = selectedSpirit.nickname || selectedSpirit.name; const hasNickname = !!selectedSpirit.nickname; return `

${displayName}

${hasNickname ? `

(${selectedSpirit.name})

` : ''}

Lv.${selectedSpirit.level ?? 1} ${style.icon} ${selectedSpirit.type}

${window._renamingSpiritIndex === selectedIndex ? `

Give ${selectedSpirit.name} a nickname:

Leave empty to reset to species name

` : ''}

HP ${hp}/${maxHp}

EXP ${isMaxLevel ? 'MAX' : `${currentXp}/${xpForNextLevel}`}

ATK ${selectedSpirit.attack ?? 10}

DEF ${selectedSpirit.defense ?? 8}

SPD ${selectedSpirit.speed ?? 12}

SPI ${selectedSpirit.spirit ?? 15}

ABILITIES

${(selectedSpirit.moves && selectedSpirit.moves.length > 0 ? selectedSpirit.moves.map(move => move.name || move) : ['No moves learned'] ).map(moveName => `

${moveName}

`).join('')}

`; })() : `

🔮

Select a spirit
to view details

`; // Build team slots (bottom) const teamSlots = team.map((slot, idx) => { if (slot) { const style = elementStyles[slot.type] ?? elementStyles.earth; const portrait = spiritPortraits[slot.name] ?? ''; const isCaptain = idx === 0; const hp = slot.hp ?? 0; const maxHp = slot.maxHp ?? slot.hp ?? 30; const isFainted = hp <= 0; const hpPercent = Math.max(0, (hp / maxHp) * 100); const hpColor = hpPercent > 50 ? '#4ade80' : hpPercent > 25 ? '#facc15' : '#ef4444'; // Find the spirit's index in the collection for selection const collectionIndex = spirits.findIndex(s => s.id === slot.id); // Element glow colors for the frame (matching HUD) const elementGlows = { flame: 'rgba(255, 107, 53, 0.5)', water: 'rgba(78, 205, 196, 0.5)', earth: 'rgba(166, 124, 61, 0.5)', wind: 'rgba(126, 200, 163, 0.5)', light: 'rgba(255, 215, 0, 0.5)', dark: 'rgba(155, 138, 196, 0.5)', }; const glowColor = elementGlows[slot.type] ?? elementGlows.earth; return `

${isFainted ? `

💀

` : `

${slot.level ?? 1}

${isCaptain ? `

👑

` : ''}

`; } else { // Empty slot - styled to match HUD return `

${idx === 0 ? `

👑

` : ` ${idx + 1} `}

`; } }).join(''); return `

❧

🔮

Spirit Collection ${spirits.length} owned

COLLECTION

${spiritGrid}

${detailsPanel}

👑 ACTIVE TEAM

Drag spirits here — slot 1 is your Captain who appears in the world

${teamSlots}

`; } // === INVENTORY PANEL (MMO-style draggable with item dragging) === function renderInventoryMenu(state) { const inventory = state.inventory ?? {}; const bondingCrystals = state.bondingCrystals ?? inventory.bondingCrystals ?? 0; const items = inventory.items ?? []; const team = state.team ?? []; // Calculate z-index based on which panel is on top const zIndex = (window._topPanel === 'inventory') ? 102 : 100; // Use central database for item types const itemTypes = {}; for (const [key, item] of Object.entries(ITEM_DATABASE)) { itemTypes[key] = { name: item.name, icon: item.icon, color: item.color, desc: item.description, isSprite: true, usableOutOfBattle: item.usableOutOfBattle, healAmount: item.healAmount, isRevive: item.isRevive, }; } // Spirit portraits for selection popup - all available spirits // Starters are cute chibi style, advanced spirits are majestic/dramatic const spiritPortraits = { // Starter spirits (cute chibi style) Ember: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', Brook: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', Pebble: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-rocky-chibi-transparent.png', Zephyr: '/cdn/sprite-ghibli-cute-wind-hare-spirit-white-mint-feathery-chibi-transparent.png', Lumina: '/cdn/sprite-ghibli-cute-light-moth-spirit-golden-warm-glowing-chibi-transparent.png', Nyx: '/cdn/sprite-ghibli-cute-dark-cat-spirit-purple-shadow-mysterious-chibi-transparent.png', // Advanced spirits (mid-tier elegant style) Solara: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', Tideling: '/cdn/sprite-ghibli-elegant-water-seahorse-spirit-flowing-fins-luminous-teal-transparent.png', Terravox: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-mossy-transparent.png', Gale: '/cdn/sprite-ghibli-fierce-wind-falcon-spirit-silver-swift-piercing-eyes-transparent.png', Seraphine: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', Vesperon: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', }; const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)' }, water: { color: '#4ECDC4', bgColor: 'rgba(78, 205, 196, 0.15)' }, earth: { color: '#8B7355', bgColor: 'rgba(139, 115, 85, 0.15)' }, wind: { color: '#90EE90', bgColor: 'rgba(144, 238, 144, 0.15)' }, light: { color: '#DAA520', bgColor: 'rgba(218, 165, 32, 0.15)' }, dark: { color: '#6A5ACD', bgColor: 'rgba(106, 90, 205, 0.15)' }, }; // Check if we're showing the spirit selection popup const selectingItem = window._selectingItemForSpirit; let spiritSelectionPopup = ''; if (selectingItem) { const itemInfo = itemTypes[selectingItem.type]; const isRevive = itemInfo?.isRevive; // Build spirit options from team const spiritOptions = team.map((spirit, idx) => { if (!spirit) return ''; const style = elementStyles[spirit.type] ?? elementStyles.earth; const portrait = spiritPortraits[spirit.name] ?? spiritPortraits[spirit.species] ?? ''; const hp = spirit.hp ?? 0; const maxHp = spirit.maxHp ?? spirit.hp ?? 30; const isFainted = hp <= 0; const hpPercent = Math.max(0, (hp / maxHp) * 100); const hpColor = hpPercent > 50 ? '#4ade80' : hpPercent > 25 ? '#facc15' : '#ef4444'; // Determine if this spirit can receive the item let canUse = true; let reason = ''; if (isRevive) { if (!isFainted) { canUse = false; reason = 'Not fainted'; } } else { if (isFainted) { canUse = false; reason = 'Fainted'; } else if (hp >= maxHp) { canUse = false; reason = 'Full HP'; } } return ` `; }).filter(s => s !== '').join(''); spiritSelectionPopup = `

${itemInfo?.isSprite ? `

` : `${itemInfo?.icon ?? '❓'}`}

${itemInfo?.name ?? 'Item'}

${isRevive ? 'Select spirit to revive' : 'Select spirit to heal'}

${spiritOptions || '

No spirits in team

`; } // Build inventory grid - use state slots if available, otherwise build from items const gridSize = 16; // 4x4 grid let slots = state.inventorySlots ?? []; // If no inventorySlots in state, build from legacy format if (slots.length === 0) { if (bondingCrystals > 0) { slots.push({ type: 'bondingCrystal', count: bondingCrystals }); } items.forEach(item => slots.push(item)); } // Pad to grid size while (slots.length < gridSize) { slots.push(null); } const slotElements = slots.map((slot, i) => { if (slot) { const itemInfo = itemTypes[slot.type] ?? { name: 'Unknown', icon: '❓', color: '#888', desc: 'Unknown item' }; const iconHtml = itemInfo.isSprite ? `

` : `${itemInfo.icon}`; const ghostIcon = itemInfo.isSprite ? itemInfo.icon : null; const isUsable = itemInfo.usableOutOfBattle && !state.inBattle; return `

${iconHtml}

${slot.count > 1 ? `

${slot.count}

` : ''}

${itemInfo.name}

${itemInfo.desc}

${slot.count > 1 ? `

Quantity: ${slot.count}

` : ''} ${isUsable ? `

Double-click to use

` : ''}

`; } else { return `

`; } }).join(''); // Destroy confirmation popup const destroyData = window._destroyConfirm; const destroyConfirmPopup = destroyData ? `

⚠️

Destroy Item?

${destroyData.sprite ? `

` : `${destroyData.icon}` }

${destroyData.name}

${destroyData.count > 1 ? `

×${destroyData.count}

` : ''}

This action cannot be undone.
The item will be permanently lost.

` : ''; // Drag initialization script (only runs once) const dragInitScript = ` `; return ` ${dragInitScript} ${spiritSelectionPopup}

❧

🎒

Inventory

ITEMS

${slotElements}

Drag outside to discard • Double-click to use

${destroyConfirmPopup} `; } // === BATTLE TEAM SLOTS (compact team bar for battle UI) === function renderBattleTeamSlots(state, elementStyles, spiritPortraits, battle) { const team = state.team ?? []; return team.slice(0, 5).map((spirit, idx) => { if (!spirit) { // Empty slot - 2x size return `

${idx + 1}

`; } const style = elementStyles[spirit.type] ?? elementStyles.earth; const portrait = spiritPortraits[spirit.name] ?? spiritPortraits[spirit.species] ?? ''; // Use battle HP for captain (index 0), otherwise use spirit's stored HP const hp = idx === 0 ? (battle.playerSpiritHp ?? spirit.hp) : (spirit.hp ?? 0); const maxHp = spirit.maxHp ?? spirit.hp ?? 30; const isFainted = hp <= 0; const isCaptain = idx === 0; const hpPercent = Math.max(0, (hp / maxHp) * 100); // HP bar color const hpColor = hpPercent > 50 ? '#4ade80' : hpPercent > 25 ? '#facc15' : '#ef4444'; return `

${portrait ? `

` : ''} ${isFainted ? `

💀

` : `

Lv.${spirit.level ?? 1}

${isCaptain ? `

👑

` : ''}

`; }).join(''); } // === BATTLE UI (Ghibli parchment style) === function renderBattleUI(state) { const battle = state.battleData; const playerSpirit = state.team[0]; if (!playerSpirit || !battle) return ''; // Handle both PvP (opponentSpirit) and wild battles (wildSpirit) const isPvP = battle.isPvP ?? false; const wildSpirit = isPvP ? battle.opponentSpirit : battle.wildSpirit; // Element styling (Ghibli-friendly colors) const elementStyles = { flame: { color: '#c75a2a', bg: 'linear-gradient(135deg, #e8a87c 0%, #c75a2a 100%)', icon: '🔥', glow: 'rgba(199, 90, 42, 0.3)' }, water: { color: '#4a8f8f', bg: 'linear-gradient(135deg, #7fbfbf 0%, #4a8f8f 100%)', icon: '💧', glow: 'rgba(74, 143, 143, 0.3)' }, earth: { color: '#8B7355', bg: 'linear-gradient(135deg, #a08b70 0%, #8b7355 100%)', icon: '🪨', glow: 'rgba(139, 115, 85, 0.3)' }, wind: { color: '#6a9b6a', bg: 'linear-gradient(135deg, #9bc49b 0%, #6a9b6a 100%)', icon: '🍃', glow: 'rgba(106, 155, 106, 0.3)' }, light: { color: '#b8860b', bg: 'linear-gradient(135deg, #ffe066 0%, #daa520 100%)', icon: '☀️', glow: 'rgba(218, 165, 32, 0.3)' }, dark: { color: '#483d8b', bg: 'linear-gradient(135deg, #9370db 0%, #6a5acd 100%)', icon: '🌙', glow: 'rgba(106, 90, 205, 0.3)' }, primordial: { color: '#B8860B', bg: 'linear-gradient(135deg, #fffacd 0%, #ffd700 50%, #daa520 100%)', icon: '✧', glow: 'rgba(255, 215, 0, 0.5)' }, }; // Spirit portraits - all available spirits (battle UI) // Starters are cute chibi style, advanced spirits are majestic/dramatic const spiritPortraits = { // Starter spirits (cute chibi style) Ember: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', Brook: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', Pebble: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-rocky-chibi-transparent.png', Zephyr: '/cdn/sprite-ghibli-cute-wind-hare-spirit-white-mint-feathery-chibi-transparent.png', Lumina: '/cdn/sprite-ghibli-cute-light-moth-spirit-golden-warm-glowing-chibi-transparent.png', Nyx: '/cdn/sprite-ghibli-cute-dark-cat-spirit-purple-shadow-mysterious-chibi-transparent.png', // Advanced spirits (mid-tier elegant style) Solara: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', Tideling: '/cdn/sprite-ghibli-elegant-water-seahorse-spirit-flowing-fins-luminous-teal-transparent.png', Terravox: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-mossy-transparent.png', Gale: '/cdn/sprite-ghibli-fierce-wind-falcon-spirit-silver-swift-piercing-eyes-transparent.png', Seraphine: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', Vesperon: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', // Primordial spirits (divine, transcendent) Solienne: '/cdn/sprite-ghibli-primordial-goddess-solienne-platinum-blonde-hair-flowing-past-feet-white-flower-wreath-luminous-gold-eyes-white-radiant-petal-dress-golden-light-particles-divine-healing-aura-full-body-transparent.png', // ========== BATCH 1 SPIRITS ========== // Flame evolution line Cinderpup: '/cdn/sprite-ghibli-cute-flame-puppy-spirit-orange-ember-fluffy-small-chibi-transparent.png', Blazehound: '/cdn/sprite-ghibli-sleek-flame-hound-spirit-red-orange-fierce-elegant-transparent.png', Infernowolf: '/cdn/sprite-ghibli-majestic-inferno-wolf-spirit-black-red-flame-mane-fierce-dramatic-transparent.png', // Water evolution line Droplet: '/cdn/sprite-ghibli-cute-water-droplet-spirit-blue-translucent-blob-chibi-transparent.png', Streamling: '/cdn/sprite-ghibli-elegant-water-serpent-spirit-flowing-blue-teal-graceful-transparent.png', Torrentis: '/cdn/sprite-ghibli-majestic-water-dragon-spirit-deep-blue-silver-scales-powerful-dramatic-transparent.png', // Earth evolution line Mudling: '/cdn/sprite-ghibli-cute-mud-blob-spirit-brown-earthy-round-chibi-transparent.png', Claywarden: '/cdn/sprite-ghibli-armored-clay-golem-spirit-terracotta-orange-stoic-guardian-transparent.png', Obsidianite: '/cdn/sprite-ghibli-majestic-obsidian-golem-spirit-black-volcanic-crystal-imposing-dramatic-transparent.png', // Wind evolution line Breezeling: '/cdn/sprite-ghibli-cute-wind-fairy-spirit-mint-green-wispy-small-chibi-transparent.png', Gustwing: '/cdn/sprite-ghibli-swift-wind-hawk-spirit-silver-teal-feathers-elegant-transparent.png', Tempestrix: '/cdn/sprite-ghibli-majestic-storm-phoenix-spirit-purple-lightning-fierce-dramatic-transparent.png', // Light evolution line Glimmer: '/cdn/sprite-ghibli-cute-light-firefly-spirit-golden-sparkly-tiny-chibi-transparent.png', Luxwing: '/cdn/sprite-ghibli-elegant-light-butterfly-spirit-iridescent-gold-white-graceful-transparent.png', Radiantia: '/cdn/sprite-ghibli-majestic-light-dragon-spirit-white-gold-radiant-wings-divine-dramatic-transparent.png', // Dark evolution line Shadeling: '/cdn/sprite-ghibli-cute-shadow-wisp-spirit-purple-black-smoky-chibi-transparent.png', Duskweaver: '/cdn/sprite-ghibli-mysterious-shadow-spider-spirit-dark-purple-elegant-sinister-transparent.png', Umbralith: '/cdn/sprite-ghibli-terrifying-shadow-beast-spirit-black-purple-void-eyes-menacing-dramatic-transparent.png', // ========== STARTER EVOLUTION LINES (Ember, Brook, etc.) ========== // Ember line mediums/advanced Flarekin: '/cdn/sprite-ghibli-elegant-flame-fox-spirit-crimson-gold-fierce-flowing-tail-transparent.png', Pyranthos: '/cdn/sprite-ghibli-majestic-nine-tailed-flame-fox-spirit-white-gold-fire-divine-dramatic-transparent.png', // Brook line mediums/advanced Coraline: '/cdn/sprite-ghibli-elegant-water-koi-dragon-spirit-sapphire-silver-graceful-transparent.png', Tsunamara: '/cdn/sprite-ghibli-majestic-water-dragon-koi-spirit-azure-pearl-flowing-whiskers-dramatic-transparent.png', // Pebble line mediums/advanced Boulderkin: '/cdn/sprite-ghibli-sturdy-earth-golem-spirit-granite-moss-armored-stoic-transparent.png', Terradon: '/cdn/sprite-ghibli-ancient-mountain-golem-spirit-obsidian-crystal-massive-dramatic-transparent.png', // Zephyr line mediums/advanced Galewing: '/cdn/sprite-ghibli-swift-wind-hare-spirit-silver-teal-long-ears-elegant-transparent.png', Cyclonix: '/cdn/sprite-ghibli-majestic-storm-hare-spirit-white-lightning-crackling-ears-dramatic-transparent.png', // Lumina line mediums/advanced Aurelis: '/cdn/sprite-ghibli-radiant-light-moth-spirit-golden-white-luminous-wings-elegant-transparent.png', Solarius: '/cdn/sprite-ghibli-divine-sun-moth-spirit-platinum-gold-radiant-six-wings-dramatic-transparent.png', // Nyx line mediums/advanced Umbris: '/cdn/sprite-ghibli-sleek-shadow-cat-spirit-midnight-purple-glowing-eyes-elegant-transparent.png', Eclipsar: '/cdn/sprite-ghibli-majestic-void-panther-spirit-black-purple-cosmic-eyes-dramatic-transparent.png', // ========== PRE-RARE BASICS (evolve into Solara, Tideling, etc.) ========== Flickling: '/cdn/sprite-ghibli-cute-flame-chick-spirit-orange-tiny-wings-chibi-transparent.png', Bubbling: '/cdn/sprite-ghibli-cute-water-seahorse-baby-spirit-cyan-tiny-chibi-transparent.png', Pebblet: '/cdn/sprite-ghibli-cute-baby-tortoise-spirit-brown-tiny-shell-chibi-transparent.png', Wisplet: '/cdn/sprite-ghibli-cute-wind-chick-spirit-silver-fluffy-tiny-chibi-transparent.png', Glowmote: '/cdn/sprite-ghibli-cute-light-orb-spirit-golden-tiny-sparkle-chibi-transparent.png', Shadowkit: '/cdn/sprite-ghibli-cute-shadow-raven-chick-spirit-purple-tiny-chibi-transparent.png', // ========== POST-RARE ADVANCED (final forms for Solara, Tideling, etc.) ========== Phoenixia: '/cdn/sprite-ghibli-divine-flame-phoenix-spirit-white-gold-rebirth-flames-dramatic-transparent.png', Leviathos: '/cdn/sprite-ghibli-majestic-sea-leviathan-spirit-deep-blue-ancient-colossal-dramatic-transparent.png', Colossadon: '/cdn/sprite-ghibli-ancient-world-turtle-spirit-mountain-shell-colossal-dramatic-transparent.png', Stormravian: '/cdn/sprite-ghibli-legendary-storm-eagle-spirit-silver-lightning-wings-dramatic-transparent.png', Celestine: '/cdn/sprite-ghibli-divine-celestial-crane-spirit-platinum-rainbow-wings-dramatic-transparent.png', Nocturnax: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-black-cosmic-feathers-dramatic-transparent.png', // ========== BATCH 2 SPIRITS ========== // Salamander line Sizzlescale: '/cdn/sprite-ghibli-cute-flame-salamander-spirit-orange-red-tiny-scales-chibi-transparent.png', Magmalisk: '/cdn/sprite-ghibli-sleek-magma-lizard-spirit-red-black-molten-cracks-elegant-transparent.png', Volcanorus: '/cdn/sprite-ghibli-majestic-volcanic-dragon-salamander-spirit-obsidian-lava-veins-dramatic-transparent.png', // Jellyfish line Jellydrop: '/cdn/sprite-ghibli-cute-jellyfish-spirit-translucent-blue-tiny-bell-chibi-transparent.png', Driftbell: '/cdn/sprite-ghibli-elegant-jellyfish-spirit-luminous-teal-flowing-tendrils-graceful-transparent.png', Abyssalume: '/cdn/sprite-ghibli-majestic-deep-sea-jellyfish-spirit-bioluminescent-purple-blue-ethereal-dramatic-transparent.png', // Mole line Burrowkit: '/cdn/sprite-ghibli-cute-mole-spirit-brown-fuzzy-tiny-claws-chibi-transparent.png', Terramole: '/cdn/sprite-ghibli-sturdy-giant-mole-spirit-brown-armored-claws-powerful-transparent.png', Quakebeast: '/cdn/sprite-ghibli-massive-earth-beast-spirit-brown-stone-plates-seismic-dramatic-transparent.png', // Cloud line Cloudpuff: '/cdn/sprite-ghibli-cute-cloud-spirit-fluffy-white-tiny-wings-chibi-transparent.png', Nimbuswing: '/cdn/sprite-ghibli-graceful-cloud-bird-spirit-white-silver-wispy-feathers-elegant-transparent.png', Stratosoul: '/cdn/sprite-ghibli-majestic-stratosphere-spirit-white-gold-ethereal-cloud-form-dramatic-transparent.png', // Deer line Fawnlight: '/cdn/sprite-ghibli-cute-light-fawn-spirit-white-gold-spots-tiny-chibi-transparent.png', Gleamstag: '/cdn/sprite-ghibli-elegant-light-stag-spirit-white-gold-glowing-antlers-majestic-transparent.png', Auroralope: '/cdn/sprite-ghibli-majestic-aurora-elk-spirit-white-rainbow-antlers-ethereal-dramatic-transparent.png', // Bat line Squeakwing: '/cdn/sprite-ghibli-cute-bat-spirit-purple-tiny-fangs-fluffy-chibi-transparent.png', Nightfang: '/cdn/sprite-ghibli-sleek-vampire-bat-spirit-dark-purple-red-eyes-elegant-transparent.png', Dreadwyvern: '/cdn/sprite-ghibli-terrifying-dark-wyvern-spirit-black-red-demonic-wings-dramatic-transparent.png', // ========== BATCH 3 SPIRITS ========== // Dragon line Drakeling: '/cdn/sprite-ghibli-cute-baby-dragon-spirit-orange-red-tiny-wings-chibi-transparent.png', Wyrmblaze: '/cdn/sprite-ghibli-fierce-flame-dragon-spirit-red-gold-fire-breath-elegant-transparent.png', Infernodrake: '/cdn/sprite-ghibli-majestic-elder-dragon-spirit-crimson-black-massive-wings-dramatic-transparent.png', // Frog line Puddlehopper: '/cdn/sprite-ghibli-cute-tiny-frog-spirit-blue-green-webbed-feet-chibi-transparent.png', Torrenttoad: '/cdn/sprite-ghibli-sturdy-toad-spirit-teal-blue-armored-back-powerful-transparent.png', Tsunamifrog: '/cdn/sprite-ghibli-majestic-giant-frog-spirit-deep-blue-wave-patterns-dramatic-transparent.png', // Crystal line Gemshard: '/cdn/sprite-ghibli-cute-crystal-creature-spirit-pink-purple-sparkly-chibi-transparent.png', Crystalguard: '/cdn/sprite-ghibli-elegant-crystal-golem-spirit-amethyst-purple-geometric-transparent.png', Diamondtitan: '/cdn/sprite-ghibli-majestic-diamond-colossus-spirit-prismatic-rainbow-dramatic-transparent.png', // Butterfly line Flutterwind: '/cdn/sprite-ghibli-cute-tiny-butterfly-spirit-pale-blue-delicate-wings-chibi-transparent.png', Galefly: '/cdn/sprite-ghibli-elegant-butterfly-spirit-silver-teal-flowing-wings-graceful-transparent.png', Tempestmonarch: '/cdn/sprite-ghibli-majestic-giant-butterfly-spirit-storm-purple-lightning-wings-dramatic-transparent.png', // Rabbit line Sunbun: '/cdn/sprite-ghibli-cute-tiny-bunny-spirit-golden-white-fluffy-glowing-ears-chibi-transparent.png', Radiantrabbit: '/cdn/sprite-ghibli-elegant-rabbit-spirit-white-gold-luminous-fur-graceful-transparent.png', Celestihare: '/cdn/sprite-ghibli-majestic-celestial-hare-spirit-platinum-rainbow-aura-divine-dramatic-transparent.png', // Snake line Vipershade: '/cdn/sprite-ghibli-cute-tiny-snake-spirit-purple-black-glowing-eyes-chibi-transparent.png', Shadowserpent: '/cdn/sprite-ghibli-elegant-snake-spirit-dark-purple-shadowy-coils-sinister-transparent.png', Abyssalcoil: '/cdn/sprite-ghibli-terrifying-massive-serpent-spirit-void-black-cosmic-scales-dramatic-transparent.png', // ========== BATCH 4 SPIRITS ========== // Scorpion line Emberclaw: '/cdn/sprite-ghibli-cute-tiny-scorpion-spirit-orange-red-glowing-tail-chibi-transparent.png', Blazescorpion: '/cdn/sprite-ghibli-fierce-scorpion-spirit-red-black-fiery-pincers-elegant-transparent.png', Infernostinger: '/cdn/sprite-ghibli-majestic-emperor-scorpion-spirit-obsidian-lava-veins-dramatic-transparent.png', // Turtle line Shellsplash: '/cdn/sprite-ghibli-cute-tiny-turtle-spirit-cyan-blue-shell-chibi-transparent.png', Tidalshell: '/cdn/sprite-ghibli-graceful-sea-turtle-spirit-teal-coral-patterns-elegant-transparent.png', Oceanbastion: '/cdn/sprite-ghibli-majestic-giant-turtle-spirit-deep-blue-fortress-shell-dramatic-transparent.png', // Bear line Cubite: '/cdn/sprite-ghibli-cute-tiny-bear-cub-spirit-brown-stone-fur-chibi-transparent.png', Grizzite: '/cdn/sprite-ghibli-powerful-bear-spirit-granite-grey-rocky-fur-fierce-transparent.png', Mountainroar: '/cdn/sprite-ghibli-majestic-massive-bear-spirit-mountain-stone-crystals-dramatic-transparent.png', // Owl line Hootlet: '/cdn/sprite-ghibli-cute-tiny-owl-spirit-white-silver-fluffy-chibi-transparent.png', Galeowl: '/cdn/sprite-ghibli-elegant-owl-spirit-silver-teal-wind-feathers-graceful-transparent.png', Stormwatcher: '/cdn/sprite-ghibli-majestic-great-owl-spirit-white-storm-wings-lightning-eyes-dramatic-transparent.png', // Unicorn line Sparkfoal: '/cdn/sprite-ghibli-cute-tiny-foal-spirit-white-gold-sparkle-mane-chibi-transparent.png', Gleamsteed: '/cdn/sprite-ghibli-elegant-horse-spirit-white-golden-luminous-mane-graceful-transparent.png', Celesticorn: '/cdn/sprite-ghibli-majestic-unicorn-spirit-platinum-rainbow-horn-divine-dramatic-transparent.png', // Wolf line Shadowpup: '/cdn/sprite-ghibli-cute-tiny-wolf-pup-spirit-black-purple-glowing-eyes-chibi-transparent.png', Duskhowl: '/cdn/sprite-ghibli-fierce-wolf-spirit-dark-grey-purple-mist-elegant-transparent.png', Voidfang: '/cdn/sprite-ghibli-terrifying-dire-wolf-spirit-void-black-cosmic-fur-dramatic-transparent.png', }; const playerStyle = elementStyles[playerSpirit.type] ?? elementStyles.earth; const enemyStyle = elementStyles[wildSpirit.type] ?? elementStyles.flame; const playerPortrait = spiritPortraits[playerSpirit.name] ?? ''; const enemyPortrait = spiritPortraits[wildSpirit.name] ?? ''; // HP calculations const playerCurrentHp = battle.playerSpiritHp ?? playerSpirit.hp; const playerMaxHp = playerSpirit.maxHp ?? playerSpirit.hp; const playerHpPercent = Math.max(0, (playerCurrentHp / playerMaxHp) * 100); // For PvP, use opponentSpiritHp; for wild battles, use wildSpiritHp const enemyCurrentHp = isPvP ? battle.opponentSpiritHp : battle.wildSpiritHp; const enemyMaxHp = wildSpirit.maxHp ?? wildSpirit.hp; const enemyHpPercent = Math.max(0, (enemyCurrentHp / enemyMaxHp) * 100); // HP bar colors (softer Ghibli tones) const getHpColor = (percent) => { if (percent > 50) return 'linear-gradient(to right, #7a9b6d, #5a8b5a)'; if (percent > 20) return 'linear-gradient(to right, #c9a66b, #b8956a)'; return 'linear-gradient(to right, #c75a5a, #a84a4a)'; }; // Darker parchment colors const parchmentLight = '#e5d8c3'; const parchmentMid = '#d9ccb8'; const parchmentDark = '#cfc2ae'; const borderDark = '#7a6352'; // Battle state const isPlayerTurn = battle.turn === 'player'; const isWaitingForOpponent = battle.turn === 'waiting_for_opponent'; const isVictory = battle.turn === 'victory'; const isDefeat = battle.turn === 'defeat'; const isFled = battle.turn === 'fled'; const battleOver = isVictory || isDefeat || isFled; // Build move buttons (darker parchment style) // NEW SYSTEM: Click selects move, short delay then auto-confirms // This prevents spam - you can click as much as you want, but only one attack fires const moves = playerSpirit.moves ?? []; const selectedMove = battle.selectedMove; // Which move is currently selected (0-3 or undefined) const confirmTimer = battle.confirmTimer; // Countdown to auto-confirm const canAct = isPlayerTurn && !battleOver; const moveButtons = moves.map((move, idx) => { const moveStyle = elementStyles[move.type] ?? elementStyles.earth; const isSelected = selectedMove === idx; // Visual styling for selected move const selectedBorder = isSelected ? '#FFD700' : moveStyle.color; const selectedGlow = isSelected ? '0 0 15px rgba(255, 215, 0, 0.6),' : ''; const selectedBg = isSelected ? 'linear-gradient(to bottom, #fff8dc, #f5e6c8)' : `linear-gradient(to bottom, ${parchmentLight}, ${parchmentMid})`; return ` `; }).join(''); // Selection indicator bar (shows countdown when move is selected) const selectionBar = (selectedMove !== undefined && selectedMove !== null && confirmTimer !== undefined) ? `

Confirming ${moves[selectedMove]?.name ?? 'move'}...

` : ''; // Battle message popup - shows latest message with animation // Track which message we've shown to avoid repeated animations const battleLog = battle.battleLog ?? []; const latestMessage = battleLog.length > 0 ? battleLog[battleLog.length - 1] : null; const messageKey = battleLog.length; // Changes when new message arrives // Also keep recent log for the compact battle log display const recentLog = battleLog.slice(-3); // Battle message popup system: // - When a new message arrives (messageKey increases), show the popup and track timestamp // - Keep showing popup for 2.5 seconds (animation duration) // - After that, hide it until next message const lastShownKey = window._lastBattleMessageKey ?? 0; const popupExpireTime = window._battlePopupExpireTime ?? 0; const now = Date.now(); // Check if this is a new message we haven't shown yet const isNewMessage = latestMessage && messageKey > lastShownKey; // If new message, update tracker and set expiration time if (isNewMessage) { window._lastBattleMessageKey = messageKey; window._battlePopupExpireTime = now + 2500; // Show for 2.5 seconds } // Show popup if we have a message and haven't expired yet const shouldShowPopup = latestMessage && now < (window._battlePopupExpireTime ?? 0); const battleMessagePopup = shouldShowPopup ? `

❧

${latestMessage}

` : ''; return `

${battleMessagePopup}

${enemyStyle.icon} ${wildSpirit.name} WILD

Lv.${wildSpirit.level}

${enemyCurrentHp} / ${enemyMaxHp}

${renderBattleTeamSlots(state, elementStyles, spiritPortraits, battle)}

${playerStyle.icon} ${playerSpirit.nickname || playerSpirit.name} ${playerSpirit.nickname ? `(${playerSpirit.name})` : ''}

Lv.${playerSpirit.level}

${playerCurrentHp} / ${playerMaxHp}

BATTLE LOG

${recentLog.map(msg => `

${msg}

`).join('')}

${battleOver ? `

${isVictory ? '🎉 VICTORY!' : isFled ? '💨 ESCAPED!' : '💀 DEFEATED'}

Returning to the world...

` : `

${isPlayerTurn ? '⚔️ YOUR TURN' : isWaitingForOpponent ? '⏳ OPPONENT\'S TURN...' : '⏳ ENEMY TURN...'} ${isPlayerTurn && battle.turnTimeRemaining !== undefined ? `

⏱️ ${Math.ceil(battle.turnTimeRemaining)}s

` : ''}

${moveButtons}

${selectionBar}

${!isPvP ? ` ` : ''} ${!isPvP ? ` ` : ''}

${window._showBattleSwitch ? renderBattleSwitchPanel(state, isPlayerTurn, parchmentLight, parchmentMid, borderDark) : ''} ${!isPvP && window._showBattleItems ? renderBattleItemsPanel(state, isPlayerTurn, parchmentLight, parchmentMid, borderDark) : ''} `}

`; } // === CAPTURE CHANCE CALCULATOR (for UI tooltips) === function calculateCaptureChance(state, crystalTier) { const battle = state.battleData; if (!battle || !battle.wildSpirit) return null; // Crystal tier bonuses and minimum floors const crystalData = { bonding: { bonus: 0, minChance: 0.01 }, // 1% floor - don't waste these on overleveled resonant: { bonus: 0.20, minChance: 0.03 }, // 3% floor - long shot harmonic: { bonus: 0.35, minChance: 0.05 }, // 5% floor - miracle catch possible }; const crystal = crystalData[crystalTier] ?? crystalData.bonding; // Get levels const playerCaptainLevel = state.team?.[0]?.level ?? 1; const wildSpiritLevel = battle.wildSpirit?.level ?? 1; const levelDiff = wildSpiritLevel - playerCaptainLevel; // Level penalty calculation (same as stats-holder.js) let levelPenalty = 0; if (levelDiff > 0) { if (levelDiff <= 5) { levelPenalty = levelDiff * 0.04; } else if (levelDiff <= 10) { levelPenalty = 0.20 + (levelDiff - 5) * 0.08; } else { levelPenalty = 0.60 + (levelDiff - 10) * 0.05; } levelPenalty = Math.min(0.95, levelPenalty); } // HP-based capture chance const enemyHp = battle.wildSpiritHp ?? battle.wildSpirit.hp; const enemyMaxHp = battle.wildSpirit.maxHp ?? battle.wildSpirit.hp; const enemyHpPercent = (enemyHp / enemyMaxHp) * 100; let captureChance = 0.35; // Base 35% if (enemyHpPercent < 50) captureChance = 0.55; if (enemyHpPercent < 25) captureChance = 0.75; if (enemyHpPercent < 10) captureChance = 0.90; // Apply crystal bonus captureChance = captureChance + crystal.bonus; // Apply level penalty captureChance = captureChance * (1 - levelPenalty); // Clamp between crystal-specific floor and 95% ceiling captureChance = Math.max(crystal.minChance, Math.min(0.95, captureChance)); return Math.round(captureChance * 100); } // Get color for capture chance display function getCaptureChanceColor(chance) { if (chance >= 70) return '#5a8b5a'; // Green - good odds if (chance >= 40) return '#b89a5a'; // Yellow - decent odds if (chance >= 20) return '#c97a3a'; // Orange - tough odds return '#b85a5a'; // Red - very low odds } // === BATTLE SWITCH PANEL === function renderBattleSwitchPanel(state, isPlayerTurn, parchmentLight, parchmentMid, borderDark) { const team = state.team ?? []; const battle = state.battleData; // Element styles for spirit display const elementStyles = { flame: { color: '#c75a2a', bgColor: 'rgba(199, 90, 42, 0.15)', icon: '🔥' }, water: { color: '#4a8f8f', bgColor: 'rgba(74, 143, 143, 0.15)', icon: '💧' }, earth: { color: '#8b6914', bgColor: 'rgba(139, 105, 20, 0.15)', icon: '🪨' }, wind: { color: '#5a8b6d', bgColor: 'rgba(90, 139, 109, 0.15)', icon: '🌀' }, light: { color: '#c9a66b', bgColor: 'rgba(201, 166, 107, 0.15)', icon: '✨' }, dark: { color: '#6b5a8b', bgColor: 'rgba(107, 90, 139, 0.15)', icon: '🌑' }, }; // Spirit portraits const spiritPortraits = SPIRIT_PORTRAITS; // Build switchable spirit buttons (exclude index 0, the active captain) // Also check for the battle lock to prevent spam clicking const isLocked = window._battleMoveLocked ?? false; const spiritButtons = team.slice(1).map((spirit, idx) => { const actualIndex = idx + 1; // Offset because we sliced from 1 if (!spirit) return ''; const style = elementStyles[spirit.type] ?? elementStyles.earth; const portrait = spiritPortraits[spirit.name] ?? spiritPortraits[spirit.species] ?? ''; const hp = spirit.hp ?? 0; const maxHp = spirit.maxHp ?? spirit.hp ?? 30; const hpPercent = Math.round((hp / maxHp) * 100); const isFainted = hp <= 0; const level = spirit.level ?? 1; // Can only switch to non-fainted spirits, and not while locked const canSwitch = !isFainted && isPlayerTurn && !isLocked; const hpColor = hpPercent > 50 ? '#4ade80' : hpPercent > 25 ? '#facc15' : '#ef4444'; return ` `; }).filter(s => s !== '').join(''); // No switchable spirits message const noSpiritsMessage = spiritButtons.length === 0 ? `

No other spirits available to switch to

` : ''; return `

🔄 Switch Spirit

${spiritButtons || noSpiritsMessage}

Switching uses your turn

`; } // === BATTLE ITEMS PANEL === function renderBattleItemsPanel(state, isPlayerTurn, parchmentLight, parchmentMid, borderDark) { const inventory = state.inventory ?? {}; const slots = state.inventorySlots ?? []; const team = state.team ?? []; const battle = state.battleData ?? {}; // Get battle data for captain HP tracking // Build items list - check multiple sources let items = []; // First check inventorySlots (new format) if (slots.length > 0) { items = slots.filter(s => s !== null); } // Also check legacy formats const bondingCrystals = state.bondingCrystals ?? inventory.bondingCrystals ?? 0; if (bondingCrystals > 0 && !items.some(i => i.type === 'bondingCrystal')) { items.push({ type: 'bondingCrystal', count: bondingCrystals }); } // Check inventory.items array (inventory.items ?? []).forEach(item => { if (!items.some(i => i.type === item.type)) { items.push(item); } }); // Build item types from central database for battle use const itemTypes = {}; for (const [key, item] of Object.entries(ITEM_DATABASE)) { itemTypes[key] = { name: item.name, icon: item.icon, color: item.color, desc: item.description, usableInBattle: item.usableInBattle, action: item.action, isSprite: true, crystalTier: item.crystalTier, healAmount: item.healAmount, }; } // Spirit element styles for target selection const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥' }, water: { color: '#4FC3F7', bgColor: 'rgba(79, 195, 247, 0.15)', icon: '💧' }, earth: { color: '#8D6E63', bgColor: 'rgba(141, 110, 99, 0.15)', icon: '🪨' }, wind: { color: '#A5D6A7', bgColor: 'rgba(165, 214, 167, 0.15)', icon: '🌀' }, }; // Spirit portraits - all available spirits (battle item selection) // Starters are cute chibi style, advanced spirits are majestic/dramatic const spiritPortraits = { // Starter spirits (cute chibi style) Ember: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', Brook: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', Pebble: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-rocky-chibi-transparent.png', Zephyr: '/cdn/sprite-ghibli-cute-wind-hare-spirit-white-mint-feathery-chibi-transparent.png', Lumina: '/cdn/sprite-ghibli-cute-light-moth-spirit-golden-warm-glowing-chibi-transparent.png', Nyx: '/cdn/sprite-ghibli-cute-dark-cat-spirit-purple-shadow-mysterious-chibi-transparent.png', // Starter evolution mediums Flarekin: '/cdn/sprite-ghibli-elegant-flame-fox-spirit-crimson-gold-fierce-flowing-tail-transparent.png', Coraline: '/cdn/sprite-ghibli-elegant-water-koi-dragon-spirit-sapphire-silver-graceful-transparent.png', Boulderkin: '/cdn/sprite-ghibli-sturdy-earth-golem-spirit-granite-moss-armored-stoic-transparent.png', Galewing: '/cdn/sprite-ghibli-swift-wind-hare-spirit-silver-teal-long-ears-elegant-transparent.png', Aurelis: '/cdn/sprite-ghibli-radiant-light-moth-spirit-golden-white-luminous-wings-elegant-transparent.png', Umbris: '/cdn/sprite-ghibli-sleek-shadow-cat-spirit-midnight-purple-glowing-eyes-elegant-transparent.png', // Starter evolution advanced Pyranthos: '/cdn/sprite-ghibli-majestic-nine-tailed-flame-fox-spirit-white-gold-fire-divine-dramatic-transparent.png', Tsunamara: '/cdn/sprite-ghibli-majestic-water-dragon-koi-spirit-azure-pearl-flowing-whiskers-dramatic-transparent.png', Terradon: '/cdn/sprite-ghibli-ancient-mountain-golem-spirit-obsidian-crystal-massive-dramatic-transparent.png', Cyclonix: '/cdn/sprite-ghibli-majestic-storm-hare-spirit-white-lightning-crackling-ears-dramatic-transparent.png', Solarius: '/cdn/sprite-ghibli-divine-sun-moth-spirit-platinum-gold-radiant-six-wings-dramatic-transparent.png', Eclipsar: '/cdn/sprite-ghibli-majestic-void-panther-spirit-black-purple-cosmic-eyes-dramatic-transparent.png', // Pre-rare basics Flickling: '/cdn/sprite-ghibli-cute-flame-chick-spirit-orange-tiny-wings-chibi-transparent.png', Bubbling: '/cdn/sprite-ghibli-cute-water-seahorse-baby-spirit-cyan-tiny-chibi-transparent.png', Pebblet: '/cdn/sprite-ghibli-cute-baby-tortoise-spirit-brown-tiny-shell-chibi-transparent.png', Wisplet: '/cdn/sprite-ghibli-cute-wind-chick-spirit-silver-fluffy-tiny-chibi-transparent.png', Glowmote: '/cdn/sprite-ghibli-cute-light-orb-spirit-golden-tiny-sparkle-chibi-transparent.png', Shadowkit: '/cdn/sprite-ghibli-cute-shadow-raven-chick-spirit-purple-tiny-chibi-transparent.png', // Advanced spirits (mid-tier elegant style) Solara: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', Tideling: '/cdn/sprite-ghibli-elegant-water-seahorse-spirit-flowing-fins-luminous-teal-transparent.png', Terravox: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-mossy-transparent.png', Gale: '/cdn/sprite-ghibli-fierce-wind-falcon-spirit-silver-swift-piercing-eyes-transparent.png', Seraphine: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', Vesperon: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', // Post-rare advanced Phoenixia: '/cdn/sprite-ghibli-divine-flame-phoenix-spirit-white-gold-rebirth-flames-dramatic-transparent.png', Leviathos: '/cdn/sprite-ghibli-majestic-sea-leviathan-spirit-deep-blue-ancient-colossal-dramatic-transparent.png', Colossadon: '/cdn/sprite-ghibli-ancient-world-turtle-spirit-mountain-shell-colossal-dramatic-transparent.png', Stormravian: '/cdn/sprite-ghibli-legendary-storm-eagle-spirit-silver-lightning-wings-dramatic-transparent.png', Celestine: '/cdn/sprite-ghibli-divine-celestial-crane-spirit-platinum-rainbow-wings-dramatic-transparent.png', Nocturnax: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-black-cosmic-feathers-dramatic-transparent.png', // Batch 1: Canine, Serpent, Golem, Fairy, Insect, Shadow lines Cinderpup: '/cdn/sprite-ghibli-cute-flame-puppy-spirit-orange-ember-fluffy-small-chibi-transparent.png', Blazehound: '/cdn/sprite-ghibli-sleek-flame-hound-spirit-red-orange-fierce-elegant-transparent.png', Infernowolf: '/cdn/sprite-ghibli-majestic-inferno-wolf-spirit-black-red-flame-mane-fierce-dramatic-transparent.png', Droplet: '/cdn/sprite-ghibli-cute-water-droplet-spirit-blue-translucent-blob-chibi-transparent.png', Streamling: '/cdn/sprite-ghibli-elegant-water-serpent-spirit-flowing-blue-teal-graceful-transparent.png', Torrentis: '/cdn/sprite-ghibli-majestic-water-dragon-spirit-deep-blue-silver-scales-powerful-dramatic-transparent.png', Mudling: '/cdn/sprite-ghibli-cute-mud-blob-spirit-brown-earthy-round-chibi-transparent.png', Claywarden: '/cdn/sprite-ghibli-armored-clay-golem-spirit-terracotta-orange-stoic-guardian-transparent.png', Obsidianite: '/cdn/sprite-ghibli-majestic-obsidian-golem-spirit-black-volcanic-crystal-imposing-dramatic-transparent.png', Breezeling: '/cdn/sprite-ghibli-cute-wind-fairy-spirit-mint-green-wispy-small-chibi-transparent.png', Gustwing: '/cdn/sprite-ghibli-swift-wind-hawk-spirit-silver-teal-feathers-elegant-transparent.png', Tempestrix: '/cdn/sprite-ghibli-majestic-storm-phoenix-spirit-purple-lightning-fierce-dramatic-transparent.png', Glimmer: '/cdn/sprite-ghibli-cute-light-firefly-spirit-golden-sparkly-tiny-chibi-transparent.png', Luxwing: '/cdn/sprite-ghibli-elegant-light-butterfly-spirit-iridescent-gold-white-graceful-transparent.png', Radiantia: '/cdn/sprite-ghibli-majestic-light-dragon-spirit-white-gold-radiant-wings-divine-dramatic-transparent.png', Shadeling: '/cdn/sprite-ghibli-cute-shadow-wisp-spirit-purple-black-smoky-chibi-transparent.png', Duskweaver: '/cdn/sprite-ghibli-mysterious-shadow-spider-spirit-dark-purple-elegant-sinister-transparent.png', Umbralith: '/cdn/sprite-ghibli-terrifying-shadow-beast-spirit-black-purple-void-eyes-menacing-dramatic-transparent.png', // Batch 2: Salamander, Jellyfish, Mole, Cloud, Deer, Bat lines Sizzlescale: '/cdn/sprite-ghibli-cute-flame-salamander-spirit-orange-red-tiny-scales-chibi-transparent.png', Magmalisk: '/cdn/sprite-ghibli-sleek-magma-lizard-spirit-red-black-molten-cracks-elegant-transparent.png', Volcanorus: '/cdn/sprite-ghibli-majestic-volcanic-dragon-salamander-spirit-obsidian-lava-veins-dramatic-transparent.png', Jellydrop: '/cdn/sprite-ghibli-cute-jellyfish-spirit-translucent-blue-tiny-bell-chibi-transparent.png', Driftbell: '/cdn/sprite-ghibli-elegant-jellyfish-spirit-luminous-teal-flowing-tendrils-graceful-transparent.png', Abyssalume: '/cdn/sprite-ghibli-majestic-deep-sea-jellyfish-spirit-bioluminescent-purple-blue-ethereal-dramatic-transparent.png', Burrowkit: '/cdn/sprite-ghibli-cute-mole-spirit-brown-fuzzy-tiny-claws-chibi-transparent.png', Terramole: '/cdn/sprite-ghibli-sturdy-giant-mole-spirit-brown-armored-claws-powerful-transparent.png', Quakebeast: '/cdn/sprite-ghibli-massive-earth-beast-spirit-brown-stone-plates-seismic-dramatic-transparent.png', Cloudpuff: '/cdn/sprite-ghibli-cute-cloud-spirit-fluffy-white-tiny-wings-chibi-transparent.png', Nimbuswing: '/cdn/sprite-ghibli-graceful-cloud-bird-spirit-white-silver-wispy-feathers-elegant-transparent.png', Stratosoul: '/cdn/sprite-ghibli-majestic-stratosphere-spirit-white-gold-ethereal-cloud-form-dramatic-transparent.png', Fawnlight: '/cdn/sprite-ghibli-cute-light-fawn-spirit-white-gold-spots-tiny-chibi-transparent.png', Gleamstag: '/cdn/sprite-ghibli-elegant-light-stag-spirit-white-gold-glowing-antlers-majestic-transparent.png', Auroralope: '/cdn/sprite-ghibli-majestic-aurora-elk-spirit-white-rainbow-antlers-ethereal-dramatic-transparent.png', Squeakwing: '/cdn/sprite-ghibli-cute-bat-spirit-purple-tiny-fangs-fluffy-chibi-transparent.png', Nightfang: '/cdn/sprite-ghibli-sleek-vampire-bat-spirit-dark-purple-red-eyes-elegant-transparent.png', Dreadwyvern: '/cdn/sprite-ghibli-terrifying-dark-wyvern-spirit-black-red-demonic-wings-dramatic-transparent.png', // Batch 3: Dragon, Frog, Crystal, Butterfly, Rabbit, Snake lines Drakeling: '/cdn/sprite-ghibli-cute-baby-dragon-spirit-orange-red-tiny-wings-chibi-transparent.png', Wyrmblaze: '/cdn/sprite-ghibli-fierce-flame-dragon-spirit-red-gold-fire-breath-elegant-transparent.png', Infernodrake: '/cdn/sprite-ghibli-majestic-elder-dragon-spirit-crimson-black-massive-wings-dramatic-transparent.png', Puddlehopper: '/cdn/sprite-ghibli-cute-tiny-frog-spirit-blue-green-webbed-feet-chibi-transparent.png', Torrenttoad: '/cdn/sprite-ghibli-sturdy-toad-spirit-teal-blue-armored-back-powerful-transparent.png', Tsunamifrog: '/cdn/sprite-ghibli-majestic-giant-frog-spirit-deep-blue-wave-patterns-dramatic-transparent.png', Gemshard: '/cdn/sprite-ghibli-cute-crystal-creature-spirit-pink-purple-sparkly-chibi-transparent.png', Crystalguard: '/cdn/sprite-ghibli-elegant-crystal-golem-spirit-amethyst-purple-geometric-transparent.png', Diamondtitan: '/cdn/sprite-ghibli-majestic-diamond-colossus-spirit-prismatic-rainbow-dramatic-transparent.png', Flutterwind: '/cdn/sprite-ghibli-cute-tiny-butterfly-spirit-pale-blue-delicate-wings-chibi-transparent.png', Galefly: '/cdn/sprite-ghibli-elegant-butterfly-spirit-silver-teal-flowing-wings-graceful-transparent.png', Tempestmonarch: '/cdn/sprite-ghibli-majestic-giant-butterfly-spirit-storm-purple-lightning-wings-dramatic-transparent.png', Sunbun: '/cdn/sprite-ghibli-cute-tiny-bunny-spirit-golden-white-fluffy-glowing-ears-chibi-transparent.png', Radiantrabbit: '/cdn/sprite-ghibli-elegant-rabbit-spirit-white-gold-luminous-fur-graceful-transparent.png', Celestihare: '/cdn/sprite-ghibli-majestic-celestial-hare-spirit-platinum-rainbow-aura-divine-dramatic-transparent.png', Vipershade: '/cdn/sprite-ghibli-cute-tiny-snake-spirit-purple-black-glowing-eyes-chibi-transparent.png', Shadowserpent: '/cdn/sprite-ghibli-elegant-snake-spirit-dark-purple-shadowy-coils-sinister-transparent.png', Abyssalcoil: '/cdn/sprite-ghibli-terrifying-massive-serpent-spirit-void-black-cosmic-scales-dramatic-transparent.png', // Batch 4: Scorpion, Turtle, Bear, Owl, Unicorn, Wolf lines Emberclaw: '/cdn/sprite-ghibli-cute-tiny-scorpion-spirit-orange-red-glowing-tail-chibi-transparent.png', Blazescorpion: '/cdn/sprite-ghibli-fierce-scorpion-spirit-red-black-fiery-pincers-elegant-transparent.png', Infernostinger: '/cdn/sprite-ghibli-majestic-emperor-scorpion-spirit-obsidian-lava-veins-dramatic-transparent.png', Shellsplash: '/cdn/sprite-ghibli-cute-tiny-turtle-spirit-cyan-blue-shell-chibi-transparent.png', Tidalshell: '/cdn/sprite-ghibli-graceful-sea-turtle-spirit-teal-coral-patterns-elegant-transparent.png', Oceanbastion: '/cdn/sprite-ghibli-majestic-giant-turtle-spirit-deep-blue-fortress-shell-dramatic-transparent.png', Cubite: '/cdn/sprite-ghibli-cute-tiny-bear-cub-spirit-brown-stone-fur-chibi-transparent.png', Grizzite: '/cdn/sprite-ghibli-powerful-bear-spirit-granite-grey-rocky-fur-fierce-transparent.png', Mountainroar: '/cdn/sprite-ghibli-majestic-massive-bear-spirit-mountain-stone-crystals-dramatic-transparent.png', Hootlet: '/cdn/sprite-ghibli-cute-tiny-owl-spirit-white-silver-fluffy-chibi-transparent.png', Galeowl: '/cdn/sprite-ghibli-elegant-owl-spirit-silver-teal-wind-feathers-graceful-transparent.png', Stormwatcher: '/cdn/sprite-ghibli-majestic-great-owl-spirit-white-storm-wings-lightning-eyes-dramatic-transparent.png', Sparkfoal: '/cdn/sprite-ghibli-cute-tiny-foal-spirit-white-gold-sparkle-mane-chibi-transparent.png', Gleamsteed: '/cdn/sprite-ghibli-elegant-horse-spirit-white-golden-luminous-mane-graceful-transparent.png', Celesticorn: '/cdn/sprite-ghibli-majestic-unicorn-spirit-platinum-rainbow-horn-divine-dramatic-transparent.png', Shadowpup: '/cdn/sprite-ghibli-cute-tiny-wolf-pup-spirit-black-purple-glowing-eyes-chibi-transparent.png', Duskhowl: '/cdn/sprite-ghibli-fierce-wolf-spirit-dark-grey-purple-mist-elegant-transparent.png', Voidfang: '/cdn/sprite-ghibli-terrifying-dire-wolf-spirit-void-black-cosmic-fur-dramatic-transparent.png', // Batch 5: Lion, Otter, Rhino, Hummingbird, Peacock, Mantis lines Emberkitten: '/cdn/sprite-ghibli-cute-tiny-lion-cub-spirit-orange-flame-mane-fluffy-chibi-transparent.png', Pyroleo: '/cdn/sprite-ghibli-elegant-flame-lion-spirit-red-gold-fiery-mane-fierce-transparent.png', Solarmane: '/cdn/sprite-ghibli-majestic-solar-lion-spirit-white-gold-blazing-mane-divine-dramatic-transparent.png', Splashkit: '/cdn/sprite-ghibli-cute-tiny-otter-pup-spirit-cyan-blue-playful-chibi-transparent.png', Riverglide: '/cdn/sprite-ghibli-elegant-river-otter-spirit-teal-silver-sleek-graceful-transparent.png', Tsunotter: '/cdn/sprite-ghibli-majestic-tsunami-otter-spirit-deep-blue-wave-patterns-powerful-dramatic-transparent.png', Pebblecalf: '/cdn/sprite-ghibli-cute-tiny-rhino-calf-spirit-grey-brown-rocky-skin-chibi-transparent.png', Ironhorn: '/cdn/sprite-ghibli-sturdy-armored-rhino-spirit-iron-grey-plated-powerful-transparent.png', Tectodon: '/cdn/sprite-ghibli-majestic-tectonic-rhino-spirit-obsidian-crystal-horn-earthquake-dramatic-transparent.png', Buzzlet: '/cdn/sprite-ghibli-cute-tiny-hummingbird-spirit-mint-silver-fast-wings-chibi-transparent.png', Zephyrhum: '/cdn/sprite-ghibli-elegant-wind-hummingbird-spirit-teal-white-blur-wings-graceful-transparent.png', Tempesthover: '/cdn/sprite-ghibli-majestic-storm-hummingbird-spirit-silver-lightning-wings-dramatic-transparent.png', Glimchick: '/cdn/sprite-ghibli-cute-tiny-peacock-chick-spirit-golden-sparkle-feathers-chibi-transparent.png', Auroraplume: '/cdn/sprite-ghibli-elegant-light-peacock-spirit-iridescent-gold-rainbow-tail-graceful-transparent.png', Celestibird: '/cdn/sprite-ghibli-majestic-celestial-peacock-spirit-platinum-divine-thousand-eye-feathers-dramatic-transparent.png', Shadebug: '/cdn/sprite-ghibli-cute-tiny-mantis-spirit-purple-black-big-eyes-chibi-transparent.png', Duskmantis: '/cdn/sprite-ghibli-elegant-shadow-mantis-spirit-dark-purple-scythe-arms-sinister-transparent.png', Voidreaper: '/cdn/sprite-ghibli-terrifying-void-mantis-spirit-black-cosmic-blades-death-dramatic-transparent.png', // Batch 6: Beetle, Shark, Armadillo, Dragonfly, Kirin, Phantom lines Sparkbug: '/cdn/sprite-ghibli-cute-tiny-beetle-spirit-orange-red-glowing-shell-chibi-transparent.png', Blazebeetle: '/cdn/sprite-ghibli-elegant-fire-beetle-spirit-red-black-ember-wings-fierce-transparent.png', Infernocarab: '/cdn/sprite-ghibli-majestic-scarab-spirit-obsidian-gold-blazing-hieroglyphs-dramatic-transparent.png', Finling: '/cdn/sprite-ghibli-cute-tiny-shark-pup-spirit-cyan-white-friendly-chibi-transparent.png', Reefshark: '/cdn/sprite-ghibli-elegant-reef-shark-spirit-teal-coral-patterns-sleek-transparent.png', Abyssaljaw: '/cdn/sprite-ghibli-terrifying-abyssal-shark-spirit-deep-blue-black-massive-jaws-dramatic-transparent.png', Shellpup: '/cdn/sprite-ghibli-cute-tiny-armadillo-spirit-brown-grey-curled-shell-chibi-transparent.png', Ironshell: '/cdn/sprite-ghibli-sturdy-armadillo-spirit-iron-grey-armored-plates-powerful-transparent.png', Terraplate: '/cdn/sprite-ghibli-majestic-giant-armadillo-spirit-obsidian-crystal-fortress-shell-dramatic-transparent.png', Zipfly: '/cdn/sprite-ghibli-cute-tiny-dragonfly-spirit-mint-silver-iridescent-wings-chibi-transparent.png', Windskimmer: '/cdn/sprite-ghibli-elegant-dragonfly-spirit-teal-white-blur-wings-graceful-transparent.png', Tempestglider: '/cdn/sprite-ghibli-majestic-storm-dragonfly-spirit-silver-lightning-four-wings-dramatic-transparent.png', Qilinkit: '/cdn/sprite-ghibli-cute-tiny-kirin-spirit-golden-white-fluffy-small-horn-chibi-transparent.png', Radiantkirin: '/cdn/sprite-ghibli-elegant-kirin-spirit-white-gold-flowing-mane-scales-graceful-transparent.png', Celestikirin: '/cdn/sprite-ghibli-majestic-celestial-kirin-spirit-platinum-rainbow-divine-aura-dramatic-transparent.png', Spooklet: '/cdn/sprite-ghibli-cute-tiny-ghost-spirit-purple-white-shy-wispy-chibi-transparent.png', Wraithling: '/cdn/sprite-ghibli-elegant-wraith-spirit-dark-purple-ethereal-cloak-sinister-transparent.png', Voidphantom: '/cdn/sprite-ghibli-terrifying-void-phantom-spirit-black-cosmic-ethereal-death-dramatic-transparent.png', // Batch 7: Fox, Seahorse, Mole, Crane, Seraph, Raven lines Flickit: '/cdn/sprite-ghibli-cute-tiny-fox-kit-spirit-orange-flame-tail-fluffy-chibi-transparent.png', Blazefox: '/cdn/sprite-ghibli-elegant-fire-fox-spirit-red-gold-multiple-tails-fierce-transparent.png', Infernokitsune: '/cdn/sprite-ghibli-majestic-kitsune-spirit-white-gold-nine-tails-divine-flames-dramatic-transparent.png', Driftfoal: '/cdn/sprite-ghibli-cute-tiny-seahorse-spirit-cyan-pearl-translucent-chibi-transparent.png', Tidalsteed: '/cdn/sprite-ghibli-elegant-seahorse-spirit-teal-silver-flowing-fins-graceful-transparent.png', Leviatide: '/cdn/sprite-ghibli-majestic-sea-dragon-seahorse-spirit-deep-blue-bioluminescent-dramatic-transparent.png', Burrkit: '/cdn/sprite-ghibli-cute-tiny-mole-spirit-brown-pink-nose-digging-claws-chibi-transparent.png', Tunnelclaw: '/cdn/sprite-ghibli-sturdy-mole-spirit-dark-brown-powerful-claws-determined-transparent.png', Terramole: '/cdn/sprite-ghibli-majestic-giant-mole-spirit-obsidian-crystal-claws-earth-king-dramatic-transparent.png', Gustchick: '/cdn/sprite-ghibli-cute-tiny-crane-chick-spirit-white-silver-fluffy-chibi-transparent.png', Skydancer: '/cdn/sprite-ghibli-elegant-crane-bird-spirit-white-feathers-red-head-crest-long-neck-graceful-transparent.png', Celesticrane: '/cdn/sprite-ghibli-majestic-celestial-crane-spirit-pure-white-golden-aura-divine-dramatic-transparent.png', Haloling: '/cdn/sprite-ghibli-cute-tiny-angel-spirit-golden-white-small-wings-halo-chibi-transparent.png', Seraphim: '/cdn/sprite-ghibli-elegant-seraph-spirit-white-gold-four-wings-radiant-transparent.png', Divinewing: '/cdn/sprite-ghibli-majestic-archangel-spirit-platinum-six-wings-holy-light-dramatic-transparent.png', Inkfeather: '/cdn/sprite-ghibli-cute-tiny-raven-chick-spirit-black-purple-fluffy-chibi-transparent.png', Duskcrow: '/cdn/sprite-ghibli-elegant-crow-spirit-black-purple-gleaming-eyes-sinister-transparent.png', Voidraven: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-cosmic-black-ethereal-feathers-dramatic-transparent.png', // Primordial spirits (divine, transcendent) Solienne: '/cdn/sprite-ghibli-primordial-goddess-solienne-platinum-blonde-hair-flowing-past-feet-white-flower-wreath-luminous-gold-eyes-white-radiant-petal-dress-golden-light-particles-divine-healing-aura-full-body-transparent.png', }; // Check if we're in target selection mode for a healing item const pendingHealItem = window._pendingHealItem; if (pendingHealItem) { const itemInfo = itemTypes[pendingHealItem.itemType]; const isRevive = itemInfo?.action === 'revive'; // Show spirit selection for healing target - compact portrait buttons const spiritButtons = team.map((spirit, idx) => { if (!spirit) return ''; const style = elementStyles[spirit.type] ?? elementStyles.earth; const portrait = spiritPortraits[spirit.name] ?? spiritPortraits[spirit.species] ?? ''; // IMPORTANT: Captain's HP is tracked in battleData during battle, not spirit.hp const isCaptain = idx === 0; const hp = isCaptain ? (battle.playerSpiritHp ?? spirit.hp ?? 0) : (spirit.hp ?? 0); const maxHp = spirit.maxHp ?? spirit.hp ?? 30; const hpPercent = Math.round((hp / maxHp) * 100); const isFainted = hp <= 0; const level = spirit.level ?? 1; // Determine if this spirit can be targeted let canTarget = false; let tooltipText = ''; if (isRevive) { canTarget = isFainted; tooltipText = isFainted ? 'Click to revive' : 'Not fainted'; } else { canTarget = !isFainted && hp < maxHp; if (isFainted) tooltipText = 'Fainted'; else if (hp >= maxHp) tooltipText = 'Full HP'; else tooltipText = `${hp}/${maxHp} HP`; } const opacity = canTarget ? '1' : '0.4'; const cursor = canTarget ? 'pointer' : 'not-allowed'; const hpColor = hpPercent > 50 ? '#4ade80' : hpPercent > 25 ? '#facc15' : '#ef4444'; return `

${spirit.name}

${tooltipText}

`; }).filter(b => b).join(''); return `

Use ${itemInfo?.name ?? 'Item'} on:

${spiritButtons || '

No valid targets

`; } // Only show usable items const usableItems = items.filter(item => { const info = itemTypes[item.type]; return info && info.usableInBattle; }); if (usableItems.length === 0) { return `

No usable items

`; } const itemButtons = usableItems.map((item, idx) => { const info = itemTypes[item.type] ?? { name: 'Unknown', icon: '❓', color: '#888' }; const iconHtml = info.isSprite ? `

` : `${info.icon}`; // Calculate capture chance for crystals let tooltipExtraHtml = ''; if (info.crystalTier) { const chance = calculateCaptureChance(state, info.crystalTier); if (chance !== null) { const chanceColor = getCaptureChanceColor(chance); tooltipExtraHtml = `

${chance}% capture

`; } } // Add healing item descriptions if (info.action === 'heal' || info.action === 'revive') { const effectColor = info.action === 'revive' ? '#b8860b' : '#2ecc71'; tooltipExtraHtml = `

${info.desc}

`; } // Determine click behavior - healing/revive items open target selection, capture items use immediately const isHealingItem = info.action === 'heal' || info.action === 'revive'; // For healing items, set the pending flag AND send a dummy action to trigger UI refresh const clickAction = isHealingItem ? `window._pendingHealItem = { itemType: '${item.type}', slotIndex: ${idx} }; sendAction('uiRefresh');` : `sendAction('battleUseItem', { itemType: '${item.type}', slotIndex: ${idx} }); window._showBattleItems = false;`; return `

${info.name}

${tooltipExtraHtml}

`; }).join(''); return `

USE ITEM

${itemButtons}

`; } // === DEBUG PANEL === function renderDebugPanel() { // === BATTLE SWITCH PANEL === // Shows available spirits to switch to during battle function renderBattleSwitchPanel(state, isPlayerTurn, parchmentLight, parchmentMid, borderDark) { const team = state.team ?? []; // Spirit element styles const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥' }, water: { color: '#4FC3F7', bgColor: 'rgba(79, 195, 247, 0.15)', icon: '💧' }, earth: { color: '#8D6E63', bgColor: 'rgba(141, 110, 99, 0.15)', icon: '🪨' }, wind: { color: '#A5D6A7', bgColor: 'rgba(165, 214, 167, 0.15)', icon: '🌀' }, light: { color: '#FFE082', bgColor: 'rgba(255, 224, 130, 0.15)', icon: '✨' }, dark: { color: '#B39DDB', bgColor: 'rgba(179, 157, 219, 0.15)', icon: '🌙' }, }; // Only show spirits other than the current captain (index 0) const switchableSpirits = team.slice(1).map((spirit, idx) => { if (!spirit) return null; const isFainted = (spirit.hp ?? 0) <= 0; const style = elementStyles[spirit.type] ?? elementStyles.earth; const actualIndex = idx + 1; // The actual team index return ` `; }).filter(x => x !== null); // If no other spirits available if (switchableSpirits.length === 0) { return `

SWITCH SPIRIT

No other spirits available!

`; } return `

SWITCH SPIRIT

${switchableSpirits.join('')}

Switching uses your turn!

`; } const codeLines = [ "=== NAMEPLATE SYSTEM STRUCTURE ===", "", "1. PLAYER.JS (spawns client-local nameplate):", "------------------------------------------", "api.spawn(nameTagId, {", " id: nameTagId,", " realm: 'client',", " audience: 'local',", " tags: ['nametag-visual'],", " behavior: ['scripts/nameplate-client.js'],", " properties: {", " feetPosition: { x: pos.x, y: pos.y + 2.3, z: pos.z },", " text: {", " content: username,", " size: 0.2,", " color: 'oklch(0.95 0.02 90)',", " billboard: 'full',", " align: 'center',", " },", " },", " state: {", " targetId: api.id,", " heightOffset: 2.3,", " },", "});", "", "2. NAMEPLATE-CLIENT.JS (runs on client):", "------------------------------------------", "export function update(dt, api) {", " const s = api.getState();", " if (!s.targetId) return;", " ", " const targetPos = api.getObjectProperty(s.targetId, 'feetPosition');", " if (!targetPos) return;", " ", " api.setProperty('feetPosition', {", " x: targetPos.x,", " y: targetPos.y + (s.heightOffset ?? 2.3),", " z: targetPos.z,", " });", "}", "", "ISSUE: Tags still lag behind player.", "The spawn happens from player.js which runs on server.", "Question: Is realm:'client' + audience:'local' working from server context?", ]; const codeStructure = codeLines.join("\\n"); // Store in window for copy button window._debugCodeToCopy = codeStructure; return `

🔧 Debug: Nameplate Code

${codeStructure}

`; } // === ADMIN: SPIRIT DATABASE === function renderSpiritDatabase(state) { // Spirit database - all available spirits in the game // Starters have cute chibi portraits, advanced spirits have majestic dramatic portraits const SPIRIT_DATABASE = [ // Starter spirits (cute chibi style) - these evolve! { id: 'ember', name: 'Ember', type: 'flame', rarity: 'common', baseHp: 30, baseAtk: 12, baseDef: 8, baseSpd: 10, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-flame-fox-spirit-orange-red-fluffy-chibi-transparent.png', abilities: ['Ember Claw', 'Fire Dash'], evolvesTo: 'flarekin' }, { id: 'brook', name: 'Brook', type: 'water', rarity: 'common', baseHp: 32, baseAtk: 10, baseDef: 10, baseSpd: 9, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-water-koi-spirit-blue-teal-flowing-chibi-transparent.png', abilities: ['Splash', 'Water Jet'], evolvesTo: 'coraline' }, { id: 'pebble', name: 'Pebble', type: 'earth', rarity: 'common', baseHp: 35, baseAtk: 9, baseDef: 14, baseSpd: 6, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-earth-golem-spirit-brown-mossy-rocky-chibi-transparent.png', abilities: ['Rock Throw', 'Stone Wall'], evolvesTo: 'boulderkin' }, { id: 'zephyr', name: 'Zephyr', type: 'wind', rarity: 'common', baseHp: 28, baseAtk: 11, baseDef: 7, baseSpd: 14, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-wind-hare-spirit-white-mint-feathery-chibi-transparent.png', abilities: ['Gust', 'Wind Slash'], evolvesTo: 'galewing' }, { id: 'lumina', name: 'Lumina', type: 'light', rarity: 'common', baseHp: 28, baseAtk: 10, baseDef: 8, baseSpd: 12, baseSpi: 14, portrait: '/cdn/sprite-ghibli-cute-light-moth-spirit-golden-warm-glowing-chibi-transparent.png', abilities: ['Light Pulse', 'Healing Glow'], evolvesTo: 'aurelis' }, { id: 'nyx', name: 'Nyx', type: 'dark', rarity: 'common', baseHp: 26, baseAtk: 13, baseDef: 7, baseSpd: 14, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-dark-cat-spirit-purple-shadow-mysterious-chibi-transparent.png', abilities: ['Shadow Scratch', 'Fade'], evolvesTo: 'umbris' }, // ========== STARTER EVOLUTION MEDIUMS (Ember, Brook, Pebble, Zephyr, Lumina, Nyx lines) ========== { id: 'flarekin', name: 'Flarekin', type: 'flame', rarity: 'rare', baseHp: 42, baseAtk: 16, baseDef: 11, baseSpd: 13, baseSpi: 11, portrait: '/cdn/sprite-ghibli-elegant-flame-fox-spirit-crimson-gold-fierce-flowing-tail-transparent.png', abilities: ['Flame Fang', 'Blaze Rush', 'Heat Aura'], evolvesFrom: 'ember', evolvesTo: 'pyranthos' }, { id: 'coraline', name: 'Coraline', type: 'water', rarity: 'rare', baseHp: 44, baseAtk: 14, baseDef: 14, baseSpd: 12, baseSpi: 14, portrait: '/cdn/sprite-ghibli-elegant-water-koi-dragon-spirit-sapphire-silver-graceful-transparent.png', abilities: ['Aqua Fang', 'Tidal Rush', 'Mist Shroud'], evolvesFrom: 'brook', evolvesTo: 'tsunamara' }, { id: 'boulderkin', name: 'Boulderkin', type: 'earth', rarity: 'rare', baseHp: 50, baseAtk: 13, baseDef: 20, baseSpd: 8, baseSpi: 11, portrait: '/cdn/sprite-ghibli-sturdy-earth-golem-spirit-granite-moss-armored-stoic-transparent.png', abilities: ['Boulder Bash', 'Earthen Armor', 'Tremor'], evolvesFrom: 'pebble', evolvesTo: 'terradon' }, { id: 'galewing', name: 'Galewing', type: 'wind', rarity: 'rare', baseHp: 38, baseAtk: 15, baseDef: 10, baseSpd: 18, baseSpi: 12, portrait: '/cdn/sprite-ghibli-swift-wind-hare-spirit-silver-teal-long-ears-elegant-transparent.png', abilities: ['Razor Gust', 'Swift Strike', 'Tailwind'], evolvesFrom: 'zephyr', evolvesTo: 'cyclonix' }, { id: 'aurelis', name: 'Aurelis', type: 'light', rarity: 'rare', baseHp: 40, baseAtk: 14, baseDef: 12, baseSpd: 15, baseSpi: 18, portrait: '/cdn/sprite-ghibli-radiant-light-moth-spirit-golden-white-luminous-wings-elegant-transparent.png', abilities: ['Radiant Beam', 'Healing Aura', 'Light Shield'], evolvesFrom: 'lumina', evolvesTo: 'solarius' }, { id: 'umbris', name: 'Umbris', type: 'dark', rarity: 'rare', baseHp: 38, baseAtk: 17, baseDef: 10, baseSpd: 17, baseSpi: 14, portrait: '/cdn/sprite-ghibli-sleek-shadow-cat-spirit-midnight-purple-glowing-eyes-elegant-transparent.png', abilities: ['Shadow Claw', 'Dark Pulse', 'Phantom Step'], evolvesFrom: 'nyx', evolvesTo: 'eclipsar' }, // ========== STARTER EVOLUTION ADVANCED (Final forms) ========== { id: 'pyranthos', name: 'Pyranthos', type: 'flame', rarity: 'legendary', baseHp: 56, baseAtk: 22, baseDef: 15, baseSpd: 16, baseSpi: 15, portrait: '/cdn/sprite-ghibli-majestic-nine-tailed-flame-fox-spirit-white-gold-fire-divine-dramatic-transparent.png', abilities: ['Inferno Fang', 'Solar Flare', 'Nine-Tail Blaze', 'Eternal Flame'], evolvesFrom: 'flarekin' }, { id: 'tsunamara', name: 'Tsunamara', type: 'water', rarity: 'legendary', baseHp: 58, baseAtk: 18, baseDef: 18, baseSpd: 15, baseSpi: 19, portrait: '/cdn/sprite-ghibli-majestic-water-dragon-koi-spirit-azure-pearl-flowing-whiskers-dramatic-transparent.png', abilities: ['Ocean Surge', 'Tidal Blessing', 'Abyssal Wave', 'Eternal Tide'], evolvesFrom: 'coraline' }, { id: 'terradon', name: 'Terradon', type: 'earth', rarity: 'legendary', baseHp: 68, baseAtk: 17, baseDef: 26, baseSpd: 10, baseSpi: 15, portrait: '/cdn/sprite-ghibli-ancient-mountain-golem-spirit-obsidian-crystal-massive-dramatic-transparent.png', abilities: ['Mountain Slam', 'Diamond Shield', 'Seismic Roar', 'Continental Crush'], evolvesFrom: 'boulderkin' }, { id: 'cyclonix', name: 'Cyclonix', type: 'wind', rarity: 'legendary', baseHp: 50, baseAtk: 20, baseDef: 13, baseSpd: 24, baseSpi: 16, portrait: '/cdn/sprite-ghibli-majestic-storm-hare-spirit-white-lightning-crackling-ears-dramatic-transparent.png', abilities: ['Hurricane Strike', 'Thunder Dash', 'Cyclone Fury', 'Eye of Storm'], evolvesFrom: 'galewing' }, { id: 'solarius', name: 'Solarius', type: 'light', rarity: 'legendary', baseHp: 54, baseAtk: 19, baseDef: 16, baseSpd: 18, baseSpi: 24, portrait: '/cdn/sprite-ghibli-divine-sun-moth-spirit-platinum-gold-radiant-six-wings-dramatic-transparent.png', abilities: ['Solar Judgement', 'Divine Blessing', 'Purifying Light', 'Dawn Eternal'], evolvesFrom: 'aurelis' }, { id: 'eclipsar', name: 'Eclipsar', type: 'dark', rarity: 'legendary', baseHp: 52, baseAtk: 24, baseDef: 14, baseSpd: 20, baseSpi: 18, portrait: '/cdn/sprite-ghibli-majestic-void-panther-spirit-black-purple-cosmic-eyes-dramatic-transparent.png', abilities: ['Void Slash', 'Eclipse', 'Soul Rend', 'Eternal Night'], evolvesFrom: 'umbris' }, // ========== PRE-RARE BASICS (evolve into existing Solara, Tideling, etc.) ========== { id: 'flickling', name: 'Flickling', type: 'flame', rarity: 'common', baseHp: 26, baseAtk: 11, baseDef: 7, baseSpd: 13, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-flame-chick-spirit-orange-tiny-wings-chibi-transparent.png', abilities: ['Peck', 'Ember Spark'], evolvesTo: 'solara' }, { id: 'bubbling', name: 'Bubbling', type: 'water', rarity: 'common', baseHp: 28, baseAtk: 9, baseDef: 11, baseSpd: 10, baseSpi: 12, portrait: '/cdn/sprite-ghibli-cute-water-seahorse-baby-spirit-cyan-tiny-chibi-transparent.png', abilities: ['Bubble', 'Splash'], evolvesTo: 'tideling' }, { id: 'pebblet', name: 'Pebblet', type: 'earth', rarity: 'common', baseHp: 32, baseAtk: 8, baseDef: 13, baseSpd: 5, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-baby-tortoise-spirit-brown-tiny-shell-chibi-transparent.png', abilities: ['Tackle', 'Shell Guard'], evolvesTo: 'terravox' }, { id: 'wisplet', name: 'Wisplet', type: 'wind', rarity: 'common', baseHp: 24, baseAtk: 10, baseDef: 6, baseSpd: 16, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-wind-chick-spirit-silver-fluffy-tiny-chibi-transparent.png', abilities: ['Peck', 'Breeze'], evolvesTo: 'gale' }, { id: 'glowmote', name: 'Glowmote', type: 'light', rarity: 'common', baseHp: 25, baseAtk: 9, baseDef: 8, baseSpd: 12, baseSpi: 15, portrait: '/cdn/sprite-ghibli-cute-light-orb-spirit-golden-tiny-sparkle-chibi-transparent.png', abilities: ['Shine', 'Warm Light'], evolvesTo: 'seraphine' }, { id: 'shadowkit', name: 'Shadowkit', type: 'dark', rarity: 'common', baseHp: 24, baseAtk: 12, baseDef: 6, baseSpd: 15, baseSpi: 11, portrait: '/cdn/sprite-ghibli-cute-shadow-raven-chick-spirit-purple-tiny-chibi-transparent.png', abilities: ['Peck', 'Shadow Wisp'], evolvesTo: 'vesperon' }, // Existing rare spirits - now MEDIUMS in evolution chains { id: 'solara', name: 'Solara', type: 'flame', rarity: 'rare', baseHp: 38, baseAtk: 16, baseDef: 10, baseSpd: 12, baseSpi: 10, portrait: '/cdn/sprite-ghibli-majestic-flame-phoenix-spirit-golden-radiant-wings-dramatic-transparent.png', abilities: ['Solar Peck', 'Phoenix Rise', 'Sunfire Wings'], evolvesFrom: 'flickling', evolvesTo: 'phoenixia' }, { id: 'tideling', name: 'Tideling', type: 'water', rarity: 'rare', baseHp: 40, baseAtk: 12, baseDef: 14, baseSpd: 8, baseSpi: 14, portrait: '/cdn/sprite-ghibli-elegant-water-seahorse-spirit-flowing-fins-luminous-teal-transparent.png', abilities: ['Bubble Beam', 'Aqua Ring', 'Hydro Pump'], evolvesFrom: 'bubbling', evolvesTo: 'leviathos' }, { id: 'terravox', name: 'Terravox', type: 'earth', rarity: 'rare', baseHp: 45, baseAtk: 14, baseDef: 18, baseSpd: 4, baseSpi: 10, portrait: '/cdn/sprite-ghibli-ancient-earth-tortoise-spirit-crystal-shell-wise-mossy-transparent.png', abilities: ['Headbutt', 'Iron Defense', 'Rock Slide'], evolvesFrom: 'pebblet', evolvesTo: 'colossadon' }, { id: 'gale', name: 'Gale', type: 'wind', rarity: 'rare', baseHp: 32, baseAtk: 14, baseDef: 8, baseSpd: 18, baseSpi: 12, portrait: '/cdn/sprite-ghibli-fierce-wind-falcon-spirit-silver-swift-piercing-eyes-transparent.png', abilities: ['Wing Attack', 'Aerial Ace', 'Sky Dive'], evolvesFrom: 'wisplet', evolvesTo: 'stormravian' }, { id: 'seraphine', name: 'Seraphine', type: 'light', rarity: 'rare', baseHp: 36, baseAtk: 14, baseDef: 12, baseSpd: 14, baseSpi: 18, portrait: '/cdn/sprite-ghibli-graceful-light-crane-spirit-white-gold-soft-glow-elegant-transparent.png', abilities: ['Holy Strike', 'Sanctuary', 'Divine Ray'], evolvesFrom: 'glowmote', evolvesTo: 'celestine' }, { id: 'vesperon', name: 'Vesperon', type: 'dark', rarity: 'rare', baseHp: 38, baseAtk: 18, baseDef: 10, baseSpd: 12, baseSpi: 14, portrait: '/cdn/sprite-ghibli-elegant-dark-raven-spirit-purple-sleek-mysterious-transparent.png', abilities: ['Dusk Blade', 'Veil of Shadows', 'Void Rend'], evolvesFrom: 'shadowkit', evolvesTo: 'nocturnax' }, // ========== POST-RARE ADVANCED (Final forms for Solara, Tideling, etc. lines) ========== { id: 'phoenixia', name: 'Phoenixia', type: 'flame', rarity: 'legendary', baseHp: 52, baseAtk: 21, baseDef: 14, baseSpd: 15, baseSpi: 14, portrait: '/cdn/sprite-ghibli-divine-flame-phoenix-spirit-white-gold-rebirth-flames-dramatic-transparent.png', abilities: ['Phoenix Dive', 'Rebirth Flame', 'Solar Tempest', 'Immortal Blaze'], evolvesFrom: 'solara' }, { id: 'leviathos', name: 'Leviathos', type: 'water', rarity: 'legendary', baseHp: 58, baseAtk: 16, baseDef: 20, baseSpd: 10, baseSpi: 20, portrait: '/cdn/sprite-ghibli-majestic-sea-leviathan-spirit-deep-blue-ancient-colossal-dramatic-transparent.png', abilities: ['Leviathan Crush', 'Abyssal Veil', 'Tsunami', 'Primordial Depths'], evolvesFrom: 'tideling' }, { id: 'colossadon', name: 'Colossadon', type: 'earth', rarity: 'legendary', baseHp: 72, baseAtk: 18, baseDef: 28, baseSpd: 5, baseSpi: 14, portrait: '/cdn/sprite-ghibli-ancient-world-turtle-spirit-mountain-shell-colossal-dramatic-transparent.png', abilities: ['World Slam', 'Fortress Shell', 'Continental Drift', 'Primordial Quake'], evolvesFrom: 'terravox' }, { id: 'stormravian', name: 'Stormravian', type: 'wind', rarity: 'legendary', baseHp: 46, baseAtk: 19, baseDef: 11, baseSpd: 26, baseSpi: 16, portrait: '/cdn/sprite-ghibli-legendary-storm-eagle-spirit-silver-lightning-wings-dramatic-transparent.png', abilities: ['Storm Talon', 'Lightning Dive', 'Thunderstorm', 'Sovereign Gale'], evolvesFrom: 'gale' }, { id: 'celestine', name: 'Celestine', type: 'light', rarity: 'legendary', baseHp: 50, baseAtk: 18, baseDef: 16, baseSpd: 17, baseSpi: 26, portrait: '/cdn/sprite-ghibli-divine-celestial-crane-spirit-platinum-rainbow-wings-dramatic-transparent.png', abilities: ['Celestial Ray', 'Divine Grace', 'Heavenly Chorus', 'Ascension'], evolvesFrom: 'seraphine' }, { id: 'nocturnax', name: 'Nocturnax', type: 'dark', rarity: 'legendary', baseHp: 52, baseAtk: 24, baseDef: 14, baseSpd: 16, baseSpi: 18, portrait: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-black-cosmic-feathers-dramatic-transparent.png', abilities: ['Void Talon', 'Eternal Night', 'Soul Harvest', 'Oblivion Wing'], evolvesFrom: 'vesperon' }, // ========== BATCH 1: Evolution Lines (18 spirits) ========== // === FLAME: Cinderpup → Blazehound → Infernowolf === { id: 'cinderpup', name: 'Cinderpup', type: 'flame', rarity: 'common', baseHp: 28, baseAtk: 11, baseDef: 7, baseSpd: 12, baseSpi: 7, portrait: '/cdn/sprite-ghibli-cute-flame-puppy-spirit-orange-ember-fluffy-small-chibi-transparent.png', abilities: ['Ember Bite', 'Spark'], evolvesTo: 'blazehound' }, { id: 'blazehound', name: 'Blazehound', type: 'flame', rarity: 'rare', baseHp: 38, baseAtk: 15, baseDef: 10, baseSpd: 14, baseSpi: 10, portrait: '/cdn/sprite-ghibli-sleek-flame-hound-spirit-red-orange-fierce-elegant-transparent.png', abilities: ['Fire Fang', 'Flame Charge', 'Heat Wave'], evolvesFrom: 'cinderpup', evolvesTo: 'infernowolf' }, { id: 'infernowolf', name: 'Infernowolf', type: 'flame', rarity: 'legendary', baseHp: 52, baseAtk: 20, baseDef: 14, baseSpd: 16, baseSpi: 14, portrait: '/cdn/sprite-ghibli-majestic-inferno-wolf-spirit-black-red-flame-mane-fierce-dramatic-transparent.png', abilities: ['Inferno Claw', 'Blazing Rush', 'Hellfire', 'Volcanic Wrath'], evolvesFrom: 'blazehound' }, // === WATER: Droplet → Streamling → Torrentis === { id: 'droplet', name: 'Droplet', type: 'water', rarity: 'common', baseHp: 30, baseAtk: 9, baseDef: 10, baseSpd: 10, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-water-droplet-spirit-blue-translucent-blob-chibi-transparent.png', abilities: ['Water Gun', 'Bubble'], evolvesTo: 'streamling' }, { id: 'streamling', name: 'Streamling', type: 'water', rarity: 'rare', baseHp: 42, baseAtk: 13, baseDef: 14, baseSpd: 12, baseSpi: 14, portrait: '/cdn/sprite-ghibli-elegant-water-serpent-spirit-flowing-blue-teal-graceful-transparent.png', abilities: ['Aqua Tail', 'Water Pulse', 'Mist Veil'], evolvesFrom: 'droplet', evolvesTo: 'torrentis' }, { id: 'torrentis', name: 'Torrentis', type: 'water', rarity: 'legendary', baseHp: 55, baseAtk: 17, baseDef: 18, baseSpd: 14, baseSpi: 18, portrait: '/cdn/sprite-ghibli-majestic-water-dragon-spirit-deep-blue-silver-scales-powerful-dramatic-transparent.png', abilities: ['Hydro Cannon', 'Tidal Wave', 'Abyssal Surge', 'Maelstrom'], evolvesFrom: 'streamling' }, // === EARTH: Mudling → Claywarden → Obsidianite === { id: 'mudling', name: 'Mudling', type: 'earth', rarity: 'common', baseHp: 34, baseAtk: 8, baseDef: 12, baseSpd: 6, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-mud-blob-spirit-brown-earthy-round-chibi-transparent.png', abilities: ['Mud Slap', 'Harden'], evolvesTo: 'claywarden' }, { id: 'claywarden', name: 'Claywarden', type: 'earth', rarity: 'rare', baseHp: 48, baseAtk: 12, baseDef: 18, baseSpd: 8, baseSpi: 12, portrait: '/cdn/sprite-ghibli-armored-clay-golem-spirit-terracotta-orange-stoic-guardian-transparent.png', abilities: ['Clay Hammer', 'Earthen Shield', 'Tremor'], evolvesFrom: 'mudling', evolvesTo: 'obsidianite' }, { id: 'obsidianite', name: 'Obsidianite', type: 'earth', rarity: 'legendary', baseHp: 60, baseAtk: 18, baseDef: 24, baseSpd: 8, baseSpi: 14, portrait: '/cdn/sprite-ghibli-majestic-obsidian-golem-spirit-black-volcanic-crystal-imposing-dramatic-transparent.png', abilities: ['Obsidian Edge', 'Magma Core', 'Earthquake', 'Titan Crush'], evolvesFrom: 'claywarden' }, // === WIND: Breezeling → Gustwing → Tempestrix === { id: 'breezeling', name: 'Breezeling', type: 'wind', rarity: 'common', baseHp: 26, baseAtk: 10, baseDef: 6, baseSpd: 15, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-wind-fairy-spirit-mint-green-wispy-small-chibi-transparent.png', abilities: ['Breeze', 'Quick Dash'], evolvesTo: 'gustwing' }, { id: 'gustwing', name: 'Gustwing', type: 'wind', rarity: 'rare', baseHp: 36, baseAtk: 14, baseDef: 9, baseSpd: 19, baseSpi: 12, portrait: '/cdn/sprite-ghibli-swift-wind-hawk-spirit-silver-teal-feathers-elegant-transparent.png', abilities: ['Razor Wind', 'Tailwind', 'Air Slash'], evolvesFrom: 'breezeling', evolvesTo: 'tempestrix' }, { id: 'tempestrix', name: 'Tempestrix', type: 'wind', rarity: 'legendary', baseHp: 48, baseAtk: 19, baseDef: 12, baseSpd: 24, baseSpi: 16, portrait: '/cdn/sprite-ghibli-majestic-storm-phoenix-spirit-purple-lightning-fierce-dramatic-transparent.png', abilities: ['Hurricane', 'Storm Dive', 'Thunder Gale', 'Cyclone Fury'], evolvesFrom: 'gustwing' }, // === LIGHT: Glimmer → Luxwing → Radiantia === { id: 'glimmer', name: 'Glimmer', type: 'light', rarity: 'common', baseHp: 26, baseAtk: 9, baseDef: 8, baseSpd: 13, baseSpi: 14, portrait: '/cdn/sprite-ghibli-cute-light-firefly-spirit-golden-sparkly-tiny-chibi-transparent.png', abilities: ['Flash', 'Shimmer'], evolvesTo: 'luxwing' }, { id: 'luxwing', name: 'Luxwing', type: 'light', rarity: 'rare', baseHp: 38, baseAtk: 13, baseDef: 12, baseSpd: 15, baseSpi: 18, portrait: '/cdn/sprite-ghibli-elegant-light-butterfly-spirit-iridescent-gold-white-graceful-transparent.png', abilities: ['Luminous Ray', 'Healing Light', 'Prism Shield'], evolvesFrom: 'glimmer', evolvesTo: 'radiantia' }, { id: 'radiantia', name: 'Radiantia', type: 'light', rarity: 'legendary', baseHp: 50, baseAtk: 18, baseDef: 16, baseSpd: 17, baseSpi: 24, portrait: '/cdn/sprite-ghibli-majestic-light-dragon-spirit-white-gold-radiant-wings-divine-dramatic-transparent.png', abilities: ['Solar Beam', 'Divine Shield', 'Purifying Light', 'Celestial Judgement'], evolvesFrom: 'luxwing' }, // === DARK: Shadeling → Duskweaver → Umbralith === { id: 'shadeling', name: 'Shadeling', type: 'dark', rarity: 'common', baseHp: 25, baseAtk: 12, baseDef: 6, baseSpd: 14, baseSpi: 11, portrait: '/cdn/sprite-ghibli-cute-shadow-wisp-spirit-purple-black-smoky-chibi-transparent.png', abilities: ['Shadow Swipe', 'Vanish'], evolvesTo: 'duskweaver' }, { id: 'duskweaver', name: 'Duskweaver', type: 'dark', rarity: 'rare', baseHp: 36, baseAtk: 16, baseDef: 10, baseSpd: 16, baseSpi: 15, portrait: '/cdn/sprite-ghibli-mysterious-shadow-spider-spirit-dark-purple-elegant-sinister-transparent.png', abilities: ['Dark Thread', 'Nightmare', 'Shadow Step'], evolvesFrom: 'shadeling', evolvesTo: 'umbralith' }, { id: 'umbralith', name: 'Umbralith', type: 'dark', rarity: 'legendary', baseHp: 48, baseAtk: 22, baseDef: 14, baseSpd: 18, baseSpi: 18, portrait: '/cdn/sprite-ghibli-terrifying-shadow-beast-spirit-black-purple-void-eyes-menacing-dramatic-transparent.png', abilities: ['Void Strike', 'Soul Drain', 'Eclipse', 'Abyssal Terror'], evolvesFrom: 'duskweaver' }, // ========== BATCH 2: Evolution Lines (18 spirits) ========== // === FLAME: Sizzlescale → Magmalisk → Volcanorus (Salamander line) === { id: 'sizzlescale', name: 'Sizzlescale', type: 'flame', rarity: 'common', baseHp: 27, baseAtk: 10, baseDef: 9, baseSpd: 11, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-flame-salamander-spirit-orange-red-tiny-scales-chibi-transparent.png', abilities: ['Lick Flame', 'Heat Up'], evolvesTo: 'magmalisk' }, { id: 'magmalisk', name: 'Magmalisk', type: 'flame', rarity: 'rare', baseHp: 40, baseAtk: 14, baseDef: 13, baseSpd: 13, baseSpi: 11, portrait: '/cdn/sprite-ghibli-sleek-magma-lizard-spirit-red-black-molten-cracks-elegant-transparent.png', abilities: ['Magma Bite', 'Lava Skin', 'Eruption'], evolvesFrom: 'sizzlescale', evolvesTo: 'volcanorus' }, { id: 'volcanorus', name: 'Volcanorus', type: 'flame', rarity: 'legendary', baseHp: 54, baseAtk: 19, baseDef: 17, baseSpd: 15, baseSpi: 15, portrait: '/cdn/sprite-ghibli-majestic-volcanic-dragon-salamander-spirit-obsidian-lava-veins-dramatic-transparent.png', abilities: ['Volcanic Fury', 'Molten Armor', 'Pyroclasm', 'Core Meltdown'], evolvesFrom: 'magmalisk' }, // === WATER: Jellydrop → Driftbell → Abyssalume (Jellyfish line) === { id: 'jellydrop', name: 'Jellydrop', type: 'water', rarity: 'common', baseHp: 29, baseAtk: 8, baseDef: 8, baseSpd: 9, baseSpi: 13, portrait: '/cdn/sprite-ghibli-cute-jellyfish-spirit-translucent-blue-tiny-bell-chibi-transparent.png', abilities: ['Sting', 'Float'], evolvesTo: 'driftbell' }, { id: 'driftbell', name: 'Driftbell', type: 'water', rarity: 'rare', baseHp: 41, baseAtk: 12, baseDef: 12, baseSpd: 11, baseSpi: 17, portrait: '/cdn/sprite-ghibli-elegant-jellyfish-spirit-luminous-teal-flowing-tendrils-graceful-transparent.png', abilities: ['Venom Lash', 'Drift Current', 'Bioluminescence'], evolvesFrom: 'jellydrop', evolvesTo: 'abyssalume' }, { id: 'abyssalume', name: 'Abyssalume', type: 'water', rarity: 'legendary', baseHp: 53, baseAtk: 16, baseDef: 16, baseSpd: 13, baseSpi: 23, portrait: '/cdn/sprite-ghibli-majestic-deep-sea-jellyfish-spirit-bioluminescent-purple-blue-ethereal-dramatic-transparent.png', abilities: ['Abyssal Sting', 'Depths Embrace', 'Hypnotic Glow', 'Primordial Current'], evolvesFrom: 'driftbell' }, // === EARTH: Burrowkit → Terramole → Quakebeast (Mole/Burrower line) === { id: 'burrowkit', name: 'Burrowkit', type: 'earth', rarity: 'common', baseHp: 31, baseAtk: 10, baseDef: 11, baseSpd: 7, baseSpi: 7, portrait: '/cdn/sprite-ghibli-cute-mole-spirit-brown-fuzzy-tiny-claws-chibi-transparent.png', abilities: ['Dig', 'Scratch'], evolvesTo: 'terramole' }, { id: 'terramole', name: 'Terramole', type: 'earth', rarity: 'rare', baseHp: 45, baseAtk: 15, baseDef: 16, baseSpd: 9, baseSpi: 10, portrait: '/cdn/sprite-ghibli-sturdy-giant-mole-spirit-brown-armored-claws-powerful-transparent.png', abilities: ['Tunnel Strike', 'Burrow Defense', 'Ground Pound'], evolvesFrom: 'burrowkit', evolvesTo: 'quakebeast' }, { id: 'quakebeast', name: 'Quakebeast', type: 'earth', rarity: 'legendary', baseHp: 62, baseAtk: 21, baseDef: 22, baseSpd: 10, baseSpi: 13, portrait: '/cdn/sprite-ghibli-massive-earth-beast-spirit-brown-stone-plates-seismic-dramatic-transparent.png', abilities: ['Seismic Claw', 'Tectonic Shift', 'Earthsplitter', 'Subterranean Fury'], evolvesFrom: 'terramole' }, // === WIND: Cloudpuff → Nimbuswing → Stratosoul (Cloud spirit line) === { id: 'cloudpuff', name: 'Cloudpuff', type: 'wind', rarity: 'common', baseHp: 25, baseAtk: 8, baseDef: 7, baseSpd: 13, baseSpi: 12, portrait: '/cdn/sprite-ghibli-cute-cloud-spirit-fluffy-white-tiny-wings-chibi-transparent.png', abilities: ['Puff', 'Gentle Breeze'], evolvesTo: 'nimbuswing' }, { id: 'nimbuswing', name: 'Nimbuswing', type: 'wind', rarity: 'rare', baseHp: 35, baseAtk: 12, baseDef: 10, baseSpd: 17, baseSpi: 16, portrait: '/cdn/sprite-ghibli-graceful-cloud-bird-spirit-white-silver-wispy-feathers-elegant-transparent.png', abilities: ['Cloud Burst', 'Vapor Trail', 'Sky Dance'], evolvesFrom: 'cloudpuff', evolvesTo: 'stratosoul' }, { id: 'stratosoul', name: 'Stratosoul', type: 'wind', rarity: 'legendary', baseHp: 47, baseAtk: 17, baseDef: 14, baseSpd: 22, baseSpi: 21, portrait: '/cdn/sprite-ghibli-majestic-stratosphere-spirit-white-gold-ethereal-cloud-form-dramatic-transparent.png', abilities: ['Heavenly Gust', 'Nimbus Shield', 'Stratosphere Dive', 'Eternal Zephyr'], evolvesFrom: 'nimbuswing' }, // === LIGHT: Fawnlight → Gleamstag → Auroralope (Deer/Stag line) === { id: 'fawnlight', name: 'Fawnlight', type: 'light', rarity: 'common', baseHp: 27, baseAtk: 9, baseDef: 9, baseSpd: 12, baseSpi: 13, portrait: '/cdn/sprite-ghibli-cute-light-fawn-spirit-white-gold-spots-tiny-chibi-transparent.png', abilities: ['Spark Kick', 'Glow'], evolvesTo: 'gleamstag' }, { id: 'gleamstag', name: 'Gleamstag', type: 'light', rarity: 'rare', baseHp: 39, baseAtk: 13, baseDef: 13, baseSpd: 15, baseSpi: 17, portrait: '/cdn/sprite-ghibli-elegant-light-stag-spirit-white-gold-glowing-antlers-majestic-transparent.png', abilities: ['Antler Beam', 'Forest Light', 'Graceful Leap'], evolvesFrom: 'fawnlight', evolvesTo: 'auroralope' }, { id: 'auroralope', name: 'Auroralope', type: 'light', rarity: 'legendary', baseHp: 51, baseAtk: 17, baseDef: 17, baseSpd: 18, baseSpi: 23, portrait: '/cdn/sprite-ghibli-majestic-aurora-elk-spirit-white-rainbow-antlers-ethereal-dramatic-transparent.png', abilities: ['Aurora Charge', 'Starlight Blessing', 'Prismatic Beam', 'Celestial Guardian'], evolvesFrom: 'gleamstag' }, // === DARK: Squeakwing → Nightfang → Dreadwyvern (Bat line) === { id: 'squeakwing', name: 'Squeakwing', type: 'dark', rarity: 'common', baseHp: 24, baseAtk: 11, baseDef: 6, baseSpd: 15, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-bat-spirit-purple-tiny-fangs-fluffy-chibi-transparent.png', abilities: ['Bite', 'Screech'], evolvesTo: 'nightfang' }, { id: 'nightfang', name: 'Nightfang', type: 'dark', rarity: 'rare', baseHp: 35, baseAtk: 16, baseDef: 9, baseSpd: 18, baseSpi: 14, portrait: '/cdn/sprite-ghibli-sleek-vampire-bat-spirit-dark-purple-red-eyes-elegant-transparent.png', abilities: ['Vampiric Bite', 'Shadow Dive', 'Echo Screech'], evolvesFrom: 'squeakwing', evolvesTo: 'dreadwyvern' }, { id: 'dreadwyvern', name: 'Dreadwyvern', type: 'dark', rarity: 'legendary', baseHp: 49, baseAtk: 23, baseDef: 13, baseSpd: 21, baseSpi: 17, portrait: '/cdn/sprite-ghibli-terrifying-dark-wyvern-spirit-black-red-demonic-wings-dramatic-transparent.png', abilities: ['Terror Fang', 'Blood Moon', 'Nightmare Screech', 'Dread Descent'], evolvesFrom: 'nightfang' }, // ========== BATCH 3: Dragon, Frog, Crystal, Butterfly, Rabbit, Snake lines ========== // === FLAME: Drakeling → Wyrmblaze → Infernodrake (Dragon line) === { id: 'drakeling', name: 'Drakeling', type: 'flame', rarity: 'common', baseHp: 30, baseAtk: 13, baseDef: 9, baseSpd: 10, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-baby-dragon-spirit-orange-red-tiny-wings-chibi-transparent.png', abilities: ['Ember Breath', 'Scratch'], evolvesTo: 'wyrmblaze' }, { id: 'wyrmblaze', name: 'Wyrmblaze', type: 'flame', rarity: 'rare', baseHp: 48, baseAtk: 19, baseDef: 14, baseSpd: 13, baseSpi: 12, portrait: '/cdn/sprite-ghibli-fierce-flame-dragon-spirit-red-gold-fire-breath-elegant-transparent.png', abilities: ['Fire Stream', 'Dragon Claw', 'Flame Shield'], evolvesFrom: 'drakeling', evolvesTo: 'infernodrake' }, { id: 'infernodrake', name: 'Infernodrake', type: 'flame', rarity: 'legendary', baseHp: 68, baseAtk: 26, baseDef: 20, baseSpd: 16, baseSpi: 16, portrait: '/cdn/sprite-ghibli-majestic-elder-dragon-spirit-crimson-black-massive-wings-dramatic-transparent.png', abilities: ['Inferno Blast', 'Ancient Flame', 'Dragon\'s Wrath', 'Apocalypse Breath'], evolvesFrom: 'wyrmblaze' }, // === WATER: Puddlehopper → Torrenttoad → Tsunamifrog (Frog line) === { id: 'puddlehopper', name: 'Puddlehopper', type: 'water', rarity: 'common', baseHp: 28, baseAtk: 8, baseDef: 10, baseSpd: 14, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-tiny-frog-spirit-blue-green-webbed-feet-chibi-transparent.png', abilities: ['Bubble', 'Hop'], evolvesTo: 'torrenttoad' }, { id: 'torrenttoad', name: 'Torrenttoad', type: 'water', rarity: 'rare', baseHp: 46, baseAtk: 13, baseDef: 16, baseSpd: 12, baseSpi: 15, portrait: '/cdn/sprite-ghibli-sturdy-toad-spirit-teal-blue-armored-back-powerful-transparent.png', abilities: ['Torrent Splash', 'Sticky Tongue', 'Rain Dance'], evolvesFrom: 'puddlehopper', evolvesTo: 'tsunamifrog' }, { id: 'tsunamifrog', name: 'Tsunamifrog', type: 'water', rarity: 'legendary', baseHp: 64, baseAtk: 18, baseDef: 22, baseSpd: 14, baseSpi: 21, portrait: '/cdn/sprite-ghibli-majestic-giant-frog-spirit-deep-blue-wave-patterns-dramatic-transparent.png', abilities: ['Tidal Wave', 'Monsoon Call', 'Abyssal Croak', 'Tsunami Leap'], evolvesFrom: 'torrenttoad' }, // === EARTH: Gemshard → Crystalguard → Diamondtitan (Crystal line) === { id: 'gemshard', name: 'Gemshard', type: 'earth', rarity: 'common', baseHp: 26, baseAtk: 9, baseDef: 12, baseSpd: 8, baseSpi: 11, portrait: '/cdn/sprite-ghibli-cute-crystal-creature-spirit-pink-purple-sparkly-chibi-transparent.png', abilities: ['Gem Toss', 'Sparkle'], evolvesTo: 'crystalguard' }, { id: 'crystalguard', name: 'Crystalguard', type: 'earth', rarity: 'rare', baseHp: 42, baseAtk: 14, baseDef: 19, baseSpd: 10, baseSpi: 15, portrait: '/cdn/sprite-ghibli-elegant-crystal-golem-spirit-amethyst-purple-geometric-transparent.png', abilities: ['Crystal Barrier', 'Prism Strike', 'Refraction'], evolvesFrom: 'gemshard', evolvesTo: 'diamondtitan' }, { id: 'diamondtitan', name: 'Diamondtitan', type: 'earth', rarity: 'legendary', baseHp: 60, baseAtk: 19, baseDef: 28, baseSpd: 11, baseSpi: 20, portrait: '/cdn/sprite-ghibli-majestic-diamond-colossus-spirit-prismatic-rainbow-dramatic-transparent.png', abilities: ['Diamond Storm', 'Prismatic Shield', 'Eternal Facet', 'Titan\'s Brilliance'], evolvesFrom: 'crystalguard' }, // === WIND: Flutterwind → Galefly → Tempestmonarch (Butterfly line) === { id: 'flutterwind', name: 'Flutterwind', type: 'wind', rarity: 'common', baseHp: 22, baseAtk: 7, baseDef: 6, baseSpd: 16, baseSpi: 13, portrait: '/cdn/sprite-ghibli-cute-tiny-butterfly-spirit-pale-blue-delicate-wings-chibi-transparent.png', abilities: ['Gust', 'Flutter'], evolvesTo: 'galefly' }, { id: 'galefly', name: 'Galefly', type: 'wind', rarity: 'rare', baseHp: 34, baseAtk: 11, baseDef: 9, baseSpd: 20, baseSpi: 18, portrait: '/cdn/sprite-ghibli-elegant-butterfly-spirit-silver-teal-flowing-wings-graceful-transparent.png', abilities: ['Gale Wings', 'Pollen Storm', 'Air Dance'], evolvesFrom: 'flutterwind', evolvesTo: 'tempestmonarch' }, { id: 'tempestmonarch', name: 'Tempestmonarch', type: 'wind', rarity: 'legendary', baseHp: 46, baseAtk: 16, baseDef: 13, baseSpd: 25, baseSpi: 24, portrait: '/cdn/sprite-ghibli-majestic-giant-butterfly-spirit-storm-purple-lightning-wings-dramatic-transparent.png', abilities: ['Tempest Wings', 'Hurricane Dust', 'Monarch\'s Blessing', 'Storm Metamorphosis'], evolvesFrom: 'galefly' }, // === LIGHT: Sunbun → Radiantrabbit → Celestihare (Rabbit line) === { id: 'sunbun', name: 'Sunbun', type: 'light', rarity: 'common', baseHp: 25, baseAtk: 8, baseDef: 8, baseSpd: 15, baseSpi: 14, portrait: '/cdn/sprite-ghibli-cute-tiny-bunny-spirit-golden-white-fluffy-glowing-ears-chibi-transparent.png', abilities: ['Light Hop', 'Warmth'], evolvesTo: 'radiantrabbit' }, { id: 'radiantrabbit', name: 'Radiantrabbit', type: 'light', rarity: 'rare', baseHp: 38, baseAtk: 12, baseDef: 12, baseSpd: 18, baseSpi: 19, portrait: '/cdn/sprite-ghibli-elegant-rabbit-spirit-white-gold-luminous-fur-graceful-transparent.png', abilities: ['Radiant Leap', 'Healing Light', 'Solar Kick'], evolvesFrom: 'sunbun', evolvesTo: 'celestihare' }, { id: 'celestihare', name: 'Celestihare', type: 'light', rarity: 'legendary', baseHp: 52, baseAtk: 17, baseDef: 17, baseSpd: 21, baseSpi: 26, portrait: '/cdn/sprite-ghibli-majestic-celestial-hare-spirit-platinum-rainbow-aura-divine-dramatic-transparent.png', abilities: ['Celestial Bound', 'Starlight Blessing', 'Moon\'s Grace', 'Divine Hare Dance'], evolvesFrom: 'radiantrabbit' }, // === DARK: Vipershade → Shadowserpent → Abyssalcoil (Snake line) === { id: 'vipershade', name: 'Vipershade', type: 'dark', rarity: 'common', baseHp: 24, baseAtk: 12, baseDef: 7, baseSpd: 14, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-tiny-snake-spirit-purple-black-glowing-eyes-chibi-transparent.png', abilities: ['Venomous Bite', 'Coil'], evolvesTo: 'shadowserpent' }, { id: 'shadowserpent', name: 'Shadowserpent', type: 'dark', rarity: 'rare', baseHp: 38, baseAtk: 18, baseDef: 11, baseSpd: 17, baseSpi: 13, portrait: '/cdn/sprite-ghibli-elegant-snake-spirit-dark-purple-shadowy-coils-sinister-transparent.png', abilities: ['Shadow Fang', 'Constrict', 'Dark Venom'], evolvesFrom: 'vipershade', evolvesTo: 'abyssalcoil' }, { id: 'abyssalcoil', name: 'Abyssalcoil', type: 'dark', rarity: 'legendary', baseHp: 54, baseAtk: 25, baseDef: 16, baseSpd: 20, baseSpi: 18, portrait: '/cdn/sprite-ghibli-terrifying-massive-serpent-spirit-void-black-cosmic-scales-dramatic-transparent.png', abilities: ['Abyssal Strike', 'Void Coil', 'World Serpent\'s Wrath', 'Cosmic Venom'], evolvesFrom: 'shadowserpent' }, // ========== BATCH 4: Scorpion, Turtle, Bear, Owl, Unicorn, Wolf lines ========== // === FLAME: Emberclaw → Blazescorpion → Infernostinger (Scorpion line) === { id: 'emberclaw', name: 'Emberclaw', type: 'flame', rarity: 'common', baseHp: 26, baseAtk: 13, baseDef: 11, baseSpd: 9, baseSpi: 7, portrait: '/cdn/sprite-ghibli-cute-tiny-scorpion-spirit-orange-red-glowing-tail-chibi-transparent.png', abilities: ['Ember Pinch', 'Tail Glow'], evolvesTo: 'blazescorpion' }, { id: 'blazescorpion', name: 'Blazescorpion', type: 'flame', rarity: 'rare', baseHp: 42, baseAtk: 19, baseDef: 16, baseSpd: 12, baseSpi: 11, portrait: '/cdn/sprite-ghibli-fierce-scorpion-spirit-red-black-fiery-pincers-elegant-transparent.png', abilities: ['Fire Claw', 'Blazing Sting', 'Heat Armor'], evolvesFrom: 'emberclaw', evolvesTo: 'infernostinger' }, { id: 'infernostinger', name: 'Infernostinger', type: 'flame', rarity: 'legendary', baseHp: 58, baseAtk: 26, baseDef: 22, baseSpd: 14, baseSpi: 15, portrait: '/cdn/sprite-ghibli-majestic-emperor-scorpion-spirit-obsidian-lava-veins-dramatic-transparent.png', abilities: ['Inferno Sting', 'Lava Armor', 'Emperor\'s Wrath', 'Volcanic Fury'], evolvesFrom: 'blazescorpion' }, // === WATER: Shellsplash → Tidalshell → Oceanbastion (Turtle line) === { id: 'shellsplash', name: 'Shellsplash', type: 'water', rarity: 'common', baseHp: 30, baseAtk: 7, baseDef: 13, baseSpd: 8, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-tiny-turtle-spirit-cyan-blue-shell-chibi-transparent.png', abilities: ['Shell Bump', 'Splash'], evolvesTo: 'tidalshell' }, { id: 'tidalshell', name: 'Tidalshell', type: 'water', rarity: 'rare', baseHp: 48, baseAtk: 11, baseDef: 20, baseSpd: 10, baseSpi: 14, portrait: '/cdn/sprite-ghibli-graceful-sea-turtle-spirit-teal-coral-patterns-elegant-transparent.png', abilities: ['Tidal Slam', 'Coral Shield', 'Ocean Current'], evolvesFrom: 'shellsplash', evolvesTo: 'oceanbastion' }, { id: 'oceanbastion', name: 'Oceanbastion', type: 'water', rarity: 'legendary', baseHp: 70, baseAtk: 15, baseDef: 28, baseSpd: 11, baseSpi: 19, portrait: '/cdn/sprite-ghibli-majestic-giant-turtle-spirit-deep-blue-fortress-shell-dramatic-transparent.png', abilities: ['Fortress Shell', 'Tsunami Crash', 'Ocean\'s Blessing', 'Abyssal Bastion'], evolvesFrom: 'tidalshell' }, // === EARTH: Cubite → Grizzite → Mountainroar (Bear line) === { id: 'cubite', name: 'Cubite', type: 'earth', rarity: 'common', baseHp: 32, baseAtk: 11, baseDef: 10, baseSpd: 8, baseSpi: 7, portrait: '/cdn/sprite-ghibli-cute-tiny-bear-cub-spirit-brown-stone-fur-chibi-transparent.png', abilities: ['Rock Paw', 'Tumble'], evolvesTo: 'grizzite' }, { id: 'grizzite', name: 'Grizzite', type: 'earth', rarity: 'rare', baseHp: 52, baseAtk: 17, baseDef: 16, baseSpd: 10, baseSpi: 11, portrait: '/cdn/sprite-ghibli-powerful-bear-spirit-granite-grey-rocky-fur-fierce-transparent.png', abilities: ['Stone Slash', 'Grizzly Roar', 'Earth Guard'], evolvesFrom: 'cubite', evolvesTo: 'mountainroar' }, { id: 'mountainroar', name: 'Mountainroar', type: 'earth', rarity: 'legendary', baseHp: 72, baseAtk: 24, baseDef: 23, baseSpd: 11, baseSpi: 15, portrait: '/cdn/sprite-ghibli-majestic-massive-bear-spirit-mountain-stone-crystals-dramatic-transparent.png', abilities: ['Mountain Slam', 'Titan\'s Roar', 'Crystal Armor', 'Earthquake Fury'], evolvesFrom: 'grizzite' }, // === WIND: Hootlet → Galeowl → Stormwatcher (Owl line) === { id: 'hootlet', name: 'Hootlet', type: 'wind', rarity: 'common', baseHp: 24, baseAtk: 9, baseDef: 7, baseSpd: 14, baseSpi: 12, portrait: '/cdn/sprite-ghibli-cute-tiny-owl-spirit-white-silver-fluffy-chibi-transparent.png', abilities: ['Wind Peck', 'Hoot'], evolvesTo: 'galeowl' }, { id: 'galeowl', name: 'Galeowl', type: 'wind', rarity: 'rare', baseHp: 36, baseAtk: 13, baseDef: 11, baseSpd: 19, baseSpi: 17, portrait: '/cdn/sprite-ghibli-elegant-owl-spirit-silver-teal-wind-feathers-graceful-transparent.png', abilities: ['Gale Strike', 'Night Vision', 'Wind Cloak'], evolvesFrom: 'hootlet', evolvesTo: 'stormwatcher' }, { id: 'stormwatcher', name: 'Stormwatcher', type: 'wind', rarity: 'legendary', baseHp: 50, baseAtk: 18, baseDef: 15, baseSpd: 24, baseSpi: 23, portrait: '/cdn/sprite-ghibli-majestic-great-owl-spirit-white-storm-wings-lightning-eyes-dramatic-transparent.png', abilities: ['Storm Gaze', 'Thunder Wings', 'Tempest Vision', 'All-Seeing Eye'], evolvesFrom: 'galeowl' }, // === LIGHT: Sparkfoal → Gleamsteed → Celesticorn (Unicorn line) === { id: 'sparkfoal', name: 'Sparkfoal', type: 'light', rarity: 'common', baseHp: 27, baseAtk: 9, baseDef: 8, baseSpd: 13, baseSpi: 13, portrait: '/cdn/sprite-ghibli-cute-tiny-foal-spirit-white-gold-sparkle-mane-chibi-transparent.png', abilities: ['Spark Kick', 'Shimmer'], evolvesTo: 'gleamsteed' }, { id: 'gleamsteed', name: 'Gleamsteed', type: 'light', rarity: 'rare', baseHp: 42, baseAtk: 14, baseDef: 13, baseSpd: 17, baseSpi: 18, portrait: '/cdn/sprite-ghibli-elegant-horse-spirit-white-golden-luminous-mane-graceful-transparent.png', abilities: ['Radiant Charge', 'Light Mane', 'Gleaming Hoof'], evolvesFrom: 'sparkfoal', evolvesTo: 'celesticorn' }, { id: 'celesticorn', name: 'Celesticorn', type: 'light', rarity: 'legendary', baseHp: 56, baseAtk: 19, baseDef: 18, baseSpd: 21, baseSpi: 25, portrait: '/cdn/sprite-ghibli-majestic-unicorn-spirit-platinum-rainbow-horn-divine-dramatic-transparent.png', abilities: ['Celestial Horn', 'Rainbow Charge', 'Divine Blessing', 'Starlight Gallop'], evolvesFrom: 'gleamsteed' }, // === DARK: Shadowpup → Duskhowl → Voidfang (Wolf line) === { id: 'shadowpup', name: 'Shadowpup', type: 'dark', rarity: 'common', baseHp: 26, baseAtk: 12, baseDef: 8, baseSpd: 13, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-tiny-wolf-pup-spirit-black-purple-glowing-eyes-chibi-transparent.png', abilities: ['Shadow Bite', 'Howl'], evolvesTo: 'duskhowl' }, { id: 'duskhowl', name: 'Duskhowl', type: 'dark', rarity: 'rare', baseHp: 42, baseAtk: 18, baseDef: 12, baseSpd: 17, baseSpi: 13, portrait: '/cdn/sprite-ghibli-fierce-wolf-spirit-dark-grey-purple-mist-elegant-transparent.png', abilities: ['Dusk Fang', 'Shadow Howl', 'Pack Hunt'], evolvesFrom: 'shadowpup', evolvesTo: 'voidfang' }, { id: 'voidfang', name: 'Voidfang', type: 'dark', rarity: 'legendary', baseHp: 58, baseAtk: 25, baseDef: 17, baseSpd: 21, baseSpi: 18, portrait: '/cdn/sprite-ghibli-terrifying-dire-wolf-spirit-void-black-cosmic-fur-dramatic-transparent.png', abilities: ['Void Fang', 'Cosmic Howl', 'Shadow Pack', 'Alpha\'s Fury'], evolvesFrom: 'duskhowl' }, // ========== BATCH 5: Lion, Otter, Rhino, Hummingbird, Peacock, Mantis lines ========== // === FLAME: Emberkitten → Pyroleo → Solarmane (Lion line) === { id: 'emberkitten', name: 'Emberkitten', type: 'flame', rarity: 'common', baseHp: 27, baseAtk: 11, baseDef: 8, baseSpd: 13, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-tiny-lion-cub-spirit-orange-flame-mane-fluffy-chibi-transparent.png', abilities: ['Spark Paw', 'Cute Roar'], evolvesTo: 'pyroleo' }, { id: 'pyroleo', name: 'Pyroleo', type: 'flame', rarity: 'rare', baseHp: 44, baseAtk: 18, baseDef: 13, baseSpd: 16, baseSpi: 12, portrait: '/cdn/sprite-ghibli-elegant-flame-lion-spirit-red-gold-fiery-mane-fierce-transparent.png', abilities: ['Fire Fang', 'Blazing Mane', 'Pride Roar'], evolvesFrom: 'emberkitten', evolvesTo: 'solarmane' }, { id: 'solarmane', name: 'Solarmane', type: 'flame', rarity: 'legendary', baseHp: 62, baseAtk: 26, baseDef: 18, baseSpd: 19, baseSpi: 17, portrait: '/cdn/sprite-ghibli-majestic-solar-lion-spirit-white-gold-blazing-mane-divine-dramatic-transparent.png', abilities: ['Solar Roar', 'Sun King\'s Fury', 'Corona Burst', 'Stellar Dominion'], evolvesFrom: 'pyroleo' }, // === WATER: Splashkit → Riverglide → Tsunotter (Otter line) === { id: 'splashkit', name: 'Splashkit', type: 'water', rarity: 'common', baseHp: 28, baseAtk: 9, baseDef: 9, baseSpd: 14, baseSpi: 11, portrait: '/cdn/sprite-ghibli-cute-tiny-otter-pup-spirit-cyan-blue-playful-chibi-transparent.png', abilities: ['Splash Play', 'Dive'], evolvesTo: 'riverglide' }, { id: 'riverglide', name: 'Riverglide', type: 'water', rarity: 'rare', baseHp: 42, baseAtk: 14, baseDef: 13, baseSpd: 18, baseSpi: 15, portrait: '/cdn/sprite-ghibli-elegant-river-otter-spirit-teal-silver-sleek-graceful-transparent.png', abilities: ['River Rush', 'Aqua Slide', 'Slippery'], evolvesFrom: 'splashkit', evolvesTo: 'tsunotter' }, { id: 'tsunotter', name: 'Tsunotter', type: 'water', rarity: 'legendary', baseHp: 56, baseAtk: 19, baseDef: 17, baseSpd: 22, baseSpi: 19, portrait: '/cdn/sprite-ghibli-majestic-tsunami-otter-spirit-deep-blue-wave-patterns-powerful-dramatic-transparent.png', abilities: ['Tsunami Slide', 'Ocean Rush', 'Tide Lord\'s Dance', 'Abyssal Surge'], evolvesFrom: 'riverglide' }, // === EARTH: Pebblecalf → Ironhorn → Tectodon (Rhino line) === { id: 'pebblecalf', name: 'Pebblecalf', type: 'earth', rarity: 'common', baseHp: 34, baseAtk: 10, baseDef: 13, baseSpd: 6, baseSpi: 7, portrait: '/cdn/sprite-ghibli-cute-tiny-rhino-calf-spirit-grey-brown-rocky-skin-chibi-transparent.png', abilities: ['Pebble Bump', 'Horn Nub'], evolvesTo: 'ironhorn' }, { id: 'ironhorn', name: 'Ironhorn', type: 'earth', rarity: 'rare', baseHp: 54, baseAtk: 17, baseDef: 21, baseSpd: 8, baseSpi: 10, portrait: '/cdn/sprite-ghibli-sturdy-armored-rhino-spirit-iron-grey-plated-powerful-transparent.png', abilities: ['Iron Charge', 'Steel Horn', 'Metal Coat'], evolvesFrom: 'pebblecalf', evolvesTo: 'tectodon' }, { id: 'tectodon', name: 'Tectodon', type: 'earth', rarity: 'legendary', baseHp: 75, baseAtk: 24, baseDef: 30, baseSpd: 9, baseSpi: 14, portrait: '/cdn/sprite-ghibli-majestic-tectonic-rhino-spirit-obsidian-crystal-horn-earthquake-dramatic-transparent.png', abilities: ['Tectonic Charge', 'Continental Slam', 'Adamantine Hide', 'World Breaker'], evolvesFrom: 'ironhorn' }, // === WIND: Buzzlet → Zephyrhum → Tempesthover (Hummingbird line) === { id: 'buzzlet', name: 'Buzzlet', type: 'wind', rarity: 'common', baseHp: 20, baseAtk: 8, baseDef: 5, baseSpd: 20, baseSpi: 12, portrait: '/cdn/sprite-ghibli-cute-tiny-hummingbird-spirit-mint-silver-fast-wings-chibi-transparent.png', abilities: ['Quick Peck', 'Zip'], evolvesTo: 'zephyrhum' }, { id: 'zephyrhum', name: 'Zephyrhum', type: 'wind', rarity: 'rare', baseHp: 32, baseAtk: 13, baseDef: 8, baseSpd: 26, baseSpi: 17, portrait: '/cdn/sprite-ghibli-elegant-wind-hummingbird-spirit-teal-white-blur-wings-graceful-transparent.png', abilities: ['Zephyr Strike', 'Nectar Heal', 'Sonic Buzz'], evolvesFrom: 'buzzlet', evolvesTo: 'tempesthover' }, { id: 'tempesthover', name: 'Tempesthover', type: 'wind', rarity: 'legendary', baseHp: 44, baseAtk: 18, baseDef: 11, baseSpd: 32, baseSpi: 22, portrait: '/cdn/sprite-ghibli-majestic-storm-hummingbird-spirit-silver-lightning-wings-dramatic-transparent.png', abilities: ['Storm Needle', 'Thunder Hover', 'Supersonic', 'Tempest Requiem'], evolvesFrom: 'zephyrhum' }, // === LIGHT: Glimchick → Auroraplume → Celestibird (Peacock line) === { id: 'glimchick', name: 'Glimchick', type: 'light', rarity: 'common', baseHp: 25, baseAtk: 8, baseDef: 7, baseSpd: 11, baseSpi: 15, portrait: '/cdn/sprite-ghibli-cute-tiny-peacock-chick-spirit-golden-sparkle-feathers-chibi-transparent.png', abilities: ['Sparkle Peck', 'Glitter'], evolvesTo: 'auroraplume' }, { id: 'auroraplume', name: 'Auroraplume', type: 'light', rarity: 'rare', baseHp: 40, baseAtk: 14, baseDef: 12, baseSpd: 14, baseSpi: 21, portrait: '/cdn/sprite-ghibli-elegant-light-peacock-spirit-iridescent-gold-rainbow-tail-graceful-transparent.png', abilities: ['Prism Feathers', 'Dazzle', 'Aurora Veil'], evolvesFrom: 'glimchick', evolvesTo: 'celestibird' }, { id: 'celestibird', name: 'Celestibird', type: 'light', rarity: 'legendary', baseHp: 54, baseAtk: 19, baseDef: 17, baseSpd: 17, baseSpi: 28, portrait: '/cdn/sprite-ghibli-majestic-celestial-peacock-spirit-platinum-divine-thousand-eye-feathers-dramatic-transparent.png', abilities: ['Celestial Display', 'Thousand Eyes', 'Divine Plumage', 'Star Peacock Dance'], evolvesFrom: 'auroraplume' }, // === DARK: Shadebug → Duskmantis → Voidreaper (Mantis line) === { id: 'shadebug', name: 'Shadebug', type: 'dark', rarity: 'common', baseHp: 23, baseAtk: 11, baseDef: 8, baseSpd: 13, baseSpi: 10, portrait: '/cdn/sprite-ghibli-cute-tiny-mantis-spirit-purple-black-big-eyes-chibi-transparent.png', abilities: ['Shadow Slice', 'Creep'], evolvesTo: 'duskmantis' }, { id: 'duskmantis', name: 'Duskmantis', type: 'dark', rarity: 'rare', baseHp: 38, baseAtk: 19, baseDef: 12, baseSpd: 17, baseSpi: 14, portrait: '/cdn/sprite-ghibli-elegant-shadow-mantis-spirit-dark-purple-scythe-arms-sinister-transparent.png', abilities: ['Dusk Scythe', 'Shadow Strike', 'Predator Stance'], evolvesFrom: 'shadebug', evolvesTo: 'voidreaper' }, { id: 'voidreaper', name: 'Voidreaper', type: 'dark', rarity: 'legendary', baseHp: 52, baseAtk: 28, baseDef: 16, baseSpd: 21, baseSpi: 18, portrait: '/cdn/sprite-ghibli-terrifying-void-mantis-spirit-black-cosmic-blades-death-dramatic-transparent.png', abilities: ['Void Scythe', 'Soul Reap', 'Death Blossom', 'Reaper\'s Harvest'], evolvesFrom: 'duskmantis' }, // ========== BATCH 6: Beetle, Shark, Armadillo, Dragonfly, Kirin, Phantom lines ========== // === FLAME: Sparkbug → Blazebeetle → Infernocarab (Beetle line) === { id: 'sparkbug', name: 'Sparkbug', type: 'flame', rarity: 'common', baseHp: 26, baseAtk: 10, baseDef: 11, baseSpd: 10, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-tiny-beetle-spirit-orange-red-glowing-shell-chibi-transparent.png', abilities: ['Spark Shell', 'Ember Roll'], evolvesTo: 'blazebeetle' }, { id: 'blazebeetle', name: 'Blazebeetle', type: 'flame', rarity: 'rare', baseHp: 42, baseAtk: 16, baseDef: 17, baseSpd: 13, baseSpi: 12, portrait: '/cdn/sprite-ghibli-elegant-fire-beetle-spirit-red-black-ember-wings-fierce-transparent.png', abilities: ['Fire Shell', 'Blazing Charge', 'Heat Carapace'], evolvesFrom: 'sparkbug', evolvesTo: 'infernocarab' }, { id: 'infernocarab', name: 'Infernocarab', type: 'flame', rarity: 'legendary', baseHp: 58, baseAtk: 22, baseDef: 24, baseSpd: 15, baseSpi: 16, portrait: '/cdn/sprite-ghibli-majestic-scarab-spirit-obsidian-gold-blazing-hieroglyphs-dramatic-transparent.png', abilities: ['Solar Scarab', 'Hieroglyph Blaze', 'Pharaoh\'s Fury', 'Ra\'s Judgement'], evolvesFrom: 'blazebeetle' }, // === WATER: Finling → Reefshark → Abyssaljaw (Shark line) === { id: 'finling', name: 'Finling', type: 'water', rarity: 'common', baseHp: 28, baseAtk: 12, baseDef: 8, baseSpd: 14, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-tiny-shark-pup-spirit-cyan-white-friendly-chibi-transparent.png', abilities: ['Nibble', 'Swift Swim'], evolvesTo: 'reefshark' }, { id: 'reefshark', name: 'Reefshark', type: 'water', rarity: 'rare', baseHp: 46, baseAtk: 19, baseDef: 13, baseSpd: 18, baseSpi: 11, portrait: '/cdn/sprite-ghibli-elegant-reef-shark-spirit-teal-coral-patterns-sleek-transparent.png', abilities: ['Reef Fang', 'Tidal Rush', 'Predator Sense'], evolvesFrom: 'finling', evolvesTo: 'abyssaljaw' }, { id: 'abyssaljaw', name: 'Abyssaljaw', type: 'water', rarity: 'legendary', baseHp: 62, baseAtk: 27, baseDef: 18, baseSpd: 21, baseSpi: 15, portrait: '/cdn/sprite-ghibli-terrifying-abyssal-shark-spirit-deep-blue-black-massive-jaws-dramatic-transparent.png', abilities: ['Abyssal Bite', 'Feeding Frenzy', 'Ocean Terror', 'Apex Predator'], evolvesFrom: 'reefshark' }, // === EARTH: Shellpup → Ironshell → Terraplate (Armadillo line) === { id: 'shellpup', name: 'Shellpup', type: 'earth', rarity: 'common', baseHp: 30, baseAtk: 8, baseDef: 14, baseSpd: 7, baseSpi: 8, portrait: '/cdn/sprite-ghibli-cute-tiny-armadillo-spirit-brown-grey-curled-shell-chibi-transparent.png', abilities: ['Shell Curl', 'Pebble Toss'], evolvesTo: 'ironshell' }, { id: 'ironshell', name: 'Ironshell', type: 'earth', rarity: 'rare', baseHp: 50, baseAtk: 14, baseDef: 22, baseSpd: 9, baseSpi: 12, portrait: '/cdn/sprite-ghibli-sturdy-armadillo-spirit-iron-grey-armored-plates-powerful-transparent.png', abilities: ['Iron Ball', 'Armor Bash', 'Defensive Curl'], evolvesFrom: 'shellpup', evolvesTo: 'terraplate' }, { id: 'terraplate', name: 'Terraplate', type: 'earth', rarity: 'legendary', baseHp: 72, baseAtk: 20, baseDef: 32, baseSpd: 10, baseSpi: 16, portrait: '/cdn/sprite-ghibli-majestic-giant-armadillo-spirit-obsidian-crystal-fortress-shell-dramatic-transparent.png', abilities: ['Fortress Mode', 'Earthquake Roll', 'Adamantine Shell', 'Continental Guard'], evolvesFrom: 'ironshell' }, // === WIND: Zipfly → Windskimmer → Tempestglider (Dragonfly line) === { id: 'zipfly', name: 'Zipfly', type: 'wind', rarity: 'common', baseHp: 22, baseAtk: 9, baseDef: 6, baseSpd: 18, baseSpi: 11, portrait: '/cdn/sprite-ghibli-cute-tiny-dragonfly-spirit-mint-silver-iridescent-wings-chibi-transparent.png', abilities: ['Quick Zip', 'Wing Buzz'], evolvesTo: 'windskimmer' }, { id: 'windskimmer', name: 'Windskimmer', type: 'wind', rarity: 'rare', baseHp: 34, baseAtk: 14, baseDef: 9, baseSpd: 24, baseSpi: 16, portrait: '/cdn/sprite-ghibli-elegant-dragonfly-spirit-teal-white-blur-wings-graceful-transparent.png', abilities: ['Skim Strike', 'Aerial Dance', 'Hover'], evolvesFrom: 'zipfly', evolvesTo: 'tempestglider' }, { id: 'tempestglider', name: 'Tempestglider', type: 'wind', rarity: 'legendary', baseHp: 46, baseAtk: 19, baseDef: 12, baseSpd: 30, baseSpi: 22, portrait: '/cdn/sprite-ghibli-majestic-storm-dragonfly-spirit-silver-lightning-four-wings-dramatic-transparent.png', abilities: ['Tempest Strike', 'Lightning Glide', 'Four Wing Fury', 'Stormchaser'], evolvesFrom: 'windskimmer' }, // === LIGHT: Qilinkit → Radiantkirin → Celestikirin (Kirin line) === { id: 'qilinkit', name: 'Qilinkit', type: 'light', rarity: 'common', baseHp: 27, baseAtk: 10, baseDef: 10, baseSpd: 12, baseSpi: 14, portrait: '/cdn/sprite-ghibli-cute-tiny-kirin-spirit-golden-white-fluffy-small-horn-chibi-transparent.png', abilities: ['Light Tap', 'Lucky Aura'], evolvesTo: 'radiantkirin' }, { id: 'radiantkirin', name: 'Radiantkirin', type: 'light', rarity: 'rare', baseHp: 44, baseAtk: 16, baseDef: 16, baseSpd: 16, baseSpi: 20, portrait: '/cdn/sprite-ghibli-elegant-kirin-spirit-white-gold-flowing-mane-scales-graceful-transparent.png', abilities: ['Sacred Flame', 'Blessing Step', 'Fortune\'s Grace'], evolvesFrom: 'qilinkit', evolvesTo: 'celestikirin' }, { id: 'celestikirin', name: 'Celestikirin', type: 'light', rarity: 'legendary', baseHp: 60, baseAtk: 22, baseDef: 22, baseSpd: 20, baseSpi: 28, portrait: '/cdn/sprite-ghibli-majestic-celestial-kirin-spirit-platinum-rainbow-divine-aura-dramatic-transparent.png', abilities: ['Divine Blessing', 'Celestial Flame', 'Heaven\'s Judgement', 'Eternal Fortune'], evolvesFrom: 'radiantkirin' }, // === DARK: Spooklet → Wraithling → Voidphantom (Phantom line) === { id: 'spooklet', name: 'Spooklet', type: 'dark', rarity: 'common', baseHp: 24, baseAtk: 11, baseDef: 7, baseSpd: 14, baseSpi: 12, portrait: '/cdn/sprite-ghibli-cute-tiny-ghost-spirit-purple-white-shy-wispy-chibi-transparent.png', abilities: ['Spook', 'Phase'], evolvesTo: 'wraithling' }, { id: 'wraithling', name: 'Wraithling', type: 'dark', rarity: 'rare', baseHp: 38, baseAtk: 17, baseDef: 11, baseSpd: 18, baseSpi: 17, portrait: '/cdn/sprite-ghibli-elegant-wraith-spirit-dark-purple-ethereal-cloak-sinister-transparent.png', abilities: ['Wraith Touch', 'Soul Drain', 'Phantom Step'], evolvesFrom: 'spooklet', evolvesTo: 'voidphantom' }, { id: 'voidphantom', name: 'Voidphantom', type: 'dark', rarity: 'legendary', baseHp: 54, baseAtk: 24, baseDef: 16, baseSpd: 22, baseSpi: 24, portrait: '/cdn/sprite-ghibli-terrifying-void-phantom-spirit-black-cosmic-ethereal-death-dramatic-transparent.png', abilities: ['Void Touch', 'Soul Harvest', 'Phantom Realm', 'Death\'s Embrace'], evolvesFrom: 'wraithling' }, // ========== BATCH 7: Fox, Seahorse, Mole, Crane, Seraph, Raven lines ========== // === FLAME: Flickit → Blazefox → Infernokitsune (Fox line) === { id: 'flickit', name: 'Flickit', type: 'flame', rarity: 'common', baseHp: 25, baseAtk: 11, baseDef: 8, baseSpd: 14, baseSpi: 12, portrait: '/cdn/sprite-ghibli-cute-tiny-fox-kit-spirit-orange-flame-tail-fluffy-chibi-transparent.png', abilities: ['Ember Nip', 'Flame Tail'], evolvesTo: 'blazefox' }, { id: 'blazefox', name: 'Blazefox', type: 'flame', rarity: 'rare', baseHp: 42, baseAtk: 18, baseDef: 13, baseSpd: 19, baseSpi: 17, portrait: '/cdn/sprite-ghibli-elegant-fire-fox-spirit-red-gold-multiple-tails-fierce-transparent.png', abilities: ['Fox Fire', 'Triple Tail Blaze', 'Will-o-Wisp'], evolvesFrom: 'flickit', evolvesTo: 'infernokitsune' }, { id: 'infernokitsune', name: 'Infernokitsune', type: 'flame', rarity: 'legendary', baseHp: 58, baseAtk: 26, baseDef: 18, baseSpd: 24, baseSpi: 25, portrait: '/cdn/sprite-ghibli-majestic-kitsune-spirit-white-gold-nine-tails-divine-flames-dramatic-transparent.png', abilities: ['Nine Tail Inferno', 'Divine Fox Fire', 'Celestial Blaze', 'Kitsune\'s Judgement'], evolvesFrom: 'blazefox' }, // === WATER: Driftfoal → Tidalsteed → Leviatide (Seahorse line) === { id: 'driftfoal', name: 'Driftfoal', type: 'water', rarity: 'common', baseHp: 26, baseAtk: 9, baseDef: 10, baseSpd: 12, baseSpi: 13, portrait: '/cdn/sprite-ghibli-cute-tiny-seahorse-spirit-cyan-pearl-translucent-chibi-transparent.png', abilities: ['Bubble Pop', 'Drift'], evolvesTo: 'tidalsteed' }, { id: 'tidalsteed', name: 'Tidalsteed', type: 'water', rarity: 'rare', baseHp: 44, baseAtk: 15, baseDef: 16, baseSpd: 16, baseSpi: 18, portrait: '/cdn/sprite-ghibli-elegant-seahorse-spirit-teal-silver-flowing-fins-graceful-transparent.png', abilities: ['Tidal Lance', 'Aqua Gallop', 'Pearl Shield'], evolvesFrom: 'driftfoal', evolvesTo: 'leviatide' }, { id: 'leviatide', name: 'Leviatide', type: 'water', rarity: 'legendary', baseHp: 62, baseAtk: 22, baseDef: 22, baseSpd: 20, baseSpi: 26, portrait: '/cdn/sprite-ghibli-majestic-sea-dragon-seahorse-spirit-deep-blue-bioluminescent-dramatic-transparent.png', abilities: ['Leviathan\'s Wrath', 'Abyssal Current', 'Ocean\'s Blessing', 'Tidal Sovereignty'], evolvesFrom: 'tidalsteed' }, // === EARTH: Burrkit → Tunnelclaw → Terramole (Mole line) === { id: 'burrkit', name: 'Burrkit', type: 'earth', rarity: 'common', baseHp: 28, baseAtk: 10, baseDef: 12, baseSpd: 8, baseSpi: 9, portrait: '/cdn/sprite-ghibli-cute-tiny-mole-spirit-brown-pink-nose-digging-claws-chibi-transparent.png', abilities: ['Dig', 'Scratch'], evolvesTo: 'tunnelclaw' }, { id: 'tunnelclaw', name: 'Tunnelclaw', type: 'earth', rarity: 'rare', baseHp: 48, baseAtk: 17, baseDef: 19, baseSpd: 10, baseSpi: 13, portrait: '/cdn/sprite-ghibli-sturdy-mole-spirit-dark-brown-powerful-claws-determined-transparent.png', abilities: ['Tunnel Strike', 'Earth Rend', 'Burrow'], evolvesFrom: 'burrkit', evolvesTo: 'terramole' }, { id: 'terramole', name: 'Terramole', type: 'earth', rarity: 'legendary', baseHp: 68, baseAtk: 24, baseDef: 28, baseSpd: 12, baseSpi: 18, portrait: '/cdn/sprite-ghibli-majestic-giant-mole-spirit-obsidian-crystal-claws-earth-king-dramatic-transparent.png', abilities: ['Tectonic Claw', 'Earthen Fortress', 'Subterranean King', 'World Shaker'], evolvesFrom: 'tunnelclaw' }, // === WIND: Gustchick → Skydancer → Celesticrane (Crane line) === { id: 'gustchick', name: 'Gustchick', type: 'wind', rarity: 'common', baseHp: 24, baseAtk: 9, baseDef: 8, baseSpd: 14, baseSpi: 14, portrait: '/cdn/sprite-ghibli-cute-tiny-crane-chick-spirit-white-silver-fluffy-chibi-transparent.png', abilities: ['Breeze Peck', 'Fluffy Float'], evolvesTo: 'skydancer' }, { id: 'skydancer', name: 'Skydancer', type: 'wind', rarity: 'rare', baseHp: 40, baseAtk: 14, baseDef: 12, baseSpd: 20, baseSpi: 19, portrait: '/cdn/sprite-ghibli-elegant-crane-spirit-white-red-crown-graceful-wings-transparent.png', abilities: ['Graceful Gust', 'Sky Dance', 'Crane\'s Blessing'], evolvesFrom: 'gustchick', evolvesTo: 'celesticrane' }, { id: 'celesticrane', name: 'Celesticrane', type: 'wind', rarity: 'legendary', baseHp: 56, baseAtk: 20, baseDef: 18, baseSpd: 26, baseSpi: 27, portrait: '/cdn/sprite-ghibli-majestic-celestial-crane-spirit-pure-white-golden-aura-divine-dramatic-transparent.png', abilities: ['Heaven\'s Dance', 'Celestial Winds', 'Eternal Grace', 'Divine Ascension'], evolvesFrom: 'skydancer' }, // === LIGHT: Haloling → Seraphim → Divinewing (Seraph line) === { id: 'haloling', name: 'Haloling', type: 'light', rarity: 'common', baseHp: 25, baseAtk: 10, baseDef: 9, baseSpd: 11, baseSpi: 15, portrait: '/cdn/sprite-ghibli-cute-tiny-angel-spirit-golden-white-small-wings-halo-chibi-transparent.png', abilities: ['Light Touch', 'Holy Spark'], evolvesTo: 'seraphim' }, { id: 'seraphim', name: 'Seraphim', type: 'light', rarity: 'rare', baseHp: 42, baseAtk: 16, baseDef: 15, baseSpd: 15, baseSpi: 22, portrait: '/cdn/sprite-ghibli-elegant-seraph-spirit-white-gold-four-wings-radiant-transparent.png', abilities: ['Sacred Light', 'Angelic Shield', 'Purify'], evolvesFrom: 'haloling', evolvesTo: 'divinewing' }, { id: 'divinewing', name: 'Divinewing', type: 'light', rarity: 'legendary', baseHp: 60, baseAtk: 24, baseDef: 22, baseSpd: 20, baseSpi: 30, portrait: '/cdn/sprite-ghibli-majestic-archangel-spirit-platinum-six-wings-holy-light-dramatic-transparent.png', abilities: ['Archangel\'s Wrath', 'Divine Judgement', 'Heaven\'s Gate', 'Eternal Radiance'], evolvesFrom: 'seraphim' }, // === DARK: Inkfeather → Duskcrow → Voidraven (Raven line) === { id: 'inkfeather', name: 'Inkfeather', type: 'dark', rarity: 'common', baseHp: 24, baseAtk: 12, baseDef: 7, baseSpd: 15, baseSpi: 11, portrait: '/cdn/sprite-ghibli-cute-tiny-raven-chick-spirit-black-purple-fluffy-chibi-transparent.png', abilities: ['Dark Peck', 'Shadow Hop'], evolvesTo: 'duskcrow' }, { id: 'duskcrow', name: 'Duskcrow', type: 'dark', rarity: 'rare', baseHp: 40, baseAtk: 19, baseDef: 11, baseSpd: 20, baseSpi: 16, portrait: '/cdn/sprite-ghibli-elegant-crow-spirit-black-purple-gleaming-eyes-sinister-transparent.png', abilities: ['Murder\'s Call', 'Dusk Dive', 'Omen'], evolvesFrom: 'inkfeather', evolvesTo: 'voidraven' }, { id: 'voidraven', name: 'Voidraven', type: 'dark', rarity: 'legendary', baseHp: 56, baseAtk: 27, baseDef: 16, baseSpd: 25, baseSpi: 22, portrait: '/cdn/sprite-ghibli-terrifying-void-raven-spirit-cosmic-black-ethereal-feathers-dramatic-transparent.png', abilities: ['Void Wings', 'Cosmic Murder', 'Death\'s Omen', 'Nevermore'], evolvesFrom: 'duskcrow' }, // PRIMORDIAL spirits (divine tier - unique) { id: 'solienne', name: 'Solienne', type: 'primordial', rarity: 'primordial', baseHp: 100, baseAtk: 25, baseDef: 25, baseSpd: 20, baseSpi: 40, portrait: '/cdn/sprite-ghibli-primordial-goddess-solienne-platinum-blonde-hair-flowing-past-feet-white-flower-wreath-luminous-gold-eyes-white-radiant-petal-dress-golden-light-particles-divine-healing-aura-full-body-transparent.png', abilities: ['Mending Light', 'Tears of Solienne', 'Divine Embrace', 'First Breath'], lore: 'The Primordial Goddess of Healing, Compassion, and Renewal. Her tears became the Bonding Crystals that allow Drifters to form bonds with spirits.' }, ]; const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥' }, water: { color: '#4ECDC4', bgColor: 'rgba(78, 205, 196, 0.15)', icon: '💧' }, earth: { color: '#8B7355', bgColor: 'rgba(139, 115, 85, 0.15)', icon: '🪨' }, wind: { color: '#7FDBCA', bgColor: 'rgba(127, 219, 202, 0.15)', icon: '🌪️' }, light: { color: '#DAA520', bgColor: 'rgba(218, 165, 32, 0.15)', icon: '☀️' }, dark: { color: '#6A5ACD', bgColor: 'rgba(106, 90, 205, 0.15)', icon: '🌙' }, primordial: { color: '#FFD700', bgColor: 'rgba(255, 215, 0, 0.2)', icon: '✧' }, }; const rarityStyles = { common: { color: '#888', label: 'Common', glow: 'none' }, rare: { color: '#3498db', label: 'Rare', glow: '0 0 8px rgba(52, 152, 219, 0.5)' }, legendary: { color: '#9b59b6', label: 'Legendary', glow: '0 0 12px rgba(155, 89, 182, 0.6)' }, primordial: { color: '#FFD700', label: '✧ PRIMORDIAL ✧', glow: '0 0 20px rgba(255, 215, 0, 0.7), 0 0 40px rgba(255, 215, 0, 0.4)' }, }; const selectedId = window._adminSelectedSpirit ?? null; const selectedSpirit = selectedId ? SPIRIT_DATABASE.find(s => s.id === selectedId) : null; const spawnLevel = window._adminSpawnLevel ?? 5; // Spirit grid const spiritGrid = SPIRIT_DATABASE.map(spirit => { const style = elementStyles[spirit.type] ?? elementStyles.earth; const rarity = rarityStyles[spirit.rarity] ?? rarityStyles.common; const isSelected = selectedId === spirit.id; const isPrimordial = spirit.rarity === 'primordial'; return `

${spirit.name}

${style.icon} ${spirit.type}

${isPrimordial ? `

✧ PRIMORDIAL ✧

` : ''}

`; }).join(''); // Selected spirit details const detailsPanel = selectedSpirit ? (() => { const style = elementStyles[selectedSpirit.type] ?? elementStyles.earth; const rarity = rarityStyles[selectedSpirit.rarity] ?? rarityStyles.common; const isPrimordial = selectedSpirit.rarity === 'primordial'; return `

${selectedSpirit.name}

${style.icon} ${selectedSpirit.type}

${rarity.label}

${selectedSpirit.lore ? `

${selectedSpirit.lore}

` : ''}

HP: ${selectedSpirit.baseHp}

ATK: ${selectedSpirit.baseAtk}

DEF: ${selectedSpirit.baseDef}

SPD: ${selectedSpirit.baseSpd}

SPI: ${selectedSpirit.baseSpi}

${selectedSpirit.abilities ? `

Abilities:

${selectedSpirit.abilities.map(ab => ` ${ab} `).join('')}

` : ''}

Spawn Level

${spawnLevel}

${!isPrimordial ? ` ` : ''}

`; })() : `

Select a spirit

Choose from the grid to view details and spawn options

`; return `

📚 Spirit Database

All Spirits

${spiritGrid}

${detailsPanel}

`; } // === ADMIN: ABILITIES DATABASE === function renderAbilitiesDatabase(state) { // Element styling const elementStyles = { flame: { color: '#FF6B35', bgColor: 'rgba(255, 107, 53, 0.15)', icon: '🔥' }, water: { color: '#4ECDC4', bgColor: 'rgba(78, 205, 196, 0.15)', icon: '💧' }, earth: { color: '#8B7355', bgColor: 'rgba(139, 115, 85, 0.15)', icon: '🪨' }, wind: { color: '#90EE90', bgColor: 'rgba(144, 238, 144, 0.15)', icon: '🍃' }, light: { color: '#DAA520', bgColor: 'rgba(218, 165, 32, 0.15)', icon: '☀️' }, dark: { color: '#6A5ACD', bgColor: 'rgba(106, 90, 205, 0.15)', icon: '🌙' }, }; // Effect type display names and icons const effectTypes = { heal: { name: 'Healing', icon: '💚', desc: 'Restores HP to the user' }, defense_up: { name: 'Defense Up', icon: '🛡️', desc: 'Raises defense for several turns' }, evasion_up: { name: 'Evasion Up', icon: '💨', desc: 'Increases chance to dodge attacks' }, attack_up: { name: 'Attack Up', icon: '⚔️', desc: 'Raises attack for several turns' }, }; // Complete abilities database - all moves from all spirits const abilities = [ // Flame abilities { name: 'Ember Claw', type: 'flame', power: 25, spirits: ['Ember'] }, { name: 'Fire Dash', type: 'flame', power: 35, spirits: ['Ember'] }, { name: 'Flame Burst', type: 'flame', power: 45, spirits: ['Ember'] }, { name: 'Inferno', type: 'flame', power: 60, spirits: ['Ember'] }, { name: 'Solar Peck', type: 'flame', power: 30, spirits: ['Solara'] }, { name: 'Phoenix Rise', type: 'flame', power: 40, spirits: ['Solara'] }, { name: 'Sunfire Wings', type: 'flame', power: 55, spirits: ['Solara'] }, { name: 'Nova Burst', type: 'flame', power: 75, spirits: ['Solara'] }, // Water abilities { name: 'Splash', type: 'water', power: 25, spirits: ['Brook'] }, { name: 'Water Jet', type: 'water', power: 35, spirits: ['Brook'] }, { name: 'Tidal Wave', type: 'water', power: 45, spirits: ['Brook'] }, { name: 'Tsunami', type: 'water', power: 60, spirits: ['Brook'] }, { name: 'Bubble Beam', type: 'water', power: 30, spirits: ['Tideling'] }, { name: 'Aqua Ring', type: 'water', power: 0, effect: 'heal', spirits: ['Tideling'] }, { name: 'Hydro Pump', type: 'water', power: 55, spirits: ['Tideling'] }, { name: 'Abyssal Surge', type: 'water', power: 70, spirits: ['Tideling'] }, // Earth abilities { name: 'Rock Throw', type: 'earth', power: 25, spirits: ['Pebble'] }, { name: 'Stone Wall', type: 'earth', power: 0, effect: 'defense_up', spirits: ['Pebble'] }, { name: 'Earthquake', type: 'earth', power: 45, spirits: ['Pebble'] }, { name: 'Landslide', type: 'earth', power: 60, spirits: ['Pebble'] }, { name: 'Headbutt', type: 'earth', power: 30, spirits: ['Terravox'] }, { name: 'Iron Defense', type: 'earth', power: 0, effect: 'defense_up', spirits: ['Terravox'] }, { name: 'Rock Slide', type: 'earth', power: 55, spirits: ['Terravox'] }, { name: 'Continental Crush', type: 'earth', power: 80, spirits: ['Terravox'] }, // Wind abilities { name: 'Gust', type: 'wind', power: 25, spirits: ['Zephyr'] }, { name: 'Wind Slash', type: 'wind', power: 35, spirits: ['Zephyr'] }, { name: 'Cyclone', type: 'wind', power: 45, spirits: ['Zephyr'] }, { name: 'Hurricane', type: 'wind', power: 60, spirits: ['Zephyr'] }, { name: 'Wing Attack', type: 'wind', power: 30, spirits: ['Gale'] }, { name: 'Aerial Ace', type: 'wind', power: 40, spirits: ['Gale'] }, { name: 'Sky Dive', type: 'wind', power: 55, spirits: ['Gale'] }, { name: 'Tempest', type: 'wind', power: 70, spirits: ['Gale'] }, // Light abilities { name: 'Light Pulse', type: 'light', power: 25, spirits: ['Lumina'] }, { name: 'Healing Glow', type: 'light', power: 0, effect: 'heal', spirits: ['Lumina'] }, { name: 'Radiant Beam', type: 'light', power: 40, spirits: ['Lumina'] }, { name: 'Purifying Light', type: 'light', power: 55, spirits: ['Lumina'] }, { name: 'Holy Strike', type: 'light', power: 35, spirits: ['Seraphine'] }, { name: 'Sanctuary', type: 'light', power: 0, effect: 'heal', spirits: ['Seraphine'] }, { name: 'Divine Ray', type: 'light', power: 55, spirits: ['Seraphine'] }, { name: "Solienne's Blessing", type: 'light', power: 75, spirits: ['Seraphine'] }, // Dark abilities { name: 'Shadow Scratch', type: 'dark', power: 25, spirits: ['Nyx'] }, { name: 'Fade', type: 'dark', power: 0, effect: 'evasion_up', spirits: ['Nyx'] }, { name: 'Night Slash', type: 'dark', power: 40, spirits: ['Nyx'] }, { name: 'Umbral Pounce', type: 'dark', power: 55, spirits: ['Nyx'] }, { name: 'Dusk Blade', type: 'dark', power: 35, spirits: ['Vesperon'] }, { name: 'Veil of Shadows', type: 'dark', power: 0, effect: 'defense_up', spirits: ['Vesperon'] }, { name: 'Void Rend', type: 'dark', power: 60, spirits: ['Vesperon'] }, { name: "Morduin's Embrace", type: 'dark', power: 80, spirits: ['Vesperon'] }, ]; // Track selected ability const selectedAbilityName = window._adminSelectedAbility ?? null; const selectedAbility = abilities.find(a => a.name === selectedAbilityName); // Filter state const filterElement = window._abilitiesFilterElement ?? 'all'; const filterType = window._abilitiesFilterType ?? 'all'; // 'all', 'attack', 'effect' // Apply filters let filteredAbilities = abilities; if (filterElement !== 'all') { filteredAbilities = filteredAbilities.filter(a => a.type === filterElement); } if (filterType === 'attack') { filteredAbilities = filteredAbilities.filter(a => a.power > 0); } else if (filterType === 'effect') { filteredAbilities = filteredAbilities.filter(a => a.effect); } // Sort by element, then power filteredAbilities.sort((a, b) => { if (a.type !== b.type) return a.type.localeCompare(b.type); return b.power - a.power; }); // Build ability list const abilityList = filteredAbilities.map(ability => { const style = elementStyles[ability.type] ?? elementStyles.flame; const isSelected = ability.name === selectedAbilityName; const effectInfo = ability.effect ? effectTypes[ability.effect] : null; // Escape ability name for use in JavaScript string (handle apostrophes etc) const escapedName = ability.name.replace(/'/g, "\\'").replace(/"/g, '\\"'); return `

${style.icon}

${ability.name}

${ability.power > 0 ? `Power: ${ability.power}` : ''} ${effectInfo ? `${effectInfo.icon} ${effectInfo.name}` : ''}

${ability.type}

`; }).join(''); // Build filter buttons const elementFilters = ['all', 'flame', 'water', 'earth', 'wind', 'light', 'dark'].map(elem => { const isActive = filterElement === elem; const style = elem === 'all' ? { color: '#8b7355', icon: '✦' } : elementStyles[elem]; return ` `; }).join(''); const typeFilters = [ { id: 'all', label: 'All', icon: '✦' }, { id: 'attack', label: 'Attacks', icon: '⚔️' }, { id: 'effect', label: 'Effects', icon: '✨' }, ].map(t => { const isActive = filterType === t.id; return ` `; }).join(''); // Details panel const detailsPanel = selectedAbility ? (() => { const style = elementStyles[selectedAbility.type] ?? elementStyles.flame; const effectInfo = selectedAbility.effect ? effectTypes[selectedAbility.effect] : null; return `

${style.icon}

${selectedAbility.name}

${selectedAbility.type} ${effectInfo ? `${effectInfo.name}` : ''}

${selectedAbility.power > 0 ? `

⚔️ Power ${selectedAbility.power}

` : ''} ${effectInfo ? `

${effectInfo.icon} ${effectInfo.name}

${effectInfo.desc}

` : ''}

📚 Learned By

${selectedAbility.spirits.map(s => ` ${s} `).join('')}

`; })() : `

⚡

Select an ability
to view details

`; // Summary stats const totalAbilities = abilities.length; const attackAbilities = abilities.filter(a => a.power > 0).length; const effectAbilities = abilities.filter(a => a.effect).length; return `

⚡ Abilities Database ${totalAbilities} total • ${attackAbilities} attacks • ${effectAbilities} effects

Element: ${elementFilters} | Type: ${typeFilters}

ABILITIES

${abilityList}

${detailsPanel}

`; } // === ADMIN: CODEX (World Lore & Documentation) === function renderCodex(state) { // Track which tab is active const activeTab = window._codexActiveTab ?? 'world-lore'; // Tab definitions const tabs = [ { id: 'world-lore', label: '🌍 World Lore', icon: '🌍' }, { id: 'character-designs', label: '🎨 Character Designs', icon: '🎨' }, ]; // Tab buttons const tabButtons = tabs.map(tab => { const isActive = activeTab === tab.id; return ` `; }).join(''); // Get content based on active tab let content = ''; if (activeTab === 'world-lore') { content = renderWorldLoreTab(); } else if (activeTab === 'character-designs') { content = renderCharacterDesignsTab(); } return `

📜 The Codex — Developer Lore Bible

${tabButtons}

${content}

`; } // === WORLD LORE TAB CONTENT === function renderWorldLoreTab() { return `

The Drift

A World Between Worlds

✧ The Birth of The Drift

Before time learned to count itself, there was only The Stillness — an infinite canvas of nothing, where even silence had not yet been born. Then came The First Breath, a cosmic exhale that shattered the void into a billion shimmering fragments.

These fragments did not scatter into chaos. They drifted. Slowly, gently, like cherry blossoms on an eternal wind, they found each other. Where two fragments touched, they sparked — and from that spark, the elements were born: Flame, Water, Earth, and Wind.

The world that formed was neither fully solid nor entirely dream. It existed in the spaces between moments, in the breath between heartbeats. The ancients called it The Drift — a realm where the impossible simply hadn't been told it couldn't exist.

🌟 The Spirits: Echoes of Creation

When the elements took form, they did not remain lifeless. The same creative force that birthed the world continued to breathe, and from the deepest pools of elemental energy, Spirits emerged — living embodiments of the world's primal essence.

Spirits are not animals. They are not gods. They are something older and stranger — memories of the world's first moments given form. A flame spirit does not merely control fire; it is fire's curiosity, its hunger, its warmth. A water spirit flows with the patience of rivers that have carved canyons over millennia.

🔥 Flame Spirits

Born from the first spark. They embody passion, courage, and transformation. Where flame spirits walk, flowers bloom from ash. They are fierce protectors but easily wounded by betrayal. A flame spirit's trust, once broken, may never rekindle.

💧 Water Spirits

Condensed from the first tears of joy. They embody patience, healing, and memory. Water spirits remember everything — every kindness, every slight. They forgive slowly but love deeply. Their presence brings clarity to troubled minds.

🪨 Earth Spirits

Crystallized from the first mountain's heart. They embody strength, loyalty, and endurance. Earth spirits move slowly but are unstoppable once in motion. They form bonds that last centuries and grieve losses for just as long.

🍃 Wind Spirits

Woven from the first whispered secret. They embody freedom, curiosity, and change. Wind spirits cannot be caged or owned — only befriended. They carry messages between realms and know paths that exist only when needed.

☀️ Light Spirits

Radiated from Solienne's first blessing. They embody hope, healing, and revelation. Light spirits are drawn to those who have suffered, offering comfort without words. They cannot abide deception — in their presence, all truths become visible. To bond with one is to accept being truly seen.

🌙 Dark Spirits

Coalesced from Morduin's shadow. They embody secrets, protection, and necessary endings. Dark spirits are deeply misunderstood — they are not evil, but they understand that some things must end for others to begin. They guard what others fear to touch, and love with a fierce, quiet intensity.

There are whispers of other elements — Shadow, Crystal, Lightning, and more — spirits born from the spaces between the primordial four. These are rarer, stranger, and often misunderstood. To bond with one is to touch something truly ancient.

👁️ The Primordials: Gods and Goddesses of The Drift

Before the lesser spirits emerged, before the first Drifter drew breath, six beings crystallized from the purest concentrations of the First Breath. They are not merely powerful spirits — they are the architects of existence itself, each governing a fundamental truth of The Drift.

The ancients called them The Primordials. They do not bond with mortals. They do not answer prayers. They simply are — vast, eternal, and utterly beyond comprehension. To glimpse one is to be changed forever. To be noticed by one... is to become legend.

✧ The Three Goddesses ✧

☀️ Solienne, The Mending Light

Goddess of Healing, Compassion, and Renewal

Unlike the other Primordials, Solienne takes a form mortals can comprehend — a tall, luminous figure draped in robes that shimmer like sunlight through autumn leaves. Her face is said to be impossibly kind, with eyes that hold no judgment, only understanding. She appears to those in their darkest moments — not to save them, but to remind them they are worth saving.

Solienne does not heal wounds of the flesh. She mends spiritual fractures — the invisible scars left by broken bonds, lost loved ones, and forgotten purpose. The Shrine Keepers are her devoted followers, taught to channel even a fraction of her restorative light. It is said that Bonding Crystals are formed from her tears, shed each time a spirit and Drifter find true harmony.

"She found me when I had given up. She didn't speak. She just... sat with me. And somehow, that was enough." — Anonymous pilgrim's journal

🌊 Thessaly of the Depths

Goddess of Memory, Prophecy, and the Unconscious

Thessaly has no single form. She is the darkness beneath every ocean, the stillness at the bottom of every well, the silence between heartbeats. Those who meditate beside deep water sometimes feel her presence — an ancient awareness regarding them from below, neither hostile nor welcoming, simply observing.

She is the keeper of all memories — not just mortal recollections, but the memories of water itself. Every river remembers its source. Every tear remembers why it fell. Thessaly knows them all. Seers claim that true prophecy comes from her whispers, carried through rainfall and morning dew. The Sacred Pond in Whisperwind Village is said to be one of her eyes, and those who gaze into it sometimes see visions meant only for them.

"Do not ask Thessaly for answers. She speaks only in reflections, and reflections show us what we already know but refuse to see." — Aeris

🌬️ Verathen the Unwritten

Goddess of Change, Possibility, and Forgotten Paths

Verathen cannot be seen, only felt. She is the sudden gust that changes your direction. The inexplicable urge to take a different path home. The dream you can't quite remember but that fills you with longing. She exists in all possible timelines simultaneously, which is why she can never fully manifest in just one.

Wind spirits are closest to her nature, and the most powerful among them serve as her unconscious messengers. Verathen is said to appear at moments of great choice — crossroads of destiny where a single decision ripples through eternity. She does not guide these choices. She simply ensures they remain possible. Without her, the world would calcify into a single unchanging path. She is chaos, but the necessary kind.

"I felt her once, when I almost didn't leave home. A wind that smelled of places I'd never been. I followed it, and... well. Here I am." — A Drifter's testimony

✦ The Three Gods ✦

⛰️ Kharros the Slumbering Mountain

God of Endurance, Foundation, and Eternal Dreams

Kharros does not live in the mountains. Kharros is the mountains. Every peak, every canyon, every cave system — they are all fragments of his incomprehensibly vast form, curled in slumber since before time began counting. The world's geography is his dream made manifest; when he shifts in his sleep, earthquakes reshape continents.

Earth spirits instinctively know his presence, feeling his slow heartbeat in the vibrations of deep stone. Some say he will wake one day, though whether this would mean salvation or apocalypse, no one can agree. Miners and stone-workers leave offerings at cave entrances — not in worship, but in apology for disturbing his rest.

"Listen to the old stones. They still hum with his breathing. Slow. Patient. Older than old." — Earth spirit proverb

🔥 Pyreth the First Ember

God of Passion, Destruction, and Transformation

Before there was light, there was Pyreth — a flame that burned in absolute darkness, fueled by nothing, consuming nothing, simply existing as pure potential energy. When the First Breath came, Pyreth exploded into being, and from that detonation, all warmth in the universe was born.

Pyreth does not reside in The Drift. He orbits it endlessly, a blazing comet of consciousness that never touches the world directly — for if he did, everything would burn. Flame spirits carry fragments of his essence, which is why they are both creative and destructive. The sun is not Pyreth himself, merely his shadow cast upon existence. To channel fire is to borrow from his infinite hunger.

"Pyreth does not hate. Pyreth does not love. Pyreth simply burns, and in burning, makes room for what comes next." — Shrine Keeper teaching

🌑 Morduin the Threshold

God of Boundaries, Shadows, and Necessary Endings

Where The Drift ends, The Stillness begins — and at that boundary stands Morduin. He is neither light nor dark, neither alive nor dead. He is the line itself, the definition of where one thing stops and another begins. Without him, all existence would blur into formless chaos.

Morduin is not evil, though many fear him. He guards the threshold between being and unbeing, ensuring that what is dead stays dead, and what is living does not leak into the void. Shadow spirits are said to serve him, patrolling the edges of reality. The Hollow — corrupted spirits — are what happens when something slips past his watch, touched by the Stillness but not fully claimed. Some say the Forsaken have bargained with him, trading pieces of their souls for power no mortal should hold.

"He is not cruel. He is not kind. He is the door that must remain closed, and the lock that must hold. Pray you never need to knock." — Warning to young Drifters

The Primordials do not interfere in mortal affairs — but their influence echoes through everything. Every flame carries Pyreth's hunger. Every still pond reflects Thessaly's gaze. Every crossroad whispers with Verathen's possibilities. To be a Drifter is to walk through a world shaped by beings beyond comprehension, leaving footprints in the dreams of gods.

💫 The Sacred Bond

Spirits and humans were not meant to be alone. The same creative force that birthed both left a hollow space in each — a yearning that only connection could fill. When a human and spirit choose each other, their souls intertwine in what the ancients called The Resonance.

This is not ownership. This is not servitude. It is partnership — two incomplete melodies becoming one song. A bonded spirit shares its elemental strength with its Drifter; in return, the Drifter gives the spirit something it cannot have alone: purpose.

"We do not capture spirits. We do not tame them. We ask, and if our hearts are true, they answer."
— First teaching of the Shrine Keepers

The bond is sealed through Bonding Crystals — ancient artifacts that resonate with elemental frequencies. When a spirit accepts a bond, the crystal captures the essence of that connection, allowing the spirit to travel with its Drifter, to rest, to grow alongside them.

But bonds can be broken. Through cruelty, neglect, or simply growing apart, the resonance can fade. A spirit whose bond shatters does not die — but something in them dims. They return to the wild, often more cautious, often sadder. The wisest Drifters know: a bond is a responsibility, not a right.

🚶 The Drifters: Wanderers of The Between

Not everyone can hear the spirits' call. Most humans live ordinary lives, aware of the magical world around them but unable to truly touch it. But some are born with The Resonance already humming in their souls — a harmonic frequency that spirits can sense across vast distances.

These individuals are called Drifters. They feel the pull of the Between, the irresistible urge to wander, to explore, to connect. Many describe it as homesickness for places they've never been.

Drifters are neither warriors nor wizards in the traditional sense. They do not command spirits — they walk alongside them. Their power comes from the bonds they form, the trust they build, the harmony they achieve with the elemental forces of the world.

The Three Paths of the Drifter

The Shepherd — Those who seek to understand and protect all spirits, bonding widely but never possessively.
The Partner — Those who form few but profound bonds, growing so close to their spirits they can almost hear each other's thoughts.
The Seeker — Those who search for legendary spirits, the ancient ones sleeping in forgotten places, waiting for worthy souls.

⚠️ Shadows in The Drift

The Drift is beautiful, but it is not safe. The same forces that birth spirits can twist them. Where elemental energy pools too densely without release, it corrupts. Spirits touched by this corruption become Hollow — their eyes dim, their forms distort, their temperaments turn savage.

Hollow spirits attack without reason, devour elemental energy from anything they touch, and cannot form bonds. Some say they can be healed — that beneath the corruption, the original spirit still screams for release. Others say that mercy is destruction; that freeing the spirit within means ending the monster without.

Worse still are The Forsaken — Drifters who broke their bonds through betrayal, whose resonance has inverted. They can still sense spirits, still bond with them, but the connection is wrong. Parasitic. They drain their spirits rather than share with them. Most Forsaken don't survive long; the guilt eats them alive. But some... some find they enjoy the power.

"The darkness does not come from outside. It is simply what remains when the light forgets to shine."
— Warning inscribed on the Shrine of First Light

🏘️ Whisperwind Village

Nestled in a valley where four ley lines cross, Whisperwind Village has been a sanctuary for Drifters since before anyone can remember. The wind here carries voices — fragments of conversations from other times, other places. Listen carefully, and you might hear your own future whispering back.

The village was founded around the Shrine of First Light, built on the exact spot where the First Breath is said to have touched the earth. The shrine is tended by Aeris, a Shrine Keeper whose age is a polite mystery. She has welcomed every Drifter to pass through these lands for generations — perhaps longer.

The Sacred Pond beside the shrine is no ordinary body of water. It is said that spirits were first seen rising from its depths, and to this day, the pond serves as a place of bonding ceremonies. When a spirit accepts a Drifter, the water glows — a phenomenon that never fails to bring tears to those who witness it.

The Healer's Hearth

Run by Lunara, a gentle soul who can mend both body and spirit. Her remedies use herbs that only grow where spirits have passed.

The Ancient Portal

A mysterious stone archway that hums with energy. Its purpose is forgotten, but touching it feels like being remembered by something vast.

🌾 Beyond the Village

Beyond the village boundaries lie The Sweeping Plains — endless seas of golden grass that ripple like water in the eternal breeze. This is wild territory, where spirits roam free and only the bold venture.

Wild spirits here are not hostile by nature, but they are territorial. They test those who enter their domains, challenging Drifters to prove their worth. These encounters are not battles of dominance — they are conversations in the language of the elements. A spirit that respects you may choose to follow. One that doesn't will simply leave, unimpressed.

The Plains stretch far beyond what any map can show. Drifters speak of forests that sing, mountains that sleep, oceans that remember. Each region holds its own mysteries, its own legendary spirits, its own forgotten shrines.

"The world is larger than your lifetime. Do not rush. The spirits have been waiting since before your grandparents were born. They can wait a little longer for you to be ready."
— Aeris, to every new Drifter

This is The Drift. A world that dreams itself into being.
Walk gently. Listen carefully. Bond truly.
And remember: you are never truly alone.

`; } // === CHARACTER DESIGNS TAB CONTENT === function renderCharacterDesignsTab() { return `

Character Design Reference

Canonical Visual Guidelines for Key Characters

☀️ Solienne, The Mending Light

Primordial Goddess of Healing, Compassion, and Renewal

"She appears to those in their darkest moments — not to save them, but to remind them they are worth saving."

✧ Overall Impression

Where Aeris is warm and approachable, Solienne is transcendent. She radiates gentle, healing light — not blinding, but like the first rays of dawn breaking through clouds. She feels ancient and eternal, yet endlessly compassionate. Standing before her should feel like being wrapped in warm sunlight after a long winter.

💫 Hair

Color: Pure platinum blonde, almost white with golden undertones
Length: Impossibly long — flows past her feet and trails behind her like liquid light
Texture: Soft waves that move as if underwater, even when still
Effect: Seems to emit a faint glow at the ends, like light caught in gossamer threads

👁️ Face

Features: Serene, ageless — could be 20 or 2000 years old
Eyes: Large, luminous eyes in pale gold or soft amber, like captured sunlight
Expression: Gentle, knowing — eyes that have witnessed all suffering and chosen mercy
Special detail: Faint luminescent markings under her eyes, like dried tear-trails that shimmer (representing the Bonding Crystals born from her tears)

🌸 Headdress

Style: A delicate wreath of white flowers (lilies or similar) and golden leaves
Adornment: Small crystal teardrops woven throughout that catch light
Key difference from Aeris: NO feathers — more organic, growing, alive. Where Aeris has tribal feathers, Solienne has natural blooms

👗 Dress

Silhouette: Similar layered, petal-like structure to Aeris's feathered dress
Material: Appears to be made of light itself — white fabric woven from moonbeams
Texture: Layers look like flower petals or soft feathers made of pure radiance
Effect: Edges blur slightly, as if she's not entirely solid. Trails into luminous mist at the hem
Movement: The dress moves with a life of its own, as if stirred by an unfelt breeze

💎 Jewelry

Color palette: Pale gold and crystal (NOT turquoise — that is Aeris's signature)
Necklace: A teardrop-shaped crystal pendant at her throat (the original Bonding Crystal, perhaps)
Accessories: Delicate golden cuffs at wrists and ankles
Quality: Everything catches light beautifully, seems to glow faintly

✨ Skin & Physicality

Skin: Pale, luminous — seems to glow faintly from within, like candlelight through porcelain
Feet: Bare like Aeris, but they barely seem to touch the ground
Presence: Slightly translucent at the edges, suggesting she exists partially in another realm

🌟 Aura & Effects

Particles: Sof